fix(striker-ui): add manage manifest tab to manage element page

striker-ui/pages/manage-element/index.tsx

@@ -8,6 +8,7 @@ import Grid from '../../components/Grid';
 import handleAPIError from '../../lib/handleAPIError';
 import Header from '../../components/Header';
 import ManageFencePanel from '../../components/ManageFence';
+import ManageManifestPanel from '../../components/ManageManifest';
 import ManageUpsPanel from '../../components/ManageUps';
 import { Panel } from '../../components/Panels';
 import PrepareHostForm from '../../components/PrepareHostForm';
@@ -20,12 +21,18 @@ import useIsFirstRender from '../../hooks/useIsFirstRender';
 import useProtect from '../../hooks/useProtect';
 import useProtectedState from '../../hooks/useProtectedState';
 
+const TAB_ID_PREPARE_HOST = 'prepare-host';
+const TAB_ID_PREPARE_NETWORK = 'prepare-network';
+const TAB_ID_MANAGE_FENCE = 'manage-fence';
+const TAB_ID_MANAGE_UPS = 'manage-ups';
+const TAB_ID_MANAGE_MANIFEST = 'manage-manifest';
+
 const MAP_TO_PAGE_TITLE: Record<string, string> = {
-  'prepare-host': 'Prepare Host',
+  [TAB_ID_PREPARE_HOST]: 'Prepare Host',
-  'prepare-network': 'Prepare Network',
+  [TAB_ID_PREPARE_NETWORK]: 'Prepare Network',
-  'manage-fence': 'Manage Fence Devices',
+  [TAB_ID_MANAGE_FENCE]: 'Manage Fence Devices',
-  'manage-ups': 'Manage UPSes',
+  [TAB_ID_MANAGE_UPS]: 'Manage UPSes',
-  'manage-manifest': 'Manage Manifests',
+  [TAB_ID_MANAGE_MANIFEST]: 'Manage Manifests',
 };
 const PAGE_TITLE_LOADING = 'Loading';
 const STEP_CONTENT_GRID_COLUMNS = { md: 8, sm: 6, xs: 1 };
@@ -70,7 +77,7 @@ const PrepareNetworkTabContent: FC = () => {
         >
           {hostOverviewPairs.map(([hostUUID, { shortHostName }]) => (
             <Tab
-              key={`prepare-network-${hostUUID}`}
+              key={`${TAB_ID_PREPARE_NETWORK}-${hostUUID}`}
               label={shortHostName}
               value={hostUUID}
             />
@@ -144,6 +151,19 @@ const ManageUpsTabContent: FC = () => (
   />
 );
 
+const ManageManifestContent: FC = () => (
+  <Grid
+    columns={STEP_CONTENT_GRID_COLUMNS}
+    layout={{
+      'managemanifest-left-column': {},
+      'managemanifest-center-column': {
+        children: <ManageManifestPanel />,
+        ...STEP_CONTENT_GRID_CENTER_COLUMN,
+      },
+    }}
+  />
+);
+
 const ManageElement: FC = () => {
   const {
     isReady,
@@ -156,11 +176,11 @@ const ManageElement: FC = () => {
   useEffect(() => {
     if (isReady) {
       let step = getQueryParam(rawStep, {
-        fallbackValue: 'prepare-host',
+        fallbackValue: TAB_ID_PREPARE_HOST,
       });
 
       if (!MAP_TO_PAGE_TITLE[step]) {
-        step = 'prepare-host';
+        step = TAB_ID_PREPARE_HOST;
       }
 
       if (pageTitle === PAGE_TITLE_LOADING) {
@@ -188,24 +208,28 @@ const ManageElement: FC = () => {
           orientation={{ xs: 'vertical', sm: 'horizontal' }}
           value={pageTabId}
         >
-          <Tab label="Prepare host" value="prepare-host" />
+          <Tab label="Prepare host" value={TAB_ID_PREPARE_HOST} />
-          <Tab label="Prepare network" value="prepare-network" />
+          <Tab label="Prepare network" value={TAB_ID_PREPARE_NETWORK} />
-          <Tab label="Manage fence devices" value="manage-fence" />
+          <Tab label="Manage fence devices" value={TAB_ID_MANAGE_FENCE} />
-          <Tab label="Manage UPSes" value="manage-ups" />
+          <Tab label="Manage UPSes" value={TAB_ID_MANAGE_UPS} />
+          <Tab label="Manage manifests" value={TAB_ID_MANAGE_MANIFEST} />
         </Tabs>
       </Panel>
-      <TabContent changingTabId={pageTabId} tabId="prepare-host">
+      <TabContent changingTabId={pageTabId} tabId={TAB_ID_PREPARE_HOST}>
         <PrepareHostTabContent />
       </TabContent>
-      <TabContent changingTabId={pageTabId} tabId="prepare-network">
+      <TabContent changingTabId={pageTabId} tabId={TAB_ID_PREPARE_NETWORK}>
         <PrepareNetworkTabContent />
       </TabContent>
-      <TabContent changingTabId={pageTabId} tabId="manage-fence">
+      <TabContent changingTabId={pageTabId} tabId={TAB_ID_MANAGE_FENCE}>
         <ManageFenceTabContent />
       </TabContent>
-      <TabContent changingTabId={pageTabId} tabId="manage-ups">
+      <TabContent changingTabId={pageTabId} tabId={TAB_ID_MANAGE_UPS}>
         <ManageUpsTabContent />
       </TabContent>
+      <TabContent changingTabId={pageTabId} tabId={TAB_ID_MANAGE_MANIFEST}>
+        <ManageManifestContent />
+      </TabContent>
     </>
   );
 };