feat(striker-ui): add ManageUsersForm

striker-ui/components/StrikerConfig/ComplexOperationsPanel.tsx

@@ -1,16 +1,15 @@
 import { FC } from 'react';
 
-import FlexBox from '../FlexBox';
+import ConfigPeersForm from './ConfigPeersForm';
-import { ExpandablePanel, Panel } from '../Panels';
+import ManageChangedSSHKeysForm from './ManageChangedSSHKeysForm';
-import { BodyText } from '../Text';
+import ManageUsersForm from './ManageUsersForm';
+import { Panel } from '../Panels';
 
 const ComplexOperationsPanel: FC = () => (
   <Panel>
-    <ExpandablePanel header={<BodyText>Configure striker peers</BodyText>}>
+    <ConfigPeersForm />
-      <FlexBox>
+    <ManageChangedSSHKeysForm />
-        <BodyText>Inbound connections</BodyText>
+    <ManageUsersForm />
-      </FlexBox>
-    </ExpandablePanel>
   </Panel>
 );
 

striker-ui/components/StrikerConfig/ManageUsersForm.tsx

@@ -0,0 +1,55 @@
+import { FC, useEffect } from 'react';
+
+import api from '../../lib/api';
+import handleAPIError from '../../lib/handleAPIError';
+import List from '../List';
+import MessageBox, { Message } from '../MessageBox';
+import { ExpandablePanel } from '../Panels';
+import { BodyText } from '../Text';
+import useProtect from '../../hooks/useProtect';
+import useProtectedState from '../../hooks/useProtectedState';
+
+const ManageUsersForm: FC = () => {
+  const { protect } = useProtect();
+
+  const [listMessage, setListMessage] = useProtectedState<Message>(
+    { children: `No users found.` },
+    protect,
+  );
+  const [users, setUsers] = useProtectedState<
+    UserOverviewMetadataList | undefined
+  >(undefined, protect);
+
+  useEffect(() => {
+    if (!users) {
+      api
+        .get<UserOverviewMetadataList>('/user')
+        .then(({ data }) => {
+          setUsers(data);
+        })
+        .catch((error) => {
+          // Initialize to prevent infinite fetch.
+          setUsers({});
+          setListMessage(handleAPIError(error));
+        });
+    }
+  }, [setListMessage, setUsers, users]);
+
+  return (
+    <ExpandablePanel
+      header={<BodyText>Manage users</BodyText>}
+      loading={!users}
+    >
+      <List
+        allowEdit={false}
+        listEmpty={<MessageBox {...listMessage} />}
+        listItems={users}
+        renderListItem={(userUUID, { userName }) => (
+          <BodyText>{userName}</BodyText>
+        )}
+      />
+    </ExpandablePanel>
+  );
+};
+
+export default ManageUsersForm;

striker-ui/types/APIUser.d.ts

@@ -0,0 +1,8 @@
+type UserOverviewMetadata = {
+  userName: string;
+  userUUID: string;
+};
+
+type UserOverviewMetadataList = {
+  [userUUID: string]: UserOverviewMetadata;
+};