fix(striker-ui): connect add and edit forms with ManageUpsPanel

striker-ui/components/ManageUps/ManageUpsPanel.tsx

@@ -1,25 +1,108 @@
-import { FC, useMemo, useRef, useState } from 'react';
+import {
+  FC,
+  FormEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import AddUpsInputGroup from './AddUpsInputGroup';
+import API_BASE_URL from '../../lib/consts/API_BASE_URL';
+
+import AddUpsInputGroup, { INPUT_ID_UPS_TYPE_ID } from './AddUpsInputGroup';
 import api from '../../lib/api';
+import { INPUT_ID_UPS_IP, INPUT_ID_UPS_NAME } from './CommonUpsInputGroup';
 import ConfirmDialog from '../ConfirmDialog';
+import EditUpsInputGroup, { INPUT_ID_UPS_UUID } from './EditUpsInputGroup';
+import FlexBox from '../FlexBox';
 import FormDialog from '../FormDialog';
 import handleAPIError from '../../lib/handleAPIError';
 import List from '../List';
 import { Panel, PanelHeader } from '../Panels';
+import periodicFetch from '../../lib/fetchers/periodicFetch';
 import Spinner from '../Spinner';
-import { HeaderText } from '../Text';
+import { BodyText, HeaderText, InlineMonoText, MonoText } from '../Text';
 import useConfirmDialogProps from '../../hooks/useConfirmDialogProps';
 import useIsFirstRender from '../../hooks/useIsFirstRender';
 import useProtectedState from '../../hooks/useProtectedState';
 
+type UpsFormData = {
+  upsAgent: string;
+  upsBrand: string;
+  upsIPAddress: string;
+  upsName: string;
+  upsTypeId: string;
+  upsUUID: string;
+};
+
+const getUpsFormData = (
+  upsTemplate: APIUpsTemplate,
+  ...[{ target }]: Parameters<FormEventHandler<HTMLDivElement>>
+): UpsFormData => {
+  const { elements } = target as HTMLFormElement;
+
+  const { value: upsName } = elements.namedItem(
+    INPUT_ID_UPS_NAME,
+  ) as HTMLInputElement;
+  const { value: upsIPAddress } = elements.namedItem(
+    INPUT_ID_UPS_IP,
+  ) as HTMLInputElement;
+
+  const inputUpsTypeId = elements.namedItem(INPUT_ID_UPS_TYPE_ID);
+
+  let upsAgent = '';
+  let upsBrand = '';
+  let upsTypeId = '';
+
+  if (inputUpsTypeId) {
+    ({ value: upsTypeId } = inputUpsTypeId as HTMLInputElement);
+    ({ agent: upsAgent, brand: upsBrand } = upsTemplate[upsTypeId]);
+  }
+
+  const inputUpsUUID = elements.namedItem(INPUT_ID_UPS_UUID);
+
+  let upsUUID = '';
+
+  if (inputUpsUUID) {
+    ({ value: upsUUID } = inputUpsUUID as HTMLInputElement);
+  }
+
+  return { upsAgent, upsBrand, upsIPAddress, upsName, upsTypeId, upsUUID };
+};
+
+const buildConfirmUpsFormData = ({
+  upsBrand,
+  upsIPAddress,
+  upsName,
+  upsUUID,
+}: UpsFormData) => {
+  const listItems: Record<string, { label: string; value: string }> = {
+    'ups-brand': { label: 'Brand', value: upsBrand },
+    'ups-name': { label: 'Host name', value: upsName },
+    'ups-ip-address': { label: 'IP address', value: upsIPAddress },
+  };
+
+  return (
+    <List
+      listItems={listItems}
+      listItemProps={{ sx: { padding: 0 } }}
+      renderListItem={(part, { label, value }) => (
+        <FlexBox fullWidth growFirst key={`confirm-ups-${upsUUID}-${part}`} row>
+          <BodyText>{label}</BodyText>
+          <MonoText>{value}</MonoText>
+        </FlexBox>
+      )}
+    />
+  );
+};
+
 const ManageUpsPanel: FC = () => {
   const isFirstRender = useIsFirstRender();
 
   const confirmDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
   const formDialogRef = useRef<ConfirmDialogForwardedRefContent>({});
 
-  const [confirmDialogProps] = useConfirmDialogProps();
+  const [confirmDialogProps, setConfirmDialogProps] = useConfirmDialogProps();
   const [formDialogProps, setFormDialogProps] = useConfirmDialogProps();
   const [isEditUpses, setIsEditUpses] = useState<boolean>(false);
   const [isLoadingUpsTemplate, setIsLoadingUpsTemplate] =
@@ -28,6 +111,99 @@ const ManageUpsPanel: FC = () => {
     APIUpsTemplate | undefined
   >(undefined);
 
+  const { data: upsOverviews, isLoading: isUpsOverviewLoading } =
+    periodicFetch<APIUpsOverview>(`${API_BASE_URL}/ups`, {
+      refreshInterval: 60000,
+    });
+
+  const buildEditUpsFormDialogProps = useCallback<
+    (args: APIUpsOverview[string]) => ConfirmDialogProps
+  >(
+    ({ upsAgent, upsIPAddress, upsName, upsUUID }) => {
+      // Determine the type of existing UPS based on its scan agent.
+      // TODO: should identity an existing UPS's type in the DB.
+      const upsTypeId: string =
+        Object.entries(upsTemplate ?? {}).find(
+          ([, { agent }]) => upsAgent === agent,
+        )?.[0] ?? '';
+
+      return {
+        actionProceedText: 'Update',
+        content: (
+          <EditUpsInputGroup
+            previous={{
+              upsIPAddress,
+              upsName,
+              upsTypeId,
+            }}
+            upsTemplate={upsTemplate}
+            upsUUID={upsUUID}
+          />
+        ),
+        onSubmitAppend: (event) => {
+          if (!upsTemplate) {
+            return;
+          }
+
+          const editData = getUpsFormData(upsTemplate, event);
+          const { upsName: newUpsName } = editData;
+
+          setConfirmDialogProps({
+            actionProceedText: 'Update',
+            content: buildConfirmUpsFormData(editData),
+            titleText: (
+              <HeaderText>
+                Update{' '}
+                <InlineMonoText fontSize="inherit">{newUpsName}</InlineMonoText>{' '}
+                with the following data?
+              </HeaderText>
+            ),
+          });
+
+          confirmDialogRef.current.setOpen?.call(null, true);
+        },
+        titleText: (
+          <HeaderText>
+            Update UPS{' '}
+            <InlineMonoText fontSize="inherit">{upsName}</InlineMonoText>
+          </HeaderText>
+        ),
+      };
+    },
+    [setConfirmDialogProps, upsTemplate],
+  );
+
+  const addUpsFormDialogProps = useMemo<ConfirmDialogProps>(
+    () => ({
+      actionProceedText: 'Add',
+      content: <AddUpsInputGroup upsTemplate={upsTemplate} />,
+      onSubmitAppend: (event) => {
+        if (!upsTemplate) {
+          return;
+        }
+
+        const addData = getUpsFormData(upsTemplate, event);
+        const { upsBrand } = addData;
+
+        setConfirmDialogProps({
+          actionProceedText: 'Add',
+          content: buildConfirmUpsFormData(addData),
+          titleText: (
+            <HeaderText>
+              Add a{' '}
+              <InlineMonoText fontSize="inherit">{upsBrand}</InlineMonoText> UPS
+              with the following data?
+            </HeaderText>
+          ),
+        });
+
+        confirmDialogRef.current.setOpen?.call(null, true);
+      },
+      titleText: 'Add a UPS',
+    }),
+    [setConfirmDialogProps, upsTemplate],
+  );
+
   const listElement = useMemo(
     () => (
       <List
@@ -36,25 +212,39 @@ const ManageUpsPanel: FC = () => {
         edit={isEditUpses}
         header
         listEmpty="No Ups(es) registered."
+        listItems={upsOverviews}
         onAdd={() => {
-          setFormDialogProps({
+          setFormDialogProps(addUpsFormDialogProps);
-            actionProceedText: 'Add',
-            content: <AddUpsInputGroup upsTemplate={upsTemplate} />,
-            titleText: 'Add a UPS',
-          });
-
           formDialogRef.current.setOpen?.call(null, true);
         }}
         onEdit={() => {
           setIsEditUpses((previous) => !previous);
         }}
+        onItemClick={(value) => {
+          setFormDialogProps(buildEditUpsFormDialogProps(value));
+          formDialogRef.current.setOpen?.call(null, true);
+        }}
+        renderListItem={(upsUUID, { upsAgent, upsIPAddress, upsName }) => (
+          <FlexBox fullWidth row>
+            <BodyText>{upsName}</BodyText>
+            <BodyText>agent=&quot;{upsAgent}&quot;</BodyText>
+            <BodyText>ip=&quot;{upsIPAddress}&quot;</BodyText>
+          </FlexBox>
+        )}
       />
     ),
-    [isEditUpses, setFormDialogProps, upsTemplate],
+    [
+      addUpsFormDialogProps,
+      buildEditUpsFormDialogProps,
+      isEditUpses,
+      setFormDialogProps,
+      upsOverviews,
+    ],
   );
   const panelContent = useMemo(
-    () => (isLoadingUpsTemplate ? <Spinner /> : listElement),
+    () =>
-    [isLoadingUpsTemplate, listElement],
+      isLoadingUpsTemplate || isUpsOverviewLoading ? <Spinner /> : listElement,
+    [isLoadingUpsTemplate, isUpsOverviewLoading, listElement],
   );
 
   if (isFirstRender) {
@@ -75,7 +265,7 @@ const ManageUpsPanel: FC = () => {
     <>
       <Panel>
         <PanelHeader>
-          <HeaderText>Manage Upses</HeaderText>
+          <HeaderText>Manage UPSes</HeaderText>
         </PanelHeader>
         {panelContent}
       </Panel>

striker-ui/types/APIUps.d.ts

@@ -5,3 +5,12 @@ type APIUpsTemplate = {
     description: string;
   };
 };
+
+type APIUpsOverview = {
+  [upsUUID: string]: {
+    upsAgent: string;
+    upsIPAddress: string;
+    upsName: string;
+    upsUUID: string;
+  };
+};