@rancher/shell 1.2.0 → 2.0.0

package/components/Questions/__tests__/Int.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the Int Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -56,8 +46,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');

package/components/Questions/__tests__/String.test.ts

@@ -1,17 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the String Component', () => {
   it('input field is present', () => {
@@ -26,8 +16,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -56,8 +46,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -82,8 +72,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -108,8 +98,8 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');

package/components/Questions/__tests__/Yaml.test.ts

@@ -1,18 +1,7 @@
 import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-const defaultStubs = {
-  Tab:        true,
-  Tabbed:     true,
-  CodeMirror: true
-};
-const defaultGetters = {
-  currentStore:           () => 'current_store',
-  'management/schemaFor': jest.fn(),
-  'current_store/all':    jest.fn(),
-  'i18n/t':               jest.fn(),
-  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
-};
+import defaults from './utils/questions-defaults';
 
 describe('the yaml Component', () => {
   it('input field is present', () => {
@@ -27,8 +16,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -57,8 +46,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -83,8 +72,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');
@@ -109,8 +98,8 @@ describe('the yaml Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: { $store: { getters: defaultGetters } },
-      stubs: defaultStubs,
+      mocks: defaults.mocks,
+      stubs: defaults.stubs,
     });
 
     const inputFields = wrapper.findAll('[data-testid="yaml-input-var_name"]');

package/components/Questions/__tests__/utils/questions-defaults.ts

@@ -0,0 +1,20 @@
+
+const defaultStubs = {
+  Tab:    true,
+  Tabbed: true,
+};
+const defaultGetters = {
+  currentStore:           () => 'current_store',
+  'management/schemaFor': jest.fn(),
+  'current_store/all':    jest.fn(),
+  'i18n/t':               jest.fn(),
+  'i18n/withFallback':    jest.fn((key, args, fallback) => fallback),
+};
+
+const defaultMocks = { $store: { getters: defaultGetters }, $fetchState: { pending: false } };
+
+export default {
+  stubs:   defaultStubs,
+  getters: defaultGetters,
+  mocks:   defaultMocks,
+};

package/components/Questions/index.vue

@@ -15,6 +15,7 @@ import ReferenceType from './Reference';
 import CloudCredentialType from './CloudCredential';
 import RadioType from './Radio';
 import YamlType from './Yaml';
+import Loading from '@shell/components/Loading';
 
 export const knownTypes = {
   string:          StringType,
@@ -115,7 +116,11 @@ function migrate(expr) {
 }
 
 export default {
-  components: { Tab, ...knownTypes },
+  components: {
+    ...knownTypes,
+    Tab,
+    Loading,
+  },
 
   props: {
     mode: {
@@ -165,6 +170,13 @@ export default {
     }
   },
 
+  async fetch() {
+    // If this source is a schema, ensure the schema's `resourceFields` is populated
+    if (this.source.type === 'schema' && this.source.requiresResourceFields) {
+      await this.source.fetchResourceFields();
+    }
+  },
+
   data() {
     return { valueGeneration: 0 };
   },
@@ -258,7 +270,7 @@ export default {
       }
 
       if ( this.tabbed === 'multiple' ) {
-        return this.groups.length > 1;
+        return !!this.groups.length;
       }
 
       return true;
@@ -434,7 +446,11 @@ export default {
 </script>
 
 <template>
-  <form v-if="asTabs">
+  <Loading
+    v-if="$fetchState.pending"
+    mode="relative"
+  />
+  <form v-else-if="asTabs">
     <Tab
       v-for="g in groups"
       :key="g.name"

package/components/ResourceCancelModal.vue

@@ -1,5 +1,9 @@
 <script>
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
+  components: { AppModal },
+
   props: {
     isCancelModal: {
       type:    Boolean,
@@ -11,18 +15,22 @@ export default {
     },
   },
 
+  data() {
+    return { showModal: false };
+  },
+
   watch: {},
 
   methods: {
     show() {
-      this.$modal.show('cancel-modal');
+      this.showModal = true;
     },
 
     /**
      * Close the modal, no op
      */
     cancelCancel() {
-      this.$modal.hide('cancel-modal');
+      this.showModal = false;
 
       this.$emit('cancel-cancel');
     },
@@ -31,7 +39,7 @@ export default {
      * Close the modal, cancel has been confirmed
      */
     confirmCancel() {
-      this.$modal.hide('cancel-modal');
+      this.showModal = false;
 
       this.$emit('confirm-cancel', this.isCancelModal);
     },
@@ -40,11 +48,13 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="confirm-modal"
+  <app-modal
+    v-if="showModal"
+    customClass="confirm-modal"
     name="cancel-modal"
     :width="440"
     height="auto"
+    @close="cancelCancel"
   >
     <div class="header">
       <h4 class="text-default-text">
@@ -80,7 +90,7 @@ export default {
         <span v-else>{{ t("cruResource.confirmBack") }}</span>
       </button>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss' scoped>
@@ -89,32 +99,27 @@ export default {
     margin: 0 10px;
   }
 
-  .v--modal-box {
-    background-color: var(--default);
-    box-shadow: none;
-    min-height: 200px;
-    .body {
-      min-height: 75px;
-      padding: 10px 0 0 15px;
-      p {
-        margin-top: 10px;
-      }
+  .body {
+    min-height: 75px;
+    padding: 10px 0 0 15px;
+    p {
+      margin-top: 10px;
     }
-    .header {
-      background-color: var(--error);
-      padding: 15px 0 0 15px;
-      height: 50px;
+  }
+  .header {
+    background-color: var(--error);
+    padding: 15px 0 0 15px;
+    height: 50px;
 
-      h4 {
-        color: white;
-      }
-    }
-    .footer {
-      border-top: 1px solid var(--border);
-      text-align: center;
-      padding: 10px 0 0 15px;
-      height: 60px;
+    h4 {
+      color: white;
     }
   }
+  .footer {
+    border-top: 1px solid var(--border);
+    text-align: center;
+    padding: 10px 0 0 15px;
+    height: 60px;
+  }
 }
 </style>

package/components/ResourceDetail/Masthead.vue

@@ -12,6 +12,9 @@ import {
 } from '@shell/config/query-params';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
+import TabTitle from '@shell/components/TabTitle';
+
+// i18n-uses resourceDetail.header.*
 
 /**
  * Resource Detail Masthead component.
@@ -23,7 +26,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup, ExtensionPanel
+    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
   },
   props: {
     value: {
@@ -177,13 +180,16 @@ export default {
 
     project() {
       if (this.isNamespace) {
-        const id = (this.value?.metadata?.labels || {})[PROJECT];
-        const clusterId = this.$store.getters['currentCluster'].id;
+        const cluster = this.$store.getters['currentCluster'];
 
-        return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
-      } else {
-        return null;
+        if (cluster) {
+          const id = (this.value?.metadata?.labels || {})[PROJECT];
+
+          return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ cluster.id }/${ id }`);
+        }
       }
+
+      return null;
     },
 
     banner() {
@@ -370,7 +376,7 @@ export default {
     },
 
     hideNamespaceLocation() {
-      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+      return this.$store.getters['currentProduct'].hideNamespaceLocation || this.value.namespaceLocation === null;
     },
   },
 
@@ -409,16 +415,29 @@ export default {
       <div class="title">
         <div class="primaryheader">
           <h1>
-            <nuxt-link
+            <TabTitle
+              v-if="isCreate"
+              :showChild="false"
+            >
+              {{ parent.displayName }}
+            </TabTitle>
+            <TabTitle
+              v-else
+              :showChild="false"
+            >
+              {{ displayName }}
+            </TabTitle>
+            <router-link
               v-if="location"
               :to="location"
             >
               {{ parent.displayName }}:
-            </nuxt-link>
+            </router-link>
             <span v-else>{{ parent.displayName }}:</span>
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
+              class="mastehead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -444,16 +463,17 @@ export default {
           v-if="!isCreate"
           class="subheader"
         >
-          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
-          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
+          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <router-link :to="project.detailLocation">{{ project.nameDisplay }}</router-link></span>
+          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <router-link :to="workspaceLocation">{{ namespace }}</router-link></span>
           <span v-else-if="namespace && !hasMultipleNamespaces">
             {{ t("resourceDetail.masthead.namespace") }}:
-            <nuxt-link
+            <router-link
               v-if="!hideNamespaceLocation"
               :to="namespaceLocation"
+              data-testid="masthead-subheader-namespace"
             >
               {{ namespace }}
-            </nuxt-link>
+            </router-link>
             <span v-else>
               {{ namespace }}
             </span>
@@ -541,6 +561,10 @@ export default {
 
   HEADER {
     margin: 0;
+
+    .title {
+      overflow: hidden;
+    }
   }
 
   .primaryheader {
@@ -550,6 +574,17 @@ export default {
 
     h1 {
       margin: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .mastehead-resource-title {
+        padding: 0 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -572,9 +607,6 @@ export default {
 
   .masthead-state {
     font-size: initial;
-    display: inline-block;
-    position: relative;
-    top: -2px;
   }
 
   .masthead-istio {

package/components/ResourceDetail/index.vue

@@ -28,7 +28,6 @@ function modeFor(route) {
 }
 
 async function getYaml(store, model) {
-  const inStore = store.getters['currentStore'](model.type);
   let yaml;
   const opt = { headers: { accept: 'application/yaml' } };
 
@@ -36,9 +35,7 @@ async function getYaml(store, model) {
     yaml = (await model.followLink('view', opt)).data;
   }
 
-  const cleanedYaml = await store.dispatch(`${ inStore }/cleanForDownload`, yaml);
-
-  return cleanedYaml;
+  return model.cleanForDownload(yaml);
 }
 
 export default {
@@ -158,6 +155,11 @@ export default {
       }
 
       if ( as === _YAML ) {
+        if (schema?.fetchResourceFields) {
+          // fetch resourceFields for createYaml
+          await schema.fetchResourceFields();
+        }
+
         yaml = createYaml(schemas, resource, data);
       }
     } else {

package/components/ResourceList/Masthead.vue

@@ -5,6 +5,7 @@ import TypeDescription from '@shell/components/TypeDescription';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
+import TabTitle from '@shell/components/TabTitle';
 
 /**
  * Resource List Masthead component.
@@ -17,6 +18,7 @@ export default {
     Favorite,
     TypeDescription,
     ResourceLoadingIndicator,
+    TabTitle
   },
   props: {
     resource: {
@@ -102,7 +104,7 @@ export default {
 
   computed: {
     get,
-    ...mapGetters(['isExplorer']),
+    ...mapGetters(['isExplorer', 'currentCluster']),
 
     resourceName() {
       if (this.schema) {
@@ -156,9 +158,8 @@ export default {
 
     _createButtonlabel() {
       return this.createButtonLabel || this.t('resourceList.head.create');
-    }
-
-  },
+    },
+  }
 };
 </script>
 
@@ -169,7 +170,7 @@ export default {
     </slot>
     <div class="title">
       <h1 class="m-0">
-        {{ _typeDisplay }} <Favorite
+        <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
           v-if="isExplorer"
           :resource="favoriteResource || resource"
         />
@@ -191,22 +192,22 @@ export default {
           <slot name="extraActions" />
 
           <slot name="createButton">
-            <n-link
+            <router-link
               v-if="hasEditComponent && _isCreatable"
               :to="_createLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create'"
             >
               {{ _createButtonlabel }}
-            </n-link>
-            <n-link
+            </router-link>
+            <router-link
               v-else-if="_isYamlCreatable"
               :to="_yamlCreateLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create-yaml'"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </n-link>
+            </router-link>
           </slot>
         </div>
       </slot>