[148] Remove usage of the uuid npm package

frontend/svalyn-studio-app/package.json

@@ -26,8 +26,7 @@
     "react-markdown": "8.0.6",
     "react-resizable-panels": "0.0.37",
     "react-router-dom": "6.9.0",
-    "reactflow": "11.7.0",
-    "uuid": "9.0.0"
+    "reactflow": "11.7.0"
   },
   "devDependencies": {
     "@playwright/test": "1.32.1",

frontend/svalyn-studio-app/src/views/changeproposal/ReviewDialog.tsx

@@ -31,7 +31,6 @@ import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
 import TextField from '@mui/material/TextField';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
 import {
   ErrorPayload,
@@ -95,7 +94,7 @@ export const ReviewDialog = ({ changeProposalId, open, onClose, onReviewed }: Re
   const onSubmitReview: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: PerformReviewVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         changeProposalId,
         message: state.review,
         status: state.status,

frontend/svalyn-studio-app/src/views/changeproposal/overview/ChangeProposalOverview.tsx

@@ -28,7 +28,6 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { v4 as uuid } from 'uuid';
 import { EditReadMeDialog } from '../../../dialogs/EditReadMeDialog';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
@@ -146,7 +145,7 @@ export const ChangeProposalOverview = ({ changeProposalId, role }: ChangeProposa
   const handleReadMeUpdate = (value: string) => {
     const variables: UpdateChangeProposalReadMeVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         changeProposalId,
         content: value,
       },

frontend/svalyn-studio-app/src/views/changeproposal/overview/ChangeProposalStatus.tsx

@@ -37,7 +37,6 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import Typography from '@mui/material/Typography';
 import { useEffect, useRef, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ReviewDialog } from '../ReviewDialog';
 import {
   ChangeProposalStatusProps,
@@ -101,7 +100,7 @@ export const ChangeProposalStatus = ({ changeProposal, onStatusUpdated }: Change
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: UpdateChangeProposalStatusVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         changeProposalId: changeProposal.id,
         status: state.selectedOptionIndex === 0 ? 'INTEGRATED' : 'CLOSED',
       },

frontend/svalyn-studio-app/src/views/invitations/InvitationsView.tsx

@@ -32,7 +32,6 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { Navbar } from '../../navbars/Navbar';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
 import {
@@ -133,7 +132,7 @@ export const InvitationsView = () => {
   const handleAcceptInvitation = (invitation: Invitation) => {
     const variables: AcceptInvitationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier: invitation.organization.identifier,
         invitationId: invitation.id,
       },
@@ -165,7 +164,7 @@ export const InvitationsView = () => {
   const handleDeclineInvitation = (invitation: Invitation) => {
     const variables: DeclineInvitationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier: invitation.organization.identifier,
         invitationId: invitation.id,
       },

frontend/svalyn-studio-app/src/views/new-changeproposal/NewChangeProposalView.tsx

@@ -35,8 +35,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { Link as RouterLink, Navigate, useParams } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
+import { Navigate, Link as RouterLink, useParams } from 'react-router-dom';
 import { getCookie } from '../../cookies/getCookie';
 import { Navbar } from '../../navbars/Navbar';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
@@ -150,7 +149,7 @@ export const NewChangeProposalView = () => {
 
           const variables: CreateChangeProposalVariables = {
             input: {
-              id: uuid(),
+              id: crypto.randomUUID(),
               projectIdentifier,
               name: state.name,
               resourceIds,

frontend/svalyn-studio-app/src/views/new-organization/NewOrganizationView.tsx

@@ -24,13 +24,12 @@ import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Paper, { PaperProps } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 import { useEffect, useState } from 'react';
-import { Link as RouterLink, Navigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
+import { Navigate, Link as RouterLink } from 'react-router-dom';
 import { Navbar } from '../../navbars/Navbar';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
 import {
@@ -121,7 +120,7 @@ export const NewOrganizationView = () => {
 
   const handleCreateOrganization: React.MouseEventHandler<HTMLButtonElement> = () => {
     const input: CreateOrganizationInput = {
-      id: uuid(),
+      id: crypto.randomUUID(),
       identifier: state.organizationId,
       name: state.name,
     };

frontend/svalyn-studio-app/src/views/notifications/NotificationsView.tsx

@@ -39,7 +39,6 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { Navbar } from '../../navbars/Navbar';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
 import { formatTime } from '../../utils/formatTime';
@@ -232,21 +231,33 @@ export const NotificationsView = () => {
                     onMarkAsDone={() =>
                       updateNotificationsStatus({
                         variables: {
-                          input: { id: uuid(), notificationIds: state.selectedNotifications, status: 'DONE' },
+                          input: {
+                            id: crypto.randomUUID(),
+                            notificationIds: state.selectedNotifications,
+                            status: 'DONE',
+                          },
                         },
                       })
                     }
                     onMarkAsRead={() =>
                       updateNotificationsStatus({
                         variables: {
-                          input: { id: uuid(), notificationIds: state.selectedNotifications, status: 'READ' },
+                          input: {
+                            id: crypto.randomUUID(),
+                            notificationIds: state.selectedNotifications,
+                            status: 'READ',
+                          },
                         },
                       })
                     }
                     onMarkAsUnread={() =>
                       updateNotificationsStatus({
                         variables: {
-                          input: { id: uuid(), notificationIds: state.selectedNotifications, status: 'UNREAD' },
+                          input: {
+                            id: crypto.randomUUID(),
+                            notificationIds: state.selectedNotifications,
+                            status: 'UNREAD',
+                          },
                         },
                       })
                     }

frontend/svalyn-studio-app/src/views/organization/NewProjectDialog.tsx

@@ -24,12 +24,11 @@ import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
-import { Theme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
 import { useEffect, useState } from 'react';
 import { Navigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../snackbar/ErrorSnackbar';
 import {
   CreateProjectData,
@@ -120,7 +119,7 @@ export const NewProjectDialog = ({ organizationIdentifier, open, onClose }: NewP
     const { identifier, name, description } = state;
     const variables: CreateProjectVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         identifier: identifier,
         name,

frontend/svalyn-studio-app/src/views/organization/members/Invitations.tsx

@@ -32,7 +32,6 @@ import TableRow from '@mui/material/TableRow';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   ErrorPayload,
@@ -134,7 +133,7 @@ export const Invitations = ({ organizationIdentifier, role }: InvitationsProps)
   const handleRevokeInvitation = (invitation: Invitation) => {
     const variables: RevokeInvitationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         invitationId: invitation.id,
       },

frontend/svalyn-studio-app/src/views/organization/members/InviteMemberDialog.tsx

@@ -26,7 +26,6 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   ErrorPayload,
@@ -81,7 +80,7 @@ export const InviteMemberDialog = ({ organizationIdentifier, open, onClose }: In
   const sendInvitation: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: InviteMemberVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         email: state.email,
       },

frontend/svalyn-studio-app/src/views/organization/members/LeaveOrganizationDialog.tsx

@@ -26,7 +26,6 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   ErrorPayload,
@@ -76,7 +75,7 @@ export const LeaveOrganizationDialog = ({ organizationIdentifier, open, onClose
   const handleLeaveOrganization: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: LeaveOrganizationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
       },
     };

frontend/svalyn-studio-app/src/views/organization/members/Memberships.tsx

@@ -30,7 +30,6 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   ErrorPayload,
@@ -136,7 +135,7 @@ export const Memberships = ({ organizationIdentifier, role }: MembershipsProps)
   const handleRevoke = () => {
     const variables: RevokeMembershipsVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         membershipIds: state.selectedMembershipIds,
       },

frontend/svalyn-studio-app/src/views/organization/settings/DeleteOrganizationDialog.tsx

@@ -26,7 +26,6 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   DeleteOrganizationData,
@@ -76,7 +75,7 @@ export const DeleteOrganizationDialog = ({ organizationIdentifier, open, onClose
   const handleDeleteOrganization: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: DeleteOrganizationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
       },
     };

frontend/svalyn-studio-app/src/views/organization/settings/OrganizationSettings.tsx

@@ -26,7 +26,6 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import { DeleteOrganizationDialog } from './DeleteOrganizationDialog';
 import {
@@ -86,7 +85,7 @@ export const OrganizationSettings = ({ organizationIdentifier, role }: Organizat
   const handleRename: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: UpdateOrganizationNameVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         name: state.name,
       },

frontend/svalyn-studio-app/src/views/organization/tags/OrganizationTags.tsx

@@ -33,7 +33,6 @@ import TableRow from '@mui/material/TableRow';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
   AddTagToOrganizationData,
@@ -139,7 +138,7 @@ export const OrganizationTags = ({ organizationIdentifier, role }: OrganizationT
   const handleAddTag: React.MouseEventHandler<HTMLButtonElement> = () => {
     const variables: AddTagToOrganizationVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         organizationIdentifier,
         key: state.key,
         value: state.value,

frontend/svalyn-studio-app/src/views/project/changeproposals/ProjectChangeProposal.tsx

@@ -35,7 +35,6 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import { ChangeProposalsTableHead } from './ChangeProposalsTableHead';
 import { ChangeProposalsTableToolbar } from './ChangeProposalsTableToolbar';
@@ -138,7 +137,7 @@ export const ProjectChangeProposal = ({ projectIdentifier, role }: ProjectChange
   const handleDelete = () => {
     const variables: DeleteChangeProposalsVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         changeProposalIds: state.selectedChangeProposalIds,
       },
     };

frontend/svalyn-studio-app/src/views/project/home/ProjectReadMeCard.tsx

@@ -27,7 +27,6 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { v4 as uuid } from 'uuid';
 import { EditReadMeDialog } from '../../../dialogs/EditReadMeDialog';
 import { ErrorSnackbar } from '../../../snackbar/ErrorSnackbar';
 import {
@@ -91,7 +90,7 @@ export const ProjectReadMeCard = ({ projectIdentifier, readMe, role, onReadMeUpd
   const handleReadMeUpdate = (value: string) => {
     const variables: UpdateProjectReadMeVariables = {
       input: {
-        id: uuid(),
+        id: crypto.randomUUID(),
         projectIdentifier,
         content: value,
       },