dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/dialog/FeatureFlagListDialog.vue

@@ -0,0 +1,288 @@
+
+<script>
+import { mapGetters } from 'vuex';
+
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import AsyncButton from '@shell/components/AsyncButton';
+
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  name: 'FeatureFlagListDialog',
+
+  emits: ['close'],
+
+  components: {
+    Card, Banner, LabeledInput, AsyncButton
+  },
+
+  props: {
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    // Only support updating one at a time - bulk does not make sense, as they may
+    // be in different states and with different restart values
+    this.update = this.resources[0];
+
+    if (this.update) {
+      this.restart = this.update.restartRequired;
+      // If the value is currently false, then we will be enabling it
+      this.enabling = !this.update.enabled;
+      this.updateMode = this.enabling ? 'activate' : 'deactivate';
+    }
+
+    this.serverUrlSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SERVER_URL);
+
+    if (this.serverUrlSetting?.value) {
+      this.serverUrl = this.serverUrlSetting.value;
+    } else {
+      this.noUrlSet = true;
+      this.serverUrl = window.location.origin;
+    }
+  },
+
+  data() {
+    return {
+      update:           [],
+      updateMode:       'activate',
+      error:            null,
+      enabling:         false,
+      restart:          false,
+      waiting:          false,
+      timer:            null,
+      serverUrlSetting: {},
+      serverUrl:        '',
+      noUrlSet:         false,
+      vendor:           getVendor(),
+    };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    promptForUrl() {
+      return this.update?.id === 'multi-cluster-management' && this.noUrlSet;
+    }
+  },
+
+  methods: {
+    close() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+
+      this.$emit('close');
+    },
+
+    toggleFlag(btnCB) {
+      if (this.restart) {
+        this.doToggleWithRestart(btnCB);
+      } else {
+        this.doToggle(btnCB);
+      }
+    },
+
+    async doToggle(btnCB) {
+      this.error = null;
+      try {
+        this.update.spec.value = !this.update.enabled;
+        await this.update.save();
+        btnCB(true);
+        this.close();
+      } catch (err) {
+        // An error occurred, so toggle back the value - the call failed, so the change was not made
+        this.update.spec.value = !this.update.enabled;
+        this.error = err.message || err;
+        btnCB(false);
+      }
+    },
+
+    doToggleWithRestart(btnCB) {
+      this.error = null;
+      try {
+        this.update.spec.value = !this.update.enabled;
+        // await can go back in when backend returns from the save before restarting
+        this.update.save();
+      } catch (err) {}
+
+      this.waitForBackend(btnCB, this.update.id);
+      this.waiting = true;
+    },
+
+    waitForBackend(btnCB, id) {
+      const url = `/v3/features/${ id }`;
+
+      this.timer = setTimeout(async() => {
+        try {
+          const response = await this.$axios.get(url, { timeout: 5000 });
+
+          if (response?.status === 200) {
+            btnCB(true);
+            this.waiting = false;
+            this.close();
+
+            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
+          }
+        } catch (e) {}
+
+        if (this.waiting) {
+          this.waitForBackend(btnCB, id);
+        }
+      }, 5000);
+    },
+
+    async saveUrl(btnCB) {
+      try {
+        this.serverUrlSetting.value = this.serverUrl;
+        await this.serverUrlSetting.save();
+        btnCB(true);
+      } catch (err) {
+        this.error = err;
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Card
+    v-if="!waiting"
+    class="prompt-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('featureFlags.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div
+        v-if="update"
+        class="mb-10"
+      >
+        <div v-if="enabling">
+          <span>
+            {{ t('featureFlags.promptActivate', {flag: update.id}) }}
+          </span>
+          <div
+            v-if="promptForUrl"
+            class="mt-10"
+          >
+            <span> {{ t('featureFlags.requiresSetting') }}</span>
+            <div
+              :style="{'align-items':'center'}"
+              class="row mt-10"
+            >
+              <LabeledInput
+                v-model:value="serverUrl"
+                :label="t('setup.serverUrl.label')"
+              />
+              <div class="col pl-5">
+                <AsyncButton @click="saveUrl" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <span v-else>
+          {{ t('featureFlags.promptDeactivate', {flag: update.id}) }}
+        </span>
+        <Banner
+          v-if="restart"
+          color="error"
+          :label="t('featureFlags.restartRequired', vendor)"
+        />
+      </div>
+      <div class="text-error mb-10">
+        {{ error }}
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <AsyncButton
+        :disabled="promptForUrl && !serverUrlSetting.value"
+        :mode="updateMode"
+        class="btn bg-error ml-10"
+        @click="toggleFlag"
+      />
+    </template>
+  </Card>
+  <Card
+    v-else
+    class="prompt-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('featureFlags.restart.title') }}
+      </h4>
+    </template>
+    <template #body>
+      <div class="waiting">
+        <p>{{ t('featureFlags.restart.wait') }}</p>
+        <span class="restarting-icon">
+          <i class=" icon icon-spinner icon-spin" />
+        </span>
+      </div>
+    </template>
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.prompt-update {
+  &.card-container {
+    box-shadow: none;
+  }
+
+  :deep() .card-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .waiting {
+    text-align: center;
+    font-size: 14px;
+    margin: 10px 0;
+
+    p {
+      line-height: 20px;;
+    }
+  }
+
+  .restarting-icon {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+
+    > I {
+    font-size: 24px;
+    }
+  }
+}
+</style>

package/dialog/ForceMachineRemoveDialog.vue

@@ -34,7 +34,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
 
     nameToMatch() {
-      return this.machine.spec.infrastructureRef.name;
+      return this.machine?.spec?.infrastructureRef?.name;
     },
 
     deleteDisabled() {

package/dialog/GenericPrompt.vue

@@ -54,7 +54,7 @@ export default {
       try {
         await this.applyAction(buttonDone);
         this.confirm(true);
-        this.$emit('close', true);
+        this.$emit('close');
       } catch (err) {
         console.error(err); // eslint-disable-line
         this.errors = exceptionToErrorsArray(err);

package/dialog/HelmOpForceUpdateDialog.vue

@@ -0,0 +1,132 @@
+<script>
+import { mapGetters, mapState } from 'vuex';
+import { resourceNames } from '@shell/utils/string';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { Banner } from '@components/Banner';
+import { Card } from '@components/Card';
+import AsyncButton from '@shell/components/AsyncButton';
+
+export default {
+  name: 'HelmOpForceUpdateDialog',
+
+  emits: ['close'],
+
+  components: {
+    AsyncButton,
+    Banner,
+    Card,
+  },
+
+  props: {
+    helmOps: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+
+    names() {
+      return this.helmOps.map((app) => app.nameDisplay);
+    }
+  },
+
+  methods: {
+    resourceNames,
+
+    close(buttonDone) {
+      if (buttonDone && typeof buttonDone === 'function') {
+        buttonDone(true);
+      }
+      this.$emit('close');
+    },
+
+    async apply(buttonDone) {
+      try {
+        await Promise.all(this.helmOps.map((app) => this.updateHelmOp(app)));
+
+        this.close();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    },
+
+    updateHelmOp(value) {
+      const now = value.spec.forceSyncGeneration || 1;
+
+      value.spec.forceSyncGeneration = now + 1;
+
+      return value.save();
+    },
+  }
+};
+</script>
+
+<template>
+  <Card
+    class="prompt-force-update"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4
+        v-clean-html="t('fleet.helmOp.actions.forceUpdate.promptTitle')"
+        class="text-default-text"
+      />
+    </template>
+
+    <template #body>
+      <div class="mb-20">
+        {{ t('fleet.helmOp.actions.forceUpdate.promptNames') }} <span
+          v-clean-html="resourceNames(names, null, t)"
+          class="body"
+        />
+      </div>
+      <Banner
+        color="info"
+        label-key="fleet.helmOp.actions.forceUpdate.promptWarning"
+      >
+        <span v-clean-html="t('fleet.helmOp.actions.forceUpdate.promptWarning', { count: names.length}, true)" />
+      </Banner>
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
+    </template>
+
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <AsyncButton
+        mode="update"
+        class="btn bg-info ml-10"
+        :data-testid="'deactivate-driver-confirm'"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss' scoped>
+  .card-container {
+    box-shadow: none;
+  }
+
+  :deep() .card-actions {
+    display: flex;
+    justify-content: end;
+  }
+</style>

package/{components/Import.vue → dialog/ImportDialog.vue}

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
-import Loading from '@shell/components/Loading';
 import YamlEditor from '@shell/components/YamlEditor';
 import FileSelector from '@shell/components/form/FileSelector';
 import AsyncButton from '@shell/components/AsyncButton';
@@ -20,7 +19,6 @@ export default {
     AsyncButton,
     Banner,
     Card,
-    Loading,
     YamlEditor,
     FileSelector,
     LabeledSelect,
@@ -40,11 +38,12 @@ export default {
 
   data() {
     return {
-      currentYaml:   '',
-      allNamespaces: [],
-      errors:        null,
-      rows:          null,
-      done:          false,
+      currentYaml:       '',
+      allNamespaces:     [],
+      errors:            null,
+      rows:              null,
+      done:              false,
+      selectedNamespace: this.defaultNamespace,
     };
   },
 
@@ -92,7 +91,7 @@ export default {
 
         const res = await this.currentCluster.doAction('apply', {
           yaml:             this.currentYaml,
-          defaultNamespace: this.defaultNamespace,
+          defaultNamespace: this.selectedNamespace,
         });
 
         btnCb(true);
@@ -120,12 +119,9 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <Card
-    v-else
     :show-highlight-border="false"
     data-testid="import-yaml"
-    :trigger-focus-trap="true"
   >
     <template #title>
       <div style="display: block; width: 100%;">
@@ -148,11 +144,10 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledSelect
-                :value="defaultNamespace"
+                v-model:value="selectedNamespace"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"
-                @update:value="newValue => defaultNamespace = newValue"
               />
             </div>
           </div>