MMT-4087: Replace crypto call to get uuid by using uuid v4 (#1416)

* MMT-4087: Replace crypto call to get uuid by v4

* MMT-4087: Running npm audit fix

* MMT-4087: Do not need mock because its being called in jest.config

---------

Co-authored-by: Ed Olivares <34591886+eudoroolivares2016@users.noreply.github.com>

Author: htranho

package-lock.json

@@ -1,5 +1,5 @@
 import { PutObjectCommand } from '@aws-sdk/client-s3'
-import crypto from 'crypto'
+import { v4 as uuidv4 } from 'uuid'
 
 import { getApplicationConfig } from '../../../sharedUtils/getConfig'
 import { getS3Client } from '../utils/getS3Client'
@@ -22,7 +22,7 @@ const createTemplate = async (event) => {
   const { TemplateName: templateName } = JSON.parse(body)
 
   const hashedName = Buffer.from(templateName).toString('base64')
-  const guid = crypto.randomUUID()
+  const guid = uuidv4()
 
   const { COLLECTION_TEMPLATES_BUCKET_NAME: collectionTemplatesBucketName } = process.env
   const createCommand = new PutObjectCommand({

serverless/src/createTemplate/handler.js

@@ -1,13 +1,15 @@
 import React from 'react'
 
+import { v4 as uuidv4 } from 'uuid'
+
 import errorLogger from '@/js/utils/errorLogger'
 
 import Header from '../Header/Header'
 
 import './ErrorPageNotFound.scss'
 
 const ErrorPageNotFound = () => {
-  const guid = crypto.randomUUID()
+  const guid = uuidv4()
 
   errorLogger(`404 Not Found see ${guid}`, 'user attempted to access a page that does not exist')
 

static/src/js/components/ErrorPageNotFound/ErrorPageNotFound.jsx

@@ -11,11 +11,6 @@ import AuthContext from '@/js/context/AuthContext'
 import ErrorPageNotFound from '../ErrorPageNotFound'
 
 vi.mock('@/js/utils/errorLogger')
-vi.mock('crypto', () => ({
-  default: {
-    randomUUID: () => 'mock-uuid'
-  }
-}))
 
 const setup = () => {
   const context = {

static/src/js/components/ErrorPageNotFound/__tests__/ErrorPageNotFound.test.jsx

@@ -9,6 +9,7 @@ import pluralize from 'pluralize'
 import React, { useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import validator from '@rjsf/validator-ajv8'
+import { v4 as uuidv4 } from 'uuid'
 
 import BoundingRectangleField from '@/js/components/BoundingRectangleField/BoundingRectangleField'
 import CustomArrayTemplate from '@/js/components/CustomArrayFieldTemplate/CustomArrayFieldTemplate'
@@ -164,8 +165,8 @@ const MetadataForm = () => {
     // Add '-draft' to the end of nativeId if it doesn't already end with it.
     // Can be removed after CMR-10545 is complete
     derivedConceptType === 'Visualization' || derivedConceptType === 'Citation'
-      ? `MMT_${crypto.randomUUID()}-draft`
-      : `MMT_${crypto.randomUUID()}`
+      ? `MMT_${uuidv4()}-draft`
+      : `MMT_${uuidv4()}`
   )
 
   const schema = getUmmSchema(derivedConceptType)

static/src/js/components/MetadataForm/MetadataForm.jsx

@@ -20,6 +20,7 @@ import {
   FaEye,
   FaTrash
 } from 'react-icons/fa'
+import { v4 as uuidv4 } from 'uuid'
 
 import conceptTypeQueries from '@/js//constants/conceptTypeQueries'
 import deleteMutationTypes from '@/js//constants/deleteMutationTypes'
@@ -138,7 +139,7 @@ const PublishPreviewHeader = () => {
 
   // Calls ingestDraft mutation with a new nativeId
   const handleClone = () => {
-    const cloneNativeId = `MMT_${crypto.randomUUID()}`
+    const cloneNativeId = `MMT_${uuidv4()}`
     // Removes the value from the metadata that has to be unique
     const modifiedMetadata = removeMetadataKeys(ummMetadata, ['Name', 'LongName', 'ShortName', 'EntryTitle'])
 

static/src/js/components/PublishPreview/PublishPreview.jsx

@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/Row'
 import Form from '@rjsf/core'
 import validator from '@rjsf/validator-ajv8'
 import { isEmpty, kebabCase } from 'lodash-es'
+import { v4 as uuidv4 } from 'uuid'
 
 import useAppContext from '@/js/hooks/useAppContext'
 
@@ -217,7 +218,7 @@ const TemplateForm = () => {
     }
 
     if (type === saveTypes.saveAndCreateDraft) {
-      const nativeId = `MMT_${crypto.randomUUID()}`
+      const nativeId = `MMT_${uuidv4()}`
 
       delete ummMetadata.TemplateName
 

static/src/js/components/TemplateForm/TemplateForm.jsx

@@ -7,6 +7,7 @@ import validator from '@rjsf/validator-ajv8'
 import camelcaseKeys from 'camelcase-keys'
 import { FaCopy, FaTrash } from 'react-icons/fa'
 import { CollectionPreview } from '@edsc/metadata-preview'
+import { v4 as uuidv4 } from 'uuid'
 
 import collectionsTemplateConfiguration from '@/js/schemas/uiForms/collectionTemplatesConfiguration'
 import ummCTemplateSchema from '@/js/schemas/umm/ummCTemplateSchema'
@@ -109,7 +110,7 @@ const TemplatePreview = () => {
 
   const handleCreateCollectionDraft = () => {
     const { ummMetadata } = draft
-    const nativeId = `MMT_${crypto.randomUUID()}`
+    const nativeId = `MMT_${uuidv4()}`
 
     delete ummMetadata.TemplateName
 

static/src/js/components/TemplatePreview/TemplatePreview.jsx

@@ -1,6 +1,7 @@
 import React, { Suspense, useState } from 'react'
 import { useNavigate, useParams } from 'react-router'
 import { FaPlus, FaFileUpload } from 'react-icons/fa'
+import { v4 as uuidv4 } from 'uuid'
 
 import urlValueTypeToConceptTypeStringMap from '@/js/constants/urlValueToConceptStringMap'
 
@@ -67,7 +68,7 @@ const DraftListPageHeader = () => {
       variables: {
         conceptType,
         metadata: removeEmpty(draftToSave),
-        nativeId: `MMT_${crypto.randomUUID()}`,
+        nativeId: `MMT_${uuidv4()}`,
         providerId,
         ummVersion: getUmmVersion(conceptType)
       },

static/src/js/pages/DraftListPage/DraftListPage.jsx

@@ -16,14 +16,12 @@ vi.mock('lodash-es', async () => ({
   debounce: vi.fn((fn) => fn)
 }))
 
-vi.mock('crypto', () => ({
-  default: {
-    randomUUID: () => 'mock-uuid'
-  }
+vi.mock('uuid', () => ({
+  v4: () => 'mock-uuid'
 }))
 
-Object.defineProperty(globalThis, 'crypto', {
+Object.defineProperty(globalThis, 'uuid', {
   value: {
-    randomUUID: () => 'mock-uuid'
+    v4: () => 'mock-uuid'
   }
 })