update breakages due to PF5 update

opendatahub-io · Nov 22, 2023 · 8510f23 · 8510f23
1 parent 700be31
commit 8510f23
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 41 deletions.
diff --git a/frontend/src/components/table/Table.tsx b/frontend/src/components/table/Table.tsx
@@ -1,28 +1,17 @@
 import * as React from 'react';
-import { ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
-import { TableProps as PFTableProps, TbodyProps, Tr } from '@patternfly/react-table';
+import { TbodyProps } from '@patternfly/react-table';
 import { EitherNotBoth } from '~/typeHelpers';
 import TableBase, { MIN_PAGE_SIZE } from './TableBase';
 import useTableColumnSort from './useTableColumnSort';
-import type { SortableData } from './types';
 
-type TableProps<DataType> = {
-  data: DataType[];
-  columns: SortableData<DataType>[];
-  defaultSortColumn?: number;
-  rowRenderer: (data: DataType, rowIndex: number) => React.ReactNode;
-  enablePagination?: boolean | 'compact';
-  truncateRenderingAt?: number;
-  toolbarContent?: React.ReactElement<typeof ToolbarItem | typeof ToolbarGroup>;
-  emptyTableView?: React.ReactNode;
-  caption?: string;
-  footerRow?: (pageNumber: number) => React.ReactElement<typeof Tr> | null;
-  selectAll?: { onSelect: (value: boolean) => void; selected: boolean };
-} & EitherNotBoth<
-  { disableRowRenderSupport?: boolean },
-  { tbodyProps?: TbodyProps & { ref?: React.Ref<HTMLTableSectionElement> } }
+type TableProps<DataType> = Omit<
+  React.ComponentProps<typeof TableBase<DataType>>,
+  'itemCount' | 'onPerPageSelect' | 'onSetPage' | 'page' | 'perPage'
 > &
-  Omit<PFTableProps, 'ref' | 'data'>;
+  EitherNotBoth<
+    { disableRowRenderSupport?: boolean },
+    { tbodyProps?: TbodyProps & { ref?: React.Ref<HTMLTableSectionElement> } }
+  >;
 
 const Table = <T,>({
   data: allData,

diff --git a/frontend/src/components/table/TableBase.tsx b/frontend/src/components/table/TableBase.tsx
@@ -10,19 +10,19 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tr,
   Th,
-  TableComposableProps,
+  TableProps,
   Caption,
   Tbody,
   Td,
   TbodyProps,
 } from '@patternfly/react-table';
-import { GetColumnSort, SortableData } from '~/components/table/useTableColumnSort';
-import { CHECKBOX_FIELD_ID, EXPAND_FIELD_ID, KEBAB_FIELD_ID } from '~/components/table/const';
 import { EitherNotBoth } from '~/typeHelpers';
+import { GetColumnSort, SortableData } from './types';
+import { CHECKBOX_FIELD_ID, EXPAND_FIELD_ID, KEBAB_FIELD_ID } from './const';
 
 type Props<DataType> = {
   loading?: boolean;
@@ -42,7 +42,7 @@ type Props<DataType> = {
   { disableRowRenderSupport?: boolean },
   { tbodyProps?: TbodyProps & { ref?: React.Ref<HTMLTableSectionElement> } }
 > &
-  Omit<TableComposableProps, 'ref' | 'data'> &
+  Omit<TableProps, 'ref' | 'data'> &
   Pick<PaginationProps, 'itemCount' | 'onPerPageSelect' | 'onSetPage' | 'page' | 'perPage'>;
 
 export const MIN_PAGE_SIZE = 10;
@@ -87,7 +87,6 @@ const TableBase = <T,>({
   const pagination = (variant: 'top' | 'bottom') => (
     <Pagination
       isCompact={enablePagination === 'compact'}
-      perPageComponent="button"
       itemCount={itemCount}
       perPage={perPage}
       page={page}
@@ -162,14 +161,14 @@ const TableBase = <T,>({
           <ToolbarContent>
             {toolbarContent}
             {showPagination && (
-              <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+              <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
                 {pagination('top')}
               </ToolbarItem>
             )}
           </ToolbarContent>
         </Toolbar>
       )}
-      <TableComposable {...props} ref={tableRef}>
+      <Table {...props} ref={tableRef}>
         {caption && <Caption>{caption}</Caption>}
         <Thead noWrap>
           <Tr>
@@ -207,7 +206,7 @@ const TableBase = <T,>({
         </Thead>
         {disableRowRenderSupport ? renderRows() : <Tbody {...tbodyProps}>{renderRows()}</Tbody>}
         {footerRow && footerRow(page)}
-      </TableComposable>
+      </Table>
       {!loading && emptyTableView && data.length === 0 && (
         <div style={{ padding: 'var(--pf-global--spacer--2xl) 0', textAlign: 'center' }}>
           {emptyTableView}
@@ -216,7 +215,7 @@ const TableBase = <T,>({
       {showPagination && (
         <Toolbar>
           <ToolbarContent>
-            <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+            <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
               {pagination('bottom')}
             </ToolbarItem>
           </ToolbarContent>

diff --git a/frontend/src/concepts/pipelines/content/DeletePipelineCoreResourceModal.tsx b/frontend/src/concepts/pipelines/content/DeletePipelineCoreResourceModal.tsx
@@ -66,9 +66,7 @@ const DeletePipelineCoreResourceModal: React.FC<DeletePipelineCoreResourceModalP
     setDeleteStatus([]);
     abortControllerRef.current = new AbortController();
   };
-  const onToggle = (isExpanded: boolean) => {
-    setIsExpanded(isExpanded);
-  };
+
   return (
     <DeleteModal
       title={`Delete ${resourceCount > 1 ? resourceCount : ''} ${type}${
@@ -154,7 +152,7 @@ const DeletePipelineCoreResourceModal: React.FC<DeletePipelineCoreResourceModalP
                   {resourceCount > 0 && <Badge isRead={true}>{resourceCount}</Badge>}
                 </>
               }
-              onToggle={onToggle}
+              onToggle={(e, expanded) => setIsExpanded(expanded)}
               isExpanded={isExpanded}
             >
               <List isPlain className="pf-u-pl-lg">

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -11,12 +11,14 @@ import {
   Split,
   SplitItem,
   Bullseye,
+  Truncate,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   DropdownToggle,
   KebabToggle,
-  Truncate,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import OutlinedPlayCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
@@ -177,7 +179,6 @@ const LogsTabForPodName: React.FC<{ podName: string }> = ({ podName }) => {
             ) : null}
             {podContainers.length !== 0 ? (
               <Dropdown
-                removeFindDomNode
                 toggle={
                   isSmallScreen() ? (
                     <KebabToggle

diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
@@ -72,7 +72,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
 
   if (error) {
     return (
-      <EmptyState variant={EmptyStateVariant.large} data-id="error-empty-state">
+      <EmptyState variant={EmptyStateVariant.lg} data-id="error-empty-state">
         <EmptyStateIcon icon={ExclamationCircleIcon} />
         <Title headingLevel="h4" size="lg">
           Error loading pipeline scheduled run details

diff --git a/...ncepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx b/...ncepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetailsActions.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { Dropdown, DropdownItem, DropdownSeparator, DropdownToggle } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownToggle,
+} from '@patternfly/react-core/deprecated';
 import { useNavigate } from 'react-router-dom';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineRunJobKF } from '~/concepts/pipelines/kfTypes';

diff --git a/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx b/frontend/src/concepts/pipelines/content/tables/ExperimentSearchInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { SearchIcon } from '@patternfly/react-icons';
 import { PipelinesFilter } from '~/concepts/pipelines/types';
 import useDebounceCallback from '~/utilities/useDebounceCallback';
@@ -53,7 +53,7 @@ const PipelineSearchInput: React.FC<Props> = ({ selected, onChange }) => {
       variant={SelectVariant.typeahead}
       onFilter={() => children}
       onTypeaheadInputChanged={setFilterText}
-      onToggle={setOpen}
+      onToggle={(e, open) => setOpen(open)}
       selections={hasSelection ? selected?.value : undefined}
       onSelect={(_, value) => {
         if (typeof value === 'string') {

diff --git a/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx b/frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar.tsx
@@ -64,7 +64,7 @@ const PipelineRunTableToolbar: React.FC<PipelineRunJobTableToolbarProps> = ({
             }}
           />
         ),
-        [FilterOptions.STATUS]: ({ value, ...props }) => (
+        [FilterOptions.STATUS]: ({ value, onChange, ...props }) => (
           <SimpleDropdownSelect
             {...props}
             value={value ?? ''}
@@ -73,6 +73,9 @@ const PipelineRunTableToolbar: React.FC<PipelineRunJobTableToolbarProps> = ({
               key: value,
               label: value,
             }))}
+            onChange={(value) => {
+              onChange(value);
+            }}
           />
         ),
       }}