[no-Jira] Replace uuid package with native crypto.randomUUID

package.json

@@ -83,7 +83,6 @@
     "rollbar": "^2.25.2",
     "tslib": "^2.4.0",
     "tss-react": "^4.1.3",
-    "uuid": "^9.0.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {

pages/accountLists/[accountListId]/contacts/flows/setup.page.tsx

@@ -7,7 +7,6 @@ import { useSnackbar } from 'notistack';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import { colorMap } from 'src/components/Contacts/ContactFlow/ContactFlow';
 import { ContactFlowSetupColumn } from 'src/components/Contacts/ContactFlow/ContactFlowSetup/Column/ContactFlowSetupColumn';
@@ -72,7 +71,7 @@ const ContactFlowSetupPage: React.FC = () => {
       ...flowOptions,
       {
         name: 'Untitled',
-        id: uuidv4(),
+        id: crypto.randomUUID(),
         statuses: [],
         color: 'color-text',
       },

pages/api/uploads/upload-person-avatar.page.ts

@@ -3,7 +3,6 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import formidable, { IncomingForm } from 'formidable';
 import { getToken } from 'next-auth/jwt';
 import fetch, { File, FormData } from 'node-fetch';
-import { v4 as uuidv4 } from 'uuid';
 
 export const config = {
   api: {
@@ -59,7 +58,7 @@ const uploadPersonAvatar = async (
       return;
     }
 
-    const pictureId = uuidv4();
+    const pictureId = crypto.randomUUID();
     const file = new File(
       [await readFile(avatar.filepath)],
       avatar.originalFilename ?? 'avatar',

src/components/Contacts/ContactFlow/contactFlowDefaultOptions.ts

@@ -1,5 +1,4 @@
 import { TFunction } from 'i18next';
-import { v4 as uuidv4 } from 'uuid';
 import { PhaseEnum, StatusEnum } from 'src/graphql/types.generated';
 import { ContactFlowOption } from './ContactFlow';
 
@@ -18,13 +17,13 @@ export const getDefaultFlowOptions = (
     case DefaultTypeEnum.Global:
       return [
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: t('Contacts'),
           statuses: [StatusEnum.NeverContacted, StatusEnum.ResearchContactInfo],
           color: 'color-error',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: t('Call Backs'),
           statuses: [
             StatusEnum.CallForDecision,
@@ -33,13 +32,13 @@ export const getDefaultFlowOptions = (
           color: 'color-info',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: t('Appointments'),
           statuses: [StatusEnum.AppointmentScheduled],
           color: 'color-warning',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: t('Future Contacts'),
           statuses: [
             StatusEnum.PartnerPray,
@@ -51,7 +50,7 @@ export const getDefaultFlowOptions = (
           color: 'color-success',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: t('Maintaining'),
           statuses: [StatusEnum.CultivateRelationship],
           color: 'color-text',
@@ -60,37 +59,37 @@ export const getDefaultFlowOptions = (
     default:
       return [
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.Connection),
           statuses: getContactStatusesByPhase(PhaseEnum.Connection),
           color: 'color-warning',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.Initiation),
           statuses: getContactStatusesByPhase(PhaseEnum.Initiation),
           color: 'color-info',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.Appointment),
           statuses: getContactStatusesByPhase(PhaseEnum.Appointment),
           color: 'color-success',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.FollowUp),
           statuses: getContactStatusesByPhase(PhaseEnum.FollowUp),
           color: 'color-warning',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.PartnerCare),
           statuses: getContactStatusesByPhase(PhaseEnum.PartnerCare),
           color: 'color-success',
         },
         {
-          id: uuidv4(),
+          id: crypto.randomUUID(),
           name: getLocalizedPhase(PhaseEnum.Archive),
           statuses: getContactStatusesByPhase(PhaseEnum.Archive),
           color: 'color-text',

src/components/Dashboard/ThisWeek/NewsletterMenu/MenuItems/LogNewsLetter/LogNewsletter.test.tsx

@@ -15,9 +15,6 @@ import LogNewsletter from './LogNewsletter';
 
 const accountListId = 'abc';
 const handleClose = jest.fn();
-jest.mock('uuid', () => ({
-  v4: (): string => 'comment-0',
-}));
 
 describe('LogNewsletter', () => {
   beforeEach(() => {

src/components/Task/MassActions/EditTasks/MassActionsEditTasksModal.tsx

@@ -11,7 +11,6 @@ import {
 import { Formik } from 'formik';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import * as yup from 'yup';
 import { useMassActionsUpdateTasksMutation } from 'src/components/Task/MassActions/MassActionsUpdateTasks.generated';
 import { useCreateTaskCommentMutation } from 'src/components/Task/Modal/Comments/Form/CreateTaskComment.generated';
@@ -110,7 +109,7 @@ export const MassActionsEditTasksModal: React.FC<
             variables: {
               accountListId,
               taskId,
-              attributes: { id: uuidv4(), body },
+              attributes: { id: crypto.randomUUID(), body },
             },
           }),
         )

src/components/Task/Modal/Comments/Form/TaskModalCommentsListForm.tsx

@@ -5,7 +5,6 @@ import { motion } from 'framer-motion';
 import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import { useCreateTaskCommentMutation } from 'src/components/Task/Modal/Comments/Form/CreateTaskComment.generated';
 import {
   TaskRowFragment,
@@ -38,7 +37,7 @@ export const TaskModalCommentsListForm = ({
     values: CommentSchemaAttributes,
     { resetForm }: FormikHelpers<TaskCommentCreateInput>,
   ): Promise<void> => {
-    const id = uuidv4();
+    const id = crypto.randomUUID();
     const body = values.body.trim();
     const user = session.data?.user;
     resetForm();

src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.test.tsx

@@ -40,10 +40,6 @@ beforeEach(() => {
 
 jest.mock('src/lib/analytics');
 
-jest.mock('uuid', () => ({
-  v4: (): string => 'comment-1',
-}));
-
 const accountListId = 'abc';
 const taskId = 'task-1';
 const task = {

src/components/Task/Modal/Form/Complete/TaskModalCompleteForm.tsx

@@ -14,7 +14,6 @@ import { Formik } from 'formik';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import * as yup from 'yup';
 import {
   CancelButton,
@@ -177,7 +176,7 @@ const TaskModalCompleteForm = ({
           variables: {
             accountListId,
             taskId: task.id,
-            attributes: { id: uuidv4(), body },
+            attributes: { id: crypto.randomUUID(), body },
           },
         }),
       );

src/components/Task/Modal/TaskModalProvider.tsx

@@ -1,5 +1,4 @@
 import { ReactElement, ReactNode, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import theme from 'src/theme';
 import { preloadTaskModalCommentsList } from './Comments/DynamicTaskModalCommentsList';
 import { preloadTaskModalCompleteForm } from './Form/Complete/DynamicTaskModalCompleteForm';
@@ -25,7 +24,7 @@ interface TaskModalPropsWithId extends TaskModalProps {
 const TaskModalProvider = ({ children }: Props): ReactElement => {
   const [taskModals, setTaskModals] = useState<TaskModalPropsWithId[]>([]);
   const openTaskModal = (taskModalProps: TaskModalProps): void => {
-    const id = uuidv4();
+    const id = crypto.randomUUID();
     if (
       !taskModalProps.taskId ||
       !taskModals.find(

src/components/Tool/Appeal/Flow/ContactFlow.tsx

@@ -4,7 +4,6 @@ import { useSnackbar } from 'notistack';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
 import { PledgeStatusEnum } from 'src/graphql/types.generated';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
@@ -46,31 +45,31 @@ export const colorMap: { [key: string]: string } = {
 
 const flowOptions: ContactFlowOption[] = [
   {
-    id: uuidv4(),
+    id: crypto.randomUUID(),
     name: i18n.t('Excluded'),
     status: AppealStatusEnum.Excluded,
     color: colorMap['color-danger'],
   },
   {
-    id: uuidv4(),
+    id: crypto.randomUUID(),
     name: i18n.t('Asked'),
     status: AppealStatusEnum.Asked,
     color: colorMap['color-text'],
   },
   {
-    id: uuidv4(),
+    id: crypto.randomUUID(),
     name: i18n.t('Committed'),
     status: AppealStatusEnum.NotReceived,
     color: colorMap['color-committed'],
   },
   {
-    id: uuidv4(),
+    id: crypto.randomUUID(),
     name: i18n.t('Received'),
     status: AppealStatusEnum.ReceivedNotProcessed,
     color: colorMap['color-received'],
   },
   {
-    id: uuidv4(),
+    id: crypto.randomUUID(),
     name: i18n.t('Given'),
     status: AppealStatusEnum.Processed,
     color: colorMap['color-given'],

yarn.lock

@@ -15148,7 +15148,6 @@ __metadata:
     tss-react: ^4.1.3
     typescript: ~5.6.3
     url-loader: ^4.1.1
-    uuid: ^9.0.0
     webpack: ^5.96.1
     yup: ^1.4.0
   languageName: unknown