Get dependency on uuid package back to fix error on non-secure contexts

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#1325](https://github.com/shlinkio/shlink-web-client/issues/1325) Get dependency on `uuid` package back, as `crypto.randomUUID()` can only be used in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
+
+
 ## [4.2.0] - 2024-10-07
 ### Added
 * [shlink-web-component#411](https://github.com/shlinkio/shlink-web-component/issues/411) Add support for `ip-address` redirect conditions when Shlink server is >=4.2

package-lock.json

@@ -32,6 +32,7 @@
         "react-router-dom": "^6.26.2",
         "reactstrap": "^9.2.3",
         "redux-localstorage-simple": "^2.5.1",
+        "uuid": "^10.0.0",
         "workbox-core": "^7.1.0",
         "workbox-expiration": "^7.1.0",
         "workbox-precaching": "^7.1.0",
@@ -11044,6 +11045,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -19410,6 +19424,11 @@
       "version": "1.0.2",
       "dev": true
     },
+    "uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-router-dom": "^6.26.2",
     "reactstrap": "^9.2.3",
     "redux-localstorage-simple": "^2.5.1",
+    "uuid": "^10.0.0",
     "workbox-core": "^7.1.0",
     "workbox-expiration": "^7.1.0",
     "workbox-precaching": "^7.1.0",

src/servers/CreateServer.tsx

@@ -8,6 +8,7 @@ import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { useGoBack } from '../utils/helpers/hooks';
+import { randomUUID } from '../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
@@ -44,7 +45,7 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
   const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
   const [serverData, setServerData] = useState<ServerData>();
   const saveNewServer = useCallback((theServerData: ServerData) => {
-    const id = crypto.randomUUID();
+    const id = randomUUID();
 
     createServers([{ ...theServerData, id }]);
     navigate(`/server/${id}`);

src/servers/reducers/servers.ts

@@ -1,5 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
+import { randomUUID } from '../../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from '../data';
 
 interface EditServer {
@@ -19,7 +20,7 @@ const serverWithId = (server: ServerWithId | ServerData): ServerWithId => {
     return server;
   }
 
-  return { ...server, id: crypto.randomUUID() };
+  return { ...server, id: randomUUID() };
 };
 
 const serversListToMap = (servers: ServerWithId[]): ServersMap => servers.reduce<ServersMap>(

src/utils/utils.ts

@@ -1,6 +1,9 @@
 import type { SyntheticEvent } from 'react';
+import { v4 } from 'uuid';
 
 export const handleEventPreventingDefault = <T>(handler: () => T) => (e: SyntheticEvent) => {
   e.preventDefault();
   handler();
 };
+
+export const randomUUID = () => v4();

test/servers/reducers/selectedServer.test.ts

@@ -9,6 +9,7 @@ import {
   selectedServerReducerCreator,
   selectServer as selectServerCreator,
 } from '../../../src/servers/reducers/selectedServer';
+import { randomUUID } from '../../../src/utils/utils';
 
 describe('selectedServerReducer', () => {
   const dispatch = vi.fn();
@@ -40,7 +41,7 @@ describe('selectedServerReducer', () => {
       ['latest', MAX_FALLBACK_VERSION, 'latest'],
       ['%invalid_semver%', MIN_FALLBACK_VERSION, '%invalid_semver%'],
     ])('dispatches proper actions', async (serverVersion, expectedVersion, expectedPrintableVersion) => {
-      const id = crypto.randomUUID();
+      const id = randomUUID();
       const getState = createGetStateMock(id);
       const expectedSelectedServer = {
         id,
@@ -59,7 +60,7 @@ describe('selectedServerReducer', () => {
     });
 
     it('dispatches error when health endpoint fails', async () => {
-      const id = crypto.randomUUID();
+      const id = randomUUID();
       const getState = createGetStateMock(id);
       const expectedSelectedServer = fromPartial<NonReachableServer>({ id, serverNotReachable: true });
 
@@ -72,7 +73,7 @@ describe('selectedServerReducer', () => {
     });
 
     it('dispatches error when server is not found', async () => {
-      const id = crypto.randomUUID();
+      const id = randomUUID();
       const getState = vi.fn(() => fromPartial<ShlinkState>({ servers: {} }));
       const expectedSelectedServer: NotFoundServer = { serverNotFound: true };