dashboard-shell-shell 1.0.113 → 1.0.114

package/components/ActionDropdown.vue

@@ -222,7 +222,7 @@ export default {
 
           > .divider-inner {
             padding: 0;
-            border-bottom: 0px solid var(--dropdown-divider);
+            border-bottom: 1px solid var(--dropdown-divider);
             width: 125%;
             margin: 0 auto;
           }

package/components/ActionMenu.vue

@@ -305,7 +305,7 @@ export default {
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
     border: 1px solid var(--dropdown-border);
-    border-radius: 3px;
+    border-radius: 5px;
     box-shadow: 0 5px 20px var(--shadow);
 
     LI {
@@ -326,7 +326,7 @@ export default {
 
       &.divider {
         padding: 0;
-        border-bottom: 0px solid var(--dropdown-divider);
+        border-bottom: 1px solid var(--dropdown-divider);
       }
 
       &:not(.divider):hover {

package/components/ActionMenuShell.vue

@@ -89,7 +89,6 @@ const menuOptions = () => {
 
   return options.value;
 };
-
 </script>
 
 <template>

package/components/AppModal.vue

@@ -1,11 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-  DEFAULT_FOCUS_TRAP_OPTS,
-  useBasicSetupFocusTrap,
-  getFirstFocusableElement,
-  useWatcherBasedSetupFocusTrapWithDestroyIncluded
-} from '@shell/composables/focusTrap';
+import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap, getFirstFocusableElement } from '@shell/composables/focusTrap';
 
 export const DEFAULT_ITERABLE_NODE_SELECTOR = 'body;';
 
@@ -85,21 +80,7 @@ export default defineComponent({
     returnFocusFirstIterableNodeSelector: {
       type:    String,
       default: DEFAULT_ITERABLE_NODE_SELECTOR,
-    },
-    /**
-     * trigger focus trap - but watcher based
-     */
-    triggerFocusTrapWatcherBased: {
-      type:    Boolean,
-      default: false,
-    },
-    /**
-     * watcher-based focus trap variable to watch
-     */
-    focusTrapWatcherBasedVariable: {
-      type:    Boolean,
-      default: false,
-    },
+    }
   },
   computed: {
     modalWidth(): string {
@@ -150,19 +131,7 @@ export default defineComponent({
         };
       }
 
-      if (!props.triggerFocusTrapWatcherBased) {
-        useBasicSetupFocusTrap('#modal-container-element', opts);
-      }
-    }
-  },
-  created() {
-    // This usecase is to cover the PromptModal scenario where it's renders a generic component inside.
-    // Due to the architecture of the PromptModal it needs to be handled with a watcher based focus trap
-    // but with a dedicated unmount hook
-    if (this.triggerFocusTrapWatcherBased) {
-      const opts:any = DEFAULT_FOCUS_TRAP_OPTS;
-
-      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => this.focusTrapWatcherBasedVariable, '#modal-container-element', opts, true);
+      useBasicSetupFocusTrap('#modal-container-element', opts);
     }
   },
   mounted() {
@@ -181,14 +150,6 @@ export default defineComponent({
         this.$emit('close');
       }
     },
-    close(event: MouseEvent) {
-      if (
-        this.$refs.modalRef
-      ) {
-        this.$emit('close');
-      }
-      // this.$emit('close');
-    },
     handleEscapeKey(event: KeyboardEvent) {
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
@@ -229,20 +190,8 @@ export default defineComponent({
           :style="modalStyles"
           @click.stop
         >
-        <div
-            class="close-dailog-icon"
-          >
-            <button
-              class="btn btn-sm role-link hide-bar"
-              @click="close"
-            >
-              <i class="icon icon-x" />
-            </button>
-          </div>
-        <div>
           <slot><!--Empty content--></slot>
         </div>
-        </div>
       </div>
     </transition>
   </teleport>
@@ -255,21 +204,18 @@ export default defineComponent({
     left: 0;
     width: 100vw;
     height: 100vh;
-    /* background-color: var(--overlay-bg); */
-    background-color: var(--overlay-model-bg);
+    background-color: var(--overlay-bg);
     display: flex;
     justify-content: center;
     align-items: center;
-    /* z-index: z-index('modalOverlay'); */
-    z-index: 50;
+    z-index: z-index('modalOverlay');
 
     .modal-container {
       background-color: var(--modal-bg);
       border-radius: var(--border-radius);
       max-height: 95vh;
       overflow: auto;
-      border: 0px;
-      position: relative;
+      border: 2px solid var(--modal-border);
     }
   }
 
@@ -282,22 +228,4 @@ export default defineComponent({
   .modal-fade-leave-to {
     opacity: 0;
   }
-  .hide-bar{
-    width: 32px;
-    min-width: 32px !important;
-  }
-  .close-dailog-icon{
-    position: absolute;
-    right: 13px;
-    top: 18px;
-    & > button{
-      color:var(--body-text) !important;
-      min-width: 32px !important;
-      width: 32px !important;
-      & > button:hover{
-        color:var(--body-text) !important;
-      }
-    }
-
-  }
 </style>

package/components/AssignTo.vue

@@ -115,7 +115,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
@@ -158,20 +157,17 @@ export default {
       </template>
 
       <template #actions>
-        <div class="actions-container">
-          <button
-            class="btn role-secondary"
-            @click="close"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-
-          <AsyncButton
-            class="apply-btn"
-            mode="apply"
-            @click="apply"
-          />
-        </div>
+        <button
+          class="btn role-secondary"
+          @click="close"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+
+        <AsyncButton
+          mode="apply"
+          @click="apply"
+        />
       </template>
     </Card>
   </app-modal>
@@ -185,15 +181,5 @@ export default {
     & ::-webkit-scrollbar-corner {
       background: rgba(0,0,0,0);
     }
-
-    .actions-container {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-
-      .apply-btn {
-        margin-left: 20px;
-      }
-    }
   }
 </style>

package/components/AsyncButton.vue

@@ -11,7 +11,6 @@ export const ASYNC_BUTTON_STATES = {
 
 const TEXT = 'text';
 const TOOLTIP = 'tooltip';
-const DISABLED_CLASS_STYLE = 'btn-disabled';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
@@ -153,29 +152,9 @@ export default defineComponent({
         out[`btn-${ this.size }`] = true;
       }
 
-      // while we are waiting for the async button to get
-      // it's callback we want to the button to appear as disabled
-      // but not being actually disabled as need it to be
-      // able to return the keyboard navigation focus back to it
-      // which can't be done while actually disabled, as per
-      // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols
-      if (this.phase === ASYNC_BUTTON_STATES.WAITING) {
-        out[DISABLED_CLASS_STYLE] = true;
-      }
-
-      // used to assist e2e testing mostly when waiting for button to return
-      // to it's normal state/phase
-      if (this.phase === ASYNC_BUTTON_STATES.ACTION) {
-        out['ready-for-action'] = true;
-      }
-
       return out;
     },
 
-    appearsDisabled(): boolean {
-      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
-    },
-
     displayIcon(): string {
       const exists = this.$store.getters['i18n/exists'];
       const t = this.$store.getters['i18n/t'];
@@ -225,6 +204,10 @@ export default defineComponent({
       return this.phase === ASYNC_BUTTON_STATES.WAITING;
     },
 
+    isDisabled(): boolean {
+      return this.disabled || this.phase === ASYNC_BUTTON_STATES.WAITING;
+    },
+
     isManualRefresh() {
       return this.mode === 'manual-refresh';
     },
@@ -249,7 +232,7 @@ export default defineComponent({
 
   methods: {
     clicked() {
-      if ( this.appearsDisabled ) {
+      if ( this.isDisabled ) {
         return;
       }
 
@@ -300,8 +283,8 @@ export default defineComponent({
     :class="classes"
     :name="name"
     :type="type"
-    :disabled="disabled"
-    :aria-disabled="appearsDisabled"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled"
     :tab-index="tabIndex"
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"

package/components/BannerGraphic.vue

@@ -36,7 +36,6 @@ export default {
         data-testid="banner-brand__img"
         file-name="banner.svg"
         :draggable="false"
-        :alt="t('landing.bannerImage')"
       />
     </div>
     <div

package/components/ButtonDropdown.vue

@@ -196,8 +196,7 @@ export default {
     @update:modelValue="$emit('click-action', $event)"
   >
     <template #no-options>
-      暂无数据
-      <!-- <slot name="no-options" /> -->
+      <slot name="no-options" />
     </template>
 
     <template #selected-option="option">
@@ -248,35 +247,16 @@ export default {
   }
 }
 .button-dropdown {
-  /* background: var(--accent-btn); */
-  background: var(--accent-btn-hover);
+  background: var(--accent-btn);
   border: solid 1px var(--link);
   color: var(--link);
   padding: 0;
 
-  &{
-    :deep() .vs__dropdown-toggle .vs__actions,
-    :deep() .vs__selected-options {
-      background: var(--accent-btn-hover);
-    }
-    :deep() .vs__selected-options .vs__selected button {
-      background-color: transparent;
-      color: var(--accent-btn-hover-text);
-    }
-    :deep() .vs__dropdown-toggle .vs__actions {
-      &:after {
-        color: var(--accent-btn-hover-text);
-        padding-top: 10px;
-      }
-    }
-  }
-
   &.vs--open :deep() {
     outline: none;
     box-shadow: none;
   }
 
-
   &:hover {
     :deep() .vs__dropdown-toggle .vs__actions,
     :deep() .vs__selected-options {
@@ -295,7 +275,6 @@ export default {
 
   :deep() > .vs__dropdown-toggle {
     width: 100%;
-    width: 100px;
     display: grid;
     grid-template-columns: 75% 25%;
     border: none;
@@ -304,7 +283,7 @@ export default {
     .vs__actions {
 
       &:after {
-        color: var(--accent-btn-hover-text);
+        color: var(--link);
         line-height: 1;
       }
     }
@@ -318,8 +297,7 @@ export default {
       button {
         border: none;
         background: transparent;
-        color: var(--accent-btn-hover-text);
-        min-width: 83px;
+        color: var(--link);
       }
     }
     .vs__search {

package/components/ButtonGroup.vue

@@ -77,9 +77,6 @@ export default {
       const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
 
       return ariaLabel || tooltip || label || undefined;
-    },
-    isPressed(opt) {
-      return this.value === opt.value;
     }
   }
 };
@@ -100,7 +97,6 @@ export default {
       :disabled="disabled || opt.disabled"
       role="button"
       :aria-label="actionAriaLabel(opt)"
-      :aria-pressed="isPressed(opt)"
       @click="change(opt.value)"
     >
       <slot

package/components/ButtonMultiAction.vue

@@ -30,7 +30,6 @@ const buttonClass = computed(() => {
       class="icon icon-actions"
       :alt="t('sortableTable.tableActionsImgAlt')"
     />
-    <!-- <i style="font-style: normal;">操作</i> -->
   </button>
 </template>
 

package/components/CommunityLinks.vue

@@ -140,7 +140,7 @@ export default {
           :aria-label="t('footer.wechat.title')"
           role="link"
           @click="show"
-          @keydown.enter="show"
+          @keyup.enter="show"
         >
           {{ t('footer.wechat.title') }}
         </a>
@@ -151,7 +151,6 @@ export default {
       name="wechat-modal"
       height="auto"
       :width="640"
-      :trigger-focus-trap="true"
       @close="close"
     >
       <div class="wechat-modal">
@@ -165,7 +164,8 @@ export default {
             :aria-label="t('generic.close')"
             role="button"
             @click="close"
-            @keydown.enter.stop
+            @keyup.enter="close"
+            @keyup.space="close"
           >
             {{ t('generic.close') }}
           </button>

package/components/ConsumptionGauge.vue

@@ -59,11 +59,7 @@ export default {
     usedAsResourceName: {
       type:   Boolean,
       defaut: false
-    },
-    reserveText: {
-      type:   String,
-      defaut: '预留'
-    },
+    }
   },
   computed: {
     displayUnits() {
@@ -95,13 +91,13 @@ export default {
 </script>
 
 <template>
-  <!-- <div class="consumption-gauge">
+  <div class="consumption-gauge">
     <h3 v-if="resourceName && !usedAsResourceName">
       {{ resourceName }}
     </h3>
-    <div class="numbers"> -->
+    <div class="numbers">
       <!-- @slot Optional slot to use as the title rather than showing the resource name -->
-      <!-- <slot
+      <slot
         name="title"
         :amountTemplateValues="amountTemplateValues"
         :formattedPercentage="formattedPercentage"
@@ -122,22 +118,7 @@ export default {
         :color-stops="colorStops"
       />
     </div>
-  </div> -->
-  <div class="consumption-gauge">
-    <div
-      v-if="resourceName && !usedAsResourceName"
-      class="mb-20"
-    >
-      {{ resourceName }}
-    </div>
-    <slot
-      name="content"
-      :amountTemplateValues="amountTemplateValues"
-      :formattedPercentage="formattedPercentage"
-    >
-      <p>{{ formattedPercentage + '(共' + amountTemplateValues.total + ' ' + amountTemplateValues.unit + '，' + reserveText + ' ' + amountTemplateValues.used + ' ' + amountTemplateValues.unit + '）' }}</p>
-    </slot>
-    </div>
+  </div>
 </template>
 
 <style lang="scss">

package/components/CopyToClipboardText.vue

@@ -49,10 +49,9 @@ export default {
     v-if="text"
     class="copy-to-clipboard-text"
     role="button"
+    :aria-label="t('generic.copyToClipboard')"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
-    :aria-label="t('generic.copyToClipboard')"
-    v-bind="$attrs"
     @click="clicked"
     @keyup.space="clicked"
   >

package/components/CruResource.vue

@@ -544,10 +544,7 @@ export default {
                       class="flex-right"
                     >{{ t('generic.moreInfo') }} <i class="icon icon-external-link" /></a>
                   </div>
-                  <hr
-                    v-if="subtype.description"
-                    role="none"
-                  >
+                  <hr v-if="subtype.description">
                   <div
                     v-if="subtype.description"
                     class="description"
@@ -624,14 +621,14 @@ export default {
                   </template>
                 </template>
                 <div class="controls-steps">
-                  <!-- <button
+                  <button
                     v-if="showYaml"
                     type="button"
                     class="btn role-secondary"
                     @click="showPreviewYaml"
                   >
                     <t k="cruResource.previewYaml" />
-                  </button> -->
+                  </button>
                   <template
                     v-if="showPrevious"
                     name="back"
@@ -711,7 +708,7 @@ export default {
               #default
             >
               <div>
-                <!-- <button
+                <button
                   v-if="showYaml"
                   :data-testid="componentTestid + '-yaml'"
                   type="button"
@@ -719,7 +716,7 @@ export default {
                   @click="showPreviewYaml"
                 >
                   <t k="cruResource.previewYaml" />
-                </button> -->
+                </button>
                 <AsyncButton
                   v-if="!showSubtypeSelection"
                   ref="save"
@@ -735,7 +732,7 @@ export default {
       </template>
       <!------ YAML ------>
       <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
-      <!-- <section
+      <section
         v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
@@ -809,7 +806,7 @@ export default {
             </slot>
           </template>
         </ResourceYaml>
-      </section> -->
+      </section>
     </component>
   </section>
 </template>
@@ -909,8 +906,6 @@ form.create-resource-container .cru {
     position: sticky;
     bottom: 0;
     background-color: var(--header-bg);
-    height: $footer-height;
-    box-sizing: border-box;
 
     // Overrides outlet padding
     margin-left: -$space-m;

package/components/CruResourceFooter.vue

@@ -115,12 +115,12 @@ export default {
 <style lang="scss">
 .cru-resource-footer {
   display: flex;
-  justify-content: flex-start;
+  justify-content: flex-end;
   margin-top: 20px;
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-right: 10px;
+    margin-left: 20px;
   }
 }
 

package/components/DashboardOptions.vue

@@ -103,26 +103,24 @@ export default {
 <template>
   <div class="graph-options">
     <div v-if="hasSummaryAndDetail">
-      <ButtonGroup
-        v-model:value="value.type"
-        :options="detailSummaryOptions"
+      <ButtonGroup
+        v-model:value="value.type"
+        :options="detailSummaryOptions"
       />
     </div>
     <div v-else>
       <div />
     </div>
     <div class="range-refresh">
-      <LabeledSelect
-        v-model:value="value.range"
-        :options="rangeOptions"
-        class="gafanana-select"
-        :label="t('graphOptions.range')"
+      <LabeledSelect
+        v-model:value="value.range"
+        :options="rangeOptions"
+        :label="t('graphOptions.range')"
       />
-      <LabeledSelect
-        v-model:value="value.refreshRate"
-        :options="refreshOptions"
-        class="gafanana-select"
-        :label="t('graphOptions.refresh')"
+      <LabeledSelect
+        v-model:value="value.refreshRate"
+        :options="refreshOptions"
+        :label="t('graphOptions.refresh')"
       />
     </div>
   </div>
@@ -133,21 +131,17 @@ export default {
     &, .range-refresh {
       display: flex;
       flex-direction: row;
-      /* justify-content: flex-end; */
+      justify-content: flex-end;
     }
 
     & {
-      /* justify-content: space-between; */
+      justify-content: space-between;
       align-items: center;
     }
 
-    /* .labeled-select {
+    .labeled-select {
         width: 100px;
         margin-left: 10px;
-    } */
-}
-.gafanana-select{
-  width: 300px;
-  margin-left: 10px;
+    }
 }
 </style>

package/components/DetailText.vue

@@ -58,10 +58,6 @@ export default {
   },
 
   computed: {
-    itemLabel() {
-      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : this.t('labels.annotations.singular');
-    },
-
     isBinary() {
       if ( this.binary === null ) {
         return typeof this.value === 'string' && !asciiLike(this.value);
@@ -190,7 +186,6 @@ export default {
       :text="value"
       class="role-tertiary"
       action-color=""
-      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
     />
   </div>
 </template>

package/components/DisableAuthProviderModal.vue

@@ -44,7 +44,6 @@ export default {
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    :trigger-focus-trap="true"
     @close="close"
   >
     <Card