@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/pages/readme.vue

@@ -0,0 +1,88 @@
+<script>
+import Loading from '@shell/components/Loading';
+import ChartReadme from '@shell/components/ChartReadme';
+import ChartMixin from '@shell/mixins/chart';
+import isEqual from 'lodash/isEqual';
+
+const readQueryBool = (value, defaultValue) => {
+  if (value === undefined) {
+    return defaultValue;
+  }
+
+  return `${ value }` === 'true';
+};
+
+export default {
+  components: {
+    ChartReadme,
+    Loading,
+  },
+
+  mixins: [ChartMixin],
+
+  async fetch() {
+    await this.fetchChart();
+  },
+
+  computed: {
+    showAppReadme() {
+      return readQueryBool(this.$route.query.showAppReadme, false);
+    },
+
+    hideReadmeFirstTitle() {
+      return readQueryBool(this.$route.query.hideReadmeFirstTitle, false);
+    }
+  },
+
+  watch: {
+    '$route.query'(neu, old) {
+      if (!isEqual(neu, old) && Object.keys(neu).length > 0) {
+        this.$fetch();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <main
+    v-else
+    class="readme-page"
+  >
+    <div
+      v-if="versionInfoError"
+      class="readme-page__content"
+    >
+      {{ versionInfoError }}
+    </div>
+    <ChartReadme
+      v-else-if="hasReadme"
+      :version-info="versionInfo"
+      :show-app-readme="showAppReadme"
+      :hide-readme-first-title="hideReadmeFirstTitle"
+      class="readme-page__content"
+    />
+    <div
+      v-else
+      class="readme-page__content"
+    >
+      {{ t('catalog.install.appReadmeMissing', {}, true) }}
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+.readme-page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 24px;
+  background-color: var(--body-bg);
+  color: var(--body-text);
+
+  &__content {
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+}
+</style>

package/plugins/clean-html.d.ts

@@ -0,0 +1,9 @@
+import { Config } from 'dompurify';
+
+export function purifyHTML(value: string, options?: Config): string;
+
+export function addLinkInterceptor(fn: (link: string) => string | undefined | void, name?: string): void;
+
+export function removeLinkInterceptor(fn: (link: string) => string | undefined | void): void;
+
+export function processLink(link: string): string;

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -3,6 +3,10 @@ import Resource from '@shell/plugins/dashboard-store/resource-class.js';
 import { resourceClassJunkObject } from '@shell/plugins/dashboard-store/__tests__/utils/store-mocks';
 import { EVENT } from '@shell/config/types';
 
+jest.mock('@shell/config/version', () => ({ getVersionData: () => ({ Version: 'v2.13.0' }) }));
+jest.mock('@shell/config/uiplugins', () => ({ parseRancherVersion: (v: string) => v }));
+jest.mock('@shell/core/plugin-helpers', () => ({ getApplicableExtensionEnhancements: () => [] }));
+
 describe('class: Resource', () => {
   describe('given custom resource keys', () => {
     const customResource = resourceClassJunkObject;
@@ -399,6 +403,99 @@ describe('class: Resource', () => {
 
       expect(cards).toHaveLength(0);
     });
+
+    it('should include the resources card when relationships exist', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'uses', toType: 'svc', toId: 'a'
+            },
+            {
+              rel: 'uses', fromType: 'pod', fromId: 'b'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: {
+          'i18n/t':      (key: string) => key,
+          'cluster/all': () => []
+        },
+      });
+
+      const cards = resource.cards;
+
+      expect(cards).toHaveLength(1);
+      expect(cards[0].props.title).toBe('component.resource.detail.card.resourcesCard.title');
+    });
+  });
+
+  describe('getter: resourcesCard', () => {
+    it('should return null when there are no relationships', () => {
+      const resource = new Resource({ type: 'test' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      expect(resource.resourcesCard).toBeNull();
+    });
+
+    it('should return rows for both referredToBy and refersTo when relationships exist in both directions', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'owner', fromType: 'rs', fromId: 'r-1'
+            },
+            {
+              rel: 'uses', toType: 'svc', toId: 's-1'
+            },
+            {
+              rel: 'uses', toType: 'svc', toId: 's-2'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      const rows = resource.resourcesCardRows;
+
+      expect(rows).toHaveLength(2);
+      expect(rows[0].label).toBe('component.resource.detail.card.resourcesCard.rows.referredToBy');
+      expect(rows[0].counts[0].count).toBe(1);
+      expect(rows[1].label).toBe('component.resource.detail.card.resourcesCard.rows.refersTo');
+      expect(rows[1].counts[0].count).toBe(2);
+    });
+
+    it('should omit a direction with no relationships', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'uses', toType: 'svc', toId: 's-1'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      const rows = resource.resourcesCardRows;
+
+      expect(rows).toHaveLength(1);
+      expect(rows[0].label).toBe('component.resource.detail.card.resourcesCard.rows.refersTo');
+    });
   });
 
   describe('getter: insightCardProps', () => {
@@ -497,4 +594,88 @@ describe('class: Resource', () => {
       expect(actions[1].variant).toBe('primary');
     });
   });
+
+  describe('getter: _availableActions', () => {
+    function createResource(links: Record<string, string>, overrides: Record<string, any> = {}) {
+      const resource = new Resource({
+        type: 'test-type',
+        links,
+        ...overrides,
+      }, {
+        getters: {
+          schemaFor: () => ({
+            linkFor:           jest.fn(),
+            resourceMethods:   [],
+            collectionMethods: [],
+          }),
+        },
+        dispatch:    jest.fn(),
+        rootState:   { $extension: { getPlugins: () => ({}) } },
+        rootGetters: {
+          'i18n/t':                 (key: string) => key,
+          'type-map/hasCustomEdit': () => false,
+          'type-map/optionsFor':    () => ({
+            isEditable: false, isRemovable: true, isCreatable: false
+          }),
+          'prefs/get':    () => false,
+          currentCluster: undefined,
+          currentProduct: undefined,
+          ...overrides.rootGetters,
+        },
+      });
+
+      jest.spyOn(resource, 'currentRouter').mockReturnValue({ currentRoute: { value: {} } } as any);
+
+      return resource;
+    }
+
+    function findAction(actions: any[], actionName: string) {
+      return actions.find((a: any) => a.action === actionName);
+    }
+
+    it('should hide "View YAML" when "Show Configuration" is enabled and resource cannot edit YAML', () => {
+      const resource = createResource({ view: '/api/v1/test' });
+
+      const actions = resource._availableActions;
+      const viewYaml = findAction(actions, 'goToViewYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(true);
+      expect(viewYaml.enabled).toBe(false);
+    });
+
+    it('should show "Edit YAML" even when "Show Configuration" is enabled', () => {
+      const resource = createResource(
+        { view: '/api/v1/test', update: '/api/v1/test' },
+        {
+          rootGetters: {
+            'type-map/optionsFor': () => ({
+              isEditable: true, isRemovable: true, isCreatable: false
+            })
+          }
+        },
+      );
+
+      const actions = resource._availableActions;
+      const editYaml = findAction(actions, 'goToEditYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(true);
+      expect(editYaml.enabled).toBe(true);
+    });
+
+    it('should show "View YAML" when "Show Configuration" is not enabled', () => {
+      const resource = createResource(
+        { view: '/api/v1/test' },
+        { disableResourceDetailDrawer: true },
+      );
+
+      const actions = resource._availableActions;
+      const viewYaml = findAction(actions, 'goToViewYaml');
+      const showConfig = findAction(actions, 'showConfiguration');
+
+      expect(showConfig.enabled).toBe(false);
+      expect(viewYaml.enabled).toBe(true);
+    });
+  });
 });

package/plugins/dashboard-store/actions.js

@@ -660,12 +660,8 @@ export default {
     return getters.all(type);
   },
 
-  // opt:
-  //  filter: Filter by fields, e.g. {field: value, anotherField: anotherValue} (default: none)
-  //  limit: Number of records to return per page (default: 1000)
-  //  sortBy: Sort by field
-  //  sortOrder: asc or desc
-  //  url: Use this specific URL instead of looking up the URL for the type/id.  This should only be used for bootstrapping schemas on startup.
+  // opt: @ActionFindArgs
+  // @returns @ActionFindResponse
   //  @TODO depaginate: If the response is paginated, retrieve all the pages. (default: true)
   async find(ctx, { type, id, opt }) {
     if (!id) {
@@ -697,11 +693,23 @@ export default {
       }
     }
 
+    const havePage = getters.havePage(type);
+
     opt = opt || {};
     opt.url = getters.urlFor(type, id, opt);
 
     const res = await dispatch('request', { opt, type });
 
+    if (!havePage && getters.havePage(type)) {
+      // There may be a super edge case where list --> detail (whilst loading) --> list navigation causes the list's rows to disappear
+      // Somehow the `findPage` from the list page returns before the `find`. The `find` then clears the page state in the cache.
+      // If this has happened silently return (we don't care about result)
+      // https://github.com/rancher/dashboard/issues/17524
+      console.warn(`Prevented \`find\` action from polluting cache for type "${ type }" (currently represents a page).`); // eslint-disable-line no-console
+
+      return;
+    }
+
     if (!opt.transient) {
       await dispatch('load', { data: res, invalidatePageCache: opt.invalidatePageCache });
     }
@@ -830,19 +838,33 @@ export default {
   /**
    * Remove all cached entries for a resource and stop watches
    */
-  forgetType({ commit, dispatch, state }, type, compareWatches) {
-    // Stop all known watches
-    state.started
-      .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
-      .forEach((entry) => dispatch('unwatch', entry));
-
-    // Stop all known back-off watch processes for this type
-    dispatch('resetWatchBackOff', {
-      type, compareWatches, resetStarted: false
-    });
+  forgetType({ commit, dispatch, state }, payload) {
+    let type = payload;
+    let config = {};
+
+    if ( typeof payload === 'object' && payload !== null && payload.type ) {
+      type = payload.type;
+      config = payload;
+    }
+
+    const { compareWatches, unwatch = true, forget = true } = config;
 
-    // Remove entries from store
-    commit('forgetType', type);
+    if (unwatch) {
+      // Stop all known watches
+      state.started
+        .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
+        .forEach((entry) => dispatch('unwatch', entry));
+
+      // Stop all known back-off watch processes for this type
+      dispatch('resetWatchBackOff', {
+        type, compareWatches, resetStarted: false
+      });
+    }
+
+    if (forget) {
+      // Remove entries from store
+      commit('forgetType', type);
+    }
   },
 
   promptRemove({ commit, state }, resources ) {

package/plugins/dashboard-store/resource-class.js

@@ -12,6 +12,7 @@ import {
   AS,
   MODE
 } from '@shell/config/query-params';
+import { EVENT } from '@shell/config/types';
 import { VIEW_IN_API, DEV } from '@shell/store/prefs';
 import { addObject, addObjects, findBy, removeAt } from '@shell/utils/array';
 import CustomValidators from '@shell/utils/custom-validators';
@@ -39,8 +40,7 @@ import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { parse } from '@shell/utils/selector';
-import { EVENT } from '@shell/config/types';
-import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import { useResourceCardRow, useResourceCardRowFromRelationships } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -507,7 +507,11 @@ export function colorForState(state, isError, isTransitioning) {
   return `text-${ color }`;
 }
 
-export function stateDisplay(state) {
+export function simpleColorForState(state, isError = false, isTransitioning = false) {
+  return colorForState(state, isError, isTransitioning).replace('text-', '') || 'disabled';
+}
+
+export function stateDisplay(state, preserveOriginal = false) {
   // @TODO use translations
   const key = (state || 'active').toLowerCase();
 
@@ -515,6 +519,11 @@ export function stateDisplay(state) {
     return REMAP_STATE[key];
   }
 
+  // Preserves the original state name returned by the
+  if ( preserveOriginal ) {
+    return ucFirst(state);
+  }
+
   return key.split(/-/).map(ucFirst).join('-');
 }
 
@@ -754,7 +763,7 @@ export default class Resource {
   }
 
   get stateSimpleColor() {
-    return this.stateColor.replace('text-', '');
+    return simpleColorForState(this.state, this.stateObj?.error, this.stateObj?.transitioning);
   }
 
   get stateBackground() {
@@ -946,12 +955,15 @@ export default class Resource {
     // where mostly likely extension CRD model is extending from resource-class
     const isResourceDetailDrawerCompatibleWithRancherSystem = semver.satisfies(parsedRancherVersion, '>= 2.13.0');
 
+    // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+    const showConfigEnabled = isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml);
+
     const all = [
       {
         action:  'showConfiguration',
         label:   this.t('action.showConfiguration'),
         icon:    'icon icon-document',
-        enabled: isResourceDetailDrawerCompatibleWithRancherSystem && this.disableResourceDetailDrawer !== true && (this.canCustomEdit || this.canYaml), // If the resource can't show an edit or a yaml we don't want to show the configuration drawer
+        enabled: showConfigEnabled,
       },
       { divider: true },
       {
@@ -964,7 +976,7 @@ export default class Resource {
         action:  this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
         label:   this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
         icon:    'icon icon-file',
-        enabled: this.canYaml,
+        enabled: this.canYaml && (this.canEditYaml || !showConfigEnabled), // Hide "View YAML" when "Show Configuration" is available since it already includes YAML viewing
       },
       {
         action:  (this.canCustomEdit ? 'goToClone' : 'cloneYaml'),
@@ -2070,7 +2082,7 @@ export default class Resource {
 
       if ( r.selector ) {
         // A selector is a stringified version of a matchLabel (https://github.com/kubernetes/apimachinery/blob/master/pkg/labels/selector.go#L1010)
-        addObjects(out.selectors, {
+        addObject(out.selectors, {
           type:      r.toType,
           namespace: r.toNamespace,
           selector:  r.selector
@@ -2080,7 +2092,7 @@ export default class Resource {
         let namespace = r[`${ direction }Namespace`];
         let name = r[`${ direction }Id`];
 
-        if ( !namespace && name.includes('/') ) {
+        if ( !namespace && name?.includes('/') ) {
           const idx = name.indexOf('/');
 
           namespace = name.substr(0, idx);
@@ -2242,12 +2254,58 @@ export default class Resource {
     };
   }
 
+  get _resourcesCardRows() {
+    const rows = [];
+    const relationships = this.metadata?.relationships || [];
+
+    const referredToByRels = relationships.filter((r) => r.fromType && r.fromId && !r.selector);
+    const refersToRels = relationships.filter((r) => r.toType && r.toId && !r.selector && !r.fromType);
+
+    if (referredToByRels.length) {
+      rows.push(useResourceCardRowFromRelationships(
+        this.t('component.resource.detail.card.resourcesCard.rows.referredToBy'),
+        referredToByRels,
+        { hash: '#related' }
+      ));
+    }
+
+    if (refersToRels.length) {
+      rows.push(useResourceCardRowFromRelationships(
+        this.t('component.resource.detail.card.resourcesCard.rows.refersTo'),
+        refersToRels,
+        { hash: '#related' }
+      ));
+    }
+
+    return rows;
+  }
+
+  get resourcesCardRows() {
+    return this._resourcesCardRows;
+  }
+
+  get resourcesCard() {
+    const rows = this.resourcesCardRows;
+
+    if (!rows.length) {
+      return null;
+    }
+
+    return {
+      component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/Card/StateCard/index.vue'))),
+      props:     {
+        title: this.t('component.resource.detail.card.resourcesCard.title'),
+        rows
+      }
+    };
+  }
+
   get _cards() {
     // All cards are opt in, we're leaving the insights card as part of the base resource since it should proliferate to most resources
     return [];
   }
 
   get cards() {
-    return this._cards;
+    return [this.resourcesCard, ...this._cards].filter((c) => c);
   }
 }