Skip to content

Commit

Permalink
Add shared table component
Browse files Browse the repository at this point in the history
  • Loading branch information
adhityamamallan committed Dec 13, 2024
1 parent ce67a14 commit bd52c85
Show file tree
Hide file tree
Showing 37 changed files with 438 additions and 236 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type PageQueryParamValues } from '@/hooks/use-page-query-params/use-page-query-params.types';
import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';

export const mockDomainWorkflowsQueryParamsValues: PageQueryParamValues<
export const mockDomainPageQueryParamsValues: PageQueryParamValues<
typeof domainPageQueryParamsConfig
> = {
inputType: 'search',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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 { type DomainWorkflowsHeaderInputType } from '@/views/domain-workflows/domain-workflows-header/domain-workflows-header.types';
import { type WorkflowStatusBasicVisibility } from '@/views/domain-workflows-basic/domain-workflows-basic-filters-status/domain-workflows-basic-filters-status.types';
import isWorkflowStatusBasicVisibility from '@/views/domain-workflows-basic/domain-workflows-basic-filters-status/helpers/is-workflow-status-basic-visibility';
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 { type WorkflowsHeaderInputType } from '@/views/shared/workflows-header/workflows-header.types';

const domainPageQueryParamsConfig: [
PageQueryParam<'inputType', DomainWorkflowsHeaderInputType>,
PageQueryParam<'inputType', WorkflowsHeaderInputType>,
// Search input
PageQueryParam<'search', string>,
PageQueryParam<'status', WorkflowStatus | undefined>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';

import { render, screen, fireEvent, act } from '@/test-utils/rtl';

import { mockDomainWorkflowsQueryParamsValues } from '@/views/domain-workflows/__fixtures__/domain-workflows-query-params';
import { mockDomainPageQueryParamsValues } from '@/views/domain-page/__fixtures__/domain-page-query-params';

import DomainWorkflowsBasicFiltersStatus from '../domain-workflows-basic-filters-status';
import { WORKFLOW_STATUS_NAMES_BASIC_VISIBILITY } from '../domain-workflows-basic-filters-status.constants';
Expand Down Expand Up @@ -63,7 +63,7 @@ function setup({
render(
<DomainWorkflowsBasicFiltersStatus
value={{
statusBasic: mockDomainWorkflowsQueryParamsValues.statusBasic,
statusBasic: mockDomainPageQueryParamsValues.statusBasic,
...overrides,
}}
setValue={mockSetValue}
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from 'react';
import { render, screen, act, fireEvent } from '@/test-utils/rtl';

import {
mockDomainWorkflowsQueryParamsValues,
mockDomainPageQueryParamsValues,
mockDateOverrides,
} from '../../__fixtures__/domain-workflows-query-params';
} from '../../../domain-page/__fixtures__/domain-page-query-params';
import DomainWorkflowsFiltersDates from '../domain-workflows-filters-dates';
import { type DomainWorkflowsFiltersDatesValue } from '../domain-workflows-filters-dates.types';

Expand Down Expand Up @@ -136,8 +136,8 @@ function setup({
render(
<DomainWorkflowsFiltersDates
value={{
timeRangeStart: mockDomainWorkflowsQueryParamsValues.timeRangeStart,
timeRangeEnd: mockDomainWorkflowsQueryParamsValues.timeRangeEnd,
timeRangeStart: mockDomainPageQueryParamsValues.timeRangeStart,
timeRangeEnd: mockDomainPageQueryParamsValues.timeRangeEnd,
...overrides,
}}
setValue={mockSetValue}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { render, screen, fireEvent, act } from '@/test-utils/rtl';

import { WORKFLOW_STATUS_NAMES } from '@/views/shared/workflow-status-tag/workflow-status-tag.constants';

import { mockDomainWorkflowsQueryParamsValues } from '../../__fixtures__/domain-workflows-query-params';
import { mockDomainPageQueryParamsValues } from '../../../domain-page/__fixtures__/domain-page-query-params';
import DomainWorkflowsFiltersStatus from '../domain-workflows-filters-status';
import { type DomainWorkflowsFiltersStatusValue } from '../domain-workflows-filters-status.types';

Expand Down Expand Up @@ -63,7 +63,7 @@ function setup({
render(
<DomainWorkflowsFiltersStatus
value={{
status: mockDomainWorkflowsQueryParamsValues.status,
status: mockDomainPageQueryParamsValues.status,
...overrides,
}}
setValue={mockSetValue}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,96 +1,34 @@
'use client';
import { useState } from 'react';

import { Segment, SegmentedControl } from 'baseui/segmented-control';

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 usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
import WorkflowsHeader from '@/views/shared/workflows-header/workflows-header';

import domainWorkflowsFiltersConfig from '../config/domain-workflows-filters.config';
import DOMAIN_WORKFLOWS_SEARCH_DEBOUNCE_MS from '../config/domain-workflows-search-debounce-ms.config';
import DomainWorkflowsQueryInput from '../domain-workflows-query-input/domain-workflows-query-input';
import DomainWorkflowsQueryLabel from '../domain-workflows-query-label/domain-workflows-query-label';
import useListWorkflows from '../hooks/use-list-workflows';

import { overrides, styled } from './domain-workflows-header.styles';
import { type Props } from './domain-workflows-header.types';

export default function DomainWorkflowsHeader({ domain, cluster }: Props) {
const [areFiltersShown, setAreFiltersShown] = useState(false);

const { resetAllFilters, activeFiltersCount, queryParams, setQueryParams } =
usePageFilters({
pageFiltersConfig: domainWorkflowsFiltersConfig,
pageQueryParamsConfig: domainPageQueryParamsConfig,
});

const { refetch, isFetching } = useListWorkflows({
domain,
cluster,
});
const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);

return (
<styled.HeaderContainer>
<styled.InputContainer>
<SegmentedControl
activeKey={queryParams.inputType}
onChange={({ activeKey }) => {
setQueryParams(
{
inputType: activeKey === 'query' ? 'query' : 'search',
},
{ replace: false, pageRerender: true }
);
}}
overrides={overrides.inputToggle}
>
<Segment
overrides={overrides.inputToggleSegment}
key="search"
label="Search"
/>
<Segment
overrides={overrides.inputToggleSegment}
key="query"
label={<DomainWorkflowsQueryLabel />}
/>
</SegmentedControl>
{queryParams.inputType === 'query' ? (
<DomainWorkflowsQueryInput
value={queryParams.query}
setValue={(v) => setQueryParams({ query: v })}
refetchQuery={refetch}
isQueryRunning={isFetching}
/>
) : (
<styled.SearchContainer>
<PageFiltersSearch
pageQueryParamsConfig={domainPageQueryParamsConfig}
searchQueryParamKey="search"
searchPlaceholder="Search for Workflow ID, Run ID, or Workflow Type"
inputDebounceDurationMs={DOMAIN_WORKFLOWS_SEARCH_DEBOUNCE_MS}
/>
<PageFiltersToggle
isActive={areFiltersShown}
onClick={() => {
setAreFiltersShown((value) => !value);
}}
activeFiltersCount={activeFiltersCount}
/>
</styled.SearchContainer>
)}
</styled.InputContainer>
{queryParams.inputType === 'search' && areFiltersShown && (
<PageFiltersFields
pageFiltersConfig={domainWorkflowsFiltersConfig}
resetAllFilters={resetAllFilters}
queryParams={queryParams}
setQueryParams={setQueryParams}
/>
)}
</styled.HeaderContainer>
<WorkflowsHeader
domain={domain}
cluster={cluster}
pageQueryParamsConfig={domainPageQueryParamsConfig}
pageFiltersConfig={domainWorkflowsFiltersConfig}
filtersValues={{
inputType: queryParams.inputType,
search: queryParams.search,
status: queryParams.status,
timeRangeStart: queryParams.timeRangeStart,
timeRangeEnd: queryParams.timeRangeEnd,
sortColumn: queryParams.sortColumn,
sortOrder: queryParams.sortOrder,
query: queryParams.query,
}}
inputTypeQueryParamKey="inputType"
searchQueryParamKey="search"
queryStringQueryParamKey="query"
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
import { type ListWorkflowsRequestQueryParams } from '@/route-handlers/list-workflows/list-workflows.types';

export type DomainWorkflowsHeaderInputType =
ListWorkflowsRequestQueryParams['inputType'];

export type Props = {
domain: string;
cluster: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as usePageQueryParamsModule from '@/hooks/use-page-query-params/use-pag
import { type ListWorkflowsResponse } from '@/route-handlers/list-workflows/list-workflows.types';

import type { Props as MSWMocksHandlersProps } from '../../../../test-utils/msw-mock-handlers/msw-mock-handlers.types';
import { mockDomainWorkflowsQueryParamsValues } from '../../__fixtures__/domain-workflows-query-params';
import { mockDomainPageQueryParamsValues } from '../../../domain-page/__fixtures__/domain-page-query-params';
import { type DomainWorkflowsHeaderInputType } from '../../domain-workflows-header/domain-workflows-header.types';
import DomainWorkflowsTable from '../domain-workflows-table';

Expand Down Expand Up @@ -56,7 +56,7 @@ jest.mock('query-string', () => ({

const mockSetQueryParams = jest.fn();
jest.mock('@/hooks/use-page-query-params/use-page-query-params', () =>
jest.fn(() => [mockDomainWorkflowsQueryParamsValues, mockSetQueryParams])
jest.fn(() => [mockDomainPageQueryParamsValues, mockSetQueryParams])
);

describe(DomainWorkflowsTable.name, () => {
Expand Down Expand Up @@ -102,7 +102,7 @@ describe(DomainWorkflowsTable.name, () => {
jest
.spyOn(usePageQueryParamsModule, 'default')
.mockReturnValue([
{ ...mockDomainWorkflowsQueryParamsValues, inputType: 'query' },
{ ...mockDomainPageQueryParamsValues, inputType: 'query' },
mockSetQueryParams,
]);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import { styled as createStyled } from 'baseui';

export const styled = {
TableContainer: createStyled('div', {
overflowX: 'auto',
}),
ErrorPanelContainer: createStyled('div', ({ $theme }) => ({
padding: `${$theme.sizing.scale1200} 0px`,
display: 'flex',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@ import React from 'react';

import ErrorPanel from '@/components/error-panel/error-panel';
import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
import Table from '@/components/table/table';
import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
import useListWorkflows from '@/views/shared/hooks/use-list-workflows/use-list-workflows';
import WorkflowsTable from '@/views/shared/workflows-table/workflows-table';

import domainWorkflowsQueryTableConfig from '../config/domain-workflows-query-table.config';
import domainWorkflowsSearchTableConfig from '../config/domain-workflows-search-table.config';
import { type Props } from '../domain-workflows-table/domain-workflows-table.types';
import getNextSortOrder from '../helpers/get-next-sort-order';
import useListWorkflows from '../hooks/use-list-workflows';

import { styled } from './domain-workflows-table.styles';
import getWorkflowsErrorPanelProps from './helpers/get-workflows-error-panel-props';
Expand All @@ -21,8 +19,6 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
domainPageQueryParamsConfig
);

const inputType = queryParams.inputType;

const {
workflows,
error,
Expand All @@ -31,15 +27,28 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
fetchNextPage,
isFetchingNextPage,
refetch,
} = useListWorkflows({ domain, cluster });
} = useListWorkflows({
domain,
cluster,
filtersValues: {
inputType: queryParams.inputType,
search: queryParams.search,
status: queryParams.status,
timeRangeStart: queryParams.timeRangeStart,
timeRangeEnd: queryParams.timeRangeEnd,
sortColumn: queryParams.sortColumn,
sortOrder: queryParams.sortOrder,
query: queryParams.query,
},
});

if (isLoading) {
return <SectionLoadingIndicator />;
}

if (workflows.length === 0) {
const errorPanelProps = getWorkflowsErrorPanelProps({
inputType,
inputType: queryParams.inputType,
error,
areSearchParamsAbsent:
!queryParams.search &&
Expand All @@ -58,38 +67,30 @@ export default function DomainWorkflowsTable({ domain, cluster }: Props) {
}

return (
<styled.TableContainer>
<Table
data={workflows}
shouldShowResults={!isLoading && workflows.length > 0}
endMessageProps={{
kind: 'infinite-scroll',
hasData: workflows.length > 0,
error,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
}}
{...(inputType === 'query'
<WorkflowsTable
workflows={workflows}
isLoading={isLoading}
error={error}
hasNextPage={hasNextPage}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
sortParams={
queryParams.inputType === 'search'
? {
columns: domainWorkflowsQueryTableConfig,
}
: {
columns: domainWorkflowsSearchTableConfig,
onSort: (column) => {
onSort: (column: string) =>
setQueryParams({
sortColumn: column,
sortOrder: getNextSortOrder({
currentColumn: queryParams.sortColumn,
nextColumn: column,
currentSortOrder: queryParams.sortOrder,
}),
});
},
}),
sortColumn: queryParams.sortColumn,
sortOrder: queryParams.sortOrder,
})}
/>
</styled.TableContainer>
}
: undefined
}
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import { type TableColumn } from '@/components/table/table.types';
import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';

export type Props = {
domain: string;
cluster: string;
};

export type DomainWorkflowsQueryTableConfig = Array<
Omit<TableColumn<DomainWorkflow>, 'sortable'>
>;
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { type Props as ErrorPanelProps } from '@/components/error-panel/error-panel.types';
import { type RequestError } from '@/utils/request/request-error';

import { type DomainWorkflowsHeaderInputType } from '../../domain-workflows-header/domain-workflows-header.types';
import { type WorkflowsHeaderInputType } from '@/views/shared/workflows-header/workflows-header.types';

export default function getWorkflowsErrorPanelProps({
inputType,
error,
areSearchParamsAbsent,
}: {
inputType: DomainWorkflowsHeaderInputType;
inputType: WorkflowsHeaderInputType;
error: RequestError | null;
areSearchParamsAbsent: boolean;
}): ErrorPanelProps | undefined {
Expand Down
Loading

0 comments on commit bd52c85

Please sign in to comment.