dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.1

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

@@ -131,5 +131,6 @@ export default {
   <img
     v-bind="$attrs"
     :src="pathToBrandedImage"
+    style="height: 50px;"
   >
 </template>

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

@@ -159,7 +159,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--default-active-text);
+    color: var(--primary);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--border);

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);
@@ -369,6 +369,7 @@ export default {
       }
 
       .CodeMirror-lines {
+        background-color: var(--input-bg);
         color: var(--input-text);
         padding: 0;
 
@@ -417,7 +418,7 @@ export default {
 
   .code-mirror {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: 0 !important;
 
     .escape-text {
       font-size: 12px;
@@ -457,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 {
@@ -497,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>

package/components/ConfigMapSettings/Settings.vue

@@ -0,0 +1,377 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { set, get } from '@shell/utils/object';
+import { _EDIT } from '@shell/config/query-params';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import { TextAreaAutoGrow } from '@components/Form/TextArea';
+import Taints from '@shell/components/form/Taints.vue';
+import UnitInput from '@shell/components/form/UnitInput.vue';
+import { Banner } from '@components/Banner';
+import { Group, Setting } from '@shell/components/ConfigMapSettings/index.vue';
+
+interface Option {
+  label: string,
+  value: string,
+}
+
+type SettingDisplay = Partial<Setting> & {
+  children?: Record<string, Setting>,
+  name: string,
+  options?: Option[]
+  label: string,
+  description: string,
+  tooltipLabel?: string,
+  infoLabel?: string,
+  placeholderLabel?: string,
+}
+
+interface DataType {
+  isGroupExpanded: Record<string, boolean>;
+}
+
+export default {
+
+  name: 'Settings',
+
+  emits: ['update:value'],
+
+  components: {
+    LabeledInput,
+    LabeledSelect,
+    KeyValue,
+    Checkbox,
+    Banner,
+    Taints,
+    TextAreaAutoGrow,
+    UnitInput,
+  },
+
+  props: {
+    settings: {
+      type:     Object as PropType<Record<string, Setting>>,
+      required: true
+    },
+
+    groups: {
+      type:    Array as PropType<Group[]>,
+      default: () => [],
+    },
+
+    values: {
+      type:     Object,
+      required: true,
+    },
+
+    labelKeyPrefix: {
+      type:    String,
+      default: 'settings'
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+  },
+
+  data(): DataType {
+    return { isGroupExpanded: this.groups.reduce((acc, { name, expanded }) => ({ ...acc, [name]: !!expanded }), {}) };
+  },
+
+  computed: {
+    settingsDisplay(): SettingDisplay[] {
+      // Init settingsDisplay with flat settings
+      const out = Object.keys(this.settings)
+        .filter((name) => !this.groups.find((g) => g.children.includes(name)))
+        .reduce((acc, name) => [
+          ...acc,
+          {
+            ...this.settings[name],
+            name,
+            options:          this.settings[name].items?.map(({ value }) => ({ value, label: this.display(`${ name }.options.${ value }`, 'label') })),
+            label:            this.display(name, 'label'),
+            description:      this.display(name, 'description'),
+            tooltipLabel:     this.settings[name].tooltip ? this.display(name, 'tooltip') : '',
+            infoLabel:        this.settings[name].info ? this.display(name, 'info') : '',
+            placeholderLabel: this.settings[name].placeholder ? this.display(name, 'placeholder') : '',
+            class:            this.settings[name].class || 'span-4'
+          }
+        ], [] as SettingDisplay[]);
+
+      // Add grouped settings
+      this.groups.forEach((group) => {
+        out.push({
+          ...group,
+          label:       this.display(group.name, 'label'),
+          description: this.display(group.name, 'description'),
+          children:    group.children.reduce((acc, name) => ({
+            ...acc,
+            [name]: this.settings[name]
+          }), {})
+        });
+      });
+
+      return out.sort((a, b) => (a.weight || 0) - (b.weight || 0) || (a.label || '').localeCompare(b.label || ''));
+    },
+  },
+
+  methods: {
+    get(item: SettingDisplay) {
+      return get(this.values, item.path);
+    },
+
+    set(item: SettingDisplay, value: any) {
+      set(this.values, item.path, value);
+
+      this.update();
+    },
+
+    update() {
+      this.$emit('update:value', this.values);
+    },
+
+    display(name: string, key: 'label' | 'description' | 'tooltip' | 'info' | 'placeholder' | 'add') {
+      return this.t(`${ this.labelKeyPrefix }.${ name }.${ key }`, {}, true);
+    },
+
+    toggleGroup(item: SettingDisplay) {
+      if (item.children) {
+        this.isGroupExpanded[item.name] = !this.isGroupExpanded[item.name];
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="settings-container">
+    <div
+      v-for="item in settingsDisplay"
+      :key="item.name"
+      class="setting-row"
+      :class="{ box: item.children }"
+      :data-testid="`cm-settings-row-${ item.name }`"
+    >
+      <div class="header">
+        <div
+          class="title"
+          :class="{ clickable: item.children }"
+          :tabindex="item.children ? 0 : undefined"
+          :role="item.children ? 'button' : undefined"
+          @click="toggleGroup(item)"
+          @keydown.space.enter.stop.prevent="toggleGroup(item)"
+        >
+          <i
+            v-if="item.children"
+            :class="{
+              ['icon icon-chevron-right']: !isGroupExpanded[item.name],
+              ['icon icon-chevron-down']: isGroupExpanded[item.name],
+            }"
+          />
+          <component
+            :is="item.children ? 'h2' : 'h3'"
+            v-if="item.label"
+            class="label"
+          >
+            {{ item.label }}
+            <i
+              v-if="item.tooltip"
+              v-clean-tooltip="item.tooltipLabel"
+              class="icon icon-info"
+            />
+          </component>
+        </div>
+
+        <div
+          v-if="item.description && item.type !== 'boolean'"
+          class="description mt-10"
+        >
+          <label
+            class="text-label"
+            :aria-describedby="item.description"
+          >
+            {{ item.description }}
+          </label>
+        </div>
+
+        <Banner
+          v-if="item.info"
+          color="warning"
+          :label="item.infoLabel"
+        />
+      </div>
+
+      <div
+        v-if="!item.children || isGroupExpanded[item.name]"
+        class="body mt-10"
+      >
+        <div
+          v-if="item.children"
+          class="group mt-10"
+          :data-testid="`cm-settings-group-body-${ item.name }`"
+        >
+          <Settings
+            :settings="item.children"
+            :values="values"
+            :mode="mode"
+            :label-key-prefix="labelKeyPrefix"
+            @update:value="update"
+          />
+        </div>
+
+        <div
+          v-else
+          class="row simple"
+        >
+          <div
+            class="col"
+            :class="item.class"
+          >
+            <template v-if="item.items?.length">
+              <LabeledSelect
+                :data-testid="`cm-settings-field-${ item.type === 'array' ? 'array' : item.type }-${ item.name }`"
+                :value="get(item)"
+                :label="item.label"
+                :placeholder="item.placeholderLabel"
+                :mode="mode"
+                :multiple="item.type === 'array'"
+                :options="item.options"
+                :option-key="'value'"
+                :reduce="(opt: Option)=>opt.value"
+                @update:value="set(item, $event)"
+              />
+            </template>
+
+            <template v-else-if="item.type === 'object'">
+              <TextAreaAutoGrow
+                v-if="item.handler === 'Textarea'"
+                :data-testid="`cm-settings-field-${ item.type }-${ item.handler }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item) || ''"
+                :min-height="10"
+                :mode="mode"
+                @update:value="set(item, $event)"
+              />
+              <KeyValue
+                v-else-if="item.handler === 'KeyValue'"
+                :data-testid="`cm-settings-field-${ item.type }-${ item.handler }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :read-allowed="false"
+                :add-icon="'icon-plus'"
+                :add-label="display(item.name, 'add')"
+                :add-class="'btn-sm'"
+                @update:value="set(item, $event)"
+              />
+              <Taints
+                v-else-if="item.handler === 'Taints'"
+                :data-testid="`cm-settings-field-${ item.type }-${ item.handler }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :title="' '"
+                :add-icon="'icon-plus'"
+                :add-class="'btn-sm'"
+                @update:value="set(item, $event)"
+              />
+            </template>
+
+            <template v-else-if="item.type === 'string'">
+              <LabeledInput
+                :data-testid="`cm-settings-field-${ item.type }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :label="item.label"
+                :placeholder="item.placeholderLabel"
+                @update:value="set(item, $event)"
+              />
+            </template>
+
+            <template v-else-if="item.type === 'number'">
+              <UnitInput
+                v-if="item.handler === 'UnitInput'"
+                :data-testid="`cm-settings-field-${ item.type }-${ item.handler }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :suffix="t('suffix.sec')"
+                :label="item.label"
+                :placeholder="item.placeholderLabel"
+                min="0"
+                @update:value="set(item, $event)"
+              />
+              <LabeledInput
+                v-else
+                :data-testid="`cm-settings-field-${ item.type }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :label="item.label"
+                :placeholder="item.placeholderLabel"
+                class="input"
+                type="number"
+                @update:value="set(item, $event)"
+              />
+            </template>
+
+            <template v-else-if="item.type === 'boolean'">
+              <Checkbox
+                :data-testid="`cm-settings-field-${ item.type }-${ item.name }`"
+                :aria-label="t(`${ labelKeyPrefix }.fields.ariaLabel`, { name: item.label })"
+                :value="get(item)"
+                :mode="mode"
+                :label="item.description"
+                @update:value="set(item, $event)"
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+  .settings-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .setting-row {
+      display: flex;
+      flex-direction: column;
+
+      .header {
+        .title {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 10px;
+          width: fit-content;
+
+          &:focus-visible {
+            @include focus-outline;
+          }
+
+          .label {
+            margin: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  .box {
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border);
+    padding: 15px;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+</style>