Add about dialog to dashboard

- Update API generated code and client to include about service. - Add info icon to the header to open a dialog with about information. - Show information from the about API endpoint (version, pres. system, child workflow names), include the same text from the homepage and buttons to documentation, license and contributing. Unrelated changes: - Make sure padding is not added to the body when a dialog is shown. - Bold "Enduro" in the header to match dialog. - Update homepage text to match dialog. - Redirect to signin page after API authentication error.
artefactual-sdps · Nov 28, 2024 · 006eb3b · 006eb3b
1 parent f8fcea6
commit 006eb3b
Show file tree

Hide file tree

Showing 13 changed files with 659 additions and 136 deletions.
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Enduro</title>
   </head>
-  <body>
+  <body class="p-0">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/dashboard/src/client.ts b/dashboard/src/client.ts
@@ -5,6 +5,7 @@ import { useAuthStore } from "@/stores/auth";
 import { usePackageStore } from "./stores/package";
 
 export interface Client {
+  about: api.AboutApi;
   package: api.PackageApi;
   storage: api.StorageApi;
   connectPackageMonitor: () => void;
@@ -67,7 +68,7 @@ function createClient(): Client {
           if (context.response.status == 401) {
             useAuthStore()
               .removeUser()
-              .then(() => router.push({ name: "/" }));
+              .then(() => router.push({ name: "/user/signin" }));
             return Promise.resolve();
           }
           return Promise.resolve(context.response);
@@ -76,6 +77,7 @@ function createClient(): Client {
     ],
   });
   return {
+    about: new api.AboutApi(config),
     package: new api.PackageApi(config),
     storage: new api.StorageApi(config),
     connectPackageMonitor,

diff --git a/dashboard/src/components/AboutDialog.vue b/dashboard/src/components/AboutDialog.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { api, client } from "@/client";
+import useEventListener from "@/composables/useEventListener";
+import Modal from "bootstrap/js/dist/modal";
+import { ref, onMounted } from "vue";
+import { closeDialog } from "vue3-promise-dialog";
+import IconBookText from "~icons/lucide/book-text";
+import IconFileText from "~icons/lucide/file-text";
+import IconGitMerge from "~icons/lucide/git-merge";
+
+const el = ref<HTMLElement | null>(null);
+const modal = ref<Modal | null>(null);
+const about = ref<api.EnduroAbout | null>(null);
+
+onMounted(() => {
+  client.about.aboutAbout().then((resp) => {
+    about.value = resp;
+    if (!el.value) return;
+    modal.value = new Modal(el.value);
+    modal.value.show();
+  });
+});
+
+useEventListener(el, "hidden.bs.modal", () => closeDialog(null));
+</script>
+
+<template>
+  <div class="modal" tabindex="-1" ref="el">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title fw-bold d-flex align-items-center">
+            <img src="/logo.png" alt="" height="30" class="me-2" />Enduro
+          </h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="mb-3" v-if="about">
+            <div class="row">
+              <div
+                class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
+              >
+                Application version:
+              </div>
+              <div class="col-12 col-sm-6 text-truncate">
+                v{{ about.version }}
+              </div>
+            </div>
+            <div class="row">
+              <div
+                class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
+              >
+                Preservation system:
+              </div>
+              <div class="col-12 col-sm-6 text-truncate">
+                {{ about.preservationSystem }}
+              </div>
+            </div>
+            <div class="row" v-if="about.preprocessing.enabled">
+              <div
+                class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
+              >
+                Preprocessing workflow:
+              </div>
+              <div class="col-12 col-sm-6 text-truncate">
+                {{ about.preprocessing.workflowName }}
+              </div>
+            </div>
+            <div
+              class="row"
+              v-if="about.poststorage && about.poststorage.length > 0"
+            >
+              <div
+                class="col-12 col-sm-6 text-primary fw-bold text-sm-end text-truncate"
+              >
+                Poststorage workflows:
+              </div>
+              <div class="col-12 col-sm-6 d-flex flex-column text-truncate">
+                <span v-for="poststorage in about.poststorage">{{
+                  poststorage.workflowName
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="small">
+            Enduro is a new application under development by
+            <a href="https://www.artefactual.com/" target="_blank"
+              >Artefactual Systems</a
+            >. Originally created as a more stable replacement for
+            Archivematica's
+            <a
+              href="https://github.com/artefactual/automation-tools"
+              target="_blank"
+              >automation-tools</a
+            >
+            library of scripts, it has since evolved into a flexible tool to be
+            paired with preservation applications like
+            <a href="https://www.archivematica.org/" target="_blank"
+              >Archivematica</a
+            >
+            and
+            <a href="https://github.com/artefactual-labs/a3m" target="_blank"
+              >a3m</a
+            >
+            to provide initial ingest activities such as content and structure
+            validation, packaging, and more.
+          </div>
+        </div>
+        <div class="modal-footer">
+          <a
+            class="btn btn-primary d-flex align-items-center gap-2"
+            href="https://enduro.readthedocs.io/"
+            target="_blank"
+          >
+            <IconBookText aria-hidden="true" />
+            Documentation
+          </a>
+          <a
+            class="btn btn-primary d-flex align-items-center gap-2"
+            href="https://github.com/artefactual-sdps/enduro/blob/main/LICENSE"
+            target="_blank"
+          >
+            <IconFileText aria-hidden="true" />
+            License
+          </a>
+          <a
+            class="btn btn-primary d-flex align-items-center gap-2"
+            href="https://github.com/artefactual-sdps/enduro/blob/main/CONTRIBUTING.md"
+            target="_blank"
+          >
+            <IconGitMerge aria-hidden="true" />
+            Contributing
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/dashboard/src/components/Header.vue b/dashboard/src/components/Header.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import AboutDialogVue from "@/components/AboutDialog.vue";
 import Breadcrumb from "@/components/Breadcrumb.vue";
 import { useLayoutStore } from "@/stores/layout";
+import IconInfoStandardSolid from "~icons/clarity/info-standard-solid";
 import IconMenuLine from "~icons/clarity/menu-line";
+import { openDialog } from "vue3-promise-dialog";
 
 const layoutStore = useLayoutStore();
+
+const showAbout = async () => await openDialog(AboutDialogVue);
 </script>
 
 <template>
@@ -43,7 +48,7 @@ const layoutStore = useLayoutStore();
       </button>
 
       <router-link
-        class="navbar-brand h1 mb-0 me-auto p-3 px-2 text-primary text-decoration-none d-flex align-items-center"
+        class="navbar-brand h1 mb-0 me-auto p-3 px-2 text-primary text-decoration-none d-flex align-items-center fw-bold"
         :class="layoutStore.sidebarCollapsed ? '' : 'ms-2'"
         :to="{ name: '/' }"
       >
@@ -54,6 +59,19 @@ const layoutStore = useLayoutStore();
       <div class="flex-grow-1 d-none d-md-block">
         <Breadcrumb />
       </div>
+
+      <button
+        type="button"
+        class="btn btn-link text-decoration-none p-3"
+        aria-label="About Enduro"
+      >
+        <IconInfoStandardSolid
+          class="text-primary mx-1"
+          style="font-size: 1.5em"
+          aria-hidden="true"
+          @click="showAbout"
+        />
+      </button>
     </nav>
   </header>
 </template>

diff --git a/dashboard/src/openapi-generator/.openapi-generator/FILES b/dashboard/src/openapi-generator/.openapi-generator/FILES
diff --git a/dashboard/src/openapi-generator/apis/AboutApi.ts b/dashboard/src/openapi-generator/apis/AboutApi.ts
diff --git a/dashboard/src/openapi-generator/apis/index.ts b/dashboard/src/openapi-generator/apis/index.ts