Merge pull request opendatahub-io#1784 from DaoDaoNoCode/upstream-iss…

…ue-1252

Limit the use of `useTableColumnSort` hook

frontend/.eslintrc

@@ -63,6 +63,14 @@
           {
             "group": ["~/api/**"],
             "message": "Read from '~/api' instead."
+          },
+          {
+            "group": ["~/components/table/**", "!~/components/table/useTableColumnSort"],
+            "message": "Read from '~/components/table' instead."
+          },
+          {
+            "group": ["~/components/table/useTableColumnSort"],
+            "message": "The data will be sorted in the table, don't use this hook outside of '~/components/table' repo. For more information, please check the props of the Table component."
           }
         ]
       }

frontend/src/components/table/Table.tsx

@@ -17,9 +17,10 @@ import {
   Td,
   TbodyProps,
 } from '@patternfly/react-table';
-import useTableColumnSort, { SortableData } from '~/components/table/useTableColumnSort';
-import { CHECKBOX_FIELD_ID } from '~/components/table/const';
 import { EitherNotBoth } from '~/typeHelpers';
+import useTableColumnSort from './useTableColumnSort';
+import { CHECKBOX_FIELD_ID } from './const';
+import { SortableData } from './types';
 
 type TableProps<DataType> = {
   data: DataType[];

frontend/src/components/table/const.ts

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from './types';
 
 export const CHECKBOX_FIELD_ID = 'checkbox';
 export const KEBAB_FIELD_ID = 'kebab';

frontend/src/components/table/index.ts

@@ -0,0 +1,8 @@
+export * from './types';
+export * from './const';
+
+export { default as Table } from './Table';
+export { default as useCheckboxTable } from './useCheckboxTable';
+
+export { default as TableRowTitleDescription } from './TableRowTitleDescription';
+export { default as CheckboxTd } from './CheckboxTd';

frontend/src/components/table/types.ts

@@ -0,0 +1,17 @@
+import { ThProps } from '@patternfly/react-table';
+
+export type GetColumnSort = (columnIndex: number) => ThProps['sort'];
+
+export type SortableData<T> = {
+  label: string;
+  field: string;
+  width?: ThProps['width'];
+  /**
+   * Set to false to disable sort.
+   * Set to true to handle string and number fields automatically (everything else is equal).
+   * Pass a function that will get the two results and what field needs to be matched.
+   * Assume ASC -- the result will be inverted internally if needed.
+   */
+  sortable: boolean | ((a: T, b: T, keyField: string) => number);
+  info?: ThProps['info'];
+};

frontend/src/components/table/useCheckboxTable.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { xor } from 'lodash';
-import Table from '~/components/table/Table';
 import { useDeepCompareMemoize } from '~/utilities/useDeepCompareMemoize';
+import type Table from './Table';
 
 type UseCheckboxTable = {
   selections: string[];

frontend/src/components/table/useTableColumnSort.ts

@@ -1,21 +1,6 @@
 import * as React from 'react';
 import { ThProps } from '@patternfly/react-table';
-
-export type GetColumnSort = (columnIndex: number) => ThProps['sort'];
-
-export type SortableData<T> = {
-  label: string;
-  field: string;
-  width?: ThProps['width'];
-  /**
-   * Set to false to disable sort.
-   * Set to true to handle string and number fields automatically (everything else is equal).
-   * Pass a function that will get the two results and what field needs to be matched.
-   * Assume ASC -- the result will be inverted internally if needed.
-   */
-  sortable: boolean | ((a: T, b: T, keyField: string) => number);
-  info?: ThProps['info'];
-};
+import { GetColumnSort, SortableData } from './types';
 
 /**
  * Using PF Composable Tables, this utility will help with handling sort logic.

frontend/src/concepts/pipelines/content/tables/columns.ts

@@ -1,4 +1,9 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import {
+  SortableData,
+  checkboxTableColumn,
+  expandTableColumn,
+  kebabTableColumn,
+} from '~/components/table';
 import {
   PipelineKF,
   PipelineRunJobKF,
@@ -12,7 +17,6 @@ import {
   getScheduledStateWeight,
   getStatusWeight,
 } from '~/concepts/pipelines/content/tables/utils';
-import { checkboxTableColumn, expandTableColumn, kebabTableColumn } from '~/components/table/const';
 
 export const pipelineColumns: SortableData<PipelineKF>[] = [
   expandTableColumn(),

frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTable.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TableVariant } from '@patternfly/react-table';
 import { PipelineKF } from '~/concepts/pipelines/kfTypes';
-import Table from '~/components/table/Table';
+import { Table } from '~/components/table';
 import PipelinesTableRow from '~/concepts/pipelines/content/tables/pipeline/PipelinesTableRow';
 import { FetchStateRefreshPromise } from '~/utilities/useFetchState';
 import { pipelineColumns } from '~/concepts/pipelines/content/tables/columns';

frontend/src/concepts/pipelines/content/tables/pipeline/PipelinesTableRow.tsx

@@ -6,7 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { PipelineKF } from '~/concepts/pipelines/kfTypes';
 import { relativeTime } from '~/utilities/time';
 import usePipelineRunsForPipeline from '~/concepts/pipelines/apiHooks/usePipelineRunsForPipeline';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription } from '~/components/table';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import PipelinesTableExpandedRow from '~/concepts/pipelines/content/tables/pipeline/PipelinesTableExpandedRow';
 import { getLastRun } from '~/concepts/pipelines/content/tables/utils';

frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTable.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { TableVariant } from '@patternfly/react-table';
-import Table from '~/components/table/Table';
 import { PipelineCoreResourceKF, PipelineRunKF } from '~/concepts/pipelines/kfTypes';
 import { pipelineRunColumns } from '~/concepts/pipelines/content/tables/columns';
 import PipelineRunTableRow from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow';
-import useCheckboxTable from '~/components/table/useCheckboxTable';
+import { useCheckboxTable, Table } from '~/components/table';
 import EmptyTableView from '~/concepts/pipelines/content/tables/EmptyTableView';
 import usePipelineRunFilter from '~/concepts/pipelines/content/tables/pipelineRun/usePipelineRunFilter';
 import PipelineRunTableToolbar from '~/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableToolbar';

frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx

@@ -3,7 +3,7 @@ import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import { Link, useNavigate } from 'react-router-dom';
 import { Skeleton } from '@patternfly/react-core';
 import { PipelineRunKF, PipelineRunStatusesKF } from '~/concepts/pipelines/kfTypes';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription, CheckboxTd } from '~/components/table';
 import {
   RunCreated,
   RunDuration,
@@ -12,7 +12,6 @@ import {
   RunStatus,
 } from '~/concepts/pipelines/content/tables/renderUtils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import CheckboxTd from '~/components/table/CheckboxTd';
 import { GetJobInformation } from '~/concepts/pipelines/content/tables/pipelineRun/useJobRelatedInformation';
 import useNotification from '~/utilities/useNotification';
 

frontend/src/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTable.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { TableVariant } from '@patternfly/react-table';
-import Table from '~/components/table/Table';
 import { PipelineCoreResourceKF, PipelineRunJobKF } from '~/concepts/pipelines/kfTypes';
 import { pipelineRunJobColumns } from '~/concepts/pipelines/content/tables/columns';
-import useCheckboxTable from '~/components/table/useCheckboxTable';
+import { useCheckboxTable, Table } from '~/components/table';
 import PipelineRunJobTableRow from '~/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTableRow';
 import PipelineRunJobTableToolbar from '~/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTableToolbar';
 import usePipelineRunJobFilter from '~/concepts/pipelines/content/tables/pipelineRunJob/usePipelineRunJobFilter';

frontend/src/concepts/pipelines/content/tables/pipelineRunJob/PipelineRunJobTableRow.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import { useNavigate } from 'react-router-dom';
 import { PipelineRunJobKF } from '~/concepts/pipelines/kfTypes';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription, CheckboxTd } from '~/components/table';
 import {
   RunJobScheduled,
   RunJobStatus,
@@ -11,7 +11,6 @@ import {
   CoreResourcePipeline,
 } from '~/concepts/pipelines/content/tables/renderUtils';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import CheckboxTd from '~/components/table/CheckboxTd';
 
 type PipelineRunJobTableRowProps = {
   isChecked: boolean;

frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeListView.tsx

@@ -4,7 +4,7 @@ import { Button, ToolbarItem } from '@patternfly/react-core';
 import { TemplateKind } from '~/k8sTypes';
 import { useDashboardNamespace } from '~/redux/selectors';
 import useNotification from '~/utilities/useNotification';
-import Table from '~/components/table/Table';
+import { Table } from '~/components/table';
 import useDraggableTable from '~/utilities/useDraggableTable';
 import { patchDashboardConfigTemplateOrderBackend } from '~/services/dashboardService';
 import { getServingRuntimeNameFromTemplate, getSortedTemplates } from './utils';

frontend/src/pages/modelServing/customServingRuntimes/templatedData.tsx

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { TemplateKind } from '~/k8sTypes';
 
 export const columns: SortableData<TemplateKind>[] = [

frontend/src/pages/modelServing/screens/global/InferenceServiceTable.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
 import ManageInferenceServiceModal from '~/pages/modelServing/screens/projects/InferenceServiceModal/ManageInferenceServiceModal';
-import Table from '~/components/table/Table';
-
+import { Table } from '~/components/table';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import InferenceServiceTableRow from './InferenceServiceTableRow';

frontend/src/pages/modelServing/screens/global/data.ts

@@ -1,5 +1,5 @@
 import { InferenceServiceKind, ProjectKind, SecretKind } from '~/k8sTypes';
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { getProjectDisplayName } from '~/pages/projects/utils';
 import { getInferenceServiceDisplayName, getTokenDisplayName } from './utils';
 

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Table from '~/components/table/Table';
+import { Table } from '~/components/table';
 import { AccessReviewResourceAttributes, ServingRuntimeKind } from '~/k8sTypes';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { useAccessReview } from '~/api';

frontend/src/pages/modelServing/screens/projects/ServingRuntimeTokensTable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import Table from '~/components/table/Table';
+import { Table } from '~/components/table';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { tokenColumns } from '~/pages/modelServing/screens/global/data';
 import { ServingRuntimeKind } from '~/k8sTypes';

frontend/src/pages/modelServing/screens/projects/data.ts

@@ -1,5 +1,5 @@
 import { ServingRuntimeKind } from '~/k8sTypes';
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 
 export const columns: SortableData<ServingRuntimeKind>[] = [
   {

frontend/src/pages/notebookController/screens/admin/NotebookAdminControl.tsx

@@ -1,27 +1,21 @@
 import * as React from 'react';
 import { Alert, Stack, StackItem, Title } from '@patternfly/react-core';
 import { Td, Tr } from '@patternfly/react-table';
-import Table from '~/components/table/Table';
-
-import useTableColumnSort from '~/components/table/useTableColumnSort';
+import { Table } from '~/components/table';
 import ExternalLink from '~/components/ExternalLink';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import StopServerModal from '~/pages/notebookController/screens/server/StopServerModal';
 import { Notebook } from '~/types';
-import { columns } from './const';
+import { columns } from './data';
 import StopAllServersButton from './StopAllServersButton';
 import UserTableCellTransform from './UserTableCellTransform';
 import useAdminUsers from './useAdminUsers';
-import { AdminViewUserData } from './types';
 import { NotebookAdminContext } from './NotebookAdminContext';
 
 const NotebookAdminControl: React.FC = () => {
-  const [unsortedUsers, loaded, loadError] = useAdminUsers();
-  const { transformData } = useTableColumnSort<AdminViewUserData>(columns, 0);
+  const [users, loaded, loadError] = useAdminUsers();
   const { serverStatuses, setServerStatuses } = React.useContext(NotebookAdminContext);
 
-  const users = transformData(unsortedUsers);
-
   const onNotebooksStop = React.useCallback(
     (didStop: boolean) => {
       if (didStop) {

frontend/src/pages/notebookController/screens/admin/const.ts → frontend/src/pages/notebookController/screens/admin/data.ts

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { AdminViewUserData } from './types';
 
 export const columns: SortableData<AdminViewUserData>[] = [

frontend/src/pages/projects/projectSharing/ProjectSharingTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Table from '~/components/table/Table';
+import { Table } from '~/components/table';
 import { RoleBindingKind } from '~/k8sTypes';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
 import { deleteRoleBinding, generateRoleBindingProjectSharing, createRoleBinding } from '~/api';

frontend/src/pages/projects/projectSharing/data.ts

@@ -1,5 +1,5 @@
 import { RoleBindingKind } from '~/k8sTypes';
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { firstSubject } from './utils';
 
 export const columnsProjectSharing: SortableData<RoleBindingKind>[] = [

frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTable.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import Table from '~/components/table/Table';
-
+import { Table } from '~/components/table';
 import { DataConnection } from '~/pages/projects/types';
 import { columns } from './data';
 import DataConnectionsTableRow from './DataConnectionsTableRow';

frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTableRow.tsx

@@ -5,7 +5,7 @@ import ConnectedNotebookNames from '~/pages/projects/notebook/ConnectedNotebookN
 import { ConnectedNotebookContext } from '~/pages/projects/notebook/useRelatedNotebooks';
 import { DataConnection } from '~/pages/projects/types';
 import EmptyTableCellForAlignment from '~/pages/projects/components/EmptyTableCellForAlignment';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription } from '~/components/table';
 import {
   getDataConnectionDescription,
   getDataConnectionDisplayName,

frontend/src/pages/projects/screens/detail/data-connections/data.ts

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { DataConnection } from '~/pages/projects/types';
 import { getDataConnectionDisplayName } from './utils';
 

frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import Table from '~/components/table/Table';
-
+import { Table } from '~/components/table';
 import { NotebookKind } from '~/k8sTypes';
 import DeleteNotebookModal from '~/pages/projects/notebook/DeleteNotebookModal';
 import AddNotebookStorage from '~/pages/projects/pvc/AddNotebookStorage';

frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx

@@ -10,7 +10,7 @@ import NotebookStatusToggle from '~/pages/projects/notebook/NotebookStatusToggle
 import { NotebookKind } from '~/k8sTypes';
 import NotebookImagePackageDetails from '~/pages/projects/notebook/NotebookImagePackageDetails';
 import { ProjectDetailsContext } from '~/pages/projects/ProjectDetailsContext';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription } from '~/components/table';
 import useNotebookDeploymentSize from './useNotebookDeploymentSize';
 import useNotebookImage from './useNotebookImage';
 import NotebookSizeDetails from './NotebookSizeDetails';

frontend/src/pages/projects/screens/detail/notebooks/data.ts

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { getNotebookDisplayName, getNotebookStatusPriority } from '~/pages/projects/utils';
 import { NotebookState } from '~/pages/projects/notebook/types';
 

frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import Table from '~/components/table/Table';
-
+import { Table } from '~/components/table';
 import { PersistentVolumeClaimKind } from '~/k8sTypes';
 import DeletePVCModal from '~/pages/projects/pvc/DeletePVCModal';
 import StorageTableRow from './StorageTableRow';

frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx

@@ -14,7 +14,7 @@ import { PersistentVolumeClaimKind } from '~/k8sTypes';
 import StorageSizeBar from '~/pages/projects/components/StorageSizeBars';
 import ConnectedNotebookNames from '~/pages/projects/notebook/ConnectedNotebookNames';
 import { ConnectedNotebookContext } from '~/pages/projects/notebook/useRelatedNotebooks';
-import TableRowTitleDescription from '~/components/table/TableRowTitleDescription';
+import { TableRowTitleDescription } from '~/components/table';
 import useIsRootVolume from './useIsRootVolume';
 import StorageWarningStatus from './StorageWarningStatus';
 

frontend/src/pages/projects/screens/detail/storage/data.ts

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { getPvcDisplayName } from '~/pages/projects/utils';
 import { PersistentVolumeClaimKind } from '~/k8sTypes';
 

frontend/src/pages/projects/screens/projects/ProjectListView.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonVariant, ToolbarItem } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
-import Table from '~/components/table/Table';
-import useTableColumnSort from '~/components/table/useTableColumnSort';
+import { Table } from '~/components/table';
 import SearchField, { SearchType } from '~/pages/projects/components/SearchField';
 import { ProjectKind } from '~/k8sTypes';
 import { getProjectDisplayName, getProjectOwner } from '~/pages/projects/utils';
@@ -25,8 +24,7 @@ const ProjectListView: React.FC<ProjectListViewProps> = ({ allowCreate }) => {
   const navigate = useNavigate();
   const [searchType, setSearchType] = React.useState<SearchType>(SearchType.NAME);
   const [search, setSearch] = React.useState('');
-  const sort = useTableColumnSort<ProjectKind>(columns, 0);
-  const filteredProjects = sort.transformData(unfilteredProjects).filter((project) => {
+  const filteredProjects = unfilteredProjects.filter((project) => {
     if (!search) {
       return true;
     }

frontend/src/pages/projects/screens/projects/tableData.tsx

@@ -1,4 +1,4 @@
-import { SortableData } from '~/components/table/useTableColumnSort';
+import { SortableData } from '~/components/table';
 import { ProjectKind } from '~/k8sTypes';
 import { getProjectCreationTime, getProjectDisplayName } from '~/pages/projects/utils';