Merge pull request #1762 from shlinkio/develop

Release 4.6.2
2025-12-23 18:50:08 +00:00 · 2025-12-12 08:37:29 +01:00 · 2025-12-12 08:37:29 +01:00 · fce387f710
commit fce387f710
parent e9afaae619 d27052b71c
17 changed files with 2350 additions and 3656 deletions
--- 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).

+## [4.6.2] - 2025-11-15
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [shlink-web-component#878](https://github.com/shlinkio/shlink-web-component/issues/878) Fix real-time updates interval setting being ignored.
+
+
 ## [4.6.1] - 2025-11-15
 ### Added
 * *Nothing*
--- a/dev.Dockerfile
+++ b/dev.Dockerfile
@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.56.1-noble
+FROM mcr.microsoft.com/playwright:v1.57.0-noble

 ENV NODE_VERSION 22.14
 ENV TINI_VERSION v0.19.0
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -25,44 +25,45 @@
    "@fortawesome/free-brands-svg-icons": "^7.1.0",
    "@fortawesome/free-regular-svg-icons": "^7.1.0",
    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
    "@json2csv/plainjs": "^7.0.6",
-    "@reduxjs/toolkit": "^2.10.1",
+    "@reduxjs/toolkit": "^2.11.0",
    "@shlinkio/data-manipulation": "^1.0.4",
-    "@shlinkio/shlink-frontend-kit": "^1.3.1",
+    "@shlinkio/shlink-frontend-kit": "^1.4.0",
    "@shlinkio/shlink-js-sdk": "^3.0.1",
-    "@shlinkio/shlink-web-component": "^0.17.0",
-    "@vitest/browser-playwright": "^4.0.9",
+    "@shlinkio/shlink-web-component": "^0.17.1",
+    "@vitest/browser-playwright": "^4.0.15",
    "bottlejs": "^2.0.1",
    "clsx": "^2.1.1",
    "compare-versions": "^6.1.1",
    "csvtojson": "^2.0.14",
    "date-fns": "^4.1.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
    "react-external-link": "^2.6.1",
    "react-redux": "^9.2.0",
-    "react-router": "^7.9.6",
+    "react-router": "^7.10.1",
    "redux-localstorage-simple": "^2.5.1",
-    "workbox-core": "^7.3.0",
-    "workbox-expiration": "^7.3.0",
-    "workbox-precaching": "^7.3.0",
-    "workbox-routing": "^7.3.0",
-    "workbox-strategies": "^7.3.0"
+    "workbox-core": "^7.4.0",
+    "workbox-expiration": "^7.4.0",
+    "workbox-precaching": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-strategies": "^7.4.0"
  },
  "devDependencies": {
    "@shlinkio/eslint-config-js-coding-standard": "~3.7.0",
-    "@stylistic/eslint-plugin": "^5.5.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
    "@tailwindcss/vite": "^4.1.17",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^14.6.1",
    "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.2.5",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^5.1.1",
    "@vitest/browser": "^4.0.3",
-    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.15",
    "adm-zip": "^0.5.16",
    "axe-core": "^4.11.0",
    "chalk": "^5.6.2",
@ -74,12 +75,12 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "history": "^5.3.0",
-    "playwright": "^1.56.1",
+    "playwright": "^1.57.0",
    "tailwindcss": "^4.1.3",
    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.2",
-    "vite-plugin-pwa": "^1.1.0",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.6",
+    "vite-plugin-pwa": "^1.2.0",
    "vitest": "^4.0.3"
  },
  "browserslist": [
--- a/src/container/context.tsx
+++ b/src/container/context.tsx
@ -30,8 +30,11 @@ export const useDependencies = <T extends unknown[]>(...names: string[]): T => {
  }) as T;
 };

+type Optionalize<P, K extends keyof P> = Omit<P, K> & Partial<Pick<P, K>>;
+
 /**
 * Higher Order Component used to inject services into components as props.
+ * All dependencies become optional props so that they can still be explicitly set in tests if desired.
 */
 export function withDependencies<
  Props extends Record<string, unknown>,
@ -39,16 +42,16 @@ export function withDependencies<
 >(
  Component: ComponentType<Props>,
  dependencyNames: DependencyName[],
-): ComponentType<Omit<Props, DependencyName>> {
+): ComponentType<Optionalize<Props, DependencyName>> {
  function Wrapper(props: Omit<Props, DependencyName>) {
-    const container = useContainer('withDependencies');
+    const container = useContext(ContainerContext);

    // Inject services, unless they have been overridden by props passed from
    // the parent component.
    const dependencies: Partial<Record<DependencyName, unknown>> = {};
    for (const dependency of dependencyNames) {
      if (!(dependency in props)) {
-        dependencies[dependency] = container[dependency];
+        dependencies[dependency] = container?.[dependency];
      }
    }

--- a/test/helpers/setUpTest.tsx
+++ b/test/helpers/setUpTest.tsx
@ -1,8 +1,11 @@
+import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { fromPartial } from '@total-typescript/shoehorn';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { Provider } from 'react-redux';
+import { ContainerProvider } from '../../src/container/context';
 import type { RootState } from '../../src/store';
 import { setUpStore } from '../../src/store';

@ -12,15 +15,33 @@ export const renderWithEvents = (element: ReactElement, options?: RenderOptions)
 });

 export type RenderOptionsWithState = Omit<RenderOptions, 'wrapper'> & {
+  /** Initial state for the redux store */
  initialState?: Partial<RootState>;
+
+  /**
+   * If provided, it will set this as the `buildShlinkApiClient` dependency in the `ContainerProvider`.
+   * If more dependencies are needed, then explicitly define your own `ContainerProvider` and make sure it includes a
+   * `buildShlinkApiClient` service.
+   *
+   * Defaults to vi.fn()
+   */
+  buildShlinkApiClient?: () => ShlinkApiClient;
 };

+/**
+ * Render provided ReactElement wrapped in a redux `Provider` and a `ContainerProvider` with a single
+ * `buildShlinkApiClient` dependency.
+ */
 export const renderWithStore = (
  element: ReactElement,
-  { initialState = {}, ...options }: RenderOptionsWithState = {},
+  { initialState = {}, buildShlinkApiClient = vi.fn(), ...options }: RenderOptionsWithState = {},
 ) => {
  const store = setUpStore(initialState);
-  const Wrapper = ({ children }: PropsWithChildren) => <Provider store={store}>{children}</Provider>;
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <ContainerProvider value={fromPartial({ buildShlinkApiClient })}>
+      <Provider store={store}>{children}</Provider>
+    </ContainerProvider>
+  );

  return {
    store,
--- a/test/common/Home.test.tsx
+++ b/test/common/Home.test.tsx
@ -2,7 +2,6 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { Home } from '../../src/common/Home';
-import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@ -10,9 +9,7 @@ import { renderWithStore } from '../__helpers__/setUpTest';
 describe('<Home />', () => {
  const setUp = (servers: ServersMap = {}) => renderWithStore(
    <MemoryRouter>
-      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-        <Home />
-      </ContainerProvider>
+      <Home />
    </MemoryRouter>,
    {
      initialState: { servers },
--- a/test/common/MainHeader.test.tsx
+++ b/test/common/MainHeader.test.tsx
@ -1,9 +1,7 @@
 import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
 import { MainHeader } from '../../src/common/MainHeader';
-import { ContainerProvider } from '../../src/container/context';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';

@ -13,10 +11,8 @@ describe('<MainHeader />', () => {
    history.push(pathname);

    return renderWithStore(
-      <Router location={history.location} navigator={history}>
-        <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-          <MainHeader />
-        </ContainerProvider>
+      <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+        <MainHeader />
      </Router>,
    );
  };
--- a/test/common/ShlinkVersionsContainer.test.tsx
+++ b/test/common/ShlinkVersionsContainer.test.tsx
@ -1,19 +1,13 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
-import { ContainerProvider } from '../../src/container/context';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';

 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(
-    <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-      <ShlinkVersionsContainer />
-    </ContainerProvider>,
-    {
-      initialState: { selectedServer },
-    },
-  );
+  const setUp = (selectedServer: SelectedServer = null) => renderWithStore(<ShlinkVersionsContainer />, {
+    initialState: { selectedServer },
+  });

  it.each([
    [null],
--- a/test/common/ShlinkWebComponentContainer.test.tsx
+++ b/test/common/ShlinkWebComponentContainer.test.tsx
@ -2,7 +2,6 @@ import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import { ShlinkWebComponentContainer } from '../../src/common/ShlinkWebComponentContainer';
-import { ContainerProvider } from '../../src/container/context';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@ -16,12 +15,7 @@ vi.mock('@shlinkio/shlink-web-component', () => ({
 describe('<ShlinkWebComponentContainer />', () => {
  const setUp = (selectedServer: SelectedServer) => renderWithStore(
    <MemoryRouter>
-      <ContainerProvider value={fromPartial({
-        buildShlinkApiClient: vi.fn(),
-        TagColorsStorage: fromPartial({}),
-      })}>
-        <ShlinkWebComponentContainer />
-      </ContainerProvider>
+      <ShlinkWebComponentContainer TagColorsStorage={fromPartial({})} />
    </MemoryRouter>,
    {
      initialState: { selectedServer, servers: {}, settings: {} },
--- a/test/servers/CreateServer.test.tsx
+++ b/test/servers/CreateServer.test.tsx
@ -2,7 +2,6 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { ContainerProvider } from '../../src/container/context';
 import { CreateServer } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@ -30,14 +29,8 @@ describe('<CreateServer />', () => {
    return {
      history,
      ...renderWithStore(
-        <Router location={history.location} navigator={history}>
-          <ContainerProvider value={fromPartial({
-            ImportServersBtn: () => <>ImportServersBtn</>,
-            useTimeoutToggle,
-            buildShlinkApiClient: vi.fn(),
-          })}>
-            <CreateServer />
-          </ContainerProvider>
+        <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+          <CreateServer useTimeoutToggle={useTimeoutToggle} />
        </Router>,
        {
          initialState: { servers },
--- a/test/servers/DeleteServerButton.test.tsx
+++ b/test/servers/DeleteServerButton.test.tsx
@ -11,7 +11,7 @@ describe('<DeleteServerButton />', () => {
  const setUp = (children: ReactNode = 'Remove this server') => {
    const history = createMemoryHistory({ initialEntries: ['/foo'] });
    const result = renderWithStore(
-      <Router location={history.location} navigator={history}>
+      <Router location={history.location} navigator={history} unstable_useTransitions={false}>
        <DeleteServerButton server={fromPartial({})}>{children}</DeleteServerButton>
      </Router>,
    );
--- a/test/servers/EditServer.test.tsx
+++ b/test/servers/EditServer.test.tsx
@ -2,7 +2,6 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { ContainerProvider } from '../../src/container/context';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { isServerWithId } from '../../src/servers/data';
 import { EditServer } from '../../src/servers/EditServer';
@ -21,10 +20,8 @@ describe('<EditServer />', () => {
    return {
      history,
      ...renderWithStore(
-        <Router location={history.location} navigator={history}>
-          <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-            <EditServer />
-          </ContainerProvider>
+        <Router location={history.location} navigator={history} unstable_useTransitions={false}>
+          <EditServer />
        </Router>,
        {
          initialState: {
--- a/test/servers/ManageServers.test.tsx
+++ b/test/servers/ManageServers.test.tsx
@ -1,7 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServers } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';
@ -17,14 +16,7 @@ describe('<ManageServers />', () => {
  );
  const setUp = (servers: ServersMap = {}) => renderWithStore(
    <MemoryRouter>
-      <ContainerProvider value={fromPartial({
-        ServersExporter: serversExporter,
-        ImportServersBtn: () => <span>ImportServersBtn</span>,
-        useTimeoutToggle,
-        buildShlinkApiClient: vi.fn(),
-      })}>
-        <ManageServers />
-      </ContainerProvider>
+      <ManageServers useTimeoutToggle={useTimeoutToggle} ServersExporter={serversExporter} />
    </MemoryRouter>,
    {
      initialState: { servers },
--- a/test/servers/ServersDropdown.test.tsx
+++ b/test/servers/ServersDropdown.test.tsx
@ -1,7 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { ContainerProvider } from '../../src/container/context';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';
@ -15,11 +14,9 @@ describe('<ServersDropdown />', () => {
  };
  const setUp = (servers: ServersMap = fallbackServers) => renderWithStore(
    <MemoryRouter>
-      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-        <ul role="menu">
-          <ServersDropdown />
-        </ul>
-      </ContainerProvider>
+      <ul role="menu">
+        <ServersDropdown />
+      </ul>
    </MemoryRouter>,
    {
      initialState: { selectedServer: null, servers },
--- a/test/servers/helpers/ImportServersBtn.test.tsx
+++ b/test/servers/helpers/ImportServersBtn.test.tsx
@ -1,6 +1,5 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { ContainerProvider } from '../../../src/container/context';
 import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
 import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
 import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
@ -14,9 +13,7 @@ describe('<ImportServersBtn />', () => {
  const importServersFromFile = vi.fn().mockResolvedValue([]);
  const serversImporterMock = fromPartial<ServersImporter>({ importServersFromFile });
  const setUp = (props: Partial<ImportServersBtnProps> = {}, servers: ServersMap = {}) => renderWithStore(
-    <ContainerProvider value={fromPartial({ ServersImporter: serversImporterMock })}>
-      <ImportServersBtn {...props} onImport={onImportMock} />
-    </ContainerProvider>,
+    <ImportServersBtn {...props} onImport={onImportMock} ServersImporter={serversImporterMock} />,
    {
      initialState: { servers },
    },
--- a/test/servers/helpers/ServerError.test.tsx
+++ b/test/servers/helpers/ServerError.test.tsx
@ -1,7 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { ContainerProvider } from '../../../src/container/context';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerError } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';
@ -10,9 +9,7 @@ import { renderWithStore } from '../../__helpers__/setUpTest';
 describe('<ServerError />', () => {
  const setUp = (selectedServer: SelectedServer) => renderWithStore(
    <MemoryRouter>
-      <ContainerProvider value={fromPartial({ buildShlinkApiClient: vi.fn() })}>
-        <ServerError />
-      </ContainerProvider>
+      <ServerError />
    </MemoryRouter>,
    {
      initialState: { selectedServer, servers: {} },