@rancher/shell 0.3.29 → 0.4.0

package/components/form/Password.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { CHARSET, randomStr } from '@shell/utils/string';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { LabeledInput },
@@ -75,6 +76,7 @@ export default {
     }
   },
   methods: {
+    copyTextToClipboard,
     generatePassword() {
       this.password = randomStr(16, CHARSET.ALPHA_NUM);
     },
@@ -109,7 +111,7 @@ export default {
         >
           <a
             href="#"
-            @click.prevent.stop="$copyText(password)"
+            @click.prevent.stop="copyTextToClipboard(password)"
           >{{ t('action.copy') }}</a>
         </div>
         <div

package/components/nav/Header.vue

@@ -311,7 +311,7 @@ export default {
         product: this.currentProduct.name,
         cluster: this.currentCluster,
       };
-      const enabled = action.enabled ? action.enabled.apply(this, [opts]) : true;
+      const enabled = action.enabled ? action.enabled.apply(this, [this.ctx]) : true;
 
       if (fn && enabled) {
         fn.apply(this, [opts, [], { $route: this.$route }]);

package/config/home-links.js

@@ -26,7 +26,7 @@ const DEFAULT_LINKS = [
   },
   {
     key:     'getStarted',
-    value:   'https://ranchermanager.docs.rancher.com/getting-started/overview',
+    value:   `${ DOCS_BASE }/getting-started/overview`,
     enabled: true,
   },
 ];

package/core/plugin-helpers.js

@@ -7,13 +7,11 @@ import {
 import { getProductFromRoute } from '@shell/middleware/authenticated';
 import { isEqual } from '@shell/utils/object';
 
-function checkRouteProduct({ name, params, query }, locationConfigParam) {
-  const product = getProductFromRoute({
-    name, params, query
-  });
+function checkRouteProduct($route, locationConfigParam) {
+  const product = getProductFromRoute($route);
 
   // alias for the homepage
-  if (locationConfigParam === 'home' && name === 'home') {
+  if (locationConfigParam === 'home' && $route.name === 'home') {
     return true;
   } else if (locationConfigParam === product) {
     return true;

package/creators/app/files/.gitlab-ci.yml

@@ -0,0 +1,14 @@
+image: registry.suse.com/bci/bci-base:latest
+
+stages:
+  - check_version
+  - build_catalog
+
+variables:
+  REGISTRY: $CI_REGISTRY
+  REGISTRY_USER: $CI_REGISTRY_USER
+  REGISTRY_PASSWORD: $CI_REGISTRY_PASSWORD
+  IMAGE_NAMESPACE: $CI_PROJECT_NAMESPACE/$CI_PROJECT_NAME
+
+include:
+  - remote: 'https://raw.githubusercontent.com/rancher/dashboard/master/.gitlab/workflows/build-extension-catalog.gitlab-ci.yml'

package/creators/app/init

@@ -34,6 +34,25 @@ if (args.length === 3) {
   fs.ensureDirSync(appFolder);
 }
 
+let addGitlabWorkflow = false;
+
+// Check for Gitlab integration option
+if ( args.length > 3 ) {
+  for (let i = 3; i < args.length; i++) {
+    switch (args[i]) {
+    case '-l':
+      addGitlabWorkflow = true;
+      break;
+    default:
+      break;
+    }
+  }
+}
+
+if ( addGitlabWorkflow ) {
+  files.push('.gitlab-ci.yml');
+}
+
 // Check that there is a package file
 
 let setName = false;

package/edit/monitoring.coreos.com.prometheusrule/AlertingRule.vue

@@ -47,9 +47,18 @@ export default {
       selectedSeverityLabel: null,
       ignoredAnnotations:    IGNORED_ANNOTATIONS,
       severityOptions:       [
-        this.t('prometheusRule.alertingRules.labels.severity.choices.critical'),
-        this.t('prometheusRule.alertingRules.labels.severity.choices.warning'),
-        this.t('prometheusRule.alertingRules.labels.severity.choices.none'),
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.critical'),
+          value: 'critical'
+        },
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.warning'),
+          value: 'warning'
+        },
+        {
+          label: this.t('prometheusRule.alertingRules.labels.severity.choices.none'),
+          value: 'none'
+        },
       ],
     };
   },

package/edit/monitoring.coreos.com.prometheusrule/GroupRules.vue

@@ -6,6 +6,7 @@ import { _VIEW } from '@shell/config/query-params';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import AlertingRule from './AlertingRule';
 import RecordingRule from './RecordingRule';
+import { clone } from '@shell/utils/object';
 
 export default {
   components: {
@@ -105,7 +106,7 @@ export default {
         });
         break;
       case 'alert':
-        value.push(this.defaultAlert);
+        value.push(clone(this.defaultAlert));
         break;
       default:
         break;

package/edit/provisioning.cattle.io.cluster/__tests__/CustomCommand.tests.ts

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand.vue';
-
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
 describe('component: CustomCommand', () => {
   const token = 'MY_TOKEN';
   const ip = 'MY_IP';

package/edit/workload/Upgrading.vue

@@ -40,12 +40,13 @@ export default {
   data() {
     const {
       strategy:strategyObj = {},
+      updateStrategy: updateStrategyObj = {},
       minReadySeconds = 0,
       progressDeadlineSeconds = 600,
       revisionHistoryLimit = 10,
       podManagementPolicy = 'OrderedReady'
     } = this.value;
-    const strategy = strategyObj.type || 'RollingUpdate';
+    const strategy = strategyObj.type || updateStrategyObj.type || 'RollingUpdate';
     let maxSurge = '25';
     let maxUnavailable = '25';
     let surgeUnits = '%';
@@ -97,7 +98,7 @@ export default {
       case WORKLOAD_TYPES.DAEMON_SET:
       case WORKLOAD_TYPES.STATEFUL_SET:
         return {
-          options: ['RollingUpdate', 'Delete'],
+          options: ['RollingUpdate', 'OnDelete'],
           labels:  [this.t('workload.upgrading.strategies.labels.rollingUpdate'), this.t('workload.upgrading.strategies.labels.delete')]
         };
       default:

package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue

@@ -78,7 +78,8 @@ export default {
      * Required to initialize with default SC on creation
      */
     defaultStorageClassName() {
-      return this.storageClasses.find((sc) => sc.metadata?.annotations?.['storageclass.beta.kubernetes.io/is-default-class'] || sc.metadata?.annotations?.['storageclass.kubernetes.io/is-default-class'])?.metadata.name;
+      return this.storageClasses.find((sc) => sc.metadata?.annotations?.['storageclass.beta.kubernetes.io/is-default-class'] === 'true' ||
+        sc.metadata?.annotations?.['storageclass.kubernetes.io/is-default-class'] === 'true')?.metadata.name ;
     },
 
     availablePVs() {

package/initialize/index.js

@@ -13,7 +13,7 @@ import { setContext, getLocation, getRouteData, normalizeError } from '../utils/
 import { createStore } from '../config/store.js';
 
 /* Plugins */
-
+import { loadDirectives } from '@shell/plugins';
 import '../plugins/portal-vue.js';
 import cookieUniversalNuxt from '../utils/cookie-universal-nuxt.js';
 import axios from '../utils/axios.js';
@@ -21,11 +21,7 @@ import plugins from '../core/plugins.js';
 import pluginsLoader from '../core/plugins-loader.js';
 import axiosShell from '../plugins/axios';
 import '../plugins/tooltip';
-import '../plugins/clean-tooltip-directive';
-import '../plugins/vue-clipboard2';
 import '../plugins/v-select';
-import '../plugins/directives';
-import '../plugins/clean-html-directive';
 import '../plugins/transitions';
 import '../plugins/vue-js-modal';
 import '../plugins/js-yaml';
@@ -47,6 +43,29 @@ import '../plugins/formatters';
 import version from '../plugins/version';
 import steveCreateWorker from '../plugins/steve-create-worker';
 
+// Prevent extensions from overriding existing directives
+// Hook into Vue.directive and keep track of the directive names that have been added
+// and prevent an existing directive from being overwritten
+const directiveNames = {};
+const vueDirective = Vue.directive;
+
+Vue.directive = function(name) {
+  if (directiveNames[name]) {
+    console.log(`Can not override directive: ${ name }`); // eslint-disable-line no-console
+
+    return;
+  }
+
+  directiveNames[name] = true;
+
+  vueDirective.apply(Vue, arguments);
+};
+
+// Load the directives from the plugins - we do this with a function so we know
+// these are initialized here, after the code above which keeps track of them and
+// prevents over-writes
+loadDirectives();
+
 // Component: <ClientOnly>
 Vue.component(ClientOnly.name, ClientOnly);
 

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.29",
+  "version": "0.4.0",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -120,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);
+};