@rancher/shell 0.5.3 → 1.2.0

package/chart/rancher-backup/index.vue

@@ -10,6 +10,7 @@ import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
+import ChartPsp from '@shell/components/ChartPsp';
 
 export default {
   components: {
@@ -18,7 +19,8 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner
+    Banner,
+    ChartPsp
   },
 
   hasTabs: true,
@@ -65,7 +67,7 @@ export default {
 
   computed: {
     defaultStorageClass() {
-      return this.storageClasses.filter((sc) => sc.metadata.annotations?.[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
+      return this.storageClasses.filter((sc) => sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
     },
 
     availablePVs() {
@@ -167,6 +169,12 @@ export default {
       label="Chart Options"
       name="chartOptions"
     >
+      <!-- Conditionally display PSP checkbox -->
+      <ChartPsp
+        :value="value"
+        :cluster="currentCluster"
+      />
+
       <Banner
         color="info"
         :label="t('backupRestoreOperator.deployment.storage.tip')"
@@ -200,7 +208,6 @@ export default {
                 :status="reclaimWarning ? 'warning' : null"
                 :options="storageClasses"
                 :hover-tooltip="true"
-                data-testid="backup-chart-select-existing-storage-class"
               />
             </div>
             <div class="col span-6">

package/cloud-credential/azure.vue

@@ -2,9 +2,11 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { azureEnvironments } from '@shell/machine-config/azure';
-import { parseAzureError } from '@shell/utils/azure';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
+const AZURE_ERROR_MSG_REGEX = /^.*Message=\"(.*)\"$/;
+const AZURE_ERROR_JSON_REGEX = /^.*Response body: ({.*})/;
+
 export default {
   components: { LabeledInput, LabeledSelect },
   mixins:     [CreateEditView],
@@ -57,10 +59,21 @@ export default {
         return true;
       } catch (e) {
         if (e.error) {
-          const parsed = parseAzureError(e.error);
+          // Try and parse the response from Azure a couple of ways
+          const msgMatch = e.error.match(AZURE_ERROR_MSG_REGEX);
+
+          if (msgMatch?.length === 2) {
+            return { errors: [msgMatch[1]] };
+          } else {
+            const jsonMatch = e.error.match(AZURE_ERROR_JSON_REGEX);
+
+            if (jsonMatch?.length === 2) {
+              try {
+                const errorObj = JSON.parse(jsonMatch[1]);
 
-          if (parsed) {
-            return { errors: [parsed] };
+                return { errors: [errorObj.error_description] };
+              } catch (e) {}
+            }
           }
         }
 

package/components/AsyncButton.vue

@@ -273,7 +273,6 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
-    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
@@ -286,11 +285,3 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     />
   </button>
 </template>
-
-<style lang="scss" scoped>
-// refresh mode has icon + text. We need to fix the positioning of the icon and sizing
-.manual-refresh i {
-  margin: 0 0 0 8px !important;
-  font-size: 1rem !important;
-}
-</style>

package/components/Carousel.vue

@@ -282,7 +282,6 @@ export default {
   .slide-content {
     display: flex;
     padding: 30px;
-    height: 100%;
 
     .slide-img {
       width: 150px;

package/components/ChartPsp.vue

@@ -0,0 +1,76 @@
+<script>
+import { Checkbox } from '@components/Form/Checkbox';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: { Checkbox },
+  props:      {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    mode: {
+      type:    String,
+      default: 'edit'
+    },
+
+    /**
+     * Optional title section prior checkbox
+     */
+    title: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Cluster information
+     */
+    cluster: {
+      type:    Object,
+      default: null
+    }
+  },
+  created() {
+    if (!this.value.global.cattle) {
+      this.$set(this.value.global, 'cattle', { psp: { enabled: false } });
+    }
+    if (!this.value.global.cattle.psp) {
+      this.$set(this.value.global.cattle, 'psp', { enabled: false });
+    }
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    /**
+     * Display checkbox only if contains PSP or K8S version is less than 1.25
+     */
+    hasCheckbox() {
+      const clusterVersion = this.cluster?.kubernetesVersion || '';
+      const version = clusterVersion.match(/\d+/g);
+      const isRequiredVersion = version?.length ? +version[0] === 1 && +version[1] < 25 : false;
+
+      return isRequiredVersion;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="hasCheckbox"
+    class="mt-10 mb-10"
+  >
+    <h3 v-if="title">
+      {{ title }}
+    </h3>
+
+    <Checkbox
+      v-model="value.global.cattle.psp.enabled"
+      data-testid="psp-checkbox"
+      :mode="mode"
+      :label="t('catalog.chart.enablePSP')"
+    />
+  </div>
+</template>

package/components/ClusterIconMenu.vue

@@ -15,11 +15,10 @@ export default {
     showLocalIcon() {
       return this.cluster.isLocal && !this.cluster.isHarvester && !this.cluster.badge?.iconText;
     },
-    hasCustomColor() {
-      return this.cluster.badge?.color;
-    },
-    customColor() {
-      return this.cluster.badge?.color || '';
+    badgeLogoBorderBottom() {
+      const color = this.cluster.badge?.color;
+
+      return color ? `4px solid ${ color }` : '';
     }
   },
   methods: {
@@ -45,17 +44,14 @@ export default {
   >
     <div
       class="cluster-badge-logo"
-      :class="{ 'disabled': !isEnabled, 'custom-color': hasCustomColor }"
+      :class="{ 'disabled': !isEnabled }"
+      :style="{ borderBottom: badgeLogoBorderBottom }"
     >
       <span
         class="cluster-badge-logo-text"
       >
         {{ smallIdentifier(cluster.label) }}
       </span>
-      <span
-        class="custom-color-decoration"
-        :style="{'background': customColor}"
-      />
       <svg
         v-if="showLocalIcon"
         class="cluster-local-logo"
@@ -103,6 +99,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+
   .cluster-icon-menu {
     position: relative;
     align-items: center;
@@ -114,8 +111,8 @@ export default {
   .cluster-pin-icon {
     position: absolute;
     top: -6px;
-    right: -7px;
-    font-size: 14px;
+    right: -4px;
+    font-size: 12px;
     transform: scaleX(-1);
     color: var(--body-text);
   }
@@ -138,18 +135,6 @@ export default {
     font-size: 12px;
     text-transform: uppercase;
 
-    &.custom-color {
-      border-bottom: 4px solid transparent;
-    }
-
-    .custom-color-decoration {
-      height: 4px;
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      border-radius: 0px 0px 5px 5px;
-    }
-
     &.disabled {
       filter: grayscale(1);
       color: var(--muted);

package/components/CodeMirror.vue

@@ -24,23 +24,18 @@ export default {
     asTextArea: {
       type:    Boolean,
       default: false
-    },
-    showKeyMapBox: {
-      type:    Boolean,
-      default: false
-    },
+    }
   },
 
   data() {
     return {
-      codeMirrorRef:       null,
-      loaded:              false,
-      showKeyMapCloseIcon: false,
-      removeKeyMapBox:     false,
+      codeMirrorRef: null,
+      loaded:        false
     };
   },
 
   computed: {
+
     isDisabled() {
       return this.mode === _VIEW;
     },
@@ -75,10 +70,6 @@ export default {
 
       return out;
     },
-
-    keyMapText() {
-      return this.combinedOptions?.keyMap ? this.t(`prefs.keymap.${ this.combinedOptions.keyMap }`) : null;
-    },
   },
 
   created() {
@@ -133,47 +124,19 @@ export default {
       if ( this.$refs.codeMirrorRef ) {
         this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
       }
-    },
-
-    closeKeyMapInfo() {
-      this.removeKeyMapBox = true;
-    },
-
-    onKeyMapMouseOver(v) {
-      this.showKeyMapCloseIcon = v;
     }
   }
 };
 </script>
 
 <template>
-  <div
-    class="code-mirror"
-    :class="{['as-text-area']: asTextArea}"
-  >
-    <div v-if="loaded">
-      <div
-        v-if="showKeyMapBox && !removeKeyMapBox && keyMapText"
-        class="keymap overlay"
-      >
-        <div
-          v-clean-tooltip="t('codeMirror.keymap.tooltip')"
-          class="label"
-          data-testid="code-mirror-keymap"
-          @mouseover="onKeyMapMouseOver(true)"
-          @mouseleave="onKeyMapMouseOver(false)"
-        >
-          <span>
-            {{ keyMapText }}
-          </span>
-          <i
-            v-if="showKeyMapCloseIcon"
-            class="icon icon-close icon-sm"
-            @click="closeKeyMapInfo"
-          />
-        </div>
-      </div>
+  <client-only placeholder=" Loading...">
+    <div
+      class="code-mirror"
+      :class="{['as-text-area']: asTextArea}"
+    >
       <codemirror
+        v-if="loaded"
         ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
@@ -184,41 +147,17 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
+      <div v-else>
+        Loading...
+      </div>
     </div>
-    <div v-else>
-      Loading...
-    </div>
-  </div>
+  </client-only>
 </template>
 
 <style lang="scss">
   .code-mirror {
     z-index: 0;
 
-    .overlay {
-      position: sticky;
-      display: grid;
-      top: 0;
-      float: right;
-      height: 0;
-      z-index: 1;
-
-      .label {
-        border-radius: 2px;
-        border-style: dashed;
-        border-width: 0.1px;
-        margin: 7px 7px 0 0;
-        padding: 7px;
-        color: var(--darker);
-        background-color: var(--overlay-bg);
-        font-size: 12px;
-
-        .icon {
-          cursor: pointer;
-        }
-      }
-    }
-
     .vue-codemirror .CodeMirror {
       height: initial;
       background: none
@@ -311,5 +250,7 @@ export default {
         background-color: var(--primary);
       }
     }
+
   }
+
 </style>

package/components/CopyCode.vue

@@ -1,7 +1,5 @@
 <script>
 import { isArray } from '@shell/utils/array';
-import { copyTextToClipboard } from '@shell/utils/clipboard';
-import { exceptionToErrorsArray } from '@shell/utils/error';
 
 function flatten(node) {
   if ( node.text ) {
@@ -29,16 +27,14 @@ export default {
 
       const content = flatten(this.$slots.default).trim();
 
-      copyTextToClipboard(content).then(() => {
+      this.$copyText(content).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
-        this.$emit('copied');
-      }).catch((e) => {
-        this.$emit('error', exceptionToErrorsArray(e));
       });
+      this.$emit('copied');
     },
   },
 

package/components/CopyToClipboard.vue

@@ -1,6 +1,5 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { AsyncButton },
@@ -19,7 +18,7 @@ export default {
 
   methods: {
     clicked(buttonCb) {
-      copyTextToClipboard(this.text).then(() => {
+      this.$copyText(this.text).then(() => {
         buttonCb(true);
       }).catch(() => {
         buttonCb(false);

package/components/CopyToClipboardText.vue

@@ -1,6 +1,4 @@
 <script>
-import { copyTextToClipboard } from '@shell/utils/clipboard';
-import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   props: {
     text: {
@@ -22,20 +20,17 @@ export default {
     clicked(event) {
       if (!this.copied) {
         event.preventDefault();
-        copyTextToClipboard(this.text).then(() => {
-          this.copied = true;
+        this.$copyText(this.text);
+        this.copied = true;
 
-          let t = event.target;
+        let t = event.target;
 
-          if (t.tagName === 'I') {
-            t = t.parentElement || t;
-          }
-          setTimeout(() => {
-            this.copied = false;
-          }, 500);
-        }).catch((e) => {
-          this.$emit('error', exceptionToErrorsArray(e));
-        });
+        if (t.tagName === 'I') {
+          t = t.parentElement || t;
+        }
+        setTimeout(() => {
+          this.copied = false;
+        }, 500);
       }
     },
   }

package/components/CruResource.vue

@@ -435,7 +435,6 @@ export default {
           v-for="(err, i) in errors"
           :key="i"
           color="error"
-          :data-testid="`error-banner${i}`"
           :label="stringify(mappedErrors[err].message)"
           :icon="mappedErrors[err].icon"
           :closable="true"

package/components/EtcdInfoBanner.vue

@@ -11,7 +11,7 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
     let monitoringVersion = '';
 
-    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
+    if (this.$store.getters[`${ inStore }/canList}`](CATALOG.APP)) {
       try {
         const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
 
@@ -23,13 +23,13 @@ export default {
 
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 
-    this.hasLeader = leader ? 'Yes' : 'No';
+    this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');
     this.leaderChanges = await leaderChanges(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
     this.failedProposals = await failedProposals(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
   },
   data() {
     return {
-      hasLeader:       'No',
+      hasLeader:       this.t('generic.no'),
       leaderChanges:   0,
       failedProposals: 0
     };
@@ -46,10 +46,10 @@ export default {
     color="info"
   >
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }},
+      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
     </div>
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }},
+      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }}
     </div>
     <div class="datum">
       <label>{{ t('etcdInfoBanner.failedProposals') }}</label> {{ failedProposals }}

package/components/ExplorerProjectsNamespaces.vue

@@ -391,7 +391,7 @@ export default {
     />
     <ResourceTable
       ref="table"
-      class="table project-namespaces-table"
+      class="table"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
@@ -505,10 +505,6 @@ export default {
 <style lang="scss" scoped>
 .project-namespaces {
   & ::v-deep {
-    .project-namespaces-table table {
-      table-layout: fixed;
-    }
-
     .project-name {
       line-height: 30px;
     }
@@ -518,26 +514,6 @@ export default {
       flex-direction: row;
       justify-content: space-between;
 
-      .group-tab {
-        max-width: calc(100% - 230px);
-      }
-
-      .project-name {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        span:first-child {
-          padding-right: 8px;
-        }
-
-        span:last-child {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-
       &.has-description {
         .right {
           margin-top: 5px;

package/components/FixedBanner.vue

@@ -150,7 +150,6 @@ export default {
     <div
       v-if="!showAsDialog"
       class="banner"
-      data-testid="fixed__banner"
       :style="bannerStyle"
       :class="{'banner-consent': consent}"
     >

package/components/IconOrSvg.vue

@@ -76,7 +76,7 @@ export default {
           for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
             const cssRules = stylesheet.cssRules[x];
 
-            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
+            if (cssRules.selectorText && ((currTheme === 'light' && cssRules.selectorText.includes('body') &&
               cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
               (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
               // grab the colors to be used on the icon from the css rules

package/components/Markdown.vue

@@ -13,8 +13,9 @@ export default {
 
   data() {
     return {
-      loaded: false,
-      marked: null,
+      loaded:    false,
+      marked:    null,
+      dompurify: null,
     };
   },
 
@@ -25,10 +26,15 @@ export default {
         breaks:   true
       });
     },
+
+    sanitized() {
+      return this.dompurify.sanitize(this.html);
+    },
   },
 
   async mounted() {
     const marked = (await import(/* webpackChunkName: "markdown" */ 'marked'));
+    const dompurify = (await import(/* webpackChunkName: "markdown" */ 'dompurify')).default;
 
     const renderer = new marked.Renderer();
     const linkRenderer = renderer.link;
@@ -57,8 +63,11 @@ export default {
       return rendered;
     };
 
+    dompurify.setConfig({ ADD_ATTR: ['target'] });
+
     this.marked = marked;
     this.markedRenderer = renderer;
+    this.dompurify = dompurify;
     this.loaded = true;
     this.$emit('loaded', true);
   }
@@ -68,7 +77,7 @@ export default {
 <template>
   <div
     v-if="loaded"
-    v-clean-html="html"
+    v-clean-html="sanitized"
     class="markdown"
   />
   <Loading v-else />
@@ -87,20 +96,8 @@ export default {
 }
 
 .markdown {
-    blockquote {
-      color: rgb(101, 109, 118);
-      border-left: 0.25em solid rgb(208, 215, 222);
-      padding: 0 1em;
-      margin-bottom: 16px;
-    }
-
-    table {
-      border-collapse: collapse;
-    }
-
     TH {
       text-align: left;
-      border: 1px solid #e3e7eb;
     }
 
     table tr th {
@@ -121,7 +118,6 @@ export default {
       text-align: left;
       margin: 0;
       padding: 6px 13px;
-      border: 1px solid #e3e7eb;
     }
 
     table tr th :first-child, table tr td :first-child {

package/components/Questions/index.vue

@@ -258,7 +258,7 @@ export default {
       }
 
       if ( this.tabbed === 'multiple' ) {
-        return !!this.groups.length;
+        return this.groups.length > 1;
       }
 
       return true;