From 100a5b98c07fe84a5a8d585e23dd055ea14f232a Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Wed, 27 Nov 2024 14:10:30 +0100 Subject: [PATCH 01/12] refactor: rr migration app shell (wip) --- packages/application-shell/package.json | 4 +- .../application-entry-point.tsx | 20 +- .../application-shell-authenticated.tsx | 28 +- .../application-shell.spec.js | 2348 ++++++++--------- .../application-shell/application-shell.tsx | 6 +- .../authenticated/authenticated.tsx | 6 +- .../custom-view-dev-host.tsx | 20 +- .../project-container/project-container.tsx | 19 +- .../suspended-route/suspended-route.tsx | 9 +- .../use-routes-creator/use-routes-creator.ts | 12 +- .../src/test-utils/test-utils.spec.tsx | 10 +- .../src/test-utils/test-utils.tsx | 6 +- pnpm-lock.yaml | 59 +- 13 files changed, 1298 insertions(+), 1249 deletions(-) diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json index b721301512..b9ce9f0229 100644 --- a/packages/application-shell/package.json +++ b/packages/application-shell/package.json @@ -76,8 +76,6 @@ "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", "@types/react-redux": "^7.1.26", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "@types/redux-logger": "^3.0.9", "@types/uuid": "^9.0.3", "classnames": "^2.3.2", @@ -117,7 +115,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "redux": "4.2.1" }, "peerDependencies": { diff --git a/packages/application-shell/src/components/application-entry-point/application-entry-point.tsx b/packages/application-shell/src/components/application-entry-point/application-entry-point.tsx index d1c58ad8d9..2e45313353 100644 --- a/packages/application-shell/src/components/application-entry-point/application-entry-point.tsx +++ b/packages/application-shell/src/components/application-entry-point/application-entry-point.tsx @@ -1,5 +1,5 @@ import { Children, ReactNode } from 'react'; -import { Redirect, Route, Switch } from 'react-router-dom'; +import { Navigate, Route, Routes } from 'react-router-dom'; import invariant from 'tiny-invariant'; import { PageUnauthorized } from '@commercetools-frontend/application-components'; import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-config/ssr'; @@ -46,26 +46,24 @@ const ApplicationEntryPoint = (props: TApplicationEntryPointProps) => { if (props.children) { const entryPointUriPath = props.environment.entryPointUriPath; return ( - + { // For development, it's useful to redirect to the actual // application routes when you open the browser at http://localhost:3001 process.env.NODE_ENV === 'production' ? null : ( ( - - )} + element={} /> ) } - - - + } + /> {/* Catch-all route */} - - + } /> + ); } diff --git a/packages/application-shell/src/components/application-shell-authenticated/application-shell-authenticated.tsx b/packages/application-shell/src/components/application-shell-authenticated/application-shell-authenticated.tsx index f7ef64dc29..491ad89bd1 100644 --- a/packages/application-shell/src/components/application-shell-authenticated/application-shell-authenticated.tsx +++ b/packages/application-shell/src/components/application-shell-authenticated/application-shell-authenticated.tsx @@ -8,7 +8,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import type { ApolloError } from '@apollo/client/errors'; import type { TFlags } from '@flopflip/types'; -import { Redirect, Route, Switch, useLocation } from 'react-router-dom'; +import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import { PortalsContainer } from '@commercetools-frontend/application-components'; import { ApplicationContextProvider, @@ -386,16 +386,15 @@ export const ApplicationShellAuthenticated = ( : '0px' } /> - + ( - - )} + element={} /> - - { + ) } - + /> {/* Project routes */} - - {(() => { + { const previousProjectKey = getPreviousProjectKey( user?.defaultProjectKey ?? undefined @@ -432,11 +432,11 @@ export const ApplicationShellAuthenticated = ( if (!previousProjectKey) return ; return ( - + ); })()} - - + /> + - + )} diff --git a/packages/application-shell/src/components/application-shell/application-shell.spec.js b/packages/application-shell/src/components/application-shell/application-shell.spec.js index 0c652bd4a2..30f92dcd63 100644 --- a/packages/application-shell/src/components/application-shell/application-shell.spec.js +++ b/packages/application-shell/src/components/application-shell/application-shell.spec.js @@ -231,104 +231,104 @@ beforeAll(() => ); afterAll(() => mockServer.close()); -describe.each` - renderNodeAsChildren | route - ${false} | ${'/'} - ${true} | ${'/test-1/avengers'} -`( - 'when rendering (as children: $renderNodeAsChildren)', - ({ renderNodeAsChildren, route }) => { - it('should pass environment into application context', async () => { - const TestComponent = () => { - const applicationName = useApplicationContext( - (context) => context.environment.applicationName - ); - return

{`Application name: ${applicationName}`}

; - }; - renderApp(, { - renderNodeAsChildren, - route, - disableRoutePermissionCheck: true, - }); - await screen.findByText('Application name: my-app'); - }); +// describe.each` +// renderNodeAsChildren | route +// ${false} | ${'/'} +// ${true} | ${'/test-1/avengers'} +// `( +// 'when rendering (as children: $renderNodeAsChildren)', +// ({ renderNodeAsChildren, route }) => { +// it('should pass environment into application context', async () => { +// const TestComponent = () => { +// const applicationName = useApplicationContext( +// (context) => context.environment.applicationName +// ); +// return

{`Application name: ${applicationName}`}

; +// }; +// renderApp(, { +// renderNodeAsChildren, +// route, +// disableRoutePermissionCheck: true, +// }); +// await screen.findByText('Application name: my-app'); +// }); - if (renderNodeAsChildren) { - describe('when route permission check is enabled (default)', () => { - it('should render page if application has view permission', async () => { - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - name: 'canViewAvengers', - value: true, - }, - ], - }), - }), - ], - }) - ); - const TestComponent = () => { - const applicationName = useApplicationContext( - (context) => context.environment.applicationName - ); - return

{`Application name: ${applicationName}`}

; - }; - renderApp(, { - renderNodeAsChildren, - route, - }); - await screen.findByText('Application name: my-app'); - }); - it('should render unauthorized page if application does not have view permission', async () => { - const TestComponent = () => { - const applicationName = useApplicationContext( - (context) => context.environment.applicationName - ); - return

{`Application name: ${applicationName}`}

; - }; - renderApp(, { - renderNodeAsChildren, - route, - }); - await screen.findByText(/you are not authorized to view it/); - }); - }); - } +// if (renderNodeAsChildren) { +// describe('when route permission check is enabled (default)', () => { +// it('should render page if application has view permission', async () => { +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// name: 'canViewAvengers', +// value: true, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// const TestComponent = () => { +// const applicationName = useApplicationContext( +// (context) => context.environment.applicationName +// ); +// return

{`Application name: ${applicationName}`}

; +// }; +// renderApp(, { +// renderNodeAsChildren, +// route, +// }); +// await screen.findByText('Application name: my-app'); +// }); +// it('should render unauthorized page if application does not have view permission', async () => { +// const TestComponent = () => { +// const applicationName = useApplicationContext( +// (context) => context.environment.applicationName +// ); +// return

{`Application name: ${applicationName}`}

; +// }; +// renderApp(, { +// renderNodeAsChildren, +// route, +// }); +// await screen.findByText(/you are not authorized to view it/); +// }); +// }); +// } - describe('when user navigates to "/account" route', () => { - if (renderNodeAsChildren) { - it('should trigger a page reload (when served by proxy)', async () => { - const { history } = renderApp(null, { - renderNodeAsChildren, - environment: { servedByProxy: true }, - disableRoutePermissionCheck: true, - }); - await screen.findByText('OK'); - history.push('/account'); - await waitFor(() => { - expect(location.reload).toHaveBeenCalled(); - }); - }); - } else { - it('should render using the "render" prop', async () => { - const { history } = renderApp(null, { - renderNodeAsChildren, - disableRoutePermissionCheck: true, - }); - await screen.findByText('OK'); - history.push('/account'); - await screen.findByText('OK'); - expect(location.reload).not.toHaveBeenCalled(); - }); - } - }); - } -); +// describe('when user navigates to "/account" route', () => { +// if (renderNodeAsChildren) { +// it('should trigger a page reload (when served by proxy)', async () => { +// const { history } = renderApp(null, { +// renderNodeAsChildren, +// environment: { servedByProxy: true }, +// disableRoutePermissionCheck: true, +// }); +// await screen.findByText('OK'); +// history.push('/account'); +// await waitFor(() => { +// expect(location.reload).toHaveBeenCalled(); +// }); +// }); +// } else { +// it('should render using the "render" prop', async () => { +// const { history } = renderApp(null, { +// renderNodeAsChildren, +// disableRoutePermissionCheck: true, +// }); +// await screen.findByText('OK'); +// history.push('/account'); +// await screen.findByText('OK'); +// expect(location.reload).not.toHaveBeenCalled(); +// }); +// } +// }); +// } +// ); describe('when route does not contain a project key (e.g. /account)', () => { it('should not render NavBar', async () => { @@ -344,1115 +344,1115 @@ describe('when route does not contain a project key (e.g. /account)', () => { await screen.findByText('OK'); }); }); -describe('when user first visits "/" with no projectKey defined in localStorage', () => { - it('should not render the NavBar first, then redirect to "/:projectKey" and render the NavBar', async () => { - const { history, getByLeftNavigation } = renderApp(); - await waitFor(() => { - // Redirect "/" -> "/:projectKey" - expect(history.location.pathname).toBe(`/test-1`); - }); - expect(getByLeftNavigation()).toBeInTheDocument(); - }); -}); -describe('when user has no default project', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - user: UserMock.build({ - defaultProjectKey: null, - projects: { - __typename: 'ProjectQueryResult', - total: 0, - results: [], - }, - }), - }) - ); - }); - it('should redirect to project creation', async () => { - renderApp(null, { - environment: { - servedByProxy: 'true', - }, - }); - await waitFor(() => { - expect(location.replace).toHaveBeenCalledWith('/account/projects/new'); - }); - expect(screen.queryByText('OK')).not.toBeInTheDocument(); - }); -}); -describe('when loading user fails with an unknown graphql error', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - graphql.query('FetchLoggedInUser', (req, res, ctx) => - res(ctx.errors([new GraphQLError('Oops')])) - ) - ); - }); - it('should render error page', async () => { - renderApp(); - await screen.findByText('Sorry! An unexpected error occured.'); - }); -}); -describe('when loading user fails with an unauthorized graphql error', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - graphql.query('FetchLoggedInUser', (req, res, ctx) => - res( - ctx.errors([ - new GraphQLError('User is not authorized', { - extensions: { - code: 'UNAUTHENTICATED', - }, - }), - ]) - ) - ) - ); - }); - it('should redirect to "/logout" with reason unauthorized', async () => { - renderApp(); - const queryParams = encode({ - reason: LOGOUT_REASONS.UNAUTHORIZED, - }); - await waitFor(() => { - expect(location.replace).toHaveBeenCalledWith( - expect.stringContaining(`/logout?${queryParams}`) - ); - }); - expect(screen.queryByText('OK')).not.toBeInTheDocument(); - }); -}); -describe('when loading user fails with a "was not found." graphql error message', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - graphql.query('FetchLoggedInUser', (req, res, ctx) => - res(ctx.errors([{ message: 'User was not found.' }])) - ) - ); - }); - it('should redirect to /logout with reason "deleted"', async () => { - renderApp(); - const queryParams = encode({ - reason: LOGOUT_REASONS.DELETED, - }); - await waitFor(() => { - expect(location.replace).toHaveBeenCalledWith( - expect.stringContaining(`/logout?${queryParams}`) - ); - }); - expect(screen.queryByText('OK')).not.toBeInTheDocument(); - }); -}); -describe('when project is not found', () => { - it('should render "project not found" page', async () => { - renderApp(null, { route: '/not-found' }); - await screen.findByText('We could not find this Project'); - }); -}); -describe('when project is temporarily suspended', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - suspension: { - __typename: 'ProjectSuspension', - isActive: true, - reason: 'TemporaryMaintenance', - }, - }), - ], - }) - ); - }); - it('should render "project suspended" page', async () => { - renderApp(); - await screen.findByText( - 'Your Project is temporarily suspended due to maintenance.' - ); - }); -}); -describe('when project is suspended for another reason', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - suspension: { - __typename: 'ProjectSuspension', - isActive: true, - reason: 'Other', - }, - }), - ], - }) - ); - }); - it('should render "project suspended" page', async () => { - renderApp(); - await screen.findByText('Your Project has been suspended'); - }); -}); -describe('when project is expired', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - expiry: { - __typename: 'ProjectExpiry', - isActive: true, - daysLeft: null, - }, - }), - ], - }) - ); - }); - it('should render "project expired" page', async () => { - renderApp(); - await screen.findByText('Your trial has expired'); - }); -}); -describe('when project is about to expire (<14 days left)', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - expiry: { - __typename: 'ProjectExpiry', - isActive: false, - daysLeft: 13, - }, - }), - ], - }) - ); - }); - it('should render global warning message', async () => { - renderApp(); - await screen.findByText( - /^Your project trial period will expire in 13 days\.(.*)$/ - ); - }); -}); -describe('when project is about to expire (14 days left)', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - expiry: { - __typename: 'ProjectExpiry', - isActive: false, - daysLeft: 14, - }, - }), - ], - }) - ); - }); - it('should render global warning message', async () => { - renderApp(); - await screen.findByText( - /^Your project trial period will expire in 14 days\.(.*)$/ - ); - }); -}); -describe('when project is about to expire (>14 days left)', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - expiry: { - __typename: 'ProjectExpiry', - isActive: false, - daysLeft: 15, - }, - }), - ], - }) - ); - }); - it('should not render global warning message', async () => { - renderApp(); - await waitFor(() => { - expect( - screen.queryByText(/^Your project trial period will expire (.*)$/) - ).not.toBeInTheDocument(); - }); - }); -}); -describe('when project is about to expire (0 days left)', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - expiry: { - __typename: 'ProjectExpiry', - isActive: false, - daysLeft: 0, - }, - }), - ], - }) - ); - }); - it('should render global warning message', async () => { - renderApp(); - await screen.findByText( - /^Your project trial period will expire in 0 days\.(.*)$/ - ); - }); -}); -describe('when project is not initialized', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - initialized: false, - }), - ], - }) - ); - }); - it('should render "project not initialized" page', async () => { - renderApp(); - await screen.findByText('Your project has not yet been initialized'); - }); -}); -describe('when user does not have permissions to access the project', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [], - }), - }), - ], - }) - ); - }); - it('should render "unauthorized" page', async () => { - const TestComponent = () => { - const canViewDeveloperSettings = useIsAuthorized({ - demandedPermissions: ['ManageDeveloperSettings'], - }); - if (!canViewDeveloperSettings) { - return ( - - ); - } - return

{'OK'}

; - }; - renderApp(); - await screen.findByText('Not enough permissions to access this resource'); - }); -}); -describe('when switching project', () => { - it('should render app for new project', async () => { - renderApp(); - const input = await screen.findByLabelText('Projects'); +// describe('when user first visits "/" with no projectKey defined in localStorage', () => { +// it('should not render the NavBar first, then redirect to "/:projectKey" and render the NavBar', async () => { +// const { history, getByLeftNavigation } = renderApp(); +// await waitFor(() => { +// // Redirect "/" -> "/:projectKey" +// expect(history.location.pathname).toBe(`/test-1`); +// }); +// expect(getByLeftNavigation()).toBeInTheDocument(); +// }); +// }); +// describe('when user has no default project', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// user: UserMock.build({ +// defaultProjectKey: null, +// projects: { +// __typename: 'ProjectQueryResult', +// total: 0, +// results: [], +// }, +// }), +// }) +// ); +// }); +// it('should redirect to project creation', async () => { +// renderApp(null, { +// environment: { +// servedByProxy: 'true', +// }, +// }); +// await waitFor(() => { +// expect(location.replace).toHaveBeenCalledWith('/account/projects/new'); +// }); +// expect(screen.queryByText('OK')).not.toBeInTheDocument(); +// }); +// }); +// describe('when loading user fails with an unknown graphql error', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// graphql.query('FetchLoggedInUser', (req, res, ctx) => +// res(ctx.errors([new GraphQLError('Oops')])) +// ) +// ); +// }); +// it('should render error page', async () => { +// renderApp(); +// await screen.findByText('Sorry! An unexpected error occured.'); +// }); +// }); +// describe('when loading user fails with an unauthorized graphql error', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// graphql.query('FetchLoggedInUser', (req, res, ctx) => +// res( +// ctx.errors([ +// new GraphQLError('User is not authorized', { +// extensions: { +// code: 'UNAUTHENTICATED', +// }, +// }), +// ]) +// ) +// ) +// ); +// }); +// it('should redirect to "/logout" with reason unauthorized', async () => { +// renderApp(); +// const queryParams = encode({ +// reason: LOGOUT_REASONS.UNAUTHORIZED, +// }); +// await waitFor(() => { +// expect(location.replace).toHaveBeenCalledWith( +// expect.stringContaining(`/logout?${queryParams}`) +// ); +// }); +// expect(screen.queryByText('OK')).not.toBeInTheDocument(); +// }); +// }); +// describe('when loading user fails with a "was not found." graphql error message', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// graphql.query('FetchLoggedInUser', (req, res, ctx) => +// res(ctx.errors([{ message: 'User was not found.' }])) +// ) +// ); +// }); +// it('should redirect to /logout with reason "deleted"', async () => { +// renderApp(); +// const queryParams = encode({ +// reason: LOGOUT_REASONS.DELETED, +// }); +// await waitFor(() => { +// expect(location.replace).toHaveBeenCalledWith( +// expect.stringContaining(`/logout?${queryParams}`) +// ); +// }); +// expect(screen.queryByText('OK')).not.toBeInTheDocument(); +// }); +// }); +// describe('when project is not found', () => { +// it('should render "project not found" page', async () => { +// renderApp(null, { route: '/not-found' }); +// await screen.findByText('We could not find this Project'); +// }); +// }); +// describe('when project is temporarily suspended', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// suspension: { +// __typename: 'ProjectSuspension', +// isActive: true, +// reason: 'TemporaryMaintenance', +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render "project suspended" page', async () => { +// renderApp(); +// await screen.findByText( +// 'Your Project is temporarily suspended due to maintenance.' +// ); +// }); +// }); +// describe('when project is suspended for another reason', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// suspension: { +// __typename: 'ProjectSuspension', +// isActive: true, +// reason: 'Other', +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render "project suspended" page', async () => { +// renderApp(); +// await screen.findByText('Your Project has been suspended'); +// }); +// }); +// describe('when project is expired', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// expiry: { +// __typename: 'ProjectExpiry', +// isActive: true, +// daysLeft: null, +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render "project expired" page', async () => { +// renderApp(); +// await screen.findByText('Your trial has expired'); +// }); +// }); +// describe('when project is about to expire (<14 days left)', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// expiry: { +// __typename: 'ProjectExpiry', +// isActive: false, +// daysLeft: 13, +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render global warning message', async () => { +// renderApp(); +// await screen.findByText( +// /^Your project trial period will expire in 13 days\.(.*)$/ +// ); +// }); +// }); +// describe('when project is about to expire (14 days left)', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// expiry: { +// __typename: 'ProjectExpiry', +// isActive: false, +// daysLeft: 14, +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render global warning message', async () => { +// renderApp(); +// await screen.findByText( +// /^Your project trial period will expire in 14 days\.(.*)$/ +// ); +// }); +// }); +// describe('when project is about to expire (>14 days left)', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// expiry: { +// __typename: 'ProjectExpiry', +// isActive: false, +// daysLeft: 15, +// }, +// }), +// ], +// }) +// ); +// }); +// it('should not render global warning message', async () => { +// renderApp(); +// await waitFor(() => { +// expect( +// screen.queryByText(/^Your project trial period will expire (.*)$/) +// ).not.toBeInTheDocument(); +// }); +// }); +// }); +// describe('when project is about to expire (0 days left)', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// expiry: { +// __typename: 'ProjectExpiry', +// isActive: false, +// daysLeft: 0, +// }, +// }), +// ], +// }) +// ); +// }); +// it('should render global warning message', async () => { +// renderApp(); +// await screen.findByText( +// /^Your project trial period will expire in 0 days\.(.*)$/ +// ); +// }); +// }); +// describe('when project is not initialized', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// initialized: false, +// }), +// ], +// }) +// ); +// }); +// it('should render "project not initialized" page', async () => { +// renderApp(); +// await screen.findByText('Your project has not yet been initialized'); +// }); +// }); +// describe('when user does not have permissions to access the project', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should render "unauthorized" page', async () => { +// const TestComponent = () => { +// const canViewDeveloperSettings = useIsAuthorized({ +// demandedPermissions: ['ManageDeveloperSettings'], +// }); +// if (!canViewDeveloperSettings) { +// return ( +// +// ); +// } +// return

{'OK'}

; +// }; +// renderApp(); +// await screen.findByText('Not enough permissions to access this resource'); +// }); +// }); +// describe('when switching project', () => { +// it('should render app for new project', async () => { +// renderApp(); +// const input = await screen.findByLabelText('Projects'); - fireEvent.focus(input); - fireEvent.keyDown(input, { key: 'ArrowDown' }); +// fireEvent.focus(input); +// fireEvent.keyDown(input, { key: 'ArrowDown' }); - await waitFor(() => { - screen.getByText('Test 2').click(); - expect(location.replace).toHaveBeenCalledWith(`/test-2`); - }); - }); -}); -describe('when user is not authenticated', () => { - beforeEach(() => { - window.localStorage.getItem.mockReturnValue(null); - mockServer.use( - graphql.query('AmILoggedIn', (req, res, ctx) => res.once(ctx.status(401))) - ); - }); - it('should redirect to /login with reason "unauthorized"', async () => { - renderApp(null, { route: '/foo' }); - const queryParams = encode({ - reason: LOGOUT_REASONS.UNAUTHORIZED, - redirectTo: `${window.location.origin}/foo`, - }); +// await waitFor(() => { +// screen.getByText('Test 2').click(); +// expect(location.replace).toHaveBeenCalledWith(`/test-2`); +// }); +// }); +// }); +// describe('when user is not authenticated', () => { +// beforeEach(() => { +// window.localStorage.getItem.mockReturnValue(null); +// mockServer.use( +// graphql.query('AmILoggedIn', (req, res, ctx) => res.once(ctx.status(401))) +// ); +// }); +// it('should redirect to /login with reason "unauthorized"', async () => { +// renderApp(null, { route: '/foo' }); +// const queryParams = encode({ +// reason: LOGOUT_REASONS.UNAUTHORIZED, +// redirectTo: `${window.location.origin}/foo`, +// }); - await waitFor(() => { - expect(location.replace).toHaveBeenCalledWith( - `${window.location.origin}/login?${queryParams}` - ); - }); - expect(screen.queryByText('OK')).not.toBeInTheDocument(); - }); -}); -describe('when selecting project locale "de"', () => { - it('should render data for locale "de"', async () => { - const TestComponent = () => { - const projectDataLocale = useApplicationContext( - (context) => context.dataLocale - ); - return {`Data locale: ${projectDataLocale}`}; - }; - const { container } = renderApp(); - await screen.findByText('Data locale: en'); +// await waitFor(() => { +// expect(location.replace).toHaveBeenCalledWith( +// `${window.location.origin}/login?${queryParams}` +// ); +// }); +// expect(screen.queryByText('OK')).not.toBeInTheDocument(); +// }); +// }); +// describe('when selecting project locale "de"', () => { +// it('should render data for locale "de"', async () => { +// const TestComponent = () => { +// const projectDataLocale = useApplicationContext( +// (context) => context.dataLocale +// ); +// return {`Data locale: ${projectDataLocale}`}; +// }; +// const { container } = renderApp(); +// await screen.findByText('Data locale: en'); - // Select a different locale - // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container - const input = container.querySelector('[name="locale-switcher"]'); - fireEvent.focus(input); - fireEvent.keyDown(input, { key: 'ArrowDown' }); - await waitFor(() => { - screen.getByText('de').click(); - screen.getByText('Data locale: de'); - }); - }); -}); -describe('when project has only one language', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - languages: ['en'], - }), - ], - }) - ); - }); - it('should not render locale switcher', async () => { - const { container } = renderApp(); - await waitFor(() => { - expect( - // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container - container.querySelector('[name="locale-switcher"]') - ).not.toBeInTheDocument(); - }); - }); -}); -describe('when user has no projects', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [], - }) - ); - }); - it('should not render project switcher', async () => { - const { container } = renderApp(); - await waitFor(() => { - expect( - // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container - container.querySelector('[name="project-switcher"]') - ).not.toBeInTheDocument(); - }); - await screen.findByText('Back to project'); - }); -}); -describe('when dispatching a loading notification', () => { - it('should render loading info', async () => { - const TestComponent = () => { - const dispatch = useDispatch(); - return ( - <> - - - - ); - }; - renderApp(); - const showBtn = await screen.findByText('Show loading'); - fireEvent.click(showBtn); - await screen.findByText('Processing...'); - const hideBtn = await screen.findByText('Hide loading'); - fireEvent.click(hideBtn); - await waitFor(() => { - expect(screen.queryByText('Processing...')).not.toBeInTheDocument(); - }); - }); -}); -describe('when clicking on navbar menu toggle', () => { - it('should expand menu, show "Support", and collapse menu', async () => { - const { findByLeftNavigation, waitForLeftNavigationToBeLoaded } = - renderApp(); - await waitForLeftNavigationToBeLoaded(); - const button = await screen.findByTestId('menu-expander'); +// // Select a different locale +// // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container +// const input = container.querySelector('[name="locale-switcher"]'); +// fireEvent.focus(input); +// fireEvent.keyDown(input, { key: 'ArrowDown' }); +// await waitFor(() => { +// screen.getByText('de').click(); +// screen.getByText('Data locale: de'); +// }); +// }); +// }); +// describe('when project has only one language', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// languages: ['en'], +// }), +// ], +// }) +// ); +// }); +// it('should not render locale switcher', async () => { +// const { container } = renderApp(); +// await waitFor(() => { +// expect( +// // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container +// container.querySelector('[name="locale-switcher"]') +// ).not.toBeInTheDocument(); +// }); +// }); +// }); +// describe('when user has no projects', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [], +// }) +// ); +// }); +// it('should not render project switcher', async () => { +// const { container } = renderApp(); +// await waitFor(() => { +// expect( +// // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container +// container.querySelector('[name="project-switcher"]') +// ).not.toBeInTheDocument(); +// }); +// await screen.findByText('Back to project'); +// }); +// }); +// describe('when dispatching a loading notification', () => { +// it('should render loading info', async () => { +// const TestComponent = () => { +// const dispatch = useDispatch(); +// return ( +// <> +// +// +// +// ); +// }; +// renderApp(); +// const showBtn = await screen.findByText('Show loading'); +// fireEvent.click(showBtn); +// await screen.findByText('Processing...'); +// const hideBtn = await screen.findByText('Hide loading'); +// fireEvent.click(hideBtn); +// await waitFor(() => { +// expect(screen.queryByText('Processing...')).not.toBeInTheDocument(); +// }); +// }); +// }); +// describe('when clicking on navbar menu toggle', () => { +// it('should expand menu, show "Support", and collapse menu', async () => { +// const { findByLeftNavigation, waitForLeftNavigationToBeLoaded } = +// renderApp(); +// await waitForLeftNavigationToBeLoaded(); +// const button = await screen.findByTestId('menu-expander'); - // Define variables for container and navbarRendered - const container = await findByLeftNavigation(); - const navbarRendered = within(container); +// // Define variables for container and navbarRendered +// const container = await findByLeftNavigation(); +// const navbarRendered = within(container); - // Expand the menu and verify local storage changes - fireEvent.click(button); - await waitFor(() => { - expect(window.localStorage.setItem).toHaveBeenCalledWith( - 'MSW_COOKIE_STORE_test', - 'test' - ); - }); +// // Expand the menu and verify local storage changes +// fireEvent.click(button); +// await waitFor(() => { +// expect(window.localStorage.setItem).toHaveBeenCalledWith( +// 'MSW_COOKIE_STORE_test', +// 'test' +// ); +// }); - await waitFor(() => { - expect(window.localStorage.setItem).toHaveBeenCalledWith( - 'isForcedMenuOpen', - 'true' - ); - }); +// await waitFor(() => { +// expect(window.localStorage.setItem).toHaveBeenCalledWith( +// 'isForcedMenuOpen', +// 'true' +// ); +// }); - // Check that the "Support" link is rendered when the menu is expanded - // Make sure the element we find is not the tooltip rendered when the menu is collapsed - const supportMenuItemLabel = navbarRendered.getByText('Support'); - expect(supportMenuItemLabel.getAttribute('role')).not.toEqual('tooltip'); +// // Check that the "Support" link is rendered when the menu is expanded +// // Make sure the element we find is not the tooltip rendered when the menu is collapsed +// const supportMenuItemLabel = navbarRendered.getByText('Support'); +// expect(supportMenuItemLabel.getAttribute('role')).not.toEqual('tooltip'); - // Collapse the menu and verify local storage changes - fireEvent.click(button); +// // Collapse the menu and verify local storage changes +// fireEvent.click(button); - await waitFor(() => { - expect(window.localStorage.setItem).toHaveBeenCalledWith( - 'MSW_COOKIE_STORE_test', - 'test' - ); - }); +// await waitFor(() => { +// expect(window.localStorage.setItem).toHaveBeenCalledWith( +// 'MSW_COOKIE_STORE_test', +// 'test' +// ); +// }); - await waitFor(() => { - expect(window.localStorage.setItem).toHaveBeenCalledWith( - 'isForcedMenuOpen', - 'false' - ); - }); +// await waitFor(() => { +// expect(window.localStorage.setItem).toHaveBeenCalledWith( +// 'isForcedMenuOpen', +// 'false' +// ); +// }); - // Verify that the tooltip is available when the menu is collapsed - const supportMenuItemTooltip = navbarRendered.getByText('Support'); - expect(supportMenuItemTooltip.getAttribute('role')).toEqual('tooltip'); - expect(supportMenuItemTooltip).not.toBeVisible(); - }); -}); +// // Verify that the tooltip is available when the menu is collapsed +// const supportMenuItemTooltip = navbarRendered.getByText('Support'); +// expect(supportMenuItemTooltip.getAttribute('role')).toEqual('tooltip'); +// expect(supportMenuItemTooltip).not.toBeVisible(); +// }); +// }); -describe('when navbar menu items match given permissions', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canManageOrders', - value: true, - }, - ], - }), - }), - ], - }) - ); - }); - it('should render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ManageOrders'], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - const container = await findByLeftNavigation(); +// describe('when navbar menu items match given permissions', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canManageOrders', +// value: true, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ManageOrders'], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// const container = await findByLeftNavigation(); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await within(container).findByText(mainMenuLabel.value); - }); -}); -describe('when navbar menu items do not match given permissions', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canManageOrders', - value: false, - }, - ], - }), - }), - ], - }) - ); - }); - it('should not render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ViewOrders'], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - // Get the nav container, to narrow down the search area - const container = await findByLeftNavigation(); - const navbarRendered = within(container); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await within(container).findByText(mainMenuLabel.value); +// }); +// }); +// describe('when navbar menu items do not match given permissions', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canManageOrders', +// value: false, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should not render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ViewOrders'], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// // Get the nav container, to narrow down the search area +// const container = await findByLeftNavigation(); +// const navbarRendered = within(container); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await waitFor(() => { - expect( - navbarRendered.queryByText(mainMenuLabel.value) - ).not.toBeInTheDocument(); - }); - }); -}); -describe('when navbar menu items match given action rights', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canManageOrders', - value: true, - }, - ], - allAppliedActionRights: [ - { - __typename: 'AppliedActionRight', - group: 'orders', - name: 'canAddOrders', - value: true, - }, - ], - }), - }), - ], - }) - ); - }); - it('should render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ManageOrders'], - actionRights: [{ group: 'orders', name: 'AddOrders' }], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - const container = await findByLeftNavigation(); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await waitFor(() => { +// expect( +// navbarRendered.queryByText(mainMenuLabel.value) +// ).not.toBeInTheDocument(); +// }); +// }); +// }); +// describe('when navbar menu items match given action rights', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canManageOrders', +// value: true, +// }, +// ], +// allAppliedActionRights: [ +// { +// __typename: 'AppliedActionRight', +// group: 'orders', +// name: 'canAddOrders', +// value: true, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ManageOrders'], +// actionRights: [{ group: 'orders', name: 'AddOrders' }], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// const container = await findByLeftNavigation(); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await within(container).findByText(mainMenuLabel.value); - }); -}); -describe('when navbar menu items do not match given action rights', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canManageOrders', - value: true, - }, - ], - allAppliedActionRights: [ - { - __typename: 'AppliedActionRight', - group: 'orders', - name: 'canAddOrders', - value: false, - }, - ], - }), - }), - ], - }) - ); - }); - it('should not render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ManageOrders'], - actionRights: [{ group: 'orders', name: 'AddOrders' }], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - // Get the nav container, to narrow down the search area - const container = await findByLeftNavigation(); - const navbarRendered = within(container); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await within(container).findByText(mainMenuLabel.value); +// }); +// }); +// describe('when navbar menu items do not match given action rights', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canManageOrders', +// value: true, +// }, +// ], +// allAppliedActionRights: [ +// { +// __typename: 'AppliedActionRight', +// group: 'orders', +// name: 'canAddOrders', +// value: false, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should not render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ManageOrders'], +// actionRights: [{ group: 'orders', name: 'AddOrders' }], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// // Get the nav container, to narrow down the search area +// const container = await findByLeftNavigation(); +// const navbarRendered = within(container); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await waitFor(() => { - expect( - navbarRendered.queryByText(mainMenuLabel.value) - ).not.toBeInTheDocument(); - }); - }); -}); -describe('when navbar menu items match given data fences', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canManageOrders', - value: true, - }, - ], - allAppliedDataFences: [ - { - __typename: 'StoreDataFence', - value: 'usa', - type: 'store', - group: 'orders', - name: 'canManageOrders', - }, - ], - }), - }), - ], - }) - ); - }); - it('should render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ManageOrders'], - dataFences: [ - { - type: 'store', - group: 'orders', - name: 'ManageOrders', - }, - ], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - const container = await findByLeftNavigation(); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await waitFor(() => { +// expect( +// navbarRendered.queryByText(mainMenuLabel.value) +// ).not.toBeInTheDocument(); +// }); +// }); +// }); +// describe('when navbar menu items match given data fences', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canManageOrders', +// value: true, +// }, +// ], +// allAppliedDataFences: [ +// { +// __typename: 'StoreDataFence', +// value: 'usa', +// type: 'store', +// group: 'orders', +// name: 'canManageOrders', +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ManageOrders'], +// dataFences: [ +// { +// type: 'store', +// group: 'orders', +// name: 'ManageOrders', +// }, +// ], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// const container = await findByLeftNavigation(); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await within(container).findByText(mainMenuLabel.value); - }); -}); -describe('when navbar menu items do not match given data fences', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedPermissions: [ - { - __typename: 'AppliedPermission', - name: 'canViewOrders', - value: true, - }, - ], - allAppliedDataFences: [ - { - __typename: 'StoreDataFence', - value: 'usa', - type: 'store', - group: 'orders', - name: 'canViewOrders', - }, - ], - }), - }), - ], - }) - ); - }); - it('should not render item', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - permissions: ['ManageOrders'], - dataFences: [ - { - type: 'store', - group: 'orders', - name: 'ManageOrders', - }, - ], - }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - const container = await findByLeftNavigation(); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await within(container).findByText(mainMenuLabel.value); +// }); +// }); +// describe('when navbar menu items do not match given data fences', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedPermissions: [ +// { +// __typename: 'AppliedPermission', +// name: 'canViewOrders', +// value: true, +// }, +// ], +// allAppliedDataFences: [ +// { +// __typename: 'StoreDataFence', +// value: 'usa', +// type: 'store', +// group: 'orders', +// name: 'canViewOrders', +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should not render item', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// permissions: ['ManageOrders'], +// dataFences: [ +// { +// type: 'store', +// group: 'orders', +// name: 'ManageOrders', +// }, +// ], +// }); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// const container = await findByLeftNavigation(); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await waitFor(async () => { - expect( - within(container).queryByText(mainMenuLabel.value) - ).not.toBeInTheDocument(); - }); - }); -}); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await waitFor(async () => { +// expect( +// within(container).queryByText(mainMenuLabel.value) +// ).not.toBeInTheDocument(); +// }); +// }); +// }); -function getMenuItemBasedOnTooltipLabel(mainMenuLabel) { - return (menuItem) => - // eslint-disable-next-line testing-library/no-node-access - menuItem.querySelector('[aria-owns]').innerHTML === mainMenuLabel.value; -} -describe('navbar menu links interactions', () => { - // TODO: Refactor to utilize React Testing Library's query methods after Navbar accessibility improvements - async function checkLinksInteractions({ - container, - findByLeftNavigation, - mainMenuLabel, - mainSubmenuLabel, - }) { - // Check the relationships between the menu items of a group - const leftNavigation = await findByLeftNavigation(); - const submenuTooltip = Array.from( - leftNavigation - // eslint-disable-next-line testing-library/no-node-access - .querySelectorAll('[aria-owns]') - ).find((tooltip) => tooltip.innerHTML === mainMenuLabel.value); - const groupId = submenuTooltip.getAttribute('aria-owns'); +// function getMenuItemBasedOnTooltipLabel(mainMenuLabel) { +// return (menuItem) => +// // eslint-disable-next-line testing-library/no-node-access +// menuItem.querySelector('[aria-owns]').innerHTML === mainMenuLabel.value; +// } +// describe('navbar menu links interactions', () => { +// // TODO: Refactor to utilize React Testing Library's query methods after Navbar accessibility improvements +// async function checkLinksInteractions({ +// container, +// findByLeftNavigation, +// mainMenuLabel, +// mainSubmenuLabel, +// }) { +// // Check the relationships between the menu items of a group +// const leftNavigation = await findByLeftNavigation(); +// const submenuTooltip = Array.from( +// leftNavigation +// // eslint-disable-next-line testing-library/no-node-access +// .querySelectorAll('[aria-owns]') +// ).find((tooltip) => tooltip.innerHTML === mainMenuLabel.value); +// const groupId = submenuTooltip.getAttribute('aria-owns'); - // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container - const submenuContainer = container.querySelector(`#group-${groupId}`); - // The submenu container should not be expanded when the menu is not active. - expect(submenuContainer).toHaveAttribute('aria-expanded', 'false'); +// // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container +// const submenuContainer = container.querySelector(`#group-${groupId}`); +// // The submenu container should not be expanded when the menu is not active. +// expect(submenuContainer).toHaveAttribute('aria-expanded', 'false'); - const getMainMenuItem = getMenuItemBasedOnTooltipLabel(mainMenuLabel); +// const getMainMenuItem = getMenuItemBasedOnTooltipLabel(mainMenuLabel); - const menuItem = within(container) - .getAllByRole('menuitem') - .find(getMainMenuItem); +// const menuItem = within(container) +// .getAllByRole('menuitem') +// .find(getMainMenuItem); - // Hover over menu item - fireEvent.mouseOver(menuItem); - // The submenu container should be expanded - expect(submenuContainer).toHaveAttribute('aria-expanded', 'true'); +// // Hover over menu item +// fireEvent.mouseOver(menuItem); +// // The submenu container should be expanded +// expect(submenuContainer).toHaveAttribute('aria-expanded', 'true'); - const submenuLink = within(container) - .getByText(mainSubmenuLabel.value) - // eslint-disable-next-line testing-library/no-node-access - .closest('a'); +// const submenuLink = within(container) +// .getByText(mainSubmenuLabel.value) +// // eslint-disable-next-line testing-library/no-node-access +// .closest('a'); - // Go to the link - fireEvent.click(submenuLink); +// // Go to the link +// fireEvent.click(submenuLink); - // Ensure that the link becomes active - expect(submenuLink).toHaveAttribute('aria-current', 'page'); - } - describe('when rendering navbar menu links from local config', () => { - it('should render links with all the correct state attributes', async () => { - const menuLinks = createTestNavBarMenuLinksConfig(); - const { - container, - findByLeftNavigation, - waitForLeftNavigationToBeLoaded, - } = renderApp(null, { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - }); +// // Ensure that the link becomes active +// expect(submenuLink).toHaveAttribute('aria-current', 'page'); +// } +// describe('when rendering navbar menu links from local config', () => { +// it('should render links with all the correct state attributes', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig(); +// const { +// container, +// findByLeftNavigation, +// waitForLeftNavigationToBeLoaded, +// } = renderApp(null, { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// }); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - const mainSubmenuLabel = menuLinks.submenuLinks[0].labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// const mainSubmenuLabel = menuLinks.submenuLinks[0].labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); - // Wait for the loading nav container to disappear - await waitForLeftNavigationToBeLoaded(); - await checkLinksInteractions({ - container, - findByLeftNavigation, - mainMenuLabel, - mainSubmenuLabel, - }); - }); - }); - describe('when rendering navbar menu links from remote config and custom applications', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - graphql.query('FetchProjectExtensionsNavbar', (req, res, ctx) => { - return res( - ctx.data({ - projectExtension: ProjectExtensionMock.build({ - installedApplications: - CustomApplicationInstallationMock.buildList(1), - }), - }) - ); - }), - graphql - .link(`${window.location.origin}/api/graphql`) - .query('FetchApplicationsMenu', (req, res, ctx) => - res( - ctx.data({ - applicationsMenu: { - __typename: 'ApplicationsMenu', - appBar: ApplicationAppbarMenuMock.buildList(1), - navBarGroups: [ - ApplicationNavbarMenuGroupMock.random() - .key('2') - .items( - ApplicationNavbarMenuMock.buildList(1, { - labelAllLocales: [ - { - __typename: 'LocalizedField', - locale: 'en', - value: 'Products', - }, - ], - submenu: ApplicationNavbarSubmenuMock.buildList(1, { - labelAllLocales: [ - { - __typename: 'LocalizedField', - locale: 'en', - value: 'Add product', - }, - ], - }), - }) - ) - .buildGraphql(), - ], - }, - }) - ) - ), - ...getDefaultMockResolvers() - ); - }); - it('should render links with all the correct state attributes', async () => { - const { - container, - findByLeftNavigation, - waitForLeftNavigationToBeLoaded, - } = renderApp(null, { - environment: { - servedByProxy: 'true', - }, - }); - // Wait for the loading nav container to disappear - await waitForLeftNavigationToBeLoaded(); +// // Wait for the loading nav container to disappear +// await waitForLeftNavigationToBeLoaded(); +// await checkLinksInteractions({ +// container, +// findByLeftNavigation, +// mainMenuLabel, +// mainSubmenuLabel, +// }); +// }); +// }); +// describe('when rendering navbar menu links from remote config and custom applications', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// graphql.query('FetchProjectExtensionsNavbar', (req, res, ctx) => { +// return res( +// ctx.data({ +// projectExtension: ProjectExtensionMock.build({ +// installedApplications: +// CustomApplicationInstallationMock.buildList(1), +// }), +// }) +// ); +// }), +// graphql +// .link(`${window.location.origin}/api/graphql`) +// .query('FetchApplicationsMenu', (req, res, ctx) => +// res( +// ctx.data({ +// applicationsMenu: { +// __typename: 'ApplicationsMenu', +// appBar: ApplicationAppbarMenuMock.buildList(1), +// navBarGroups: [ +// ApplicationNavbarMenuGroupMock.random() +// .key('2') +// .items( +// ApplicationNavbarMenuMock.buildList(1, { +// labelAllLocales: [ +// { +// __typename: 'LocalizedField', +// locale: 'en', +// value: 'Products', +// }, +// ], +// submenu: ApplicationNavbarSubmenuMock.buildList(1, { +// labelAllLocales: [ +// { +// __typename: 'LocalizedField', +// locale: 'en', +// value: 'Add product', +// }, +// ], +// }), +// }) +// ) +// .buildGraphql(), +// ], +// }, +// }) +// ) +// ), +// ...getDefaultMockResolvers() +// ); +// }); +// it('should render links with all the correct state attributes', async () => { +// const { +// container, +// findByLeftNavigation, +// waitForLeftNavigationToBeLoaded, +// } = renderApp(null, { +// environment: { +// servedByProxy: 'true', +// }, +// }); +// // Wait for the loading nav container to disappear +// await waitForLeftNavigationToBeLoaded(); - // Check links from internal applications menu - await checkLinksInteractions({ - container, - findByLeftNavigation, - mainMenuLabel: { value: 'Products' }, - mainSubmenuLabel: { value: 'Add product' }, - }); +// // Check links from internal applications menu +// await checkLinksInteractions({ +// container, +// findByLeftNavigation, +// mainMenuLabel: { value: 'Products' }, +// mainSubmenuLabel: { value: 'Add product' }, +// }); - // Check links from custom applications menu - await checkLinksInteractions({ - container, - findByLeftNavigation, - mainMenuLabel: { value: 'My application' }, - mainSubmenuLabel: { value: 'Something new' }, - }); - }); - }); - describe('when accessing a project that does not exist or the user has no access', () => { - it('should render page not found', async () => { - let isQueryCalled = false; - mockServer.use( - ...getDefaultMockResolvers(), - graphql.query('FetchProjectExtensionsNavbar', (req, res, ctx) => { - isQueryCalled = true; - return res( - ctx.status(401), - ctx.errors([ - new GraphQLError('User is not authorized', { - extensions: { - code: 'UNAUTHENTICATED', - }, - }), - ]) - ); - }), - graphql - .link(`${window.location.origin}/api/graphql`) - .query('FetchApplicationsMenu', (req, res, ctx) => - res(ctx.data({ applicationsMenu: null })) - ) - ); - renderApp(null, { - environment: { - servedByProxy: 'true', - }, - route: '/not-found', - }); +// // Check links from custom applications menu +// await checkLinksInteractions({ +// container, +// findByLeftNavigation, +// mainMenuLabel: { value: 'My application' }, +// mainSubmenuLabel: { value: 'Something new' }, +// }); +// }); +// }); +// describe('when accessing a project that does not exist or the user has no access', () => { +// it('should render page not found', async () => { +// let isQueryCalled = false; +// mockServer.use( +// ...getDefaultMockResolvers(), +// graphql.query('FetchProjectExtensionsNavbar', (req, res, ctx) => { +// isQueryCalled = true; +// return res( +// ctx.status(401), +// ctx.errors([ +// new GraphQLError('User is not authorized', { +// extensions: { +// code: 'UNAUTHENTICATED', +// }, +// }), +// ]) +// ); +// }), +// graphql +// .link(`${window.location.origin}/api/graphql`) +// .query('FetchApplicationsMenu', (req, res, ctx) => +// res(ctx.data({ applicationsMenu: null })) +// ) +// ); +// renderApp(null, { +// environment: { +// servedByProxy: 'true', +// }, +// route: '/not-found', +// }); - await screen.findByText('We could not find this Project'); - expect(isQueryCalled).toBe(false); - }); - }); -}); -describe('when navbar menu items are hidden', () => { - beforeEach(() => { - mockServer.resetHandlers(); - mockServer.use( - ...getDefaultMockResolvers({ - projects: [ - ProjectMock.build({ - ...createTestAppliedPermissions({ - allAppliedMenuVisibilities: [ - { - __typename: 'AppliedMenuVisibilities', - name: 'hideFoo', - value: true, - }, - ], - }), - }), - ], - }) - ); - }); - it('should not render hidden main menu items', async () => { - const menuLinks = createTestNavBarMenuLinksConfig({ - menuVisibility: 'hideFoo', - submenuLinks: [], - }); +// await screen.findByText('We could not find this Project'); +// expect(isQueryCalled).toBe(false); +// }); +// }); +// }); +// describe('when navbar menu items are hidden', () => { +// beforeEach(() => { +// mockServer.resetHandlers(); +// mockServer.use( +// ...getDefaultMockResolvers({ +// projects: [ +// ProjectMock.build({ +// ...createTestAppliedPermissions({ +// allAppliedMenuVisibilities: [ +// { +// __typename: 'AppliedMenuVisibilities', +// name: 'hideFoo', +// value: true, +// }, +// ], +// }), +// }), +// ], +// }) +// ); +// }); +// it('should not render hidden main menu items', async () => { +// const menuLinks = createTestNavBarMenuLinksConfig({ +// menuVisibility: 'hideFoo', +// submenuLinks: [], +// }); - const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( - null, - { - environment: { - __DEVELOPMENT__: { - menuLinks, - }, - }, - } - ); - await waitForLeftNavigationToBeLoaded(); - // Get the nav container, to narrow down the search area - const container = await findByLeftNavigation(); - const navbarRendered = within(container); +// const { waitForLeftNavigationToBeLoaded, findByLeftNavigation } = renderApp( +// null, +// { +// environment: { +// __DEVELOPMENT__: { +// menuLinks, +// }, +// }, +// } +// ); +// await waitForLeftNavigationToBeLoaded(); +// // Get the nav container, to narrow down the search area +// const container = await findByLeftNavigation(); +// const navbarRendered = within(container); - const applicationLocale = 'en'; - const mainMenuLabel = menuLinks.labelAllLocales.find( - (localized) => localized.locale === applicationLocale - ); - await waitFor(() => { - expect( - navbarRendered.queryByText(mainMenuLabel.value) - ).not.toBeInTheDocument(); - }); - }); -}); +// const applicationLocale = 'en'; +// const mainMenuLabel = menuLinks.labelAllLocales.find( +// (localized) => localized.locale === applicationLocale +// ); +// await waitFor(() => { +// expect( +// navbarRendered.queryByText(mainMenuLabel.value) +// ).not.toBeInTheDocument(); +// }); +// }); +// }); diff --git a/packages/application-shell/src/components/application-shell/application-shell.tsx b/packages/application-shell/src/components/application-shell/application-shell.tsx index 056e25432e..eec8200be6 100644 --- a/packages/application-shell/src/components/application-shell/application-shell.tsx +++ b/packages/application-shell/src/components/application-shell/application-shell.tsx @@ -7,7 +7,7 @@ import { import type { NormalizedCacheObject } from '@apollo/client'; import { ApolloClient } from '@apollo/client'; import type { TFlags } from '@flopflip/types'; -import { Switch } from 'react-router-dom'; +import { Routes } from 'react-router-dom'; import type { Dispatch } from 'redux'; import type { TApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n'; @@ -83,7 +83,7 @@ const ApplicationShell = (props: TApplicationShellProps) => { {({ isAuthenticated }) => { if (isAuthenticated) { return ( - + @@ -101,7 +101,7 @@ const ApplicationShell = (props: TApplicationShellProps) => { {props.children} - + ); } return ; diff --git a/packages/application-shell/src/components/authenticated/authenticated.tsx b/packages/application-shell/src/components/authenticated/authenticated.tsx index b24820504d..4f016bf0d1 100644 --- a/packages/application-shell/src/components/authenticated/authenticated.tsx +++ b/packages/application-shell/src/components/authenticated/authenticated.tsx @@ -1,4 +1,4 @@ -import { Route, Switch } from 'react-router-dom'; +import { Route, Routes } from 'react-router-dom'; import type { ApplicationWindow } from '@commercetools-frontend/constants'; import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n'; import SuspendedRoute from '../suspended-route'; @@ -37,7 +37,7 @@ const Authenticated = (props: TAuthenticatedProps) => { Authenticated.displayName = 'Authenticated'; const AuthenticationRoutes = (props: TAuthenticatedProps) => ( - + ( - + ); AuthenticationRoutes.displayName = 'AuthenticationRoutes'; diff --git a/packages/application-shell/src/components/custom-view-dev-host/custom-view-dev-host.tsx b/packages/application-shell/src/components/custom-view-dev-host/custom-view-dev-host.tsx index 90f165546c..93dc62984e 100644 --- a/packages/application-shell/src/components/custom-view-dev-host/custom-view-dev-host.tsx +++ b/packages/application-shell/src/components/custom-view-dev-host/custom-view-dev-host.tsx @@ -1,7 +1,11 @@ import { type ReactNode, useState } from 'react'; -import { Route, Router, Switch, useRouteMatch } from 'react-router-dom'; +import { + Route, + BrowserRouter as Router, + Routes, + useMatch, +} from 'react-router-dom'; import { CustomViewLoader } from '@commercetools-frontend/application-components'; -import history from '@commercetools-frontend/browser-history'; import type { ApplicationWindow } from '@commercetools-frontend/constants'; import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n'; import Constraints from '@commercetools-uikit/constraints'; @@ -97,18 +101,20 @@ export type TCustomViewDevHost = { }; const SimulatedIframeRoute = (props: Pick) => { - const routeMatch = useRouteMatch(); + const routeMatch = useMatch( + '/custom-views/:customViewId/projects/:projectKey' + ); console.info( `ℹ️ Rendering a Custom View as it would be rendered within an iframe`, - routeMatch.url + routeMatch?.pathname ); return <>{props.children}; }; const CustomViewDevHost = (props: TCustomViewDevHost) => { return ( - - + + {/* Simulate the rendering of the Custom View as if it would be served from a different host via an iframe. */} @@ -124,7 +130,7 @@ const CustomViewDevHost = (props: TCustomViewDevHost) => { - + ); }; diff --git a/packages/application-shell/src/components/project-container/project-container.tsx b/packages/application-shell/src/components/project-container/project-container.tsx index 46ebe6ca4d..bc4ef138f4 100644 --- a/packages/application-shell/src/components/project-container/project-container.tsx +++ b/packages/application-shell/src/components/project-container/project-container.tsx @@ -4,10 +4,10 @@ import ReactDOM from 'react-dom'; import { useIntl } from 'react-intl'; import { Route, - Switch, - Redirect, + Routes, + Navigate, useLocation, - useRouteMatch, + useMatch, } from 'react-router-dom'; import type { TProviderProps } from '@commercetools-frontend/application-shell-connectors'; import { ApplicationContextProvider } from '@commercetools-frontend/application-shell-connectors'; @@ -32,9 +32,6 @@ import ProjectSuspended from '../project-suspended'; import RedirectToProjectCreate from '../redirect-to-project-create'; import messages from './messages'; -type QueryParams = { - projectKey?: string; -}; type TProjectContainerProps = { user: TFetchLoggedInUserQuery['user']; environment: TProviderProps<{ enableSignUp?: boolean }>['environment']; @@ -54,7 +51,7 @@ const shouldShowNotificationForTrialExpired = (daysLeft?: number) => const ProjectContainer = (props: TProjectContainerProps) => { const intl = useIntl(); const location = useLocation(); - const match = useRouteMatch(); + const match = useMatch('/:projectKey'); const [localeSwitcherNode, setLocaleSwitcherNode] = useState(null); @@ -80,7 +77,7 @@ const ProjectContainer = (props: TProjectContainerProps) => { setLocaleSwitcherNode(document.getElementById(CONTAINERS.LOCALE_SWITCHER)); }, [setLocaleSwitcherNode]); - const projectKey = match.params.projectKey; + const projectKey = match?.params.projectKey; useEffect(() => { // Ensure to sync the `projectKey` from the URL with localStorage. if (projectKey) { @@ -105,15 +102,15 @@ const ProjectContainer = (props: TProjectContainerProps) => { props.environment.enableSignUp !== true && props.environment.servedByProxy ) - return ; + return ; if (hasNoProjects && props.environment.enableSignUp) return ( - + {props.render?.()} - + ); return ( diff --git a/packages/application-shell/src/components/suspended-route/suspended-route.tsx b/packages/application-shell/src/components/suspended-route/suspended-route.tsx index 367b8f33af..d50eae0602 100644 --- a/packages/application-shell/src/components/suspended-route/suspended-route.tsx +++ b/packages/application-shell/src/components/suspended-route/suspended-route.tsx @@ -3,9 +3,12 @@ import { Route, type RouteProps } from 'react-router-dom'; import LoadingSpinner from '@commercetools-uikit/loading-spinner'; const SuspendedRoute = (props: RouteProps) => ( - - }>{props.children} - + }>{props.children} + } + /> ); SuspendedRoute.displayName = 'SuspendedRoute'; diff --git a/packages/application-shell/src/hooks/use-routes-creator/use-routes-creator.ts b/packages/application-shell/src/hooks/use-routes-creator/use-routes-creator.ts index fe1e278cb6..a8eebc1b93 100644 --- a/packages/application-shell/src/hooks/use-routes-creator/use-routes-creator.ts +++ b/packages/application-shell/src/hooks/use-routes-creator/use-routes-creator.ts @@ -1,9 +1,9 @@ import type { History } from 'history'; import { - useHistory, - useRouteMatch, - generatePath, + useNavigate, useLocation, + useMatch, + generatePath, } from 'react-router-dom'; export interface RouteParams extends Record {} @@ -50,8 +50,10 @@ const makeRoute = ( }; function useRoutesCreator() { - const { params } = useRouteMatch(); - const { push: goTo, location } = useHistory(); + const match = useMatch('/:projectKey/*'); + const params = match?.params ?? {}; + const goTo = useNavigate(); + const location = useLocation(); const createRoute = (routePath: RoutePath) => makeRoute : never>( diff --git a/packages/application-shell/src/test-utils/test-utils.spec.tsx b/packages/application-shell/src/test-utils/test-utils.spec.tsx index c8aa9afa19..bd411fa94c 100644 --- a/packages/application-shell/src/test-utils/test-utils.spec.tsx +++ b/packages/application-shell/src/test-utils/test-utils.spec.tsx @@ -12,7 +12,7 @@ import { screen } from '@testing-library/react'; import { setupServer } from 'msw/node'; import { useIntl } from 'react-intl'; import { useSelector, useStore } from 'react-redux'; -import { Switch, Route } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; import { ApplicationContext, useMcQuery, @@ -330,11 +330,11 @@ describe('ApplicationContext', () => { describe('router', () => { const TestComponent = () => ( - - {'Foo'} + + Foo} /> {/* Define a catch-all route */} - {'None'} - + None} /> + ); it('should render fallback when no route is provided', async () => { renderApp(, createDefaultOptions()); diff --git a/packages/application-shell/src/test-utils/test-utils.tsx b/packages/application-shell/src/test-utils/test-utils.tsx index 240a79ff3e..d7a4072dec 100644 --- a/packages/application-shell/src/test-utils/test-utils.tsx +++ b/packages/application-shell/src/test-utils/test-utils.tsx @@ -19,7 +19,7 @@ import * as rtlHooks from '@testing-library/react-hooks'; import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { Provider as StoreProvider } from 'react-redux'; -import { Router } from 'react-router-dom'; +import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; import invariant from 'tiny-invariant'; import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-config/ssr'; import { @@ -361,7 +361,7 @@ function createApplicationProviders< environment={mergedEnvironment} projectDataLocale={dataLocale} > - + }> - + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 150f328afc..80516a11a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1661,7 +1661,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/card': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/constraints': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) @@ -1688,7 +1688,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) '@commercetools-uikit/secondary-button': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/select-input': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) @@ -1865,8 +1865,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) redux: specifier: 4.2.1 version: 4.2.1 @@ -9253,6 +9253,28 @@ packages: - react-dom dev: false + /@commercetools-uikit/card@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2): + resolution: {integrity: sha512-3kIpnFAKa7007Tk3Y+GtHBwKtZkT/Wp5cZSz0SvHdnytuzLbmRz5daZ4Sjb68kF0Mg1JsJAIDW4k5++fbTjJ6w==} + peerDependencies: + react: 17.x + react-router-dom: 5.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/spacings-inset': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + '@types/react-router-dom': 5.3.3 + prop-types: 15.8.1 + react: 17.0.2 + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) + transitivePeerDependencies: + - '@types/react' + - react-dom + dev: false + /@commercetools-uikit/card@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2): resolution: {integrity: sha512-3kIpnFAKa7007Tk3Y+GtHBwKtZkT/Wp5cZSz0SvHdnytuzLbmRz5daZ4Sjb68kF0Mg1JsJAIDW4k5++fbTjJ6w==} peerDependencies: @@ -11145,6 +11167,32 @@ packages: - react-dom dev: false + /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): + resolution: {integrity: sha512-2Ct3w7TnljAQlA1avv4d/rRidOUT6aqv5Hilrc5zK8Qh9LPZVCHhMpko1R8Clu6yadecxGITqNGdmcu1pTRFjw==} + peerDependencies: + react: 17.x + react-intl: 6.x + react-router-dom: 5.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + lodash: 4.17.21 + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) + transitivePeerDependencies: + - '@types/react' + - react-dom + dev: false + /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): resolution: {integrity: sha512-2Ct3w7TnljAQlA1avv4d/rRidOUT6aqv5Hilrc5zK8Qh9LPZVCHhMpko1R8Clu6yadecxGITqNGdmcu1pTRFjw==} peerDependencies: @@ -15408,7 +15456,6 @@ packages: /@remix-run/router@1.14.0: resolution: {integrity: sha512-WOHih+ClN7N8oHk9N4JUiMxQJmRVaOxcg8w7F/oHUXzJt920ekASLI/7cYX8XkntDWRhLZtsk6LbGrkgOAvi5A==} engines: {node: '>=14.0.0'} - dev: false /@remix-run/server-runtime@1.4.3(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-NgzoEAlIuZWv53oZRgxGz+jqkEtAa+veAuxlp5/UcZ/VhygpYIcfKwdx4eCOqJOi1TqILNWrh3cedEVvV0jccQ==} @@ -28513,7 +28560,6 @@ packages: react: 17.0.2 react-dom: 17.0.2(react@17.0.2) react-router: 6.21.0(react@17.0.2) - dev: false /react-router@5.3.4(react@17.0.2): resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==} @@ -28539,7 +28585,6 @@ packages: dependencies: '@remix-run/router': 1.14.0 react: 17.0.2 - dev: false /react-select@5.8.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==} From 3400865313ec6be63d9311964b12a3f931d014d4 Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 04:01:47 +0100 Subject: [PATCH 02/12] refactor: migrate application component to use rr v6 --- packages/application-components/package.json | 5 +-- .../tabular-detail-page.spec.tsx | 39 +++++++++++-------- .../tabular-main-page.spec.tsx | 34 +++++++++------- .../src/components/tab-header/tab-header.tsx | 11 ++---- .../use-custom-view-locator-selector.spec.tsx | 6 ++- .../use-custom-view-locator-selector.ts | 7 +--- .../src/test-utils/test-utils.tsx | 5 ++- packages/application-shell/package.json | 2 +- .../src/components/navbar/navbar.tsx | 15 +++---- .../src/test-utils/test-utils.tsx | 1 + pnpm-lock.yaml | 19 +++------ 11 files changed, 68 insertions(+), 76 deletions(-) diff --git a/packages/application-components/package.json b/packages/application-components/package.json index 3ae2036540..6f03f3fb68 100644 --- a/packages/application-components/package.json +++ b/packages/application-components/package.json @@ -65,7 +65,6 @@ "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", "@types/react-modal": "^3.16.0", - "@types/react-router-dom": "^5.3.3", "history": "4.10.1", "lodash": "4.17.21", "prop-types": "15.8.1", @@ -85,12 +84,12 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-intl": "^6.4.7", - "react-router-dom": "5.3.4" + "react-router-dom": "6" }, "peerDependencies": { "react": "17.x", "react-dom": "17.x", "react-intl": "6.x", - "react-router-dom": "5.x" + "react-router-dom": "6.x" } } diff --git a/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx b/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx index 518cf55327..7bd8405d0c 100644 --- a/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx +++ b/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect, useHistory } from 'react-router-dom'; +import { Routes, Route, Navigate, useNavigate } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Text from '@commercetools-uikit/text'; import { warning } from '@commercetools-uikit/utils'; @@ -18,19 +18,25 @@ jest.mock('@commercetools-uikit/utils', () => ({ const Content = () => ( - - } /> - - - {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} - - - - - {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} - - - + + } /> + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} + + } + /> + + {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} + + } + /> + ); @@ -52,7 +58,7 @@ const renderTabularDetailPage = (additionalProps = {}) => ); const TabularDetailPageWithHistory = (additionalProps = {}) => { - const history = useHistory(); + const navigate = useNavigate(); return ( { } - onPreviousPathClick={() => history.push('/start')} + onPreviousPathClick={() => navigate('/start')} {...additionalProps} > @@ -105,7 +111,6 @@ describe('navigation', () => { }); it('should navigate to link on back button click', async () => { const { history } = renderComponent(); - fireEvent.click(screen.getByRole('button', { name: /go back/i })); await waitFor(() => { expect(history.location.pathname).toBe('/start'); diff --git a/packages/application-components/src/components/main-pages/tabular-main-page/tabular-main-page.spec.tsx b/packages/application-components/src/components/main-pages/tabular-main-page/tabular-main-page.spec.tsx index f404cacfc2..d60b5b739e 100644 --- a/packages/application-components/src/components/main-pages/tabular-main-page/tabular-main-page.spec.tsx +++ b/packages/application-components/src/components/main-pages/tabular-main-page/tabular-main-page.spec.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect } from 'react-router-dom'; +import { Routes, Route, Navigate } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Text from '@commercetools-uikit/text'; import { warning } from '@commercetools-uikit/utils'; @@ -18,19 +18,25 @@ jest.mock('@commercetools-uikit/utils', () => ({ const Content = () => ( - - } /> - - - {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} - - - - - {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} - - - + + } /> + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} + + } + /> + + {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} + + } + /> + ); diff --git a/packages/application-components/src/components/tab-header/tab-header.tsx b/packages/application-components/src/components/tab-header/tab-header.tsx index ecb12117e1..66d21bd9d8 100644 --- a/packages/application-components/src/components/tab-header/tab-header.tsx +++ b/packages/application-components/src/components/tab-header/tab-header.tsx @@ -1,7 +1,7 @@ import type { ReactNode } from 'react'; import type { LocationDescriptor } from 'history'; import { useIntl, type MessageDescriptor } from 'react-intl'; -import { Link, matchPath, useLocation } from 'react-router-dom'; +import { Link, useLocation, matchPath } from 'react-router-dom'; import Text from '@commercetools-uikit/text'; import { warning } from '@commercetools-uikit/utils'; import { getLinkStyles } from './tab.styles'; @@ -61,14 +61,11 @@ const TabLabel = ({ children }: { children?: string }) => { export const TabHeader = (props: TTabHeaderProps) => { const intl = useIntl(); const location = useLocation(); + const isActive = Boolean( - matchPath(location.pathname, { - // strip the search, otherwise the path won't match - path: pathWithoutSearch(props.to), - exact: props.exactPathMatch, - strict: false, - }) + matchPath(pathWithoutSearch(props.to) || '', location.pathname) ); + const isDisabled = props.isDisabled; let label = props.label; diff --git a/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx b/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx index ae45e8271e..43ffe39df7 100644 --- a/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx +++ b/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.spec.tsx @@ -1,6 +1,6 @@ import { renderHook } from '@testing-library/react-hooks'; import { createMemoryHistory } from 'history'; -import { Router } from 'react-router-dom'; +import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; import useCustomViewLocatorSelector from './use-custom-view-locator-selector'; const mockConfig = { @@ -16,7 +16,9 @@ const createMockHistory = (location: string) => const render = (location: string) => renderHook(() => useCustomViewLocatorSelector(mockConfig), { wrapper: ({ children }) => ( - {children} + + {children} + ), }); diff --git a/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts b/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts index 606594c5ee..8f68a6543a 100644 --- a/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts +++ b/packages/application-components/src/hooks/use-custom-view-locator-selector/use-custom-view-locator-selector.ts @@ -11,12 +11,7 @@ const useCustomViewLocatorSelector = ( const customViewLocator = Object.entries(customViewLocatorCodes).find( ([, locator]) => { - return matchPath(location.pathname, { - // strip the search, otherwise the path won't match - path: pathWithoutSearch(locator), - exact: true, - strict: false, - }); + return matchPath(pathWithoutSearch(locator) || '', location.pathname); } ); diff --git a/packages/application-components/src/test-utils/test-utils.tsx b/packages/application-components/src/test-utils/test-utils.tsx index 8cd099272a..dba43670ff 100644 --- a/packages/application-components/src/test-utils/test-utils.tsx +++ b/packages/application-components/src/test-utils/test-utils.tsx @@ -6,7 +6,7 @@ import type { RenderOptions } from '@testing-library/react'; import { render } from '@testing-library/react'; import { createMemoryHistory, type MemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; -import { Router } from 'react-router-dom'; +import { MemoryRouter } from 'react-router-dom'; import { createApolloClient, ApplicationContextProvider, @@ -68,7 +68,8 @@ const customRender = ( .buildGraphql()} > - {node} + {/* TODO: get this to work well with history */} + {node} diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json index b9ce9f0229..85dd22333d 100644 --- a/packages/application-shell/package.json +++ b/packages/application-shell/package.json @@ -126,7 +126,7 @@ "react-dom": "17.x", "react-intl": "6.x", "react-redux": "7.x", - "react-router-dom": "5.x", + "react-router-dom": "6.x", "redux": "4.x" }, "engines": { diff --git a/packages/application-shell/src/components/navbar/navbar.tsx b/packages/application-shell/src/components/navbar/navbar.tsx index 4e05c700eb..3d9d6efd01 100644 --- a/packages/application-shell/src/components/navbar/navbar.tsx +++ b/packages/application-shell/src/components/navbar/navbar.tsx @@ -105,11 +105,7 @@ const getIsSubmenuRouteActive = ( props: ApplicationMenuProps ) => Boolean( - matchPath(props.location.pathname, { - path: `/${props.projectKey}/${uriPath}`, - exact: true, - strict: false, - }) + matchPath(props.location.pathname, `/${props.projectKey}/${uriPath}`) ); export const ApplicationMenu = (props: ApplicationMenuProps) => { @@ -241,11 +237,10 @@ export const ApplicationMenu = (props: ApplicationMenuProps) => { ]); const isMainMenuRouteActive = Boolean( - matchPath(props.location.pathname, { - path: `/${props.projectKey}/${props.menu.uriPath}`, - exact: false, - strict: false, - }) + matchPath( + `/${props.projectKey}/${props.menu.uriPath}`, + props.location.pathname + ) ); useEffect(() => { diff --git a/packages/application-shell/src/test-utils/test-utils.tsx b/packages/application-shell/src/test-utils/test-utils.tsx index d7a4072dec..34c9d60bc9 100644 --- a/packages/application-shell/src/test-utils/test-utils.tsx +++ b/packages/application-shell/src/test-utils/test-utils.tsx @@ -361,6 +361,7 @@ function createApplicationProviders< environment={mergedEnvironment} projectDataLocale={dataLocale} > + {/* TODO: get this to work properly with history */} }> Date: Thu, 28 Nov 2024 05:09:20 +0100 Subject: [PATCH 03/12] refactor: migrate application-templates --- .../starter-typescript/package.json | 4 +- .../channel-details/channel-details.tsx | 2 +- .../src/components/channels/channels.tsx | 20 +- .../src/components/welcome/welcome.tsx | 6 +- .../starter-typescript/src/routes.tsx | 19 +- application-templates/starter/package.json | 6 +- .../src/components/channels/channels.jsx | 14 +- .../src/components/welcome/welcome.jsx | 6 +- application-templates/starter/src/routes.jsx | 19 +- pnpm-lock.yaml | 329 ++++++++++++++++-- 10 files changed, 345 insertions(+), 80 deletions(-) diff --git a/application-templates/starter-typescript/package.json b/application-templates/starter-typescript/package.json index 96d1540905..4746a06c3f 100644 --- a/application-templates/starter-typescript/package.json +++ b/application-templates/starter-typescript/package.json @@ -89,7 +89,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "redux": "4.2.1", "typescript": "5.0.4" }, @@ -99,8 +99,6 @@ "@types/eslint": "<9", "@types/react": "<18", "@types/react-dom": "<18", - "@types/react-router": "<6", - "@types/react-router-dom": "<6", "headers-polyfill": "3.2.5", "nwsapi": "2.2.7" } diff --git a/application-templates/starter-typescript/src/components/channel-details/channel-details.tsx b/application-templates/starter-typescript/src/components/channel-details/channel-details.tsx index 643c31f1fb..640529bf81 100644 --- a/application-templates/starter-typescript/src/components/channel-details/channel-details.tsx +++ b/application-templates/starter-typescript/src/components/channel-details/channel-details.tsx @@ -36,7 +36,7 @@ type TChannelDetailsProps = { const ChannelDetails = (props: TChannelDetailsProps) => { const intl = useIntl(); const params = useParams<{ id: string }>(); - const { loading, error, channel } = useChannelDetailsFetcher(params.id); + const { loading, error, channel } = useChannelDetailsFetcher(params.id!); const { dataLocale, projectLanguages } = useApplicationContext((context) => ({ dataLocale: context.dataLocale ?? '', projectLanguages: context.project?.languages ?? [], diff --git a/application-templates/starter-typescript/src/components/channels/channels.tsx b/application-templates/starter-typescript/src/components/channels/channels.tsx index c41d3fffc6..7503dcfaeb 100644 --- a/application-templates/starter-typescript/src/components/channels/channels.tsx +++ b/application-templates/starter-typescript/src/components/channels/channels.tsx @@ -1,9 +1,9 @@ import { useIntl } from 'react-intl'; import { Link as RouterLink, - Switch, - useHistory, - useRouteMatch, + Routes, + useNavigate, + useParams, } from 'react-router-dom'; import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants'; @@ -43,8 +43,8 @@ type TChannelsProps = { const Channels = (props: TChannelsProps) => { const intl = useIntl(); - const match = useRouteMatch(); - const { push } = useHistory(); + const params = useParams(); + const navigate = useNavigate(); const { page, perPage } = usePaginationState(); const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' }); const { dataLocale, projectLanguages } = useApplicationContext((context) => ({ @@ -118,7 +118,7 @@ const Channels = (props: TChannelsProps) => { sortedBy={tableSorting.value.key} sortDirection={tableSorting.value.order} onSortChange={tableSorting.onChange} - onRowClick={(row) => push(`${match.url}/${row.id}`)} + onRowClick={(row) => navigate(`${params.url}/${row.id}`)} /> { onPerPageChange={perPage.onChange} totalItems={channelsPaginatedResult.total} /> - - - push(`${match.url}`)} /> + + + navigate(`${params.url}`)} /> - + ) : null} diff --git a/application-templates/starter-typescript/src/components/welcome/welcome.tsx b/application-templates/starter-typescript/src/components/welcome/welcome.tsx index 1808d0bb30..1e8af9243d 100644 --- a/application-templates/starter-typescript/src/components/welcome/welcome.tsx +++ b/application-templates/starter-typescript/src/components/welcome/welcome.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { useRouteMatch, Link as RouterLink } from 'react-router-dom'; +import { Link as RouterLink, useParams } from 'react-router-dom'; import { useIntl } from 'react-intl'; import Constraints from '@commercetools-uikit/constraints'; import Grid from '@commercetools-uikit/grid'; @@ -65,7 +65,7 @@ const InfoCard = (props: TInfoCardProps) => ( InfoCard.displayName = 'InfoCard'; const Welcome = () => { - const match = useRouteMatch(); + const params = useParams(); const intl = useIntl(); return ( @@ -105,7 +105,7 @@ const Welcome = () => { diff --git a/application-templates/starter-typescript/src/routes.tsx b/application-templates/starter-typescript/src/routes.tsx index c9c67d257e..b6819b87e0 100644 --- a/application-templates/starter-typescript/src/routes.tsx +++ b/application-templates/starter-typescript/src/routes.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { Switch, Route, useRouteMatch } from 'react-router-dom'; +import { Routes, Route, useParams } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Channels from './components/channels'; import Welcome from './components/welcome'; @@ -8,7 +8,7 @@ type ApplicationRoutesProps = { children?: ReactNode; }; const ApplicationRoutes = (_props: ApplicationRoutesProps) => { - const match = useRouteMatch(); + const params = useParams(); /** * When using routes, there is a good chance that you might want to @@ -23,14 +23,13 @@ const ApplicationRoutes = (_props: ApplicationRoutesProps) => { return ( - - - - - - - - + + } + /> + } /> + ); }; diff --git a/application-templates/starter/package.json b/application-templates/starter/package.json index aee85860d6..e70842083e 100644 --- a/application-templates/starter/package.json +++ b/application-templates/starter/package.json @@ -67,8 +67,6 @@ "@types/jest": "^29.5.4", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "@types/testing-library__jest-dom": "^5.14.9", "eslint": "8.57.0", "eslint-formatter-pretty": "4.1.0", @@ -88,7 +86,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "redux": "4.2.1" }, "resolutions": { @@ -97,8 +95,6 @@ "@types/eslint": "<9", "@types/react": "<18", "@types/react-dom": "<18", - "@types/react-router": "<6", - "@types/react-router-dom": "<6", "headers-polyfill": "3.2.5", "nwsapi": "2.2.7" } diff --git a/application-templates/starter/src/components/channels/channels.jsx b/application-templates/starter/src/components/channels/channels.jsx index 9878e426ba..9ec613c0fc 100644 --- a/application-templates/starter/src/components/channels/channels.jsx +++ b/application-templates/starter/src/components/channels/channels.jsx @@ -3,8 +3,8 @@ import { useIntl } from 'react-intl'; import { Link as RouterLink, Switch, - useHistory, - useRouteMatch, + useNavigate, + useParams, } from 'react-router-dom'; import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants'; @@ -58,8 +58,8 @@ const itemRenderer = (item, column, dataLocale, projectLanguages) => { const Channels = (props) => { const intl = useIntl(); - const match = useRouteMatch(); - const { push } = useHistory(); + const params = useParams(); + const navigate = useNavigate(); const { page, perPage } = usePaginationState(); const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' }); const { dataLocale, projectLanguages } = useApplicationContext((context) => ({ @@ -112,7 +112,7 @@ const Channels = (props) => { sortedBy={tableSorting.value.key} sortDirection={tableSorting.value.order} onSortChange={tableSorting.onChange} - onRowClick={(row) => push(`${match.url}/${row.id}`)} + onRowClick={(row) => navigate(`${params.url}/${row.id}`)} /> { totalItems={channelsPaginatedResult.total} /> - - push(`${match.url}`)} /> + + navigate(`${params.url}`)} /> diff --git a/application-templates/starter/src/components/welcome/welcome.jsx b/application-templates/starter/src/components/welcome/welcome.jsx index 6cb37eed0f..e8ecfc6841 100644 --- a/application-templates/starter/src/components/welcome/welcome.jsx +++ b/application-templates/starter/src/components/welcome/welcome.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { useRouteMatch, Link as RouterLink } from 'react-router-dom'; +import { useParams, Link as RouterLink } from 'react-router-dom'; import { useIntl } from 'react-intl'; import Constraints from '@commercetools-uikit/constraints'; import Grid from '@commercetools-uikit/grid'; @@ -63,7 +63,7 @@ InfoCard.propTypes = { }; const Welcome = () => { - const match = useRouteMatch(); + const params = useParams(); const intl = useIntl(); return ( @@ -103,7 +103,7 @@ const Welcome = () => { diff --git a/application-templates/starter/src/routes.jsx b/application-templates/starter/src/routes.jsx index d8baaf2a60..f01145fe0c 100644 --- a/application-templates/starter/src/routes.jsx +++ b/application-templates/starter/src/routes.jsx @@ -1,10 +1,10 @@ -import { Switch, Route, useRouteMatch } from 'react-router-dom'; +import { Routes, Route, useParams } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Channels from './components/channels'; import Welcome from './components/welcome'; const ApplicationRoutes = () => { - const match = useRouteMatch(); + const params = useParams(); /** * When using routes, there is a good chance that you might want to @@ -19,14 +19,13 @@ const ApplicationRoutes = () => { return ( - - - - - - - - + + } + /> + } /> + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3bc091e4a2..86397f147e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -362,7 +362,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/data-table': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3) '@commercetools-uikit/flat-button': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) @@ -377,7 +377,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/loading-spinner': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) @@ -444,12 +444,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router': - specifier: 5.1.20 - version: 5.1.20 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@types/testing-library__jest-dom': specifier: ^5.14.9 version: 5.14.9 @@ -508,8 +502,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) redux: specifier: 4.2.1 version: 4.2.1 @@ -584,7 +578,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/data-table': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/flat-button': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -599,7 +593,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/loading-spinner': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -727,8 +721,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) redux: specifier: 4.2.1 version: 4.2.1 @@ -8794,7 +8788,7 @@ packages: '@commercetools-frontend/constants': 22.35.1 '@types/dompurify': 2.4.0 '@types/lodash': 4.17.4 - '@types/react': 17.0.80 + '@types/react': 17.0.83 ajv: 8.16.0 core-js: 3.32.2 cosmiconfig: 7.1.0 @@ -9497,6 +9491,100 @@ packages: - typescript dev: false + /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): + resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} + peerDependencies: + react: 17.x + react-dom: 17.x + react-intl: 6.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/accessible-hidden': 19.9.0(@types/react@17.0.80)(react@17.0.2) + '@commercetools-uikit/async-select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/card': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/collapsible-motion': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/field-label': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/grid': 19.9.0(@types/react@17.0.80)(react@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/primary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/radio-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/tooltip': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + debounce-promise: 3.1.2 + lodash: 4.17.21 + prop-types: 15.8.1 + react: 17.0.2 + react-beautiful-dnd: 13.1.1(react-dom@17.0.2)(react@17.0.2) + react-dom: 17.0.2(react@17.0.2) + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + transitivePeerDependencies: + - '@types/react' + - react-native + - react-router-dom + - typescript + dev: false + + /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3): + resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} + peerDependencies: + react: 17.x + react-dom: 17.x + react-intl: 6.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/accessible-hidden': 19.9.0(@types/react@17.0.80)(react@17.0.2) + '@commercetools-uikit/async-select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/card': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/collapsible-motion': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/field-label': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/grid': 19.9.0(@types/react@17.0.80)(react@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/primary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/radio-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/tooltip': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + debounce-promise: 3.1.2 + lodash: 4.17.21 + prop-types: 15.8.1 + react: 17.0.2 + react-beautiful-dnd: 13.1.1(react-dom@17.0.2)(react@17.0.2) + react-dom: 17.0.2(react@17.0.2) + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + transitivePeerDependencies: + - '@types/react' + - react-native + - react-router-dom + - typescript + dev: false + /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} peerDependencies: @@ -9600,6 +9688,62 @@ packages: - typescript dev: false + /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): + resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} + peerDependencies: + react: 17.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + lodash: 4.17.21 + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + transitivePeerDependencies: + - '@types/react' + - react-dom + - react-native + - react-router-dom + - typescript + dev: false + + /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3): + resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} + peerDependencies: + react: 17.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + lodash: 4.17.21 + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + transitivePeerDependencies: + - '@types/react' + - react-dom + - react-native + - react-router-dom + - typescript + dev: false + /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} peerDependencies: @@ -9765,6 +9909,60 @@ packages: - typescript dev: false + /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): + resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} + peerDependencies: + react: 17.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/spacings-stack': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + transitivePeerDependencies: + - '@types/react' + - react-dom + - react-router-dom + - typescript + dev: false + + /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3): + resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} + peerDependencies: + react: 17.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) + '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/spacings-stack': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + transitivePeerDependencies: + - '@types/react' + - react-dom + - react-router-dom + - typescript + dev: false + /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} peerDependencies: @@ -10394,6 +10592,33 @@ packages: - react-dom dev: false + /@commercetools-uikit/link@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): + resolution: {integrity: sha512-UpQa4hfyk2ae68f1hTnincKpbQJP/PtplmKvkDaKduI0hMxc0qtxog83YsFgk9Tu7sZHqgOtNFL4JzB/uMK67Q==} + peerDependencies: + react: 17.x + react-intl: 6.x + react-router-dom: 5.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + '@types/history': 4.7.11 + '@types/react-router-dom': 5.3.3 + history: 4.10.1 + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) + transitivePeerDependencies: + - '@types/react' + - react-dom + dev: false + /@commercetools-uikit/link@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): resolution: {integrity: sha512-UpQa4hfyk2ae68f1hTnincKpbQJP/PtplmKvkDaKduI0hMxc0qtxog83YsFgk9Tu7sZHqgOtNFL4JzB/uMK67Q==} peerDependencies: @@ -11795,6 +12020,60 @@ packages: - typescript dev: false + /@commercetools-uikit/tag@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): + resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} + peerDependencies: + react: 17.x + react-router-dom: 5.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) + transitivePeerDependencies: + - '@types/react' + - react-dom + - typescript + dev: false + + /@commercetools-uikit/tag@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3): + resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} + peerDependencies: + react: 17.x + react-router-dom: 5.x + dependencies: + '@babel/runtime': 7.24.5 + '@babel/runtime-corejs3': 7.22.15 + '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) + '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) + '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) + '@commercetools-uikit/utils': 19.9.0(react@17.0.2) + '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) + '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) + prop-types: 15.8.1 + react: 17.0.2 + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) + transitivePeerDependencies: + - '@types/react' + - react-dom + - typescript + dev: false + /@commercetools-uikit/tag@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} peerDependencies: @@ -16536,7 +16815,7 @@ packages: /@types/hoist-non-react-statics@3.3.1: resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==} dependencies: - '@types/react': 17.0.80 + '@types/react': 17.0.83 hoist-non-react-statics: 3.3.2 /@types/html-minifier-terser@6.1.0: @@ -16749,9 +17028,6 @@ packages: kleur: 3.0.3 dev: false - /@types/prop-types@15.7.13: - resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} - /@types/prop-types@15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} @@ -16772,7 +17048,7 @@ packages: /@types/react-is@17.0.7: resolution: {integrity: sha512-WrTEiT+c6rgq36QApoy0063uAOdltCrhF0QMXLIgYPaTvIdQhAB8hPb5oGGqX18xToElNILS9UprwU6GyINcJg==} dependencies: - '@types/react': 17.0.80 + '@types/react': 17.0.83 dev: false /@types/react-modal@3.16.0: @@ -16793,19 +17069,19 @@ packages: resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.80 + '@types/react': 17.0.83 '@types/react-router': 5.1.20 /@types/react-router@5.1.20: resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} dependencies: '@types/history': 4.7.11 - '@types/react': 17.0.80 + '@types/react': 17.0.83 /@types/react-transition-group@4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} dependencies: - '@types/react': 17.0.80 + '@types/react': 17.0.83 dev: false /@types/react@17.0.80: @@ -16818,8 +17094,8 @@ packages: /@types/react@17.0.83: resolution: {integrity: sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==} dependencies: - '@types/prop-types': 15.7.13 - '@types/scheduler': 0.16.8 + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.3 csstype: 3.1.3 /@types/redux-logger@3.0.9: @@ -16851,9 +17127,6 @@ packages: /@types/scheduler@0.16.3: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} - /@types/scheduler@0.16.8: - resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} - /@types/semver@6.2.3: resolution: {integrity: sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==} dev: false From 6e17de280c16da9d5c20652ac2707930416f9859 Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 05:19:05 +0100 Subject: [PATCH 04/12] refactor: update switch to routes for starter --- .../starter/src/components/channels/channels.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application-templates/starter/src/components/channels/channels.jsx b/application-templates/starter/src/components/channels/channels.jsx index 9ec613c0fc..f4edd082fe 100644 --- a/application-templates/starter/src/components/channels/channels.jsx +++ b/application-templates/starter/src/components/channels/channels.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; import { Link as RouterLink, - Switch, + Routes, useNavigate, useParams, } from 'react-router-dom'; @@ -121,11 +121,11 @@ const Channels = (props) => { onPerPageChange={perPage.onChange} totalItems={channelsPaginatedResult.total} /> - + navigate(`${params.url}`)} /> - + ) : null} From 7301f5c173ecc2044b7ddddf67c4ba0022d438a9 Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 05:50:46 +0100 Subject: [PATCH 05/12] refactor: migrate playground --- playground/package.json | 2 +- .../components/entry-point/entry-point.jsx | 42 +++++++------ .../notifications-playground.jsx | 38 +++++++----- playground/src/routes.jsx | 54 ++++++++-------- pnpm-lock.yaml | 62 +++++++++---------- 5 files changed, 102 insertions(+), 96 deletions(-) diff --git a/playground/package.json b/playground/package.json index 9761519989..cabe0b40b3 100644 --- a/playground/package.json +++ b/playground/package.json @@ -57,7 +57,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-intl": "^6.4.7", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "vercel": "24.2.5" }, "devDependencies": { diff --git a/playground/src/components/entry-point/entry-point.jsx b/playground/src/components/entry-point/entry-point.jsx index 404004c320..e6123183f0 100644 --- a/playground/src/components/entry-point/entry-point.jsx +++ b/playground/src/components/entry-point/entry-point.jsx @@ -1,5 +1,9 @@ import { lazy } from 'react'; -import { Router, Switch, Route } from 'react-router-dom'; +import { + unstable_HistoryRouter as HistoryRouter, + Routes, + Route, +} from 'react-router-dom'; import { ApplicationShell, setupGlobalErrorListener, @@ -23,23 +27,25 @@ setupGlobalErrorListener(); const apolloClient = configureApolloClient(); const EntryPoint = () => ( - - - - - - - - - - - - - + + + } + /> + + + + } + /> + + ); EntryPoint.displayName = 'EntryPoint'; diff --git a/playground/src/components/notifications-playground/notifications-playground.jsx b/playground/src/components/notifications-playground/notifications-playground.jsx index 5b7998235e..47d5f1edd7 100644 --- a/playground/src/components/notifications-playground/notifications-playground.jsx +++ b/playground/src/components/notifications-playground/notifications-playground.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { Route, useRouteMatch, useHistory } from 'react-router-dom'; +import { Routes, Route, useNavigate, useResolvedPath } from 'react-router-dom'; import { useShowNotification } from '@commercetools-frontend/actions-global'; import { InfoModalPage, @@ -65,8 +65,8 @@ const NotificationsPlayground = (props) => { const dialogState = useModalState(); const dialogStateInDrawer = useModalState(); const drawerState = useModalState(); - const route = useRouteMatch(); - const history = useHistory(); + const path = useResolvedPath(); + const navigate = useNavigate(); return ( @@ -75,7 +75,7 @@ const NotificationsPlayground = (props) => { { - history.push(`${route.url}/${props.level}`); + navigate(`${path.url}/${props.level}`); }} /> { label={`Open drawer ${props.level}`} onClick={drawerState.openModal} /> - - - { - history.push(route.url); - }} - > - - - + + { + navigate(path.url); + }} + > + + + } + /> + { - const match = useRouteMatch(); - const history = useHistory(); + const navigate = useNavigate(); const goToStateMachinesList = useCallback(() => { - history.push(match.url); - }, [history, match.url]); + navigate('/state-machines'); + }, [navigate]); const goToStateMachineDetail = useCallback( (id) => { - history.push(`${match.url}/${id}`); + navigate(`/state-machines/${id}`); }, - [history, match.url] + [navigate] ); return ( - - - - - - - - - - - - - - - - - + } /> + } /> + } /> + } /> + + + } /> - - - - + + } + /> + ); }; ApplicationRoutes.displayName = 'ApplicationRoutes'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86397f147e..faf41e9bbf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3120,7 +3120,7 @@ importers: version: 7.22.15 '@commercetools-docs/ui-kit': specifier: 24.2.0 - version: 24.2.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + version: 24.2.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-frontend/actions-global': specifier: 22.35.1 version: link:../packages/actions-global @@ -3156,7 +3156,7 @@ importers: version: link:../packages/sdk '@commercetools-uikit/card': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/checkbox-input': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -3165,7 +3165,7 @@ importers: version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/data-table': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/date-time-input': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.83)(moment-timezone@0.5.40)(moment@2.29.4)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) @@ -3186,7 +3186,7 @@ importers: version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) '@commercetools-uikit/link': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/loading-spinner': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -3201,7 +3201,7 @@ importers: version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/secondary-button': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/spacings': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) @@ -3245,8 +3245,8 @@ importers: specifier: ^6.4.7 version: 6.4.7(react@17.0.2)(typescript@5.0.4) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) vercel: specifier: 24.2.5 version: 24.2.5(react-dom@17.0.2)(react@17.0.2) @@ -8717,7 +8717,7 @@ packages: '@babel/runtime-corejs3': 7.22.15 dev: false - /@commercetools-docs/ui-kit@24.2.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): + /@commercetools-docs/ui-kit@24.2.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-+VEBhduXDuXJtacIB8+JogAxIzGq6hJUNfmokzWgAYMkdGNHb9g8oMe1RZnUWlJ4d42qDCQ47nUB6fZM7Y4j5Q==} peerDependencies: react: 18.x @@ -8726,13 +8726,13 @@ packages: '@babel/runtime': 7.24.5 '@babel/runtime-corejs3': 7.22.15 '@commercetools-uikit/accessible-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/card': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) + '@commercetools-uikit/card': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/design-system': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2) '@commercetools-uikit/flat-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/icons': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/loading-spinner': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/primary-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/secondary-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + '@commercetools-uikit/secondary-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/secondary-icon-button': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/spacings': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/spacings-inline': 18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) @@ -9194,7 +9194,7 @@ packages: - typescript dev: false - /@commercetools-uikit/card@18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2): + /@commercetools-uikit/card@18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-D63NPkeI0HmcPrK22qSQrGeI6DpyzmM9iZzmnwVH3V3dieCHTDYHsa9jhSVA4tLEvsA5nG4vclXznj48tBZjNQ==} peerDependencies: react: 17.x @@ -9210,7 +9210,7 @@ packages: '@types/react-router-dom': 5.3.3 prop-types: 15.8.1 react: 17.0.2 - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom @@ -9260,7 +9260,7 @@ packages: - react-dom dev: false - /@commercetools-uikit/card@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2): + /@commercetools-uikit/card@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-3kIpnFAKa7007Tk3Y+GtHBwKtZkT/Wp5cZSz0SvHdnytuzLbmRz5daZ4Sjb68kF0Mg1JsJAIDW4k5++fbTjJ6w==} peerDependencies: react: 17.x @@ -9276,7 +9276,7 @@ packages: '@types/react-router-dom': 5.3.3 prop-types: 15.8.1 react: 17.0.2 - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom @@ -9585,7 +9585,7 @@ packages: - typescript dev: false - /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): + /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} peerDependencies: react: 17.x @@ -9597,10 +9597,10 @@ packages: '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/accessible-hidden': 19.9.0(@types/react@17.0.83)(react@17.0.2) '@commercetools-uikit/async-select-input': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/card': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) + '@commercetools-uikit/card': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/collapsible-motion': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2) - '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/field-label': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/grid': 19.9.0(@types/react@17.0.83)(react@17.0.2) '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) @@ -9608,11 +9608,11 @@ packages: '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/primary-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/radio-input': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/select-input': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/text': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) '@commercetools-uikit/tooltip': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/utils': 19.9.0(react@17.0.2) @@ -9744,7 +9744,7 @@ packages: - typescript dev: false - /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): + /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} peerDependencies: react: 17.x @@ -9752,7 +9752,7 @@ packages: '@babel/runtime': 7.24.5 '@babel/runtime-corejs3': 7.22.15 '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2) '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) @@ -9963,7 +9963,7 @@ packages: - typescript dev: false - /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): + /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} peerDependencies: react: 17.x @@ -9974,7 +9974,7 @@ packages: '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2) '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/spacings-stack': 19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/utils': 19.9.0(react@17.0.2) @@ -10619,7 +10619,7 @@ packages: - react-dom dev: false - /@commercetools-uikit/link@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): + /@commercetools-uikit/link@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-UpQa4hfyk2ae68f1hTnincKpbQJP/PtplmKvkDaKduI0hMxc0qtxog83YsFgk9Tu7sZHqgOtNFL4JzB/uMK67Q==} peerDependencies: react: 17.x @@ -10640,7 +10640,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom @@ -11331,7 +11331,7 @@ packages: - typescript dev: false - /@commercetools-uikit/secondary-button@18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): + /@commercetools-uikit/secondary-button@18.4.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-CiqnLfbrOpi3e9NT0wno14AdGO5n61rZza6UDwBYb/bZ7CLz9PA9a/5qKATwXgUWh1zpfK15ySbTsFhQUTZvhw==} peerDependencies: react: 17.x @@ -11351,7 +11351,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom @@ -11409,7 +11409,7 @@ packages: - react-dom dev: false - /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): + /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-2Ct3w7TnljAQlA1avv4d/rRidOUT6aqv5Hilrc5zK8Qh9LPZVCHhMpko1R8Clu6yadecxGITqNGdmcu1pTRFjw==} peerDependencies: react: 17.x @@ -11429,7 +11429,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom @@ -12074,7 +12074,7 @@ packages: - typescript dev: false - /@commercetools-uikit/tag@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): + /@commercetools-uikit/tag@19.9.0(@types/react@17.0.83)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} peerDependencies: react: 17.x @@ -12094,7 +12094,7 @@ packages: prop-types: 15.8.1 react: 17.0.2 react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) + react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' - react-dom From bbec0ab6a352f60827d2147e5340552e732b28ac Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 06:06:08 +0100 Subject: [PATCH 06/12] refactor: remove unnecessady hook --- .../src/components/channels/channels.tsx | 12 +++++++----- .../src/components/welcome/welcome.tsx | 5 ++--- .../starter-typescript/src/routes.tsx | 9 ++------- .../starter/src/components/channels/channels.jsx | 12 +++++++----- .../starter/src/components/welcome/welcome.jsx | 5 ++--- application-templates/starter/src/routes.jsx | 9 ++------- 6 files changed, 22 insertions(+), 30 deletions(-) diff --git a/application-templates/starter-typescript/src/components/channels/channels.tsx b/application-templates/starter-typescript/src/components/channels/channels.tsx index 7503dcfaeb..14b04e3c66 100644 --- a/application-templates/starter-typescript/src/components/channels/channels.tsx +++ b/application-templates/starter-typescript/src/components/channels/channels.tsx @@ -3,7 +3,7 @@ import { Link as RouterLink, Routes, useNavigate, - useParams, + useResolvedPath, } from 'react-router-dom'; import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants'; @@ -43,7 +43,9 @@ type TChannelsProps = { const Channels = (props: TChannelsProps) => { const intl = useIntl(); - const params = useParams(); + const resolvedPath = useResolvedPath(''); + const basePath = resolvedPath.pathname; + const navigate = useNavigate(); const { page, perPage } = usePaginationState(); const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' }); @@ -118,7 +120,7 @@ const Channels = (props: TChannelsProps) => { sortedBy={tableSorting.value.key} sortDirection={tableSorting.value.order} onSortChange={tableSorting.onChange} - onRowClick={(row) => navigate(`${params.url}/${row.id}`)} + onRowClick={(row) => navigate(`${basePath}/${row.id}`)} /> { totalItems={channelsPaginatedResult.total} /> - - navigate(`${params.url}`)} /> + + navigate(basePath)} /> diff --git a/application-templates/starter-typescript/src/components/welcome/welcome.tsx b/application-templates/starter-typescript/src/components/welcome/welcome.tsx index 1e8af9243d..7333c54475 100644 --- a/application-templates/starter-typescript/src/components/welcome/welcome.tsx +++ b/application-templates/starter-typescript/src/components/welcome/welcome.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { Link as RouterLink, useParams } from 'react-router-dom'; +import { Link as RouterLink } from 'react-router-dom'; import { useIntl } from 'react-intl'; import Constraints from '@commercetools-uikit/constraints'; import Grid from '@commercetools-uikit/grid'; @@ -65,7 +65,6 @@ const InfoCard = (props: TInfoCardProps) => ( InfoCard.displayName = 'InfoCard'; const Welcome = () => { - const params = useParams(); const intl = useIntl(); return ( @@ -105,7 +104,7 @@ const Welcome = () => { diff --git a/application-templates/starter-typescript/src/routes.tsx b/application-templates/starter-typescript/src/routes.tsx index b6819b87e0..6f39531b71 100644 --- a/application-templates/starter-typescript/src/routes.tsx +++ b/application-templates/starter-typescript/src/routes.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { Routes, Route, useParams } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Channels from './components/channels'; import Welcome from './components/welcome'; @@ -8,8 +8,6 @@ type ApplicationRoutesProps = { children?: ReactNode; }; const ApplicationRoutes = (_props: ApplicationRoutesProps) => { - const params = useParams(); - /** * When using routes, there is a good chance that you might want to * restrict the access to a certain route based on the user permissions. @@ -24,10 +22,7 @@ const ApplicationRoutes = (_props: ApplicationRoutesProps) => { return ( - } - /> + } /> } /> diff --git a/application-templates/starter/src/components/channels/channels.jsx b/application-templates/starter/src/components/channels/channels.jsx index f4edd082fe..6f083558b3 100644 --- a/application-templates/starter/src/components/channels/channels.jsx +++ b/application-templates/starter/src/components/channels/channels.jsx @@ -4,7 +4,7 @@ import { Link as RouterLink, Routes, useNavigate, - useParams, + useResolvedPath, } from 'react-router-dom'; import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants'; @@ -58,7 +58,9 @@ const itemRenderer = (item, column, dataLocale, projectLanguages) => { const Channels = (props) => { const intl = useIntl(); - const params = useParams(); + const resolvedPath = useResolvedPath(); + const basePath = resolvedPath.pathname; + const navigate = useNavigate(); const { page, perPage } = usePaginationState(); const tableSorting = useDataTableSortingState({ key: 'key', order: 'asc' }); @@ -112,7 +114,7 @@ const Channels = (props) => { sortedBy={tableSorting.value.key} sortDirection={tableSorting.value.order} onSortChange={tableSorting.onChange} - onRowClick={(row) => navigate(`${params.url}/${row.id}`)} + onRowClick={(row) => navigate(`${basePath}/${row.id}`)} /> { totalItems={channelsPaginatedResult.total} /> - - navigate(`${params.url}`)} /> + + navigate(`${basePath}`)} /> diff --git a/application-templates/starter/src/components/welcome/welcome.jsx b/application-templates/starter/src/components/welcome/welcome.jsx index e8ecfc6841..ca03193e12 100644 --- a/application-templates/starter/src/components/welcome/welcome.jsx +++ b/application-templates/starter/src/components/welcome/welcome.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import { useParams, Link as RouterLink } from 'react-router-dom'; +import { Link as RouterLink } from 'react-router-dom'; import { useIntl } from 'react-intl'; import Constraints from '@commercetools-uikit/constraints'; import Grid from '@commercetools-uikit/grid'; @@ -63,7 +63,6 @@ InfoCard.propTypes = { }; const Welcome = () => { - const params = useParams(); const intl = useIntl(); return ( @@ -103,7 +102,7 @@ const Welcome = () => { diff --git a/application-templates/starter/src/routes.jsx b/application-templates/starter/src/routes.jsx index f01145fe0c..bd2a209da8 100644 --- a/application-templates/starter/src/routes.jsx +++ b/application-templates/starter/src/routes.jsx @@ -1,11 +1,9 @@ -import { Routes, Route, useParams } from 'react-router-dom'; +import { Routes, Route } from 'react-router-dom'; import Spacings from '@commercetools-uikit/spacings'; import Channels from './components/channels'; import Welcome from './components/welcome'; const ApplicationRoutes = () => { - const params = useParams(); - /** * When using routes, there is a good chance that you might want to * restrict the access to a certain route based on the user permissions. @@ -20,10 +18,7 @@ const ApplicationRoutes = () => { return ( - } - /> + } /> } /> From 1f85a7a160fb4d271eb00ca9b36521cf4af4515f Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 06:38:26 +0100 Subject: [PATCH 07/12] refactor: migrate visual testing app --- visual-testing-app/package.json | 2 +- visual-testing-app/src/application.tsx | 47 ++++---- .../custom-form-modal-page.visualroute.tsx | 6 +- .../components/drawer/drawer.visualroute.tsx | 106 ++++++++++-------- .../form-modal-page.visualroute.tsx | 6 +- .../info-modal-page.visualroute.tsx | 6 +- .../tabular-detail-page.visualroute.tsx | 42 ++++--- .../tabular-main-page.visualroute.tsx | 42 ++++--- .../tabular-modal-page.visualroute.tsx | 68 ++++++----- .../src/test-utils/nested-pages.tsx | 38 +++---- 10 files changed, 207 insertions(+), 156 deletions(-) diff --git a/visual-testing-app/package.json b/visual-testing-app/package.json index ef646a9e11..c303152549 100644 --- a/visual-testing-app/package.json +++ b/visual-testing-app/package.json @@ -45,7 +45,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "uuid": "9.0.1", "vite": "~4.5.3" } diff --git a/visual-testing-app/src/application.tsx b/visual-testing-app/src/application.tsx index a341484533..8c805ba5a4 100644 --- a/visual-testing-app/src/application.tsx +++ b/visual-testing-app/src/application.tsx @@ -4,7 +4,7 @@ import './globals.css'; import { type ComponentType, Suspense } from 'react'; import { ApolloProvider } from '@apollo/client'; import { TestProviderFlopFlip } from '@flopflip/react-broadcast'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { featureFlags } from '@commercetools-frontend/constants'; import apolloClient from './apollo-client'; @@ -40,27 +40,34 @@ const App = () => ( - - -
-

Visual Testing App

-
    - {allSortedComponents.map(({ routePath }) => ( -
  • - {routePath} -
    • - ))} -
-
- + + +

Visual Testing App

+
    + {allSortedComponents.map(({ routePath }) => ( +
  • + {routePath} +
    • + ))} +
+ + } + /> {allSortedComponents.map(({ routePath, Component }) => ( - - - - - + + + + } + /> ))} - + diff --git a/visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualroute.tsx b/visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualroute.tsx index 9a1d447e5c..31aeb49f67 100644 --- a/visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualroute.tsx +++ b/visual-testing-app/src/components/custom-form-modal-page/custom-form-modal-page.visualroute.tsx @@ -1,5 +1,5 @@ import { Formik } from 'formik'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { CustomFormModalPage } from '@commercetools-frontend/application-components'; import IconButton from '@commercetools-uikit/icon-button'; import { @@ -19,7 +19,7 @@ type FormValues = { }; const ModalPageWithPortalParentSelector = (props: ContainerProps) => { - const history = useHistory(); + const navigate = useNavigate(); return ( initialValues={{ email: '' }} @@ -29,7 +29,7 @@ const ModalPageWithPortalParentSelector = (props: ContainerProps) => { history.push(routePath)} + onClose={() => navigate(routePath)} subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit." {...props} > diff --git a/visual-testing-app/src/components/drawer/drawer.visualroute.tsx b/visual-testing-app/src/components/drawer/drawer.visualroute.tsx index 5880c45bea..adc7891c84 100644 --- a/visual-testing-app/src/components/drawer/drawer.visualroute.tsx +++ b/visual-testing-app/src/components/drawer/drawer.visualroute.tsx @@ -1,4 +1,4 @@ -import { Route, Switch, useHistory } from 'react-router-dom'; +import { Route, Routes, useNavigate } from 'react-router-dom'; import { Drawer, InfoDialog, @@ -11,11 +11,11 @@ export const routePath = '/drawer'; type ContainerProps = Partial[0]>; function TestComponent(props: ContainerProps) { - const history = useHistory(); + const navigate = useNavigate(); return ( history.push(routePath)} + onClose={() => navigate(routePath)} title="Drawer title" subtitle="Drawer subtitle" {...props} @@ -28,48 +28,66 @@ function TestComponent(props: ContainerProps) { const Content = () => { const dialogState = useModalState(true); return ( - - - -

This is the drawer content

- - - - -

This is the drawer content

- - - - -

This is the drawer content

- - - - -

This is the drawer content

- - - - -

This is the drawer content

- - - - -

This is the drawer content

- + +

This is the drawer content

+ + } + /> + - This is the content from inside the info dialog - - - - +

This is the drawer content

+ + } + /> + +

This is the drawer content

+ + } + /> + +

This is the drawer content

+ + } + /> + +

This is the drawer content

+ + } + /> + +

This is the drawer content

+ + This is the content from inside the info dialog + + + } + /> + ); }; diff --git a/visual-testing-app/src/components/form-modal-page/form-modal-page.visualroute.tsx b/visual-testing-app/src/components/form-modal-page/form-modal-page.visualroute.tsx index 2b66caf753..4f13e4563c 100644 --- a/visual-testing-app/src/components/form-modal-page/form-modal-page.visualroute.tsx +++ b/visual-testing-app/src/components/form-modal-page/form-modal-page.visualroute.tsx @@ -1,5 +1,5 @@ import { Formik } from 'formik'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { FormModalPage } from '@commercetools-frontend/application-components'; import TextField from '@commercetools-uikit/text-field'; import { CUSTOM_VIEW_LOCATORS } from '../../constants'; @@ -13,7 +13,7 @@ type FormValues = { }; const ModalPageWithPortalParentSelector = (props: ContainerProps) => { - const history = useHistory(); + const navigate = useNavigate(); return ( initialValues={{ email: '' }} @@ -23,7 +23,7 @@ const ModalPageWithPortalParentSelector = (props: ContainerProps) => { history.push(routePath)} + onClose={() => navigate(routePath)} subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit." onSecondaryButtonClick={() => undefined} onPrimaryButtonClick={() => undefined} diff --git a/visual-testing-app/src/components/info-modal-page/info-modal-page.visualroute.tsx b/visual-testing-app/src/components/info-modal-page/info-modal-page.visualroute.tsx index f5464d4686..dad61fc1e1 100644 --- a/visual-testing-app/src/components/info-modal-page/info-modal-page.visualroute.tsx +++ b/visual-testing-app/src/components/info-modal-page/info-modal-page.visualroute.tsx @@ -1,4 +1,4 @@ -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { InfoModalPage } from '@commercetools-frontend/application-components'; import Text from '@commercetools-uikit/text'; import { CUSTOM_VIEW_LOCATORS } from '../../constants'; @@ -9,12 +9,12 @@ export const routePath = '/info-modal-page'; type ContainerProps = Partial[0]>; const ModalPageWithPortalParentSelector = (props: ContainerProps) => { - const history = useHistory(); + const navigate = useNavigate(); return ( history.push(routePath)} + onClose={() => navigate(routePath)} subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit." {...props} > diff --git a/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx b/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx index df0000521f..d380816af4 100644 --- a/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx +++ b/visual-testing-app/src/components/tabular-detail-page/tabular-detail-page.visualroute.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect } from 'react-router-dom'; +import { Routes, Route, Navigate } from 'react-router-dom'; import { TabularDetailPage, TabHeader, @@ -46,26 +46,34 @@ TabularDetailPageContainer.displayName = 'TabularDetailPageContainer'; const Content = () => ( - + } + element={} /> - - - {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} - - - {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} - - - - - {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} - - - + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} + + + {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} + + + } + /> + + {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} + + } + /> + ); export const Component = () => ( diff --git a/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx b/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx index d86e073460..2d0f11e430 100644 --- a/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx +++ b/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect } from 'react-router-dom'; +import { Routes, Route, Navigate } from 'react-router-dom'; import { TabularMainPage, TabHeader, @@ -45,26 +45,34 @@ TabularMainPageContainer.displayName = 'TabularMainPageContainer'; const Content = () => ( - + } + element={} /> - - - {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} - - - {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} - - - - - {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} - - - + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} + + + {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} + + + } + /> + + {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} + + } + /> + ); export const Component = () => ( diff --git a/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx b/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx index ce4a6351bb..dd20277c27 100644 --- a/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx +++ b/visual-testing-app/src/components/tabular-modal-page/tabular-modal-page.visualroute.tsx @@ -1,9 +1,9 @@ import { - useHistory, - useRouteMatch, - Switch, + useNavigate, + useResolvedPath, + Routes, Route, - Redirect, + Navigate, } from 'react-router-dom'; import { TabularModalPage, @@ -26,20 +26,21 @@ export const routePath = '/tabular-modal-page'; type ContainerProps = Partial[0]>; const ModalPageWithPortalParentSelector = (props: ContainerProps) => { - const history = useHistory(); - const match = useRouteMatch(); + const navigate = useNavigate(); + const resolvedPath = useResolvedPath(''); + const pathname = resolvedPath.pathname; return ( history.push(routePath)} + onClose={() => navigate(routePath)} tabControls={ <> - - + + @@ -55,29 +56,38 @@ ModalPageWithPortalParentSelector.displayName = 'ModalPageWithPortalParentSelector'; const Content = () => { - const match = useRouteMatch(); + const resolvedPath = useResolvedPath(''); + const pathname = resolvedPath.pathname; + return ( - + + } + /> + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} + + + {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} + + + } + /> } + path={`${pathname}/tab-two`} + element={ + + {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} + + } /> - - - {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.`} - - - {`Nam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`} - - - - - {`Integer dignissim in sapien vitae elementum. Vivamus vestibulum leo at tempus auctor. Nunc dictum tincidunt porta. Vestibulum ornare odio leo, vitae rutrum arcu rutrum sit amet. Suspendisse elementum lacus nisl, sit amet sollicitudin ex luctus semper. Mauris rutrum venenatis sodales. Proin dictum, lorem at tincidunt mattis, tortor felis sodales arcu, id congue orci purus in libero. In porta semper enim, sed ornare ante commodo eget. Donec facilisis nibh sed sollicitudin elementum. Donec hendrerit lobortis ante eget interdum. Fusce sodales dui nunc, sed rhoncus enim sodales eget. Vestibulum vestibulum metus molestie volutpat tincidunt.`} - - - + ); }; diff --git a/visual-testing-app/src/test-utils/nested-pages.tsx b/visual-testing-app/src/test-utils/nested-pages.tsx index 6319af3d55..2ca8b53e2d 100644 --- a/visual-testing-app/src/test-utils/nested-pages.tsx +++ b/visual-testing-app/src/test-utils/nested-pages.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from 'react'; -import { Route, Switch } from 'react-router-dom'; +import { Route, Routes } from 'react-router-dom'; type NestedPage = { path: string; @@ -13,26 +13,26 @@ type NestedPagesProps = { }; const NestedPages = (props: NestedPagesProps) => ( - + {props.pages.map(({ path, spec }) => ( - - {spec} - + ))} - -
-

{props.title}

- {'All components'} -
    - {props.pages.map(({ path, name }) => ( -
  • - {name || path} -
    • - ))} -
-
- - + +

{props.title}

+ {'All components'} +
    + {props.pages.map(({ path, name }) => ( +
  • + {name || path} +
    • + ))} +
+ + } + /> + ); export default NestedPages; From 358119a8c318b15a40da50695c70bcca0fb9f4ac Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 06:58:51 +0100 Subject: [PATCH 08/12] refactor: migrate website-components-playground --- pnpm-lock.yaml | 39 +++++---- website-components-playground/package.json | 3 +- .../src/application.tsx | 85 +++++++------------ .../src/pages/tabular-detail-page.tsx | 35 ++++---- .../src/pages/tabular-main-page.tsx | 34 ++++---- .../src/pages/tabular-modal-page.tsx | 36 ++++---- 6 files changed, 104 insertions(+), 128 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index faf41e9bbf..a140e22035 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3328,7 +3328,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/card': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/design-system': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) @@ -3343,7 +3343,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: 19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/spacings': specifier: 19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) @@ -3408,8 +3408,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) uuid: specifier: 9.0.1 version: 9.0.1 @@ -3445,13 +3445,13 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/multiline-text-field': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/secondary-button': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/select-field': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -3495,8 +3495,8 @@ importers: specifier: ^6.4.7 version: 6.4.7(react@17.0.2)(typescript@5.0.4) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) react-select: specifier: 5.8.0 version: 5.8.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) @@ -3513,9 +3513,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@vitejs/plugin-react': specifier: 4.3.1 version: 4.3.1(vite@4.5.5) @@ -10585,7 +10582,7 @@ packages: history: 4.10.1 prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) react-router-dom: 5.3.4(react@17.0.2) transitivePeerDependencies: - '@types/react' @@ -10612,7 +10609,7 @@ packages: history: 4.10.1 prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' @@ -10968,7 +10965,7 @@ packages: '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) transitivePeerDependencies: - '@types/react' - react-dom @@ -12232,7 +12229,7 @@ packages: lodash: 4.17.21 prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) + react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) warning: 4.0.3 transitivePeerDependencies: - '@types/react' @@ -17071,12 +17068,14 @@ packages: '@types/history': 4.7.11 '@types/react': 17.0.83 '@types/react-router': 5.1.20 + dev: false /@types/react-router@5.1.20: resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} dependencies: '@types/history': 4.7.11 '@types/react': 17.0.83 + dev: false /@types/react-transition-group@4.4.5: resolution: {integrity: sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==} @@ -27683,8 +27682,8 @@ packages: /path-to-regexp@0.1.10: resolution: {integrity: sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==} - /path-to-regexp@1.8.0: - resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==} + /path-to-regexp@1.9.0: + resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==} dependencies: isarray: 0.0.1 @@ -28804,13 +28803,13 @@ packages: peerDependencies: react: '>=15' dependencies: - '@babel/runtime': 7.22.15 + '@babel/runtime': 7.24.5 history: 4.10.1 loose-envify: 1.4.0 prop-types: 15.8.1 react: 17.0.2 react-router: 5.3.4(react@17.0.2) - tiny-invariant: 1.3.1 + tiny-invariant: 1.3.3 tiny-warning: 1.0.3 /react-router-dom@6.21.0(react-dom@17.0.2)(react@17.0.2): @@ -28834,7 +28833,7 @@ packages: history: 4.10.1 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 - path-to-regexp: 1.8.0 + path-to-regexp: 1.9.0 prop-types: 15.8.1 react: 17.0.2 react-is: 16.13.1 diff --git a/website-components-playground/package.json b/website-components-playground/package.json index 5474fc9147..a9a5563d0a 100644 --- a/website-components-playground/package.json +++ b/website-components-playground/package.json @@ -33,7 +33,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-intl": "^6.4.7", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "react-select": "5.8.0" }, "devDependencies": { @@ -41,7 +41,6 @@ "@types/history": "^4.7.11", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router-dom": "^5.3.3", "@vitejs/plugin-react": "4.3.1", "vite": "~4.5.3" } diff --git a/website-components-playground/src/application.tsx b/website-components-playground/src/application.tsx index 0822b148cd..2e35a71ca3 100644 --- a/website-components-playground/src/application.tsx +++ b/website-components-playground/src/application.tsx @@ -1,7 +1,11 @@ import './globals.css'; import { lazy } from 'react'; import { createBrowserHistory } from 'history'; -import { Router, Switch, Route } from 'react-router-dom'; +import { + Routes, + Route, + unstable_HistoryRouter as HistoryRouter, +} from 'react-router-dom'; import { createEnhancedHistory } from '@commercetools-frontend/browser-history'; import IndexPage from './pages'; @@ -34,61 +38,30 @@ const TabularModalPage = lazy(() => import('./pages/tabular-modal-page')); const history = createEnhancedHistory(createBrowserHistory()); const Application = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } + /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + ); export default Application; diff --git a/website-components-playground/src/pages/tabular-detail-page.tsx b/website-components-playground/src/pages/tabular-detail-page.tsx index a8b03b5783..74a65a92fe 100644 --- a/website-components-playground/src/pages/tabular-detail-page.tsx +++ b/website-components-playground/src/pages/tabular-detail-page.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom'; +import { Routes, Route, Navigate, useResolvedPath } from 'react-router-dom'; import { TabularDetailPage, TabHeader, @@ -57,7 +57,8 @@ const getCustomTitleRow = (useCustomTitleRow: string) => { }; const TabularDetailPageExample = () => { - const match = useRouteMatch(); + const { pathname } = useResolvedPath(''); + return ( { tabControls={ <> @@ -149,19 +150,21 @@ const TabularDetailPageExample = () => { hideControls={Boolean(values.hideControls)} onPreviousPathClick={() => window.alert('Back button clicked')} > - - - {values['tab-one-content']} - - - {values['tab-two-content']} - + + {values['tab-one-content']}} + /> + {values['tab-two-content']}} + /> ( - - )} + element={ + + } /> - + )} diff --git a/website-components-playground/src/pages/tabular-main-page.tsx b/website-components-playground/src/pages/tabular-main-page.tsx index 6e54cee4ef..a3735ccf2d 100644 --- a/website-components-playground/src/pages/tabular-main-page.tsx +++ b/website-components-playground/src/pages/tabular-main-page.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom'; +import { Routes, Route, useResolvedPath, Navigate } from 'react-router-dom'; import { TabularMainPage, TabHeader, @@ -57,7 +57,7 @@ const getCustomTitleRow = (useCustomTitleRow: string) => { }; const TabularMainPageExample = () => { - const match = useRouteMatch(); + const { pathname } = useResolvedPath(''); return ( { tabControls={ <> @@ -148,19 +148,21 @@ const TabularMainPageExample = () => { } hideControls={Boolean(values.hideControls)} > - - - {values['tab-one-content']} - - - {values['tab-two-content']} - + ( - - )} + path={`${pathname}/tabular-main-page/tab-one`} + element={{values['tab-one-content']}} + > + {values['tab-two-content']}} + > + + } /> - + )} diff --git a/website-components-playground/src/pages/tabular-modal-page.tsx b/website-components-playground/src/pages/tabular-modal-page.tsx index a8a5b94a2a..86cbdc49fb 100644 --- a/website-components-playground/src/pages/tabular-modal-page.tsx +++ b/website-components-playground/src/pages/tabular-modal-page.tsx @@ -1,4 +1,4 @@ -import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom'; +import { Routes, Route, Navigate, useResolvedPath } from 'react-router-dom'; import { TabularModalPage, TabHeader, @@ -33,7 +33,7 @@ const exampleCustomTitleRow = ( ); const TabularModalPageExample = () => { - const match = useRouteMatch(); + const { pathname } = useResolvedPath(''); return ( { tabControls={ <> @@ -128,21 +128,21 @@ const TabularModalPageExample = () => { } hideControls={Boolean(values.hideControls)} > - - - {values['tab-one-content']} - - - {values['tab-two-content']} - + ( - - )} + path={`${pathname}/tabular-modal-page/tab-one`} + element={{values['tab-one-content']}} /> - + {values['tab-two-content']}} + /> + + } + /> + )} From fd6cacb7c18be021e2105382cb65c6d10c7981d9 Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 07:07:49 +0100 Subject: [PATCH 09/12] refactor: remove left over @types/react-router-dom and @types/react-router --- .../starter-typescript/package.json | 2 - .../starter-typescript/package.json | 6 +- custom-views-templates/starter/package.json | 6 +- package.json | 1 - packages/application-components/package.json | 2 +- packages/application-shell/package.json | 2 +- packages/react-notifications/package.json | 6 +- pnpm-lock.yaml | 431 +----------------- visual-testing-app/package.json | 1 - 9 files changed, 25 insertions(+), 432 deletions(-) diff --git a/application-templates/starter-typescript/package.json b/application-templates/starter-typescript/package.json index 4746a06c3f..872c7ec0b8 100644 --- a/application-templates/starter-typescript/package.json +++ b/application-templates/starter-typescript/package.json @@ -69,8 +69,6 @@ "@types/jest": "^29.5.4", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "@types/testing-library__jest-dom": "^5.14.9", "eslint": "8.57.0", "eslint-formatter-pretty": "4.1.0", diff --git a/custom-views-templates/starter-typescript/package.json b/custom-views-templates/starter-typescript/package.json index 13d88ba116..6650c27847 100644 --- a/custom-views-templates/starter-typescript/package.json +++ b/custom-views-templates/starter-typescript/package.json @@ -69,8 +69,6 @@ "@types/jest": "^29.5.4", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "@types/testing-library__jest-dom": "^5.14.9", "eslint": "8.57.0", "eslint-formatter-pretty": "4.1.0", @@ -89,7 +87,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "redux": "4.2.1", "typescript": "5.0.4" }, @@ -99,8 +97,6 @@ "@types/eslint": "<9", "@types/react": "<18", "@types/react-dom": "<18", - "@types/react-router": "<6", - "@types/react-router-dom": "<6", "headers-polyfill": "3.2.5", "nwsapi": "2.2.7" } diff --git a/custom-views-templates/starter/package.json b/custom-views-templates/starter/package.json index 757f08e3b0..5c3e99238d 100644 --- a/custom-views-templates/starter/package.json +++ b/custom-views-templates/starter/package.json @@ -67,8 +67,6 @@ "@types/jest": "^29.5.4", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "@types/testing-library__jest-dom": "^5.14.9", "eslint": "8.57.0", "eslint-formatter-pretty": "4.1.0", @@ -88,7 +86,7 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4", + "react-router-dom": "6", "redux": "4.2.1" }, "resolutions": { @@ -97,8 +95,6 @@ "@types/eslint": "<9", "@types/react": "<18", "@types/react-dom": "<18", - "@types/react-router": "<6", - "@types/react-router-dom": "<6", "headers-polyfill": "3.2.5", "nwsapi": "2.2.7" } diff --git a/package.json b/package.json index 3c42d7fe73..47e8b33ce5 100644 --- a/package.json +++ b/package.json @@ -176,7 +176,6 @@ "@types/eslint": "^8.2.2", "@types/react": "^17.0.56", "@types/react-dom": "17.0.25", - "@types/react-router": "5.1.20", "@typescript-eslint/eslint-plugin": "^5.52.0", "@typescript-eslint/parser": "^5.52.0" }, diff --git a/packages/application-components/package.json b/packages/application-components/package.json index 6f03f3fb68..a367aac9a4 100644 --- a/packages/application-components/package.json +++ b/packages/application-components/package.json @@ -90,6 +90,6 @@ "react": "17.x", "react-dom": "17.x", "react-intl": "6.x", - "react-router-dom": "6.x" + "react-router-dom": "6" } } diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json index 85dd22333d..c9b98a79c7 100644 --- a/packages/application-shell/package.json +++ b/packages/application-shell/package.json @@ -126,7 +126,7 @@ "react-dom": "17.x", "react-intl": "6.x", "react-redux": "7.x", - "react-router-dom": "6.x", + "react-router-dom": "6", "redux": "4.x" }, "engines": { diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json index 8ee0f0dec2..ea3cdca664 100644 --- a/packages/react-notifications/package.json +++ b/packages/react-notifications/package.json @@ -40,8 +40,6 @@ "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", "@types/react-redux": "^7.1.26", - "@types/react-router": "^5.1.20", - "@types/react-router-dom": "^5.3.3", "lodash": "4.17.21", "moment": "^2.29.4", "moment-timezone": "^0.5.40", @@ -57,13 +55,13 @@ "react-dom": "17.0.2", "react-intl": "^6.4.7", "react-redux": "7.2.9", - "react-router-dom": "5.3.4" + "react-router-dom": "6" }, "peerDependencies": { "react": "17.x", "react-dom": "17.x", "react-intl": "6.x", "react-redux": "7.x", - "react-router-dom": "5.x" + "react-router-dom": "6" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a140e22035..b2e6d5a7fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,7 +8,6 @@ overrides: '@types/eslint': ^8.2.2 '@types/react': ^17.0.56 '@types/react-dom': 17.0.25 - '@types/react-router': 5.1.20 '@typescript-eslint/eslint-plugin': ^5.52.0 '@typescript-eslint/parser': ^5.52.0 @@ -660,12 +659,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router': - specifier: 5.1.20 - version: 5.1.20 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@types/testing-library__jest-dom': specifier: ^5.14.9 version: 5.14.9 @@ -797,7 +790,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/data-table': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.6.3) '@commercetools-uikit/flat-button': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) @@ -812,7 +805,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/loading-spinner': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) @@ -879,12 +872,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router': - specifier: 5.1.20 - version: 5.1.20 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@types/testing-library__jest-dom': specifier: ^5.14.9 version: 5.14.9 @@ -943,8 +930,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) redux: specifier: 4.2.1 version: 4.2.1 @@ -1019,7 +1006,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/data-table': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4) '@commercetools-uikit/flat-button': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -1034,7 +1021,7 @@ importers: version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) '@commercetools-uikit/link': specifier: ^19.9.0 - version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) + version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2) '@commercetools-uikit/loading-spinner': specifier: ^19.9.0 version: 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) @@ -1101,12 +1088,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router': - specifier: 5.1.20 - version: 5.1.20 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@types/testing-library__jest-dom': specifier: ^5.14.9 version: 5.14.9 @@ -1162,8 +1143,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) redux: specifier: 4.2.1 version: 4.2.1 @@ -2910,12 +2891,6 @@ importers: '@types/react-redux': specifier: ^7.1.26 version: 7.1.26 - '@types/react-router': - specifier: 5.1.20 - version: 5.1.20 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 lodash: specifier: 4.17.21 version: 4.17.21 @@ -2957,8 +2932,8 @@ importers: specifier: 7.2.9 version: 7.2.9(react-dom@17.0.2)(react@17.0.2) react-router-dom: - specifier: 5.3.4 - version: 5.3.4(react@17.0.2) + specifier: '6' + version: 6.21.0(react-dom@17.0.2)(react@17.0.2) packages/sdk: dependencies: @@ -3374,9 +3349,6 @@ importers: '@types/react-dom': specifier: 17.0.25 version: 17.0.25 - '@types/react-router-dom': - specifier: ^5.3.3 - version: 5.3.3 '@types/uuid': specifier: ^9.0.3 version: 9.0.3 @@ -9213,28 +9185,6 @@ packages: - react-dom dev: false - /@commercetools-uikit/card@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2): - resolution: {integrity: sha512-3kIpnFAKa7007Tk3Y+GtHBwKtZkT/Wp5cZSz0SvHdnytuzLbmRz5daZ4Sjb68kF0Mg1JsJAIDW4k5++fbTjJ6w==} - peerDependencies: - react: 17.x - react-router-dom: 5.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/spacings-inset': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - '@types/react-router-dom': 5.3.3 - prop-types: 15.8.1 - react: 17.0.2 - react-router-dom: 5.3.4(react@17.0.2) - transitivePeerDependencies: - - '@types/react' - - react-dom - dev: false - /@commercetools-uikit/card@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-3kIpnFAKa7007Tk3Y+GtHBwKtZkT/Wp5cZSz0SvHdnytuzLbmRz5daZ4Sjb68kF0Mg1JsJAIDW4k5++fbTjJ6w==} peerDependencies: @@ -9394,100 +9344,6 @@ packages: - react-dom dev: false - /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): - resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} - peerDependencies: - react: 17.x - react-dom: 17.x - react-intl: 6.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/accessible-hidden': 19.9.0(@types/react@17.0.80)(react@17.0.2) - '@commercetools-uikit/async-select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/card': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/collapsible-motion': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/field-label': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/grid': 19.9.0(@types/react@17.0.80)(react@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/primary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/radio-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/tooltip': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - debounce-promise: 3.1.2 - lodash: 4.17.21 - prop-types: 15.8.1 - react: 17.0.2 - react-beautiful-dnd: 13.1.1(react-dom@17.0.2)(react@17.0.2) - react-dom: 17.0.2(react@17.0.2) - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - transitivePeerDependencies: - - '@types/react' - - react-native - - react-router-dom - - typescript - dev: false - - /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3): - resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} - peerDependencies: - react: 17.x - react-dom: 17.x - react-intl: 6.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/accessible-hidden': 19.9.0(@types/react@17.0.80)(react@17.0.2) - '@commercetools-uikit/async-select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/card': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/collapsible-motion': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/dropdown-menu': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/field-label': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/grid': 19.9.0(@types/react@17.0.80)(react@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/primary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/radio-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/select-input': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/tag': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/tooltip': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - debounce-promise: 3.1.2 - lodash: 4.17.21 - prop-types: 15.8.1 - react: 17.0.2 - react-beautiful-dnd: 13.1.1(react-dom@17.0.2)(react@17.0.2) - react-dom: 17.0.2(react@17.0.2) - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) - transitivePeerDependencies: - - '@types/react' - - react-native - - react-router-dom - - typescript - dev: false - /@commercetools-uikit/data-table-manager@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-lnhnBnCbqLBX/h8q/xCh87WDzaxz/sD1AF5VA0aqfyg1vR3KohpYcCJI/8KcoZBqOiw83nfahQML5vnVPvOftg==} peerDependencies: @@ -9629,62 +9485,6 @@ packages: - typescript dev: false - /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): - resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} - peerDependencies: - react: 17.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.0.4) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - lodash: 4.17.21 - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - transitivePeerDependencies: - - '@types/react' - - react-dom - - react-native - - react-router-dom - - typescript - dev: false - - /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3): - resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} - peerDependencies: - react: 17.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/data-table-manager': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/secondary-icon-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2)(typescript@5.6.3) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - lodash: 4.17.21 - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) - transitivePeerDependencies: - - '@types/react' - - react-dom - - react-native - - react-router-dom - - typescript - dev: false - /@commercetools-uikit/data-table@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-EVb1KMtnzIcYaeLF+bS185T5dzDzizLwEiOy07bXqfbENX1Qmi/aMsM4ij3f87dJz6ZcKMubORpXq8pwLqisUA==} peerDependencies: @@ -9852,60 +9652,6 @@ packages: - react-dom dev: false - /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): - resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} - peerDependencies: - react: 17.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/spacings-stack': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - transitivePeerDependencies: - - '@types/react' - - react-dom - - react-router-dom - - typescript - dev: false - - /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3): - resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} - peerDependencies: - react: 17.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/hooks': 19.9.0(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/secondary-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2) - '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/spacings-stack': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) - transitivePeerDependencies: - - '@types/react' - - react-dom - - react-router-dom - - typescript - dev: false - /@commercetools-uikit/dropdown-menu@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-WSEaNl05iFqBG8TMSaFHFgh3WsSmYLZVcp2QAZnhoBINOD3aQaPR0kru2m2+o/UxnmKV+IglVdPRqaWlGC7CSg==} peerDependencies: @@ -10562,33 +10308,6 @@ packages: - react-dom dev: false - /@commercetools-uikit/link@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): - resolution: {integrity: sha512-UpQa4hfyk2ae68f1hTnincKpbQJP/PtplmKvkDaKduI0hMxc0qtxog83YsFgk9Tu7sZHqgOtNFL4JzB/uMK67Q==} - peerDependencies: - react: 17.x - react-intl: 6.x - react-router-dom: 5.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - '@types/history': 4.7.11 - '@types/react-router-dom': 5.3.3 - history: 4.10.1 - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) - transitivePeerDependencies: - - '@types/react' - - react-dom - dev: false - /@commercetools-uikit/link@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-UpQa4hfyk2ae68f1hTnincKpbQJP/PtplmKvkDaKduI0hMxc0qtxog83YsFgk9Tu7sZHqgOtNFL4JzB/uMK67Q==} peerDependencies: @@ -10609,7 +10328,7 @@ packages: history: 4.10.1 prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) react-router-dom: 6.21.0(react-dom@17.0.2)(react@17.0.2) transitivePeerDependencies: - '@types/react' @@ -10965,7 +10684,7 @@ packages: '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) transitivePeerDependencies: - '@types/react' - react-dom @@ -11354,32 +11073,6 @@ packages: - react-dom dev: false - /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@5.3.4)(react@17.0.2): - resolution: {integrity: sha512-2Ct3w7TnljAQlA1avv4d/rRidOUT6aqv5Hilrc5zK8Qh9LPZVCHhMpko1R8Clu6yadecxGITqNGdmcu1pTRFjw==} - peerDependencies: - react: 17.x - react-intl: 6.x - react-router-dom: 5.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/spacings-inline': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - lodash: 4.17.21 - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) - transitivePeerDependencies: - - '@types/react' - - react-dom - dev: false - /@commercetools-uikit/secondary-button@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react-router-dom@6.21.0)(react@17.0.2): resolution: {integrity: sha512-2Ct3w7TnljAQlA1avv4d/rRidOUT6aqv5Hilrc5zK8Qh9LPZVCHhMpko1R8Clu6yadecxGITqNGdmcu1pTRFjw==} peerDependencies: @@ -11963,60 +11656,6 @@ packages: - react-intl dev: false - /@commercetools-uikit/tag@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.0.4): - resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} - peerDependencies: - react: 17.x - react-router-dom: 5.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) - react-router-dom: 5.3.4(react@17.0.2) - transitivePeerDependencies: - - '@types/react' - - react-dom - - typescript - dev: false - - /@commercetools-uikit/tag@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@5.3.4)(react@17.0.2)(typescript@5.6.3): - resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} - peerDependencies: - react: 17.x - react-router-dom: 5.x - dependencies: - '@babel/runtime': 7.24.5 - '@babel/runtime-corejs3': 7.22.15 - '@commercetools-uikit/accessible-button': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/constraints': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/design-system': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2) - '@commercetools-uikit/icons': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/spacings': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react@17.0.2) - '@commercetools-uikit/text': 19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-intl@6.4.7)(react@17.0.2) - '@commercetools-uikit/utils': 19.9.0(react@17.0.2) - '@emotion/react': 11.11.4(@types/react@17.0.80)(react@17.0.2) - '@emotion/styled': 11.11.0(@emotion/react@11.11.4)(@types/react@17.0.80)(react@17.0.2) - prop-types: 15.8.1 - react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) - react-router-dom: 5.3.4(react@17.0.2) - transitivePeerDependencies: - - '@types/react' - - react-dom - - typescript - dev: false - /@commercetools-uikit/tag@19.9.0(@types/react@17.0.80)(react-dom@17.0.2)(react-router-dom@6.21.0)(react@17.0.2)(typescript@5.0.4): resolution: {integrity: sha512-hSDoeEx3x0dTxC2nDxvaROKYRqyWbyeAwPYz0hRrkcdHlByD8AJlLsqzUvXvUx9qMs63xewuf/cG76a/TGwZZg==} peerDependencies: @@ -12229,7 +11868,7 @@ packages: lodash: 4.17.21 prop-types: 15.8.1 react: 17.0.2 - react-intl: 6.4.7(react@17.0.2)(typescript@5.0.4) + react-intl: 6.4.7(react@17.0.2)(typescript@5.6.3) warning: 4.0.3 transitivePeerDependencies: - '@types/react' @@ -23487,6 +23126,7 @@ packages: tiny-invariant: 1.3.1 tiny-warning: 1.0.3 value-equal: 1.0.1 + dev: false /hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} @@ -24344,9 +23984,6 @@ packages: resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==} dev: false - /isarray@0.0.1: - resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==} - /isarray@1.0.0: resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} dev: false @@ -27682,11 +27319,6 @@ packages: /path-to-regexp@0.1.10: resolution: {integrity: sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==} - /path-to-regexp@1.9.0: - resolution: {integrity: sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==} - dependencies: - isarray: 0.0.1 - /path-to-regexp@2.2.1: resolution: {integrity: sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==} dev: false @@ -28798,20 +28430,6 @@ packages: resolution: {integrity: sha512-MdbG9mGJVA12lV+jvsU/U6D50NrGfkL6Yvy132dLCUioOvDqemtbYAMTn2gIxS6cTVqqC50mL/37t0UosJkgiQ==} dev: false - /react-router-dom@5.3.4(react@17.0.2): - resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==} - peerDependencies: - react: '>=15' - dependencies: - '@babel/runtime': 7.24.5 - history: 4.10.1 - loose-envify: 1.4.0 - prop-types: 15.8.1 - react: 17.0.2 - react-router: 5.3.4(react@17.0.2) - tiny-invariant: 1.3.3 - tiny-warning: 1.0.3 - /react-router-dom@6.21.0(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-1dUdVj3cwc1npzJaf23gulB562ESNvxf7E4x8upNJycqyUm5BRRZ6dd3LrlzhtLaMrwOCO8R0zoiYxdaJx4LlQ==} engines: {node: '>=14.0.0'} @@ -28824,22 +28442,6 @@ packages: react-dom: 17.0.2(react@17.0.2) react-router: 6.21.0(react@17.0.2) - /react-router@5.3.4(react@17.0.2): - resolution: {integrity: sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==} - peerDependencies: - react: '>=15' - dependencies: - '@babel/runtime': 7.24.5 - history: 4.10.1 - hoist-non-react-statics: 3.3.2 - loose-envify: 1.4.0 - path-to-regexp: 1.9.0 - prop-types: 15.8.1 - react: 17.0.2 - react-is: 16.13.1 - tiny-invariant: 1.3.3 - tiny-warning: 1.0.3 - /react-router@6.21.0(react@17.0.2): resolution: {integrity: sha512-hGZ0HXbwz3zw52pLZV3j3+ec+m/PQ9cTpBvqjFQmy2XVUWGn5MD+31oXHb6dVTxYzmAeaiUBYjkoNz66n3RGCg==} engines: {node: '>=14.0.0'} @@ -29306,6 +28908,7 @@ packages: /resolve-pathname@3.0.0: resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==} + dev: false /resolve-pkg-maps@1.0.0: resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} @@ -30859,12 +30462,15 @@ packages: /tiny-invariant@1.3.1: resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} + dev: false /tiny-invariant@1.3.3: resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + dev: false /tiny-warning@1.0.3: resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==} + dev: false /title-case@3.0.3: resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==} @@ -31893,6 +31499,7 @@ packages: /value-equal@1.0.1: resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==} + dev: false /value-or-promise@1.0.12: resolution: {integrity: sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==} diff --git a/visual-testing-app/package.json b/visual-testing-app/package.json index c303152549..db49fe39a4 100644 --- a/visual-testing-app/package.json +++ b/visual-testing-app/package.json @@ -34,7 +34,6 @@ "@rollup/plugin-graphql": "2.0.4", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.19", - "@types/react-router-dom": "^5.3.3", "@types/uuid": "^9.0.3", "@vitejs/plugin-react": "4.3.1", "formik": "2.4.6", From a09b3b2cdde111dfe035855936441c6a7310615d Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 11:01:49 +0100 Subject: [PATCH 10/12] refactor: remove unnecessary exact prop --- packages/application-shell/src/components/navbar/menu-items.tsx | 1 - .../tabular-detail-page/tabular-detail-page.visualroute.tsx | 1 - .../tabular-main-page/tabular-main-page.visualroute.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/packages/application-shell/src/components/navbar/menu-items.tsx b/packages/application-shell/src/components/navbar/menu-items.tsx index 63ab4ea895..a906c94396 100644 --- a/packages/application-shell/src/components/navbar/menu-items.tsx +++ b/packages/application-shell/src/components/navbar/menu-items.tsx @@ -309,7 +309,6 @@ const MenuItemLink = (props: MenuItemLinkProps) => { ( } /> diff --git a/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx b/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx index 2d0f11e430..d382c04ae9 100644 --- a/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx +++ b/visual-testing-app/src/components/tabular-main-page/tabular-main-page.visualroute.tsx @@ -47,7 +47,6 @@ const Content = () => ( } /> From 9e739ed3833958a1f8937ac15bc52da3e4ad0cbb Mon Sep 17 00:00:00 2001 From: Isaiah Yemitan Date: Thu, 28 Nov 2024 11:55:41 +0100 Subject: [PATCH 11/12] refactor: replace useNavigate with useHstory left over --- .../components/authenticated/oidc-callback-error-page.tsx | 6 +++--- .../src/components/navbar/menu-items.tsx | 8 ++++++-- .../src/components/quick-access/quick-access.tsx | 8 ++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx b/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx index 04fcd73091..f66249ac9d 100644 --- a/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx +++ b/packages/application-shell/src/components/authenticated/oidc-callback-error-page.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { PublicPageLayout, themesOverrides, @@ -39,7 +39,7 @@ const Divider = styled.div` `; const AuthCallbackErrorPage = (props: TProps) => { - const history = useHistory(); + const navigate = useNavigate(); return ( { label="Try log in again" icon={} onClick={() => { - history.push('/'); + navigate('/'); }} /> diff --git a/packages/application-shell/src/components/navbar/menu-items.tsx b/packages/application-shell/src/components/navbar/menu-items.tsx index a906c94396..c0a318bcd1 100644 --- a/packages/application-shell/src/components/navbar/menu-items.tsx +++ b/packages/application-shell/src/components/navbar/menu-items.tsx @@ -309,8 +309,12 @@ const MenuItemLink = (props: MenuItemLinkProps) => { + classnames( + { highlighted: isActive }, + `data-link-level-${linkLevel}` + ) + } css={getMenuItemLinkStyles(Boolean(props.isSubmenuLink))} tabIndex={props.isSubmenuLink && !props.isSubmenuFocused ? -1 : 0} onClick={(event) => { diff --git a/packages/application-shell/src/components/quick-access/quick-access.tsx b/packages/application-shell/src/components/quick-access/quick-access.tsx index e4971a153a..f9bff790b7 100644 --- a/packages/application-shell/src/components/quick-access/quick-access.tsx +++ b/packages/application-shell/src/components/quick-access/quick-access.tsx @@ -4,7 +4,7 @@ import { useFeatureToggles } from '@flopflip/react-broadcast'; import { oneLineTrim } from 'common-tags'; import debounce from 'debounce-async'; import { useIntl } from 'react-intl'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors'; import { GRAPHQL_TARGETS, @@ -104,7 +104,7 @@ const QuickAccess = (props: Props) => { saveHistoryEntries(entries); setHistoryEntries(entries); }, []); - const history = useHistory(); + const navigate = useNavigate(); const apolloClient = useApolloClient(); const intl = useIntl(); const [ @@ -502,10 +502,10 @@ const QuickAccess = (props: Props) => { } else if (applicationContext.environment.useFullRedirectsForLinks) { location.replace(command.action.to); } else { - history.push(command.action.to); + navigate(command.action.to); } }, - [applicationContext.environment.useFullRedirectsForLinks, history] + [applicationContext.environment.useFullRedirectsForLinks, navigate] ); return ( From 94250262242aa0673c2c397f53e999bc50f70b4f Mon Sep 17 00:00:00 2001 From: Carlos Cortizas Date: Tue, 3 Dec 2024 13:30:12 +0100 Subject: [PATCH 12/12] refactor: progress on router migration --- .../src/components/welcome/welcome.spec.js | 12 ++++ .../tabular-detail-page.spec.tsx | 20 ++++--- .../components/tab-header/tab-header.spec.tsx | 9 ++- .../src/test-utils/test-utils.tsx | 7 --- .../authenticated/authenticated.tsx | 38 ++++++++----- .../service-page-project-switcher.spec.js | 57 ++++++++----------- .../suspended-route/suspended-route.tsx | 12 +--- .../src/test-utils/test-utils.tsx | 49 ++++------------ 8 files changed, 87 insertions(+), 117 deletions(-) diff --git a/application-templates/starter/src/components/welcome/welcome.spec.js b/application-templates/starter/src/components/welcome/welcome.spec.js index 4a8016be69..bca3062fcf 100644 --- a/application-templates/starter/src/components/welcome/welcome.spec.js +++ b/application-templates/starter/src/components/welcome/welcome.spec.js @@ -24,3 +24,15 @@ it('should render welcome page', async () => { renderApp(); await screen.findByText('Develop applications for the Merchant Center'); }); + +/* + Overall architecture + + Relationship between application permissions and OAuth scopes + + What's inside the mcAccessToken? + + What are data fences? + + What are implied permissions? +*/ diff --git a/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx b/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx index 7bd8405d0c..fc42d5ced1 100644 --- a/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx +++ b/packages/application-components/src/components/detail-pages/tabular-detail-page/tabular-detail-page.spec.tsx @@ -36,6 +36,10 @@ const Content = () => ( } /> + Start route content} + /> ); @@ -101,19 +105,17 @@ describe('rendering', () => { }); describe('navigation', () => { it('should navigate to the other tab when clicked and show content that it leads to', async () => { - const { history } = renderTabularDetailPage({ title: 'Test page' }); + renderTabularDetailPage({ title: 'Test page' }); fireEvent.click(screen.getByRole('tab', { name: /tab two/i })); - await waitFor(() => { - expect(history.location.pathname).toBe('/tab-two'); - screen.getByText(/nam id orci ut risus accumsan pellentesque/i); - }); + + await screen.findByText(/nam id orci ut risus accumsan pellentesque/i); }); it('should navigate to link on back button click', async () => { - const { history } = renderComponent(); + renderComponent(); + fireEvent.click(screen.getByRole('button', { name: /go back/i })); - await waitFor(() => { - expect(history.location.pathname).toBe('/start'); - }); + + await screen.findByText(/start route content/i); }); }); diff --git a/packages/application-components/src/components/tab-header/tab-header.spec.tsx b/packages/application-components/src/components/tab-header/tab-header.spec.tsx index bb3b5e659b..feefab716a 100644 --- a/packages/application-components/src/components/tab-header/tab-header.spec.tsx +++ b/packages/application-components/src/components/tab-header/tab-header.spec.tsx @@ -1,5 +1,5 @@ import { warning } from '@commercetools-uikit/utils'; -import { screen, renderComponent, fireEvent, waitFor } from '../../test-utils'; +import { screen, renderComponent, fireEvent } from '../../test-utils'; import TabHeader from './tab-header'; jest.mock('@commercetools-uikit/utils', () => ({ @@ -36,12 +36,11 @@ describe('rendering', () => { }); describe('navigation', () => { it('should navigate to link when clicked', async () => { - const { history } = renderTabHeader(); + renderTabHeader(); + await screen.findByRole('tab', { name: /tab one/i, selected: false }); fireEvent.click(screen.getByRole('tab', { name: /tab one/i })); - await waitFor(() => { - expect(history.location.pathname).toBe('/tab-one'); - }); + await screen.findByRole('tab', { name: /tab one/i, selected: true }); }); }); describe('warnings', () => { diff --git a/packages/application-components/src/test-utils/test-utils.tsx b/packages/application-components/src/test-utils/test-utils.tsx index dba43670ff..de3dec39e9 100644 --- a/packages/application-components/src/test-utils/test-utils.tsx +++ b/packages/application-components/src/test-utils/test-utils.tsx @@ -4,7 +4,6 @@ import { ApolloProvider } from '@apollo/client/react'; import { TestProviderFlopFlip } from '@flopflip/react-broadcast'; import type { RenderOptions } from '@testing-library/react'; import { render } from '@testing-library/react'; -import { createMemoryHistory, type MemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { MemoryRouter } from 'react-router-dom'; import { @@ -20,7 +19,6 @@ type CustomRenderOptions = { locale: string; apolloClient?: ApolloClient; route: string; - history: MemoryHistory; environment?: TApplicationContext<{}>['environment']; projectKey?: string; user?: TApplicationContext<{}>['user']; @@ -46,7 +44,6 @@ const customRender = ( locale = 'en', apolloClient, route = '/', - history = createMemoryHistory({ initialEntries: [route] }), environment = defaultEnvironment, projectKey = 'default-project-key', ...rtlOptions @@ -76,10 +73,6 @@ const customRender = ( , rtlOptions ), - // adding `history` to the returned utilities to allow us - // to reference it in our tests (just try to avoid using - // this to test implementation details). - history, }; }; diff --git a/packages/application-shell/src/components/authenticated/authenticated.tsx b/packages/application-shell/src/components/authenticated/authenticated.tsx index 4f016bf0d1..472d5054fa 100644 --- a/packages/application-shell/src/components/authenticated/authenticated.tsx +++ b/packages/application-shell/src/components/authenticated/authenticated.tsx @@ -38,21 +38,29 @@ Authenticated.displayName = 'Authenticated'; const AuthenticationRoutes = (props: TAuthenticatedProps) => ( - - - - - - - - - + + + + } + /> + + + + } + /> + } /> ); AuthenticationRoutes.displayName = 'AuthenticationRoutes'; diff --git a/packages/application-shell/src/components/service-page-project-switcher/service-page-project-switcher.spec.js b/packages/application-shell/src/components/service-page-project-switcher/service-page-project-switcher.spec.js index 5787691f42..088fcd4f3e 100644 --- a/packages/application-shell/src/components/service-page-project-switcher/service-page-project-switcher.spec.js +++ b/packages/application-shell/src/components/service-page-project-switcher/service-page-project-switcher.spec.js @@ -1,4 +1,3 @@ -import { Route } from 'react-router-dom'; import { renderApp, waitFor } from '../../test-utils'; import { createGraphqlResponseForProjectsQuery } from '../project-switcher/project-switcher-test-utils'; import ServicePageProjectSwitcher from './service-page-project-switcher'; @@ -6,21 +5,16 @@ import ServicePageProjectSwitcher from './service-page-project-switcher'; describe('rendering', () => { describe('when user has access to no projects', () => { it('should render nothing', async () => { - const { container } = renderApp( - - - , - { - disableRoutePermissionCheck: true, - route: '/test-1', - user: { - projects: { - total: 0, - results: [], - }, + const { container } = renderApp(, { + disableRoutePermissionCheck: true, + route: '/test-1', + user: { + projects: { + total: 0, + results: [], }, - } - ); + }, + }); await waitFor(() => { expect( // eslint-disable-next-line testing-library/no-container @@ -36,26 +30,21 @@ describe('rendering', () => { numberOfProjects: 1, }), ]; - const { container } = renderApp( - - - , - { - disableRoutePermissionCheck: true, - route: '/test-1', - user: { - projects: { - total: 1, - results: [ - { - key: 'key-1', - }, - ], - }, + const { container } = renderApp(, { + disableRoutePermissionCheck: true, + route: '/test-1', + user: { + projects: { + total: 1, + results: [ + { + key: 'key-1', + }, + ], }, - mocks: mockedRequest, - } - ); + }, + mocks: mockedRequest, + }); // eslint-disable-next-line testing-library/prefer-find-by await waitFor(() => expect( diff --git a/packages/application-shell/src/components/suspended-route/suspended-route.tsx b/packages/application-shell/src/components/suspended-route/suspended-route.tsx index d50eae0602..2789b69c4f 100644 --- a/packages/application-shell/src/components/suspended-route/suspended-route.tsx +++ b/packages/application-shell/src/components/suspended-route/suspended-route.tsx @@ -1,14 +1,8 @@ -import { Suspense } from 'react'; -import { Route, type RouteProps } from 'react-router-dom'; +import { ReactNode, Suspense } from 'react'; import LoadingSpinner from '@commercetools-uikit/loading-spinner'; -const SuspendedRoute = (props: RouteProps) => ( - }>{props.children} - } - /> +const SuspendedRoute = (props: { children: ReactNode }) => ( + }>{props.children} ); SuspendedRoute.displayName = 'SuspendedRoute'; diff --git a/packages/application-shell/src/test-utils/test-utils.tsx b/packages/application-shell/src/test-utils/test-utils.tsx index 34c9d60bc9..c8ff1b08a5 100644 --- a/packages/application-shell/src/test-utils/test-utils.tsx +++ b/packages/application-shell/src/test-utils/test-utils.tsx @@ -16,10 +16,9 @@ import { TestProviderFlopFlip } from '@flopflip/react-broadcast'; import type { TFlags } from '@flopflip/types'; import * as rtl from '@testing-library/react'; import * as rtlHooks from '@testing-library/react-hooks'; -import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; import { Provider as StoreProvider } from 'react-redux'; -import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router-dom'; import invariant from 'tiny-invariant'; import { entryPointUriPathToPermissionKeys } from '@commercetools-frontend/application-config/ssr'; import { @@ -27,7 +26,6 @@ import { createApolloClient, type TProviderProps, } from '@commercetools-frontend/application-shell-connectors'; -import { createEnhancedHistory } from '@commercetools-frontend/browser-history'; import { DOMAINS } from '@commercetools-frontend/constants'; import { NotificationsList, @@ -102,7 +100,7 @@ const defaultUser = { const defaultEnvironment: Partial['environment']> = { applicationId: '__local', applicationName: 'my-app', - entryPointUriPath: 'random-entry-point', + entryPointUriPath: 'random-entry-point/*', frontendHost: 'localhost:3001', mcApiUrl: 'https://mc-api.europe-west1.gcp.commercetools.com', location: 'eu', @@ -279,7 +277,6 @@ export type TRenderAppOptions = route: string; disableRoutePermissionCheck: boolean; disableAutomaticEntryPointRoutes: boolean; - history: ReturnType; flags: TFlags; environment: Partial< TProviderProps['environment'] @@ -294,7 +291,7 @@ type TRenderAppResult = rtl.RenderResult & Pick< TRenderAppOptions, - 'history' | 'user' | 'project' | 'environment' + 'user' | 'project' | 'environment' >; type TApplicationProvidersProps = { children: ReactNode; @@ -313,7 +310,6 @@ function createApplicationProviders< apolloClient, // react-router route, - history, // flopflip flags = {}, // application-context @@ -341,16 +337,10 @@ function createApplicationProviders< } } - let initialRoute = route; + let initialRoute = route || '/'; if (!route && mergedProject) { initialRoute = `/${mergedProject.key}/${mergedEnvironment.entryPointUriPath}`; } - const memoryHistory = - history ?? - createEnhancedHistory( - createMemoryHistory({ initialEntries: [initialRoute || '/'] }) - ); - const ApplicationProviders = (props: TApplicationProvidersProps) => ( @@ -361,8 +351,7 @@ function createApplicationProviders< environment={mergedEnvironment} projectDataLocale={dataLocale} > - {/* TODO: get this to work properly with history */} - + }> - + @@ -395,7 +384,6 @@ function createApplicationProviders< mergedUser, mergedProject, mergedEnvironment, - history: memoryHistory, }; } @@ -405,13 +393,8 @@ function renderApp( ui: ReactElement, options: Partial> = {} ): TRenderAppResult { - const { - ApplicationProviders, - mergedUser, - mergedProject, - mergedEnvironment, - history, - } = createApplicationProviders(options); + const { ApplicationProviders, mergedUser, mergedProject, mergedEnvironment } = + createApplicationProviders(options); // eslint-disable-next-line testing-library/render-result-naming-convention const rendered = rtl.render(ui, { @@ -427,10 +410,6 @@ function renderApp( return { ...rendered, - // adding `history` to the returned utilities to allow us - // to reference it in our tests (just try to avoid using - // this to test implementation details). - history, // Adding user, project & environment so tests know about the merge results // Note that these objects do not resemble the application context, they are // only intended to communicate the test setup back to the tests. @@ -601,7 +580,7 @@ export type TRenderHookResult< > & Pick< TRenderAppWithReduxResult, - 'store' | 'history' | 'user' | 'project' | 'environment' + 'store' | 'user' | 'project' | 'environment' >; function renderHook< @@ -625,13 +604,8 @@ function renderHook< StoreState > { const { ReduxProviders, reduxStore } = createReduxProviders(options); - const { - ApplicationProviders, - mergedUser, - mergedProject, - mergedEnvironment, - history, - } = createApplicationProviders(options); + const { ApplicationProviders, mergedUser, mergedProject, mergedEnvironment } = + createApplicationProviders(options); // eslint-disable-next-line testing-library/render-result-naming-convention const rendered = rtlHooks.renderHook(callback, { @@ -649,7 +623,6 @@ function renderHook< return { ...rendered, store: reduxStore, - history, user: mergedUser, project: mergedProject, environment: mergedEnvironment,