From 07e269f69fe2a1fd203cfbc68739cb233813f727 Mon Sep 17 00:00:00 2001 From: Peter Makowski Date: Fri, 10 Mar 2023 16:47:12 +0100 Subject: [PATCH] refactor(machines): remove active row state (#4806) --- src/app/machines/hooks.tsx | 7 ++- src/app/machines/types.ts | 5 +++ .../MachineListTable/MachineListTable.tsx | 44 +++++-------------- .../OwnerColumn/OwnerColumn.tsx | 5 ++- .../PoolColumn/PoolColumn.tsx | 5 ++- .../PowerColumn/PowerColumn.tsx | 5 ++- .../StatusColumn/StatusColumn.tsx | 5 ++- .../ZoneColumn/ZoneColumn.tsx | 5 ++- 8 files changed, 34 insertions(+), 47 deletions(-) diff --git a/src/app/machines/hooks.tsx b/src/app/machines/hooks.tsx index fe3209446c..7388b3d8ed 100644 --- a/src/app/machines/hooks.tsx +++ b/src/app/machines/hooks.tsx @@ -18,12 +18,11 @@ import type { RootState } from "app/store/root/types"; * @returns The toggle callback. */ export const useToggleMenu = ( - onToggleMenu: ((systemId: string, open: boolean) => void) | null, - systemId: string + onToggleMenu: ((open: boolean) => void) | null ): ((open: boolean) => void) => { return useCallback( - (open) => onToggleMenu && onToggleMenu(systemId, open), - [onToggleMenu, systemId] + (open) => onToggleMenu && onToggleMenu(open), + [onToggleMenu] ); }; diff --git a/src/app/machines/types.ts b/src/app/machines/types.ts index bdece9a792..db3430c014 100644 --- a/src/app/machines/types.ts +++ b/src/app/machines/types.ts @@ -40,3 +40,8 @@ export type MachineActionFormProps = Omit< "processingCount" > & MachineActionVariableProps; + +export type MachineMenuToggleHandler = (open: boolean) => void; +export type GetMachineMenuToggleHandler = ( + eventLabel: string +) => MachineMenuToggleHandler; diff --git a/src/app/machines/views/MachineList/MachineListTable/MachineListTable.tsx b/src/app/machines/views/MachineList/MachineListTable/MachineListTable.tsx index fd23f878f5..abde97e094 100644 --- a/src/app/machines/views/MachineList/MachineListTable/MachineListTable.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/MachineListTable.tsx @@ -34,12 +34,9 @@ import TableHeader from "app/base/components/TableHeader"; import { useSendAnalytics } from "app/base/hooks"; import { SortDirection } from "app/base/types"; import { columnLabels, columns, MachineColumns } from "app/machines/constants"; +import type { GetMachineMenuToggleHandler } from "app/machines/types"; import { actions as generalActions } from "app/store/general"; -import type { - Machine, - MachineMeta, - MachineStateListGroup, -} from "app/store/machine/types"; +import type { Machine, MachineStateListGroup } from "app/store/machine/types"; import { FetchGroupKey } from "app/store/machine/types"; import { FilterMachines } from "app/store/machine/utils"; import { actions as resourcePoolActions } from "app/store/resourcepool"; @@ -79,17 +76,12 @@ type Props = { type TableColumn = MainTableCell & { key: string }; -type GetToggleHandler = ( - eventLabel: string -) => (systemId: Machine[MachineMeta.PK], open: boolean) => void; - type GenerateRowParams = { callId?: string | null; - activeRow: Machine[MachineMeta.PK] | null; groupValue: MachineStateListGroup["value"]; hiddenColumns: NonNullable; machines: Machine[]; - getToggleHandler: GetToggleHandler; + getToggleHandler: GetMachineMenuToggleHandler; showActions: Props["showActions"]; showMAC: boolean; showFullName: boolean; @@ -144,7 +136,7 @@ const generateRow = ({ content: RowContent; hiddenColumns: NonNullable; showActions: GenerateRowParams["showActions"]; - classes: string; + classes?: string; }) => { const columns = [ { @@ -308,7 +300,6 @@ const generateSkeletonRows = ( }; const generateRows = ({ callId, - activeRow, groupValue, hiddenColumns, machines, @@ -317,12 +308,10 @@ const generateRows = ({ showMAC, showFullName, }: GenerateRowParams) => { - const getMenuHandler: GetToggleHandler = (...args) => + const getMenuHandler: GetMachineMenuToggleHandler = (...args) => showActions ? getToggleHandler(...args) : () => undefined; return machines.map((row) => { - const isActive = activeRow === row.system_id; - const content = { [MachineColumns.FQDN]: ( ( - null - ); const [showMAC, setShowMAC] = useState(false); const [showFullName, setShowFullName] = useState(false); useEffect(() => { @@ -571,33 +554,28 @@ export const MachineListTable = ({ }, [dispatch]); const toggleHandler = useCallback( - (columnName: string, systemId: Machine[MachineMeta.PK], open: boolean) => { - if (open && !activeRow) { + (columnName: string, open: boolean) => { + if (open) { sendAnalytics( "Machine list", "Inline actions open", `${columnName} column` ); - setActiveRow(systemId); - } else if (!open || (open && activeRow)) { + } else if (!open) { sendAnalytics( "Machine list", "Inline actions close", `${columnName} column` ); - setActiveRow(null); } }, - [activeRow, sendAnalytics] + [sendAnalytics] ); - const getToggleHandler = - (columnName: string) => - (systemId: Machine[MachineMeta.PK], open: boolean) => - toggleHandler(columnName, systemId, open); + const getToggleHandler = (columnName: string) => (open: boolean) => + toggleHandler(columnName, open); const rowProps = { callId, - activeRow, getToggleHandler, showActions, showMAC, diff --git a/src/app/machines/views/MachineList/MachineListTable/OwnerColumn/OwnerColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/OwnerColumn/OwnerColumn.tsx index 781cf90b8e..6420310ed7 100644 --- a/src/app/machines/views/MachineList/MachineListTable/OwnerColumn/OwnerColumn.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/OwnerColumn/OwnerColumn.tsx @@ -7,6 +7,7 @@ import DoubleRow from "app/base/components/DoubleRow"; import { useMachineActions } from "app/base/hooks"; import type { MachineMenuAction } from "app/base/hooks/node"; import { useToggleMenu } from "app/machines/hooks"; +import type { MachineMenuToggleHandler } from "app/machines/types"; import machineSelectors from "app/store/machine/selectors"; import type { Machine, MachineMeta } from "app/store/machine/types"; import type { RootState } from "app/store/root/types"; @@ -16,7 +17,7 @@ import { NodeActions } from "app/store/types/node"; import userSelectors from "app/store/user/selectors"; type Props = { - onToggleMenu?: (systemId: Machine[MachineMeta.PK], open: boolean) => void; + onToggleMenu?: MachineMenuToggleHandler; systemId: Machine[MachineMeta.PK]; showFullName?: boolean; }; @@ -35,7 +36,7 @@ export const OwnerColumn = ({ const machineTags = useSelector((state: RootState) => tagSelectors.getByIDs(state, machine?.tags || null) ); - const toggleMenu = useToggleMenu(onToggleMenu || null, systemId); + const toggleMenu = useToggleMenu(onToggleMenu || null); const user = useSelector((state: RootState) => userSelectors.getByUsername(state, machine?.owner || "") ); diff --git a/src/app/machines/views/MachineList/MachineListTable/PoolColumn/PoolColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/PoolColumn/PoolColumn.tsx index 2417f030c8..f73ab9d8a3 100644 --- a/src/app/machines/views/MachineList/MachineListTable/PoolColumn/PoolColumn.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/PoolColumn/PoolColumn.tsx @@ -7,6 +7,7 @@ import { Link } from "react-router-dom-v5-compat"; import DoubleRow from "app/base/components/DoubleRow"; import urls from "app/base/urls"; import { useToggleMenu } from "app/machines/hooks"; +import type { MachineMenuToggleHandler } from "app/machines/types"; import { actions as machineActions } from "app/store/machine"; import machineSelectors from "app/store/machine/selectors"; import type { Machine, MachineMeta } from "app/store/machine/types"; @@ -19,7 +20,7 @@ import type { RootState } from "app/store/root/types"; import { NodeActions } from "app/store/types/node"; type Props = { - onToggleMenu?: (systemId: Machine[MachineMeta.PK], open: boolean) => void; + onToggleMenu?: MachineMenuToggleHandler; systemId: Machine[MachineMeta.PK]; }; @@ -35,7 +36,7 @@ export const PoolColumn = ({ machineSelectors.getById(state, systemId) ); const resourcePools = useSelector(resourcePoolSelectors.all); - const toggleMenu = useToggleMenu(onToggleMenu || null, systemId); + const toggleMenu = useToggleMenu(onToggleMenu || null); let poolLinks; const machinePools = resourcePools.filter( diff --git a/src/app/machines/views/MachineList/MachineListTable/PowerColumn/PowerColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/PowerColumn/PowerColumn.tsx index 7c15f1bbd9..35eccf86ce 100644 --- a/src/app/machines/views/MachineList/MachineListTable/PowerColumn/PowerColumn.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/PowerColumn/PowerColumn.tsx @@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux"; import DoubleRow from "app/base/components/DoubleRow"; import PowerIcon from "app/base/components/PowerIcon"; import { useToggleMenu } from "app/machines/hooks"; +import type { MachineMenuToggleHandler } from "app/machines/types"; import { actions as machineActions } from "app/store/machine"; import machineSelectors from "app/store/machine/selectors"; import type { Machine } from "app/store/machine/types"; @@ -15,7 +16,7 @@ import { NodeActions } from "app/store/types/node"; import { breakLines } from "app/utils"; type Props = { - onToggleMenu?: (systemId: Machine["system_id"], open: boolean) => void; + onToggleMenu?: MachineMenuToggleHandler; systemId: Machine["system_id"]; }; @@ -28,7 +29,7 @@ export const PowerColumn = ({ const machine = useSelector((state: RootState) => machineSelectors.getById(state, systemId) ); - const toggleMenu = useToggleMenu(onToggleMenu || null, systemId); + const toggleMenu = useToggleMenu(onToggleMenu || null); const powerState = machine?.power_state || PowerState.UNKNOWN; useEffect(() => { diff --git a/src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.tsx index 25cd80dda4..7ab3269447 100644 --- a/src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.tsx @@ -10,6 +10,7 @@ import TooltipButton from "app/base/components/TooltipButton"; import { useMachineActions } from "app/base/hooks"; import type { MachineMenuAction } from "app/base/hooks/node"; import { useToggleMenu } from "app/machines/hooks"; +import type { MachineMenuToggleHandler } from "app/machines/types"; import machineSelectors from "app/store/machine/selectors"; import type { Machine } from "app/store/machine/types"; import { isTransientStatus, useFormattedOS } from "app/store/machine/utils"; @@ -60,7 +61,7 @@ const getStatusIcon = (machine: Machine | null) => { }; type Props = { - onToggleMenu?: (systemId: string, open: boolean) => void; + onToggleMenu?: MachineMenuToggleHandler; systemId: string; }; @@ -114,7 +115,7 @@ export const StatusColumn = ({ machineSelectors.getById(state, systemId) ); const formattedOS = useFormattedOS(machine, true); - const toggleMenu = useToggleMenu(onToggleMenu || null, systemId); + const toggleMenu = useToggleMenu(onToggleMenu || null); const actionLinks = useMachineActions(systemId, actions); const statusText = getStatusText(machine, formattedOS); const seeLogs = React.useMemo( diff --git a/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.tsx b/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.tsx index b7e4821d52..7aa41dec49 100644 --- a/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/ZoneColumn/ZoneColumn.tsx @@ -7,6 +7,7 @@ import { Link } from "react-router-dom-v5-compat"; import DoubleRow from "app/base/components/DoubleRow"; import urls from "app/base/urls"; import { useToggleMenu } from "app/machines/hooks"; +import type { MachineMenuToggleHandler } from "app/machines/types"; import { actions as machineActions } from "app/store/machine"; import machineSelectors from "app/store/machine/selectors"; import type { Machine, MachineMeta } from "app/store/machine/types"; @@ -16,7 +17,7 @@ import zoneSelectors from "app/store/zone/selectors"; import type { Zone, ZoneMeta } from "app/store/zone/types"; type Props = { - onToggleMenu?: (systemId: Machine[MachineMeta.PK], open: boolean) => void; + onToggleMenu?: MachineMenuToggleHandler; systemId: Machine[MachineMeta.PK]; }; @@ -46,7 +47,7 @@ export const ZoneColumn = ({ machineSelectors.getById(state, systemId) ); const zones = useSelector(zoneSelectors.all); - const toggleMenu = useToggleMenu(onToggleMenu || null, systemId); + const toggleMenu = useToggleMenu(onToggleMenu || null); let zoneLinks; const machineZones = zones.filter((zone) => zone.id !== machine?.zone.id); if (machine?.actions.includes(NodeActions.SET_ZONE)) {