Merge pull request #2888 from jpuzz0/RHOAIENG-7481-metrics-columns-mo…

…dal-selector [RHOAIENG-7481] Add metrics columns to pipeline run table and modal param selector
opendatahub-io · Jun 12, 2024 · c720c3c · c720c3c
2 parents 6b6e9d8 + 71b2631
commit c720c3c
Show file tree

Hide file tree

Showing 22 changed files with 882 additions and 64 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -60,6 +60,7 @@
     "@patternfly/react-charts": "^7.1.1",
     "@patternfly/react-code-editor": "^5.2.1",
     "@patternfly/react-core": "^5.2.1",
+    "@patternfly/react-drag-drop": "^5.3.3",
     "@patternfly/react-icons": "^5.2.1",
     "@patternfly/react-log-viewer": "^5.2.0",
     "@patternfly/react-styles": "^5.2.1",

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/compareRuns.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/compareRuns.ts
@@ -44,7 +44,7 @@ class CompareRunParamsTable {
   }
 
   findEmptyState() {
-    return this.find().parent().findByTestId('compare-runs-params-empty-state');
+    return this.find().parent().parent().findByTestId('compare-runs-params-empty-state');
   }
 
   findColumnByName(name: string) {

diff --git a/frontend/src/components/table/CheckboxTd.tsx b/frontend/src/components/table/CheckboxTd.tsx
@@ -8,14 +8,15 @@ type CheckboxTrProps = {
   onToggle: () => void;
   isDisabled?: boolean;
   tooltip?: string;
-};
+} & React.ComponentProps<typeof Td>;
 
 const CheckboxTd: React.FC<CheckboxTrProps> = ({
   id,
   isChecked,
   onToggle,
   isDisabled,
   tooltip,
+  ...props
 }) => {
   let content = (
     <Checkbox
@@ -31,7 +32,11 @@ const CheckboxTd: React.FC<CheckboxTrProps> = ({
     content = <Tooltip content={tooltip}>{content}</Tooltip>;
   }
 
-  return <Td dataLabel="Checkbox">{content}</Td>;
+  return (
+    <Td dataLabel="Checkbox" {...props}>
+      {content}
+    </Td>
+  );
 };
 
 export default CheckboxTd;
diff --git a/frontend/src/components/table/TableBase.tsx b/frontend/src/components/table/TableBase.tsx
@@ -19,6 +19,7 @@ import {
   Tbody,
   Td,
   TbodyProps,
+  InnerScrollContainer,
 } from '@patternfly/react-table';
 import { EitherNotBoth } from '~/typeHelpers';
 import { GetColumnSort, SortableData } from './types';
@@ -47,6 +48,7 @@ type Props<DataType> = {
   };
   getColumnSort?: GetColumnSort;
   disableItemCount?: boolean;
+  hasStickyColumns?: boolean;
 } & EitherNotBoth<
   { disableRowRenderSupport?: boolean },
   { tbodyProps?: TbodyProps & { ref?: React.Ref<HTMLTableSectionElement> } }
@@ -109,6 +111,7 @@ const TableBase = <T,>({
   loading,
   toggleTemplate,
   disableItemCount = false,
+  hasStickyColumns,
   ...props
 }: Props<T>): React.ReactElement => {
   const selectAllRef = React.useRef(null);
@@ -159,6 +162,8 @@ const TableBase = <T,>({
             ref={selectAllRef}
             colSpan={col.colSpan}
             rowSpan={col.rowSpan}
+            isStickyColumn={col.isStickyColumn}
+            stickyMinWidth={col.stickyMinWidth}
             select={{
               isSelected: selectAll.selected,
               onSelect: (e, value) => selectAll.onSelect(value),
@@ -182,6 +187,8 @@ const TableBase = <T,>({
         info={col.info}
         isSubheader={isSubheader}
         isStickyColumn={col.isStickyColumn}
+        stickyMinWidth={col.stickyMinWidth}
+        stickyLeftOffset={col.stickyLeftOffset}
         hasRightBorder={col.hasRightBorder}
         modifier={col.modifier}
         className={col.className}
@@ -246,6 +253,20 @@ const TableBase = <T,>({
           })
       : data.map((row, rowIndex) => rowRenderer(row, rowIndex));
 
+  const table = (
+    <Table {...props} {...(hasStickyColumns && { gridBreakPoint: '' })} ref={tableRef}>
+      {caption && <Caption>{caption}</Caption>}
+      <Thead noWrap hasNestedHeader={hasNestedHeader}>
+        <Tr>{columns.map((col, i) => renderColumnHeader(col, i))}</Tr>
+        {subColumns?.length ? (
+          <Tr>{subColumns.map((col, i) => renderColumnHeader(col, columns.length + i, true))}</Tr>
+        ) : null}
+      </Thead>
+      {disableRowRenderSupport ? renderRows() : <Tbody {...tbodyProps}>{renderRows()}</Tbody>}
+      {footerRow && footerRow(page)}
+    </Table>
+  );
+
   return (
     <>
       {(toolbarContent || showPagination) && (
@@ -268,17 +289,9 @@ const TableBase = <T,>({
           </ToolbarContent>
         </Toolbar>
       )}
-      <Table {...props} ref={tableRef}>
-        {caption && <Caption>{caption}</Caption>}
-        <Thead noWrap hasNestedHeader={hasNestedHeader}>
-          <Tr>{columns.map((col, i) => renderColumnHeader(col, i))}</Tr>
-          {subColumns?.length ? (
-            <Tr>{subColumns.map((col, i) => renderColumnHeader(col, columns.length + i, true))}</Tr>
-          ) : null}
-        </Thead>
-        {disableRowRenderSupport ? renderRows() : <Tbody {...tbodyProps}>{renderRows()}</Tbody>}
-        {footerRow && footerRow(page)}
-      </Table>
+
+      {hasStickyColumns ? <InnerScrollContainer>{table}</InnerScrollContainer> : table}
+
       {!loading && emptyTableView && data.length === 0 && (
         <div style={{ padding: 'var(--pf-global--spacer--2xl) 0', textAlign: 'center' }}>
           {emptyTableView}

diff --git a/frontend/src/components/table/types.ts b/frontend/src/components/table/types.ts
@@ -4,7 +4,14 @@ export type GetColumnSort = (columnIndex: number) => ThProps['sort'];
 
 export type SortableData<T> = Pick<
   ThProps,
-  'hasRightBorder' | 'isStickyColumn' | 'modifier' | 'width' | 'info' | 'className'
+  | 'hasRightBorder'
+  | 'isStickyColumn'
+  | 'stickyMinWidth'
+  | 'stickyLeftOffset'
+  | 'modifier'
+  | 'width'
+  | 'info'
+  | 'className'
 > & {
   label: string;
   field: string;