@rancher/shell 3.0.4 → 3.0.5-rc.2

package/edit/workload/mixins/workload.js

@@ -618,8 +618,6 @@ export default {
     this.registerBeforeHook(this.getPorts, 'getPorts');
 
     this.registerAfterHook(this.saveService, 'saveService');
-
-    this.selectContainer(this.container);
   },
 
   methods: {

package/initialize/install-plugins.js

@@ -26,6 +26,7 @@ import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
 import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
+import internalApiPlugin from '@shell/plugins/internal-api';
 
 import 'floating-vue/dist/style.css';
 import { floatingVueOptions } from '@shell/plugins/floating-vue';
@@ -46,7 +47,7 @@ export async function installPlugins(vueApp) {
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie];
+  const pluginDefinitions = [config, cookieUniversal, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie, internalApiPlugin];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {

package/list/harvesterhci.io.management.cluster.vue

@@ -178,7 +178,10 @@ export default {
       <div class="no-clusters">
         {{ t('harvesterManager.cluster.none') }}
       </div>
-      <hr class="info-section">
+      <hr
+        class="info-section"
+        role="none"
+      >
       <div class="logo">
         <BrandImage
           file-name="harvester.png"

package/list/management.cattle.io.feature.vue

@@ -1,27 +1,13 @@
 <script>
-import { mapState, mapGetters } from 'vuex';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal';
-import { Card } from '@components/Card';
+import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
-import { Banner } from '@components/Banner';
-import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
 import ResourceFetch from '@shell/mixins/resource-fetch';
-import { getVendor } from '@shell/config/private-label';
 
 export default {
-  components: {
-    AsyncButton,
-    Banner,
-    Card,
-    ResourceTable,
-    LabeledInput,
-    AppModal,
-  },
-  mixins: [ResourceFetch],
-  props:  {
+  components: { ResourceTable },
+  mixins:     [ResourceFetch],
+  props:      {
     resource: {
       type:     String,
       required: true,
@@ -40,46 +26,15 @@ export default {
 
   async fetch() {
     await this.$fetchType(this.resource);
-
-    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,
-      showModal:        false,
-      vendor:           getVendor(),
-    };
   },
 
   computed: {
-    ...mapState('action-menu', ['showPromptUpdate', 'toUpdate']),
     ...mapGetters({ t: 'i18n/t' }),
 
     filteredRows() {
       return this.rows.filter((x) => x.name !== 'fleet');
     },
 
-    promptForUrl() {
-      return this.update?.id === 'multi-cluster-management' && this.noUrlSet;
-    },
-
     enableRowActions() {
       const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.FEATURE);
 
@@ -90,109 +45,6 @@ export default {
   $loadingResources() {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
-  },
-
-  watch: {
-    showPromptUpdate(show) {
-      if (show) {
-        // Clear last error
-        this.error = null;
-
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    },
-
-    toUpdate(neu) {
-      // 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 = Array.isArray(neu) ? neu[0] : neu;
-      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';
-      }
-    }
-  },
-
-  methods: {
-    close() {
-      this.$store.commit('action-menu/togglePromptUpdate');
-
-      if (this.timer) {
-        clearTimeout(this.timer);
-        this.timer = null;
-      }
-    },
-
-    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) {
-            await this.$store.dispatch('management/findAll', { type: this.resource, opt: { force: true } });
-            btnCB(true);
-            this.close();
-            this.waiting = false;
-          }
-        } 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>
@@ -217,145 +69,10 @@ export default {
         </div>
       </template>
     </ResourceTable>
-    <app-modal
-      v-if="showModal"
-      class="update-modal"
-      name="toggleFlag"
-      :width="450"
-      height="auto"
-      styles="max-height: 100vh;"
-      :click-to-close="!restart || !waiting"
-      @close="close"
-    >
-      <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>
-    </app-modal>
   </div>
 </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;
-    }
-  }
-
   .feature-name {
     align-items: center;
     display: flex;

package/list/provisioning.cattle.io.cluster.vue

@@ -113,24 +113,32 @@ export default {
     },
 
     createLocation() {
-      return {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: this.resource
-        },
+      const options = this.$store.getters[`type-map/optionsFor`](this.resource)?.custom || {};
+      const params = {
+        product:  this.$store.getters['currentProduct'].name,
+        resource: this.resource
+      };
+      const defaultLocation = {
+        name: 'c-cluster-product-resource-create',
+        params
       };
+
+      return options.createLocation ? options.createLocation(params) : defaultLocation;
     },
 
     importLocation() {
-      return {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  this.$store.getters['currentProduct'].name,
-          resource: this.resource
-        },
+      const options = this.$store.getters[`type-map/optionsFor`](this.resource)?.custom || {};
+      const params = {
+        product:  this.$store.getters['currentProduct'].name,
+        resource: this.resource
+      };
+      const defaultLocation = {
+        name:  'c-cluster-product-resource-create',
+        params,
         query: { [MODE]: _IMPORT }
       };
+
+      return options.importLocation ? options.importLocation(params) : defaultLocation;
     },
 
     canImport() {

package/machine-config/azure.vue

@@ -602,7 +602,10 @@ export default {
         />
       </div>
     </div>
-    <hr class="mt-20">
+    <hr
+      class="mt-20"
+      role="none"
+    >
     <div class="row mt-20">
       <div class="col span-6">
         <LabeledInput
@@ -668,7 +671,10 @@ export default {
           </div>
         </div>
       </div>
-      <hr class="mt-20 mb-20">
+      <hr
+        class="mt-20 mb-20"
+        role="none"
+      >
       <h2>{{ t('cluster.machineConfig.azure.sections.purchasePlan') }}</h2>
       <div class="row mt-20">
         <div class="col span-6">
@@ -681,7 +687,10 @@ export default {
           />
         </div>
       </div>
-      <hr class="mt-20">
+      <hr
+        class="mt-20"
+        role="none"
+      >
       <h2>{{ t('cluster.machineConfig.azure.sections.network') }}</h2>
       <div class="row mt-20 mb-20">
         <div class="col span-6">
@@ -803,7 +812,10 @@ export default {
           />
         </div>
       </div>
-      <hr class="mt-20 mb-20">
+      <hr
+        class="mt-20 mb-20"
+        role="none"
+      >
       <h2>{{ t('cluster.machineConfig.azure.sections.disks') }}</h2>
       <div class="row mt-20 mb-20">
         <div class="col span-6">

package/mixins/vue-select-overrides.js

@@ -1,8 +1,5 @@
 
 export default {
-  data() {
-    return { overridesMixinPreventDoubleTriggerKeysOpen: false };
-  },
   methods: {
     mappedKeys(map, vm) {
       // Defaults found at - https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L947
@@ -63,7 +60,6 @@ export default {
           if (vm.closeOnSelect) {
             // this ties in to the Select component implementation
             // so that the enter key handler doesn't open the dropdown again
-            this.overridesMixinPreventDoubleTriggerKeysOpen = true;
             vm.open = false;
             vm.typeAheadPointer = -1;
           }

package/models/__tests__/namespace.test.ts

@@ -84,7 +84,31 @@ describe('class Namespace', () => {
   });
 
   it.todo('should return the project');
-  it.todo('should return the groupByLabel with i18n');
+
+  describe('handling groupById', () => {
+    it('should return the groupById if have project id', () => {
+      const namespace = new Namespace({});
+
+      jest.spyOn(namespace, 'project', 'get').mockReturnValue({
+        id:   'mock-project-id',
+        type: 'project',
+        name: 'mock-project',
+      });
+
+      expect(namespace.groupById).toStrictEqual('mock-project-id');
+    });
+
+    it('should return the groupById if project id undefined', () => {
+      const t = jest.fn(() => 'Not in a Project');
+      const ctx = { rootGetters: { 'i18n/t': t } };
+      const namespace = new Namespace({}, ctx);
+
+      jest.spyOn(namespace, 'project', 'get').mockReturnValue({});
+
+      expect(namespace.groupById).toStrictEqual('Not in a Project');
+    });
+  });
+
   it.todo('should return the project name with i18n');
   it.todo('should return the projectNameSort');
   it.todo('should check if istioInstalled');

package/models/cloudcredential.js

@@ -275,6 +275,11 @@ export default class CloudCredential extends NormanModel {
         expired:  false,
         expiring: true,
       };
+    } else if (this.expiresIn) {
+      return {
+        expired:  false,
+        expiring: false,
+      };
     }
 
     return null;

package/models/fleet.cattle.io.cluster.js

@@ -69,11 +69,17 @@ export default class FleetCluster extends SteveModel {
   }
 
   assignTo() {
-    this.$dispatch('assignTo', [this]);
+    this.$dispatch('promptModal', {
+      component:      'AssignToDialog',
+      componentProps: { toAssign: [this] }
+    });
   }
 
   assignToBulk(items) {
-    this.$dispatch('assignTo', items);
+    this.$dispatch('promptModal', {
+      component:      'AssignToDialog',
+      componentProps: { toAssign: items }
+    });
   }
 
   get canDelete() {

package/models/fleet.cattle.io.gitrepo.js

@@ -7,10 +7,7 @@ import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { addObject, addObjects, findBy, insertAt } from '@shell/utils/array';
 import { set } from '@shell/utils/object';
 import SteveModel from '@shell/plugins/steve/steve-class';
-import {
-  colorForState, mapStateToEnum, primaryDisplayStatusFromCount, stateDisplay, STATES_ENUM, stateSort,
-} from '@shell/plugins/dashboard-store/resource-class';
-import { NAME } from '@shell/config/product/explorer';
+import { mapStateToEnum, primaryDisplayStatusFromCount, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetUtils from '@shell/utils/fleet';
 
 function quacksLikeAHash(str) {
@@ -439,51 +436,28 @@ export default class GitRepo extends SteveModel {
     }, []);
 
     return resources.map((r) => {
-      const {
-        namespace, name, clusterId, state
-      } = r;
-      const id = FleetUtils.resourceId(r);
+      const { namespace, name, clusterId } = r;
       const type = FleetUtils.resourceType(r);
       const c = clusters[clusterId];
 
-      const color = colorForState(state).replace('text-', 'bg-');
-      const display = stateDisplay(state);
-
-      const detailLocation = state !== STATES_ENUM.MISSING ? {
-        name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
-        params: {
-          product:  NAME,
-          cluster:  c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME], // explorer uses the "management" Cluster name, which differs from the Fleet Cluster name
-          resource: type,
-          namespace,
-          id:       name,
-        }
-      } : undefined;
-
-      const key = `${ clusterId }-${ type }-${ namespace }-${ name }`;
-
       return {
-        key,
-        tableKey: key,
+        key: `${ clusterId }-${ type }-${ namespace }-${ name }`,
 
         // Needed?
-        id,
+        id: FleetUtils.resourceId(r),
         type,
         clusterId,
 
         // columns, see FleetResources.vue
-        state:       mapStateToEnum(state),
+        state:       mapStateToEnum(r.state),
         clusterName: c.nameDisplay,
         apiVersion:  r.apiVersion,
         kind:        r.kind,
-        name:        r.name,
-        namespace:   r.namespace,
+        name,
+        namespace,
 
         // other properties
-        stateBackground: color,
-        stateDisplay:    display,
-        stateSort:       stateSort(color, display),
-        detailLocation,
+        detailLocation: FleetUtils.detailLocation(r, c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME]),
       };
     });
   }

package/models/kontainerdriver.js

@@ -72,14 +72,17 @@ export default class KontainerDriver extends Driver {
     return this.$dispatch('rancher/request', {
       url:    `v3/kontainerDrivers/${ escape(this.id) }?action=activate`,
       method: 'post',
-    }, { root: true });
+    }, { root: true }).catch((err) => {
+      this.$dispatch('growl/fromError', { title: this.t('drivers.error.activate', { name: this.nameDisplay }), err }, { root: true });
+    });
   }
 
   async activateBulk(resources) {
     await Promise.all(resources.map((resource) => this.$dispatch('rancher/request', {
       url:    `v3/kontainerDrivers/${ escape(resource.id) }?action=activate`,
       method: 'post',
-    }, { root: true }
-    )));
+    }, { root: true }).catch((err) => {
+      this.$dispatch('growl/fromError', { title: this.t('drivers.error.activate', { name: resource.nameDisplay }), err }, { root: true });
+    })));
   }
 }

package/models/management.cattle.io.feature.js

@@ -51,6 +51,12 @@ export default class Feature extends HybridModel {
   }
 
   toggleFeatureFlag(resources = this) {
-    this.$dispatch('promptUpdate', resources);
+    this.$dispatch('promptModal', {
+      component:  'FeatureFlagListDialog',
+      resources:  !Array.isArray(resources) ? [resources] : resources,
+      modalWidth: '450',
+      height:     'auto',
+      styles:     'max-height: 100vh;'
+    });
   }
 }

package/models/management.cattle.io.node.js

@@ -168,12 +168,12 @@ export default class MgmtNode extends HybridModel {
   }
 
   get canScaleDown() {
-    if (!this.isEtcd && !this.isControlPlane) {
+    const hasAction = this.norman?.actions?.scaledown;
+
+    if (!this.isEtcd && !this.isControlPlane && hasAction) {
       return true;
     }
 
-    const hasAction = this.norman?.actions?.scaledown;
-
     return hasAction && notOnlyOfRole(this, this.provisioningCluster?.nodes);
   }
 }