Quick setup: enable jumping back to completed stage

CMK-18878 Change-Id: Ibdf156598eaa28c889fa94a828630f21790ecdb8
Checkmk · Oct 1, 2024 · b10b808 · b10b808
1 parent a2f28f4
commit b10b808
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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,16 +91,34 @@ 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,
  var(--qs-stage-line-color) 50px
  );
  }
 
- &.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
@@ -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
@@ -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>