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

package/components/LazyImage.vue

@@ -1,9 +1,11 @@
 <script>
+import { BLANK_IMAGE } from '@shell/utils/style';
+
 export default {
   props: {
     initialSrc: {
       type:    String,
-      default: require('@shell/assets/images/generic-catalog.svg'),
+      default: BLANK_IMAGE,
     },
 
     errorSrc: {
@@ -20,29 +22,83 @@ export default {
   watch: {
     src(neu, old) {
       if (neu !== old) {
-        this.loadImage();
+        // Show error image if src is falsy
+        if (!neu) {
+          return this.onError();
+        }
+
+        if (this.intersected) {
+          // The component is in the viewport, load the new image right away
+          this.loadImage();
+        } else if (!this.observer) {
+          // The component is not in the viewport and not being observed,
+          // which can happen if `src` was null during mount.
+          // Start observing.
+          this.startObserver();
+        }
       }
     }
   },
 
+  created() {
+    // initialize non-reactive data
+    this.observer = null;
+    this.intersected = false;
+    this.boundError = null;
+  },
+
   mounted() {
-    this.loadImage();
+    // Show error image if src is falsy
+    if (!this.src) {
+      this.onError();
+    } else {
+      this.startObserver();
+    }
   },
 
   beforeUnmount() {
     const img = this.$refs.img;
 
-    if (img) {
+    if (img && this.boundError) {
       img.removeEventListener('error', this.boundError);
     }
+
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
   },
 
   methods: {
+    startObserver() {
+      if (this.src && !this.observer && this.$refs.img) {
+        this.observer = new IntersectionObserver((entries) => {
+          const image = entries[0];
+
+          if (image.isIntersecting) {
+            this.intersected = true;
+            this.loadImage();
+            // Once the image is loaded, we don't need the observer anymore
+            if (this.observer) {
+              this.observer.disconnect();
+              this.observer = null;
+            }
+          }
+        });
+        this.observer.observe(this.$refs.img);
+      }
+    },
+
     // Ensure we load the image when the source changes
     loadImage() {
       const img = this.$refs.img;
 
       if (this.src) {
+        // Remove previous error listener if any
+        if (img && this.boundError) {
+          img.removeEventListener('error', this.boundError);
+        }
+
         img.setAttribute('src', this.src);
         this.boundError = this.onError.bind(this);
 

package/components/Loading.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
   .overlay {
     align-items: center;
-    background-color: var(--overlay-bg);
+    background-color: var(--subtle-overlay-bg);
     display: flex;
     justify-content: center;
     position: absolute;

package/components/LocaleSelector.vue

@@ -80,7 +80,7 @@ export default {
         <rc-dropdown-trigger
           data-testid="locale-selector"
           link
-          class="baseline"
+          class="baseline locale-selector-btn"
           :aria-label="t('locale.menu')"
         >
           {{ selectedLocaleLabel }}
@@ -88,7 +88,7 @@ export default {
             v-if="showIcon"
             #after
           >
-            <i class="icon icon-fw icon-sort-down" />
+            <i class="ml-5 icon icon-chevron-down" />
           </template>
         </rc-dropdown-trigger>
         <template #dropdownCollection>
@@ -126,4 +126,9 @@ export default {
   .baseline {
     align-items: baseline;
   }
+
+  .locale-selector-btn {
+    align-items: center;
+    display: flex;
+  }
 </style>

package/components/Markdown.vue

@@ -133,6 +133,10 @@ export default {
     table tr th :last-child, table tr td :last-child {
       margin-bottom: 0;
     }
+
+    img {
+      max-width: 100%;
+    }
 }
 
 </style>

package/components/PaginatedResourceTable.vue

@@ -36,6 +36,35 @@ export default defineComponent({
       default: null,
     },
 
+    groupTooltip: {
+      type:    String,
+      default: 'resourceTable.groupBy.namespace',
+    },
+
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key (or also use groupSort)
+     */
+    groupBy: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * Field to order groups by, defaults to groupBy
+     */
+    groupSort: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
@@ -58,6 +87,14 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Use this store instead of the store `inStore` getters
+     */
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
     /**
      * Information may be required from resources other than the primary one shown per row
      *
@@ -79,7 +116,7 @@ export default defineComponent({
 
   async fetch() {
     const promises = [
-      this.$fetchType(this.resource, [], this.inStore),
+      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
     ];
 
     if (this.fetchSecondaryResources) {
@@ -115,13 +152,21 @@ export default defineComponent({
       :rows="rows"
       :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
+
+      :group-by="groupBy"
+      :group-sort="groupSort"
       :groupable="groupable"
+      :groupTooltip="groupTooltip"
+      :groupOptions="groupOptions"
+
+      :override-in-store="overrideInStore"
 
       :headers="safeHeaders"
       :namespaced="namespaced"
 
       :external-pagination-enabled="canPaginate"
       :external-pagination-result="paginationResult"
+
       @pagination-changed="paginationChanged"
     >
       <!-- Pass down templates provided by the caller -->

package/components/PromptRestore.vue

@@ -7,7 +7,7 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -47,14 +47,13 @@ export default {
   },
 
   computed: {
-    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
+    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
 
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
-      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -79,9 +78,7 @@ export default {
       }
     },
     restoreModeOptions() {
-      const etcdOption = this.isRke2 ? 'none' : 'etcd';
-
-      return [etcdOption, 'kubernetesVersion', 'all'];
+      return ['none', 'kubernetesVersion', 'all'];
     }
   },
 
@@ -112,20 +109,12 @@ export default {
       }
 
       const cluster = this.toRestore?.[0];
-      let promise;
-
-      if (!cluster?.isRke2) {
-        promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
-          return snapshots.filter((s) => s.state === STATES_ENUM.ACTIVE && s.clusterId === cluster.metadata.name);
-        });
-      } else {
-        promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
-          const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
+      const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
+        const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
-          );
-        });
-      }
+        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        );
+      });
 
       // Map of snapshots by name
       const allSnapshots = await promise.then((snapshots) => {
@@ -154,30 +143,19 @@ export default {
 
     async apply(buttonDone) {
       try {
-        if ( this.isRke2 ) {
-          const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
-
-          await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
-
-          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:       now + 1,
-            name:             this.snapshot.name,
-            restoreRKEConfig: this.restoreMode,
-          });
-
-          await cluster.save();
-        } else {
-          await this.$store.dispatch('rancher/request', {
-            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method: 'post',
-            data:   {
-              etcdBackupId:     this.snapshot.id,
-              restoreRkeConfig: this.restoreMode,
-            },
-          });
-        }
+        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+          generation:       now + 1,
+          name:             this.snapshot.name,
+          restoreRKEConfig: this.restoreMode,
+        });
+
+        await cluster.save();
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),

package/components/Resource/Detail/Masthead/composable.ts

@@ -0,0 +1,16 @@
+import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import { MastheadProps } from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { computed, Ref } from 'vue';
+
+export const useDefaultMastheadProps = (resource: any): Ref<MastheadProps> => {
+  const titleBarProps = useDefaultTitleBarProps(resource);
+  const metadataProps = useDefaultMetadataForLegacyPagesProps(resource);
+
+  return computed(() => {
+    return {
+      titleBarProps: titleBarProps.value,
+      metadataProps: metadataProps.value,
+    };
+  });
+};

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+import TitleBar, { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import Metadata, { MetadataProps } from '@shell/components/Resource/Detail/Metadata/index.vue';
+
+export interface MastheadProps {
+  titleBarProps: TitleBarProps;
+  metadataProps: MetadataProps;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<MastheadProps>();
+
+</script>
+<template>
+  <div class="masthead">
+    <TitleBar v-bind="props.titleBarProps">
+      <template
+        v-if="$slots['additional-actions']"
+        #additional-actions
+      >
+        <slot name="additional-actions" />
+      </template>
+    </TitleBar>
+    <Metadata
+      v-bind="props.metadataProps"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.masthead {
+    :deep().metadata {
+        margin-top: 24px;
+    }
+}
+</style>

package/components/Resource/Detail/Metadata/IdentifyingInformation/composable.ts

@@ -3,7 +3,7 @@ import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInfor
 import {
   useCertificate,
   useExpires,
-  useImage, useIssuer, useLiveDate, useNamespace, useReady, useSecretType,
+  useImage, useIssuer, useLiveDate, useNamespace, useProject, useReady, useSecretCluster, useSecretType,
   useServiceAccount
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
 import { useStore } from 'vuex';
@@ -21,7 +21,11 @@ export const useDefaultIdentifyingInformation = (resource: any): ComputedRef<Row
   });
 };
 
-export const useSecretIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+export const useSecretIdentifyingInformation = (resource: any, isProjectSecret: boolean): ComputedRef<Row[]> => {
+  const namespace = isProjectSecret ? undefined : useNamespace(resource);
+  const project = isProjectSecret ? useProject(resource) : undefined;
+  const cluster = isProjectSecret ? useSecretCluster(resource) : undefined;
+  const age = useLiveDate(resource);
   const secretType = useSecretType(resource);
   const serviceAccount = useServiceAccount(resource);
   const certificate = useCertificate(resource);
@@ -30,6 +34,10 @@ export const useSecretIdentifyingInformation = (resource: any): ComputedRef<Row[
 
   return computed(() => {
     const rows = [
+      age?.value,
+      namespace?.value,
+      project?.value,
+      cluster?.value,
       secretType?.value,
       serviceAccount?.value,
       certificate?.value,

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -2,7 +2,9 @@ import { useI18n } from '@shell/composables/useI18n';
 import { computed, ComputedRef, markRaw, toValue } from 'vue';
 import Additional from '@shell/components/Resource/Detail/Additional.vue';
 import { useStore } from 'vuex';
-import { NAMESPACE, FLEET, SERVICE_ACCOUNT } from '@shell/config/types';
+import {
+  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI
+} from '@shell/config/types';
 import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 import { useRoute } from 'vue-router';
@@ -14,7 +16,7 @@ export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
   const i18n = useI18n(store);
   const resourceValue = toValue(resource);
 
-  if (!resourceValue.namespace || resourceValue.namespaces) {
+  if (!resourceValue.namespace || resourceValue.namespaces || resourceValue.isProjectScoped) {
     return;
   }
 
@@ -113,7 +115,12 @@ export const useProject = (resource: any): ComputedRef<Row> | undefined => {
   const i18n = useI18n(store);
   const resourceValue = toValue(resource);
 
-  if (resource.type !== NAMESPACE || !resourceValue.project) {
+  // Only show project if one of these types
+  if (resource.type !== NAMESPACE && resource.type !== SECRET) {
+    return;
+  }
+
+  if (!resourceValue.project) {
     return;
   }
 
@@ -126,10 +133,22 @@ export const useProject = (resource: any): ComputedRef<Row> | undefined => {
   });
 };
 
+export const useSecretCluster = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: store.getters['type-map/labelFor']({ id: CAPI.RANCHER_CLUSTER }),
+      value: resourceValue.projectCluster?.nameDisplay,
+    };
+  });
+};
+
 export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]> => {
-  const details = resource.details;
+  const details = computed(() => resource.details);
 
-  if (!details) {
+  if (!details.value) {
     return;
   }
 
@@ -148,8 +167,8 @@ export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]
   };
 
   return computed(() => {
-    return details
-      .filter((detail: any) => !detail.separator)
+    return details.value
+      .filter((detail: any) => !detail.separator && detail.content !== undefined && detail.content !== null)
       .map((detail: any) => {
         return {
           label:         detail.label,

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

@@ -34,7 +34,7 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
       :data-testid="row.dataTestid"
     >
       <label
-        class="label text-muted"
+        class="label text-deemphasized"
         :for="getRowValueId(row)"
       >
         {{ row.label }}
@@ -95,6 +95,13 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
         display: flex;
         flex-direction: row;
         align-items: center;
+
+        &, & * {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       .label {

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

@@ -54,12 +54,12 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
 <template>
   <div class="key-value">
     <div class="heading">
-      <span class="title text-muted">{{ propertyName }}</span>
+      <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2 text-muted"
+      class="empty mmt-2 text-deemphasized"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
@@ -67,7 +67,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
       <div class="show-configuration mmt-1">
         <a
           :data-testid="showConfigurationEmptyDataTestId"
-          class="secondary text-muted"
+          class="secondary text-deemphasized"
           href="#"
           @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationEmptyFocusSelector);}"
         >
@@ -91,7 +91,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
       v-if="showShowAllButton"
       :data-testid="showConfigurationMoreDataTestId"
       href="#"
-      class="show-all secondary"
+      class="show-all"
       @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
     >
       {{ showAllLabel }}
@@ -110,29 +110,31 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     }
 
     .heading {
-        margin-bottom: 4px;
+        margin-bottom: 8px;
     }
 
     .row {
+        display: block;
         width: 100%;
 
-        &:not(:first-of-type) {
+        &:not(:nth-child(2)) {
             margin-top: 4px;
         }
-
-        & {
-            margin-top: 8px;
-        }
     }
     .show-all {
         margin-top: 8px;
     }
 
     .rectangle {
+      display: inline-block;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .no-rows {
+      line-height: 21px;
+    }
 }
 </style>

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

@@ -23,7 +23,9 @@ const props = withDefaults(
 .rectangle {
     border: 1px solid var(--tag-bg);
     border-radius: 4px;
-    padding: 4px;
+    padding: 0 8px;
+    height: 23px;
+    line-height: 23px;
 
     &:not(.outline) {
         background-color: var(--tag-bg);

package/components/Resource/Detail/Metadata/__tests__/composables.test.ts

@@ -2,16 +2,7 @@ import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resourc
 import * as IdentifyingFields from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
 import { computed } from 'vue';
 
-const mockDrawer = { openResourceDetailDrawer: jest.fn() };
-
 jest.mock('@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields');
-jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => {
-  return {
-    useResourceDetailDrawer() {
-      return mockDrawer;
-    }
-  };
-});
 
 describe('composables: Metadata/composables', () => {
   beforeEach(() => {
@@ -28,9 +19,10 @@ describe('composables: Metadata/composables', () => {
 
     it('should filter out undefined identifyingInformation', () => {
       const resource = {
-        type:        'RESOURCE',
-        annotations: { annotation: 'ANNOTATION' },
-        labels:      { label: 'LABEL' }
+        type:              'RESOURCE',
+        annotations:       { annotation: 'ANNOTATION' },
+        labels:            { label: 'LABEL' },
+        showConfiguration: jest.fn()
       };
       const result = useDefaultMetadataForLegacyPagesProps(resource);
 
@@ -39,7 +31,7 @@ describe('composables: Metadata/composables', () => {
       expect(result.value.annotations).toStrictEqual([{ key: 'annotation', value: resource.annotations.annotation }]);
       expect(result.value.labels).toStrictEqual([{ key: 'label', value: resource.labels.label }]);
       expect(result.value.identifyingInformation).toHaveLength(0);
-      expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+      expect(resource.showConfiguration).toHaveBeenCalledTimes(1);
     });
 
     it('should fill identifyingInformation', () => {
@@ -51,9 +43,10 @@ describe('composables: Metadata/composables', () => {
       useResourceDetailsSpy.mockReturnValue(computed(() => [{ label: 'RESOURCE_DETAILS' }]));
 
       const resource = {
-        type:        'RESOURCE',
-        annotations: { annotation: 'ANNOTATION' },
-        labels:      { label: 'LABEL' }
+        type:              'RESOURCE',
+        annotations:       { annotation: 'ANNOTATION' },
+        labels:            { label: 'LABEL' },
+        showConfiguration: jest.fn()
       };
       const result = useDefaultMetadataForLegacyPagesProps(resource);
 
@@ -69,7 +62,7 @@ describe('composables: Metadata/composables', () => {
         { label: 'CREATED_BY' },
         { label: 'RESOURCE_DETAILS' }
       ]);
-      expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+      expect(resource.showConfiguration).toHaveBeenCalledTimes(1);
     });
   });
 });