From 884b4b7b9c48f734047e810d2814da2e6a3f1207 Mon Sep 17 00:00:00 2001 From: farodin91 Date: Fri, 22 Nov 2024 10:08:34 +0100 Subject: [PATCH] frontend: refactor row action menus Signed-off-by: farodin91 --- .../components/common/Resource/EditButton.tsx | 2 +- .../common/Resource/ResourceTable.tsx | 58 +++---------------- .../Resource/ResourceTableSingleActions.tsx | 58 +++++++++++++++++++ frontend/src/redux/actionButtonsSlice.ts | 6 -- 4 files changed, 66 insertions(+), 58 deletions(-) create mode 100644 frontend/src/components/common/Resource/ResourceTableSingleActions.tsx diff --git a/frontend/src/components/common/Resource/EditButton.tsx b/frontend/src/components/common/Resource/EditButton.tsx index 0e9cfc15ba..a11b3a8f77 100644 --- a/frontend/src/components/common/Resource/EditButton.tsx +++ b/frontend/src/components/common/Resource/EditButton.tsx @@ -87,7 +87,7 @@ export default function EditButton(props: EditButtonProps) { } if (isReadOnly) { - return ; + return ; } return ( diff --git a/frontend/src/components/common/Resource/ResourceTable.tsx b/frontend/src/components/common/Resource/ResourceTable.tsx index cf532bf2b1..a3e212b428 100644 --- a/frontend/src/components/common/Resource/ResourceTable.tsx +++ b/frontend/src/components/common/Resource/ResourceTable.tsx @@ -1,4 +1,4 @@ -import { MenuItem, TableCellProps } from '@mui/material'; +import { TableCellProps } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { MRT_FilterFns, MRT_Row, MRT_SortingFn } from 'material-react-table'; import { ComponentProps, ReactNode, useEffect, useMemo, useRef, useState } from 'react'; @@ -9,8 +9,8 @@ import { ApiError } from '../../../lib/k8s/apiProxy'; import { KubeObject } from '../../../lib/k8s/KubeObject'; import { KubeObjectClass } from '../../../lib/k8s/KubeObject'; import { useFilterFunc } from '../../../lib/util'; -import { DefaultHeaderAction, RowAction } from '../../../redux/actionButtonsSlice'; import { useNamespaces } from '../../../redux/filterSlice'; +import { HeaderAction } from '../../../redux/actionButtonsSlice'; import { HeadlampEventType, useEventCallback } from '../../../redux/headlampEventSlice'; import { useTypedSelector } from '../../../redux/reducers/reducers'; import { useSettings } from '../../App/Settings/hook'; @@ -18,11 +18,7 @@ import { ClusterGroupErrorMessage } from '../../cluster/ClusterGroupErrorMessage import { DateLabel } from '../Label'; import Link from '../Link'; import Table, { TableColumn } from '../Table'; -import DeleteButton from './DeleteButton'; -import EditButton from './EditButton'; -import { RestartButton } from './RestartButton'; -import ScaleButton from './ScaleButton'; -import ViewButton from './ViewButton'; +import generateRowActionsMenu from './ResourceTableSingleActions'; export type ResourceTableColumn = { /** Unique id for the column, not required but recommended */ @@ -84,7 +80,7 @@ export interface ResourceTableProps { columns: (ResourceTableColumn | ColumnType)[]; /** Show or hide row actions @default false*/ enableRowActions?: boolean; - actions?: null | RowAction[]; + actions?: null | HeaderAction[]; /** Provide a list of columns that won't be shown and cannot be turned on */ hideColumns?: string[] | null; /** ID for the table. Will be used by plugins to identify this table. @@ -412,52 +408,12 @@ function ResourceTableContent(props: ResourceTablePr tableSettings, ]); - const defaultActions: RowAction[] = [ - { - id: DefaultHeaderAction.RESTART, - action: ({ item }) => , - }, - { - id: DefaultHeaderAction.SCALE, - action: ({ item }) => , - }, - { - id: DefaultHeaderAction.EDIT, - action: ({ item, closeMenu }) => ( - - ), - }, - { - id: DefaultHeaderAction.VIEW, - action: ({ item }) => , - }, - { - id: DefaultHeaderAction.DELETE, - action: ({ item, closeMenu }) => ( - - ), - }, - ]; - let hAccs: RowAction[] = []; - if (actions !== undefined && actions !== null) { - hAccs = actions; - } - - const actionsProcessed: RowAction[] = [...hAccs, ...defaultActions]; - const renderRowActionMenuItems = useMemo(() => { - if (actionsProcessed.length === 0) { + if (!enableRowActions) { return null; } - return ({ closeMenu, row }: { closeMenu: () => void; row: MRT_Row> }) => { - return actionsProcessed.map(action => { - if (action.action === undefined || action.action === null) { - return ; - } - return action.action({ item: row.original, closeMenu }); - }); - }; - }, [actionsProcessed]); + return generateRowActionsMenu(actions); + }, [actions, enableRowActions]); function onColumnsVisibilityChange(updater: any): void { setColumnVisibility(oldCols => { diff --git a/frontend/src/components/common/Resource/ResourceTableSingleActions.tsx b/frontend/src/components/common/Resource/ResourceTableSingleActions.tsx new file mode 100644 index 0000000000..a1c37a7740 --- /dev/null +++ b/frontend/src/components/common/Resource/ResourceTableSingleActions.tsx @@ -0,0 +1,58 @@ +import { MenuItem } from '@mui/material'; +import { MRT_Row } from 'material-react-table'; +import { DefaultHeaderAction, HeaderAction } from '../../../redux/actionButtonsSlice'; +import { ButtonStyle } from '../ActionButton/ActionButton'; +import DeleteButton from './DeleteButton'; +import EditButton from './EditButton'; +import { RestartButton } from './RestartButton'; +import ScaleButton from './ScaleButton'; + +export function generateActions(actions: HeaderAction[], buttonStyle: ButtonStyle): HeaderAction[] { + const defaultActions: HeaderAction[] = [ + { + id: DefaultHeaderAction.RESTART, + action: ({ item }) => , + }, + { + id: DefaultHeaderAction.SCALE, + action: ({ item }) => , + }, + { + id: DefaultHeaderAction.EDIT, + action: ({ item, closeMenu }) => ( + + ), + }, + { + id: DefaultHeaderAction.DELETE, + action: ({ item, closeMenu }) => ( + + ), + }, + ]; + let hAccs: HeaderAction[] = []; + if (actions !== undefined && actions !== null) { + hAccs = actions; + } + + const actionsProcessed: HeaderAction[] = [...hAccs, ...defaultActions]; + return actionsProcessed; +} + +export default function generateRowActionsMenu(actions: HeaderAction[] | null | undefined) { + const actionsProcessed = generateActions(actions || [], 'menu'); + if (actionsProcessed.length === 0) { + return null; + } + return ({ closeMenu, row }: { closeMenu: () => void; row: MRT_Row> }) => { + return actionsProcessed.map(action => { + if (action.action === undefined || action.action === null) { + return ; + } + if (typeof action.action === 'function') { + return action.action({ item: row.original, closeMenu }); + } + return action.action; + }); + }; +} diff --git a/frontend/src/redux/actionButtonsSlice.ts b/frontend/src/redux/actionButtonsSlice.ts index cf96080970..5c99b664dd 100644 --- a/frontend/src/redux/actionButtonsSlice.ts +++ b/frontend/src/redux/actionButtonsSlice.ts @@ -7,18 +7,12 @@ export type HeaderActionType = ((...args: any[]) => ReactNode) | null | ReactEle export type DetailsViewFunc = HeaderActionType; export type AppBarActionType = ((...args: any[]) => ReactNode) | null | ReactElement | ReactNode; -export type RowActionType = ((item: any) => JSX.Element | null | ReactNode) | null; export type HeaderAction = { id: string; action?: HeaderActionType; }; -export type RowAction = { - id: string; - action?: RowActionType; -}; - export type AppBarAction = { id: string; action?: AppBarActionType;