Add basic visibility table component

src/utils/datetime/__tests__/get-date-days-before-today.test.ts

@@ -0,0 +1,17 @@
+import getDateDaysBeforeToday from '../get-date-days-before-today';
+
+jest.useFakeTimers().setSystemTime(new Date('2023-05-25'));
+
+describe(getDateDaysBeforeToday.name, () => {
+  it('should return date 30 days before today', () => {
+    expect(getDateDaysBeforeToday(30)).toEqual(
+      new Date('2023-04-25T00:00:00.000Z')
+    );
+  });
+
+  it('should return date 0 days before today', () => {
+    expect(getDateDaysBeforeToday(0)).toEqual(
+      new Date('2023-05-25T00:00:00.000Z')
+    );
+  });
+});

src/utils/datetime/get-date-days-before-today.ts

@@ -0,0 +1,5 @@
+export default function getDateDaysBeforeToday(n: number) {
+  const today = new Date();
+  if (n === 0) return today;
+  return new Date(today.setDate(today.getDate() - n));
+}

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

@@ -32,6 +32,7 @@ const domainWorkflowsBasicFiltersConfig: [
       timeRangeStart: v.timeRangeStart?.toISOString(),
       timeRangeEnd: v.timeRangeEnd?.toISOString(),
     }),
+    // TODO: make a shared dates picker so that you can customize this one to not be clearable
     component: DomainWorkflowsFiltersDates,
   },
 ] as const;

src/views/domain-workflows-basic/config/domain-workflows-basic-page-size.config.ts

@@ -0,0 +1,3 @@
+const DOMAIN_WORKFLOWS_BASIC_PAGE_SIZE = 10;
+
+export default DOMAIN_WORKFLOWS_BASIC_PAGE_SIZE;

src/views/domain-workflows-basic/config/domain-workflows-basic-table.config.ts

@@ -0,0 +1,59 @@
+import { createElement } from 'react';
+
+import FormattedDate from '@/components/formatted-date/formatted-date';
+import Link from '@/components/link/link';
+import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
+import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
+
+import { type DomainWorkflowsBasicTableConfig } from '../domain-workflows-basic-table/domain-workflows-basic-table.types';
+
+const domainWorkflowsBasicTableConfig = [
+  {
+    name: 'Workflow ID',
+    id: 'WorkflowID',
+    renderCell: (row: DomainWorkflow) => row.workflowID,
+    width: '25.5%',
+  },
+  {
+    name: 'Status',
+    id: 'CloseStatus',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(WorkflowStatusTag, { status: row.status }),
+    width: '7.5%',
+  },
+  {
+    name: 'Run ID',
+    id: 'RunID',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(
+        Link,
+        {
+          href: `workflows/${encodeURIComponent(row.workflowID)}/${encodeURIComponent(row.runID)}`,
+        },
+        row.runID
+      ),
+    width: '22%',
+  },
+  {
+    name: 'Workflow type',
+    id: 'WorkflowType',
+    renderCell: (row: DomainWorkflow) => row.workflowName,
+    width: '20%',
+  },
+  {
+    name: 'Started',
+    id: 'StartTime',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(FormattedDate, { timestampMs: row.startTime }),
+    width: '12.5%',
+  },
+  {
+    name: 'Ended',
+    id: 'CloseTime',
+    renderCell: (row: DomainWorkflow) =>
+      createElement(FormattedDate, { timestampMs: row.closeTime }),
+    width: '12.5%',
+  },
+] as const satisfies DomainWorkflowsBasicTableConfig;
+
+export default domainWorkflowsBasicTableConfig;

src/views/domain-workflows-basic/domain-workflows-basic-filters/__tests__/domain-workflows-basic-filters.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { type Props as PageFiltersToggleProps } from '@/components/page-filters/page-filters-toggle/page-filters-toggle.types';
+import { mockDomainWorkflowsQueryParamsValues } from '@/views/domain-workflows/__fixtures__/domain-workflows-query-params';
+
+import DomainWorkflowsBasicFilters from '../domain-workflows-basic-filters';
+
+jest.mock(
+  '@/components/page-filters/page-filters-search/page-filters-search',
+  () =>
+    jest.fn(({ searchPlaceholder }) => (
+      <div>Filter search: {searchPlaceholder}</div>
+    ))
+);
+
+jest.mock(
+  '@/components/page-filters/page-filters-fields/page-filters-fields',
+  () => jest.fn(() => <div>Filter fields</div>)
+);
+
+jest.mock(
+  '@/components/page-filters/page-filters-toggle/page-filters-toggle',
+  () =>
+    jest.fn((props: PageFiltersToggleProps) => (
+      <button onClick={props.onClick}>Filter toggle</button>
+    ))
+);
+
+const mockSetQueryParams = jest.fn();
+const mockResetAllFilters = jest.fn();
+const mockActiveFiltersCount = 2;
+jest.mock('@/components/page-filters/hooks/use-page-filters', () =>
+  jest.fn(() => ({
+    resetAllFilters: mockResetAllFilters,
+    activeFiltersCount: mockActiveFiltersCount,
+    queryParams: mockDomainWorkflowsQueryParamsValues,
+    setQueryParams: mockSetQueryParams,
+  }))
+);
+
+describe(DomainWorkflowsBasicFilters.name, () => {
+  it('renders page search and filters', async () => {
+    render(<DomainWorkflowsBasicFilters />);
+
+    expect(
+      await screen.findByText('Filter search: Workflow ID')
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Filter search: Workflow Type')
+    ).toBeInTheDocument();
+
+    expect(await screen.findByText('Filter fields')).toBeInTheDocument();
+  });
+
+  it('hides page filters when filter toggle is clicked', async () => {
+    const user = userEvent.setup();
+    render(<DomainWorkflowsBasicFilters />);
+
+    expect(await screen.findByText('Filter fields')).toBeInTheDocument();
+
+    const filterToggle = await screen.findByText('Filter toggle');
+    await user.click(filterToggle);
+
+    expect(screen.queryByText('Filter fields')).toBeNull();
+  });
+});

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

@@ -1,10 +1,11 @@
 'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import usePageFilters from '@/components/page-filters/hooks/use-page-filters';
 import PageFiltersFields from '@/components/page-filters/page-filters-fields/page-filters-fields';
 import PageFiltersSearch from '@/components/page-filters/page-filters-search/page-filters-search';
 import PageFiltersToggle from '@/components/page-filters/page-filters-toggle/page-filters-toggle';
+import getDateDaysBeforeToday from '@/utils/datetime/get-date-days-before-today';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 
 import domainWorkflowsBasicFiltersConfig from '../config/domain-workflows-basic-filters.config';
@@ -13,14 +14,23 @@ import DOMAIN_WORKFLOWS_BASIC_SEARCH_DEBOUNCE_MS from '../config/domain-workflow
 import { styled } from './domain-workflows-basic-filters.styles';
 
 export default function DomainWorkflowsBasicFilters() {
-  const [areFiltersShown, setAreFiltersShown] = useState(false);
+  const [areFiltersShown, setAreFiltersShown] = useState(true);
 
   const { resetAllFilters, activeFiltersCount, queryParams, setQueryParams } =
     usePageFilters({
       pageFiltersConfig: domainWorkflowsBasicFiltersConfig,
       pageQueryParamsConfig: domainPageQueryParamsConfig,
     });
 
+  useEffect(() => {
+    if (!queryParams.timeRangeStart && !queryParams.timeRangeEnd) {
+      setQueryParams({
+        timeRangeStart: getDateDaysBeforeToday(30).toISOString(),
+        timeRangeEnd: getDateDaysBeforeToday(0).toISOString(),
+      });
+    }
+  }, [queryParams.timeRangeStart, queryParams.timeRangeEnd, setQueryParams]);
+
   return (
     <styled.HeaderContainer>
       <styled.InputContainer>