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

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

@@ -1,135 +0,0 @@
-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 = {};
-
-jest.mock('@shell/components/ResourceDetail/legacy.vue', () => ({
-  template: '<div class="legacy">Legacy</div>',
-  name:     'Legacy',
-  props:    ['flexContent', 'componentTestId', 'storeOverride', 'resourceOverride', 'parentRouteOverride', 'errorsMap']
-}));
-
-jest.mock('@shell/components/Loading.vue', () => ({
-  template: '<div class="loading">Loading</div>',
-  name:     'Loading'
-}));
-
-jest.mock('@shell/pages/explorer/resource/detail/configmap.vue', () => ({
-  template: '<div class="configmap">configmap</div>',
-  name:     'configmap',
-}));
-
-jest.mock('vue-router', () => ({
-  useRoute: () => ({
-    query:  mockQuery,
-    params: mockParams
-  })
-}));
-
-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 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' });
-
-    expect(legacyComponent.props('flexContent')).toStrictEqual(false);
-    expect(legacyComponent.props('componentTestId')).toStrictEqual('resource-details');
-    expect(legacyComponent.props('storeOverride')).toBeUndefined();
-    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 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 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() => {
-    mockParams.resource = resourceName;
-    mockQuery[MODE] = _VIEW;
-
-    const flexContent = true;
-    const componentTestId = 'componentTestId';
-    const storeOverride = 'storeOverride';
-    const resourceOverride = 'resourceOverride';
-    const parentRouteOverride = 'parentRouteOverride';
-    const errorsMap = { error: 'test' };
-
-    const wrapper = mount(ResourceDetail, {
-      props: {
-        flexContent,
-        componentTestId,
-        storeOverride,
-        resourceOverride,
-        parentRouteOverride,
-        errorsMap,
-      }
-    });
-    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
-
-    expect(legacyComponent.props('flexContent')).toStrictEqual(flexContent);
-    expect(legacyComponent.props('componentTestId')).toStrictEqual(componentTestId);
-    expect(legacyComponent.props('storeOverride')).toStrictEqual(storeOverride);
-    expect(legacyComponent.props('resourceOverride')).toStrictEqual(resourceOverride);
-    expect(legacyComponent.props('parentRouteOverride')).toStrictEqual(parentRouteOverride);
-    expect(legacyComponent.props('errorsMap')).toStrictEqual(errorsMap);
-  });
-
-  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/legacy.vue

@@ -1,562 +0,0 @@
-<script>
-import CreateEditView from '@shell/mixins/create-edit-view/impl';
-import Loading from '@shell/components/Loading';
-import ResourceYaml from '@shell/components/ResourceYaml';
-import {
-  _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
-  AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
-} from '@shell/config/query-params';
-import { SCHEMA } from '@shell/config/types';
-import { createYaml } from '@shell/utils/create-yaml';
-import Masthead from '@shell/components/ResourceDetail/Masthead';
-import DetailTop from '@shell/components/DetailTop';
-import { clone, diff } from '@shell/utils/object';
-import IconMessage from '@shell/components/IconMessage';
-import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
-import { stringify } from '@shell/utils/error';
-import { Banner } from '@components/Banner';
-
-function modeFor(route) {
-  if ( route.query?.mode === _IMPORT ) {
-    return _IMPORT;
-  }
-
-  if ( route.params?.id ) {
-    return route.query.mode || _VIEW;
-  } else {
-    return _CREATE;
-  }
-}
-
-async function getYaml(store, model) {
-  let yaml;
-  const opt = { headers: { accept: 'application/yaml' } };
-
-  if ( model.hasLink('view') ) {
-    yaml = (await model.followLink('view', opt)).data;
-  }
-
-  return model.cleanForDownload(yaml);
-}
-
-export default {
-  emits: ['input'],
-
-  components: {
-    Loading,
-    DetailTop,
-    ForceDirectedTreeChart,
-    ResourceYaml,
-    Masthead,
-    IconMessage,
-    Banner
-  },
-
-  mixins: [CreateEditView],
-
-  props: {
-    storeOverride: {
-      type:    String,
-      default: null,
-    },
-
-    resourceOverride: {
-      type:    String,
-      default: null,
-    },
-
-    parentRouteOverride: {
-      type:    String,
-      default: null,
-    },
-
-    flexContent: {
-      type:    Boolean,
-      default: false,
-    },
-
-    /**
-     * Inherited global identifier prefix for tests
-     * Define a term based on the parent component to avoid conflicts on multiple components
-     */
-    componentTestid: {
-      type:    String,
-      default: 'resource-details'
-    },
-    errorsMap: {
-      type:    Object,
-      default: null
-    },
-  },
-
-  async fetch() {
-    const store = this.$store;
-    const route = this.$route;
-    const params = route.params;
-    let resourceType = this.resourceOverride || params.resource;
-
-    const inStore = this.storeOverride || store.getters['currentStore'](resourceType);
-    const realMode = this.realMode;
-
-    // eslint-disable-next-line prefer-const
-    let { namespace, id } = params;
-
-    // There are 6 "real" modes that can be put into the query string
-    // These are mapped down to the 3 regular page "mode"s that create-edit-view components
-    // know about:  view, edit, create (stage, import and clone become "create")
-    const mode = ([_CLONE, _IMPORT, _STAGE].includes(realMode) ? _CREATE : realMode);
-
-    const getGraphConfig = store.getters['type-map/hasGraph'](resourceType);
-    const hasGraph = !!getGraphConfig;
-    const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resourceType, id);
-    const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resourceType, id);
-
-    const schemas = store.getters[`${ inStore }/all`](SCHEMA);
-
-    // As determines what component will be rendered
-    const requested = route.query[AS];
-    let as;
-    let notFound = false;
-
-    if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
-      as = _DETAIL;
-    } else if ( mode === _VIEW && hasGraph && requested === _GRAPH) {
-      as = _GRAPH;
-    } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
-      as = _CONFIG;
-    } else {
-      as = _YAML;
-    }
-
-    this.as = as;
-
-    const options = store.getters[`type-map/optionsFor`](resourceType);
-
-    this.showMasthead = [_CREATE, _EDIT].includes(mode) ? options.resourceEditMasthead : true;
-    const canViewYaml = options.canYaml;
-
-    if ( options.resource ) {
-      resourceType = options.resource;
-    }
-
-    const schema = store.getters[`${ inStore }/schemaFor`](resourceType);
-    let model, initialModel, liveModel, yaml;
-
-    if ( realMode === _CREATE || realMode === _IMPORT ) {
-      if ( !namespace ) {
-        namespace = store.getters['defaultNamespace'];
-      }
-
-      const data = { type: resourceType };
-
-      if ( schema?.attributes?.namespaced ) {
-        data.metadata = { namespace };
-      }
-
-      liveModel = await store.dispatch(`${ inStore }/create`, data);
-      initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-      model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-
-      if (model.forceYaml === true) {
-        as = _YAML;
-        this.as = as;
-      }
-
-      if ( as === _YAML ) {
-        if (schema?.fetchResourceFields) {
-          // fetch resourceFields for createYaml
-          await schema.fetchResourceFields();
-        }
-
-        yaml = createYaml(schemas, resourceType, data);
-      }
-    } else {
-      let fqid = id;
-
-      if ( schema.attributes?.namespaced && namespace ) {
-        fqid = `${ namespace }/${ fqid }`;
-      }
-
-      try {
-        liveModel = await store.dispatch(`${ inStore }/find`, {
-          type: resourceType,
-          id:   fqid,
-          opt:  { watch: true }
-        });
-      } catch (e) {
-        if (e.status === 404 || e.status === 403) {
-          store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource: resourceType, fqid }, true)));
-        }
-        liveModel = {};
-        notFound = fqid;
-      }
-
-      try {
-        if (realMode === _VIEW) {
-          model = liveModel;
-        } else {
-          model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-        }
-        initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
-
-        if ( as === _YAML ) {
-          yaml = await getYaml(this.$store, liveModel);
-        }
-      } catch (e) {
-        this.errors.push(e);
-      }
-      if ( as === _YAML ) {
-        try {
-          yaml = await getYaml(this.$store, liveModel);
-        } catch (e) {
-          this.errors.push(e);
-        }
-      }
-
-      if ( as === _GRAPH ) {
-        this.chartData = liveModel;
-      }
-
-      if ( [_CLONE, _IMPORT, _STAGE].includes(realMode) ) {
-        model.cleanForNew();
-        yaml = model.cleanYaml(yaml, realMode);
-      }
-    }
-
-    // Ensure common properties exists
-    try {
-      model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
-    } catch (e) {
-      this.errors.push(e);
-    }
-
-    const out = {
-      hasGraph,
-      getGraphConfig,
-      hasCustomDetail,
-      hasCustomEdit,
-      canViewYaml,
-      resourceType,
-      as,
-      yaml,
-      initialModel,
-      liveModel,
-      mode,
-      value: model,
-      notFound,
-    };
-
-    for ( const key in out ) {
-      this[key] = out[key];
-    }
-
-    if ( this.mode === _CREATE ) {
-      this.value.applyDefaults(this, realMode);
-    }
-  },
-  data() {
-    return {
-      chartData:       null,
-      resourceSubtype: null,
-
-      // Set by fetch
-      hasGraph:        null,
-      hasCustomDetail: null,
-      hasCustomEdit:   null,
-      resourceType:    null,
-      asYaml:          null,
-      yaml:            null,
-      liveModel:       null,
-      initialModel:    null,
-      mode:            null,
-      as:              null,
-      value:           null,
-      model:           null,
-      notFound:        null,
-      canViewYaml:     null,
-      errors:          []
-    };
-  },
-
-  computed: {
-    realMode() {
-      // There are 5 "real" modes that you can start in: view, edit, create, stage, clone
-      const realMode = modeFor(this.$route);
-
-      return realMode;
-    },
-
-    isView() {
-      return this.mode === _VIEW;
-    },
-
-    isYaml() {
-      return this.as === _YAML;
-    },
-
-    isDetail() {
-      return this.as === _DETAIL;
-    },
-
-    isGraph() {
-      return this.as === _GRAPH;
-    },
-
-    offerPreview() {
-      return this.as === _YAML && [_EDIT, _CLONE, _IMPORT, _STAGE].includes(this.mode);
-    },
-
-    showComponent() {
-      switch ( this.as ) {
-      case _DETAIL: return this.detailComponent;
-      case _CONFIG: return this.editComponent;
-      }
-
-      return null;
-    },
-    hasErrors() {
-      return this.errors?.length && Array.isArray(this.errors);
-    },
-    mappedErrors() {
-      return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
-        ...acc,
-        [error]: {
-          message: error?.data?.message || error,
-          icon:    null
-        }
-      }), {});
-    },
-  },
-
-  watch: {
-    '$route'(current, prev) {
-      if (current.name !== prev.name) {
-        return;
-      }
-      const neu = clone(current.query);
-      const old = clone(prev.query);
-
-      delete neu[PREVIEW];
-      delete old[PREVIEW];
-
-      if ( !this.isView ) {
-        delete neu[AS];
-        delete old[AS];
-      }
-
-      const queryDiff = Object.keys(diff(neu, old));
-
-      if (queryDiff.includes(MODE) || queryDiff.includes(AS)) {
-        this.$fetch();
-      }
-    },
-
-    // Auto refresh YAML when the model changes
-    async 'value.metadata.resourceVersion'(a, b) {
-      if ( this.mode === _VIEW && this.as === _YAML && a && b && a !== b) {
-        this.yaml = await getYaml(this.$store, this.liveModel);
-      }
-    }
-  },
-
-  created() {
-    this.configureResource();
-  },
-
-  methods: {
-    stringify,
-    setSubtype(subtype) {
-      this.resourceSubtype = subtype;
-    },
-
-    keyAction(act) {
-      const m = this.liveModel;
-
-      if ( m?.[act] ) {
-        m[act]();
-      }
-    },
-    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.
-     *
-     * Configures the detail and edit components for a resource based on the
-     * user's ID and the specified resource.
-     *
-     * @param {Object} user - The user object containing user-specific
-     * information.
-     * @param {string|null} resourceOverride - An optional resource override
-     * string. If not provided, the method will use the default resource from
-     * the route parameters or the instance's resourceOverride property.
-     */
-    configureResource(userId = '', resourceOverride = null) {
-      const id = userId || this.$route.params.id;
-      const resource = resourceOverride || this.resourceOverride || this.$route.params.resource;
-      const options = this.$store.getters[`type-map/optionsFor`](resource);
-
-      const detailResource = options.resourceDetail || options.resource || resource;
-      const editResource = options.resourceEdit || options.resource || resource;
-
-      // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
-      // Remove id? How does subtype get in (cluster/node)
-      this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
-      this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
-    },
-    /**
-     * Sets the mode and initializes the resource components.
-     *
-     * This method sets the mode of the component and configures the resource
-     * components based on the provided user and resource.
-     *
-     * @param {Object} payload - An object containing the mode, user, and
-     * resource properties.
-     * @param {string} payload.mode - The mode to set.
-     * @param {Object} payload.user - The user object containing user-specific
-     * information.
-     * @param {string} payload.resource - The resource string to use for
-     * initialization.
-     */
-    setMode({ mode, userId, resource }) {
-      this.mode = mode;
-      this.value.id = userId;
-      this.configureResource(userId, resource);
-    }
-  }
-};
-</script>
-
-<template>
-  <Loading v-if="$fetchState.pending || notFound" />
-  <div v-else>
-    <Masthead
-      v-if="showMasthead"
-      :resource="resourceType"
-      :value="liveModel"
-      :mode="mode"
-      :real-mode="realMode"
-      :as="as"
-      :has-graph="hasGraph"
-      :has-detail="hasCustomDetail"
-      :has-edit="hasCustomEdit"
-      :can-view-yaml="canViewYaml"
-      :resource-subtype="resourceSubtype"
-      :parent-route-override="parentRouteOverride"
-      :store-override="storeOverride"
-    >
-      <DetailTop
-        v-if="isView && isDetail"
-        :value="liveModel"
-      />
-    </Masthead>
-    <div
-      v-if="hasErrors"
-      id="cru-errors"
-      class="cru__errors"
-    >
-      <Banner
-        v-for="(err, i) in errors"
-        :key="i"
-        color="error"
-        :data-testid="`error-banner${i}`"
-        :label="stringify(mappedErrors[err].message)"
-        :icon="mappedErrors[err].icon"
-        :closable="true"
-        @close="closeError(i)"
-      />
-    </div>
-
-    <ForceDirectedTreeChart
-      v-if="isGraph"
-      :data="chartData"
-      :fdc-config="getGraphConfig"
-    />
-
-    <ResourceYaml
-      v-else-if="isYaml"
-      ref="resourceyaml"
-      :value="value"
-      :mode="mode"
-      :yaml="yaml"
-      :offer-preview="offerPreview"
-      :done-route="doneRoute"
-      :done-override="value ? value.doneOverride : null"
-      :show-errors="false"
-      @update:value="$emit('input', $event)"
-      @error="onYamlError"
-    />
-
-    <component
-      :is="showComponent"
-      v-else
-      ref="comp"
-      v-model:value="value"
-      v-bind="$data"
-      :done-params="doneParams"
-      :done-route="doneRoute"
-      :mode="mode"
-      :initial-value="initialModel"
-      :live-value="liveModel"
-      :real-mode="realMode"
-      :class="{'flex-content': flexContent}"
-      @update:value="$emit('input', $event)"
-      @update:mode="setMode"
-      @set-subtype="setSubtype"
-    />
-
-    <button
-      v-if="isView"
-      v-shortkey.once="['shift','d']"
-      :data-testid="componentTestid + '-detail'"
-      class="hide"
-      @shortkey="keyAction('goToDetail')"
-    />
-    <button
-      v-if="isView"
-      v-shortkey.once="['shift','c']"
-      :data-testid="componentTestid + '-config'"
-      class="hide"
-      @shortkey="keyAction('goToViewConfig')"
-    />
-    <button
-      v-if="isView"
-      v-shortkey.once="['shift','y']"
-      :data-testid="componentTestid + '-yaml'"
-      class="hide"
-      @shortkey="keyAction('goToViewYaml')"
-    />
-    <button
-      v-if="isView"
-      v-shortkey.once="['shift','e']"
-      :data-testid="componentTestid + '-edit'"
-      class="hide"
-      @shortkey="keyAction('goToEdit')"
-    />
-  </div>
-</template>
-
-<style lang='scss' scoped>
-.flex-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-.cru__errors {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--header-bg);
-}
-</style>