@rancher/shell 0.3.4 → 0.3.5

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

@@ -358,6 +358,10 @@ export default {
       const newNamespaceName = get(this.resource, this.namespaceKey);
       let namespaceAlreadyExists = false;
 
+      if (!this.createNamespace) {
+        return;
+      }
+
       try {
         // This is in a try-catch block because the call to fetch
         // a namespace throws an error if the namespace is not found.
@@ -461,7 +465,7 @@ export default {
                     <h5>
                       <span
                         v-if="$store.getters['i18n/exists'](subtype.label)"
-                        v-html="t(subtype.label)"
+                        v-clean-html="t(subtype.label)"
                       />
                       <span v-else>{{ subtype.label }}</span>
                     </h5>
@@ -480,7 +484,7 @@ export default {
                   >
                     <span
                       v-if="$store.getters['i18n/exists'](subtype.description)"
-                      v-html="t(subtype.description, {}, true)"
+                      v-clean-html="t(subtype.description, {}, true)"
                     />
                     <span v-else>{{ subtype.description }}</span>
                   </div>

package/components/DashboardMetrics.vue

@@ -47,25 +47,26 @@ export default {
 </script>
 
 <template>
-  <div
-    class="dashboard-metrics"
-    :class="!hasSummaryAndDetail && 'external-link-pull-left'"
+  <div
+    class="dashboard-metrics"
+    :class="!hasSummaryAndDetail && 'external-link-pull-left'"
   >
     <div class="graph-options mb-10">
-      <DashboardOptions
-        v-model="graphOptions"
-        :has-summary-and-detail="hasSummaryAndDetail"
+      <DashboardOptions
+        v-model="graphOptions"
+        :has-summary-and-detail="hasSummaryAndDetail"
       />
     </div>
     <div class="info">
       <slot />
     </div>
-    <div
-      class="graphs"
-      :style="{height: graphHeight}"
+    <div
+      class="graphs"
+      :style="{height: graphHeight}"
     >
       <GrafanaDashboard
         v-if="graphOptions.type === 'detail'"
+        key="'detail'"
         class="col span-12 detail"
         :background-color="graphBackgroundColor"
         :theme="theme"
@@ -76,6 +77,7 @@ export default {
       />
       <GrafanaDashboard
         v-else
+        key="'summary'"
         class="col span-12 summary"
         :background-color="graphBackgroundColor"
         :theme="theme"
@@ -108,7 +110,7 @@ export default {
     .external-link {
       position: absolute;
       left: 10px;
-      top: -45px;
+      top: -47px;
     }
   }
 }

package/components/DetailText.vue

@@ -169,8 +169,8 @@ export default {
 
     <span
       v-else
+      v-clean-html="bodyHtml"
       :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
-      v-html="bodyHtml"
     />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">

package/components/DisableAuthProviderModal.vue

@@ -49,7 +49,7 @@ export default {
       </h4>
       <div slot="body">
         <div class="mb-10">
-          <p v-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
+          <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
         </div>
       </div>
       <template #actions>

package/components/EmberPage.vue

@@ -522,8 +522,8 @@ export default {
     />
     <div
       v-if="inline && !loaded"
+      v-clean-html="t('generic.loading', {}, true)"
       class="inline-loading"
-      v-html="t('generic.loading', {}, true)"
     />
     <div
       v-if="error"

package/components/EtcdInfoBanner.vue

@@ -26,10 +26,10 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <Banner
-    v-else
-    class="banner"
-    color="info"
+  <Banner
+    v-else
+    class="banner"
+    color="info"
   >
     <div class="datum">
       <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
@@ -51,6 +51,7 @@ export default {
 
         .datum {
             text-align: center;
+            margin-right: 5px;
         }
 
         & ::v-deep label {

package/components/ExplorerMembers.vue

@@ -291,8 +291,8 @@ export default {
                 class="group-tab"
               >
                 <div
+                  v-clean-html="getProjectLabel(group)"
                   class="project-name"
-                  v-html="getProjectLabel(group)"
                 />
               </div>
               <div class="right">

package/components/ExplorerProjectsNamespaces.vue

@@ -112,6 +112,10 @@ export default {
       // is updated if a new project is created or removed.
       const projectsInAllClusters = this.$store.getters['management/all'](MANAGEMENT.PROJECT);
 
+      if (this.currentProduct?.customNamespaceFilter && this.currentProduct?.inStore && this.$store.getters[`${ this.currentProduct.inStore }/filterProject`]) {
+        return this.$store.getters[`${ this.currentProduct.inStore }/filterProject`];
+      }
+
       const clustersInProjects = projectsInAllClusters.filter(project => project.spec.clusterName === clusterId);
 
       return clustersInProjects;
@@ -364,8 +368,8 @@ export default {
             class="group-tab"
           >
             <div
+              v-clean-html="projectLabel(group.group)"
               class="project-name"
-              v-html="projectLabel(group.group)"
             />
             <div
               v-if="projectDescription(group.group)"
@@ -411,6 +415,11 @@ export default {
           <span v-else>
             {{ row.name }}
           </span>
+          <i
+            v-if="row.injectionEnabled"
+            v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+            class="icon icon-istio ml-5"
+          />
           <i
             v-if="row.hasSystemLabels"
             v-tooltip="getPsaTooltip(row)"
@@ -483,6 +492,10 @@ export default {
     .namespace-name {
       display: flex;
       align-items: center;
+
+      .icon-istio {
+        color: var(--primary);
+      }
     }
   }
 }

package/components/FileDiff.vue

@@ -1,7 +1,6 @@
 <script>
 import { Diff2Html } from 'diff2html';
 import { createPatch } from 'diff';
-import $ from 'jquery';
 
 export default {
   props: {
@@ -74,21 +73,21 @@ export default {
         return;
       }
 
-      const container = $(this.$refs.root);
+      const container = this.$refs.root;
 
-      if ( !container || !container.length ) {
+      if ( !container ) {
         return;
       }
 
-      const offset = container.offset();
+      const offset = container.getBoundingClientRect();
 
       if ( !offset ) {
         return;
       }
 
-      const desired = $(window).innerHeight() - offset.top - this.footerSpace;
+      const desired = window.innerHeight - offset.top - this.footerSpace;
 
-      container.css('height', `${ Math.max(0, desired) }px`);
+      container.style.height = `${ Math.max(0, desired) }px`;
     },
   },
 };
@@ -99,8 +98,8 @@ export default {
     <resize-observer @notify="fit" />
     <div
       ref="root"
+      v-clean-html="html"
       class="root"
-      v-html="html"
     />
   </div>
 </template>

package/components/GrafanaDashboard.vue

@@ -54,14 +54,11 @@ export default {
     }
   },
   watch: {
-    currentUrl() {
+    currentUrl(neu) {
+      // Should consider changing `this.graphWindow?.angular` to something like `!loaded && !error`
+      // https://github.com/rancher/dashboard/pull/5802
       if (this.graphHistory && this.graphWindow?.angular) {
-        const angularElement = this.graphWindow.angular.element(this.graphDocument.querySelector('.grafana-app'));
-        const injector = angularElement.injector();
-
-        this.graphHistory.pushState({}, '', this.currentUrl);
-        injector.get('$route').updateParams(this.computeParams());
-        injector.get('$route').reload();
+        this.graphWindow.location.replace(neu);
       }
     },
 
@@ -222,15 +219,15 @@ export default {
 
 <template>
   <div class="grafana-graph">
-    <Banner
-      v-if="error"
-      color="error"
-      style="z-index: 1000"
+    <Banner
+      v-if="error"
+      color="error"
+      style="z-index: 1000"
     >
       <div class="text-center">
-        {{ t('grafanaDashboard.failedToLoad') }} <a
-          href="#"
-          @click="reload"
+        {{ t('grafanaDashboard.failedToLoad') }} <a
+          href="#"
+          @click="reload"
         >{{ t('grafanaDashboard.reload') }}</a>
       </div>
     </Banner>
@@ -245,14 +242,14 @@ export default {
     <div v-if="loading">
       <Loading />
     </div>
-    <div
-      v-if="!loading && !error"
-      class="external-link"
+    <div
+      v-if="!loading && !error"
+      class="external-link"
     >
-      <a
-        :href="grafanaUrl"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
+      <a
+        :href="grafanaUrl"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
     </div>
   </div>

package/components/LazyImage.vue

@@ -1,6 +1,4 @@
 <script>
-import $ from 'jquery';
-
 export default {
   props: {
     initialSrc: {
@@ -32,31 +30,31 @@ export default {
   },
 
   beforeDestroy() {
-    const $img = $(this.$refs.img);
+    const img = this.$refs.img;
 
-    if ( $img?.length ) {
-      $img.off('error', this.boundError);
+    if (img) {
+      img.removeEventListener('error', this.boundError);
     }
   },
 
   methods: {
     // Ensure we load the image when the source changes
     loadImage() {
-      const $img = $(this.$refs.img);
+      const img = this.$refs.img;
 
-      if ( this.src ) {
-        $img.attr('src', this.src);
+      if (this.src) {
+        img.setAttribute('src', this.src);
         this.boundError = this.onError.bind(this);
 
-        $img.on('error', this.boundError);
+        img.addEventListener('error', this.boundError);
       }
     },
 
     onError() {
-      const $img = $(this.$refs.img);
+      const img = this.$refs.img;
 
-      if ( $img?.length ) {
-        $img.attr('src', this.errorSrc);
+      if (img) {
+        img.setAttribute('src', this.errorSrc);
       }
     }
   }

package/components/LogItem.vue

@@ -36,8 +36,8 @@ export default {
   <div class="line">
     <span class="time">{{ format(source.time) }}</span>
     <span
+      v-clean-html="source.msg"
       class="msg"
-      v-html="source.msg"
     />
   </div>
 </template>

package/components/Markdown.vue

@@ -77,8 +77,8 @@ export default {
 <template>
   <div
     v-if="loaded"
+    v-clean-html="sanitized"
     class="markdown"
-    v-html="sanitized"
   />
   <Loading v-else />
 </template>

package/components/PromptRemove.vue

@@ -343,7 +343,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-html="resourceNames(names, plusMore, t)"
+              v-clean-html="resourceNames(names, plusMore, t)"
             />
           </template>
 
@@ -367,7 +367,7 @@ export default {
               class="mt-10"
             >
               <span
-                v-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+                v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
               />
             </div>
           </template>

package/components/PromptRestore.vue

@@ -218,8 +218,8 @@ export default {
     >
       <h4
         slot="title"
+        v-clean-html="t('promptRestore.title', null, true)"
         class="text-default-text"
-        v-html="t('promptRestore.title', null, true)"
       />
 
       <div

package/components/ResourceDetail/Masthead.vue

@@ -429,6 +429,15 @@ export default {
               class="masthead-state"
               :value="value"
             />
+            <span
+              v-if="!isCreate && value.injectionEnabled"
+              class="masthead-istio"
+            >
+              <i
+                v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                class="icon icon-sm icon-istio"
+              />
+            </span>
           </h1>
         </div>
         <div
@@ -568,6 +577,13 @@ export default {
     top: -2px;
   }
 
+  .masthead-istio {
+    .icon {
+      vertical-align: middle;
+      color: var(--primary);
+    }
+  }
+
   .left-right-split {
     display: grid;
     align-items: center;

package/components/ResourceDetail/index.vue

@@ -13,6 +13,7 @@ import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -159,9 +160,24 @@ export default {
       }
     } else {
       if ( as === _GRAPH ) {
-        await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
-        await store.dispatch('management/findAll', { type: FLEET.BUNDLE });
-        await store.dispatch('management/findAll', { type: FLEET.BUNDLE_DEPLOYMENT });
+        const graphSchema = await checkSchemasForFindAllHash({
+          cluster: {
+            inStoreType: 'management',
+            type:        FLEET.CLUSTER
+          },
+          bundle: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE
+          },
+
+          bundleDeployment: {
+            inStoreType: 'management',
+            type:        FLEET.BUNDLE_DEPLOYMENT
+          }
+
+        }, this.$store);
+
+        this.canViewChart = graphSchema.cluster && graphSchema.bundle && graphSchema.bundleDeployment;
       }
 
       let fqid = id;
@@ -249,6 +265,7 @@ export default {
       value:           null,
       model:           null,
       notFound:        null,
+      canViewChart:    true,
     };
   },
 
@@ -385,7 +402,7 @@ export default {
     </Masthead>
 
     <ForceDirectedTreeChart
-      v-if="isGraph"
+      v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />

package/components/ResourceList/index.vue

@@ -177,8 +177,8 @@ export default {
   >
     <template #message>
       <span
+        v-clean-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
         class="filter"
-        v-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
       />
     </template>
   </IconMessage>

package/components/ResourceTable.vue

@@ -30,6 +30,9 @@ export const defaultTableSortGenerationFn = (schema, $store) => {
   if ( nsFilterKey ) {
     return `${ sortKey }/${ nsFilterKey }`;
   }
+
+  // covers case where we have no current cluster's ns cache
+  return sortKey;
 };
 
 export default {
@@ -462,8 +465,8 @@ export default {
 
     <template #group-by="{group: thisGroup}">
       <div
+        v-clean-html="thisGroup.ref"
         class="group-tab"
-        v-html="thisGroup.ref"
       />
     </template>
 

package/components/SingleClusterInfo.vue

@@ -118,11 +118,11 @@ export default {
         class="glance-item"
       >
         <label>{{ t('glance.version') }}: </label>
+        <span>{{ clusterDetail.kubernetesVersionBase }}</span>
         <span
           v-if="clusterDetail.kubernetesVersionExtension"
-          style="font-size: 0.5em"
+          style="font-size: 0.75em"
         >{{ clusterDetail.kubernetesVersionExtension }}</span>
-        <span>{{ clusterDetail.kubernetesVersionBase }}</span>
       </div>
       <div class="glance-item">
         <label>{{ t('glance.created') }}: </label>

package/components/SortableTable/THead.vue

@@ -242,7 +242,7 @@ export default {
             v-if="col.sort"
             v-tooltip="tooltip(col)"
           >
-            <span v-html="labelFor(col)" />
+            <span v-clean-html="labelFor(col)" />
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
               v-tooltip="t('sortableTable.tableHeader.noFilter')"

package/components/SortableTable/index.vue

@@ -926,7 +926,7 @@ export default {
                   v-if="act.icon"
                   :class="act.icon"
                 />
-                <span v-html="act.label" />
+                <span v-clean-html="act.label" />
               </button>
               <ActionDropdown
                 :class="bulkActionsDropdownClass"
@@ -964,7 +964,7 @@ export default {
                         v-if="act.icon"
                         :class="act.icon"
                       />
-                      <span v-html="act.label" />
+                      <span v-clean-html="act.label" />
                     </li>
                   </ul>
                 </template>
@@ -1325,6 +1325,9 @@ export default {
             :full-colspan="fullColspan"
             :row="row.row"
             :sub-matches="subMatches"
+            :keyField="keyField"
+            :componentTestid="componentTestid"
+            :i="i"
             :onRowMouseEnter="onRowMouseEnter"
             :onRowMouseLeave="onRowMouseLeave"
           >

package/components/__tests__/AsyncButton.test.ts

@@ -1,5 +1,6 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: AsyncButton', () => {
   it('should render appropriately with default config', () => {
@@ -7,7 +8,8 @@ describe('component: AsyncButton', () => {
     const mockT = jest.fn().mockReturnValue('some-string');
 
     const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
+      directives: { cleanHtmlDirective },
+      mocks:      {
         $store: {
           getters: {
             'i18n/exists': mockExists,