fix(striker-ui): add (un)check all to checklist hook, apply to manage SSH key conflicts

striker-ui/components/List.tsx

@@ -13,15 +13,7 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import {
+import { FC, forwardRef, useCallback, useMemo } from 'react';
-  FC,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { BLUE, BORDER_RADIUS, GREY, RED } from '../lib/consts/DEFAULT_THEME';
@@ -33,18 +25,17 @@ import IconButton from './IconButton';
 import { BodyText } from './Text';
 
 const List = forwardRef(
-  <T,>(
+  <T,>({
-    {
     allowCheckAll: isAllowCheckAll = false,
     allowEdit: isAllowEdit = false,
     allowItemButton: isAllowItemButton = false,
     disableDelete = false,
     edit: isEdit = false,
     flexBoxProps,
+    getListCheckboxProps,
     getListItemCheckboxProps,
     header,
     headerSpacing = '.3em',
-      initialCheckAll = false,
     insertHeader: isInsertHeader = true,
     listEmpty,
     listItemIconMinWidth = '56px',
@@ -66,11 +57,7 @@ const List = forwardRef(
     allowCheckItem: isAllowCheckItem = isAllowEdit,
     allowDelete: isAllowDelete = isAllowEdit,
     allowEditItem: isAllowEditItem = isAllowEdit,
-    }: ListProps<T>,
+  }: ListProps<T>) => {
-    ref: ForwardedRef<ListForwardedRefContent>,
-  ) => {
-    const [isCheckAll, setIsCheckAll] = useState<boolean>(initialCheckAll);
-
     const checkAllMinWidth = useMemo(
       () => `calc(${listItemIconMinWidth} - ${headerSpacing})`,
       [headerSpacing, listItemIconMinWidth],
@@ -122,14 +109,9 @@ const List = forwardRef(
         element = isAllowCheckAll ? (
           <MUIBox sx={{ minWidth: checkAllMinWidth }}>
             <Checkbox
-              checked={isCheckAll}
               edge="start"
-              onChange={(...args) => {
+              onChange={onAllCheckboxChange}
-                const [, isChecked] = args;
+              {...getListCheckboxProps?.call(null)}
-
-                onAllCheckboxChange?.call(null, ...args);
-                setIsCheckAll(isChecked);
-              }}
             />
           </MUIBox>
         ) : (
@@ -140,9 +122,9 @@ const List = forwardRef(
       return element;
     }, [
       checkAllMinWidth,
+      getListCheckboxProps,
       isAllowCheckAll,
       isAllowCheckItem,
-      isCheckAll,
       isEdit,
       onAllCheckboxChange,
     ]);
@@ -261,14 +243,6 @@ const List = forwardRef(
       [isScroll],
     );
 
-    useImperativeHandle(
-      ref,
-      () => ({
-        setCheckAll: (value) => setIsCheckAll(value),
-      }),
-      [],
-    );
-
     return (
       <FlexBox spacing={0} {...flexBoxProps}>
         {headerElement}
@@ -285,6 +259,4 @@ const List = forwardRef(
 
 List.displayName = 'List';
 
-export default List as <T>(
+export default List as <T>(props: ListProps<T>) => ReturnType<FC<ListProps<T>>>;
-  props: ListProps<T> & { ref?: ForwardedRef<ListForwardedRefContent> },
-) => ReturnType<FC<ListProps<T>>>;

striker-ui/components/StrikerConfig/ManageChangedSSHKeysForm.tsx

@@ -13,35 +13,30 @@ import MessageBox, { Message } from '../MessageBox';
 import { ExpandablePanel } from '../Panels';
 import periodicFetch from '../../lib/fetchers/periodicFetch';
 import { BodyText } from '../Text';
-import useProtect from '../../hooks/useProtect';
+import useChecklist from '../../hooks/useChecklist';
 import useProtectedState from '../../hooks/useProtectedState';
 
 const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
   mitmExternalHref = 'https://en.wikipedia.org/wiki/Man-in-the-middle_attack',
   refreshInterval = 60000,
 }) => {
-  const { protect } = useProtect();
-
   const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
-  const listRef = useRef<ListForwardedRefContent>({});
 
   const [apiMessage, setAPIMessage] = useProtectedState<Message | undefined>(
     undefined,
-    protect,
   );
   const [changedSSHKeys, setChangedSSHKeys] = useProtectedState<ChangedSSHKeys>(
     {},
-    protect,
   );
   const [confirmDialogProps, setConfirmDialogProps] =
-    useProtectedState<ConfirmDialogProps>(
+    useProtectedState<ConfirmDialogProps>({
-      {
       actionProceedText: '',
       content: '',
       titleText: '',
-      },
+    });
-      protect,
+
-    );
+  const { checks, getCheck, hasAllChecks, hasChecks, setAllChecks, setCheck } =
+    useChecklist({ list: changedSSHKeys });
 
   const apiMessageElement = useMemo(
     () => apiMessage && <MessageBox {...apiMessage} />,
@@ -140,40 +135,40 @@ const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
             allowCheckItem
             allowDelete
             allowEdit={false}
+            disableDelete={!hasChecks}
             edit
+            getListCheckboxProps={() => ({
+              checked: hasAllChecks,
+            })}
             listEmpty={
               <BodyText align="center">No conflicting keys found.</BodyText>
             }
             listItems={changedSSHKeys}
-            onAllCheckboxChange={(event, isChecked) => {
+            onAllCheckboxChange={(event, checked) => {
-              Object.keys(changedSSHKeys).forEach((key) => {
+              setAllChecks(checked);
-                changedSSHKeys[key].isChecked = isChecked;
-              });
-
-              setChangedSSHKeys((previous) => ({ ...previous }));
             }}
             onDelete={() => {
-              let deleteCount = 0;
+              const deleteRequestBody = checks.reduce<{
-
-              const deleteRequestBody = Object.entries(changedSSHKeys).reduce<{
                 [hostUUID: string]: string[];
-              }>((previous, [stateUUID, { hostUUID, isChecked }]) => {
+              }>((previous, stateUUID) => {
-                if (isChecked) {
+                const checked = getCheck(stateUUID);
+
+                if (!checked) return previous;
+
+                const { hostUUID } = changedSSHKeys[stateUUID];
+
                 if (!previous[hostUUID]) {
                   previous[hostUUID] = [];
                 }
 
                 previous[hostUUID].push(stateUUID);
 
-                  deleteCount += 1;
-                }
-
                 return previous;
               }, {});
 
               setConfirmDialogProps({
                 actionProceedText: 'Delete',
-                content: `Resolve ${deleteCount} SSH key conflicts. Please make sure the identity change(s) are expected to avoid MITM attacks.`,
+                content: `Resolve ${checks.length} SSH key conflicts. Please make sure the identity change(s) are expected to avoid MITM attacks.`,
                 onProceedAppend: () => {
                   api
                     .delete('/ssh-key/conflict', { data: deleteRequestBody })
@@ -186,22 +181,13 @@ const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
                     });
                 },
                 proceedColour: 'red',
-                titleText: `Delete ${deleteCount} conflicting SSH keys?`,
+                titleText: `Delete ${checks.length} conflicting SSH keys?`,
               });
 
               confirmDialogRef.current.setOpen?.call(null, true);
             }}
-            onItemCheckboxChange={(key, event, isChecked) => {
+            onItemCheckboxChange={(key, event, checked) => {
-              changedSSHKeys[key].isChecked = isChecked;
+              setCheck(key, checked);
-
-              listRef.current.setCheckAll?.call(
-                null,
-                Object.values(changedSSHKeys).every(
-                  ({ isChecked: isItemChecked }) => isItemChecked,
-                ),
-              );
-
-              setChangedSSHKeys((previous) => ({ ...previous }));
             }}
             renderListItem={(hostUUID, { hostName, ipAddress }) => (
               <FlexBox
@@ -214,10 +200,7 @@ const ManageChangedSSHKeysForm: FC<ManageChangedSSHKeysFormProps> = ({
                 <BodyText>{ipAddress}</BodyText>
               </FlexBox>
             )}
-            renderListItemCheckboxState={(key, { isChecked }) =>
+            renderListItemCheckboxState={(key) => getCheck(key)}
-              isChecked === true
-            }
-            ref={listRef}
           />
         </FlexBox>
         {apiMessageElement}

striker-ui/components/StrikerConfig/ManageUsersForm.tsx

@@ -15,12 +15,12 @@ import List from '../List';
 import MessageBox, { Message } from '../MessageBox';
 import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup';
 import { ExpandablePanel } from '../Panels';
+import periodicFetch from '../../lib/fetchers/periodicFetch';
 import { BodyText } from '../Text';
 import useChecklist from '../../hooks/useChecklist';
 import useConfirmDialogProps from '../../hooks/useConfirmDialogProps';
 import useFormUtils from '../../hooks/useFormUtils';
 import useProtectedState from '../../hooks/useProtectedState';
-import periodicFetch from '../../lib/fetchers/periodicFetch';
 
 const getFormEntries = (
   ...[{ target }]: DivFormEventHandlerParameters
@@ -76,7 +76,7 @@ const ManageUsersForm: FC = () => {
   const { isFormInvalid, isFormSubmitting, submitForm } = formUtils;
 
   const { buildDeleteDialogProps, checks, getCheck, hasChecks, setCheck } =
-    useChecklist();
+    useChecklist({ list: users });
 
   const { userName: udetailName, userUUID: udetailUuid } = useMemo<
     Partial<UserOverviewMetadata>
@@ -216,9 +216,7 @@ const ManageUsersForm: FC = () => {
             confirmDialogRef.current.setOpen?.call(null, true);
           }}
           onEdit={() => setEditUsers((previous) => !previous)}
-          onItemCheckboxChange={(key, { target: { checked } }) =>
+          onItemCheckboxChange={(key, event, checked) => setCheck(key, checked)}
-            setCheck(key, checked)
-          }
           onItemClick={(value) => {
             if (editUsers) {
               setUserDetail(value);

striker-ui/hooks/useChecklist.tsx

@@ -4,19 +4,32 @@ import buildObjectStateSetterCallback from '../lib/buildObjectStateSetterCallbac
 
 import FormSummary from '../components/FormSummary';
 
-const useChecklist = (): {
+const useChecklist = ({
+  list = {},
+}: {
+  list?: Record<string, unknown>;
+}): {
   buildDeleteDialogProps: BuildDeleteDialogPropsFunction;
   checklist: Checklist;
   checks: ArrayChecklist;
   getCheck: GetCheckFunction;
+  hasAllChecks: boolean;
   hasChecks: boolean;
+  multipleItems: boolean;
+  setAllChecks: SetAllChecksFunction;
   setCheck: SetCheckFunction;
 } => {
   const [checklist, setChecklist] = useState<Checklist>({});
 
+  const listKeys = useMemo(() => Object.keys(list), [list]);
   const checks = useMemo(() => Object.keys(checklist), [checklist]);
 
+  const hasAllChecks = useMemo(
+    () => checks.length === listKeys.length,
+    [checks.length, listKeys.length],
+  );
   const hasChecks = useMemo(() => checks.length > 0, [checks.length]);
+  const multipleItems = useMemo(() => listKeys.length > 1, [listKeys.length]);
 
   const buildDeleteDialogProps = useCallback<BuildDeleteDialogPropsFunction>(
     ({
@@ -40,6 +53,20 @@ const useChecklist = (): {
     [checklist],
   );
 
+  const setAllChecks = useCallback<SetAllChecksFunction>(
+    (checked) =>
+      setChecklist(
+        listKeys.reduce<Checklist>((previous, key) => {
+          if (checked) {
+            previous[key] = checked;
+          }
+
+          return previous;
+        }, {}),
+      ),
+    [listKeys],
+  );
+
   const setCheck = useCallback<SetCheckFunction>(
     (key, checked) =>
       setChecklist(buildObjectStateSetterCallback(key, checked || undefined)),
@@ -51,7 +78,10 @@ const useChecklist = (): {
     checklist,
     checks,
     getCheck,
+    hasAllChecks,
     hasChecks,
+    multipleItems,
+    setAllChecks,
     setCheck,
   };
 };

striker-ui/types/Checklist.d.ts

@@ -10,4 +10,6 @@ type BuildDeleteDialogPropsFunction = (args: {
 
 type GetCheckFunction = (key: string) => boolean;
 
+type SetAllChecksFunction = (checked?: boolean) => void;
+
 type SetCheckFunction = (key: string, checked?: boolean) => void;

striker-ui/types/List.d.ts

@@ -16,10 +16,10 @@ type ListOptionalProps<T extends unknown = unknown> = {
   disableDelete?: boolean;
   edit?: boolean;
   flexBoxProps?: import('../components/FlexBox').FlexBoxProps;
+  getListCheckboxProps?: () => CheckboxProps;
   getListItemCheckboxProps?: (key: string, value: T) => CheckboxProps;
   header?: import('react').ReactNode;
   headerSpacing?: number | string;
-  initialCheckAll?: boolean;
   insertHeader?: boolean;
   listEmpty?: import('react').ReactNode;
   listItemIconMinWidth?: number | string;
@@ -46,7 +46,3 @@ type ListOptionalProps<T extends unknown = unknown> = {
 };
 
 type ListProps<T extends unknown = unknown> = ListOptionalProps<T>;
-
-type ListForwardedRefContent = {
-  setCheckAll?: (value: boolean) => void;
-};

striker-ui/types/ManageChangedSSHKeysForm.d.ts

@@ -3,7 +3,6 @@ type ChangedSSHKeys = {
     hostName: string;
     hostUUID: string;
     ipAddress: string;
-    isChecked?: boolean;
   };
 };