fix(striker-ui): manifest list

striker-ui/components/ManageManifest/ManageManifestPanel.tsx

@@ -0,0 +1,60 @@
+import { PlayCircle } from '@mui/icons-material';
+import { FC, useMemo, useState } from 'react';
+import API_BASE_URL from '../../lib/consts/API_BASE_URL';
+import periodicFetch from '../../lib/fetchers/periodicFetch';
+import FlexBox from '../FlexBox';
+import IconButton from '../IconButton';
+import List from '../List';
+import { Panel, PanelHeader } from '../Panels';
+import Spinner from '../Spinner';
+import { BodyText, HeaderText } from '../Text';
+
+const ManageManifestPanel: FC = () => {
+  const [isEditManifests, setIsEditManifests] = useState<boolean>(false);
+
+  const { data: manifestOverviews, isLoading: isLoadingManifestOverviews } =
+    periodicFetch<APIManifestOverviewList>(`${API_BASE_URL}/manifest`, {
+      refreshInterval: 60000,
+    });
+
+  const listElement = useMemo(
+    () => (
+      <List
+        allowEdit
+        allowItemButton={isEditManifests}
+        edit={isEditManifests}
+        header
+        listEmpty="No manifest(s) registered."
+        listItems={manifestOverviews}
+        onEdit={() => {
+          setIsEditManifests((previous) => !previous);
+        }}
+        renderListItem={(manifestUUID, { manifestName }) => (
+          <FlexBox fullWidth row>
+            <IconButton disabled={isEditManifests} variant="normal">
+              <PlayCircle />
+            </IconButton>
+            <BodyText>{manifestName}</BodyText>
+          </FlexBox>
+        )}
+      />
+    ),
+    [isEditManifests, manifestOverviews],
+  );
+
+  const panelContent = useMemo(
+    () => (isLoadingManifestOverviews ? <Spinner /> : listElement),
+    [isLoadingManifestOverviews, listElement],
+  );
+
+  return (
+    <Panel>
+      <PanelHeader>
+        <HeaderText>Manage manifests</HeaderText>
+      </PanelHeader>
+      {panelContent}
+    </Panel>
+  );
+};
+
+export default ManageManifestPanel;

striker-ui/components/ManageManifest/index.tsx

@@ -0,0 +1,3 @@
+import ManageManifestPanel from './ManageManifestPanel';
+
+export default ManageManifestPanel;

striker-ui/types/APIManifest.d.ts

@@ -0,0 +1,8 @@
+type APIManifestOverview = {
+  manifestName: string;
+  manifestUUID: string;
+};
+
+type APIManifestOverviewList = {
+  [manifestUUID: string]: APIManifestOverview;
+};