From 8f1253ec02abaf9804109e894e986516581293ae Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Wed, 22 Oct 2025 21:49:12 +0100
Subject: [PATCH] Reinstate welcome pane in refactored wizard.

---
 .../modalComponents/calibrationWizard.vue     | 11 +++--
 .../calibrationWizardTask.vue                 | 37 ++++++++++++---
 .../singleStepTask.vue                        | 47 +++++++++++++++++++
 .../welcomeStep.vue                           | 23 +++++++++
 .../tabContentComponents/settingsContent.vue  |  1 -
 5 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
 create mode 100644 webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue

diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index f57edccc..92f121f8 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -5,9 +5,9 @@
 
       <component
         v-if="currentTask"
-        :is="currentTask"
+        :is="currentTask.component"
         :key="taskIndex"
-        :num="taskIndex"
+        v-bind="currentTask.props"
         :first="isFirstTask"
         :final="isFinalTask"
         :startOnLast="movingBackward"
@@ -20,7 +20,8 @@
 </template>
 
 <script>
-import calibrationWizardTask from "./calibrationWizardComponents/calibrationWizardTask.vue";
+import singleStepTask from "./calibrationWizardComponents/singleStepTask.vue";
+import welcomeStep from "./calibrationWizardComponents/welcomeStep.vue";
 
 export default {
   name: "calibrationWizard",
@@ -57,7 +58,9 @@ export default {
       "camera_stage_mapping"
     ];
     this.calibrateableThings = thingsToCheck.filter(name => this.thingAvailable(name));
-    this.tasks = [calibrationWizardTask, calibrationWizardTask, calibrationWizardTask];
+    this.tasks = [
+      {component: singleStepTask, props: {stepComponent: welcomeStep}},
+    ]
   },
 
   methods: {
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
index c31ae71b..bcaed719 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
@@ -1,6 +1,22 @@
+<!-- The base component for a wizard task.
+
+Do not import this directly into CalibrationWizard as the list of steps and props
+will be confusing.
+
+A task should be used for higher level groupings of individual steps in the wizard,
+such as calibrating a Thing.
+
+Tasks can be divided into multiple steps.
+
+-->
 <template>
   <div>
-    <p>{{num}}.{{stepIndex}}</p>
+    <component
+      v-if="currentStep"
+      :is="currentStep.component"
+      :key="stepIndex"
+      v-bind="currentStep.props"
+    />
     <p class="uk-text-right">
       <button
         v-if="showBackButton"
@@ -22,11 +38,11 @@
 </template>
 
 <script>
+
 export default {
   name: "calibrationWizardTask",
 
   props: {
-    num: Number,
     first: Boolean,
     final: Boolean,
     startOnLast: {
@@ -34,23 +50,30 @@ export default {
       default: false
     },
     steps: {
-      type: Number,
-      default: 2
+      type: Array,
+      required: true
     }
   },
 
   data() {
     return {
-      stepIndex: this.startOnLast ? this.steps-1 : 0
+      stepIndex: this.startOnLast ? this.steps.length-1 : 0
     };
   },
 
+  mounted() {
+    console.log("Steps received:", this.steps);
+  },
+
   computed: {
+    currentStep() {
+      return this.steps[this.stepIndex] || null;
+    },
     showBackButton() {
       return !this.first || this.stepIndex > 0;
     },
     nextButtonText() {
-      return this.final && this.stepIndex === this.steps - 1 ? "Finish" : "Next";
+      return this.final && this.stepIndex === this.steps.length - 1 ? "Finish" : "Next";
     }
   },
 
@@ -70,7 +93,7 @@ export default {
      * Move to the next step in this task, or the next task if final step.
      */
     nextStep: function() {
-      if (this.stepIndex < this.steps - 1) {
+      if (this.stepIndex < this.steps.length - 1) {
         this.stepIndex = this.stepIndex + 1;
         return true;
       } else {
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
new file mode 100644
index 00000000..908772c7
--- /dev/null
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
@@ -0,0 +1,47 @@
+<template>
+  <calibrationWizardTask
+    :first="first"
+    :final="final"
+    :startOnLast="startOnLast"
+    :steps="steps"
+    @next="$emit('next')"
+    @back="$emit('back')"
+  />
+</template>
+
+<script>
+import calibrationWizardTask from "./calibrationWizardTask.vue";
+
+export default {
+  name: "singleStepTask",
+  components: {calibrationWizardTask},
+  props: {
+    // This must be sent
+    stepComponent: Object,
+    // This is optional.
+    stepProps: {
+      type: Object,
+      default: () => ({})
+    },
+    // Standard calibrationWizardTask props below:
+    first: Boolean,
+    final: Boolean,
+    startOnLast: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  data: function() {
+    return {
+      steps: [
+        {component: this.stepComponent, props: this.stepProps}
+      ]
+    };
+  },
+
+  mounted(){
+    console.log(this.stepComponent);
+  }
+}
+</script>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
new file mode 100644
index 00000000..9308be80
--- /dev/null
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>
+      <b>
+        Some important microscope calibration data is currently missing.
+      </b>
+    </p>
+    <p>
+        Your microscope will still function, however some functionality will
+        be limited, and image quality will likely suffer.
+    </p>
+    <p>
+      <b>Click Next to begin microscope calibration.</b>
+    </p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "welcomeStep"
+}
+</script>
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index d6654ff0..2a6311c7 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -3,7 +3,6 @@
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <calibrationWizard
       ref="calibrationWizard"
-      @onClose="enterApp()"
     ></calibrationWizard>
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">