From 453d2459240f5fdb5dbffd76063b24cb036642b9 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 9 Oct 2024 09:27:08 +0200 Subject: [PATCH] Get dependency on uuid package back to fix error on non-secure contexts --- CHANGELOG.md | 17 +++++++++++++++++ package-lock.json | 19 +++++++++++++++++++ package.json | 1 + src/servers/CreateServer.tsx | 3 ++- src/servers/reducers/servers.ts | 3 ++- src/utils/utils.ts | 3 +++ test/servers/reducers/selectedServer.test.ts | 7 ++++--- 7 files changed, 48 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62cc93f2..815fddaf 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index ffc6daf4..2dabfb0a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2c3c0c10..5ce2a122 100644 --- a/package.json +++ b/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", diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx index f08a9ecb..34807d96 100644 --- a/src/servers/CreateServer.tsx +++ b/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 = ({ servers const [isConfirmModalOpen, toggleConfirmModal] = useToggle(); const [serverData, setServerData] = useState(); const saveNewServer = useCallback((theServerData: ServerData) => { - const id = crypto.randomUUID(); + const id = randomUUID(); createServers([{ ...theServerData, id }]); navigate(`/server/${id}`); diff --git a/src/servers/reducers/servers.ts b/src/servers/reducers/servers.ts index f3c53598..fe8220e7 100644 --- a/src/servers/reducers/servers.ts +++ b/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( diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b1b11ca0..d16080cc 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,6 +1,9 @@ import type { SyntheticEvent } from 'react'; +import { v4 } from 'uuid'; export const handleEventPreventingDefault = (handler: () => T) => (e: SyntheticEvent) => { e.preventDefault(); handler(); }; + +export const randomUUID = () => v4(); diff --git a/test/servers/reducers/selectedServer.test.ts b/test/servers/reducers/selectedServer.test.ts index 8c602052..fac4b708 100644 --- a/test/servers/reducers/selectedServer.test.ts +++ b/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({ 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({ servers: {} })); const expectedSelectedServer: NotFoundServer = { serverNotFound: true };