@rancher/shell 0.5.2 → 1.2.0

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/CodeMirror.vue

@@ -130,26 +130,28 @@ export default {
 </script>
 
 <template>
-  <div
-    class="code-mirror"
-    :class="{['as-text-area']: asTextArea}"
-  >
-    <codemirror
-      v-if="loaded"
-      ref="codeMirrorRef"
-      :value="value"
-      :options="combinedOptions"
-      :disabled="isDisabled"
-      @ready="onReady"
-      @input="onInput"
-      @changes="onChanges"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-    <div v-else>
-      Loading...
+  <client-only placeholder=" Loading...">
+    <div
+      class="code-mirror"
+      :class="{['as-text-area']: asTextArea}"
+    >
+      <codemirror
+        v-if="loaded"
+        ref="codeMirrorRef"
+        :value="value"
+        :options="combinedOptions"
+        :disabled="isDisabled"
+        @ready="onReady"
+        @input="onInput"
+        @changes="onChanges"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <div v-else>
+        Loading...
+      </div>
     </div>
-  </div>
+  </client-only>
 </template>
 
 <style lang="scss">

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/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;

package/components/ResourceDetail/Masthead.vue

@@ -177,16 +177,13 @@ export default {
 
     project() {
       if (this.isNamespace) {
-        const cluster = this.$store.getters['currentCluster'];
+        const id = (this.value?.metadata?.labels || {})[PROJECT];
+        const clusterId = this.$store.getters['currentCluster'].id;
 
-        if (cluster) {
-          const id = (this.value?.metadata?.labels || {})[PROJECT];
-
-          return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ cluster.id }/${ id }`);
-        }
+        return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
+      } else {
+        return null;
       }
-
-      return null;
     },
 
     banner() {
@@ -373,7 +370,7 @@ export default {
     },
 
     hideNamespaceLocation() {
-      return this.$store.getters['currentProduct'].hideNamespaceLocation || this.value.namespaceLocation === null;
+      return this.$store.getters['currentProduct'].hideNamespaceLocation;
     },
   },
 
@@ -422,7 +419,6 @@ export default {
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
-              class="mastehead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -545,10 +541,6 @@ export default {
 
   HEADER {
     margin: 0;
-
-    .title {
-      overflow: hidden;
-    }
   }
 
   .primaryheader {
@@ -558,17 +550,6 @@ export default {
 
     h1 {
       margin: 0;
-      overflow: hidden;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .mastehead-resource-title {
-        padding: 0 8px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
     }
   }
 
@@ -591,6 +572,9 @@ export default {
 
   .masthead-state {
     font-size: initial;
+    display: inline-block;
+    position: relative;
+    top: -2px;
   }
 
   .masthead-istio {

package/components/ResourceList/Masthead.vue

@@ -163,7 +163,7 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header class="with-subheader">
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
@@ -180,6 +180,11 @@ export default {
         :indeterminate="loadIndeterminate"
       />
     </div>
+    <div class="sub-header">
+      <slot name="subHeader">
+        <!--Slot content-->
+      </slot>
+    </div>
     <div class="actions-container">
       <slot name="actions">
         <div class="actions">
@@ -221,4 +226,16 @@ export default {
   header {
     margin-bottom: 20px;
   }
+
+  header.with-subheader {
+    grid-template-areas:
+      'type-banner type-banner'
+      'title actions'
+      'sub-header sub-header'
+      'state-banner state-banner';
+  }
+
+  .sub-header {
+    grid-area: sub-header;
+  }
 </style>

package/components/ResourceTable.vue

@@ -97,14 +97,6 @@ export default {
       default: 'sortableTable.paging.resource',
     },
 
-    /**
-     * Additional params to pass to the pagingLabel translation
-     */
-    pagingParams: {
-      type:    Object,
-      default: null,
-    },
-
     rowActions: {
       type:    Boolean,
       default: true,
@@ -400,11 +392,7 @@ export default {
       return standard.concat(this.listGroups);
     },
 
-    parsedPagingParams() {
-      if (this.pagingParams) {
-        return this.pagingParams;
-      }
-
+    pagingParams() {
       if ( !this.schema ) {
         return {
           singularLabel: '',
@@ -494,7 +482,7 @@ export default {
     :group-options="groupOptions"
     :search="search"
     :paging="true"
-    :paging-params="parsedPagingParams"
+    :paging-params="pagingParams"
     :paging-label="pagingLabel"
     :row-actions="rowActions"
     :table-actions="_showBulkActions"

package/components/ResourceYaml.vue

@@ -190,11 +190,6 @@ export default {
 
       cm.foldLinesMatching(/managedFields/);
 
-      // Allow the model to supply an array of json paths to fold other sections in the YAML for the given resource type
-      if (this.value?.yamlFolding) {
-        this.value.yamlFolding.forEach((path) => cm.foldYaml(path));
-      }
-
       // regardless of edit or create we should probably fold all the comments so they dont get out of hand.
       const saved = cm.getMode().fold;
 

package/components/SideNav.vue

@@ -583,7 +583,7 @@ export default {
         }
       }
 
-      &.router-link-active:not(:hover) {
+      &.nuxt-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

package/components/SortableTable/THead.vue

@@ -162,13 +162,15 @@ export default {
       const menu = document.querySelector('.table-options-container');
       const elem = document.querySelector('.table-options-btn');
 
-      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-        overlapX:  true,
-        fudgeX:    326,
-        fudgeY:    -22,
-        positionX: CENTER,
-        positionY: AUTO,
-      });
+      if (!this.tableColsMenuPosition) {
+        this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+          overlapX:  true,
+          fudgeX:    26,
+          fudgeY:    -22,
+          positionX: CENTER,
+          positionY: AUTO,
+        });
+      }
 
       // toggle visibility
       this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;

package/components/SortableTable/index.vue

@@ -906,7 +906,7 @@ export default {
 <template>
   <div
     ref="container"
-    data-testid="cluster-list-container"
+    :data-testid="componentTestid + '-list-container'"
   >
     <div
       :class="{'titled': $slots.title && $slots.title.length}"
@@ -1026,8 +1026,9 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
+            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
-            mode="manual-refresh"
+            mode="refresh"
             :current-phase="currentPhase"
             @click="debouncedRefreshTableData"
           />

package/components/StatusTable.vue

@@ -3,8 +3,6 @@ import {
   LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
 } from '@shell/config/table-headers';
 import SortableTable from '@shell/components/SortableTable';
-import { copyTextToClipboard } from '@shell/utils/clipboard';
-import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   components: { SortableTable },
   props:      {
@@ -33,14 +31,12 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      copyTextToClipboard(this.$slots.default[0].text).then(() => {
+      this.$copyText(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
-      }).catch((e) => {
-        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }