@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

package/components/ResourceDetail/Masthead/latest.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { Banner } from '@components/Banner';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
+import { computed } from 'vue';
+
+export interface Props {
+  value?: Object;
+  resourceSubtype?: string;
+}
+
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
+
+const resourceSubtype = computed(() => props.resourceSubtype);
+const titleBarProps = useDefaultTitleBarProps(props.value, resourceSubtype);
+const metadataProps = useDefaultMetadataForLegacyPagesProps(props.value);
+const bannerProps = useResourceDetailBannerProps(props.value);
+</script>
+
+<template>
+  <TitleBar v-bind="titleBarProps" />
+  <Banner
+    v-if="bannerProps"
+    class="new state-banner"
+    v-bind="bannerProps"
+  />
+  <Metadata
+    v-bind="metadataProps"
+    class="mmt-4"
+  />
+</template>
+
+<style lang="scss" scoped>
+.new.state-banner {
+  margin: 0;
+  margin-top: 16px;
+}
+</style>

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

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
-
 import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
 import { _EDIT, _VIEW, LEGACY, MODE } from '@shell/config/query-params';
+import * as pageEnabled from '@shell/composables/useIsNewDetailPageEnabled';
 import flushPromises from 'flush-promises';
+import { computed } from 'vue';
 
 const mockQuery: any = {};
 const mockParams: any = {};
@@ -30,13 +31,22 @@ jest.mock('vue-router', () => ({
   })
 }));
 
+jest.mock('@shell/composables/useIsNewDetailPageEnabled');
+
 describe('component: ResourceDetail/index', () => {
   const resourceName = 'configmap';
+  const useIsNewDetailPageEnabledSpy = jest.spyOn(pageEnabled, 'useIsNewDetailPageEnabled');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-  it('should render legacy component with default props if LEGACY=false is not present', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false', async() => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _VIEW;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, { });
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
@@ -46,26 +56,33 @@ describe('component: ResourceDetail/index', () => {
     expect(legacyComponent.props('resourceOverride')).toBeUndefined();
     expect(legacyComponent.props('parentRouteOverride')).toBeUndefined();
     expect(legacyComponent.props('errorsMap')).toBeUndefined();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should render legacy component with default props if LEGACY=false is present but resourceName has not been added to our mapping', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but resourceName has not been added to our mapping', async() => {
     mockParams.resource = 'notMapped';
     mockQuery[MODE] = _VIEW;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
     expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should render legacy component with default props if LEGACY=false is present but mode is not VIEW', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but mode is not VIEW', async() => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _EDIT;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
     expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should render legacy component while forwarding props', async() => {
@@ -99,16 +116,20 @@ describe('component: ResourceDetail/index', () => {
     expect(legacyComponent.props('errorsMap')).toStrictEqual(errorsMap);
   });
 
-  it('should render new component if LEGACY=false is present', async() => {
+  it('should render new component if useIsNewDetailPageEnabledSpy is true', async() => {
     mockParams.resource = resourceName;
+    mockParams.id = 'ID';
     mockQuery[MODE] = _VIEW;
     mockQuery[LEGACY] = 'false';
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+
     const wrapper = mount(ResourceDetail);
 
     await flushPromises();
     const configmapComponent = wrapper.findComponent<any>({ name: 'configmap' });
 
     expect(configmapComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 });

package/components/ResourceDetail/index.vue

@@ -2,9 +2,10 @@
 import { useRoute } from 'vue-router';
 import { computed, defineAsyncComponent } from 'vue';
 
-import { MODE, _VIEW, LEGACY } from '@shell/config/query-params';
+import { MODE, _VIEW } from '@shell/config/query-params';
 import Legacy from '@shell/components/ResourceDetail/legacy.vue';
 import Loading from '@shell/components/Loading.vue';
+import { useIsNewDetailPageEnabled } from '@shell/composables/useIsNewDetailPageEnabled';
 
 export interface Props {
   flexContent?: boolean;
@@ -22,19 +23,20 @@ export interface Props {
 // I could also dynamically check for and import these pages but I wanted this to be easier
 // to be explicit and easier to search for.
 const resourceToPage: any = {
-  // 'apps.daemonset':    defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.daemonset.vue')),
-  // 'apps.deployment':   defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.deployment.vue')),
-  // 'apps.statefulset':  defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.statefulset.vue')),
-  // 'batch.cronjob':     defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.cronjob.vue')),
-  // 'batch.job':         defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.job.vue')),
-  // 'cluster-dashboard': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/cluster-dashboard.vue')),
+  // 'apps.daemonset':   defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.daemonset.vue')),
+  // 'apps.deployment':  defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.deployment.vue')),
+  // 'apps.statefulset': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.statefulset.vue')),
+  // 'batch.cronjob':    defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.cronjob.vue')),
+  // 'batch.job':        defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.job.vue')),
   configmap: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/configmap.vue')),
   // namespace:           defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/namespace.vue')),
   // node:                defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/node.vue')),
   // pod:                 defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/pod.vue')),
-  // secret:              defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/secret.vue')),
+  secret:    defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/secret.vue')),
 };
 
+defineOptions({ inheritAttrs: false });
+
 const route = useRoute();
 const props = withDefaults(defineProps<Props>(), {
   flexContent:         false,
@@ -45,14 +47,26 @@ const props = withDefaults(defineProps<Props>(), {
   errorsMap:           undefined
 });
 
-const currentResourceName = computed<string>(() => route.params.resource as string);
-const mode = computed(() => route.query[MODE]);
-const isView = computed(() => !mode.value || mode.value === _VIEW);
-// We're defaulting to legacy being on, we'll switch this once we want to enable the new detail page by default
-const isLegacy = computed(() => route.query[LEGACY] !== 'false');
-const page = computed(() => resourceToPage[currentResourceName.value]);
+const currentResourceName = computed(() => {
+  const resource = route?.params?.resource;
+
+  if (!resource) {
+    return;
+  }
 
-const useLatest = computed(() => !!(!isLegacy.value && isView.value && page.value));
+  if (typeof resource === 'string') {
+    return resource;
+  }
+
+  // This should never occur, just satisfying the types
+  return resource[0];
+});
+const mode = computed(() => route?.query?.[MODE]);
+const isView = computed(() => route?.params?.id && (!mode.value || mode.value === _VIEW));
+// We're defaulting to legacy being on, we'll switch this once we want to enable the new detail page by default
+const iseNewDetailPageEnabled = useIsNewDetailPageEnabled();
+const page = computed(() => currentResourceName.value ? resourceToPage[currentResourceName.value] : undefined);
+const useLatest = computed(() => !!(iseNewDetailPageEnabled.value && isView.value && page.value));
 </script>
 
 <template>
@@ -66,6 +80,6 @@ const useLatest = computed(() => !!(!isLegacy.value && isView.value && page.valu
   </Suspense>
   <Legacy
     v-else
-    v-bind="props"
+    v-bind="{...$attrs, ...props}"
   />
 </template>

package/components/ResourceDetail/legacy.vue

@@ -379,6 +379,16 @@ export default {
     closeError(index) {
       this.errors = this.errors.filter((_, i) => i !== index);
     },
+    onYamlError(err) {
+      this.errors = [];
+      const errors = Array.isArray(err) ? err : [err];
+
+      errors.forEach((e) => {
+        if (this.errors.indexOf(e) === -1) {
+          this.errors.push(e);
+        }
+      });
+    },
     /**
      * Initializes the resource components based on the provided user and
      * resource override.
@@ -483,8 +493,9 @@ export default {
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value ? value.doneOverride : null"
+      :show-errors="false"
       @update:value="$emit('input', $event)"
-      @error="e=>errors.push(e)"
+      @error="onYamlError"
     />
 
     <component
@@ -542,4 +553,10 @@ export default {
   flex-direction: column;
   flex-grow: 1;
 }
+.cru__errors {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--header-bg);
+}
 </style>

package/components/ResourceList/Masthead.vue

@@ -157,6 +157,12 @@ export default {
     },
 
     _createButtonlabel() {
+      const overrideLabel = this.$store.getters['type-map/optionsFor'](this.resource).listCreateButtonLabelKey;
+
+      if (overrideLabel) {
+        return this.t(overrideLabel);
+      }
+
       return this.createButtonLabel || this.t('resourceList.head.create');
     },
   }

package/components/ResourceYaml.vue

@@ -73,6 +73,11 @@ export default {
       default: true
     },
 
+    showErrors: {
+      type:    Boolean,
+      default: true
+    },
+
     applyHooks: {
       type:    Function,
       default: null,
@@ -289,6 +294,13 @@ export default {
       }
     },
 
+    refresh() {
+      this.$refs.yamleditor.refresh();
+    },
+
+    closeError(index) {
+      this.errors = (this.errors || []).filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -318,7 +330,8 @@ export default {
         class="footer"
         :class="{ 'edit': !isView }"
         :mode="mode"
-        :errors="errors"
+        :errors="showErrors ? errors : []"
+        @close-error="closeError"
         @save="save"
         @done="done"
       >

package/components/SlideInPanelManager.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 import { useStore } from 'vuex';
 import {
   DEFAULT_FOCUS_TRAP_OPTS,
   useWatcherBasedSetupFocusTrapWithDestroyIncluded
 } from '@shell/composables/focusTrap';
+import { isEqual } from 'lodash';
+import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
@@ -15,6 +17,11 @@ const currentComponent = computed(() => store.getters['slideInPanel/component'])
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
 const panelTop = computed(() => {
+  // Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the top.
+  if (currentProps?.value?.top) {
+    return currentProps?.value?.top;
+  }
+
   const banner = document.getElementById('banner-header');
   let height = HEADER_HEIGHT;
 
@@ -25,13 +32,24 @@ const panelTop = computed(() => {
   return `${ height }px`;
 });
 
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
+// Some components like the ResourceDetailDrawer are designed to take up the full height of the viewport so we want to be able to specify the height.
+const panelHeight = computed(() => (currentProps?.value?.height) ? (currentProps?.value?.height) : `calc(100vh - ${ panelTop?.value })`);
 const panelWidth = computed(() => currentProps?.value?.width || '33%');
 const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
 const panelZIndex = computed(() => `${ (isOpen?.value ? 1 : 2) * (currentProps?.value?.zIndex ?? 1000) }`);
 
 const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
 const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+const closeOnRouteChange = computed(() => {
+  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+
+  if (!propsCloseOnRouteChange) {
+    return ['name', 'params', 'hash', 'query'];
+  }
+
+  return propsCloseOnRouteChange;
+});
+const router = useRouter();
 
 watch(
   /**
@@ -75,15 +93,33 @@ watch(
 );
 
 watch(
-  () => (store as any).$router?.currentRoute,
-  () => {
-    if (isOpen?.value && currentProps?.value.closeOnRouteChange !== false) {
+  () => router?.currentRoute?.value,
+  (newValue, oldValue) => {
+    if (!isOpen?.value) {
+      return;
+    }
+
+    if (closeOnRouteChange.value.includes('name') && !isEqual(newValue?.name, oldValue?.name)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('params') && !isEqual(newValue?.params, oldValue?.params)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('hash') && !isEqual(newValue?.hash, oldValue?.hash)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('query') && !isEqual(newValue?.query, oldValue?.query)) {
       closePanel();
     }
   },
   { deep: true }
 );
 
+onBeforeUnmount(closePanel);
+
 function closePanel() {
   store.commit('slideInPanel/close');
 }
@@ -100,9 +136,12 @@ function closePanel() {
         data-testid="slide-in-glass"
         class="slide-in-glass"
         :class="{ 'slide-in-glass-open': isOpen }"
+        :style="{
+          ['z-index']: panelZIndex
+        }"
         @click="closePanel"
       />
-      <div
+      <aside
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
         :style="{
@@ -136,7 +175,7 @@ function closePanel() {
             class="dynamic-panel-content"
           />
         </div>
-      </div>
+      </aside>
     </div>
   </Teleport>
 </template>

package/components/StateDot/index.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { computed } from 'vue';
+
+interface Props {
+    color: StateColor;
+    size?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), { size: '8px' });
+const backgroundColor = computed(() => stateColorCssVar(props.color));
+</script>
+
+<template>
+  <span class="state-dot" />
+</template>
+
+<style lang="scss" scoped>
+.state-dot {
+    display: inline-block;
+
+    width: v-bind('props.size');
+    height: v-bind('props.size');
+
+    border-radius: 50%;
+    background-color: v-bind('backgroundColor');
+}
+</style>

package/components/Tabbed/index.vue

@@ -145,17 +145,10 @@ export default {
         this.select(activeTab.name);
       }
     },
-  },
-
-  mounted() {
-    if ( this.useHash ) {
-      window.addEventListener('hashchange', this.hashChange);
-    }
-  },
-
-  unmounted() {
-    if ( this.useHash ) {
-      window.removeEventListener('hashchange', this.hashChange);
+    '$route.hash'() {
+      if ( this.useHash ) {
+        this.hashChange();
+      }
     }
   },
 
@@ -164,7 +157,7 @@ export default {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },
     hashChange() {
-      if (!this.scrollOnChange) {
+      if (this.scrollOnChange) {
         const scrollable = document.getElementsByTagName('main')[0];
 
         if (scrollable) {
@@ -182,8 +175,9 @@ export default {
     select(name/* , event */) {
       const { sortedTabs } = this;
 
-      const selected = this.find(name);
-      const hashName = `#${ name }`;
+      const cleanName = name.replace('#', '');
+      const selected = this.find(cleanName);
+      const hashName = `#${ cleanName }`;
 
       if ( !selected || selected.disabled) {
         return;
@@ -281,7 +275,7 @@ export default {
       >
         <a
           :data-testid="`btn-${tab.name}`"
-          :aria-controls="'#' + tab.name"
+          :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
           role="tab"
@@ -318,6 +312,7 @@ export default {
             type="button"
             class="btn bg-transparent"
             data-testid="tab-list-add"
+            :aria-label="t('tabs.addItem')"
             @click="tabAddClicked"
           >
             <i class="icon icon-plus" />
@@ -327,6 +322,7 @@ export default {
             class="btn bg-transparent"
             :disabled="!sortedTabs.length"
             data-testid="tab-list-remove"
+            :aria-label="t('tabs.removeItem')"
             @click="tabRemoveClicked"
           >
             <i class="icon icon-minus" />

package/components/Wizard.vue

@@ -361,7 +361,7 @@ export default {
                     role="presentation"
                   >
                     <span
-                      :aria-controls="'step' + idx+1"
+                      :aria-controls="'step-container-' + step.name"
                       :aria-selected="step.name === activeStep.name"
                       role="tab"
                       class="controls"
@@ -376,7 +376,7 @@ export default {
                       </span>
                     </span>
                   </li>
-                  <div
+                  <li
                     v-if="idx!==visibleSteps.length-1"
                     :key="step.name"
                     class="divider"
@@ -397,7 +397,9 @@ export default {
           >
             <div
               v-if="step.name === activeStep.name || step.hidden"
+              :id="'step-container-' + step.name"
               :key="step.name"
+              role="tabpanel"
               class="step-container__step"
               :class="{'hide': step.name !== activeStep.name && step.hidden}"
             >