Fix(ui): button glow timing and banner placement (#13417)

Author: Avirup-001

ui/src/components/flows/TriggerFlow.vue

@@ -3,7 +3,7 @@
         <el-button v-if="playgroundStore.enabled" id="run-all-button" :icon="icon.Play" class="el-button--playground" :disabled="isDisabled() || !playgroundStore.readyToStart" @click="playgroundStore.runUntilTask()">
             {{ $t("playground.run_all_tasks") }}
         </el-button>
-        <el-button v-else id="execute-button" :class="{'onboarding-glow': coreStore.guidedProperties.tourStarted}" :icon="icon.LightningBolt" :type="type" :disabled="isDisabled()" @click="onClick()">
+        <el-button v-else id="execute-button" :class="{'onboarding-glow': coreStore.guidedProperties.glowExecuteButton}" :icon="icon.LightningBolt" :type="type" :disabled="isDisabled()" @click="onClick()">
             {{ $t("execute") }}
         </el-button>
         <el-dialog

ui/src/components/onboarding/VueTour.vue

@@ -353,6 +353,10 @@
             highlightElement: ".top-bar",
             params: {...STEP_OPTIONS, placement: "bottom"},
             before: () => {
+                coreStore.guidedProperties = {
+                    ...coreStore.guidedProperties,
+                    glowExecuteButton: true
+                };
                 return wait();
             },
         },
@@ -369,6 +373,10 @@
                 placement: "bottom",
             },
             before: () => {
+                coreStore.guidedProperties = {
+                    ...coreStore.guidedProperties,
+                    glowExecuteButton: false
+                };
                 return wait()
             },
         },
@@ -414,6 +422,7 @@
         coreStore.guidedProperties = {
             ...coreStore.guidedProperties,
             tourStarted: false,
+            glowExecuteButton: false
         };
 
         TOURS[TOUR_NAME].stop();
@@ -491,7 +500,7 @@ $flow-image-size-container: 36px;
 
     &.last {
         position: fixed;
-        top: 50%;
+        top: 75%;
         left: 50%;
         transform: translate(-50%, -50%);
         max-width: $last-step-max-width;

ui/src/stores/core.ts

@@ -9,6 +9,7 @@ interface GuidedProperties {
     manuallyContinue: boolean;
     template: any;
     saveFlow?: boolean;
+    glowExecuteButton?: boolean;
 }
 
 export const useCoreStore = defineStore("core", () => {