final updates

DaoDaoNoCode · Nov 18, 2024 · 44372f4 · 44372f4
1 parent f531b95
commit 44372f4
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 257 deletions.
diff --git a/...eSelector/CustomPipelineVersionSelect.tsx → ...lector/CustomPipelineRunToolbarSelect.tsx b/...eSelector/CustomPipelineVersionSelect.tsx → ...lector/CustomPipelineRunToolbarSelect.tsx
@@ -16,31 +16,43 @@ import {
 } from '@patternfly/react-core';
 import useDebounceCallback from '~/utilities/useDebounceCallback';
 import PipelineSelectorTableRow from '~/concepts/pipelines/content/pipelineSelector/PipelineSelectorTableRow';
-import { Table } from '~/components/table';
-import { PipelineVersionKF } from '~/concepts/pipelines/kfTypes';
-import { pipelineVersionSelectorColumns } from '~/concepts/pipelines/content/pipelineSelector/columns';
+import { SortableData, Table } from '~/components/table';
+import { ExperimentKF, PipelineVersionKF } from '~/concepts/pipelines/kfTypes';
 import DashboardEmptyTableView from '~/concepts/dashboard/DashboardEmptyTableView';
+import { experimentSelectorColumns } from '~/concepts/pipelines/content/experiment/columns';
+import { pipelineVersionSelectorColumns } from '~/concepts/pipelines/content/pipelineSelector/columns';
 
-type CustomPipelineVersionSelectProps = {
-  versions: PipelineVersionKF[];
+type FilterSelectorProps<T> = {
+  resources: T[];
   selection: string | undefined;
-  onSelect: (version: PipelineVersionKF) => void;
+  onSelect: (resource: T) => void;
 };
 
+type CustomPipelineRunToolbarSelectProps<T> = {
+  resourceName: string;
+  columns: SortableData<T>[];
+  toggleTestId: string;
+  tableTestId: string;
+} & FilterSelectorProps<T>;
+
 /**
- * Select dropdown with custom list of versions, which uses client-side sorting & filtering. This component
- * should mimic the presentation of PipelineVersionSelector for a consistent user experience.
+ * Select dropdown with custom list of experiments/pipeline versions, which uses client-side sorting & filtering. This component
+ * should mimic the presentation of PipelineSelector for a consistent user experience.
  */
-const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> = ({
-  versions,
+const InnerCustomPipelineRunToolbarSelect = <T extends PipelineVersionKF | ExperimentKF>({
+  resources,
   selection,
   onSelect,
-}) => {
+  resourceName,
+  columns,
+  toggleTestId,
+  tableTestId,
+}: CustomPipelineRunToolbarSelectProps<T>): React.ReactNode => {
   const [isOpen, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
-  const [filteredVersions, setFilteredVersions] = React.useState<PipelineVersionKF[]>(versions);
+  const [filteredResources, setFilteredResources] = React.useState<T[]>(resources);
   const [visibleLength, setVisibleLength] = React.useState(10);
-  const placeholder = versions.length === 0 ? 'No versions available' : 'Select...';
+  const placeholder = resources.length === 0 ? `No ${resourceName} available` : 'Select...';
 
   const toggleRef = React.useRef(null);
   const menuRef = React.useRef(null);
@@ -49,36 +61,36 @@ const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> =
 
   React.useEffect(() => {
     if (search) {
-      setFilteredVersions(
-        versions.filter((option) =>
+      setFilteredResources(
+        resources.filter((option) =>
           option.display_name.toLowerCase().includes(search.toLowerCase()),
         ),
       );
     } else {
-      setFilteredVersions(versions);
+      setFilteredResources(resources);
     }
     setVisibleLength(10);
-  }, [search, versions]);
+  }, [search, resources]);
 
   const menu = (
-    <Menu data-id="pipeline-version-selector-menu" ref={menuRef} isScrollable>
+    <Menu ref={menuRef} isScrollable>
       <MenuContent>
         <MenuSearch>
           <MenuSearchInput>
             <SearchInput
               value={search}
-              aria-label="Filter pipeline versions"
+              aria-label={`Filter pipeline ${resourceName}`}
               onChange={(_event, value) => doSetSearchDebounced(value)}
             />
           </MenuSearchInput>
           <HelperText>
-            <HelperTextItem variant="indeterminate">{`Type a name to search your ${versions.length} versions.`}</HelperTextItem>
+            <HelperTextItem variant="indeterminate">{`Type a name to search your ${resources.length} ${resourceName}.`}</HelperTextItem>
           </HelperText>
         </MenuSearch>
         <MenuList>
           <div role="menuitem">
             <Table
-              data-testid="pipeline-version-selector-table-list"
+              data-testid={tableTestId}
               emptyTableView={
                 <DashboardEmptyTableView
                   hasIcon={false}
@@ -88,8 +100,8 @@ const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> =
               }
               borders={false}
               variant="compact"
-              columns={pipelineVersionSelectorColumns}
-              data={filteredVersions}
+              columns={columns}
+              data={filteredResources}
               truncateRenderingAt={visibleLength}
               rowRenderer={(row, index) => (
                 <PipelineSelectorTableRow
@@ -103,7 +115,7 @@ const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> =
               )}
             />
           </div>
-          {visibleLength < filteredVersions.length && (
+          {visibleLength < filteredResources.length && (
             <MenuItem
               isLoadButton
               onClick={(e) => {
@@ -113,7 +125,7 @@ const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> =
             >
               <>
                 View more
-                <Badge isRead>{`Showing ${visibleLength}/${filteredVersions.length}`}</Badge>
+                <Badge isRead>{`Showing ${visibleLength}/${filteredResources.length}`}</Badge>
               </>
             </MenuItem>
           )}
@@ -128,24 +140,42 @@ const CustomPipelineVersionSelect: React.FC<CustomPipelineVersionSelectProps> =
       toggleRef={toggleRef}
       toggle={
         <MenuToggle
-          id="pipeline-version-selector"
           ref={toggleRef}
-          style={{ minWidth: '300px' }}
+          style={{ minWidth: '300px', maxWidth: '500px' }}
           onClick={() => setOpen(!isOpen)}
           isExpanded={isOpen}
-          isDisabled={!versions.length}
+          isDisabled={!filteredResources.length}
           isFullWidth
-          data-testid="pipeline-version-toggle-button"
+          data-testid={toggleTestId}
         >
           {selection || placeholder}
         </MenuToggle>
       }
       menu={menu}
       menuRef={menuRef}
-      popperProps={{ maxWidth: 'trigger' }}
       onOpenChange={(open) => setOpen(open)}
     />
   );
 };
 
-export default CustomPipelineVersionSelect;
+export const ExperimentFilterSelector: React.FC<FilterSelectorProps<ExperimentKF>> = (props) => (
+  <InnerCustomPipelineRunToolbarSelect
+    resourceName="experiments"
+    toggleTestId="experiment-toggle-button"
+    tableTestId="experiment-selector-table-list"
+    columns={experimentSelectorColumns}
+    {...props}
+  />
+);
+
+export const PipelineVersionFilterSelector: React.FC<FilterSelectorProps<PipelineVersionKF>> = (
+  props,
+) => (
+  <InnerCustomPipelineRunToolbarSelect
+    resourceName="versions"
+    toggleTestId="version-toggle-button"
+    tableTestId="version-selector-table-list"
+    columns={pipelineVersionSelectorColumns}
+    {...props}
+  />
+);
diff --git a/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx b/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx
diff --git a/frontend/src/concepts/pipelines/content/tables/__tests__/useSetVersionFilter.spec.tsx b/frontend/src/concepts/pipelines/content/tables/__tests__/useSetVersionFilter.spec.tsx
diff --git a/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx b/.../src/concepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTable.tsx
@@ -10,7 +10,6 @@ import { PipelineRunType } from '~/pages/pipelines/global/runs/types';
 import { PipelinesFilter } from '~/concepts/pipelines/types';
 import usePipelineFilter from '~/concepts/pipelines/content/tables/usePipelineFilter';
 import SimpleMenuActions from '~/components/SimpleMenuActions';
-import { useSetVersionFilter } from '~/concepts/pipelines/content/tables/useSetVersionFilter';
 import { pipelineRecurringRunColumns } from '~/concepts/pipelines/content/tables/columns';
 import PipelineRecurringRunTableRow from './PipelineRecurringRunTableRow';
 import PipelineRecurringRunTableToolbar from './PipelineRecurringRunTableToolbar';
@@ -55,8 +54,6 @@ const PipelineRecurringRunTable: React.FC<PipelineRecurringRunTableProps> = ({
   } = useCheckboxTable(recurringRuns.map(({ recurring_run_id }) => recurring_run_id));
   const [deleteResources, setDeleteResources] = React.useState<PipelineRecurringRunKF[]>([]);
 
-  useSetVersionFilter(filterToolbarProps.onFilterUpdate);
-
   const getColumns = () => {
     let columns = pipelineRecurringRunColumns;
 

diff --git a/...ncepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableToolbar.tsx b/...ncepts/pipelines/content/tables/pipelineRecurringRun/PipelineRecurringRunTableToolbar.tsx
@@ -3,10 +3,14 @@ import { TextInput, ToolbarItem } from '@patternfly/react-core';
 import { useParams } from 'react-router-dom';
 import PipelineFilterBar from '~/concepts/pipelines/content/tables/PipelineFilterBar';
 import { FilterOptions } from '~/concepts/pipelines/content/tables/usePipelineFilter';
-import PipelineVersionSelect from '~/concepts/pipelines/content/pipelineSelector/CustomPipelineVersionSelect';
 import { PipelineRunVersionsContext } from '~/pages/pipelines/global/runs/PipelineRunVersionsContext';
 import CreateScheduleButton from '~/pages/pipelines/global/runs/CreateScheduleButton';
 import { useContextExperimentArchivedOrDeleted as useIsExperimentArchived } from '~/pages/pipelines/global/experiments/ExperimentContext';
+import {
+  ExperimentFilterSelector,
+  PipelineVersionFilterSelector,
+} from '~/concepts/pipelines/content/pipelineSelector/CustomPipelineRunToolbarSelect';
+import { PipelineRunExperimentsContext } from '~/pages/pipelines/global/runs/PipelineRunExperimentsContext';
 
 export type FilterProps = Pick<
   React.ComponentProps<typeof PipelineFilterBar>,
@@ -21,13 +25,16 @@ const PipelineRecurringRunTableToolbar: React.FC<PipelineRecurringRunTableToolba
   dropdownActions,
   ...toolbarProps
 }) => {
+  const { experiments } = React.useContext(PipelineRunExperimentsContext);
   const { versions } = React.useContext(PipelineRunVersionsContext);
   const { isExperimentArchived } = useIsExperimentArchived();
-  const { pipelineVersionId } = useParams();
+  const { pipelineVersionId, experimentId } = useParams();
 
   const options = {
     [FilterOptions.NAME]: 'Schedule',
-    [FilterOptions.PIPELINE_VERSION]: 'Pipeline version',
+    ...(!experimentId && {
+      [FilterOptions.EXPERIMENT]: 'Experiment',
+    }),
     ...(!pipelineVersionId && {
       [FilterOptions.PIPELINE_VERSION]: 'Pipeline version',
     }),
@@ -46,9 +53,16 @@ const PipelineRecurringRunTableToolbar: React.FC<PipelineRecurringRunTableToolba
             onChange={(_event, value) => onChange(value)}
           />
         ),
+        [FilterOptions.EXPERIMENT]: ({ onChange, label }) => (
+          <ExperimentFilterSelector
+            resources={experiments}
+            selection={label}
+            onSelect={(experiment) => onChange(experiment.experiment_id, experiment.display_name)}
+          />
+        ),
         [FilterOptions.PIPELINE_VERSION]: ({ onChange, label }) => (
-          <PipelineVersionSelect
-            versions={versions}
+          <PipelineVersionFilterSelector
+            resources={versions}
             selection={label}
             onSelect={(version) => onChange(version.pipeline_version_id, version.display_name)}
           />

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx
@@ -22,7 +22,6 @@ import usePipelineFilter from '~/concepts/pipelines/content/tables/usePipelineFi
 import SimpleMenuActions from '~/components/SimpleMenuActions';
 import { ArchiveRunModal } from '~/pages/pipelines/global/runs/ArchiveRunModal';
 import { RestoreRunModal } from '~/pages/pipelines/global/runs/RestoreRunModal';
-import { useSetVersionFilter } from '~/concepts/pipelines/content/tables/useSetVersionFilter';
 import { compareRunsRoute, createRunRoute } from '~/routes';
 import { useContextExperimentArchivedOrDeleted } from '~/pages/pipelines/global/experiments/ExperimentContext';
 import { CustomMetricsColumnsModal } from './CustomMetricsColumnsModal';
@@ -175,8 +174,6 @@ const PipelineRunTable: React.FC<PipelineRunTableProps> = ({
     />
   );
 
-  useSetVersionFilter(filterToolbarProps.onFilterUpdate);
-
   const getColumns = () => {
     let columns = experimentId ? getExperimentRunColumns(metricsColumnNames) : pipelineRunColumns;
     if (pipelineVersionId) {