dashboard-shell-shell 1.0.113 → 1.0.115

package/components/ModalWithCard.vue

@@ -65,7 +65,6 @@ export default {
     v-bind="$attrs"
     class="modal"
     data-testid="mvc__card"
-    :trigger-focus-trap="true"
     @close="$emit('finish', $event)"
   >
     <Card
@@ -133,7 +132,6 @@ export default {
 
   &.card-container {
     box-shadow: none;
-    padding: 14px;
   }
 }
 </style>

package/components/MoveModal.vue

@@ -93,7 +93,6 @@ export default {
     :name="modalName"
     :width="440"
     height="auto"
-    :trigger-focus-trap="true"
     @close="close"
   >
     <Loading v-if="$fetchState.pending" />

package/components/PromptChangePassword.vue

@@ -42,7 +42,7 @@ export default {
     custom-class="change-password-modal"
     data-testid="change-password__modal"
     name="password-modal"
-    :width="700"
+    :width="500"
     :height="465"
     :trigger-focus-trap="true"
     @close="show(false)"

package/components/PromptModal.vue

@@ -13,11 +13,7 @@ export default {
   components: { AppModal },
 
   data() {
-    return {
-      opened:            false,
-      backgroundClosing: null,
-      componentRendered: false
-    };
+    return { opened: false, backgroundClosing: null };
   },
 
   computed: {
@@ -58,15 +54,10 @@ export default {
   watch: {
     showModal(show) {
       this.opened = show;
-    }
+    },
   },
 
   methods: {
-    onSlotComponentMounted() {
-      // variable for the watcher based focus-trap
-      // so that we know when the component is rendered
-      this.componentRendered = true;
-    },
     close() {
       if (!this.opened) {
         return;
@@ -78,7 +69,6 @@ export default {
         this.backgroundClosing();
       }
 
-      this.componentRendered = false;
       this.opened = false;
     },
 
@@ -95,8 +85,6 @@ export default {
     v-if="opened && component"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    :trigger-focus-trap-watcher-based="true"
-    :focus-trap-watcher-based-variable="componentRendered"
     @close="close()"
   >
     <component
@@ -104,7 +92,6 @@ export default {
       :is="component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
-      @vue:mounted="onSlotComponentMounted"
       @close="close()"
     />
   </app-modal>

package/components/PromptRemove.vue

@@ -12,7 +12,6 @@ import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations
 import { CATALOG } from '@shell/config/types';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import AppModal from '@shell/components/AppModal.vue';
-import { translateError } from '@shell/utils/error';
 
 export default {
   name: 'PromptRemove',
@@ -214,7 +213,6 @@ export default {
   },
 
   methods: {
-    translateError,
     resourceNames,
     escapeHtml,
     close() {
@@ -338,10 +336,9 @@ export default {
     v-if="showModal"
     custom-class="remove-modal"
     name="promptRemove"
-    :width="460"
+    :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    :trigger-focus-trap="true"
     @close="close"
   >
     <Card
@@ -350,11 +347,6 @@ export default {
     >
       <template #title>
         <h4 class="text-default-text">
-          <img
-          src="@shell/assets/images/promp-yellow.svg"
-          class="img-span"
-          alt=""
-        >
           {{ t('promptRemove.title') }}
         </h4>
       </template>
@@ -362,7 +354,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, null, t)"
+              v-clean-html="resourceNames(names, t)"
             />
           </template>
 
@@ -403,14 +395,14 @@ export default {
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
-            {{ translateError(error) }}
+            {{ error }}
           </div>
-          <!-- <div
+          <div
             v-if="!needsConfirm"
             class="text-info mt-20"
           >
             {{ protip }}
-          </div> -->
+          </div>
         </LabeledInput>
         <div v-else-if="!hasCustomRemove">
           <div
@@ -444,7 +436,7 @@ export default {
         <div class="spacer" />
         <AsyncButton
           mode="delete"
-          class="btn ml-10"
+          class="btn bg-error ml-10"
           :disabled="deleteDisabled"
           :data-testid="componentTestid + '-confirm-button'"
           @click="remove"
@@ -468,24 +460,12 @@ export default {
       text-align: right;
     }
 
-    /* .card-actions {
+    .card-actions {
       display: flex;
 
       .spacer {
         flex: 1;
       }
-    } */
+    }
   }
 </style>
-
-<style scoped>
-  .text-default-text{
-    line-height: 20px;
-    margin: 0px;
-    display: flex;
-    align-items: center;
-  }
-  .img-span{
-    margin-right: 8px;
-  }
-</style>

package/components/PromptRestore.vue

@@ -213,7 +213,6 @@ export default {
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
-    :trigger-focus-trap="true"
     @close="close"
   >
     <Card

package/components/ResourceCancelModal.vue

@@ -56,7 +56,6 @@ export default {
     name="cancel-modal"
     :width="440"
     height="auto"
-    :trigger-focus-trap="true"
     @close="cancelCancel"
   >
     <div class="header">

package/components/ResourceDetail/Masthead.vue

@@ -2,8 +2,7 @@
 import { KUBERNETES, PROJECT } from '@shell/config/labels-annotations';
 import { FLEET, NAMESPACE, MANAGEMENT, HELM } from '@shell/config/types';
 import ButtonGroup from '@shell/components/ButtonGroup';
-// import { BadgeState } from '@components/BadgeState';
-import DotState from '@shell/components/DotState.vue';
+import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
@@ -14,9 +13,6 @@ import {
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import TabTitle from '@shell/components/TabTitle';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
-import { useStore } from 'vuex';
 
 // i18n-uses resourceDetail.header.*
 
@@ -30,13 +26,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    // BadgeState,
-    DotState,
-    Banner,
-    ButtonGroup,
-    ExtensionPanel,
-    TabTitle,
-    ActionMenu,
+    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
   },
   props: {
     value: {
@@ -102,19 +92,11 @@ export default {
     }
   },
 
-  setup() {
-    const store = useStore();
-    const { featureDropdownMenu } = useRuntimeFlag(store);
-
-    return { featureDropdownMenu };
-  },
-
   data() {
     return {
       DETAIL_VIEW:       _DETAIL,
       extensionType:     ExtensionPoint.PANEL,
       extensionLocation: PanelLocation.DETAILS_MASTHEAD,
-      Svg:               require('~shell/assets/images/API.svg')
     };
   },
 
@@ -396,33 +378,6 @@ export default {
       return this.shouldHifenize ? ` - ${ displayName }` : displayName;
     },
 
-    demoDisplay() {
-      const product = this.$store.getters['productId'];
-
-      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this.location.params.resource);
-
-      if (productId === undefined) {
-        return '';
-      }
-      const parts = productId.split('::');
-      const newString = 'root';
-
-      if (!parts?.includes(newString)) {
-        parts.unshift(newString); // 将字符串添加到数组第一位
-      }
-
-      const partsEn = parts.map((item) => {
-        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
-      });
-
-      return partsEn;
-    },
-    menuIcon() {
-      const product = this.$store.getters['productId'];
-
-      return this.$store.getters['type-map/groupsForVirTypes'](product, this.location.params.resource);
-    },
-
     location() {
       const { parent } = this;
 
@@ -469,81 +424,10 @@ export default {
 
 <template>
   <div class="masthead">
-    <div class="title">
-      <!-- 创建api密钥不需要面包屑 -->
-      <div
-        v-if="!(parentRouteOverride === 'account' && resource=== 'token')"
-        class="excram-list"
-      >
-        <span
-          v-for="(item,index) in demoDisplay"
-          :key="index"
-        >
-          <span>{{ item }}</span>
-          <span>/</span>
-        </span>
-        <span class="excram-last-name">
-          {{ (realMode === 'view'? '查看': realMode === 'edit' ? '编辑':'创建') + parent.displayName }}
-        </span>
-      </div>
     <header>
       <div class="title">
         <div class="primaryheader">
-          <span class="primary-title">
-              <!-- <nuxt-link
-                v-if="location"
-                :to="location"
-              >
-                {{ parent.displayName }}:
-              </nuxt-link> -->
-              <span class="detailIcon-span">
-                <img
-                  v-if="parentRouteOverride === 'account' && resource=== 'token'"
-                  :src="Svg"
-                  style="margin-top: 4px; margin-left: 5px;"
-                >
-                <i
-                  v-else
-                  :class="'icon-'+ menuIcon + ' detailIcon'"
-                />
-              </span>
-              <span class="detailIcon-span-title">{{ realMode=== 'create'? '创建': '' }}{{ parent.displayName }}{{ realMode=== 'create'? '': '名称:' }}</span>
-              <span v-if="realMode !== 'create'">
-                <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
-                <t
-                  v-else
-                  :k="'resourceDetail.header.' + realMode"
-                  :subtype="resourceSubtype"
-                  :name="displayName"
-                  :escapehtml="false"
-                />
-              </span>
-              <DotState
-                v-if="!isCreate && parent.showState"
-                class="masthead-state"
-                :value="value"
-              />
-              <span
-                v-if="!isCreate && value.injectionEnabled"
-                class="masthead-istio"
-              >
-                <i
-                  v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
-                  class="icon icon-sm icon-istio"
-                />
-              </span>
-            </span>
-            <span
-              v-if="location"
-              class="valid"
-            >|</span>
-            <router-link
-              v-if="location"
-              :to="location"
-            >
-              返回
-            </router-link>
-          <!-- <h1>
+          <h1>
             <TabTitle
               v-if="isCreate"
               :showChild="false"
@@ -599,9 +483,9 @@ export default {
             >
               <i class="icon icon-external-link" />
             </a>
-          </h1> -->
+          </h1>
         </div>
-        <!-- <div
+        <div
           v-if="!isCreate"
           class="subheader"
         >
@@ -647,7 +531,7 @@ export default {
             </span>
           </span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
-        </div> -->
+        </div>
       </div>
       <slot name="right">
         <div class="actions-container align-start">
@@ -677,28 +561,17 @@ export default {
               class="mr-10"
             />
 
-            <template v-if="featureDropdownMenu">
-              <ActionMenu
-                v-if="isView"
-                button-role="multiAction"
-                button-size="compact"
-                :resource="value"
-                data-testid="masthead-action-menu"
-              />
-            </template>
-            <template v-else>
-              <button
-                v-if="isView"
-                ref="actions"
-                data-testid="masthead-action-menu"
-                aria-haspopup="true"
-                type="button"
-                class="btn role-multi-action actions"
-                @click="showActions"
-              >
-                <i class="icon icon-actions" />
-              </button>
-            </template>
+            <button
+              v-if="isView"
+              ref="actions"
+              data-testid="masthead-action-menu"
+              aria-haspopup="true"
+              type="button"
+              class="btn role-multi-action actions"
+              @click="showActions"
+            >
+              <i class="icon icon-actions" />
+            </button>
           </div>
         </div>
       </slot>
@@ -725,30 +598,42 @@ export default {
     />
 
     <slot />
-    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
   .masthead {
     padding-bottom: 10px;
-    /* border-bottom: 1px solid var(--border); */
+    border-bottom: 1px solid var(--border);
     margin-bottom: 10px;
   }
 
   HEADER {
     margin: 0;
+    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .primaryheader {
     display: flex;
     flex-direction: row;
     align-items: center;
-    font-size:14px;
-    height: 50px;
 
     h1 {
-      margin: 0;
+      margin: 0 0 0 -5px;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .masthead-resource-title {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .masthead-resource-list-link {
+        margin: 5px;
+      }
     }
   }
 
@@ -761,7 +646,8 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text)
+      color: var(--body-text);
+      margin-left: 3px;
     }
   }
 
@@ -770,12 +656,8 @@ export default {
   }
 
   .masthead-state {
+    margin-left: 8px;
     font-size: initial;
-    display: inline-block;
-    position: relative;
-    /* top: -2px; */
-    font-size: 12px;
-    margin-left: 5px;
   }
 
   .masthead-istio {
@@ -798,40 +680,13 @@ export default {
     }
   }
 
-  .resource-external {
-    font-size: 18px;
-  }
-  .excram-list{
-    font-size: 14px;
-    margin-bottom: 20px;
-  }
-  .excram-last-name{
-    color: var(--link);
-  }
-  .valid{
-    color: #d7d7d7;
-    margin: 0px 10px;
-  }
-  .detailIcon-span{
-    width: 24px;
-    height: 24px;
-    display: inline-block;
-    position: relative;
-    background: var(--primary);
-    margin-right: 10px;
-  }
-  .detailIcon{
-    position: absolute;
-    color: #fff;
-    font-size: 38px;
-    left: 4px;
-    top: -2px;
-  }
-  .primary-title{
+  div.actions-container > div.actions {
     display: flex;
-    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
   }
-  .detailIcon-span-title{
-    font-weight: bold;
+
+  .resource-external {
+    font-size: 18px;
   }
 </style>

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

@@ -1,7 +1,6 @@
 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 {
@@ -18,15 +17,12 @@ const mockedStore = () => {
 };
 
 const requiredSetup = () => {
-  const store = createStore({ getters: { 'management/byId': () => jest.fn() } });
-
   return {
     stubs: {
       'router-link': RouterLinkStub,
       LiveDate:      true
     },
-    provide: { store },
-    mocks:   { $store: mockedStore() }
+    mocks: { $store: mockedStore() }
   };
 };
 

package/components/ResourceDetail/index.vue

@@ -384,7 +384,18 @@ export default {
   },
 
   created() {
-    this.configureResource();
+    // eslint-disable-next-line prefer-const
+    const id = this.$route.params.id;
+    const resource = 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);
   },
 
   methods: {
@@ -403,51 +414,6 @@ export default {
     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 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>
@@ -470,10 +436,10 @@ export default {
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
     >
-      <!-- <DetailTop
+      <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
-      /> -->
+      />
     </Masthead>
     <div
       v-if="hasErrors"
@@ -525,7 +491,6 @@ export default {
       :real-mode="realMode"
       :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
-      @update:mode="setMode"
       @set-subtype="setSubtype"
     />