Move Domain Workflows code to separate view (#641)

* Domain workflows view

* Push fixed tests

* Move DomainWorkflows to root of view

src/views/domain-page/config/domain-page-tabs-content.config.ts

@@ -1,10 +1,11 @@
+import DomainWorkflows from '@/views/domain-workflows/domain-workflows';
+
 import type { DomainPageTabsContentConfig } from '../domain-page-content/domain-page-content.types';
 import DomainPageMetadata from '../domain-page-metadata/domain-page-metadata';
 import DomainPageSettings from '../domain-page-settings/domain-page-settings';
-import DomainPageWorkflows from '../domain-page-workflows/domain-page-workflows';
 
 const domainPageTabsContentConfig = {
- workflows: DomainPageWorkflows,
+ workflows: DomainWorkflows,
  metadata: DomainPageMetadata,
  settings: DomainPageSettings,
 } as const satisfies DomainPageTabsContentConfig;

src/views/domain-page/config/domain-page-tabs-error.config.ts

@@ -1,5 +1,6 @@
+import getDomainWorkflowsErrorConfig from '@/views/domain-workflows/helpers/get-domain-workflows-error-config';
+
 import { type DomainPageTabsErrorConfig } from '../domain-page-tabs-error/domain-page-tabs-error.types';
-import getDomainWorkflowsErrorConfig from '../helpers/get-domain-workflows-error-config';
 
 const domainPageTabsErrorConfig: DomainPageTabsErrorConfig = {
  workflows: getDomainWorkflowsErrorConfig,

src/views/domain-page/__fixtures__/domain-page-query-params.ts → src/views/domain-workflows/__fixtures__/domain-workflows-query-params.ts

@@ -1,9 +1,9 @@
 import { type PageQueryParamValues } from '@/hooks/use-page-query-params/use-page-query-params.types';
 
-import type domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
+import type domainWorkflowsQueryParamsConfig from '../config/domain-workflows-query-params.config';
 
-export const mockDomainPageQueryParamsValues: PageQueryParamValues<
- typeof domainPageQueryParamsConfig
+export const mockDomainWorkflowsQueryParamsValues: PageQueryParamValues<
+ typeof domainWorkflowsQueryParamsConfig
 > = {
  search: '',
  status: undefined,

src/views/domain-workflows/config/domain-workflows-filters.config.ts

@@ -0,0 +1,40 @@
+import { type PageFilterConfig } from '@/components/page-filters/page-filters.types';
+
+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,
+ DomainWorkflowsFiltersStatusValue
+ >,
+ PageFilterConfig<
+ typeof domainWorkflowsQueryParamsConfig,
+ DomainWorkflowsFiltersDatesValue
+ >,
+] = [
+ {
+ id: 'status',
+ getValue: (v) => ({ status: v.status }),
+ formatValue: (v) => v,
+ component: DomainWorkflowsFiltersStatus,
+ },
+ {
+ id: 'dates',
+ getValue: (v) => ({
+ timeRangeStart: v.timeRangeStart,
+ timeRangeEnd: v.timeRangeEnd,
+ }),
+ formatValue: (v) => ({
+ timeRangeStart: v.timeRangeStart?.toISOString(),
+ timeRangeEnd: v.timeRangeEnd?.toISOString(),
+ }),
+ component: DomainWorkflowsFiltersDates,
+ },
+] as const;
+
+export default domainWorkflowsFiltersConfig;

src/views/domain-page/config/domain-page-query-params.config.ts → src/views/domain-workflows/config/domain-workflows-query-params.config.ts

@@ -5,7 +5,7 @@ import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow
 
 import parseDateQueryParam from '../helpers/parse-date-query-param';
 
-const domainPageQueryParamsConfig: [
+const domainWorkflowsQueryParamsConfig: [
  PageQueryParam<'search', string>,
  PageQueryParam<'status', WorkflowStatus | undefined>,
  PageQueryParam<'timeRangeStart', Date | undefined>,
@@ -45,4 +45,4 @@ const domainPageQueryParamsConfig: [
  },
 ] as const;
 
-export default domainPageQueryParamsConfig;
+export default domainWorkflowsQueryParamsConfig;

src/views/domain-page/config/domain-page-workflows-table.config.ts → src/views/domain-workflows/config/domain-workflows-table.config.ts

@@ -3,11 +3,10 @@ import { createElement } from 'react';
 import FormattedDate from '@/components/formatted-date/formatted-date';
 import Link from '@/components/link/link';
 import { type TableColumn } from '@/components/table/table.types';
+import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
 import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
 
-import { type DomainWorkflow } from '../domain-page.types';
-
-const domainPageWorkflowsTableConfig: Array<TableColumn<DomainWorkflow>> = [
+const domainWorkflowsTableConfig: Array<TableColumn<DomainWorkflow>> = [
  {
  name: 'Workflow ID',
  id: 'WorkflowID',
@@ -58,4 +57,4 @@ const domainPageWorkflowsTableConfig: Array<TableColumn<DomainWorkflow>> = [
  },
 ];
 
-export default domainPageWorkflowsTableConfig;
+export default domainWorkflowsTableConfig;

src/views/domain-page/domain-page-workflows-filters-dates/__tests__/domain-page-workflows-filters-dates.test.tsx → src/views/domain-workflows/domain-workflows-filters-dates/__tests__/domain-workflows-filters-dates.test.tsx

@@ -3,20 +3,20 @@ import React from 'react';
 import { render, screen, act, fireEvent } from '@/test-utils/rtl';
 
 import {
- mockDomainPageQueryParamsValues,
+ mockDomainWorkflowsQueryParamsValues,
  mockDateOverrides,
-} from '../../__fixtures__/domain-page-query-params';
-import { type DomainPageWorkflowFiltersDatesValue } from '../domain-page-workflow-filters-dates.types';
-import DomainPageWorkflowsFiltersDates from '../domain-page-workflows-filters-dates';
+} from '../../__fixtures__/domain-workflows-query-params';
+import DomainWorkflowsFiltersDates from '../domain-workflows-filters-dates';
+import { type DomainWorkflowsFiltersDatesValue } from '../domain-workflows-filters-dates.types';
 
 jest.useFakeTimers().setSystemTime(new Date('2023-05-25'));
 
-jest.mock('../domain-page-workflows-filters-dates.constants', () => ({
- ...jest.requireActual('../domain-page-workflows-filters-dates.constants'),
+jest.mock('../domain-workflows-filters-dates.constants', () => ({
+ ...jest.requireActual('../domain-workflows-filters-dates.constants'),
  DATE_FORMAT: 'dd MMM yyyy, HH:mm x',
 }));
 
-describe('DomainPageWorkflowsFiltersDates', () => {
+describe('DomainWorkflowsFiltersDates', () => {
  it('displays the date picker component', () => {
  setup({});
  expect(
@@ -130,14 +130,14 @@ describe('DomainPageWorkflowsFiltersDates', () => {
 function setup({
  overrides,
 }: {
- overrides?: DomainPageWorkflowFiltersDatesValue;
+ overrides?: DomainWorkflowsFiltersDatesValue;
 }) {
  const mockSetValue = jest.fn();
  render(
- <DomainPageWorkflowsFiltersDates
+ <DomainWorkflowsFiltersDates
  value={{
- timeRangeStart: mockDomainPageQueryParamsValues.timeRangeStart,
- timeRangeEnd: mockDomainPageQueryParamsValues.timeRangeEnd,
+ timeRangeStart: mockDomainWorkflowsQueryParamsValues.timeRangeStart,
+ timeRangeEnd: mockDomainWorkflowsQueryParamsValues.timeRangeEnd,
  ...overrides,
  }}
  setValue={mockSetValue}

src/views/domain-page/domain-page-workflows-filters-dates/domain-page-workflows-filters-dates.tsx → src/views/domain-workflows/domain-workflows-filters-dates/domain-workflows-filters-dates.tsx

@@ -7,14 +7,14 @@ import { SIZE } from 'baseui/input';
 
 import { type PageFilterComponentProps } from '@/components/page-filters/page-filters.types';
 
-import { type DomainPageWorkflowFiltersDatesValue } from './domain-page-workflow-filters-dates.types';
-import { DATE_FORMAT } from './domain-page-workflows-filters-dates.constants';
-import { overrides } from './domain-page-workflows-filters-dates.styles';
+import { DATE_FORMAT } from './domain-workflows-filters-dates.constants';
+import { overrides } from './domain-workflows-filters-dates.styles';
+import { type DomainWorkflowsFiltersDatesValue } from './domain-workflows-filters-dates.types';
 
-export default function DomainPageWorkflowsFiltersDates({
+export default function DomainWorkflowsFiltersDates({
  value,
  setValue,
-}: PageFilterComponentProps<DomainPageWorkflowFiltersDatesValue>) {
+}: PageFilterComponentProps<DomainWorkflowsFiltersDatesValue>) {
  const [dates, setDates] = React.useState<Array<Date | null | undefined>>([]);
 
  React.useEffect(() => {

src/views/domain-page/domain-page-workflows-filters-dates/domain-page-workflow-filters-dates.types.ts → src/views/domain-workflows/domain-workflows-filters-dates/domain-workflows-filters-dates.types.ts

@@ -1,4 +1,4 @@
-export type DomainPageWorkflowFiltersDatesValue = {
+export type DomainWorkflowsFiltersDatesValue = {
  timeRangeStart: Date | undefined;
  timeRangeEnd: Date | undefined;
 };

src/views/domain-page/domain-page-workflows-filters-status/__tests__/domain-page-workflows-filters-status.test.tsx → src/views/domain-workflows/domain-workflows-filters-status/__tests__/domain-workflows-filters-status.test.tsx

@@ -4,11 +4,11 @@ import { render, screen, fireEvent, act } from '@/test-utils/rtl';
 
 import { WORKFLOW_STATUS_NAMES } from '@/views/shared/workflow-status-tag/workflow-status-tag.constants';
 
-import { mockDomainPageQueryParamsValues } from '../../__fixtures__/domain-page-query-params';
-import { type DomainPageWorkflowFiltersStatusValue } from '../domain-page-workflow-filters-status-types';
-import DomainPageWorkflowsFiltersStatus from '../domain-page-workflows-filters-status';
+import { mockDomainWorkflowsQueryParamsValues } from '../../__fixtures__/domain-workflows-query-params';
+import DomainWorkflowsFiltersStatus from '../domain-workflows-filters-status';
+import { type DomainWorkflowsFiltersStatusValue } from '../domain-workflows-filters-status-types';
 
-describe('DomainPageWorkflowsFiltersStatus', () => {
+describe('DomainWorkflowsFiltersStatus', () => {
  it('renders without errors', () => {
  setup({});
  expect(screen.getByRole('combobox')).toBeInTheDocument();
@@ -57,13 +57,13 @@ describe('DomainPageWorkflowsFiltersStatus', () => {
 function setup({
  overrides,
 }: {
- overrides?: DomainPageWorkflowFiltersStatusValue;
+ overrides?: DomainWorkflowsFiltersStatusValue;
 }) {
  const mockSetValue = jest.fn();
  render(
- <DomainPageWorkflowsFiltersStatus
+ <DomainWorkflowsFiltersStatus
  value={{
- status: mockDomainPageQueryParamsValues.status,
+ status: mockDomainWorkflowsQueryParamsValues.status,
  ...overrides,
  }}
  setValue={mockSetValue}

src/views/domain-page/domain-page-workflows-filters-status/domain-page-workflow-filters-status-types.ts → src/views/domain-workflows/domain-workflows-filters-status/domain-workflows-filters-status-types.ts

@@ -1,5 +1,5 @@
 import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types';
 
-export type DomainPageWorkflowFiltersStatusValue = {
+export type DomainWorkflowsFiltersStatusValue = {
  status: WorkflowStatus | undefined;
 };

src/views/domain-page/domain-page-workflows-filters-status/domain-page-workflows-filters-status.tsx → src/views/domain-workflows/domain-workflows-filters-status/domain-workflows-filters-status.tsx

@@ -7,14 +7,14 @@ import { Select, SIZE } from 'baseui/select';
 import { type PageFilterComponentProps } from '@/components/page-filters/page-filters.types';
 import { type WorkflowStatus } from '@/views/shared/workflow-status-tag/workflow-status-tag.types';
 
-import { type DomainPageWorkflowFiltersStatusValue } from './domain-page-workflow-filters-status-types';
-import { WORKFLOW_STATUS_OPTIONS } from './domain-page-workflows-filters-status.constants';
-import { overrides } from './domain-page-workflows-filters-status.styles';
+import { type DomainWorkflowsFiltersStatusValue } from './domain-workflows-filters-status-types';
+import { WORKFLOW_STATUS_OPTIONS } from './domain-workflows-filters-status.constants';
+import { overrides } from './domain-workflows-filters-status.styles';
 
-export default function DomainPageWorkflowsFiltersStatus({
+export default function DomainWorkflowsFiltersStatus({
  value,
  setValue,
-}: PageFilterComponentProps<DomainPageWorkflowFiltersStatusValue>) {
+}: PageFilterComponentProps<DomainWorkflowsFiltersStatusValue>) {
  const statusOptionValue = WORKFLOW_STATUS_OPTIONS.filter(
  (option) => option.id === value.status
  );

src/views/domain-workflows/domain-workflows-filters/domain-workflows-filters.tsx

@@ -0,0 +1,23 @@
+'use client';
+import PageFilters from '@/components/page-filters/page-filters';
+import PageSection from '@/components/page-section/page-section';
+
+import domainWorkflowsFiltersConfig from '../config/domain-workflows-filters.config';
+import domainWorkflowsQueryParamsConfig from '../config/domain-workflows-query-params.config';
+
+import { styled } from './domain-workflows-filters.styles';
+
+export default function DomainWorkflowsFilters() {
+ return (
+ <PageSection>
+ <styled.FiltersContainer>
+ <PageFilters
+ searchQueryParamKey="search"
+ searchPlaceholder="Find workflow"
+ pageFiltersConfig={domainWorkflowsFiltersConfig}
+ pageQueryParamsConfig={domainWorkflowsQueryParamsConfig}
+ />
+ </styled.FiltersContainer>
+ </PageSection>
+ );
+}

src/views/domain-page/domain-page-workflows-table-end-message/__tests__/domain-page-workflows-table-end-message.test.tsx → src/views/domain-workflows/domain-workflows-table-end-message/__tests__/domain-workflows-table-end-message.test.tsx

@@ -5,10 +5,10 @@ import {
 
 import { render, screen, act, fireEvent } from '@/test-utils/rtl';
 
-import DomainPageWorkflowsTableEndMessage from '../domain-page-workflows-table-end-message';
-import { type Props } from '../domain-page-workflows-table-end-message.types';
+import DomainWorkflowsTableEndMessage from '../domain-workflows-table-end-message';
+import { type Props } from '../domain-workflows-table-end-message.types';
 
-describe(DomainPageWorkflowsTableEndMessage.name, () => {
+describe(DomainWorkflowsTableEndMessage.name, () => {
  it('renders loading state while fetching next page', () => {
  setup({ isFetchingNextPage: true });
 
@@ -69,9 +69,7 @@ function setup(overrides: Partial<Props>) {
  isFetchingNextPage: false,
  };
 
- render(
- <DomainPageWorkflowsTableEndMessage {...defaultProps} {...overrides} />
- );
+ render(<DomainWorkflowsTableEndMessage {...defaultProps} {...overrides} />);
 
  return { mockFetchNextPage };
 }

src/views/domain-page/domain-page-workflows-table-end-message/domain-page-workflows-table-end-message.tsx → src/views/domain-workflows/domain-workflows-table-end-message/domain-workflows-table-end-message.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { Spinner } from 'baseui/spinner';
 import { InView } from 'react-intersection-observer';
 
-import { styled } from './domain-page-workflows-table-end-message.styles';
-import { type Props } from './domain-page-workflows-table-end-message.types';
+import { styled } from './domain-workflows-table-end-message.styles';
+import { type Props } from './domain-workflows-table-end-message.types';
 
-export default function DomainPageWorkflowsTableEndMessage(props: Props) {
+export default function DomainWorkflowsTableEndMessage(props: Props) {
  if (props.isFetchingNextPage) {
  return <Spinner data-testid="loading-spinner" />;
  }