dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/MoveModal.vue

@@ -1,167 +0,0 @@
-<script>
-import { mapState, mapGetters } from 'vuex';
-import { Card } from '@components/Card';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { MANAGEMENT } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
-import { PROJECT } from '@shell/config/labels-annotations';
-
-export default {
-  emits: ['moving'],
-
-  components: {
-    AsyncButton, Card, LabeledSelect, Loading, AppModal
-  },
-
-  async fetch() {
-    this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });
-  },
-
-  data() {
-    return {
-      modalName: 'move-modal', projects: [], targetProject: null, showModal: false
-    };
-  },
-
-  computed: {
-    ...mapState('action-menu', ['showPromptMove', 'toMove']),
-    ...mapGetters(['currentCluster']),
-
-    excludedProjects() {
-      return this.toMove.filter((namespace) => !!namespace.project).map((namespace) => namespace.project.shortId);
-    },
-
-    projectOptions() {
-      return this.projects.reduce((inCluster, project) => {
-        if (!this.excludedProjects.includes(project.shortId) && project.spec?.clusterName === this.currentCluster.id) {
-          inCluster.push({
-            value: project.shortId,
-            label: project.nameDisplay
-          });
-        }
-
-        return inCluster;
-      }, []);
-    }
-  },
-
-  watch: {
-    showPromptMove(show) {
-      if (show) {
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    }
-  },
-
-  methods: {
-    close() {
-      this.$store.commit('action-menu/togglePromptMove');
-    },
-
-    async move(finish) {
-      const cluster = this.$store.getters['currentCluster'];
-      const clusterWithProjectId = `${ cluster.id }:${ this.targetProject }`;
-
-      const promises = this.toMove.map((namespace) => {
-        namespace.setLabel(PROJECT, this.targetProject);
-        namespace.setAnnotation(PROJECT, clusterWithProjectId);
-
-        return namespace.save();
-      });
-
-      try {
-        this.$emit('moving');
-        await Promise.all(promises);
-        finish(true);
-        this.targetProject = null;
-        this.close();
-      } catch (ex) {
-        finish(false);
-      }
-    }
-  }
-};
-</script>
-<template>
-  <app-modal
-    v-if="showModal"
-    class="move-modal"
-    :name="modalName"
-    :width="440"
-    height="auto"
-    :trigger-focus-trap="true"
-    @close="close"
-  >
-    <Loading v-if="$fetchState.pending" />
-    <Card
-      v-else
-      class="move-modal-card"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4 class="text-default-text">
-          {{ t('moveModal.title') }}
-        </h4>
-      </template>
-      <template #body>
-        <div>
-          {{ t('moveModal.description') }}
-          <ul class="namespaces">
-            <li
-              v-for="(namespace, i) in toMove"
-              :key="i"
-            >
-              {{ namespace.nameDisplay }}
-            </li>
-          </ul>
-        </div>
-        <LabeledSelect
-          v-model:value="targetProject"
-          :options="projectOptions"
-          :label="t('moveModal.targetProject')"
-        />
-      </template>
-      <template #actions>
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          :action-label="t('moveModal.moveButtonLabel')"
-          class="btn bg-primary ml-10"
-          :disabled="!targetProject"
-          @click="move"
-        />
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang='scss'>
-  .move-modal {
-    .namespaces {
-      max-height: 200px;
-      overflow-y: scroll;
-    }
-
-    .move-modal-card {
-        box-shadow: none;
-
-        border-radius: var(--border-radius);
-    }
-
-    .actions {
-      text-align: right;
-    }
-    .card-actions {
-      display: flex;
-      justify-content: center;
-    }
-  }
-</style>

package/components/PromptChangePassword.vue

@@ -1,123 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import ChangePassword from '@shell/components/form/ChangePassword';
-import { Card } from '@components/Card';
-import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
-
-export default {
-  components: {
-    Card, AsyncButton, ChangePassword, AppModal
-  },
-  data() {
-    return {
-      valid: false, password: '', showModal: false
-    };
-  },
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
-  methods:  {
-    show(show) {
-      if (show) {
-        this.showModal = true;
-      } else {
-        this.showModal = false;
-      }
-    },
-    async submit(buttonCb) {
-      try {
-        await this.$refs.changePassword.save();
-        this.show(false);
-        buttonCb(true);
-      } catch (err) {
-        buttonCb(false);
-      }
-    }
-  },
-};
-</script>
-
-<template>
-  <app-modal
-    v-if="showModal"
-    custom-class="change-password-modal"
-    data-testid="change-password__modal"
-    name="password-modal"
-    :width="700"
-    :height="465"
-    :trigger-focus-trap="true"
-    @close="show(false)"
-  >
-    <Card
-      class="prompt-password"
-      :show-highlight-border="false"
-    >
-      <template #title>
-        <h4 class="text-default-text">
-          {{ t("changePassword.title") }}
-        </h4>
-      </template>
-
-      <template #body>
-        <form @submit.prevent>
-          <ChangePassword
-            ref="changePassword"
-            @valid="valid = $event"
-          />
-        </form>
-      </template>
-
-      <template #actions>
-        <!-- type reset is required by lastpass -->
-        <button
-          class="btn role-secondary"
-          role="button"
-          :aria-label="t('changePassword.cancel')"
-          type="reset"
-          @click="show(false)"
-        >
-          {{ t("changePassword.cancel") }}
-        </button>
-        <AsyncButton
-          type="submit"
-          mode="apply"
-          class="btn bg-error ml-10"
-          :disabled="!valid"
-          value="LOGIN"
-          @click="submit"
-        />
-      </template>
-    </Card>
-  </app-modal>
-</template>
-
-<style lang="scss" scoped>
-  .prompt-password {
-    :deep() .card-wrap {
-      display: flex;
-      flex-direction: column;
-
-      .card-body {
-        flex: 1;
-        justify-content: start;
-        & > div {
-          flex: 1;
-          display: flex;
-        }
-      }
-
-      .card-actions {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-      }
-    }
-  }
-
-  .prompt-password {
-    flex: 1;
-    display: flex;
-    form {
-      flex: 1;
-    }
-  }
-</style>

package/components/ResourceList/Masthead-btn.vue

@@ -1,225 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import Favorite from '@shell/components/nav/Favorite';
-import TypeDescription from '@shell/components/TypeDescription';
-import { get } from '@shell/utils/object';
-import { AS, _YAML } from '@shell/config/query-params';
-import ResourceLoadingIndicator from './ResourceLoadingIndicator';
-import TabTitle from '@shell/components/TabTitle';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
-
-/**
- * Resource List Masthead component.
- */
-export default {
-
-  name: 'MastheadResourceList-btn',
-
-  components: {
-    Favorite,
-    TypeDescription,
-    ResourceLoadingIndicator,
-    TabTitle
-  },
-  props: {
-    resource: {
-      type:     String,
-      required: true,
-    },
-
-    schema: {
-      type:    Object,
-      default: null,
-    },
-    typeDisplay: {
-      type:    String,
-      default: null,
-    },
-    isCreatable: {
-      type:    Boolean,
-      default: null,
-    },
-    isYamlCreatable: {
-      type:    Boolean,
-      default: null,
-    },
-    createLocation: {
-      type:    Object,
-      default: null,
-    },
-    yamlCreateLocation: {
-      type:    Object,
-      default: null,
-    },
-
-    createButtonLabel: {
-      type:    String,
-      default: null
-    },
-
-    /**
-     * Inherited global identifier prefix for tests
-     * Define a term based on the parent component to avoid conflicts on multiple components
-     */
-    componentTestid: {
-      type:    String,
-      default: 'masthead'
-    }
-  },
-
-  data() {
-    const params = { ...this.$route.params };
-
-    params.resource = params.resource
-
-    const formRoute = { name: `${ this.$route.name }-create`, params };
-
-    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
-
-    const yamlRoute = {
-      name:  `${ this.$route.name }-create`,
-      params,
-      query: { [AS]: _YAML },
-    };
-
-    const tabList = ['集群配置'];
-    return {
-      formRoute,
-      yamlRoute,
-      hasEditComponent,
-      tabList,
-    };
-  },
-
-  computed: {
-    get,
-    ...mapGetters(['isExplorer', 'currentCluster']),
-
-    _typeDisplay() {
-      if ( this.typeDisplay !== null) {
-        return this.typeDisplay;
-      }
-
-      if ( !this.schema ) {
-        return '?';
-      }
-
-      return this.$store.getters['type-map/labelFor'](this.schema, 99);
-    },
-
-
-    _isYamlCreatable() {
-      if ( this.isYamlCreatable !== null) {
-        return this.isYamlCreatable;
-      }
-
-      return this.schema && this._isCreatable && this.$store.getters['type-map/optionsFor'](this.resource).canYaml;
-    },
-
-    _isCreatable() {
-      // Does not take into account hasEditComponent, such that _isYamlCreatable works
-      if ( this.isCreatable !== null) {
-        return this.isCreatable;
-      }
-
-      // blocked-post means you can post through norman, but not through steve.
-      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
-        return false;
-      }
-
-      return this.$store.getters['type-map/optionsFor'](this.resource).isCreatable;
-    },
-
-    _createLocation() {
-      return this.createLocation || this.formRoute;
-    },
-
-    _yamlCreateLocation() {
-      return this.yamlCreateLocation || this.yamlRoute;
-    },
-
-    _createButtonlabel() {
-      return this.createButtonLabel || this.t('resourceList.head.create');
-    },
-  }
-};
-</script>
-
-<template>
-  <!-- 顶部 header，带有子标题（subheader）样式类 -->
-  <div style="display: flex;width: 100%;">
-
-    <!-- 操作按钮区域 -->
-    <div 
-      v-if="!(tabList.includes(_typeDisplay))"
-      class="actions-container"
-      style="min-height: 32px;align-self: flex-end;margin-right: 10px;"
-    >
-      <slot name="actions">
-        <div class="actions">
-          <slot name="extraActions" />
-
-          <slot name="createButton">
-            <router-link
-              v-if="hasEditComponent && _isCreatable"
-              :to="_createLocation"
-              class="btn role-primary"
-              :data-testid="componentTestid+'-create'"
-            >
-              {{ _createButtonlabel }}
-            </router-link>
-            <router-link
-              v-else-if="_isYamlCreatable"
-              :to="_yamlCreateLocation"
-              class="btn role-primary"
-              :data-testid="componentTestid+'-create-yaml'"
-            >
-              {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
-          </slot>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-
-  header {
-    /* margin-bottom: 20px; */
-  }
-
-  header.with-subheader {
-    /* grid-template-areas:
-      'type-banner type-banner'
-      'title actions'
-      'sub-header sub-header'
-      'state-banner state-banner'; */
-    position: relative;
-    display: flex;
-    margin-bottom: 16px;
-    flex-direction: column;
-  }
-  .excram-list{
-    font-size: 14px;
-    line-height: 22px;
-    margin-bottom: 20px;
-    font-family: 'Microsoft YaHei';
-  }
-  .excram-last-name{
-    color: var(--primary);
-  }
-  .descrip-name{
-    font-size: 26px;
-    font-family: 'Microsoft YaHei';
-  }
-  .masthod-title-description{
-    font-family: 'Microsoft YaHei';
-    margin-top: 20px;
-  }
-  .actions-container{
-    /* display: flex; */
-    /* margin-left: 0px; */
-  }
-</style>

package/components/__tests__/ApplicationCard.test.ts

@@ -1,27 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ApplicationCard from '@shell/components/cards/ApplicationCard.vue';
-
-describe('component: ApplicationCard', () => {
-  const wrapper = mount(ApplicationCard, {
-    slots: {
-      cardIcon:   '<i class="icon icon-fw icon-epinio"></i>',
-      'top-left': '<h1>Routes</h1> <ul><li> <a target="_blank" rel="noopener noreferrer nofollow"> route1 </a> </li> <li><a target="_blank" rel="noopener noreferrer nofollow"> route1 </a></li> </ul>',
-    }
-  });
-
-  it.each([
-    'cardIcon',
-    'top-left',
-    'top-right',
-    'resourcesCount',
-  ])('should have a populated %p slot', (slot) => {
-    const content = '<div>text</div>';
-    const ele = mount(ApplicationCard, { slots: { [slot]: content } });
-
-    expect(ele.find(`[data-testid="${ slot }-section"`).find('div').html()).toContain(content);
-  });
-
-  it('should have card-icon slot with an icon', () => {
-    expect(wrapper.find('[data-testid="cardIcon-section"]').find('i').classes()).toContain('icon-epinio');
-  });
-});

package/components/cards/ApplicationCard.vue

@@ -1,145 +0,0 @@
-<script>
-export default {};
-</script>
-
-<template>
-  <div class="application-card mt-20">
-    <div
-      class="application-card-icon"
-      data-testid="cardIcon-section"
-    >
-      <slot name="cardIcon" />
-    </div>
-    <div class="application-card-details">
-      <div class="application-card-details-top">
-        <div data-testid="top-left-section">
-          <slot name="top-left" />
-        </div>
-        <div data-testid="top-right-section">
-          <slot name="top-right" />
-        </div>
-      </div>
-      <div
-        class="application-card-details-bottom"
-        data-testid="resourcesCount-section"
-      >
-        <slot name="resourcesCount" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
- .application-card {
-    display: flex;
-    flex-direction: row;
-    outline: 1px solid var(--border);
-    border-radius: var(--border-radius);
-
-    @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-      flex-direction: column;
-    }
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-
-      i {
-        font-size: 60px;
-        opacity: 0.7;
-      }
-
-      @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-        padding-bottom: 0;
-      }
-    }
-
-    &-details {
-      display: flex;
-      flex-direction: column;
-      padding: 20px;
-      width: 100%;
-      flex: 1;
-
-      &-top, &-bottom {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      &-top {
-        display: flex;
-        align-items: center;
-        padding: 20px 0;
-        border-bottom: 1px solid var(--border );
-
-        & > div {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-
-          h1 {
-            margin: 0;
-            padding: 0;
-            font-size: $font-size-h2
-          }
-
-          ul {
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-             flex-direction: column;
-            }
-
-            li {
-              list-style: none;
-              padding-right: 16px;
-            }
-          }
-        }
-
-        & > div:nth-child(2) {
-          display: flex;
-          padding: 5px 0;
-          align-items: flex-end;
-
-          span {
-            padding: 5px 0;
-          }
-        }
-      }
-
-      &-bottom {
-        display: grid;
-        grid-auto-columns: minmax(0, 1fr);
-        grid-auto-flow: column;
-        grid-gap: 10px;
-        padding: 30px 0 15px 0;
-        font-size: 18px;
-        font-weight: 300;
-
-        div {
-          display: flex;
-          place-content: center;
-          border-right: 1px solid var(--border);
-          padding-right: 10px;
-
-          &:last-child {
-            border-right: 0;
-            padding-right: 0%;
-          }
-        }
-      }
-
-      @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-        padding-top: 0;
-      }
-    }
- }
-</style>