@rancher/shell 0.3.8 → 0.3.10

package/pages/auth/login.vue

@@ -303,6 +303,7 @@ export default {
         </h1>
         <div
           class="login-messages"
+          data-testid="login__messages"
           :class="{'login-messages--hasContent': hasLoginMessage}"
         >
           <Banner
@@ -325,60 +326,59 @@ export default {
         </div>
         <div
           v-if="firstLogin"
-          class="first-login-message"
+          class="first-login-message pl-10 pr-10"
+          :class="{'mt-30': !hasLoginMessage}"
           data-testid="first-login-message"
         >
-          <InfoBox color="info">
+          <t
+            k="setup.defaultPassword.intro"
+            :raw="true"
+          />
+
+          <div>
             <t
-              k="setup.defaultPassword.intro"
+              k="setup.defaultPassword.dockerPrefix"
               :raw="true"
             />
-
-            <div>
-              <t
-                k="setup.defaultPassword.dockerPrefix"
-                :raw="true"
-              />
-            </div>
-            <ul>
-              <li>
-                <t
-                  k="setup.defaultPassword.dockerPs"
-                  :raw="true"
-                />
-              </li>
-              <li>
-                <CopyCode>
-                  docker logs <u>container-id</u> 2&gt;&amp;1 | grep "Bootstrap Password:"
-                </CopyCode>
-              </li>
-            </ul>
-            <div>
+          </div>
+          <ul>
+            <li>
               <t
-                k="setup.defaultPassword.dockerSuffix"
+                k="setup.defaultPassword.dockerPs"
                 :raw="true"
               />
-            </div>
+            </li>
+            <li>
+              <CopyCode>
+                docker logs <u>container-id</u> 2&gt;&amp;1 | grep "Bootstrap Password:"
+              </CopyCode>
+            </li>
+          </ul>
+          <div>
+            <t
+              k="setup.defaultPassword.dockerSuffix"
+              :raw="true"
+            />
+          </div>
 
-            <br>
-            <div>
-              <t
-                k="setup.defaultPassword.helmPrefix"
-                :raw="true"
-              />
-            </div>
-            <br>
-            <CopyCode>
-              {{ kubectlCmd }}
-            </CopyCode>
-            <br>
-            <div>
-              <t
-                k="setup.defaultPassword.helmSuffix"
-                :raw="true"
-              />
-            </div>
-          </InfoBox>
+          <br>
+          <div>
+            <t
+              k="setup.defaultPassword.helmPrefix"
+              :raw="true"
+            />
+          </div>
+          <br>
+          <CopyCode>
+            {{ kubectlCmd }}
+          </CopyCode>
+          <br>
+          <div>
+            <t
+              k="setup.defaultPassword.helmSuffix"
+              :raw="true"
+            />
+          </div>
         </div>
 
         <div
@@ -507,6 +507,8 @@ export default {
     }
 
     .login-messages {
+      display: flex;
+      justify-content: center;
       align-items: center;
 
       .banner {
@@ -518,11 +520,7 @@ export default {
       &--hasContent {
         min-height: 70px;
       }
-    }
 
-    .login-messages, .first-login-message {
-      display: flex;
-      justify-content: center;
       .text-error, .banner {
         max-width: 80%;
       }

package/pages/c/_cluster/apps/charts/chart.vue

@@ -224,7 +224,7 @@ export default {
             <b v-if="vers.originalVersion === version.version">{{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}</b>
             <a
               v-else
-              v-tooltip="vers.label.length > 16 ? vers.label : null"
+              v-clean-tooltip="vers.label.length > 16 ? vers.label : null"
               @click.prevent="selectVersion(vers)"
             >
               {{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}

package/pages/c/_cluster/apps/charts/install.vue

@@ -1500,46 +1500,45 @@ export default {
         </div>
       </template>
       <template #helmValues>
-        <div class="sticky-header">
-          <Banner
-            v-if="step2Description"
-            color="info"
-            class="description"
+        <Banner
+          v-if="step2Description"
+          color="info"
+          class="description"
+        >
+          {{ step2Description }}
+        </Banner>
+        <div class="step__values__controls">
+          <ButtonGroup
+            v-model="preFormYamlOption"
+            :options="formYamlOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+            :disabled="preFormYamlOption != formYamlOption"
+          />
+          <div class="step__values__controls--spacer">
+&nbsp;
+          </div>
+          <ButtonGroup
+            v-if="showDiff"
+            v-model="diffMode"
+            :options="yamlDiffModeOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+          />
+          <div
+            v-if="hasReadme && !showingReadmeWindow"
+            class="btn-group"
           >
-            {{ step2Description }}
-          </Banner>
-          <div class="step__values__controls">
-            <ButtonGroup
-              v-model="preFormYamlOption"
-              :options="formYamlOptions"
-              inactive-class="bg-disabled btn-sm"
-              active-class="bg-primary btn-sm"
-              :disabled="preFormYamlOption != formYamlOption"
-            />
-            <div class="step__values__controls--spacer">
-  &nbsp;
-            </div>
-            <ButtonGroup
-              v-if="showDiff"
-              v-model="diffMode"
-              :options="yamlDiffModeOptions"
-              inactive-class="bg-disabled btn-sm"
-              active-class="bg-primary btn-sm"
-            />
-            <div
-              v-if="hasReadme && !showingReadmeWindow"
-              class="btn-group"
+            <button
+              type="button"
+              class="btn bg-primary btn-sm"
+              @click="showSlideIn = !showSlideIn"
             >
-              <button
-                type="button"
-                class="btn bg-primary btn-sm"
-                @click="showSlideIn = !showSlideIn"
-              >
-                {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
-              </button>
-            </div>
+              {{ t('catalog.install.steps.helmValues.chartInfo.button') }}
+            </button>
           </div>
         </div>
+
         <div class="scroll__container">
           <div class="scroll__content">
             <!-- Values (as Custom Component in ./shell/charts/) -->
@@ -1726,7 +1725,7 @@ export default {
         {{ t('catalog.install.steps.helmValues.chartInfo.label') }}
         <div class="slideIn__header__buttons">
           <div
-            v-tooltip="t('catalog.install.slideIn.dock')"
+            v-clean-tooltip="t('catalog.install.slideIn.dock')"
             class="slideIn__header__button"
             @click="showSlideIn = false; showReadmeWindow()"
           >
@@ -1782,7 +1781,6 @@ export default {
           </div>
         </div>
       </div>
-
       <Banner
         color="warning"
         class="description"
@@ -1816,7 +1814,7 @@ export default {
 
   .install-steps {
     padding-top: 0;
-
+    height: 0;
     position: relative;
     overflow: hidden;
 
@@ -1961,14 +1959,16 @@ export default {
     &__container {
       $yaml-height: 200px;
       min-height: $yaml-height;
-      height: 0;
+      margin-bottom: 60px;
+      overflow: auto;
+      display: flex;
+      flex: 1;
     }
     &__content {
       display: flex;
       flex: 1;
       overflow: auto;
     }
-
   }
 
   ::v-deep .yaml-editor {
@@ -1978,8 +1978,8 @@ export default {
 .outer-container {
   display: flex;
   flex-direction: column;
-  flex: 1;
   padding: 0;
+  height: calc(100% - 112px);
 }
 
 .header {
@@ -2058,13 +2058,4 @@ export default {
   margin-top: 5px;
 }
 
-.sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  background: var(--primary-text);
-}
-
 </style>

package/pages/c/_cluster/explorer/index.vue

@@ -459,7 +459,7 @@ export default {
       </div>
       <p
         v-if="displayPspDeprecationBanner && hidePspDeprecationBanner"
-        v-tooltip="t('landing.deprecatedPsp')"
+        v-clean-tooltip="t('landing.deprecatedPsp')"
         class="alt-psp-deprecation-info"
       >
         <span>{{ t('landing.psps') }}</span>

package/pages/c/_cluster/monitoring/index.vue

@@ -170,7 +170,7 @@ export default {
           <a
             v-for="fel in externalLinks"
             :key="fel.label"
-            v-tooltip="
+            v-clean-tooltip="
               !fel.enabled ? t('monitoring.overview.linkedList.na') : undefined
             "
             :href="fel.enabled ? fel.link : void 0"

package/pages/c/_cluster/settings/performance.vue

@@ -9,6 +9,18 @@ import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import UnitInput from '@shell/components/form/UnitInput';
 
+const incompatible = {
+  incrementalLoading: ['forceNsFilterV2'],
+  manualRefresh:      ['forceNsFilterV2'],
+  forceNsFilterV2:    ['incrementalLoading', 'manualRefresh'],
+};
+
+const l10n = {
+  incrementalLoading: 'incrementalLoad',
+  manualRefresh:      'manualRefresh',
+  forceNsFilterV2:    'nsFiltering',
+};
+
 export default {
   layout:     'authenticated',
   components: {
@@ -102,8 +114,42 @@ export default {
         this.errors.push(err);
         btnCB(false);
       }
+    },
+
+    compatibleWarning(property, enabled) {
+      if (!enabled) {
+        // Disabling a preference won't automatically turn on an incompatible one, so just set and exit
+        this.value[property].enabled = false;
+
+        return;
+      }
+
+      // We're enabling a preference. Are there any incomaptible preferences?
+      if ((incompatible[property] || []).every(p => !this.value[p].enabled)) {
+        // No, just set and exit
+        this.value[property].enabled = true;
+
+        return;
+      }
+
+      // Incompatible preferences found, so confirm with user before applying
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'GenericPrompt',
+        componentProps: {
+          applyMode:   'enable',
+          applyAction: (buttonDone) => {
+            this.value[property].enabled = true;
+            (incompatible[property] || []).forEach((incompatible) => {
+              this.value[incompatible].enabled = false;
+            });
+            buttonDone(true);
+          },
+          title: this.t('promptRemove.title', {}, true),
+          body:  this.t(`performance.${ l10n[property] }.incompatibleDescription`, {}, true),
+        },
+      });
     }
-  }
+  },
 };
 </script>
 <template>
@@ -159,11 +205,12 @@ export default {
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
           <Checkbox
-            v-model="value.incrementalLoading.enabled"
+            :value="value.incrementalLoading.enabled"
             :mode="mode"
             :label="t('performance.incrementalLoad.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('incrementalLoading', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.incrementalLoading.enabled }">
@@ -189,11 +236,12 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.manualRefresh.enabled"
+            :value="value.manualRefresh.enabled"
             :mode="mode"
             :label="t('performance.manualRefresh.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('manualRefresh', $event)"
           />
           <div class="ml-20">
             <p :class="{ 'text-muted': !value.manualRefresh.enabled }">
@@ -299,26 +347,13 @@ export default {
             label-key="performance.experimental"
           />
           <Checkbox
-            v-model="value.forceNsFilter.enabled"
+            :value="value.forceNsFilterV2.enabled"
             :mode="mode"
             :label="t('performance.nsFiltering.checkboxLabel')"
             class="mt-10 mb-20"
             :primary="true"
+            @input="compatibleWarning('forceNsFilterV2', $event)"
           />
-          <div class="ml-20">
-            <p :class="{ 'text-muted': !value.forceNsFilter.enabled }">
-              {{ t('performance.nsFiltering.count.description') }}
-            </p>
-            <LabeledInput
-              v-model="value.forceNsFilter.threshold"
-              :mode="mode"
-              :label="t('performance.nsFiltering.count.inputLabel')"
-              :disabled="!value.forceNsFilter.enabled"
-              class="input"
-              type="number"
-              min="0"
-            />
-          </div>
         </div>
         <!-- Advanced Websocket Worker -->
         <div class="mt-40">

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -206,7 +206,7 @@ export default {
             :key="v.version"
           >
             <a
-              v-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
+              v-clean-tooltip="v.requiredUiVersion ? t('plugins.info.requiresVersion', { version: v.requiredUiVersion }) : ''"
               class="version-link"
               :class="{'version-active': v.version === infoVersion, 'disabled': !v.isCompatibleWithUi}"
               @click="loadPluginVersionInfo(v.version)"

package/pages/c/_cluster/uiplugins/index.vue

@@ -400,6 +400,13 @@ export default {
   },
 
   methods: {
+    async refreshCharts() {
+      await this.$store.dispatch('catalog/load');
+      const c = this.$store.getters['catalog/rawCharts'];
+
+      this.charts = Object.values(c);
+    },
+
     async updateInstallStatus() {
       let hasService;
 
@@ -415,6 +422,10 @@ export default {
         hasService = false;
       }
 
+      if (hasService) {
+        this.refreshCharts();
+      }
+
       Vue.set(this, 'hasService', hasService);
 
       return hasService;
@@ -671,7 +682,7 @@ export default {
                   <span>{{ plugin.displayVersion }}</span>
                   <span
                     v-if="plugin.upgrade"
-                    v-tooltip="t('plugins.upgradeAvailable')"
+                    v-clean-tooltip="t('plugins.upgradeAvailable')"
                   > -> {{ plugin.upgrade }}</span>
                   <p
                     v-if="plugin.incompatibleDisclaimer"
@@ -694,13 +705,13 @@ export default {
               >
                 <div
                   v-if="!plugin.certified"
-                  v-tooltip="t('plugins.descriptions.third-party')"
+                  v-clean-tooltip="t('plugins.descriptions.third-party')"
                 >
                   {{ t('plugins.labels.third-party') }}
                 </div>
                 <div
                   v-if="plugin.experimental"
-                  v-tooltip="t('plugins.descriptions.experimental')"
+                  v-clean-tooltip="t('plugins.descriptions.experimental')"
                 >
                   {{ t('plugins.labels.experimental') }}
                 </div>
@@ -710,7 +721,7 @@ export default {
               <div class="plugin-actions">
                 <template v-if="plugin.error">
                   <div
-                    v-tooltip="plugin.error"
+                    v-clean-tooltip="plugin.error"
                     class="plugin-error"
                   >
                     <i class="icon icon-warning" />
@@ -719,7 +730,7 @@ export default {
                 <!-- plugin status -->
                 <div
                   v-if="plugin.helmError"
-                  v-tooltip="t('plugins.helmError')"
+                  v-clean-tooltip="t('plugins.helmError')"
                   class="plugin-error"
                 >
                   <i class="icon icon-warning" />

package/pages/home.vue

@@ -406,7 +406,7 @@ export default {
                       </span>
                       <i
                         v-if="row.unavailableMachines"
-                        v-tooltip="row.unavailableMachines"
+                        v-clean-tooltip="row.unavailableMachines"
                         class="conditions-alert-icon icon-alert icon"
                       />
                     </div>

package/pages/prefs.vue

@@ -163,7 +163,9 @@ export default {
       <h4 v-t="'prefs.language'" />
       <div class="row">
         <div class="col span-4">
-          <LocaleSelector />
+          <LocaleSelector
+            data-testid="prefs__languageSelector"
+          />
         </div>
       </div>
     </div>
@@ -173,6 +175,7 @@ export default {
       <h4 v-t="'prefs.theme.label'" />
       <ButtonGroup
         v-model="theme"
+        data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
       <div class="mt-10">
@@ -190,7 +193,9 @@ export default {
     >
       <hr>
       <h4 v-t="'prefs.landing.label'" />
-      <LandingPagePreference />
+      <LandingPagePreference
+        data-testid="prefs__landingPagePreference"
+      />
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
@@ -203,6 +208,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="dateFormat"
+            data-testid="prefs__displaySetting__dateFormat"
             :label="t('prefs.dateFormat.label')"
             :options="dateOptions"
           />
@@ -210,6 +216,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="timeFormat"
+            data-testid="prefs__displaySetting__timeFormat"
             :label="t('prefs.timeFormat.label')"
             :options="timeOptions"
           />
@@ -220,6 +227,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="perPage"
+            data-testid="prefs__displaySetting__perPage"
             :label="t('prefs.perPage.label')"
             :options="perPageOptions"
             option-key="value"
@@ -230,6 +238,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="menuMaxClusters"
+            data-testid="prefs__displaySetting__menuMaxClusters"
             :label="t('prefs.clusterToShow.label')"
             :options="menuClusterOptions"
             option-key="value"
@@ -245,6 +254,7 @@ export default {
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
         v-model="scalingDownPrompt"
+        data-testid="prefs__scalingDownPrompt"
         :label="t('prefs.confirmationSetting.scalingDownPrompt')"
         class="mt-10"
       />
@@ -255,18 +265,21 @@ export default {
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
         v-model="viewInApi"
+        data-testid="prefs__viewInApi"
         :label="t('prefs.advFeatures.viewInApi', {}, true)"
         class="mt-10"
       />
       <br>
       <Checkbox
         v-model="allNamespaces"
+        data-testid="prefs__allNamespaces"
         :label="t('prefs.advFeatures.allNamespaces', {}, true)"
         class="mt-20"
       />
       <br>
       <Checkbox
         v-model="themeShortcut"
+        data-testid="prefs__themeShortcut"
         :label="t('prefs.advFeatures.themeShortcut', {}, true)"
         class="mt-20"
       />
@@ -274,6 +287,7 @@ export default {
       <Checkbox
         v-if="!isSingleProduct"
         v-model="hideDescriptions"
+        data-testid="prefs__hideDescriptions"
         :label="t('prefs.hideDesc.label')"
         class="mt-20"
       />
@@ -292,6 +306,7 @@ export default {
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
         v-model="keymap"
+        data-testid="prefs__keymapOptions"
         :options="keymapOptions"
       />
     </div>
@@ -304,6 +319,7 @@ export default {
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
         v-model="showPreRelease"
+        data-testid="prefs__helmOptions"
         :options="helmOptions"
       />
     </div>

package/plugins/clean-html-directive.js

@@ -17,7 +17,7 @@ const ALLOWED_TAGS = [
   'strong',
 ];
 
-const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
+export const purifyHTML = value => DOMPurify.sanitize(value, { ALLOWED_TAGS });
 
 export const cleanHtmlDirective = {
   inserted(el, binding) {

package/plugins/clean-tooltip-directive.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import { VTooltip } from 'v-tooltip';
+import { purifyHTML } from './clean-html-directive';
+
+function purifyContent(value) {
+  const type = typeof value;
+
+  if (type === 'string') {
+    return purifyHTML(value);
+  } else if (value && type === 'object' && typeof value.content === 'string') {
+    return { ...value, content: purifyHTML(value.content) };
+  } else {
+    return value;
+  }
+}
+
+function bind(el, { value, oldValue, modifiers }) {
+  const purifiedValue = purifyContent(value);
+
+  VTooltip.bind(
+    el,
+    {
+      value: purifiedValue, oldValue, modifiers
+    });
+}
+
+const VCleanTooltip = {
+  ...VTooltip,
+  bind,
+  update: bind,
+};
+
+Vue.directive('clean-tooltip', VCleanTooltip);