fix: reset not working

refactored code

frontend/src/components/Modals/HelpModal.vue

@@ -7,12 +7,7 @@
   >
     <div class="flex items-center justify-between">
       <div class="text-base font-medium ml-1">
-        <div v-if="!isOnboardingStepsCompleted && !showHelpCenter">
-          {{ __('Getting started') }}
-        </div>
-        <div v-else-if="showHelpCenter">
-          {{ __('Help center') }}
-        </div>
+        {{ __(title) }}
       </div>
       <div>
         <Button @click="minimize = !minimize" variant="ghost">
@@ -29,22 +24,13 @@
     <div class="h-full overflow-hidden flex flex-col">
       <OnboardingSteps v-if="!isOnboardingStepsCompleted && !showHelpCenter" />
     </div>
-    <div class="flex flex-col gap-1.5">
+    <div v-for="item in footerItems" class="flex flex-col gap-1.5">
       <div
-        v-if="!isOnboardingStepsCompleted && !showHelpCenter"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
-        @click="showHelpCenter = !showHelpCenter"
+        @click="item.onClick"
       >
-        <HelpIcon class="h-4" />
-        <div class="text-base">{{ __('Help centre') }}</div>
-      </div>
-      <div
-        v-if="showHelpCenter && !isOnboardingStepsCompleted"
-        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
-        @click="showHelpCenter = !showHelpCenter"
-      >
-        <StepsIcon class="h-4" />
-        <div class="text-base">{{ __('Getting started') }}</div>
+        <component :is="item.icon" class="h-4" />
+        <div class="text-base">{{ __(item.label) }}</div>
       </div>
     </div>
   </div>
@@ -55,9 +41,61 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
 import OnboardingSteps from '@/components/OnboardingSteps.vue'
-import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
-import { ref } from 'vue'
+import {
+  isOnboardingStepsCompleted,
+  minimize,
+  useOnboarding,
+} from '@/composables/onboarding'
+import { onMounted, computed } from 'vue'
 
 const show = defineModel()
 const showHelpCenter = ref(false)
+
+const title = computed(() => {
+  if (!isOnboardingStepsCompleted.value && !showHelpCenter.value) {
+    return __('Getting started')
+  } else if (showHelpCenter.value) {
+    return __('Help center')
+  }
+})
+
+const footerItems = computed(() => {
+  let items = [
+    {
+      icon: HelpIcon,
+      label: __('Help centre'),
+      onClick: () => {
+        showHelpCenter.value = true
+      },
+      condition: !isOnboardingStepsCompleted.value && !showHelpCenter.value,
+    },
+    {
+      icon: StepsIcon,
+      label: __('Getting started'),
+      onClick: () => (showHelpCenter.value = false),
+      condition: showHelpCenter.value && !isOnboardingStepsCompleted.value,
+    },
+    {
+      icon: StepsIcon,
+      label: __('Reset onboarding steps'),
+      onClick: resetOnboardingSteps,
+      condition: showHelpCenter.value && isOnboardingStepsCompleted.value,
+    },
+  ]
+
+  return items.filter((item) => item.condition)
+})
+
+function resetOnboardingSteps() {
+  const { reset } = useOnboarding()
+  reset()
+  isOnboardingStepsCompleted.value = false
+  showHelpCenter.value = false
+}
+
+onMounted(() => {
+  if (isOnboardingStepsCompleted.value) {
+    showHelpCenter.value = true
+  }
+})
 </script>

frontend/src/composables/onboarding.js

@@ -199,7 +199,7 @@ export function useOnboarding() {
   }
 
   function reset() {
-    updateAll(false)
+    updateAll(false, true)
   }
 
   function updateOnboardingStep(step, skipped = false) {
@@ -235,8 +235,8 @@ export function useOnboarding() {
     })
   }
 
-  function updateAll(value) {
-    if (isOnboardingStepsCompleted.value) return
+  function updateAll(value, reset = false) {
+    if (isOnboardingStepsCompleted.value && !reset) return
     let user = window.user
     if (!user) return false