@rancher/shell 0.3.4 → 0.3.6

package/chart/istio.vue

@@ -5,8 +5,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import YamlEditor from '@shell/components/YamlEditor';
 import { mapGetters } from 'vuex';
 import FileSelector from '@shell/components/form/FileSelector';
-import Tab from '@shell/components/Tabbed/Tab';
 import { Banner } from '@components/Banner';
+import ChartPsp from '@shell/components/ChartPsp';
 
 const defaultOverlayFile = `#apiVersion: install.istio.io/v1alpha1
 #kind: IstioOperator
@@ -54,12 +54,10 @@ export default {
     Checkbox,
     FileSelector,
     YamlEditor,
-    Tab,
-    Banner
+    Banner,
+    ChartPsp
   },
 
-  hasTabs: true,
-
   props: {
     value: {
       type:    Object,
@@ -76,10 +74,14 @@ export default {
       overlayFile = defaultOverlayFile;
     }
 
-    return { overlayFile };
+    return {
+      overlayFile,
+      showKialiBanner: this.value.kiali?.enabled
+    };
   },
 
   computed: {
+    ...mapGetters(['currentCluster'], { t: 'i18n/t' }),
     valuesYaml: {
       get() {
         try {
@@ -100,8 +102,6 @@ export default {
         }
       }, 500)
     },
-
-    ...mapGetters({ t: 'i18n/t' })
   },
 
   methods: {
@@ -124,6 +124,15 @@ export default {
 
     onFileSelected(value) {
       this.$refs['yaml-editor'].updateValue(value);
+    },
+
+    changeKiali(value) {
+      if (value && this.value.pilot) {
+        this.value.pilot.enabled = true;
+        this.showKialiBanner = true;
+      } else if (!value) {
+        this.showKialiBanner = false;
+      }
     }
   }
 };
@@ -131,116 +140,130 @@ export default {
 
 <template>
   <div>
-    <Tab
-      name="components"
-      :label="t('istio.titles.components') "
-    >
-      <div class="row">
-        <div
-          v-if="value.cni"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.cni.enabled"
-            :label="t('istio.cni')"
-            @input="update"
-          />
-        </div>
-        <div
-          v-if="value.ingressGateways"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.ingressGateways.enabled"
-            :label="t('istio.ingressGateway')"
-          />
-        </div>
-        <div
-          v-if="value.egressGateways"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.egressGateways.enabled"
-            :label="t('istio.egressGateway')"
-          />
-        </div>
+    <!-- Conditionally display PSP checkbox -->
+    <ChartPsp
+      :value="value"
+      :title="t('catalog.chart.global')"
+      :cluster="currentCluster"
+    />
+
+    <h3>
+      {{ t('istio.titles.components') }}
+    </h3>
+    <div class="row mb-10">
+      <div
+        v-if="value.cni"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.cni.enabled"
+          :label="t('istio.cni')"
+          @input="update"
+        />
       </div>
-      <div class="row">
-        <div
-          v-if="value.pilot"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.pilot.enabled"
-            :label="t('istio.pilot')"
-          />
-        </div>
-        <div
-          v-if="value.policy"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.policy.enabled"
-            :label="t('istio.policy')"
-          />
-        </div>
-        <div
-          v-if="value.telemetry"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.telemetry.enabled"
-            :label="t('istio.telemetry')"
-          />
-        </div>
+      <div
+        v-if="value.ingressGateways"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.ingressGateways.enabled"
+          :label="t('istio.ingressGateway')"
+        />
       </div>
-      <div class="row">
-        <div
-          v-if="value.kiali"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.kiali.enabled"
-            :label="t('istio.kiali')"
-          />
-        </div>
-        <div
-          v-if="value.tracing"
-          class="col span-4"
-        >
-          <Checkbox
-            v-model="value.tracing.enabled"
-            :label="t('istio.tracing')"
-          />
-        </div>
-        <div class="col span-4" />
+      <div
+        v-if="value.egressGateways"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.egressGateways.enabled"
+          :label="t('istio.egressGateway')"
+        />
       </div>
-    </Tab>
-
-    <Tab
-      :label="t('istio.customOverlayFile.label')"
-      name="overlay"
-      @active="$refs['yaml-editor'].refresh()"
-    >
-      <div class="custom-overlay">
-        <Banner color="info">
-          <span
-            v-html="t('istio.customOverlayFile.tip', {}, true)"
-          />
-        </Banner>
-        <YamlEditor
-          ref="yaml-editor"
-          class="yaml-editor mb-10"
-          :value="overlayFile"
-          @onInput="valuesChanged"
+    </div>
+    <div class="row mb-10">
+      <div
+        v-if="value.pilot"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.pilot.enabled"
+          :label="t('istio.pilot')"
+          :disabled="value.kiali && value.kiali.enabled"
+        />
+      </div>
+      <div
+        v-if="value.policy"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.policy.enabled"
+          :label="t('istio.policy')"
+        />
+      </div>
+      <div
+        v-if="value.telemetry"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.telemetry.enabled"
+          :label="t('istio.telemetry')"
         />
-        <FileSelector
-          class="role-primary  btn-sm"
-          :label="t('generic.readFromFile')"
-          @selected="onFileSelected"
+      </div>
+    </div>
+    <div class="row mb-20">
+      <div
+        v-if="value.kiali"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.kiali.enabled"
+          :label="t('istio.kiali')"
+          @input="changeKiali"
+        />
+      </div>
+      <div
+        v-if="value.tracing"
+        class="col span-4"
+      >
+        <Checkbox
+          v-model="value.tracing.enabled"
+          :label="t('istio.tracing')"
         />
       </div>
-    </Tab>
+      <div class="col span-4" />
+      <div
+        v-if="showKialiBanner"
+        class="row"
+      >
+        <div class="col span-12">
+          <Banner color="info">
+            <span
+              v-clean-html="t('istio.pilotRequired', {}, true)"
+            />
+          </Banner>
+        </div>
+      </div>
+    </div>
+
+    <h3>{{ t('istio.customOverlayFile.label') }}</h3>
+    <div class="custom-overlay">
+      <Banner color="info">
+        <span
+          v-clean-html="t('istio.customOverlayFile.tip', {}, true)"
+        />
+      </Banner>
+      <YamlEditor
+        ref="yaml-editor"
+        class="yaml-editor mb-10"
+        :value="overlayFile"
+        @onInput="valuesChanged"
+      />
+      <FileSelector
+        class="role-primary  btn-sm"
+        :label="t('generic.readFromFile')"
+        @selected="onFileSelected"
+      />
+    </div>
   </div>
 </template>
 

package/chart/logging/index.vue

@@ -2,10 +2,13 @@
 import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
+import ChartPsp from '@shell/components/ChartPsp';
 
 export default {
-  components: { Checkbox, LabeledInput },
-  props:      {
+  components: {
+    Checkbox, LabeledInput, ChartPsp
+  },
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -67,12 +70,12 @@ export default {
           :tooltip="t('logging.install.tooltip', {}, true)"
         />
         <p
+          v-clean-html="t('logging.install.url', {}, true)"
           class="mt-6"
-          v-html="t('logging.install.url', {}, true)"
         />
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-20">
       <div class="col span-6">
         <Checkbox
           v-model="value.additionalLoggingSources[provider].enabled"
@@ -80,5 +83,11 @@ export default {
         />
       </div>
     </div>
+
+    <!-- Conditionally display PSP checkbox -->
+    <ChartPsp
+      :value="value"
+      :cluster="currentCluster"
+    />
   </div>
 </template>

package/chart/monitoring/index.vue

@@ -12,6 +12,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Loading from '@shell/components/Loading';
 import Prometheus from '@shell/chart/monitoring/prometheus';
 import Tab from '@shell/components/Tabbed/Tab';
+import ChartPsp from '@shell/components/ChartPsp';
 
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PVC, SECRET, WORKLOAD_TYPES } from '@shell/config/types';
@@ -26,6 +27,7 @@ export default {
     Loading,
     Prometheus,
     Tab,
+    ChartPsp
   },
 
   hasTabs: true,
@@ -207,11 +209,13 @@ export default {
     >
       <div>
         <div class="row mb-20">
-          <ClusterSelector
-            :value="value"
-            :mode="mode"
-            @onClusterTypeChanged="clusterType = $event"
-          />
+          <div class="col span-6">
+            <ClusterSelector
+              :value="value"
+              :mode="mode"
+              @onClusterTypeChanged="clusterType = $event"
+            />
+          </div>
         </div>
         <div
           v-if="clusterType.group === 'managed'"
@@ -257,6 +261,12 @@ export default {
             />
           </div>
         </div>
+
+        <!-- Conditionally display PSP checkbox -->
+        <ChartPsp
+          :value="value"
+          :cluster="currentCluster"
+        />
       </div>
     </Tab>
     <Tab

package/chart/monitoring/steps/uninstall-v1.vue

@@ -88,8 +88,8 @@ export default {
             {{ t('monitoring.installSteps.uninstallV1.warning1') }}
           </p>
           <p
+            v-clean-html="t('monitoring.installSteps.uninstallV1.warning2', {}, true)"
             class="mt-10"
-            v-html="t('monitoring.installSteps.uninstallV1.warning2', {}, true)"
           />
         </template>
       </IconMessage>
@@ -111,8 +111,8 @@ export default {
           {{ t('monitoring.installSteps.uninstallV1.success1') }}
         </p>
         <p
+          v-clean-html="t('monitoring.installSteps.uninstallV1.success2')"
           class="mt-10"
-          v-html="t('monitoring.installSteps.uninstallV1.success2')"
         />
       </template>
     </IconMessage>

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,
@@ -84,8 +86,7 @@ export default {
       return { options, labels };
     },
 
-    ...mapGetters({ t: 'i18n/t' })
-
+    ...mapGetters(['currentCluster'], { t: 'i18n/t' }),
   },
 
   watch: {
@@ -165,6 +166,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')"

package/cloud-credential/aws.vue

@@ -97,8 +97,8 @@ export default {
       @input="value.setData('defaultRegion', $event);"
     />
     <p
+      v-clean-html="t('cluster.credential.aws.defaultRegion.help', {}, true)"
       class="text-muted mt-5"
-      v-html="t('cluster.credential.aws.defaultRegion.help', {}, true)"
     />
   </div>
 </template>

package/cloud-credential/digitalocean.vue

@@ -40,8 +40,8 @@ export default {
       @input="value.setData('accessToken', $event);"
     />
     <p
+      v-clean-html="t('cluster.credential.digitalocean.accessToken.help', {}, true)"
       class="text-muted mt-10"
-      v-html="t('cluster.credential.digitalocean.accessToken.help', {}, true)"
     />
   </div>
 </template>

package/cloud-credential/gcp.vue

@@ -64,8 +64,8 @@ export default {
       @selected="onFileSelected"
     />
     <p
+      v-clean-html="t('cluster.credential.gcp.authEncodedJson.help', {}, true)"
       class="text-muted"
-      v-html="t('cluster.credential.gcp.authEncodedJson.help', {}, true)"
     />
   </div>
 </template>

package/cloud-credential/generic.vue

@@ -21,8 +21,8 @@ export default {
     const normanType = this.$store.getters['plugins/credentialFieldForDriver'](this.driverName);
     const normanSchema = this.$store.getters['rancher/schemaFor'](`${ normanType }credentialconfig`);
 
-    if ( normanSchema ) {
-      keyOptions = Object.keys(normanSchema.resourceFields || {});
+    if ( normanSchema?.resourceFields ) {
+      keyOptions = Object.keys(normanSchema.resourceFields);
     } else {
       keyOptions = this.$store.getters['plugins/fieldNamesForDriver'](this.driverName);
     }

package/cloud-credential/linode.vue

@@ -40,8 +40,8 @@ export default {
       @input="value.setData('token', $event);"
     />
     <p
+      v-clean-html="t('cluster.credential.linode.accessToken.help', {}, true)"
       class="text-muted mt-10"
-      v-html="t('cluster.credential.linode.accessToken.help', {}, true)"
     />
   </div>
 </template>

package/cloud-credential/pnap.vue

@@ -72,8 +72,8 @@ export default {
     </div>
     <div class="row mt-5">
       <p
+        v-clean-html="t('cluster.credential.pnap.clientSecret.help', {}, true)"
         class="text-muted mt-10"
-        v-html="t('cluster.credential.pnap.clientSecret.help', {}, true)"
       />
     </div>
   </div>

package/components/ActionMenu.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import $ from 'jquery';
 import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
 import { isAlternate } from '@shell/utils/platform';
 import IconOrSvg from '@shell/components/IconOrSvg';
@@ -149,7 +148,7 @@ export default {
 
     updateStyle() {
       if ( this.phase === SHOW && !this.useCustomTargetElement) {
-        const menu = $('.menu', this.$el)[0];
+        const menu = this.$el?.querySelector && this.$el.querySelector('.menu');
         const event = this.targetEvent;
         const elem = this.targetElem;
 
@@ -169,7 +168,7 @@ export default {
       }
 
       if ( this.open && this.useCustomTargetElement) {
-        const menu = $('.menu', this.$el)[0];
+        const menu = this.$el?.querySelector && this.$el.querySelector('.menu');
         const elem = this.customTargetElement;
 
         // If the action menu state is controlled with
@@ -271,7 +270,7 @@ export default {
           class="icon"
           color="header"
         />
-        <span v-html="opt.label" />
+        <span v-clean-html="opt.label" />
       </li>
 
       <li

package/components/AssignTo.vue

@@ -118,8 +118,8 @@ export default {
     >
       <h4
         slot="title"
+        v-clean-html="t('assignTo.title', {count: resourceCount}, true)"
         class="text-default-text"
-        v-html="t('assignTo.title', {count: resourceCount}, true)"
       />
 
       <div

package/components/AsyncButton.vue

@@ -281,7 +281,7 @@ export default Vue.extend({
     <span
       v-if="labelAs === 'text' && displayLabel"
       v-tooltip="tooltip"
-      v-html="displayLabel"
+      v-clean-html="displayLabel"
     />
   </button>
 </template>

package/components/BannerGraphic.vue

@@ -46,9 +46,9 @@ export default {
     </div>
     <h1
       v-else-if="title"
+      v-clean-html="title"
       data-testid="banner-title"
       class="title"
-      v-html="title"
     />
     <div
       v-if="pref"

package/components/BrandImage.vue

@@ -14,11 +14,8 @@ export default {
       default: false
     }
   },
-  async fetch() {
-    this.managementSettings = await this.$store.getters['management/all'](MANAGEMENT.SETTING);
-  },
   data() {
-    return { managementSettings: [] };
+    return { managementSettings: this.$store.getters['management/all'](MANAGEMENT.SETTING) };
   },
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),

package/components/ButtonDropdown.vue

@@ -3,7 +3,6 @@ import { createPopper } from '@popperjs/core';
 import { get } from '@shell/utils/object';
 import isString from 'lodash/isString';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
-import $ from 'jquery';
 
 export default {
   mixins: [VueSelectOverrides],
@@ -70,8 +69,8 @@ export default {
        * We need to explicitly define the dropdown width since
        * it is usually inherited from the parent with CSS.
        */
-      const componentWidth = $(component.$refs.search).width();
-      const dropWidth = $(dropdownList).width();
+      const componentWidth = component.$refs.search.clientWidth;
+      const dropWidth = dropdownList.clientWidth;
 
       if (dropWidth < componentWidth) {
         dropdownList.style.width = `${ componentWidth }px`;