Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/components/HarvesterUpgrade.vue

@@ -1,11 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import { HCI } from '../types';
 import { allHash } from '@shell/utils/promise';
 import { Checkbox } from '@components/Form/Checkbox';
 import ModalWithCard from '@shell/components/ModalWithCard';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { Banner } from '@components/Banner';
-import { HCI } from '../types';
 import UpgradeInfo from './UpgradeInfo';
 export default {
   name: 'HarvesterUpgrade',
@@ -34,7 +34,8 @@ export default {
       selectMode:       true,
       version:          '',
       enableLogging:    true,
-      readyReleaseNote: false
+      readyReleaseNote: false,
+      isOpen:           false,
     };
   },
 
@@ -44,7 +45,7 @@ export default {
     versionOptions() {
       const versions = this.$store.getters['harvester/all'](HCI.VERSION);
 
-      return versions.map(V => V.metadata.name);
+      return versions.map((V) => V.metadata.name);
     },
 
     currentVersion() {
@@ -68,7 +69,7 @@ export default {
         let upgradeMessage = [];
         const list = neu || [];
 
-        const currentResource = list.find( O => !!O.isLatestUpgrade);
+        const currentResource = list.find( (O) => !!O.isLatestUpgrade);
 
         upgradeMessage = currentResource ? currentResource.upgradeMessage : [];
 
@@ -111,12 +112,12 @@ export default {
     },
 
     cancel() {
-      this.$refs.deleteTip.hide();
+      this.isOpen = false;
       this.errors = '';
     },
 
     open() {
-      this.$refs.deleteTip.open();
+      this.isOpen = true;
     },
   }
 };
@@ -131,12 +132,21 @@ export default {
           :cluster="currentCluster.nameDisplay"
         />
       </h1>
-      <button v-if="versionOptions.length" type="button" class="btn bg-warning btn-sm" @click="open">
+      <button
+        v-if="versionOptions.length"
+        type="button"
+        class="btn bg-warning btn-sm"
+        @click="open"
+      >
         <t k="harvester.upgradePage.upgrade" />
       </button>
     </header>
 
-    <ModalWithCard ref="deleteTip" name="deleteTip" :width="850">
+    <ModalWithCard
+      v-if="isOpen"
+      name="deleteTip"
+      :width="850"
+    >
       <template #title>
         <t k="harvester.upgradePage.upgradeApp" />
       </template>
@@ -158,17 +168,36 @@ export default {
             :clearable="true"
           />
 
-          <div v-if="canEnableLogging" class="mb-5">
-            <Checkbox v-model="enableLogging" class="check" type="checkbox" :label="t('harvester.upgradePage.enableLogging')" />
+          <div
+            v-if="canEnableLogging"
+            class="mb-5"
+          >
+            <Checkbox
+              v-model="enableLogging"
+              class="check"
+              type="checkbox"
+              :label="t('harvester.upgradePage.enableLogging')"
+            />
           </div>
 
           <div v-if="version">
-            <p v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)" class="mb-10"></p>
+            <p
+              v-clean-html="t('harvester.upgradePage.releaseTip', {url: releaseLink}, true)"
+              class="mb-10"
+            ></p>
 
-            <Checkbox v-model="readyReleaseNote" class="check" type="checkbox" label-key="harvester.upgradePage.checkReady" />
+            <Checkbox
+              v-model="readyReleaseNote"
+              class="check"
+              type="checkbox"
+              label-key="harvester.upgradePage.checkReady"
+            />
           </div>
 
-          <Banner v-if="errors.length" color="warning">
+          <Banner
+            v-if="errors.length"
+            color="warning"
+          >
             {{ errors }}
           </Banner>
         </div>
@@ -176,10 +205,17 @@ export default {
 
       <template #footer>
         <div class="footer">
-          <button class="btn role-secondary mr-20" @click.prevent="cancel">
+          <button
+            class="btn role-secondary mr-20"
+            @click.prevent="cancel"
+          >
             <t k="generic.close" />
           </button>
-          <button :disabled="!readyReleaseNote" class="btn role-tertiary bg-primary" @click.prevent="handleUpgrade">
+          <button
+            :disabled="!readyReleaseNote"
+            class="btn role-tertiary bg-primary"
+            @click.prevent="handleUpgrade"
+          >
             <t k="harvester.upgradePage.upgrade" />
           </button>
         </div>