From b10b80826184ad1e397d05048e98a67f36045ba7 Mon Sep 17 00:00:00 2001
From: Kenneth Okoh <kenneth.okoh@checkmk.com>
Date: Thu, 26 Sep 2024 12:42:58 +0200
Subject: [PATCH] Quick setup: enable jumping back to completed stage

CMK-18878

Change-Id: Ibdf156598eaa28c889fa94a828630f21790ecdb8
---
 .../src/quick-setup/QuickSetupAsync.vue       |  1 +
 .../components/quick-setup/QuickSetup.vue     |  1 +
 .../quick-setup/QuickSetupStage.vue           | 46 +++++++++++--------
 .../quick-setup/quick_setup_types.ts          |  3 ++
 .../components/ui/label/UiLabel.vue           | 12 ++++-
 5 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/packages/cmk-frontend-vue/src/quick-setup/QuickSetupAsync.vue b/packages/cmk-frontend-vue/src/quick-setup/QuickSetupAsync.vue
index eeda8d6e94b..f4be8404cc8 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/QuickSetupAsync.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/QuickSetupAsync.vue
@@ -163,6 +163,7 @@ const regularStages = computed((): QuickSetupStageSpec[] => {
       title: stg.title,
       sub_title: stg.sub_title || null,
       recapContent: renderRecap(stg.recap || []),
+      goToThisStage: () => quickSetupHook.goto(index),
       content: renderContent(
         stg.components || [],
         (value) => update(index, value),
diff --git a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetup.vue b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetup.vue
index 95704bf5ce9..d38f32b9c4e 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetup.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetup.vue
@@ -34,6 +34,7 @@ const isSaveStage = computed(() => props.currentStage === numberOfStages.value)
       :content="stg.content || null"
       :recap-content="stg.recapContent || null"
       :errors="stg.errors"
+      :go-to-this-stage="stg.goToThisStage || null"
     />
   </ol>
   <QuickSetupSaveStage
diff --git a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetupStage.vue b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetupStage.vue
index f08c8ba9ccb..fe4a1ca109f 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetupStage.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/QuickSetupStage.vue
@@ -18,18 +18,22 @@ const props = defineProps<QuickSetupStageProps>()
 const isSelectedStage = computed(() => props.index == props.currentStage)
 const isCompleted = computed(() => props.index < props.currentStage)
 const isOpen = computed(() => isSelectedStage.value || props.mode === 'overview')
+const onClickGoTo = computed(() =>
+  !!props.goToThisStage && props.currentStage > props.index ? () => props.goToThisStage!() : null
+)
 </script>
 
 <template>
   <li
     class="qs-stage"
     :class="{
-      active: isSelectedStage,
-      complete: isCompleted
+      'qs-stage-active': isSelectedStage,
+      'qs-stage-complete': isCompleted
     }"
+    @click="(_mouse_event) => onClickGoTo"
   >
     <div class="qs-stage__content">
-      <Label variant="title">{{ title }}</Label>
+      <Label variant="title" :on-click="onClickGoTo">{{ title }}</Label>
       <Label v-if="!isCompleted && sub_title" variant="subtitle">{{ sub_title }}</Label>
 
       <ErrorBoundary v-if="isCompleted && recapContent">
@@ -76,18 +80,6 @@ const isOpen = computed(() => isSelectedStage.value || props.mode === 'overview'
     background-color: lightgrey;
   }
 
-  &.active:before,
-  &.complete:before {
-    background-color: var(--success-dimmed);
-  }
-
-  &.complete:before {
-    background-image: var(--icon-check);
-    background-repeat: no-repeat;
-    background-position: center;
-    content: '';
-  }
-
   &:not(:last-child):after {
     content: '';
     position: absolute;
@@ -99,7 +91,12 @@ const isOpen = computed(() => isSelectedStage.value || props.mode === 'overview'
     background-color: var(--qs-stage-line-color);
   }
 
-  &.active:after {
+  &.qs-stage-active:before,
+  &.qs-stage-complete:before {
+    background-color: var(--success-dimmed);
+  }
+
+  &.qs-stage-active:after {
     background: linear-gradient(
       to bottom,
       var(--success-dimmed) 50px,
@@ -107,8 +104,21 @@ const isOpen = computed(() => isSelectedStage.value || props.mode === 'overview'
     );
   }
 
-  &.complete:after {
-    background-color: var(--success-dimmed);
+  &.qs-stage-complete {
+    pointer-events: none;
+
+    &:before {
+      background-image: var(--icon-check);
+      background-repeat: no-repeat;
+      background-position: center;
+      content: '';
+      cursor: pointer;
+      pointer-events: all;
+    }
+
+    &:after {
+      background-color: var(--success-dimmed);
+    }
   }
 }
 
diff --git a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/quick_setup_types.ts b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/quick_setup_types.ts
index 165d0accfe8..d6ff72a843f 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/quick_setup_types.ts
+++ b/packages/cmk-frontend-vue/src/quick-setup/components/quick-setup/quick_setup_types.ts
@@ -43,6 +43,9 @@ export interface QuickSetupStageSpec extends QuickSetupSaveStageSpec {
   /** @property {string} title - Title of the stage */
   title: string
 
+  /** @property {undefined | null | () => void} goToThisStage - Method to open the stage */
+  goToThisStage?: (() => void) | null
+
   /** @property {string | null | undefined} sub_title - Subtitle of the stage */
   sub_title?: string | null
 
diff --git a/packages/cmk-frontend-vue/src/quick-setup/components/ui/label/UiLabel.vue b/packages/cmk-frontend-vue/src/quick-setup/components/ui/label/UiLabel.vue
index d2e499aa3bb..b4d364f9360 100644
--- a/packages/cmk-frontend-vue/src/quick-setup/components/ui/label/UiLabel.vue
+++ b/packages/cmk-frontend-vue/src/quick-setup/components/ui/label/UiLabel.vue
@@ -25,6 +25,7 @@ type LabelVariants = VariantProps<typeof labelVariants>
 const props = defineProps<
   LabelProps & {
     variant?: LabelVariants['variant']
+    onClick?: (() => void) | null
   }
 >()
 
@@ -38,7 +39,11 @@ const delegatedProps = computed(() => {
 
 <template>
   <!-- @vue-expect-error Radix-vue props doesn't follow our exactOptionalPropertyTypes rule -->
-  <Label v-bind="delegatedProps" :class="labelVariants({ variant })">
+  <Label
+    v-bind="delegatedProps"
+    :class="[labelVariants({ variant }), { 'qs-ui-label--clickable': !!props.onClick }]"
+    @click="onClick"
+  >
     <slot />
   </Label>
 </template>
@@ -58,5 +63,10 @@ label {
     font-size: var(--font-size-normal);
     margin-bottom: var(--spacing);
   }
+
+  &.qs-ui-label--clickable {
+    cursor: pointer;
+    pointer-events: all;
+  }
 }
 </style>