dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/rancherResourceDetail/__tests__/Masthead.test.ts

@@ -1,65 +0,0 @@
-import { mount, RouterLinkStub } from '@vue/test-utils';
-import { _VIEW } from '@shell/config/query-params';
-import Masthead from '@shell/components/ResourceDetail/Masthead.vue';
-import { createStore } from 'vuex';
-
-const mockedStore = () => {
-  return {
-    getters: {
-      currentStore:              () => 'current_store',
-      currentProduct:            { inStore: 'cluster' },
-      isExplorer:                false,
-      currentCluster:            {},
-      'type-map/labelFor':       jest.fn(),
-      'type-map/optionsFor':     jest.fn(),
-      'current_store/schemaFor': jest.fn(),
-    },
-  };
-};
-
-const requiredSetup = () => {
-  const store = createStore({ getters: { 'management/byId': () => jest.fn() } });
-
-  return {
-    stubs: {
-      'router-link': RouterLinkStub,
-      LiveDate:      true
-    },
-    provide: { store },
-    mocks:   { $store: mockedStore() }
-  };
-};
-
-describe('component: Masthead', () => {
-  it.each([
-    ['hidden', '', false, { displayName: 'admin', location: { id: 'resource-id' } }, false, false],
-    ['plain-text', 'admin', true, { displayName: 'admin', location: null }, false, true],
-    ['link', 'foo', true, { displayName: 'foo', location: { id: 'resource-id' } }, true, false],
-  ])('"Created By" should be %p, with text: %p', (
-    _,
-    text,
-    showCreatedBy,
-    createdBy,
-    showLink,
-    showPlainText,
-  ) => {
-    const wrapper = mount(Masthead, {
-      props: {
-        mode:  _VIEW,
-        value: {
-          showCreatedBy,
-          createdBy,
-        },
-      },
-      global: { ...requiredSetup() }
-    });
-
-    const container = wrapper.find('[data-testid="masthead-subheader-createdBy"]');
-    const link = wrapper.find('[data-testid="masthead-subheader-createdBy-link"]');
-    const plainText = wrapper.find('[data-testid="masthead-subheader-createdBy_plain-text"]');
-
-    expect(link.exists()).toBe(showLink);
-    expect(plainText.exists()).toBe(showPlainText);
-    expect(showLink || showPlainText ? container.element.textContent : '').toContain(text);
-  });
-});

package/components/rancherResourceDetail/index.vue

@@ -1,591 +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 { FLEET, 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/fleet/ForceDirectedTreeChart';
-import { checkSchemasForFindAllHash } from '@shell/utils/auth';
-import { stringify } from '@shell/utils/error';
-import { Banner } from '@components/Banner';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
-
-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;
-    const cloneParams = clone(params)
-    let resourceType = this.resourceOverride || cloneParams.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 {
-      if ( as === _GRAPH ) {
-        const graphSchema = await checkSchemasForFindAllHash({
-          cluster: {
-            inStoreType: 'management',
-            type:        FLEET.CLUSTER
-          },
-          bundle: {
-            inStoreType: 'management',
-            type:        FLEET.BUNDLE,
-            opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
-          },
-
-          bundleDeployment: {
-            inStoreType: 'management',
-            type:        FLEET.BUNDLE_DEPLOYMENT
-          }
-
-        }, this.$store);
-
-        this.canViewChart = graphSchema.cluster && graphSchema.bundle && graphSchema.bundleDeployment;
-      }
-
-      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,
-      canViewChart:    true,
-      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);
-    },
-    /**
-     * 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 paramsResource = this.$route.params.resource
-      const routerResource = clone(this.$route.params.resource)
-      const resource = resourceOverride || this.resourceOverride || routerResource;
-      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 组件 -->
-  <Loading v-if="$fetchState.pending || notFound" />
-
-  <!-- 数据加载完成且资源存在时 -->
-  <div style="padding: 20px 0 20px 20px;height: 100%;" v-else>
-
-    <!-- 顶部 Masthead 区域 -->
-    <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 -->
-      <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 && canViewChart"
-      :data="chartData"
-      :fdc-config="getGraphConfig"
-    />
-
-    <!-- YAML 查看/编辑模式 -->
-    <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"
-      @update:value="$emit('input', $event)"
-      @error="e=>errors.push(e)"
-    />
-
-    <!-- 动态组件渲染，根据 showComponent 动态选择组件 -->
-    <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;
-}
-</style>