@rancher/shell 0.3.28 → 0.4.0

package/machine-config/vmwarevsphere.vue

@@ -39,7 +39,17 @@ const OS_OPTIONS = [
   'linux',
   'windows'
 ];
-const DEFAULT_CFGPARAM = ['disk.enableUUID=TRUE'];
+
+export const DEFAULT_VALUES = {
+  cpuCount:                '2',
+  diskSize:                '20000',
+  memorySize:              '4096',
+  hostsystem:              '',
+  cloudConfig:             '#cloud-config\n\n',
+  gracefulShutdownTimeout: '0',
+  cfgparam:                ['disk.enableUUID=TRUE'],
+  os:                      OS_OPTIONS[0]
+};
 
 const getDefaultVappOptions = (networks) => {
   return {
@@ -217,15 +227,27 @@ export default {
     if (this.mode === _CREATE && !this.value.initted) {
       Object.defineProperty(this.value, 'initted', { value: true, enumerable: false });
 
+      const {
+        cpuCount,
+        diskSize,
+        memorySize,
+        hostsystem,
+        cloudConfig,
+        gracefulShutdownTimeout,
+        cfgparam,
+        os
+      } = DEFAULT_VALUES;
+
       set(this.value, 'creationType', creationMethods[0].value);
-      set(this.value, 'cpuCount', '2');
-      set(this.value, 'diskSize', '20000');
-      set(this.value, 'memorySize', '4096');
-      set(this.value, 'hostsystem', '');
-      set(this.value, 'cloudConfig', '#cloud-config\n\n');
-      set(this.value, 'cfgparam', DEFAULT_CFGPARAM);
+      set(this.value, 'cpuCount', cpuCount);
+      set(this.value, 'diskSize', diskSize);
+      set(this.value, 'memorySize', memorySize);
+      set(this.value, 'hostsystem', hostsystem);
+      set(this.value, 'gracefulShutdownTimeout', gracefulShutdownTimeout);
+      set(this.value, 'cloudConfig', cloudConfig);
+      set(this.value, 'cfgparam', cfgparam);
       set(this.value, 'vappProperty', this.value.vappProperty);
-      set(this.value, 'os', OS_OPTIONS[0]);
+      set(this.value, 'os', os);
       Object.entries(INITIAL_VAPP_OPTIONS).forEach(([key, value]) => {
         set(this.value, key, value);
       });
@@ -326,6 +348,8 @@ export default {
     memorySize: integerString('value.memorySize'),
     diskSize:   integerString('value.diskSize'),
 
+    gracefulShutdownTimeout: integerString('value.gracefulShutdownTimeout'),
+
     showCloudConfigYaml() {
       return this.value.creationType !== 'legacy';
     },
@@ -731,7 +755,10 @@ export default {
         </p>
       </h4>
       <div slot="body">
-        <div class="row">
+        <div
+          class="row"
+          data-testid="datacenter"
+        >
           <div class="col span-6">
             <LabeledSelect
               v-model="value.datacenter"
@@ -742,7 +769,10 @@ export default {
               :disabled="disabled"
             />
           </div>
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="resourcePool"
+          >
             <LabeledSelect
               v-model="value.pool"
               :loading="resourcePoolsLoading"
@@ -754,7 +784,10 @@ export default {
           </div>
         </div>
         <div class="row mt-10">
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="dataStore"
+          >
             <LabeledSelect
               v-model="value.datastore"
               :loading="dataStoresLoading"
@@ -764,7 +797,10 @@ export default {
               :disabled="disabled"
             />
           </div>
-          <div class="col span-6">
+          <div
+            class="col span-6"
+            data-testid="folder"
+          >
             <LabeledSelect
               v-model="value.folder"
               :loading="foldersLoading"
@@ -776,7 +812,10 @@ export default {
           </div>
         </div>
         <div class="row mt-10">
-          <div class="col span-12">
+          <div
+            class="col span-6"
+            data-testid="host"
+          >
             <LabeledSelect
               v-model="host"
               :loading="hostsLoading"
@@ -789,6 +828,22 @@ export default {
               {{ t('cluster.machineConfig.vsphere.scheduling.host.note') }}
             </p>
           </div>
+          <div
+            class="col span-6"
+            data-testid="gracefulShutdownTimeout"
+          >
+            <UnitInput
+              v-model="gracefulShutdownTimeout"
+              :mode="mode"
+              :label="t('cluster.machineConfig.vsphere.scheduling.gracefulShutdownTimeout.label')"
+              :suffix="t('suffix.seconds', { count: gracefulShutdownTimeout})"
+              :disabled="disabled"
+              min="0"
+            />
+            <p class="text-muted mt-5">
+              {{ t('cluster.machineConfig.vsphere.scheduling.gracefulShutdownTimeout.note') }}
+            </p>
+          </div>
         </div>
       </div>
     </Card>

package/models/__tests__/management.cattle.io.cluster.test.ts

@@ -1,5 +1,9 @@
 import MgmtCluster from '@shell/models/management.cattle.io.cluster';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('class MgmtCluster', () => {
   describe('provisioner', () => {
     const testCases = [

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

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { CATALOG, CLUSTER_BADGE } from '@shell/config/labels-annotations';
 import { NODE, FLEET, MANAGEMENT, CAPI } from '@shell/config/types';
 import { insertAt, addObject, removeObject } from '@shell/utils/array';
@@ -15,6 +14,7 @@ import HybridModel from '@shell/plugins/steve/hybrid-class';
 import { LINUX, WINDOWS } from '@shell/store/catalog';
 import { KONTAINER_TO_DRIVER } from './management.cattle.io.kontainerdriver';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 // See translation file cluster.providers for list of providers
 // If the logo is not named with the provider name, add an override here
@@ -408,9 +408,13 @@ export default class MgmtCluster extends HybridModel {
   }
 
   async copyKubeConfig() {
-    const config = await this.generateKubeConfig();
+    try {
+      const config = await this.generateKubeConfig();
 
-    Vue.prototype.$copyText(config);
+      if (config) {
+        await copyTextToClipboard(config);
+      }
+    } catch {}
   }
 
   async fetchNodeMetrics() {

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

@@ -1,5 +1,5 @@
 import {
-  CAPI, MANAGEMENT, NORMAN, SNAPSHOT, HCI
+  CAPI, MANAGEMENT, NAMESPACE, NORMAN, SNAPSHOT, HCI, LOCAL_CLUSTER
 } from '@shell/config/types';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { findBy } from '@shell/utils/array';
@@ -883,4 +883,22 @@ export default class ProvCluster extends SteveModel {
   get hasError() {
     return this.status?.conditions?.some((condition) => condition.error === true);
   }
+
+  get namespaceLocation() {
+    const localCluster = this.$rootGetters['management/byId'](MANAGEMENT.CLUSTER, LOCAL_CLUSTER);
+
+    if (localCluster) {
+      return {
+        name:   'c-cluster-product-resource-id',
+        params: {
+          cluster:  localCluster.id,
+          product:  this.$rootGetters['productId'],
+          resource: NAMESPACE,
+          id:       this.namespace
+        }
+      };
+    }
+
+    return null;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.28",
+  "version": "0.4.0",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@nuxtjs/eslint-config-typescript": "6.0.1",
     "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
+    "@types/is-url": "1.2.30",
     "@types/node": "16.4.3",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
@@ -119,7 +120,7 @@
     "url-parse": "1.5.10",
     "v-tooltip": "2.0.3",
     "vue": "2.7.14",
-    "vue-clipboard2": "0.3.1",
+    "clipboard-polyfill": "4.0.1",
     "vue-codemirror": "4.0.6",
     "vue-js-modal": "1.3.35",
     "vue-resize": "0.4.5",

package/pages/c/_cluster/apps/charts/index.vue

@@ -138,6 +138,11 @@ export default {
       return reducedRepos;
     },
 
+    /**
+     * Filter allll charts by invalid entries (deprecated, hidden and ui plugin).
+     *
+     * This does not include any user provided filters (like selected repos, categories and text query)
+     */
     enabledCharts() {
       return (this.allCharts || []).filter((c) => {
         if ( c.deprecated && !this.showDeprecated ) {
@@ -148,10 +153,6 @@ export default {
           return false;
         }
 
-        if ( this.hideRepos.includes(c.repoKey) ) {
-          return false;
-        }
-
         if (isUIPlugin(c)) {
           return false;
         }
@@ -160,26 +161,28 @@ export default {
       });
     },
 
+    /**
+     * Filter enabled charts allll filters. These are what the user will see in the list
+     */
     filteredCharts() {
-      const enabledCharts = (this.enabledCharts || []);
-      const clusterProvider = this.currentCluster.status.provider || 'other';
-
-      return filterAndArrangeCharts(enabledCharts, {
-        clusterProvider,
-        category:       this.category,
-        searchQuery:    this.searchQuery,
-        showDeprecated: this.showDeprecated,
-        showHidden:     this.showHidden,
-        hideRepos:      this.hideRepos,
-        hideTypes:      [CATALOG._CLUSTER_TPL],
-        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
+      return this.filterCharts({
+        category:    this.category,
+        searchQuery: this.searchQuery,
+        hideRepos:   this.hideRepos
       });
     },
 
-    getFeaturedCharts() {
-      const allCharts = (this.filteredCharts || []);
+    /**
+     * Filter valid charts (alll filters minus user provided ones) by whether they are featured or not
+     *
+     * This will power the carousel
+     */
+    featuredCharts() {
+      const filteredCharts = this.filterCharts({});
+
+      // debugger;
 
-      const featuredCharts = allCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
+      const featuredCharts = filteredCharts.filter((value) => value.featured).sort((a, b) => a.featured - b.featured);
 
       return featuredCharts.slice(0, 5);
     },
@@ -187,7 +190,13 @@ export default {
     categories() {
       const map = {};
 
-      for ( const chart of this.enabledCharts ) {
+      // Filter charts by everything except itself
+      const charts = this.filterCharts({
+        searchQuery: this.searchQuery,
+        hideRepos:   this.hideRepos
+      });
+
+      for ( const chart of charts ) {
         for ( const c of chart.categories ) {
           if ( !map[c] ) {
             const labelKey = `catalog.charts.categories.${ lcFirst(c) }`;
@@ -208,14 +217,14 @@ export default {
       out.unshift({
         label: this.t('catalog.charts.categories.all'),
         value: '',
-        count: this.enabledCharts.length
+        count: charts.length
       });
 
-      return out;
+      return sortBy(out, ['label']);
     },
 
     showCarousel() {
-      return this.chartMode === 'featured' && this.getFeaturedCharts.length;
+      return this.chartMode === 'featured' && this.featuredCharts.length;
     }
 
   },
@@ -334,6 +343,22 @@ export default {
         btnCb(false);
       }
     },
+
+    filterCharts({ category, searchQuery, hideRepos }) {
+      const enabledCharts = (this.enabledCharts || []);
+      const clusterProvider = this.currentCluster.status.provider || 'other';
+
+      return filterAndArrangeCharts(enabledCharts, {
+        clusterProvider,
+        category,
+        searchQuery,
+        showDeprecated: this.showDeprecated,
+        showHidden:     this.showHidden,
+        hideRepos,
+        hideTypes:      [CATALOG._CLUSTER_TPL],
+        showPrerelease: this.$store.getters['prefs/get'](SHOW_PRE_RELEASE),
+      });
+    }
   },
 };
 </script>
@@ -351,7 +376,7 @@ export default {
         </h1>
       </div>
       <div
-        v-if="getFeaturedCharts.length > 0"
+        v-if="featuredCharts.length > 0"
         class="actions-container"
       >
         <ButtonGroup
@@ -363,7 +388,7 @@ export default {
     <div v-if="showCarousel">
       <h3>{{ t('catalog.charts.featuredCharts') }}</h3>
       <Carousel
-        :sliders="getFeaturedCharts"
+        :sliders="featuredCharts"
         @clicked="(row) => selectChart(row)"
       />
     </div>
@@ -514,22 +539,21 @@ export default {
         }
       }
     }
-  }
+}
 
 .checkbox-select {
-   .vs__search {
+  .vs__search {
     position: absolute;
     right: 0
   }
 
- .vs__selected-options  {
+  .vs__selected-options  {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     display: inline-block;
     line-height: 2.4rem;
   }
-
 }
 
 .checkbox-outer-container.in-select {
@@ -537,7 +561,7 @@ export default {
   padding: 7px 0 6px 13px;
   width: calc(100% + 10px);
 
-  ::v-deep.checkbox-label {
+  ::v-deep .checkbox-label {
     display: flex;
     align-items: center;
 
@@ -552,7 +576,7 @@ export default {
     }
   }
 
-  &:hover ::v-deep.checkbox-label {
+  &:hover ::v-deep .checkbox-label {
       color: var(--body-text);
     }
 
@@ -560,7 +584,7 @@ export default {
       &:hover {
       background: var(--app-rancher-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-rancher-accent-text);
     }
     & i {
@@ -572,7 +596,7 @@ export default {
       &:hover {
       background: var(--app-partner-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-partner-accent-text);
     }
     & i {
@@ -584,7 +608,7 @@ export default {
     &:hover {
       background: var(--app-color1-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color1-accent-text);
     }
     & i {
@@ -595,10 +619,10 @@ export default {
     &:hover {
       background: var(--app-color2-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color2-accent-text);
     }
-        & i {
+    & i {
       color: var(--app-color2-accent)
     }
   }
@@ -606,7 +630,7 @@ export default {
     &:hover {
       background: var(--app-color3-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color3-accent-text);
     }
     & i {
@@ -628,7 +652,7 @@ export default {
     &:hover {
       background: var(--app-color5-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color5-accent-text);
     }
     & i {
@@ -639,7 +663,7 @@ export default {
     &:hover {
       background: var(--app-color6-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color6-accent-text);
     }
     & i {
@@ -650,7 +674,7 @@ export default {
     &:hover {
       background: var(--app-color7-accent);
     }
-    &:hover ::v-deep.checkbox-label {
+    &:hover ::v-deep .checkbox-label {
       color: var(--app-color7-accent-text);
     }
     & i {
@@ -661,9 +685,6 @@ export default {
     &:hover {
       background: var(--app-color8-accent);
     }
-    &:hover ::v-deep.checkbox-label {
-      color: var(--app-color8-accent-text);
-    }
     & i {
       color: var(--app-color8-accent)
     }

package/plugins/clean-html-directive.js

@@ -1,23 +1,5 @@
 import Vue from 'vue';
-import DOMPurify from 'dompurify';
-
-const ALLOWED_TAGS = [
-  'code',
-  'li',
-  'a',
-  'p',
-  'b',
-  'br',
-  'ul',
-  'pre',
-  'span',
-  'div',
-  'i',
-  'em',
-  'strong',
-];
-
-export const purifyHTML = (value) => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+import { purifyHTML } from './clean-html';
 
 export const cleanHtmlDirective = {
   inserted(el, binding) {

package/plugins/clean-html.js

@@ -0,0 +1,53 @@
+import DOMPurify from 'dompurify';
+import { uniq } from '@shell/utils/array';
+
+const ALLOWED_TAGS = [
+  'code',
+  'li',
+  'a',
+  'p',
+  'b',
+  'br',
+  'ul',
+  'pre',
+  'span',
+  'div',
+  'i',
+  'em',
+  'strong',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'table',
+  'thead',
+  'tr',
+  'th',
+  'tbody',
+  'td',
+  'blockquote'
+];
+
+// Allow 'A' tags to keep the target=_blank attribute if they have it
+DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
+  if (node.tagName === 'A' && data.attrName === 'target' && data.attrValue === '_blank') {
+    data.forceKeepAttr = true;
+  }
+});
+
+// Ensure if an 'A' tag has target=_blank that we add noopener, noreferrer and nofollow to the 'rel' attribute
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A' && node?.target === '_blank') {
+    const rel = ['noopener', 'noreferrer', 'nofollow'];
+    const existingRel = node.rel?.length ? node.rel.split(' ') : [];
+    const combined = uniq([...rel, ...existingRel]);
+
+    node.setAttribute('rel', combined.join(' '));
+  }
+});
+
+export const purifyHTML = (value, options = { ALLOWED_TAGS }) => {
+  return DOMPurify.sanitize(value, options);
+};

package/plugins/clean-tooltip-directive.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { VTooltip } from 'v-tooltip';
-import { purifyHTML } from './clean-html-directive';
+import { purifyHTML } from './clean-html';
 
 function purifyContent(value) {
   const type = typeof value;

package/plugins/index.js

@@ -0,0 +1,11 @@
+/**
+ * Load the directives
+ *
+ * These are included in a function that can be explictly called, so that we can be sure
+ * of the execution order, rather than importing them at the top of a file.
+ */
+export function loadDirectives() {
+  import('./clean-html-directive');
+  import('./clean-tooltip-directive');
+  import('./directives');
+}

package/rancher-components/BadgeState/BadgeState.vue

@@ -60,7 +60,11 @@ export default Vue.extend({
 
 <template>
   <span :class="{'badge-state': true, [bg]: true}">
-    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
   </span>
 </template>
 

package/rancher-components/Banner/Banner.test.ts

@@ -1,13 +1,63 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
-    const wrapper = mount(Banner, { propsData: { label } });
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
 
     const element = wrapper.find('span').element;
 
     expect(element.textContent).toBe(label);
   });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
 });