support sortable columns in workflows list

adhityamamallan · adhityamamallan · commit 5d88f33a0763 · 2026-04-14T16:47:13.000+02:00
Signed-off-by: Adhitya Mamallan &lt;adhitya.mamallan@uber.com&gt;
diff --git a/src/views/domain-workflows-archival/domain-workflows-archival-list/domain-workflows-archival-list.tsx b/src/views/domain-workflows-archival/domain-workflows-archival-list/domain-workflows-archival-list.tsx
@@ -4,6 +4,7 @@ import ErrorPanel from '@/components/error-panel/error-panel';
 import PanelSection from '@/components/panel-section/panel-section';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
+import { toggleSortOrder } from '@/utils/sort-by';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import useListWorkflows from '@/views/shared/hooks/use-list-workflows';
 import WorkflowsList from '@/views/shared/workflows-list/workflows-list';
@@ -21,7 +22,9 @@ export default function DomainWorkflowsArchivalList({
   timeRangeStart,
   timeRangeEnd,
 }: Props) {
-  const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);
+  const [queryParams, setQueryParams] = usePageQueryParams(
+    domainPageQueryParamsConfig
+  );
   const { inputType } = useArchivalInputType();
 
   const {
@@ -74,6 +77,24 @@ export default function DomainWorkflowsArchivalList({
       hasNextPage={hasNextPage}
       fetchNextPage={fetchNextPage}
       isFetchingNextPage={isFetchingNextPage}
+      sortParams={
+        queryParams.inputTypeArchival === 'search'
+          ? {
+              onSort: (column: string) =>
+                setQueryParams({
+                  sortColumnArchival: column,
+                  sortOrderArchival: toggleSortOrder({
+                    currentSortColumn: queryParams.sortColumnArchival,
+                    currentSortOrder: queryParams.sortOrderArchival,
+                    newSortColumn: column,
+                    defaultSortOrder: 'DESC',
+                  }),
+                }),
+              sortColumn: queryParams.sortColumnArchival,
+              sortOrder: queryParams.sortOrderArchival,
+            }
+          : undefined
+      }
     />
   );
 }
diff --git a/src/views/domain-workflows/domain-workflows-list/domain-workflows-list.tsx b/src/views/domain-workflows/domain-workflows-list/domain-workflows-list.tsx
@@ -4,6 +4,7 @@ import ErrorPanel from '@/components/error-panel/error-panel';
 import PanelSection from '@/components/panel-section/panel-section';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
+import { toggleSortOrder } from '@/utils/sort-by';
 import domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
 import useListWorkflows from '@/views/shared/hooks/use-list-workflows';
 import WorkflowsList from '@/views/shared/workflows-list/workflows-list';
@@ -20,7 +21,9 @@ export default function DomainWorkflowsList({
   timeRangeStart,
   timeRangeEnd,
 }: Props) {
-  const [queryParams] = usePageQueryParams(domainPageQueryParamsConfig);
+  const [queryParams, setQueryParams] = usePageQueryParams(
+    domainPageQueryParamsConfig
+  );
 
   const {
     workflows,
@@ -77,6 +80,24 @@ export default function DomainWorkflowsList({
       hasNextPage={hasNextPage}
       fetchNextPage={fetchNextPage}
       isFetchingNextPage={isFetchingNextPage}
+      sortParams={
+        queryParams.inputType === 'search'
+          ? {
+              onSort: (column: string) =>
+                setQueryParams({
+                  sortColumn: column,
+                  sortOrder: toggleSortOrder({
+                    currentSortColumn: queryParams.sortColumn,
+                    currentSortOrder: queryParams.sortOrder,
+                    newSortColumn: column,
+                    defaultSortOrder: 'DESC',
+                  }),
+                }),
+              sortColumn: queryParams.sortColumn,
+              sortOrder: queryParams.sortOrder,
+            }
+          : undefined
+      }
     />
   );
 }
diff --git a/src/views/shared/workflows-list/__tests__/workflows-list.test.tsx b/src/views/shared/workflows-list/__tests__/workflows-list.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { render, screen } from '@/test-utils/rtl';
+import { render, screen, userEvent } from '@/test-utils/rtl';
 
 import { type Props as LoaderProps } from '@/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader.types';
 import { getMockWorkflowListItem } from '@/route-handlers/list-workflows/__fixtures__/mock-workflow-list-items';
@@ -126,6 +126,100 @@ describe(WorkflowsList.name, () => {
     const loader = screen.getByTestId('mock-loader');
     expect(loader).toHaveTextContent('no-data');
   });
+
+  it('renders plain header cells when sortParams is not provided', () => {
+    setup({
+      columns: [
+        {
+          id: 'StartTime',
+          name: 'Started',
+          width: '200px',
+          isSystem: true,
+          sortable: true,
+          renderCell: () => 'start',
+        },
+      ],
+    });
+
+    expect(screen.getByText('Started')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders sortable header cells as buttons when sortParams is provided', () => {
+    const onSort = jest.fn();
+    setup({
+      columns: [
+        {
+          id: 'StartTime',
+          name: 'Started',
+          width: '200px',
+          isSystem: true,
+          sortable: true,
+          renderCell: () => 'start',
+        },
+      ],
+      sortParams: {
+        onSort,
+        sortColumn: '',
+        sortOrder: 'DESC',
+      },
+    });
+
+    const button = screen.getByRole('button', {
+      name: /Started/,
+    });
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onSort with the column id when a sortable header is clicked', async () => {
+    const onSort = jest.fn();
+    const { user } = setup({
+      columns: [
+        {
+          id: 'StartTime',
+          name: 'Started',
+          width: '200px',
+          isSystem: true,
+          sortable: true,
+          renderCell: () => 'start',
+        },
+      ],
+      sortParams: {
+        onSort,
+        sortColumn: '',
+        sortOrder: 'DESC',
+      },
+    });
+
+    await user.click(
+      screen.getByRole('button', {
+        name: /Started/,
+      })
+    );
+    expect(onSort).toHaveBeenCalledWith('StartTime');
+  });
+
+  it('does not render non-sortable columns as buttons even when sortParams is provided', () => {
+    setup({
+      columns: [
+        {
+          id: 'WorkflowID',
+          name: 'Workflow ID',
+          width: '200px',
+          isSystem: true,
+          renderCell: (row) => row.workflowID,
+        },
+      ],
+      sortParams: {
+        onSort: jest.fn(),
+        sortColumn: '',
+        sortOrder: 'DESC',
+      },
+    });
+
+    expect(screen.getByText('Workflow ID')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
 });
 
 function setup({
@@ -134,7 +228,9 @@ function setup({
   error = null,
   hasNextPage = false,
   isFetchingNextPage = false,
+  sortParams,
 }: Partial<React.ComponentProps<typeof WorkflowsList>> = {}) {
+  const user = userEvent.setup();
   render(
     <WorkflowsList
       workflows={workflows}
@@ -143,6 +239,8 @@ function setup({
       hasNextPage={hasNextPage}
       fetchNextPage={jest.fn()}
       isFetchingNextPage={isFetchingNextPage}
+      sortParams={sortParams}
     />
   );
+  return { user };
 }
diff --git a/src/views/shared/workflows-list/config/workflows-list-columns.config.ts b/src/views/shared/workflows-list/config/workflows-list-columns.config.ts
@@ -38,13 +38,15 @@ const workflowsListColumnsConfig: ReadonlyArray<WorkflowsListColumnConfig> = [
     match: (name) => name === 'StartTime',
     name: 'Started',
     width: 'minmax(100px, 200px)',
+    sortable: true,
     renderCell: (row) =>
       createElement(FormattedDate, { timestampMs: row.startTime }),
   },
   {
     match: (name) => name === 'CloseTime',
     name: 'Ended',
     width: 'minmax(100px, 200px)',
+    sortable: true,
     renderCell: (row) =>
       createElement(FormattedDate, { timestampMs: row.closeTime }),
   },
diff --git a/src/views/shared/workflows-list/helpers/get-workflows-list-column-from-search-attribute.ts b/src/views/shared/workflows-list/helpers/get-workflows-list-column-from-search-attribute.ts
@@ -24,6 +24,7 @@ export default function getWorkflowsListColumnFromSearchAttribute(
     name: config?.name ?? attributeName,
     width: config?.width ?? DEFAULT_WORKFLOWS_LIST_COLUMN_WIDTH,
     isSystem,
+    sortable: config?.sortable,
     renderCell: config
       ? (row) => config.renderCell(row, attributeName)
       : (row) => {
diff --git a/src/views/shared/workflows-list/workflows-list.styles.ts b/src/views/shared/workflows-list/workflows-list.styles.ts
@@ -41,6 +41,26 @@ export const styled = {
     paddingRight: $theme.sizing.scale600,
     whiteSpace: 'wrap',
   })),
+  SortableHeaderCell: createStyled('button', ({ $theme }: { $theme: Theme }) => ({
+    ...$theme.typography.LabelSmall,
+    display: 'flex',
+    alignItems: 'center',
+    columnGap: $theme.sizing.scale300,
+    color: $theme.colors.contentSecondary,
+    paddingTop: $theme.sizing.scale400,
+    paddingBottom: $theme.sizing.scale400,
+    paddingLeft: $theme.sizing.scale600,
+    paddingRight: $theme.sizing.scale600,
+    whiteSpace: 'nowrap' as const,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    ':hover': {
+      color: $theme.colors.contentPrimary,
+    },
+  })),
   GridRow: createStyled<'a', { $gridTemplateColumns: string }>(
     'a',
     ({ $theme, $gridTemplateColumns }) => ({
diff --git a/src/views/shared/workflows-list/workflows-list.tsx b/src/views/shared/workflows-list/workflows-list.tsx
@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 
+import ChevronDown from 'baseui/icon/chevron-down';
+import ChevronUp from 'baseui/icon/chevron-up';
 import isNil from 'lodash/isNil';
 import NextLink from 'next/link';
 
 import TableInfiniteScrollLoader from '@/components/table/table-infinite-scroll-loader/table-infinite-scroll-loader';
 
 import { styled } from './workflows-list.styles';
-import { type Props } from './workflows-list.types';
+import { type Props, type WorkflowsListColumn } from './workflows-list.types';
 
 export default function WorkflowsList({
   workflows,
@@ -15,6 +17,7 @@ export default function WorkflowsList({
   hasNextPage,
   fetchNextPage,
   isFetchingNextPage,
+  sortParams,
 }: Props) {
   const gridTemplateColumns = useMemo(
     () => columns.map((col) => col.width).join(' '),
@@ -28,9 +31,39 @@ export default function WorkflowsList({
       <styled.ScrollArea>
         <styled.Container>
           <styled.GridHeader $gridTemplateColumns={gridTemplateColumns}>
-            {columns.map((col) => (
-              <styled.HeaderCell key={col.id}>{col.name}</styled.HeaderCell>
-            ))}
+            {columns.map((col: WorkflowsListColumn) => {
+              if (col.sortable && sortParams) {
+                const isActive = sortParams.sortColumn === col.id;
+
+                let SortIcon = null;
+                if (isActive && sortParams.sortOrder === 'ASC') {
+                  SortIcon = ChevronUp;
+                } else if (isActive && sortParams.sortOrder === 'DESC') {
+                  SortIcon = ChevronDown;
+                }
+
+                return (
+                  <styled.SortableHeaderCell
+                    key={col.id}
+                    onClick={() => sortParams.onSort(col.id)}
+                    aria-label={`${col.name}, ${isActive ? `sorted ${sortParams.sortOrder}` : 'not sorted'}`}
+                  >
+                    {col.name}
+                    {SortIcon && (
+                      <SortIcon
+                        size="16px"
+                        aria-hidden="true"
+                        role="presentation"
+                      />
+                    )}
+                  </styled.SortableHeaderCell>
+                );
+              }
+
+              return (
+                <styled.HeaderCell key={col.id}>{col.name}</styled.HeaderCell>
+              );
+            })}
           </styled.GridHeader>
           {hasWorkflows &&
             workflows.map((workflow, index) => (
diff --git a/src/views/shared/workflows-list/workflows-list.types.ts b/src/views/shared/workflows-list/workflows-list.types.ts
@@ -1,12 +1,14 @@
 import type React from 'react';
 
 import { type IndexedValueType } from '@/__generated__/proto-ts/uber/cadence/api/v1/IndexedValueType';
+import { type SortOrder } from '@/utils/sort-by';
 import { type DomainWorkflow } from '@/views/domain-page/domain-page.types';
 
 export type WorkflowsListColumnConfig = {
   match: (attributeName: string, attributeType: IndexedValueType) => boolean;
   name?: string;
   width?: string;
+  sortable?: boolean;
   renderCell: (row: DomainWorkflow, attributeName: string) => React.ReactNode;
 };
 
@@ -15,14 +17,22 @@ export type WorkflowsListColumn = {
   name: string;
   width: string;
   isSystem: boolean;
+  sortable?: boolean;
   renderCell: (row: DomainWorkflow) => React.ReactNode;
 };
 
+type SortParams = {
+  onSort: (column: string) => void;
+  sortColumn: string;
+  sortOrder: SortOrder;
+};
+
 export type Props = {
   workflows: Array<DomainWorkflow>;
   columns: Array<WorkflowsListColumn>;
   error: Error | null;
   hasNextPage: boolean;
   fetchNextPage: () => void;
   isFetchingNextPage: boolean;
+  sortParams?: SortParams;
 };
