@rancher/shell 1.2.3 → 2.0.1

package/components/DisableAuthProviderModal.vue

@@ -1,8 +1,10 @@
 <script>
 import { Card } from '@components/Card';
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
   name:       'PromptRemove',
-  components: { Card },
+  components: { Card, AppModal },
   props:      {
     /**
      * Inherited global identifier prefix for tests
@@ -13,15 +15,18 @@ export default {
       default: 'disable-auth-provider'
     }
   },
+  data() {
+    return { showModal: false };
+  },
   methods: {
     show() {
-      this.$modal.show('disableAuthProviderModal');
+      this.showModal = true;
     },
     close() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
     },
     disable() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
       this.$emit('disable');
     },
   }
@@ -29,13 +34,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="remove-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="remove-modal"
     name="disableAuthProviderModal"
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    @closed="close"
+    @close="close"
   >
     <Card
       class="disable-auth-provider"
@@ -69,7 +75,7 @@ export default {
         </button>
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>

package/components/DraggableZone.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
 
@@ -14,7 +14,7 @@ interface Data {
   drag: Drag;
 }
 
-export default Vue.extend({
+export default defineComponent({
   data(): Data {
     return {
       drag: {

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 ? this.t('generic.yes') : this.t('generic.no');
+    this.hasLeader = leader ? 'Yes' : '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:       this.t('generic.no'),
+      hasLeader:       '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/ExplorerMembers.vue

@@ -298,18 +298,18 @@ export default {
     <Tabbed>
       <Tab
         name="cluster-membership"
-        :label="t('members.clusterMemebership')"
+        :label="t('members.clusterMembership')"
       >
         <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
-          <n-link
+          <router-link
             :to="createLocation"
             class="btn role-primary pull-right"
           >
             {{ t('members.createActionLabel') }}
-          </n-link>
+          </router-link>
         </div>
         <ResourceTable
           :schema="schema"

package/components/ExplorerProjectsNamespaces.vue

@@ -374,13 +374,13 @@ export default {
         v-if="showCreateNsButton"
         slot="extraActions"
       >
-        <n-link
+        <router-link
           :to="createNamespaceLocationFlatList()"
           class="btn role-primary mr-10"
           data-testid="create_project_namespaces"
         >
           {{ t('projectNamespaces.createNamespace') }}
-        </n-link>
+        </router-link>
       </template>
     </Masthead>
     <!-- Extensions area -->
@@ -391,7 +391,7 @@ export default {
     />
     <ResourceTable
       ref="table"
-      class="table"
+      class="table project-namespaces-table"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
@@ -424,13 +424,13 @@ export default {
             </div>
           </div>
           <div class="right">
-            <n-link
+            <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
               class="create-namespace btn btn-sm role-secondary mr-5"
               :to="createNamespaceLocation(group.group)"
             >
               {{ t('projectNamespaces.createNamespace') }}
-            </n-link>
+            </router-link>
             <button
               type="button"
               class="project-action btn btn-sm role-multi-action actions mr-10"
@@ -451,12 +451,12 @@ export default {
       </template>
       <template #cell:name="{row}">
         <div class="namespace-name">
-          <n-link
+          <router-link
             v-if="row.detailLocation && !row.hideDetailLocation"
             :to="row.detailLocation"
           >
             {{ row.name }}
-          </n-link>
+          </router-link>
           <span v-else>
             {{ row.name }}
           </span>
@@ -505,6 +505,10 @@ export default {
 <style lang="scss" scoped>
 .project-namespaces {
   & ::v-deep {
+    .project-namespaces-table table {
+      table-layout: fixed;
+    }
+
     .project-name {
       line-height: 30px;
     }
@@ -514,6 +518,26 @@ 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

@@ -2,6 +2,7 @@
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import isEmpty from 'lodash/isEmpty';
+import { getIndividualBanners, overlayIndividualBanners } from '@shell/utils/banners';
 
 export default {
   props: {
@@ -19,18 +20,13 @@ export default {
     },
   },
 
-  async fetch() {
-    this.bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
-  },
-
   data() {
     return {
-      showDialog:    true,
-      showHeader:    false,
-      showFooter:    false,
-      showConsent:   false,
-      banner:        {},
-      bannerSetting: null
+      showDialog:  true,
+      showHeader:  false,
+      showFooter:  false,
+      showConsent: false,
+      banner:      {},
     };
   },
 
@@ -56,6 +52,14 @@ export default {
   },
 
   computed: {
+    uiBannerIndividual() {
+      return getIndividualBanners(this.$store);
+    },
+
+    bannerSetting() {
+      return this.$store.getters['management/all'](MANAGEMENT.SETTING).find((s) => s.id === SETTING.BANNERS);
+    },
+
     bannerStyle() {
       return {
         color:              this.banner.color,
@@ -74,7 +78,7 @@ export default {
       };
     },
     showBanner() {
-      if (!this.banner.text && !this.banner.background) {
+      if (!this.banner?.text && !this.banner?.background) {
         return false;
       }
 
@@ -110,34 +114,41 @@ export default {
   },
 
   watch: {
-    bannerSetting(neu) {
-      if (neu?.value && neu.value !== '') {
-        try {
-          const parsed = JSON.parse(neu.value);
-          const {
-            bannerHeader, bannerFooter, bannerConsent, banner, showHeader, showFooter, showConsent
-          } = parsed;
-          let bannerContent = parsed?.banner || {};
+    bannerSetting: {
+      handler(neu) {
+        if (neu?.value && neu.value !== '') {
+          try {
+            const parsed = JSON.parse(neu.value);
+
+            overlayIndividualBanners(parsed, this.uiBannerIndividual);
 
-          if (isEmpty(banner)) {
-            if (showHeader && this.header) {
-              bannerContent = bannerHeader || {};
-            } else if (showConsent && this.consent) {
-              bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
-            } else if (showFooter && this.footer) {
-              bannerContent = bannerFooter || {};
-            } else {
-              bannerContent = {};
+            const {
+              bannerHeader, bannerFooter, bannerConsent, banner, showHeader, showFooter, showConsent
+            } = parsed;
+            let bannerContent = parsed?.banner || {};
+
+            if (isEmpty(banner)) {
+              if (showHeader && this.header) {
+                bannerContent = bannerHeader || {};
+              } else if (showConsent && this.consent) {
+                bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
+              } else if (showFooter && this.footer) {
+                bannerContent = bannerFooter || {};
+              } else {
+                bannerContent = {};
+              }
             }
-          }
 
-          this.showHeader = showHeader === 'true';
-          this.showFooter = showFooter === 'true';
-          this.showConsent = showConsent === 'true';
-          this.banner = bannerContent;
-        } catch {}
-      }
-    }
+            this.showHeader = showHeader === 'true';
+            this.showFooter = showFooter === 'true';
+            this.showConsent = showConsent === 'true';
+            this.banner = bannerContent;
+          } catch {}
+        }
+      },
+      immediate: true
+    },
+
   }
 };
 </script>
@@ -150,6 +161,7 @@ export default {
     <div
       v-if="!showAsDialog"
       class="banner"
+      data-testid="fixed__banner"
       :style="bannerStyle"
       :class="{'banner-consent': consent}"
     >

package/components/GlobalRoleBindings.vue

@@ -8,6 +8,9 @@ import Loading from '@shell/components/Loading';
 import { addObjects, isArray } from '@shell/utils/array';
 import { Card } from '@components/Card';
 
+// i18n-uses rbac.globalRoles.types.*.label
+// i18n-uses rbac.globalRoles.types.*.description
+
 /**
  * Display checkboxes for each global role, checked for given user or principal (group). Can save changes.
  */
@@ -66,6 +69,7 @@ export default {
 
         const sort = (a, b) => a.nameDisplay.localeCompare(b.nameDisplay);
 
+        // global roles are not sorted
         this.sortedRoles.builtin = this.sortedRoles.builtin.sort(sort);
         this.sortedRoles.custom = this.sortedRoles.custom.sort(sort);
 
@@ -73,12 +77,33 @@ export default {
           this.globalRoleBindings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.GLOBAL_ROLE_BINDING, opt: { force: true } });
         }
 
+        // Sort the global roles - use the order defined in 'globalPermissions' and then add the remaining roles after
+        const globalRoles = [];
+        const globalRolesAdded = {};
+
+        this.globalPermissions.forEach((id) => {
+          const role = this.sortedRoles.global.find((r) => r.id === id);
+
+          if (role) {
+            globalRoles.push(role);
+            globalRolesAdded[id] = true;
+          }
+        });
+
+        // Remaining global roles
+        const remainingGlobalRoles = this.sortedRoles.global.filter((r) => !globalRolesAdded[r.id]);
+
+        this.sortedRoles.global = globalRoles;
+        this.sortedRoles.global.push(...remainingGlobalRoles);
+        // End sort of global roles
+
         this.update();
       }
     } catch (e) { }
   },
   data() {
     return {
+      // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
         'restricted-admin',
@@ -335,6 +360,7 @@ export default {
                   :label="role.nameDisplay"
                   :description="role.descriptionDisplay"
                   :mode="mode"
+                  :data-testId="'grb-checkbox-' + role.id"
                   @input="checkboxChanged"
                 >
                   <template #label>

package/components/GrafanaDashboard.vue

@@ -114,10 +114,12 @@ export default {
       this.interval = setInterval(() => {
         try {
           const graphWindow = this.$refs.frame?.contentWindow;
-          const errorElements = graphWindow.document.getElementsByClassName('alert-error');
-          const errorCornerElements = graphWindow.document.getElementsByClassName('panel-info-corner--error');
-          const panelInFullScreenElements = graphWindow.document.getElementsByClassName('panel-in-fullscreen');
-          const panelContainerElements = graphWindow.document.getElementsByClassName('panel-container');
+
+          // Note. getElementsByClassName won't work, following a grafana bump class names are now unique - for example css-2qng6u-panel-container
+          const errorElements = graphWindow.document.querySelectorAll('[class$="alert-error');
+          const errorCornerElements = graphWindow.document.querySelectorAll('[class$="panel-info-corner--error');
+          const panelInFullScreenElements = graphWindow.document.querySelectorAll('[class$="panel-in-fullscreen');
+          const panelContainerElements = graphWindow.document.querySelectorAll('[class$="panel-container');
           const error = errorElements.length > 0 || errorCornerElements.length > 0;
           const loaded = panelInFullScreenElements.length > 0 || panelContainerElements.length > 0;
           const errorMessageElms = graphWindow.document.getElementsByTagName('pre');

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') &&
+            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || 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/Import.vue

@@ -11,9 +11,7 @@ import SortableTable from '@shell/components/SortableTable';
 import { sortBy } from '@shell/utils/sort';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 import { NAMESPACE } from '@shell/config/types';
-import {
-  NAME as NAME_COL, STATE, TYPE, NAMESPACE as NAMESPACE_COL, AGE
-} from '@shell/config/table-headers';
+import { NAME as NAME_COL, TYPE, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
 
 export default {
   components: {
@@ -41,7 +39,7 @@ export default {
   data() {
     return {
       currentYaml:   '',
-      allNamespaces: null,
+      allNamespaces: [],
       errors:        null,
       rows:          null,
       done:          false,
@@ -64,7 +62,6 @@ export default {
 
     headers() {
       return [
-        STATE,
         TYPE,
         NAME_COL,
         NAMESPACE_COL,
@@ -121,11 +118,14 @@ export default {
   <Card
     v-else
     :show-highlight-border="false"
+    data-testid="import-yaml"
   >
     <template #title>
       <div style="display: block; width: 100%;">
         <template v-if="done">
-          <h4>{{ t('import.success', {count: rows.length}) }}</h4>
+          <h4 data-testid="import-yaml-success">
+            {{ t('import.success', {count: rows.length}) }}
+          </h4>
         </template>
         <template v-else>
           <h4 v-t="'import.title'" />
@@ -162,6 +162,7 @@ export default {
             :paging="true"
             :row-actions="false"
             :table-actions="false"
+            :sub-rows-description="false"
             @rowClick="rowClick"
           />
         </div>
@@ -188,6 +189,7 @@ export default {
         <button
           type="button"
           class="btn role-primary"
+          data-testid="import-yaml-close"
           @click="close"
         >
           {{ t('generic.close') }}
@@ -201,6 +203,7 @@ export default {
         <button
           type="button"
           class="btn role-secondary mr-10"
+          data-testid="import-yaml-cancel"
           @click="close"
         >
           {{ t('generic.cancel') }}
@@ -209,6 +212,7 @@ export default {
           v-if="!done"
           mode="import"
           :disabled="!currentYaml.length"
+          data-testid="import-yaml-import-action"
           @click="importYaml"
         />
       </div>

package/components/Inactivity.vue

@@ -88,8 +88,6 @@ export default {
         if (now >= endTime) {
           this.isOpen = true;
           this.startCountdown();
-
-          this.$modal.show('inactivityModal');
         } else {
           this.inactivityTimeoutId = setTimeout(checkInactivityTimer, 1000);
         }
@@ -135,8 +133,6 @@ export default {
       this.isOpen = false;
       this.courtesyCountdown = this.courtesyTimer;
       this.clearAllTimeouts();
-
-      this.$modal.hide('inactivityModal');
     },
 
     refresh() {
@@ -179,10 +175,10 @@ export default {
 
 <template>
   <ModalWithCard
+    v-if="isOpen"
     ref="inactivityModal"
     name="inactivityModal"
     save-text="Continue"
-    :v-if="isOpen"
     @finish="resume"
   >
     <template #title>

package/components/KeyValueView.vue

@@ -34,10 +34,8 @@ export default {
     },
 
     keyLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.key');
-      },
+      type:    String,
+      default: '',
     },
 
     separatorLabel: {
@@ -52,10 +50,8 @@ export default {
     },
 
     valueLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.value');
-      },
+      type:    String,
+      default: '',
     },
 
     valueBase64: {
@@ -70,6 +66,14 @@ export default {
   },
 
   computed: {
+    _keyLabel() {
+      return this.keyLabel || this.t('generic.key');
+    },
+
+    _valueLabel() {
+      return this.valueLabel || this.t('generic.value');
+    },
+
     threeColumns() {
       return this.showRemove;
     },
@@ -157,10 +161,10 @@ export default {
       :class="{'extra-column':threeColumns}"
     >
       <label class="text-label">
-        {{ keyLabel }}
+        {{ _keyLabel }}
       </label>
       <label class="text-label">
-        {{ valueLabel }}
+        {{ _valueLabel }}
       </label>
       <span v-if="threeColumns" />
 

package/components/Markdown.vue

@@ -13,9 +13,8 @@ export default {
 
   data() {
     return {
-      loaded:    false,
-      marked:    null,
-      dompurify: null,
+      loaded: false,
+      marked: null,
     };
   },
 
@@ -26,15 +25,10 @@ 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;
@@ -63,11 +57,8 @@ 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);
   }
@@ -77,7 +68,7 @@ export default {
 <template>
   <div
     v-if="loaded"
-    v-clean-html="sanitized"
+    v-clean-html="html"
     class="markdown"
   />
   <Loading v-else />
@@ -96,8 +87,20 @@ 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 {
@@ -118,6 +121,7 @@ export default {
       text-align: left;
       margin: 0;
       padding: 6px 13px;
+      border: 1px solid #e3e7eb;
     }
 
     table tr th :first-child, table tr td :first-child {