✨ [#728] - feat: version information

Author: Julian Roeland

frontend/src/App.tsx

@@ -106,7 +106,7 @@ function App() {
           value={{
             breadcrumbItems,
             primaryNavigationItems: [
-              <Logo key="logo" width={32} />,
+              <Logo key="logo" width={32} withDialog />,
               {
                 children: <Solid.HomeIcon />,
                 title: "Home",

frontend/src/components/Logo/Logo.tsx

@@ -1,7 +1,59 @@
+import { AttributeList, Button, Card, P, useDialog } from "@maykin-ui/admin-ui";
+import { useCallback } from "react";
+
+import { useDataFetcher } from "../../hooks/useDataFetcher";
+import { getAppInfo } from "../../lib/api/app-info";
+
 export type LogoProps = {
-  width?: number;
+  width?: number | string;
+  withDialog?: boolean;
 };
 
-export function Logo({ width = 128 }: LogoProps) {
+/**
+ * Implementation of the LogoImage with optional interactivity
+ */
+export function Logo({ width = 128, withDialog = false }: LogoProps) {
+  const dialog = useDialog();
+
+  const onClick = useCallback(() => {
+    dialog("Over", <DialogBody />, undefined, { size: "s" });
+  }, [dialog]);
+
+  return withDialog ? (
+    <Button variant="transparent" onClick={onClick} pad={false}>
+      <LogoImage width={width} />
+    </Button>
+  ) : (
+    <LogoImage width={width} />
+  );
+}
+
+function DialogBody() {
+  const { data: appInfo } = useDataFetcher(
+    (signal) => getAppInfo(signal),
+    {
+      errorMessage:
+        "Er is een fout opgetreden bij het ophalen van de versieinfo!",
+    },
+    [],
+  );
+
+  return (
+    <Card>
+      <LogoImage width={"100%"} />
+      <AttributeList
+        object={{
+          Versie: <P size="xs">{appInfo?.release}</P>,
+          "Git SHA": <P size="xs">{appInfo?.gitSha}</P>,
+        }}
+      />
+    </Card>
+  );
+}
+
+/**
+ * Purely the image of the logo, without any interactivity.
+ */
+function LogoImage({ width }: { width: number | string }) {
   return <img src="/logo.svg" alt="Open Archiefbeheer Logo" width={width} />;
 }

frontend/src/lib/api/app-info.ts

@@ -0,0 +1,22 @@
+import { request } from "./request";
+
+export type AppInfo = {
+  release: string;
+  gitSha: string;
+};
+
+/**
+ * List all the users that have the permission to archive destruction lists.
+ */
+export async function getAppInfo(signal?: AbortSignal) {
+  const response = await request(
+    "GET",
+    "/app-info",
+    undefined,
+    undefined,
+    undefined,
+    signal,
+  );
+  const promise: Promise<AppInfo> = response.json();
+  return promise;
+}