[PUI] Machines table refactor (#8352)

* Reorganize MachineManagementPanel

- Use Accordion
- More consistent with PluginManagementPanel

* Code cleanup

* Refactor machine drawer display

* Refactor MachineTypeDetailDrawer

src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx

@@ -1,18 +1,20 @@
-import { Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
+  Accordion,
   ActionIcon,
+  Alert,
   Code,
   Group,
   List,
-  Space,
   Stack,
-  Text,
-  Title
+  Text
 } from '@mantine/core';
-import { IconRefresh } from '@tabler/icons-react';
+import { IconInfoCircle, IconRefresh } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 
 import { api } from '../../../../App';
+import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { apiUrl } from '../../../../states/ApiState';
 import { MachineListTable } from '../../../../tables/machine/MachineListTable';
@@ -32,45 +34,77 @@ export default function MachineManagementPanel() {
     staleTime: 10 * 1000
   });
 
-  return (
-    <Stack>
-      <MachineListTable props={{}} />
-
-      <Space h="10px" />
-
-      <Stack gap={'xs'}>
-        <Title order={5}>
-          <Trans>Machine types</Trans>
-        </Title>
-        <MachineTypeListTable props={{}} />
-      </Stack>
+  const hasErrors = useMemo(() => {
+    return (
+      registryStatus?.registry_errors &&
+      registryStatus.registry_errors.length > 0
+    );
+  }, [registryStatus]);
 
-      <Space h="10px" />
-
-      <Stack gap={'xs'}>
-        <Group>
-          <Title order={5}>
-            <Trans>Machine Error Stack</Trans>
-          </Title>
-          <ActionIcon variant="outline" onClick={() => refetch()}>
-            <IconRefresh />
-          </ActionIcon>
-        </Group>
-        {registryStatus?.registry_errors &&
-        registryStatus.registry_errors.length === 0 ? (
-          <Text style={{ fontStyle: 'italic' }}>
-            <Trans>There are no machine registry errors.</Trans>
-          </Text>
-        ) : (
-          <List>
-            {registryStatus?.registry_errors?.map((error, i) => (
-              <List.Item key={i}>
-                <Code>{error.message}</Code>
-              </List.Item>
-            ))}
-          </List>
-        )}
-      </Stack>
-    </Stack>
+  return (
+    <Accordion multiple defaultValue={['machinelist', 'machinetypes']}>
+      <Accordion.Item value="machinelist">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Machines`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <MachineListTable props={{}} />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="machinetypes">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Machine Types`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <MachineTypeListTable props={{}} />
+        </Accordion.Panel>
+      </Accordion.Item>
+      <Accordion.Item value="machineerrors">
+        <Accordion.Control>
+          <StylishText size="lg">{t`Machine Errors`}</StylishText>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <Stack gap="xs">
+            <Group
+              justify="space-beteen"
+              wrap="nowrap"
+              style={{ width: '100%' }}
+            >
+              {hasErrors ? (
+                <Alert
+                  flex={10}
+                  color="red"
+                  title={t`Registry Registry Errors`}
+                  icon={<IconInfoCircle />}
+                >
+                  <Text>{t`There are machine registry errors`}</Text>
+                </Alert>
+              ) : (
+                <Alert
+                  flex={10}
+                  color="green"
+                  title={t`Machine Registry Errors`}
+                  icon={<IconInfoCircle />}
+                >
+                  <Text>{t`There are no machine registry errors`}</Text>
+                </Alert>
+              )}
+              <ActionIcon variant="outline" onClick={() => refetch()}>
+                <IconRefresh />
+              </ActionIcon>
+            </Group>
+            {hasErrors && (
+              <List>
+                {registryStatus?.registry_errors?.map((error, i) => (
+                  <List.Item key={i}>
+                    <Code>{error.message}</Code>
+                  </List.Item>
+                ))}
+              </List>
+            )}
+          </Stack>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
   );
 }