@rancher/shell 0.2.3 → 0.2.5

package/pages/home.vue

@@ -249,33 +249,60 @@ export default {
 
 </script>
 <template>
-  <div v-if="managementReady" class="home-page">
-    <BannerGraphic :small="true" :title="t('landing.welcomeToRancher', {vendor})" :pref="HIDE_HOME_PAGE_CARDS" pref-key="welcomeBanner" />
+  <div
+    v-if="managementReady"
+    class="home-page"
+  >
+    <BannerGraphic
+      :small="true"
+      :title="t('landing.welcomeToRancher', {vendor})"
+      :pref="HIDE_HOME_PAGE_CARDS"
+      pref-key="welcomeBanner"
+    />
     <IndentedPanel class="mt-20 mb-20">
-      <div v-if="!readWhatsNewAlready" class="row">
+      <div
+        v-if="!readWhatsNewAlready"
+        class="row"
+      >
         <div class="col span-12">
           <Banner
             data-testid="changelog-banner"
             color="info whats-new"
           >
             <div>{{ t('landing.seeWhatsNew') }}</div>
-            <a class="hand" @click.prevent.stop="showWhatsNew"><span v-html="t('landing.whatsNewLink')" /></a>
+            <a
+              class="hand"
+              @click.prevent.stop="showWhatsNew"
+            ><span v-html="t('landing.whatsNewLink')" /></a>
           </Banner>
         </div>
       </div>
 
       <div class="row home-panels">
         <div class="col main-panel">
-          <div v-if="!showSetLoginBanner" class="mb-10 row">
+          <div
+            v-if="!showSetLoginBanner"
+            class="mb-10 row"
+          >
             <div class="col span-12">
-              <Banner color="set-login-page" :closable="true" @close="closeSetLoginBanner()">
+              <Banner
+                color="set-login-page"
+                :closable="true"
+                @close="closeSetLoginBanner()"
+              >
                 <div>{{ t('landing.landingPrefs.title') }}</div>
-                <a class="hand mr-20" @click.prevent.stop="showUserPrefs"><span v-html="t('landing.landingPrefs.userPrefs')" /></a>
+                <a
+                  class="hand mr-20"
+                  @click.prevent.stop="showUserPrefs"
+                ><span v-html="t('landing.landingPrefs.userPrefs')" /></a>
               </Banner>
             </div>
           </div>
           <div class="row panel">
-            <div v-if="mcm" class="col span-12">
+            <div
+              v-if="mcm"
+              class="col span-12"
+            >
               <SortableTable
                 :table-actions="false"
                 :row-actions="false"
@@ -289,20 +316,27 @@ export default {
                     <h2 class="mb-0">
                       {{ t('landing.clusters.title') }}
                     </h2>
-                    <BadgeState v-if="kubeClusters" :label="kubeClusters.length.toString()" color="role-tertiary ml-20 mr-20" />
+                    <BadgeState
+                      v-if="kubeClusters"
+                      :label="kubeClusters.length.toString()"
+                      color="role-tertiary ml-20 mr-20"
+                    />
                   </div>
                 </template>
-                <template v-if="canCreateCluster" #header-middle>
+                <template
+                  v-if="canCreateCluster"
+                  #header-middle
+                >
                   <div class="table-heading">
                     <n-link
                       :to="importLocation"
-                      class="btn btn-sm role-primary"
+                      class="btn role-primary"
                     >
                       {{ t('cluster.importAction') }}
                     </n-link>
                     <n-link
                       :to="createLocation"
-                      class="btn btn-sm role-primary"
+                      class="btn role-primary"
                     >
                       {{ t('generic.create') }}
                     </n-link>
@@ -311,7 +345,10 @@ export default {
                 <template #col:name="{row}">
                   <td>
                     <span v-if="row.mgmt">
-                      <n-link v-if="row.mgmt.isReady && !row.hasError" :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}">
+                      <n-link
+                        v-if="row.mgmt.isReady && !row.hasError"
+                        :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}"
+                      >
                         {{ row.nameDisplay }}
                       </n-link>
                       <span v-else>{{ row.nameDisplay }}</span>
@@ -344,7 +381,10 @@ export default {
                 </template> -->
               </SortableTable>
             </div>
-            <div v-else class="col span-12">
+            <div
+              v-else
+              class="col span-12"
+            >
               <SingleClusterInfo />
             </div>
           </div>

package/pages/prefs.vue

@@ -153,7 +153,10 @@ export default {
 <template>
   <div>
     <BackLink :link="backLink" />
-    <h1 v-t="'prefs.title'" class="mb-20" />
+    <h1
+      v-t="'prefs.title'"
+      class="mb-20"
+    />
     <!-- Language -->
     <div class="mt-10 mb-10">
       <h4 v-t="'prefs.language'" />
@@ -165,22 +168,32 @@ export default {
     </div>
     <!-- Theme -->
     <div class="mt-10 mb-10">
-      <hr />
+      <hr>
       <h4 v-t="'prefs.theme.label'" />
-      <ButtonGroup v-model="theme" :options="themeOptions" />
+      <ButtonGroup
+        v-model="theme"
+        :options="themeOptions"
+      />
       <div class="mt-10">
-        <t k="prefs.theme.autoDetail" :pm="pm" :am="am" />
+        <t
+          k="prefs.theme.autoDetail"
+          :pm="pm"
+          :am="am"
+        />
       </div>
     </div>
     <!-- Login landing page -->
-    <div v-if="!isSingleProduct" class="mt-10 mb-10">
-      <hr />
+    <div
+      v-if="!isSingleProduct"
+      class="mt-10 mb-10"
+    >
+      <hr>
       <h4 v-t="'prefs.landing.label'" />
       <LandingPagePreference />
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
-      <hr />
+      <hr>
       <h4 v-t="'prefs.displaySettings.title'" />
       <p class="set-landing-leadin">
         {{ t('prefs.displaySettings.detail', {}, raw=true) }}
@@ -227,31 +240,61 @@ export default {
     </div>
     <!-- Advanced Features -->
     <div class="col adv-features mt-10 mb-10">
-      <hr />
+      <hr>
       <h4 v-t="'prefs.advFeatures.title'" />
-      <Checkbox v-model="viewInApi" :label="t('prefs.advFeatures.viewInApi', {}, true)" class="mt-10" />
-      <br />
-      <Checkbox v-model="allNamespaces" :label="t('prefs.advFeatures.allNamespaces', {}, true)" class="mt-20" />
-      <br />
-      <Checkbox v-model="themeShortcut" :label="t('prefs.advFeatures.themeShortcut', {}, true)" class="mt-20" />
-      <br />
-      <Checkbox v-if="!isSingleProduct" v-model="hideDescriptions" :label="t('prefs.hideDesc.label')" class="mt-20" />
+      <Checkbox
+        v-model="viewInApi"
+        :label="t('prefs.advFeatures.viewInApi', {}, true)"
+        class="mt-10"
+      />
+      <br>
+      <Checkbox
+        v-model="allNamespaces"
+        :label="t('prefs.advFeatures.allNamespaces', {}, true)"
+        class="mt-20"
+      />
+      <br>
+      <Checkbox
+        v-model="themeShortcut"
+        :label="t('prefs.advFeatures.themeShortcut', {}, true)"
+        class="mt-20"
+      />
+      <br>
+      <Checkbox
+        v-if="!isSingleProduct"
+        v-model="hideDescriptions"
+        :label="t('prefs.hideDesc.label')"
+        class="mt-20"
+      />
       <template v-if="admin">
-        <br />
-        <Checkbox v-model="pluginDeveloper" :label="t('prefs.advFeatures.pluginDeveloper', {}, true)" class="mt-20" />
+        <br>
+        <Checkbox
+          v-model="pluginDeveloper"
+          :label="t('prefs.advFeatures.pluginDeveloper', {}, true)"
+          class="mt-20"
+        />
       </template>
     </div>
     <!-- YAML editor key mapping -->
     <div class="col mt-10 mb-10">
-      <hr />
+      <hr>
       <h4 v-t="'prefs.keymap.label'" />
-      <ButtonGroup v-model="keymap" :options="keymapOptions" />
+      <ButtonGroup
+        v-model="keymap"
+        :options="keymapOptions"
+      />
     </div>
     <!-- Helm Charts -->
-    <div v-if="!isSingleProduct" class="col mt-10 mb-40">
-      <hr />
+    <div
+      v-if="!isSingleProduct"
+      class="col mt-10 mb-40"
+    >
+      <hr>
       <h4 v-t="'prefs.helm.label'" />
-      <ButtonGroup v-model="showPreRelease" :options="helmOptions" />
+      <ButtonGroup
+        v-model="showPreRelease"
+        :options="helmOptions"
+      />
     </div>
   </div>
 </template>

package/pages/rio/mesh.vue

@@ -408,11 +408,15 @@ export default {
 </script>
 <template>
   <div class="mesh">
-    <header>
+    <header class="header-layout">
       <h1>App Mesh</h1>
     </header>
 
-    <svg id="mesh" ref="mesh" @click="clicked" />
+    <svg
+      id="mesh"
+      ref="mesh"
+      @click="clicked"
+    />
   </div>
 </template>
 

package/pages/support/index.vue

@@ -117,34 +117,62 @@ export default {
         <div class="promo col main-panel">
           <div class="box mb-20 box-primary">
             <h2>{{ t('support.suse.access.title') }}</h2>
-            <div v-if="!hasSupport" class="external support-links mt-20">
+            <div
+              v-if="!hasSupport"
+              class="external support-links mt-20"
+            >
               <div class="support-link">
-                <a class="support-link" href="https://rancher.com/support-maintenance-terms" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.learnMore') }}</a>
+                <a
+                  class="support-link"
+                  href="https://rancher.com/support-maintenance-terms"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                >{{ t('support.community.learnMore') }}</a>
               </div>
               <div class="support-link">
-                <a class="support-link" href="https://rancher.com/pricing" target="_blank" rel="noopener noreferrer nofollow">{{ t('support.community.pricing') }}</a>
+                <a
+                  class="support-link"
+                  href="https://rancher.com/pricing"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                >{{ t('support.community.pricing') }}</a>
               </div>
             </div>
             <div v-else>
               <p class="pb-10">
                 {{ hasAWSSupport ? t("support.suse.access.aws.text") : t("support.suse.access.text") }}
               </p>
-              <a v-if="hasAWSSupport" class="mr-5 btn role-secondary btn-sm" :href="supportConfigLink">
+              <a
+                v-if="hasAWSSupport"
+                class="mr-5 btn role-secondary btn-sm"
+                :href="supportConfigLink"
+              >
                 {{ t('support.suse.access.aws.generateConfig') }}
               </a>
-              <a :href="sccLink" target="_blank" rel="noopener noreferrer nofollow">
+              <a
+                :href="sccLink"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+              >
                 {{ t('support.suse.access.action') }} <i class="icon icon-external-link" />
               </a>
             </div>
           </div>
           <div class="boxes">
-            <div v-for="key in promos" :key="key" class="box">
+            <div
+              v-for="key in promos"
+              :key="key"
+              class="box"
+            >
               <h2>{{ t(`${key}.title`) }}</h2>
               <div>{{ t(`${key}.text`) }}</div>
             </div>
           </div>
         </div>
-        <CommunityLinks :is-support-page="true" class="community col side-panel span-3" />
+        <CommunityLinks
+          :is-support-page="true"
+          class="community col side-panel span-3"
+        />
       </div>
     </IndentedPanel>
   </div>

package/plugins/steve/subscribe.js

@@ -1,7 +1,7 @@
 import { addObject, clear, removeObject } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
 import { COUNT, SCHEMA } from '@shell/config/types';
-import { getPerformanceSetting } from '@shell/config/settings';
+import { getPerformanceSetting } from '@shell/utils/settings';
 import Socket, {
   EVENT_CONNECTED,
   EVENT_DISCONNECTED,

package/promptRemove/management.cattle.io.globalrole.vue

@@ -24,12 +24,18 @@ export default {
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
         v-html="resourceNames(names, plusMore, t)"
-      ></span>
+      />
     </template>
-    <div v-if="info" class="text info mb-10 mt-20">
+    <div
+      v-if="info"
+      class="text info mb-10 mt-20"
+    >
       <span v-html="info" />
     </div>
-    <div v-if="warning" class="text-warning mb-10 mt-20">
+    <div
+      v-if="warning"
+      class="text-warning mb-10 mt-20"
+    >
       {{ warning }}
     </div>
   </div>

package/promptRemove/management.cattle.io.project.vue

@@ -98,14 +98,23 @@ export default {
       <div class="mb-10">
         {{ t('promptRemove.attemptingToRemove', { type }) }} <span class="display-name">{{ `${displayName}.` }}</span>
         <template v-if="!canSeeProjectlessNamespaces">
-          <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br />
-          <div class="mt-10" v-html="resourceNames(names, plusMore, t)"></div>
+          <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
+          <div
+            class="mt-10"
+            v-html="resourceNames(names, plusMore, t)"
+          />
         </template>
       </div>
-      <div v-if="filteredNamespaces.length > 0 && canSeeProjectlessNamespaces" class="mt-20 remove-project-dialog">
-        <Checkbox v-model="deleteProjectNamespaces" :label="t('promptRemove.deleteAssociatedNamespaces')" />
+      <div
+        v-if="filteredNamespaces.length > 0 && canSeeProjectlessNamespaces"
+        class="mt-20 remove-project-dialog"
+      >
+        <Checkbox
+          v-model="deleteProjectNamespaces"
+          :label="t('promptRemove.deleteAssociatedNamespaces')"
+        />
         <div class="mt-10 ml-20">
-          <span v-html="resourceNames(names, plusMore, t)"></span>
+          <span v-html="resourceNames(names, plusMore, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -24,12 +24,18 @@ export default {
     <template>
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
         v-html="resourceNames(names, plusMore, t)"
-      ></span>
+      />
     </template>
-    <div v-if="info" class="text info mb-10 mt-20">
+    <div
+      v-if="info"
+      class="text info mb-10 mt-20"
+    >
       <span v-html="info" />
     </div>
-    <div v-if="warning" class="text-warning mb-10 mt-20">
+    <div
+      v-if="warning"
+      class="text-warning mb-10 mt-20"
+    >
       {{ warning }}
     </div>
   </div>

package/promptRemove/pod.vue

@@ -107,7 +107,10 @@ export default {
 <template>
   <div class="mt-10">
     <div class="mb-30">
-      {{ t('promptRemove.attemptingToRemove', { type }) }} <span class="machine-name" v-html="podNames" />
+      {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        class="machine-name"
+        v-html="podNames"
+      />
     </div>
     <div class="mb-30">
       <Checkbox
@@ -115,8 +118,17 @@ export default {
         :label="t('promptForceRemove.forceDelete')"
       />
     </div>
-    <Banner color="warning" label-key="promptForceRemove.podRemoveWarning" />
-    <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
+    <Banner
+      color="warning"
+      label-key="promptForceRemove.podRemoveWarning"
+    />
+    <Banner
+      v-for="(error, i) in errors"
+      :key="i"
+      class=""
+      color="error"
+      :label="error"
+    />
   </div>
 </template>
 

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -9,6 +9,7 @@ declare module 'vue/types/vue' {
     queueResize(): void;
   }
 }
+
 export default Vue.extend({
   inheritAttrs: false,
 

package/rancher-components/StringList/StringList.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import { StringList } from './index';
+
+describe('StringList.vue', () => {
+
+  it('is empty', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: [] },
+    });
+    const box = wrapper.find('[data-testid="div-string-list-box"]').element as HTMLElement;
+
+    expect(box.children.length).toBe(0);
+  });
+
+  it('is showing one element', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
+    });
+    const box = wrapper.find('.string-list-box').element as HTMLElement;
+
+    expect(box.children.length).toBe(1);
+  });
+
+  it('action-buttons are visible', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
+    });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
+
+    expect(actionButtons).not.toBe(undefined);
+  });
+
+  it('action-buttons are hidden when is view-only mode', () => {
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items: ['test'],
+        readonly: true,
+      },
+    });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
+
+    expect(actionButtons).toBe(undefined);
+  });
+
+  it('show new item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
+
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items,
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
+
+    expect(elements.length).toBe(10);
+
+    await wrapper.setProps({ items: [ ...items, 'new' ] });
+
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(11);
+  });
+
+  it('remove item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
+
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items,
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(elements.length).toBe(10);
+
+    await wrapper.setProps({ items: [ ...items.filter(f => f !== 'a') ] });
+
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(9);
+  });
+
+});