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

@@ -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<PageQueryParamSetterValues<P>>)
  }
  placeholder={searchPlaceholder}

src/views/domain-workflows/config/domain-workflows-query-params.config.ts → 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;

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(<DomainPageTabs />);
+
+ 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(<DomainPageTabs />);
 

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}`
+ );
  }}
  />
  </styled.PageTabsContainer>

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,

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

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}
  />
  </styled.FiltersContainer>
  </PageSection>

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

src/views/domain-workflows/helpers/__tests__/get-domain-workflows-error-config.ts → 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',