Merge pull request #1807 from shlinkio/develop

Release 4.7.0

CHANGELOG.md

@@ -4,6 +4,40 @@ 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.7.0] - 2026-02-04
+### Added
+* [shlink-web-component] Add support for Shlink 5.0.0, by supporting date-based redirect conditions.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
+## [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*

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:25.2-alpine AS node
+FROM node:25.5-alpine AS node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION=${VERSION}

dev.Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.56.1-noble
+FROM mcr.microsoft.com/playwright:v1.58.1-noble
 
 ENV NODE_VERSION 22.14
 ENV TINI_VERSION v0.19.0

package.json

@@ -25,48 +25,49 @@
     "@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.2",
     "@shlinkio/data-manipulation": "^1.0.4",
-    "@shlinkio/shlink-frontend-kit": "^1.3.1",
-    "@shlinkio/shlink-js-sdk": "^3.0.1",
-    "@shlinkio/shlink-web-component": "^0.17.0",
-    "@vitest/browser-playwright": "^4.0.9",
+    "@shlinkio/shlink-frontend-kit": "^1.4.0",
+    "@shlinkio/shlink-js-sdk": "^3.1.0",
+    "@shlinkio/shlink-web-component": "^0.18.0",
+    "@vitest/browser-playwright": "^4.0.18",
     "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.4",
+    "react-dom": "^19.2.4",
     "react-external-link": "^2.6.1",
     "react-redux": "^9.2.0",
-    "react-router": "^7.9.6",
+    "react-router": "^7.13.0",
     "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",
-    "@tailwindcss/vite": "^4.1.17",
+    "@stylistic/eslint-plugin": "^5.7.1",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/react": "^19.2.5",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vitest/browser": "^4.0.3",
-    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.18",
     "adm-zip": "^0.5.16",
-    "axe-core": "^4.11.0",
+    "axe-core": "^4.11.1",
     "chalk": "^5.6.2",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
@@ -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.58.1",
     "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.54.0",
+    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^4.0.3"
   },
   "browserslist": [

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];
       }
     }
 

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,

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 },

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>,
     );
   };

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],

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: {} },

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 },

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>,
     );

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: {

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 },

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 },

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 },
     },

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: {} },