Merge pull request #2472 from nordic-institute/mail-status-text

chore: update diagnostic group title to add help text for clarity
nordic-institute · Dec 11, 2024 · d6483a6 · d6483a6
2 parents 23931a9 + 14bff1d
commit d6483a6
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 27 deletions.
diff --git a/.../views/KeysAndCertificates/HelpButton.vue → ...rvice/ui/src/components/ui/HelpButton.vue b/.../views/KeysAndCertificates/HelpButton.vue → ...rvice/ui/src/components/ui/HelpButton.vue
@@ -40,7 +40,7 @@
       :text="helpText"
       @cancel="closeHelp"
     >
-      <v-img :src="helpImage"></v-img>
+      <v-img v-if="helpImage" :src="helpImage"></v-img>
     </xrd-help-dialog>
   </div>
 </template>
@@ -57,7 +57,7 @@ export default defineComponent({
   props: {
     helpImage: {
       type: String,
-      required: true,
+      required: false,
     },
     helpTitle: {
       type: String,

diff --git a/src/security-server/admin-service/ui/src/locales/en.json b/src/security-server/admin-service/ui/src/locales/en.json
@@ -197,6 +197,10 @@
     },
     "mailNotificationConfiguration": {
       "title": "Mail notification status",
+      "help": {
+        "title": "Different mail notification statuses available",
+        "description": "Mail notifications are sent automatically to configured recipients for the following events depending on the configuration: authentication certificate renewal over ACME succeeded / failed, signing certificate renewal over ACME succeeded / failed, authentication certificate registration succeeded. Enabling email notifications requires changes to the Security Server’s configuration. Please see the Security Server User Guide for details."
+      },
       "failureEnabled": "Failure notifications",
       "successEnabled": "Success notifications",
       "configuration": "Mail server configuration",

diff --git a/...ecurity-server/admin-service/ui/src/views/Diagnostics/DiagnosticsMailNotificationCard.vue b/...ecurity-server/admin-service/ui/src/views/Diagnostics/DiagnosticsMailNotificationCard.vue
@@ -26,7 +26,12 @@
 <template>
   <v-card variant="flat" class="xrd-card diagnostic-card">
     <v-card-title class="text-h5" data-test="diagnostics-mail-notification">
-      {{ $t('diagnostics.mailNotificationConfiguration.title') }}
+      {{ $t('diagnostics.mailNotificationConfiguration.title')
+      }}<HelpButton
+        class="help-icon"
+        help-text="diagnostics.mailNotificationConfiguration.help.description"
+        help-title="diagnostics.mailNotificationConfiguration.help.title"
+      />
     </v-card-title>
 
     <v-card-text class="xrd-card-text">
@@ -58,7 +63,10 @@
         <tbody>
           <tr>
             <td data-test="mail-success-notification-status">
-              <div class="status-wrapper" v-if="mailNotificationStatus.success_status !== undefined">
+              <div
+                class="status-wrapper"
+                v-if="mailNotificationStatus.success_status !== undefined"
+              >
                 <xrd-status-icon
                   v-if="mailNotificationStatus.success_status"
                   status="ok"
@@ -72,7 +80,10 @@
               </div>
             </td>
             <td data-test="mail-failure-notification-status">
-              <div class="status-wrapper" v-if="mailNotificationStatus.failure_status !== undefined">
+              <div
+                class="status-wrapper"
+                v-if="mailNotificationStatus.failure_status !== undefined"
+              >
                 <xrd-status-icon
                   v-if="mailNotificationStatus.failure_status"
                   status="ok"
@@ -86,7 +97,12 @@
               </div>
             </td>
             <td data-test="mail-notification-configuration-status">
-              <div class="status-wrapper" v-if="mailNotificationStatus.configuration_present !== undefined">
+              <div
+                class="status-wrapper"
+                v-if="
+                  mailNotificationStatus.configuration_present !== undefined
+                "
+              >
                 <xrd-status-icon
                   v-if="mailNotificationStatus.configuration_present"
                   status="ok"
@@ -135,6 +151,7 @@ import { mapActions, mapState } from 'pinia';
 import { useNotifications } from '@/store/modules/notifications';
 import { useMail } from '@/store/modules/mail';
 import { defineComponent } from 'vue';
+import HelpButton from '@/components/ui/HelpButton.vue';
 
 type TestMailStatuses = {
   [key: string]: {
@@ -144,6 +161,9 @@ type TestMailStatuses = {
 };
 
 export default defineComponent({
+  components: {
+    HelpButton,
+  },
   computed: {
     ...mapState(useMail, ['mailNotificationStatus']),
   },
@@ -215,4 +235,8 @@ h3 {
   flex-direction: row;
   align-items: center;
 }
+
+.help-icon {
+  display: inline-block;
+}
 </style>
diff --git a/src/security-server/admin-service/ui/src/views/KeysAndCertificates/ApiKey/ApiKey.vue b/src/security-server/admin-service/ui/src/views/KeysAndCertificates/ApiKey/ApiKey.vue
@@ -40,14 +40,11 @@
         data-test="api-key-create-key-button"
         @click="createApiKey()"
       >
-        <xrd-icon-base class="xrd-large-button-icon"
-        >
-          <XrdIconAdd
-          />
+        <xrd-icon-base class="xrd-large-button-icon">
+          <XrdIconAdd />
         </xrd-icon-base>
         {{ $t('apiKey.createApiKey.title') }}
-      </xrd-button
-      >
+      </xrd-button>
     </div>
 
     <!-- Table -->
@@ -86,19 +83,17 @@
             :data-test="`api-key-row-${item.id}-edit-button`"
             :outlined="false"
             @click="editKey(item)"
-          >{{ $t('action.edit') }}
-          </xrd-button
-          >
+            >{{ $t('action.edit') }}
+          </xrd-button>
 
           <xrd-button
             v-if="canRevoke"
             text
             :data-test="`api-key-row-${item.id}-revoke-button`"
             :outlined="false"
             @click="showRevokeDialog(item)"
-          >{{ $t('apiKey.table.action.revoke.button') }}
-          </xrd-button
-          >
+            >{{ $t('apiKey.table.action.revoke.button') }}
+          </xrd-button>
         </div>
       </template>
 
@@ -176,7 +171,7 @@
 import { defineComponent } from 'vue';
 
 import { ApiKey } from '@/global-types';
-import HelpButton from '../HelpButton.vue';
+import HelpButton from '@/components/ui/HelpButton.vue';
 import { Permissions, Roles, RouteName } from '@/global';
 import * as api from '@/util/api';
 import { mapActions, mapState } from 'pinia';
@@ -189,7 +184,7 @@ import { XrdIconKey } from '@niis/shared-ui';
 export default defineComponent({
   components: {
     HelpButton,
-    XrdIconKey
+    XrdIconKey,
   },
   data() {
     return {

diff --git a/...c/views/KeysAndCertificates/SecurityServerTlsCertificate/SecurityServerTlsCertificate.vue b/...c/views/KeysAndCertificates/SecurityServerTlsCertificate/SecurityServerTlsCertificate.vue
@@ -133,7 +133,7 @@ import { CertificateDetails } from '@/openapi-types';
 import * as api from '@/util/api';
 import GenerateTlsAndCertificateDialog from '@/views/KeysAndCertificates/SecurityServerTlsCertificate/GenerateTlsAndCertificateDialog.vue';
 import { saveResponseAsFile } from '@/util/helpers';
-import HelpButton from '../HelpButton.vue';
+import HelpButton from '@/components/ui/HelpButton.vue';
 import { mapActions, mapState } from 'pinia';
 import { useUser } from '@/store/modules/user';
 import { useNotifications } from '@/store/modules/notifications';

diff --git a/...server/admin-service/ui/src/views/KeysAndCertificates/SignAndAuthKeys/SignAndAuthKeys.vue b/...server/admin-service/ui/src/views/KeysAndCertificates/SignAndAuthKeys/SignAndAuthKeys.vue
@@ -77,7 +77,7 @@ import { defineComponent } from 'vue';
 import { RouteName } from '@/global';
 import TokenExpandable from './TokenExpandable.vue';
 import TokenLoginDialog from '@/components/token/TokenLoginDialog.vue';
-import HelpButton from '../HelpButton.vue';
+import HelpButton from '@/components/ui/HelpButton.vue';
 import { mapActions, mapState } from 'pinia';
 import { useNotifications } from '@/store/modules/notifications';
 import { useTokens } from '@/store/modules/tokens';
@@ -90,7 +90,7 @@ import {
   TokenCertificateSigningRequest,
 } from '@/openapi-types';
 import { deepClone } from '@/util/helpers';
-import { useCsr } from "@/store/modules/certificateSignRequest";
+import { useCsr } from '@/store/modules/certificateSignRequest';
 
 export default defineComponent({
   components: {
@@ -212,10 +212,9 @@ export default defineComponent({
         .finally(() => {
           this.loading = false;
         });
-      this.fetchCertificateAuthorities()
-        .catch((error) => {
-          this.showError(error);
-        });
+      this.fetchCertificateAuthorities().catch((error) => {
+        this.showError(error);
+      });
     },
     acceptTokenLogout(): void {
       if (!this.selectedToken) {