From 6f9c89e60b56cbbcbfbff84a866eb3b6966f1d0b Mon Sep 17 00:00:00 2001 From: Adhitya Mamallan Date: Tue, 3 Sep 2024 15:47:32 +0200 Subject: [PATCH] Move Domain Workflows query params back to Domain Page (#644) * Move page query params to center * Preserve query params across tabs * Use window location directly * Fix unit tests * Spread out search --- src/components/page-filters/page-filters.tsx | 2 +- .../__tests__/parse-date-query-param.test.ts | 0 .../datetime}/parse-date-query-param.ts | 0 .../domain-page-query-params.config.ts} | 9 ++++--- .../__tests__/domain-page-tabs.test.tsx | 26 +++++++++++++++++++ .../domain-page-tabs/domain-page-tabs.tsx | 4 ++- .../domain-workflows-query-params.ts | 5 ++-- .../config/domain-workflows-filters.config.ts | 7 +++-- .../domain-workflows-filters.tsx | 4 +-- .../domain-workflows-table.tsx | 4 +-- ...get-domain-workflows-error-config.test.ts} | 1 + 11 files changed, 45 insertions(+), 17 deletions(-) rename src/{views/domain-workflows/helpers => utils/datetime}/__tests__/parse-date-query-param.test.ts (100%) rename src/{views/domain-workflows/helpers => utils/datetime}/parse-date-query-param.ts (100%) rename src/views/{domain-workflows/config/domain-workflows-query-params.config.ts => domain-page/config/domain-page-query-params.config.ts} (86%) rename src/views/domain-workflows/helpers/__tests__/{get-domain-workflows-error-config.ts => get-domain-workflows-error-config.test.ts} (97%) diff --git a/src/components/page-filters/page-filters.tsx b/src/components/page-filters/page-filters.tsx index d1d2fdf0e..aa2371988 100644 --- a/src/components/page-filters/page-filters.tsx +++ b/src/components/page-filters/page-filters.tsx @@ -70,7 +70,7 @@ export default function PageFilters< value={queryParams[searchQueryParamKey]} onChange={(event) => setQueryParams({ - [searchQueryParamKey]: event.target.value, + [searchQueryParamKey]: event.target.value || undefined, } as Partial>) } placeholder={searchPlaceholder} diff --git a/src/views/domain-workflows/helpers/__tests__/parse-date-query-param.test.ts b/src/utils/datetime/__tests__/parse-date-query-param.test.ts similarity index 100% rename from src/views/domain-workflows/helpers/__tests__/parse-date-query-param.test.ts rename to src/utils/datetime/__tests__/parse-date-query-param.test.ts diff --git a/src/views/domain-workflows/helpers/parse-date-query-param.ts b/src/utils/datetime/parse-date-query-param.ts similarity index 100% rename from src/views/domain-workflows/helpers/parse-date-query-param.ts rename to src/utils/datetime/parse-date-query-param.ts diff --git a/src/views/domain-workflows/config/domain-workflows-query-params.config.ts b/src/views/domain-page/config/domain-page-query-params.config.ts similarity index 86% rename from src/views/domain-workflows/config/domain-workflows-query-params.config.ts rename to src/views/domain-page/config/domain-page-query-params.config.ts index a4fd340ac..ef407c411 100644 --- a/src/views/domain-workflows/config/domain-workflows-query-params.config.ts +++ b/src/views/domain-page/config/domain-page-query-params.config.ts @@ -1,17 +1,18 @@ import { type PageQueryParam } from '@/hooks/use-page-query-params/use-page-query-params.types'; +import parseDateQueryParam from '@/utils/datetime/parse-date-query-param'; import { type SortOrder } from '@/utils/sort-by'; import isWorkflowStatus from '@/views/shared/workflow-status-tag/helpers/is-workflow-status'; import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types'; -import parseDateQueryParam from '../helpers/parse-date-query-param'; - -const domainWorkflowsQueryParamsConfig: [ +const domainPageQueryParamsConfig: [ + // Workflows PageQueryParam<'search', string>, PageQueryParam<'status', WorkflowStatus | undefined>, PageQueryParam<'timeRangeStart', Date | undefined>, PageQueryParam<'timeRangeEnd', Date | undefined>, PageQueryParam<'sortColumn', string>, PageQueryParam<'sortOrder', SortOrder>, + // Task Lists ] = [ { key: 'search', @@ -45,4 +46,4 @@ const domainWorkflowsQueryParamsConfig: [ }, ] as const; -export default domainWorkflowsQueryParamsConfig; +export default domainPageQueryParamsConfig; diff --git a/src/views/domain-page/domain-page-tabs/__tests__/domain-page-tabs.test.tsx b/src/views/domain-page/domain-page-tabs/__tests__/domain-page-tabs.test.tsx index 7a750ee7f..6c884a779 100644 --- a/src/views/domain-page/domain-page-tabs/__tests__/domain-page-tabs.test.tsx +++ b/src/views/domain-page/domain-page-tabs/__tests__/domain-page-tabs.test.tsx @@ -61,6 +61,32 @@ describe('DomainPageTabs', () => { expect(mockPushFn).toHaveBeenCalledWith('page-2'); }); + it('retains query params when new tab is clicked', () => { + // TODO: this is a bit hacky, see if there is a better way to mock the window search property + const originalWindow = window; + window = Object.create(window); + Object.defineProperty(window, 'location', { + value: { + ...window.location, + search: '?queryParam1=one&queryParam2=two', + }, + writable: true, + }); + + render(); + + const page2Tab = screen.getByText('Page 2'); + act(() => { + fireEvent.click(page2Tab); + }); + + expect(mockPushFn).toHaveBeenCalledWith( + 'page-2?queryParam1=one&queryParam2=two' + ); + + window = originalWindow; + }); + it('renders tabs artworks correctly', () => { render(); diff --git a/src/views/domain-page/domain-page-tabs/domain-page-tabs.tsx b/src/views/domain-page/domain-page-tabs/domain-page-tabs.tsx index c9965e7d8..a66fd0032 100644 --- a/src/views/domain-page/domain-page-tabs/domain-page-tabs.tsx +++ b/src/views/domain-page/domain-page-tabs/domain-page-tabs.tsx @@ -22,7 +22,9 @@ export default function DomainPageTabs() { selectedTab={decodedParams.domainTab} tabList={domainPageTabsConfig} setSelectedTab={(newTab) => { - router.push(encodeURIComponent(newTab.toString())); + router.push( + `${encodeURIComponent(newTab.toString())}${window.location.search}` + ); }} /> diff --git a/src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts b/src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts index 7544cb4a8..d241512fb 100644 --- a/src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts +++ b/src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts @@ -1,9 +1,8 @@ import { type PageQueryParamValues } from '@/hooks/use-page-query-params/use-page-query-params.types'; - -import type domainWorkflowsQueryParamsConfig from '../config/domain-workflows-query-params.config'; +import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; export const mockDomainWorkflowsQueryParamsValues: PageQueryParamValues< - typeof domainWorkflowsQueryParamsConfig + typeof domainPageQueryParamsConfig > = { search: '', status: undefined, diff --git a/src/views/domain-workflows/config/domain-workflows-filters.config.ts b/src/views/domain-workflows/config/domain-workflows-filters.config.ts index 7ddfb9686..245af1dbe 100644 --- a/src/views/domain-workflows/config/domain-workflows-filters.config.ts +++ b/src/views/domain-workflows/config/domain-workflows-filters.config.ts @@ -1,19 +1,18 @@ import { type PageFilterConfig } from '@/components/page-filters/page-filters.types'; +import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; import DomainWorkflowsFiltersDates from '../domain-workflows-filters-dates/domain-workflows-filters-dates'; import { type DomainWorkflowsFiltersDatesValue } from '../domain-workflows-filters-dates/domain-workflows-filters-dates.types'; import DomainWorkflowsFiltersStatus from '../domain-workflows-filters-status/domain-workflows-filters-status'; import { type DomainWorkflowsFiltersStatusValue } from '../domain-workflows-filters-status/domain-workflows-filters-status-types'; -import type domainWorkflowsQueryParamsConfig from './domain-workflows-query-params.config'; - const domainWorkflowsFiltersConfig: [ PageFilterConfig< - typeof domainWorkflowsQueryParamsConfig, + typeof domainPageQueryParamsConfig, DomainWorkflowsFiltersStatusValue >, PageFilterConfig< - typeof domainWorkflowsQueryParamsConfig, + typeof domainPageQueryParamsConfig, DomainWorkflowsFiltersDatesValue >, ] = [ diff --git a/src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx b/src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx index 5892b78cd..cfa90a18e 100644 --- a/src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx +++ b/src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx @@ -1,9 +1,9 @@ 'use client'; import PageFilters from '@/components/page-filters/page-filters'; import PageSection from '@/components/page-section/page-section'; +import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; import domainWorkflowsFiltersConfig from '../config/domain-workflows-filters.config'; -import domainWorkflowsQueryParamsConfig from '../config/domain-workflows-query-params.config'; import { styled } from './domain-workflows-filters.styles'; @@ -15,7 +15,7 @@ export default function DomainWorkflowsFilters() { searchQueryParamKey="search" searchPlaceholder="Find workflow" pageFiltersConfig={domainWorkflowsFiltersConfig} - pageQueryParamsConfig={domainWorkflowsQueryParamsConfig} + pageQueryParamsConfig={domainPageQueryParamsConfig} /> diff --git a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx index c32b511f5..f6718363b 100644 --- a/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx +++ b/src/views/domain-workflows/domain-workflows-table/domain-workflows-table.tsx @@ -12,8 +12,8 @@ import { type ListWorkflowsRequestQueryParams, } from '@/route-handlers/list-workflows/list-workflows.types'; import request from '@/utils/request'; +import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config'; -import domainWorkflowsQueryParamsConfig from '../config/domain-workflows-query-params.config'; import domainWorkflowsTableConfig from '../config/domain-workflows-table.config'; import DomainWorkflowsTableEndMessage from '../domain-workflows-table-end-message/domain-workflows-table-end-message'; import getNextSortOrder from '../helpers/get-next-sort-order'; @@ -26,7 +26,7 @@ import { type Props } from './domain-workflows-table.types'; export default function DomainWorkflowsTable(props: Props) { const [queryParams, setQueryParams] = usePageQueryParams( - domainWorkflowsQueryParamsConfig + domainPageQueryParamsConfig ); const requestQueryParams: ListWorkflowsRequestQueryParams = { diff --git a/src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.ts b/src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.test.ts similarity index 97% rename from src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.ts rename to src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.test.ts index 7a909ab9e..d608cf6b1 100644 --- a/src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.ts +++ b/src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.test.ts @@ -14,6 +14,7 @@ describe(getDomainWorkflowsErrorConfig.name, () => { getDomainWorkflowsErrorConfig(new Error(NO_WORKFLOWS_ERROR_MESSAGE)) ).toEqual({ message: 'No workflows found for this domain', + omitLogging: true, actions: [ { kind: 'link-external',