feat(CS): new X-Road 8 theme

Elevated View for certificates/wizards
Improved logic for breadcrumb tracking

Refs: XRDDEV-2917

Author: ovidijusnortal

src/central-server/admin-service/ui/src/App.vue

@@ -26,11 +26,7 @@
  -->
 <template>
   <XrdApp :login-view="loginView">
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
+    <router-view />
   </XrdApp>
 </template>
 

src/central-server/admin-service/ui/src/components/certificate/CertificateDetails.vue

@@ -50,6 +50,7 @@ import { useRouter } from 'vue-router';
 import CertificateHash from '@/components/certificate/CertificateHash.vue';
 import CertificateInfo from '@/components/certificate/CertificateInfo.vue';
 import { CertificateDetails } from '@/openapi-types';
+import { XrdCertificate } from '@niis/shared-ui';
 
 defineProps({
   certificateDetails: {

src/central-server/admin-service/ui/src/layouts/AppBase.vue

@@ -30,9 +30,11 @@
     <AppToolbar />
     <router-view name="navigation" />
 
-    <v-main class="bg-surface pr-10">
-      <router-view />
-      <XrdAppFooter :app-version="appVersion" class="mt-6 mb-6 pa-0" />
+    <v-main class="bg-surface pr-10 pb-8">
+      <div class="mb-6">
+        <router-view />
+      </div>
+      <router-view name="footer" />
     </v-main>
   </v-layout>
 </template>
@@ -43,15 +45,11 @@ import { useUser } from '@/store/modules/user';
 import { useSystem } from '@/store/modules/system';
 import { useAlerts } from '@/store/modules/alerts';
 import AppToolbar from '@/layouts/AppToolbar.vue';
-import { XrdAppFooter } from '@niis/shared-ui';
-import { computed } from 'vue';
 
 const userStore = useUser();
 const { checkAlerts } = useAlerts();
 const systemStore = useSystem();
 
-const appVersion = computed(() => systemStore.serverVersion?.info || '');
-
 const sessionPollInterval = setInterval(
   () => pollSessionStatus(),
   Timeouts.POLL_SESSION_TIMEOUT,

src/central-server/admin-service/ui/src/layouts/AppFooter.vue

@@ -0,0 +1,40 @@
+<!--
+   The MIT License
+
+   Copyright (c) 2019- Nordic Institute for Interoperability Solutions (NIIS)
+   Copyright (c) 2018 Estonian Information System Authority (RIA),
+   Nordic Institute for Interoperability Solutions (NIIS), Population Register Centre (VRK)
+   Copyright (c) 2015-2017 Estonian Information System Authority (RIA), Population Register Centre (VRK)
+
+   Permission is hereby granted, free of charge, to any person obtaining a copy
+   of this software and associated documentation files (the "Software"), to deal
+   in the Software without restriction, including without limitation the rights
+   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+   copies of the Software, and to permit persons to whom the Software is
+   furnished to do so, subject to the following conditions:
+
+   The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+   THE SOFTWARE.
+ -->
+
+<template>
+  <XrdAppFooter :app-version="appVersion" class="mb-6 pa-0" />
+</template>
+
+<script lang="ts" setup>
+import { useSystem } from '@/store/modules/system';
+import { XrdAppFooter } from '@niis/shared-ui';
+import { computed } from 'vue';
+
+const systemStore = useSystem();
+
+const appVersion = computed(() => systemStore.serverVersion?.info || '');
+</script>

src/central-server/admin-service/ui/src/layouts/TabsBase.vue renamed to src/central-server/admin-service/ui/src/layouts/AppMainNavigation.vue

@@ -25,14 +25,14 @@
    THE SOFTWARE.
  -->
 <template>
-  <XrdTabsBase :tabs="allowedTabs" :user-name="username" />
+  <XrdMainNavigation :tabs="allowedTabs" :user-name="username" />
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { mainTabs } from '@/global';
 import { useUser } from '@/store/modules/user';
-import { XrdTabsBase } from '@niis/shared-ui';
+import { XrdMainNavigation } from '@niis/shared-ui';
 
 const { getAllowedTabs, username } = useUser();
 const allowedTabs = computed(() => getAllowedTabs(mainTabs));

src/central-server/admin-service/ui/src/layouts/PageNavigation.vue renamed to src/central-server/admin-service/ui/src/layouts/ViewNavigation.vue

@@ -25,15 +25,16 @@
    THE SOFTWARE.
  -->
 <template>
-  <v-tabs grow class="bg-tab rounded-xl">
+  <v-tabs bg-color="surface-container-low" grow class="rounded-xl">
     <v-tab
       v-for="tab in allowedTabs"
       :key="tab.key"
-      class="body-regular font-weight-medium"
-      variant="flat"
+      class="xrd-tab body-regular font-weight-medium"
+      selected-class="xrd-tab--active"
+      variant="text"
       rounded="xl"
-      base-color="tab"
-      color="active-tab"
+      base-color="primary"
+      color="tertiary"
       hide-slider
       :to="tab.to"
       :data-test="tab.key"
@@ -70,7 +71,11 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-.v-tab-item--selected {
-  background-color: red;
+.xrd-tab {
+  background-color: rgb(var(--v-theme-surface-container-low));
+
+  &.xrd-tab--active {
+    background-color: rgb(var(--v-theme-on-accent));
+  }
 }
 </style>

src/central-server/admin-service/ui/src/router/router.ts

@@ -29,24 +29,27 @@ import {
   createWebHashHistory,
   NavigationGuardNext,
   RouteLocationNormalized,
+  RouteLocationNormalizedLoaded,
 } from 'vue-router';
 import routes from './routes';
 import { RouteName } from '@/global';
 import { useUser } from '@/store/modules/user';
 import { useSystem } from '@/store/modules/system';
-import { useNotifications, XrdLocation } from '@niis/shared-ui';
+import { useNotifications, XrdLocation, useHistory } from '@niis/shared-ui';
 
 // Create the router
 const router = createRouter({
   history: createWebHashHistory(),
   routes: routes,
 });
 
-function backOnEscape(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    router.go(-1);
-  }
-}
+router.afterEach(
+  (to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded) => {
+    const { push } = useHistory();
+
+    push(to);
+  },
+);
 
 router.beforeEach(
   async (
@@ -65,12 +68,6 @@ router.beforeEach(
     const notifications = useNotifications();
     const system = useSystem();
 
-    if (to.meta.backOnEscape) {
-      window.addEventListener('keyup', backOnEscape);
-    } else {
-      window.removeEventListener('keyup', backOnEscape);
-    }
-
     // User is allowed to access any other view than login only after authenticated information has been fetched
     // Session alive information is fetched before any view is accessed. This prevents UI flickering by not allowing
     // user to be redirected to a view that contains api calls (s)he is not allowed.
@@ -92,17 +89,6 @@ router.beforeEach(
         /*
     Check permissions here
     */
-        const fromName = from.meta.from?.name || from.name;
-
-        if (to.meta.allowBackTo) {
-          for (const routeName of to.meta.allowBackTo) {
-            if (routeName == from.name) {
-              to.meta.from = from;
-            } else if (routeName == from.meta.from?.name) {
-              to.meta.from = from.meta.from;
-            }
-          }
-        }
 
         if (!to?.meta?.permissions) {
           next();