[config_tool] v2 show warning message when users attempt to create a new scenario

fix warning message when users attempt to create a new scenario, or import an existing scenario, for an existing configuration
v1-->v2: update text to align with the design prototype spec.

Tracked-On: #7898
Signed-off-by: Chuang-Ke chuangx.ke@intel.com
Reviewed-by: Junjie Mao junjie.mao@intel.com

misc/config_tools/configurator/packages/configurator/src/pages/Config/Scenario.vue

@@ -2,8 +2,10 @@
   <div class="px-3 py-2 row">
     <div class="border-end-sm py-1 col-sm">
       <div class="py-4 text-center">
+        <OverwriteMessage v-model:show-modal="showOverwriteMessage" :usingWorkingFolder="WorkingFolder"
+                          @overWrite="overWriteScenario"/>
         <NewScenario v-model:show-modal="showCreateScenario" @newScenario="newScenario"/>
-        <button type="button" class="btn btn-primary btn-lg" @click="CreateScenario">
+        <button type="button" class="btn btn-primary btn-lg" @click="checkAndCreateScenario">
           Create Scenario…
         </button>
       </div>
@@ -42,19 +44,22 @@
 </template>
 
 <script>
+import OverwriteMessage from "./Scenario/OverwriteMessage";
 import configurator from "../../lib/acrn";
 import NewScenario from "./Scenario/NewScenario.vue";
 import _ from "lodash";
 
 export default {
   name: "Scenario",
-  components: {NewScenario},
+  components: {NewScenario, OverwriteMessage},
   emits: ['scenarioUpdate'],
   data() {
     return {
+      clickedButton: "",
       scenarioHistory: [],
       currentSelectedScenario: '',
-      showCreateScenario: false
+      showCreateScenario: false,
+      showOverwriteMessage: false
     }
   },
   props: {
@@ -86,36 +91,29 @@ export default {
   },
 
   methods: {
-    CreateScenario() {
+    checkAndCreateScenario() {
+      this.clickedButton = "createScenario"
       if (!_.isEmpty(this.scenario)) {
-        confirm(`Warning: Overwrite the existing scenario file?`)
-            .then((r) => {
-              // user cancel the operation
-              if (!r) {
-                return
-              }
-              // user confirm the operation
-              this.showCreateScenario = true
-            })
+        this.showOverwriteMessage = true
       } else this.showCreateScenario = true
     },
     newScenario(data) {
-
       this.$emit('scenarioUpdate', data)
     },
     checkAndLoadScenario(auto = false) {
+      this.clickedButton = "loadScenario"
       if (!_.isEmpty(this.scenario)) {
-        confirm(`Warning: Overwrite the existing scenario file?`)
-            .then((r) => {
-              // user cancel the operation
-              if (!r) {
-                return
-              }
-              // user confirm the operation
-              this.loadScenario(auto)
-            })
+        this.showOverwriteMessage = true
       } else this.loadScenario(auto)
     },
+    overWriteScenario(auto = false) {
+      if (this.clickedButton === "createScenario") {
+        this.showCreateScenario = true
+      }
+      if (this.clickedButton === "loadScenario") {
+        this.loadScenario(auto)
+      }
+    },
     loadScenario(auto) {
       if (this.currentSelectedScenario.length > 0) {
         configurator.loadScenario(this.currentSelectedScenario)

misc/config_tools/configurator/packages/configurator/src/pages/Config/Scenario/OverwriteMessage.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <b-modal id="my-modal" no-close-on-backdrop
+             title="Scenario XML Overwrite" v-model="showModal"
+             @cancel="cancel"
+             @hidden="cancel"
+             @abort="cancel"
+             @close="cancel"
+             @ok="overWrite"
+             @submit="overWrite"
+             ok-title="Overwrite">
+      <div>Are you sure you want to overwrite the scenario XML file in this working folder?</div>
+      <br>
+      <div>if you continue, the scenario XML file in the following working folder will be overwritten:
+        <br>{{ usingWorkingFolder }}
+      </div>
+      <br>
+      <div>(You must save your configuration to generate new launch scripts associated to your new scenario XML file.)
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OverwriteMessage',
+  props: {
+    usingWorkingFolder: String,
+    showModal: {
+      type: Boolean,
+      default: false
+    },
+  },
+  emits: {'overWrite': null},
+  data() {
+    return {
+      show: false,
+      variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'],
+      headerBgVariant: 'dark',
+      headerTextVariant: 'light',
+      bodyBgVariant: 'light',
+      bodyTextVariant: 'dark',
+      footerBgVariant: 'warning',
+      footerTextVariant: 'dark'
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:showModal', false)
+    },
+    overWrite() {
+      this.$emit('update:showModal', false)
+      this.$emit("overWrite")
+    },
+  }
+}
+</script>