activate changes: generic api fail message + new error variant of the Dialog component

CMK-31577

Change-Id: Ifd5ddeeebb1d6afec5d1c36721b707d62af7e033

Author: gavinmcguigan

packages/cmk-frontend-vue/demo/components/system-feedback/DemoCmkDialog.vue

@@ -27,4 +27,24 @@ defineProps<{ screenshotMode: boolean }>()
     :buttons="[{ title: 'Button 1', onclick: () => console.log('bar'), variant: 'info' }]"
   />
   <CmkDialog :message="'Very simple message'" />
+
+  <CmkDialog
+    :title="'Title'"
+    :message="'Some message, dismissal will be stored in localStorage for this session and sent to backend for retrieval.'"
+    :buttons="[{ title: 'Button 1', onclick: () => console.log('foo'), variant: 'danger' }]"
+    :dismissal_button="{ title: 'Dismiss', key: 'immediate_slideout_change' }"
+    :variant="'error'"
+  />
+  <CmkDialog
+    :title="'Title'"
+    :message="'Some message with buttons.'"
+    :buttons="[{ title: 'Button 1', onclick: () => console.log('foo'), variant: 'danger' }]"
+    :variant="'error'"
+  />
+  <CmkDialog
+    :message="'Simple message with a button without title'"
+    :buttons="[{ title: 'Button 1', onclick: () => console.log('bar'), variant: 'danger' }]"
+    :variant="'error'"
+  />
+  <CmkDialog :message="'Very simple message'" :variant="'error'" />
 </template>

packages/cmk-frontend-vue/src/components/CmkDialog.vue

@@ -4,6 +4,7 @@ This file is part of Checkmk (https://checkmk.com). It is subject to the terms a
 conditions defined in the file COPYING, which is part of this source code package.
 -->
 <script setup lang="ts">
+import { cva } from 'class-variance-authority'
 import type { components } from 'cmk-shared-typing/typescript/openapi_internal'
 import { onMounted, ref } from 'vue'
 
@@ -21,12 +22,25 @@ export interface CmkDialogProps {
   message: TranslatedString
   buttons?: { title: TranslatedString; variant: ButtonVariants['variant']; onclick: () => void }[]
   dismissal_button?: { title: TranslatedString; key: DismissalButtonKey }
+  variant?: 'info' | 'error'
 }
 
 export type DismissalButtonKey = components['schemas']['UserDismissWarning']['warning']
 
 const props = defineProps<CmkDialogProps>()
 
+const propsCva = cva('', {
+  variants: {
+    variant: {
+      error: 'cmk-dialog__icon-box--error',
+      info: 'cmk-dialog__icon-box--info'
+    }
+  },
+  defaultVariants: {
+    variant: 'info'
+  }
+})
+
 const dialogHidden = props.dismissal_button
   ? usePersistentRef(props.dismissal_button.key, false, (v) => v as boolean, 'session')
   : ref(false)
@@ -51,8 +65,12 @@ onMounted(() => {
 
 <template>
   <div v-if="!dialogHidden" class="cmk-dialog help">
-    <div class="info_icon">
-      <CmkIcon name="info" />
+    <div :class="['cmk-dialog__icon-box', propsCva({ variant: props.variant })]">
+      <CmkIcon
+        :class="'cmk-dialog__icon'"
+        :name="props.variant === 'error' ? 'host-svc-problems' : 'info'"
+        :size="'small'"
+      />
     </div>
     <div class="cmk-dialog__content">
       <span v-if="props.title" class="cmk-dialog__title">{{ props.title }}<br /></span>
@@ -93,5 +111,24 @@ div.cmk-dialog {
       display: block;
     }
   }
+
+  .cmk-dialog__icon-box {
+    display: flex;
+    align-items: center;
+    border-radius: var(--dimension-3) 0 0 var(--dimension-3);
+  }
+
+  .cmk-dialog__icon-box--info {
+    background-color: var(--color-dark-blue-50);
+  }
+
+  .cmk-dialog__icon-box--error {
+    background-color: var(--color-dark-red-50);
+  }
+
+  .cmk-dialog__icon {
+    filter: brightness(0) invert(1);
+    padding: var(--dimension-4);
+  }
 }
 </style>

packages/cmk-frontend-vue/src/main-menu/changes/ChangesApp.vue

@@ -52,7 +52,7 @@ const restAPI = new Api(`api/1.0/`, [['Content-Type', 'application/json']])
 const ajaxCall = new Api()
 const activateChangesInProgress = ref<boolean>(false)
 const alreadyMadeAjaxCall = ref<boolean>(false)
-const activationError = ref<string | null>(null)
+const activationError = ref<boolean>(false)
 
 const sitesAndChanges = ref<SitesAndChanges>({
   sites: [],
@@ -160,10 +160,10 @@ async function activateAllChanges() {
     activationPollStartTime.value = Date.now()
     void pollActivationStatusUntilComplete(activateChangesResponse.id)
     return
-  } catch (error) {
+  } catch {
     await fetchPendingChangesAjax()
     activateChangesInProgress.value = false
-    activationError.value = `Activation failed: ${error}`
+    activationError.value = true
   }
 }
 
@@ -213,7 +213,7 @@ async function checkIfMenuActive(): Promise<void> {
   if (mainMenu.isNavItemActive('changes')) {
     if (!alreadyMadeAjaxCall.value) {
       recentlyActivatedSites.value = []
-      activationError.value = null
+      activationError.value = false
       await fetchPendingChangesAjax()
       alreadyMadeAjaxCall.value = true
     }
@@ -349,9 +349,21 @@ onMounted(async () => {
       <CmkAlertBox v-if="!userCanActivateSelectedSites" variant="warning" class="cmk-alert-box">
         {{ _t('Sorry, you are not allowed to activate changes of other users.') }}
       </CmkAlertBox>
-      <CmkAlertBox v-if="activationError" variant="error" class="cmk-alert-box">
-        {{ activationError }}
-      </CmkAlertBox>
+
+      <CmkDialog
+        v-if="activationError"
+        :title="_t('Activation of changes failed')"
+        :message="_t(`Open the full activation page for more details.`)"
+        :buttons="[
+          {
+            title: _t('Open full view'),
+            variant: 'danger',
+            onclick: () => openActivateChangesPage()
+          }
+        ]"
+        variant="error"
+      />
+
       <CmkAlertBox
         v-if="sitesAndChanges.licenseMessage !== null"
         variant="warning"