refactor(machines): remove active row state (#4806)

canonical · Mar 10, 2023 · 07e269f · 07e269f
1 parent 024daec
commit 07e269f
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 47 deletions.
diff --git 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
@@ -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
@@ -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<Props["hiddenColumns"]>;
   machines: Machine[];
-  getToggleHandler: GetToggleHandler;
+  getToggleHandler: GetMachineMenuToggleHandler;
   showActions: Props["showActions"];
   showMAC: boolean;
   showFullName: boolean;
@@ -144,7 +136,7 @@ const generateRow = ({
   content: RowContent;
   hiddenColumns: NonNullable<Props["hiddenColumns"]>;
   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]: (
         <NameColumn
@@ -392,9 +381,6 @@ const generateRows = ({
       content,
       hiddenColumns,
       showActions,
-      classes: classNames({
-        "machine-list__machine--active": isActive,
-      }),
     });
   });
 };
@@ -551,9 +537,6 @@ export const MachineListTable = ({
       setSortDirection(SortDirection.DESCENDING);
     }
   };
-  const [activeRow, setActiveRow] = useState<Machine[MachineMeta.PK] | null>(
-    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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)) {