Merge pull request #2319 from nordic-institute/XRDDEV-2697

fix: fix UI issues on SS
nordic-institute · Sep 20, 2024 · 15aee18 · 15aee18
2 parents 931d17f + e42463b
commit 15aee18
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 165 deletions.
diff --git a/Docker/xrd-dev-stack/hurl-src/setup.hurl b/Docker/xrd-dev-stack/hurl-src/setup.hurl
@@ -504,6 +504,9 @@ X-XSRF-TOKEN: {{ss0_xsrf_token}}
     },
     {
       "service_code": "clientDisable"
+    },
+    {
+      "service_code": "addressChange"
     }
   ] 
 }

diff --git a/src/central-server/admin-service/ui/src/store/modules/user.ts b/src/central-server/admin-service/ui/src/store/modules/user.ts
@@ -108,6 +108,7 @@ export const useUser = defineStore('user', {
         },
         data,
       }).then(() => {
+        sessionStorage.clear();
         this.authenticated = true;
         this.isSessionAlive = true;
       });
@@ -145,6 +146,7 @@ export const useUser = defineStore('user', {
     logout(reload = true) {
       // Clear auth data
       this.clearAuth();
+      sessionStorage.clear();
 
       // Call backend for logout
       axiosAuth

diff --git a/src/security-server/admin-service/ui/src/components/ui/SnackBar.vue b/src/security-server/admin-service/ui/src/components/ui/SnackBar.vue
@@ -24,54 +24,53 @@
    THE SOFTWARE.
  -->
 <template>
-  <!-- Success -->
-  <v-snackbar
-    v-for="notification in successNotifications"
-    :key="notification.timeAdded"
-    v-model="notification.show"
-    data-test="success-snackbar"
-    :timeout="snackbarTimeout(notification)"
-    :color="colors.Success10"
-    :transition="transitionName"
-    multi-line
-    class="success-snackbar"
-    :min-width="760"
-    :close-on-back="false"
-    @update:model-value="closeSuccess(notification.timeAdded)"
-  >
-    <div class="row-wrapper-top scrollable identifier-wrap">
-      <xrd-icon-base :color="colors.Success100">
-        <xrd-icon-checker />
-      </xrd-icon-base>
-      <div class="row-wrapper">
-        <div v-if="notification.successMessage">
+  <div>
+    <!-- Success -->
+    <v-snackbar
+      v-model="notification.show"
+      v-for="notification in currentSuccessNotifications"
+      :key="notification.timeAdded"
+      :transition="transitionName"
+      :timeout="snackbarTimeout(notification.timeout)"
+      :color="colors.Success10"
+      :min-width="760"
+      :close-on-back="false"
+      data-test="success-snackbar"
+      class="success-snackbar"
+      multi-line
+      @update:model-value="closeSuccess(notification.timeAdded)"
+    >
+      <div class="row-wrapper-top scrollable identifier-wrap">
+        <xrd-icon-base :color="colors.Success100">
+          <xrd-icon-checker />
+        </xrd-icon-base>
+
+        <div v-if="notification.successMessage" class="row-wrapper">
           {{ notification.successMessage }}
         </div>
       </div>
-    </div>
-    <template #actions>
-      <v-btn
-        icon
-        variant="text"
-        rounded
-        :color="colors.Black100"
-        data-test="close-snackbar"
-        @click="closeSuccess(notification.timeAdded)"
-      >
-        <xrd-icon-base>
-          <xrd-icon-close />
-        </xrd-icon-base>
-      </v-btn>
-    </template>
-  </v-snackbar>
+      <template #actions>
+        <v-btn
+          icon
+          variant="text"
+          rounded
+          :color="colors.Black100"
+          data-test="close-snackbar"
+          @click="closeSuccess(notification.timeAdded)"
+        >
+          <xrd-icon-base>
+            <xrd-icon-close />
+          </xrd-icon-base>
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { Colors } from '@/global';
-import { Notification } from '@/ui-types';
-
-import { mapActions, mapWritableState } from 'pinia';
+import { mapActions, mapState } from 'pinia';
 import { useNotifications } from '@/store/modules/notifications';
 
 declare global {
@@ -88,26 +87,18 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapWritableState(useNotifications, ['successNotifications']),
-    transitionName(): string {
-      // Check global window value to see if e2e testing mode should be enabled
-      if (window.e2eTestingMode === true) {
-        return 'no-transition'; // Transition class name that doesn't exist
-      }
-      return 'fade-transition'; // Proper transition class name
-    },
+    ...mapState(useNotifications, ['currentSuccessNotifications']),
+    // Check global window value to see if e2e testing mode should be enabled
+    transitionName: () => (window.e2eTestingMode === true ? 'no-transition' : 'fade-transition'),
   },
   methods: {
     ...mapActions(useNotifications, ['deleteSuccessNotification']),
     closeSuccess(timeAdded: number): void {
       this.deleteSuccessNotification(timeAdded);
     },
-    snackbarTimeout(notification: Notification): number {
-      // Check global window value to see if e2e testing mode should be enabled
-      if (window.e2eTestingMode === true) {
-        return -1;
-      }
-      return notification.timeout;
+    // Check global window value to see if e2e testing mode should be enabled
+    snackbarTimeout(timeout: number) {
+      return window.e2eTestingMode === true ? -1 : timeout;
     },
   },
 });
@@ -128,22 +119,21 @@ export default defineComponent({
   justify-content: space-between;
   align-items: center;
   padding-left: 14px;
-}
 
-.row-wrapper {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  width: 100%;
-  overflow-wrap: break-word;
-  justify-content: flex-start;
-  margin-right: 30px;
-  margin-left: 26px;
-  color: #211e1e;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 18px;
-  line-height: 24px;
+  .row-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-wrap: break-word;
+    justify-content: flex-start;
+    margin-right: 30px;
+    margin-left: 26px;
+    color: #211e1e;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 24px;
+  }
 }
 
 .scrollable {

diff --git a/src/security-server/admin-service/ui/src/router.ts b/src/security-server/admin-service/ui/src/router.ts
@@ -94,6 +94,7 @@ router.beforeEach(async (to: RouteLocationNormalized) => {
 
   const notifications = useNotifications();
   notifications.clearErrorNotifications();
+  notifications.readyUpDelayed();
 
   // 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

diff --git a/src/security-server/admin-service/ui/src/store/modules/notifications.ts b/src/security-server/admin-service/ui/src/store/modules/notifications.ts
@@ -85,6 +85,11 @@ export const useNotifications = defineStore('notifications', {
       successNotifications: [] as Notification[],
     };
   },
+  getters: {
+    currentSuccessNotifications(state): string {
+      return state.successNotifications.filter((not) => !not.delayed);
+    },
+  },
 
   actions: {
     clearErrorNotifications(): void {
@@ -108,6 +113,14 @@ export const useNotifications = defineStore('notifications', {
       this.$reset();
     },
 
+    readyUpDelayed() {
+      this.successNotifications
+        .filter((not) => not.delayed)
+        .forEach((not) => {
+          not.delayed = false;
+        });
+    },
+
     // Show error notification with axios error object
     showError(errorObject: unknown, asWarning = false): void {
       // Show error using the x-road specific data in an axios error object
@@ -168,10 +181,11 @@ export const useNotifications = defineStore('notifications', {
       );
     },
 
-    showSuccess(messageText: string | TranslateResult): void {
+    showSuccess(messageText: string | TranslateResult, delayed = false): void {
       // Show success snackbar with text string
       const notification = createEmptyNotification(3000);
       notification.successMessage = messageText as string;
+      notification.delayed = delayed;
       this.successNotifications.push(notification);
     },
 

diff --git a/src/security-server/admin-service/ui/src/store/modules/services.ts b/src/security-server/admin-service/ui/src/store/modules/services.ts
@@ -25,12 +25,7 @@
  */
 
 import { defineStore } from 'pinia';
-import {
-  Endpoint,
-  Service,
-  ServiceClient,
-  ServiceDescription,
-} from '@/openapi-types';
+import { Endpoint, Service, ServiceClient, ServiceDescription } from '@/openapi-types';
 import * as api from '@/util/api';
 import { encodePathParameter } from '@/util/api';
 import { sortServiceDescriptionServices } from '@/util/sorting';
@@ -77,23 +72,13 @@ export const useServices = defineStore('services', {
 
   actions: {
     expandDesc(id: string) {
-      const index = this.expandedServiceDescriptions.findIndex((element) => {
-        return element === id;
-      });
-
-      if (index === -1) {
-        this.expandedServiceDescriptions.push(id);
-      }
+      this.expandedServiceDescriptions.push(id);
+      this.expandedServiceDescriptions = [...new Set(this.expandedServiceDescriptions)];
     },
 
     hideDesc(id: string) {
-      const index = this.expandedServiceDescriptions.findIndex((element) => {
-        return element === id;
-      });
-
-      if (index >= 0) {
-        this.expandedServiceDescriptions.splice(index, 1);
-      }
+      this.expandedServiceDescriptions = this.expandedServiceDescriptions
+        .filter(item => item !== id);
     },
 
     setService(service: Service) {

diff --git a/src/security-server/admin-service/ui/src/store/modules/tokens.ts b/src/security-server/admin-service/ui/src/store/modules/tokens.ts
@@ -26,8 +26,8 @@
 
 import { Key, Token, TokenCertificate, TokenPinUpdate } from '@/openapi-types';
 import * as api from '@/util/api';
-import { deepClone } from '@/util/helpers';
 import { encodePathParameter } from '@/util/api';
+import { deepClone } from '@/util/helpers';
 import { useAlerts } from './alerts';
 import { defineStore } from 'pinia';
 
@@ -125,31 +125,31 @@ export const useTokens = defineStore('tokens', {
 
     tokensFilteredByName:
       (state) =>
-      (search: string | undefined): Token[] => {
-        // Filter term is applied to token name
-        const arr: Token[] = sortTokens(state.tokens);
+        (search: string | undefined): Token[] => {
+          // Filter term is applied to token name
+          const arr: Token[] = sortTokens(state.tokens);
 
-        if (!search || search.length < 1) {
-          return arr;
-        }
+          if (!search || search.length < 1) {
+            return arr;
+          }
 
-        const mysearch = search.toLowerCase();
+          const mysearch = search.toLowerCase();
 
-        return arr.filter((token: Token) => {
-          return token.name.toLowerCase().includes(mysearch);
-        });
-      },
+          return arr.filter((token: Token) => {
+            return token.name.toLowerCase().includes(mysearch);
+          });
+        },
   },
 
   actions: {
     expandToken(id: string) {
-      const index = this.expandedTokens.findIndex((element) => {
-        return element === id;
-      });
+      this.expandedTokens.push(id);
+      this.expandedTokens = [...new Set(this.expandedTokens)];
+    },
 
-      if (index === -1) {
-        this.expandedTokens.push(id);
-      }
+    hideToken(id: string) {
+      this.expandedTokens = this.expandedTokens
+        .filter(item => item !== id);
     },
 
     fetchTokens() {
@@ -164,16 +164,6 @@ export const useTokens = defineStore('tokens', {
         });
     },
 
-    hideToken(id: string) {
-      const index = this.expandedTokens.findIndex((element) => {
-        return element === id;
-      });
-
-      if (index >= 0) {
-        this.expandedTokens.splice(index, 1);
-      }
-    },
-
     setSelectedToken(token: Token) {
       this.selectedToken = token;
     },

diff --git a/src/security-server/admin-service/ui/src/store/modules/user.ts b/src/security-server/admin-service/ui/src/store/modules/user.ts
@@ -140,6 +140,7 @@ export const useUser = defineStore('user', {
         data,
       })
         .then(() => {
+          sessionStorage.clear();
           this.authenticated = true;
           this.sessionAlive = true;
         })

diff --git a/src/security-server/admin-service/ui/src/ui-types.ts b/src/security-server/admin-service/ui/src/ui-types.ts
@@ -76,7 +76,7 @@ export interface Notification {
   responseData?: string;
   url?: string;
   status?: string;
-  preserve?: boolean;
+  delayed?: boolean;
 }
 
 export type SessionStatus = {

diff --git a/src/security-server/admin-service/ui/src/views/ClientTlsCertificate/ClientTlsCertificate.vue b/src/security-server/admin-service/ui/src/views/ClientTlsCertificate/ClientTlsCertificate.vue
@@ -50,7 +50,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { Permissions } from '@/global';
+import { Permissions, RouteName } from '@/global';
 import * as api from '@/util/api';
 import { encodePathParameter } from '@/util/api';
 import { CertificateDetails } from '@/openapi-types';
@@ -123,7 +123,7 @@ export default defineComponent({
         )
         .then(
           () => {
-            this.showSuccess(this.$t('cert.certDeleted'));
+            this.showSuccess(this.$t('cert.certDeleted'), true);
           },
           (error) => {
             this.showError(error);