dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/ActionDropdown.vue

@@ -212,7 +212,7 @@ export default {
       border: 1px solid var(--dropdown-border);
       padding: 0px;
       text-align: left;
-      border-radius: 4px;
+      border-radius: 2px;
 
       LI {
         padding: 10px;

package/components/ActionMenuShell.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 
@@ -18,6 +18,7 @@ type RcDropdownMenuComponentProps = {
   dataTestid?: string;
   resource: Object;
   customActions?: DropdownOption[];
+  showIcon: Boolean;
 }
 
 const props = defineProps <RcDropdownMenuComponentProps>();
@@ -83,17 +84,12 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
 const options = computed(() => store.getters['action-menu/optionsArray']);
 
 const menuOptions = () => {
-
   if (props.customActions && props.customActions.length > 0) {
     return props.customActions;
   }
 
   return options.value;
 };
-
-onMounted(() => {
-})
-
 </script>
 
 <template>
@@ -106,6 +102,6 @@ onMounted(() => {
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"
-    :showIcon="false"
+    :showIcon="showIcon"
   />
 </template>

package/components/AppModal.vue

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import {
   DEFAULT_FOCUS_TRAP_OPTS,
-  useBasicSetupFocusTrap,
   getFirstFocusableElement,
   useWatcherBasedSetupFocusTrapWithDestroyIncluded
 } from '@shell/composables/focusTrap';
@@ -86,20 +85,13 @@ export default defineComponent({
       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,
-    },
+      default: undefined,
+    }
   },
   computed: {
     modalWidth(): string {
@@ -126,7 +118,7 @@ export default defineComponent({
         width: this.modalWidth,
         ...this.stylesPropToObj,
       };
-    },
+    }
   },
   setup(props) {
     if (props.triggerFocusTrap) {
@@ -150,19 +142,10 @@ 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;
+      // prop used to immediately trigger the focus trap when a proper watch variable is not required
+      const autoTriggerFocusTrapWatcher = ref(true);
 
-      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => this.focusTrapWatcherBasedVariable, '#modal-container-element', opts, true);
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => props.focusTrapWatcherBasedVariable ?? autoTriggerFocusTrapWatcher, '#modal-container-element', opts, true);
     }
   },
   mounted() {
@@ -182,13 +165,9 @@ export default defineComponent({
       }
     },
     close(event: MouseEvent) {
-      console.log('close');
-      
       if (
         this.$refs.modalRef
       ) {
-        console.log('clickcolse');
-        
         this.$emit('close');
       }
       // this.$emit('close');
@@ -231,6 +210,8 @@ export default defineComponent({
           :class="customClass"
           class="modal-container"
           :style="modalStyles"
+          role="dialog"
+          aria-modal="true"
           @click.stop
         >
         <div

package/components/AsyncButton.vue

@@ -314,11 +314,13 @@ export default defineComponent({
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
       :class="{icon: true, 'icon-lg': true, [displayIcon]: true, 'mr-0': isManualRefresh}"
+      :alt="t('asyncButton.alt.iconAlt')"
     />
     <span
       v-if="labelAs === 'text' && displayLabel"
       v-clean-tooltip="tooltip"
       v-clean-html="displayLabel"
+      data-testid="async-btn-display-label"
     />
   </button>
 </template>

package/components/BrandImage.vue

@@ -79,56 +79,37 @@ export default {
     },
 
     pathToBrandedImage() {
-
-      console.log(this.fileName, ' this.fileName;')
-
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
         if (this.theme === 'dark' && this.uiLogoDark) {
-
-          console.log(this.uiLogoDark, ' this.uiLogoDark;')
-          
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
-          console.log(this.uiLogoLight, ' this.uiLogoLight;')
-
           return this.uiLogoLight;
         }
       }
 
       if (this.fileName === 'banner.svg') {
         if (this.theme === 'dark' && this.uiBannerDark) {
-          console.log(this.uiBannerDark, ' this.uiBannerDark;')
-
           return this.uiBannerDark;
         }
 
         if (this.uiBannerLight) {
-          console.log(this.uiBannerLight, ' this.uiBannerLight;')
-
           return this.uiBannerLight;
         }
       }
 
       if (this.fileName === 'login-landscape.svg') {
         if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
-          console.log(this.uiLoginBackgroundDark, ' this.uiLoginBackgroundDark;')
-
           return this.uiLoginBackgroundDark;
         }
 
         if (this.uiLoginBackgroundLight) {
-          console.log(this.uiLoginBackgroundLight, ' this.uiLoginBackgroundLight;')
-
           return this.uiLoginBackgroundLight;
         }
       }
 
       if (!this.brand) {
-
-        console.log(this.defaultPathToBrandedImage, ' this.defaultPathToBrandedImage;')
-
         return this.defaultPathToBrandedImage;
       } else {
         if (this.theme === 'dark' || this.dark) {
@@ -140,8 +121,6 @@ export default {
           return require(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
         } catch {}
 
-        console.log(this.defaultPathToBrandedImage, ' this.defaultPathToBrandedImage;')
-
         return this.defaultPathToBrandedImage;
       }
     },

package/components/ButtonDropdown.vue

@@ -266,7 +266,9 @@ export default {
     :deep() .vs__dropdown-toggle .vs__actions {
       &:after {
         color: var(--accent-btn-hover-text);
-        padding-top: 10px;
+        // padding-top: 10px;
+        display: flex;
+        align-items: center;
       }
     }
   }

package/components/Certificates.vue

@@ -139,6 +139,10 @@ export default defineComponent({
       color="error"
       :label="expiredData.expired"
     />
+    <!--
+     It would be nicer if this used PaginatedResourceTable and server-side pagination, however...
+     a big sell it sorting by expiration time which is not a server-side property
+    -->
     <ResourceTable
       :loading="$fetchState.pending"
       :schema="schema"
@@ -147,6 +151,7 @@ export default defineComponent({
       :paging-label="'secret.certificate.paging'"
       :paging-params="pagingParams"
       :ignore-filter="true"
+      :hide-manual-refresh-button="true"
     >
       <template #col:certState="{row}">
         <td>

package/components/ClusterIconMenu.vue

@@ -168,7 +168,7 @@ export default {
     text-transform: uppercase;
 
     .custom-color-decoration {
-      height: 4px;
+      height: 0px;
       width: 100%;
       margin: 0 auto;
       position: absolute;

package/components/CodeMirror.vue

@@ -88,7 +88,7 @@ export default {
 
       // fixes https://github.com/rancher/dashboard/issues/13653
       // we can't use the inert HTML prop on the parent because it disables all interaction
-      out.readOnly = this.isDisabled ? 'nocursor' : false;
+      out.readOnly = !!this.isDisabled;
 
       return out;
     },
@@ -228,7 +228,7 @@ export default {
 
     onFocus() {
       this.isCodeMirrorFocused = true;
-      this.$emit('onFocus', true);
+      this.$emit('onFocus', this.isCodeMirrorFocused);
     },
 
     onBlur() {
@@ -323,12 +323,12 @@ export default {
     }
 
     &.as-text-area .codemirror-container{
-      min-height: 40px;
+      min-height: 32px !important;
       position: relative;
       display: block;
       box-sizing: border-box;
       width: 100%;
-      padding: 10px;
+      padding: 8px 10px 0 10px !important;
       background-color: var(--input-bg);
       border-radius: var(--border-radius);
       border: solid var(--border-width) var(--input-border);
@@ -418,7 +418,7 @@ export default {
 
   .code-mirror {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: 0 !important;
 
     .escape-text {
       font-size: 12px;
@@ -458,7 +458,7 @@ export default {
         justify-content: center;
         border: 1px solid transparent;
         color: var(--darker);
-        background-color: var(--overlay-bg);
+        background-color: var(--subtle-overlay-bg);
         font-size: 12px;
 
         .close-indicator {
@@ -498,5 +498,7 @@ export default {
       }
     }
   }
-
+  .CodeMirror-scroll {
+    min-height: 350px;
+  }
 </style>

package/components/CommunityLinks.vue

@@ -1,6 +1,5 @@
 <script>
 import SimpleBox from '@shell/components/SimpleBox';
-import AppModal from '@shell/components/AppModal.vue';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -9,11 +8,11 @@ import { isRancherPrime } from '@shell/config/version';
 import { fetchLinks } from '@shell/config/home-links';
 import { processLink } from '@shell/plugins/clean-html';
 
-// i18n-ignore footer.wechat.title, footer.wechat.modalText, footer.wechat.modalText2
+// i18n-ignore footer.wechat.title
 export default {
   name: 'CommunityLinks',
 
-  components: { SimpleBox, AppModal },
+  components: { SimpleBox },
 
   props: {
     linkOptions: {
@@ -87,10 +86,7 @@ export default {
   },
   methods: {
     show() {
-      this.showWeChatModal = true;
-    },
-    close() {
-      this.showWeChatModal = false;
+      this.$store.dispatch('management/promptModal', { component: 'WechatDialog' });
     }
   },
 };
@@ -146,32 +142,6 @@ export default {
         </a>
       </div>
     </SimpleBox>
-    <app-modal
-      v-if="showWeChatModal"
-      name="wechat-modal"
-      height="auto"
-      :width="640"
-      :trigger-focus-trap="true"
-      @close="close"
-    >
-      <div class="wechat-modal">
-        <h1>{{ t('footer.wechat.modalText') }}</h1>
-        <h1>{{ t('footer.wechat.modalText2') }}</h1>
-        <div class="qr-img" />
-        <div>
-          <button
-            class="btn role-primary"
-            tabindex="0"
-            :aria-label="t('generic.close')"
-            role="button"
-            @click="close"
-            @keydown.enter.stop
-          >
-            {{ t('generic.close') }}
-          </button>
-        </div>
-      </div>
-    </app-modal>
   </div>
 </template>
 
@@ -188,29 +158,4 @@ export default {
   .support-link:not(:last-child) {
     margin-bottom: 15px;
   }
-
-  .wechat-modal {
-    margin: 60px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .link {
-    cursor: pointer;
-  }
-
-  .btn {
-    margin: 20px auto 0;
-  }
-
-  .qr-img {
-    background-image: url('../assets/images/wechat-qr-code.jpg');
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-    height: 128px;
-    width: 128px;
-    margin: 15px auto 10px;
-  }
 </style>