dashboard-shell-shell 3.0.5-test.5 → 3.0.5-test.6

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',
@@ -215,7 +214,6 @@ export default {
   },
 
   methods: {
-    translateError,
     resourceNames,
     escapeHtml,
     close() {
@@ -342,7 +340,7 @@ 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"
@@ -354,11 +352,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>
@@ -390,7 +383,7 @@ export default {
             class="mt-10"
           >
             <span
-              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
             />
           </div>
         </div>
@@ -407,14 +400,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
@@ -427,7 +420,7 @@ export default {
             v-if="error"
             class="text-error mb-10 mt-10"
           >
-          {{ translateError(error) }}
+            {{ error }}
           </div>
         </div>
         <Checkbox
@@ -448,7 +441,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"
@@ -464,32 +457,20 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 100%;
-      // margin-left: 3px;
+      width: 90%;
+      margin-left: 3px;
     }
 
     .actions {
       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/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -89,10 +89,12 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
-      min-height: 40px;
+      margin-bottom: 8px;
+
       .value {
         display: flex;
         flex-direction: row;
+        align-items: center;
 
         &, & * {
           max-width: 100%;

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -53,13 +53,13 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
 
 <template>
   <div class="key-value">
-    <div class="heading h40">
+    <div class="heading">
       <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty text-deemphasized"
+      class="empty mmt-2 text-deemphasized"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
@@ -78,7 +78,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     <div
       v-for="row in visibleRows"
       :key="displayValue(row)"
-      class="row h40"
+      class="row"
     >
       <Rectangle
         v-clean-tooltip="displayValue(row)"
@@ -104,22 +104,18 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    
-    .h40 {
-        min-height: 40px;
-    }
 
     .count {
         margin-left: 24px;
     }
 
     .heading {
+        margin-bottom: 8px;
     }
 
     .row {
         display: block;
         width: 100%;
-        line-height: 40px;
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

package/components/Resource/Detail/Metadata/index.vue

@@ -31,11 +31,10 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 
 <template>
   <SpacedRow
-    class="metadata ppb-5"
+    class="metadata ppb-3"
     v-bind="$attrs"
   >
     <div
-      v-if="identifyingInformation?.length > 0"
       class="identifying-info"
     >
       <IdentifyingInformation :rows="identifyingInformation" />

package/components/Resource/Detail/TitleBar/Title.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="title">
+  <h1 class="title">
     <slot name="default" />
-  </div>
+  </h1>
 </template>
 
 <style lang="scss" scoped>
-  .title {
+  h1.title {
     display: inline-block;
     align-items: center;
     display: flex;
     flex-direction: row;
-    font-size: 14px;
   }
 </style>

package/components/Resource/Detail/TitleBar/index.vue

@@ -13,7 +13,6 @@ import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
-import breadcrumb from '@shell/components/breadcrumb/index.vue'
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -37,8 +36,6 @@ export interface TitleBarProps {
   showViewOptions?: boolean;
 
   onShowConfiguration?: (returnFocusSelector: string) => void;
-  value?: any;
-  parentRouteOverride?: string;
 }
 
 const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
@@ -46,7 +43,7 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  parentRouteOverride, value, resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
@@ -75,42 +72,6 @@ const viewOptions = computed(() => {
   ];
 });
 
-const Svg = require('~shell/assets/images/API.svg')
-
-const parent = computed(() =>{
-  const displayName = value?.parentNameOverride || store.getters['type-map/labelFor'](schema);
-  const product = store.getters['currentProduct'].name;
-
-  const defaultLocation = {
-    name:   'c-cluster-product-resource',
-    params: {
-      resource: resource,
-      product,
-    }
-  };
-
-  const location = value?.parentLocationOverride || defaultLocation;
-
-  if (parentRouteOverride) {
-    location.name = parentRouteOverride;
-  }
-
-  const out = {
-    location
-  };
-
-  return out;
-})
-
-const menuIcon = computed(() => {
-  const product = store.getters['productId'];
-
-  const resources = parent?.location?.params?.resource || ''
-
-  return store.getters['type-map/groupsForVirTypes'](product, resources);
-})
-
-
 watch(
   () => currentView.value,
   () => {
@@ -121,58 +82,33 @@ watch(
 
 <template>
   <div class="title-bar">
-    <breadcrumb :resource="resource"/>
     <Top>
       <Title class="title">
-        <span v-if="menuIcon && parentRouteOverride === 'account' && resource=== 'token'" 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>
-        <div class="resourceTypeLabelCls">
-          {{ resourceTypeLabel }}名称:
-        </div>
-        <span class="resource-name masthead-resource-title">
-          {{ resourceName }}
-        </span>
-        <BadgeState
-          v-if="badge"
-          class="badge-state"
-          :color="badge.color"
-          :label="badge.label"
-        />
-        <span
-          class="valid"
-        >|</span>
         <TabTitle :show-child="false">
-          返回
+          {{ resourceTypeLabel }}
         </TabTitle>
         <router-link
           v-if="resourceTo"
           :to="resourceTo"
           class="resource-link"
         >
-          返回
+          {{ resourceTypeLabel }}:
         </router-link>
         <span
           v-else
           class="resource-text"
         >
-          返回
+          {{ resourceTypeLabel }}:
         </span>
-        <div
-          v-if="description"
-          style="font-size: 12px;margin-left: 16px;"
-          class="bottom description text-deemphasized"
-        >
-          ( {{ description }} )
-        </div>
+        <span class="resource-name masthead-resource-title">
+          {{ resourceName }}
+        </span>
+        <BadgeState
+          v-if="badge"
+          class="badge-state"
+          :color="badge.color"
+          :label="badge.label"
+        />
       </Title>
       <div class="actions">
         <!-- Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet. -->
@@ -198,7 +134,6 @@ watch(
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
-          :showIcon="true"
           button-role="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
@@ -206,6 +141,12 @@ watch(
         />
       </div>
     </Top>
+    <div
+      v-if="description"
+      class="bottom description text-deemphasized"
+    >
+      {{ description }}
+    </div>
     <ExtensionPanel
       :resource="resource"
       :type="ExtensionPoint.PANEL"
@@ -215,27 +156,12 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-.detailIcon-span{
-  width: 24px;
-  height: 24px;
-  display: inline-block;
-  position: relative;
-  background: var(--primary);
-  margin-right: 10px;
-}
-.resourceTypeLabelCls {
-  font-weight: 700;
-}
-.valid{
-  color: #d7d7d7;
-  margin: 0px 10px;
-}
 .title-bar {
   min-width: 740px;
 
   .badge-state {
     font-size: 16px;
-    margin-left: 5px;
+    margin-left: 12px;
     position: relative;
   }
 
@@ -244,20 +170,15 @@ watch(
   }
 
   &:deep() button[data-testid="masthead-action-menu"] {
-    border-radius: 2px;
-    width: 32px;
-    height: 32px;
-    margin-left: 10px;
+    border-radius: 4px;
+    width: 35px;
+    height: 40px;
+    margin-left: 16px;
 
     display: inline-flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background-color: var(--primary);
-
-    a{
-      color: #fff;
-    }
   }
 
   .description {