@rancher/shell 3.0.8-rc.8 → 3.0.8

package/components/BrandImage.vue

@@ -36,9 +36,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ theme: 'prefs/theme' }),
+    ...mapGetters({ theme: 'prefs/theme', brand: 'management/brand' }),
 
-    brand() {
+    brandBase() {
       const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BRAND)[0] || {};
 
       return setting.value;
@@ -78,19 +78,30 @@ export default {
       }
     },
 
+    isDark() {
+      return this.theme === 'dark';
+    },
+
     pathToBrandedImage() {
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
-        if (this.theme === 'dark' && this.uiLogoDark) {
+        if (this.isDark && this.uiLogoDark) {
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
           return this.uiLogoLight;
         }
+
+        // csp, rgs, and federal map to SUSE, but have their own custom logos
+        if (this.brandBase !== this.brand) {
+          try {
+            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+          } catch { }
+        }
       }
 
       if (this.fileName === 'banner.svg') {
-        if (this.theme === 'dark' && this.uiBannerDark) {
+        if (this.isDark && this.uiBannerDark) {
           return this.uiBannerDark;
         }
 
@@ -100,7 +111,7 @@ export default {
       }
 
       if (this.fileName === 'login-landscape.svg') {
-        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+        if (this.isDark && this.uiLoginBackgroundDark) {
           return this.uiLoginBackgroundDark;
         }
 
@@ -112,7 +123,7 @@ export default {
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {
-        if (this.theme === 'dark' || this.dark) {
+        if (this.isDark || this.dark) {
           try {
             return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}

package/components/Cron/CronExpressionEditor.vue

@@ -268,7 +268,7 @@ const handleBlur = (field: CronField) => {
 </template>
 
 <style scoped lang="scss">
-$input-max-width: 110px;
+$input-max-width: 120px;
 
 .cron-row {
   display: flex;

package/components/Cron/CronExpressionEditorModal.vue

@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
 
   .custom-cron-editor {
     margin: 64px auto;
-    max-width: 600px;
+    max-width: 660px;
   }
 
   .cron-info {

package/components/CruResource.vue

@@ -9,9 +9,10 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
+import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
 
 import {
-  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE
+  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE, _CREATE
 } from '@shell/config/query-params';
 
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
@@ -168,6 +169,12 @@ export default {
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
 
+    if (this.mode === _CREATE) {
+      useResourceCreatePageProvider();
+    } else if (this.mode === _EDIT) {
+      useResourceEditPageProvider();
+    }
+
     return {
       isCancelModal:   false,
       showAsForm:      this.$route.query[AS] !== _YAML,

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -25,6 +25,7 @@ const i18n = useI18n(store);
         :real-mode="_VIEW"
         :initial-value="props.resource"
         :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        :default-tab="props.defaultTab"
         as="config"
       />
     </div>

package/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -1,4 +1,5 @@
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { provide, inject } from 'vue';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider, useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import * as helpers from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import * as vuex from 'vuex';
 
@@ -6,6 +7,11 @@ jest.mock('@shell/components/Drawer/ResourceDetailDrawer/helpers');
 jest.mock('vuex');
 jest.mock('@shell/composables/drawer');
 jest.mock('@shell/components/Drawer/ResourceDetailDrawer/index.vue', () => ({ name: 'ResourceDetailDrawer' } as any));
+jest.mock('vue', () => ({
+  ...jest.requireActual('vue'),
+  provide: jest.fn(),
+  inject:  jest.fn()
+}));
 
 describe('composables: ResourceDetailDrawer', () => {
   const resource = { type: 'RESOURCE' };
@@ -78,4 +84,47 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(props?.resource).toStrictEqual(resource);
     });
   });
+
+  describe('useResourceDetailDrawerProvider', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call provide with the correct key and value', () => {
+      useResourceDetailDrawerProvider();
+
+      expect(provide).toHaveBeenCalledWith('isInResourceDetailDrawerKey', true);
+    });
+  });
+
+  describe('useIsInResourceDetailDrawer', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call inject with the correct key and default value', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(inject).toHaveBeenCalledWith('isInResourceDetailDrawerKey', false);
+      expect(result).toBe(false);
+    });
+
+    it('should return true when inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(true);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when not inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(false);
+    });
+  });
 });

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,6 +1,7 @@
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
+import { inject, provide } from 'vue';
 
 export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
@@ -27,3 +28,21 @@ export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined
     resourceType: resource.type
   };
 }
+
+const IS_IN_RESOURCE_DETAIL_DRAWER_KEY = 'isInResourceDetailDrawerKey';
+
+/**
+ * Used to add a provide method which will indicate to all ancestors that they're inside the ResourceDetailDrawer. This is useful because we show
+ * config page components both independently and within the ResourceDetailDrawer and we sometimes want to distinguish between the two use cases.
+*/
+export function useResourceDetailDrawerProvider() {
+  provide(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, true);
+}
+
+/**
+ * A composable used to determine if the current component was instantiated as an ancestor of a ResourceDetailDrawer.
+ * @returns true if the component is an ancestor of ResourceDetailDrawer, otherwise false
+ */
+export function useIsInResourceDetailDrawer() {
+  return inject(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, false);
+}

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
@@ -54,6 +54,8 @@ const canEdit = computed(() => {
   return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
 });
 
+useResourceDetailDrawerProvider();
+
 </script>
 <template>
   <Drawer
@@ -79,6 +81,7 @@ const canEdit = computed(() => {
         <ConfigTab
           v-if="configTabProps"
           v-bind="configTabProps"
+          :default-tab="props.defaultTab"
         />
         <YamlTab
           v-if="yamlTabProps"

package/components/Drawer/ResourceDetailDrawer/types.ts

@@ -7,10 +7,11 @@ export interface ConfigProps {
     resource: any;
     component: any;
     resourceType: string;
+    defaultTab?: string;
 }
 
 export interface ResourceDetailDrawerProps {
     resource: any;
-
+    defaultTab?: string;
     onClose?: () => void;
 }

package/components/LocaleSelector.vue

@@ -45,11 +45,11 @@ export default {
     },
 
     showLocale() {
-      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
+      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.showNone;
     },
 
     showNone() {
-      return !!process.env.dev && this.dev;
+      return !!process.env.dev;
     },
   },
 

package/components/ModalManager.vue

@@ -5,6 +5,7 @@ import { useStore } from 'vuex';
 import AppModal from '@shell/components/AppModal.vue';
 
 const store = useStore();
+const componentRendered = ref(false);
 
 const isOpen = computed(() => store.getters['modal/isOpen']);
 const component = computed(() => store.getters['modal/component']);
@@ -23,12 +24,20 @@ function close() {
     backgroundClosing.value();
   }
 
+  componentRendered.value = false;
   store.commit('modal/closeModal');
 }
 
 function registerBackgroundClosing(fn: Function) {
   backgroundClosing.value = fn;
 }
+
+function onSlotComponentMounted() {
+  // variable for the watcher based focus-trap
+  // so that we know when the component is rendered
+  // works in tandem with trigger-focus-trap="true"
+  componentRendered.value = true;
+}
 </script>
 
 <template>
@@ -39,7 +48,7 @@ function registerBackgroundClosing(fn: Function) {
       :width="modalWidth"
       :style="{ '--prompt-modal-width': modalWidth }"
       :trigger-focus-trap="true"
-      tabindex="0"
+      :focus-trap-watcher-based-variable="componentRendered"
       @close="close"
     >
       <component
@@ -48,6 +57,7 @@ function registerBackgroundClosing(fn: Function) {
         data-testid="modal-manager-component"
         :resources="resources"
         :register-background-closing="registerBackgroundClosing"
+        @vue:mounted="onSlotComponentMounted"
         @close="close"
       />
     </app-modal>

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

@@ -118,7 +118,7 @@ describe('the yaml Component', () => {
 
     expect(inputFields).toHaveLength(1);
 
-    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .v-popper--has-tooltip');
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .has-clean-tooltip');
 
     expect(labelFields).toHaveLength(1);
   });

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

@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import Questions from '@shell/components/Questions/index.vue';
+
+const mockT = jest.fn((key) => key);
+const mockWithFallback = jest.fn((key, args, fallback) => fallback || key);
+
+const defaultMocks = {
+  $fetchState: { pending: false },
+  $store:      {
+    getters: {
+      'i18n/t':            mockT,
+      'i18n/withFallback': mockWithFallback
+    }
+  }
+};
+
+const defaultProps = {
+  source:          { questions: { questions: [] } },
+  value:           {},
+  targetNamespace: 'default',
+  mode:            'edit',
+};
+
+describe('component: Questions', () => {
+  describe('computed: groups', () => {
+    it('should group questions with the same group into a single group', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Group 1');
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should place questions without a group into a default group', () => {
+      const questions = [
+        { variable: 'q1' },
+        { variable: 'q2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Questions'); // Default group name
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should create multiple groups for questions with different groups', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2);
+    });
+
+    it('should correctly group a mix of grouped and ungrouped questions', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2' },
+        { variable: 'q3', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2); // 'Group 1' and 'Questions'
+      const group1 = groups.find((g: any) => g.name === 'Group 1');
+      const defaultGroup = groups.find((g: any) => g.name === 'Questions');
+
+      expect(group1.questions).toHaveLength(2);
+      expect(defaultGroup.questions).toHaveLength(1);
+    });
+  });
+
+  describe('computed: asTabs', () => {
+    it('should be true by default', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  defaultProps,
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be true when tabbed is true', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: true },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be false when tabbed is false', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: false },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    it('should be false when tabbed is "never"', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: 'never' },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    describe('when tabbed is "multiple"', () => {
+      it('should be true if there are groups', () => {
+        const questions = [{ variable: 'q1', group: 'Group 1' }];
+        const wrapper = shallowMount(Questions, {
+          props: {
+            ...defaultProps, source: { questions: { questions } }, tabbed: 'multiple'
+          },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(1);
+        expect(wrapper.vm.asTabs).toBe(true);
+      });
+
+      it('should be false if there are no groups', () => {
+        const wrapper = shallowMount(Questions, {
+          props:  { ...defaultProps, tabbed: 'multiple' },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(0);
+        expect(wrapper.vm.asTabs).toBe(false);
+      });
+    });
+  });
+});

package/components/RelatedResources.vue

@@ -102,6 +102,11 @@ export default {
           }
         };
 
+        // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating
+        if (!detailLocation.params.namespace) {
+          delete detailLocation.params.namespace;
+        }
+
         out.push({
           type,
           id:       r[`${ this.direction }Id`],

package/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -8,7 +8,7 @@ export type Annotation = Row;
 export interface AnnotationsProps {
   annotations: Annotation[];
 
-  onShowConfiguration?: (returnFocusSelector: string) => void;
+  onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -26,6 +26,6 @@ const i18n = useI18n(store);
     :rows="annotations"
     type="active"
 
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

package/components/Resource/Detail/Metadata/Labels/index.vue

@@ -8,7 +8,7 @@ export type Label = Row;
 export interface LabelsProps {
     labels: Label[];
 
-    onShowConfiguration?: (returnFocusSelector: string) => void;
+    onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -27,6 +27,6 @@ const i18n = useI18n(store);
     :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
     :rows="labels"
     type="active"
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

package/components/Resource/Detail/Metadata/index.vue

@@ -48,7 +48,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
         type="active"
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
@@ -58,7 +58,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Labels
         :labels="labels"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <div
@@ -67,7 +67,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Annotations
         :annotations="annotations"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
   </SpacedRow>

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -31,6 +31,10 @@ const fetch = useFetch(async() => {
   return r;
 });
 
+const stateBackground = computed(() => {
+  return fetch.value.data?.stateSimpleColor || 'unknown';
+});
+
 const resourceTypeLabel = computed(() => {
   if (!fetch.value.data) {
     return '';
@@ -67,7 +71,7 @@ const actionInvoked = () => {
       >
         <RcStatusIndicator
           shape="disc"
-          :status="fetch.data?.stateBackground || 'unknown'"
+          :status="stateBackground"
         />
         <router-link
           :to="props.detailLocation || fetch.data.detailLocation || '#'"

package/components/Resource/Detail/composables.ts

@@ -46,12 +46,12 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
 };
 
 export const useOnShowConfiguration = (resource: any) => {
-  return (returnFocusSelector?: string) => {
+  return (returnFocusSelector?: string, defaultTab?: string) => {
     const resourceValue = toValue(resource);
     // Because extensions can make a copy of the resource-class it's possible that an extension will have a resource-class which predates the inclusion of showConfiguration
     // to still the rest of shell to consume
     const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
 
-    showConfiguration(returnFocusSelector);
+    showConfiguration(returnFocusSelector, defaultTab);
   };
 };

package/components/ResourceDetail/Masthead/latest.vue

@@ -42,27 +42,29 @@ const store = useStore();
 </script>
 
 <template>
-  <TitleBar v-bind="titleBarProps" />
-  <Banner
-    v-if="bannerProps"
-    v-ui-context="{
-      store: store,
-      icon: 'icon-info',
-      hookable: true,
-      value: {
-        bannerProps,
-        resource: uiCtxResource
-      },
-      tag: '__details-state-banner',
-      description: 'Status Message'
-    }"
-    class="new state-banner"
-    v-bind="bannerProps"
-  />
-  <Metadata
-    v-bind="metadataProps"
-    class="mmt-4"
-  />
+  <div>
+    <TitleBar v-bind="titleBarProps" />
+    <Banner
+      v-if="bannerProps"
+      v-ui-context="{
+        store: store,
+        icon: 'icon-info',
+        hookable: true,
+        value: {
+          bannerProps,
+          resource: uiCtxResource
+        },
+        tag: '__details-state-banner',
+        description: 'Status Message'
+      }"
+      class="new state-banner"
+      v-bind="bannerProps"
+    />
+    <Metadata
+      v-bind="metadataProps"
+      class="mmt-4"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/components/ResourceDetail/index.vue

@@ -14,6 +14,7 @@ import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
+import { useResourceDetailPageProvider } from '@shell/composables/resourceDetail';
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -116,6 +117,7 @@ export default {
 
     if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
       as = _DETAIL;
+      useResourceDetailPageProvider();
     } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
       as = _CONFIG;
     } else {
@@ -351,6 +353,7 @@ export default {
 
   methods: {
     stringify,
+
     setSubtype(subtype) {
       this.resourceSubtype = subtype;
     },