dashboard-shell-shell 1.0.112 → 1.0.113

package/components/LandingPagePreference.vue

@@ -103,9 +103,6 @@ export default {
 
 <template>
   <div>
-    <p class="set-landing-leadin">
-      {{ t('landing.landingPrefs.body') }}
-    </p>
     <RadioGroup
       id="login-route"
       :value="afterLoginRoute"
@@ -113,6 +110,11 @@ export default {
       :options="routeRadioOptions"
       @update:value="updateLoginRoute"
     >
+      <template #label>
+        <p class="set-landing-leadin">
+          {{ t('landing.landingPrefs.body') }}
+        </p>
+      </template>
       <template #2="{option}">
         <div class="custom-page">
           <RadioButton

package/components/LocaleSelector.vue

@@ -1,11 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
 import Select from '@shell/components/form/Select.vue';
+import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
   name: 'LocalSelector',
 
-  components: { Select },
+  components: {
+    Select,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownTrigger,
+  },
 
   props: {
     mode: {
@@ -65,111 +71,51 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <div
-        v-if="showLocale"
-        role="menu"
-        :aria-label="t('locale.menu')"
-        class="locale-login-container"
-        tabindex="0"
-        @click="openLocaleSelector"
-        @blur.capture="closeLocaleSelector"
-        @keyup.enter="openLocaleSelector"
-        @keyup.space="openLocaleSelector"
-      >
-        <v-dropdown
-          popperClass="localeSelector"
-          :shown="isLocaleSelectorOpen"
-          placement="top"
-          distance="8"
-          skidding="12"
-          :triggers="[]"
-          :autoHide="false"
-          :flip="false"
-          :container="false"
-          @focus.capture="openLocaleSelector"
+      <rc-dropdown v-if="showLocale">
+        <rc-dropdown-trigger
+          data-testid="locale-selector"
+          link
+          class="baseline"
+          :aria-label="t('locale.menu')"
         >
-          <a
-            data-testid="locale-selector"
-            class="locale-chooser"
+          {{ selectedLocaleLabel }}
+          <template
+            v-if="showIcon"
+            #after
           >
-            {{ selectedLocaleLabel }}
-            <i
-              v-if="showIcon"
-              class="icon icon-fw icon-sort-down"
-            />
-          </a>
-          <template #popper>
-            <ul
-              class="list-unstyled dropdown"
-              style="margin: -1px;"
-            >
-              <li
-                v-if="showNone"
-                v-t="'locale.none'"
-                class="hand"
-                tabindex="0"
-                role="menuitem"
-                @click.stop="switchLocale('none')"
-                @keyup.enter.stop="switchLocale('none')"
-                @keyup.space.stop="switchLocale('none')"
-              />
-              <li
-                v-for="(label, name) in availableLocales"
-                :key="name"
-                tabindex="0"
-                role="menuitem"
-                class="hand"
-                @click.stop="switchLocale(name)"
-                @keyup.enter.stop="switchLocale(name)"
-                @keyup.space.stop="switchLocale(name)"
-              >
-                {{ label }}
-              </li>
-            </ul>
+            <i class="icon icon-fw icon-sort-down" />
           </template>
-        </v-dropdown>
-      </div>
+        </rc-dropdown-trigger>
+        <template #dropdownCollection>
+          <rc-dropdown-item
+            v-if="showNone"
+            v-t="'locale.none'"
+            @click="switchLocale('none')"
+          />
+          <rc-dropdown-item
+            v-for="(label, name) in availableLocales"
+            :key="name"
+            :lang="name"
+            @click.stop="switchLocale(name)"
+          >
+            {{ label }}
+          </rc-dropdown-item>
+        </template>
+      </rc-dropdown>
     </div>
     <div v-else>
       <Select
         :value="selectedOption"
         :options="localesOptions"
+        :is-lang-select="true"
         @update:value="switchLocale($event)"
       />
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.advanced {
-  user-select: none;
-  padding: 0 5px;
-  line-height: 40px;
-  font-size: 15px;
-  font-weight: 500;
-}
-.content {
-  background: var(--nav-active);
-  padding: 10px;
-  margin-top: 6px;
-  border-radius: 4px;
-}
-
-.hand:focus-visible {
-  @include focus-outline;
-  outline-offset: 4px;
-}
-
-.locale-chooser {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
+<style lang="scss">
+  .baseline {
+    align-items: baseline;
   }
-}
-
-.locale-login-container:focus-visible {
-  @include focus-outline;
-  outline-offset: 2px;
-}
 </style>

package/components/ModalManager.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+
+import AppModal from '@shell/components/AppModal.vue';
+
+const store = useStore();
+
+const isOpen = computed(() => store.getters['modal/isOpen']);
+const component = computed(() => store.getters['modal/component']);
+const componentProps = computed(() => store.getters['modal/componentProps']);
+const resources = computed(() => store.getters['modal/resources']);
+const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
+const modalWidth = computed(() => store.getters['modal/modalWidth']);
+// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
+
+const backgroundClosing = ref<Function | null>(null);
+
+function close() {
+  if (!isOpen.value) return;
+
+  if (backgroundClosing.value) {
+    backgroundClosing.value();
+  }
+
+  store.commit('modal/closeModal');
+}
+
+function registerBackgroundClosing(fn: Function) {
+  backgroundClosing.value = fn;
+}
+</script>
+
+<template>
+  <Teleport to="#modals">
+    <app-modal
+      v-if="isOpen && component"
+      :click-to-close="closeOnClickOutside"
+      :width="modalWidth"
+      :style="{ '--prompt-modal-width': modalWidth }"
+      :trigger-focus-trap="true"
+      tabindex="0"
+      @close="close"
+    >
+      <component
+        :is="component"
+        v-bind="componentProps || {}"
+        data-testid="modal-manager-component"
+        :resources="resources"
+        :register-background-closing="registerBackgroundClosing"
+        @close="close"
+      />
+    </app-modal>
+  </Teleport>
+</template>

package/components/ModalWithCard.vue

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

package/components/MoveModal.vue

@@ -93,6 +93,7 @@ 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="500"
+    :width="700"
     :height="465"
     :trigger-focus-trap="true"
     @close="show(false)"

package/components/PromptModal.vue

@@ -13,7 +13,11 @@ export default {
   components: { AppModal },
 
   data() {
-    return { opened: false, backgroundClosing: null };
+    return {
+      opened:            false,
+      backgroundClosing: null,
+      componentRendered: false
+    };
   },
 
   computed: {
@@ -54,10 +58,15 @@ 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;
@@ -69,6 +78,7 @@ export default {
         this.backgroundClosing();
       }
 
+      this.componentRendered = false;
       this.opened = false;
     },
 
@@ -85,6 +95,8 @@ 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
@@ -92,6 +104,7 @@ export default {
       :is="component"
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
+      @vue:mounted="onSlotComponentMounted"
       @close="close()"
     />
   </app-modal>

package/components/PromptRemove.vue

@@ -12,6 +12,7 @@ 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',
@@ -213,6 +214,7 @@ export default {
   },
 
   methods: {
+    translateError,
     resourceNames,
     escapeHtml,
     close() {
@@ -336,9 +338,10 @@ export default {
     v-if="showModal"
     custom-class="remove-modal"
     name="promptRemove"
-    :width="400"
+    :width="460"
     height="auto"
     styles="max-height: 100vh;"
+    :trigger-focus-trap="true"
     @close="close"
   >
     <Card
@@ -347,6 +350,11 @@ 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>
@@ -354,7 +362,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, t)"
+              v-clean-html="resourceNames(names, null, t)"
             />
           </template>
 
@@ -395,14 +403,14 @@ export default {
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
-            {{ error }}
+            {{ translateError(error) }}
           </div>
-          <div
+          <!-- <div
             v-if="!needsConfirm"
             class="text-info mt-20"
           >
             {{ protip }}
-          </div>
+          </div> -->
         </LabeledInput>
         <div v-else-if="!hasCustomRemove">
           <div
@@ -436,7 +444,7 @@ export default {
         <div class="spacer" />
         <AsyncButton
           mode="delete"
-          class="btn bg-error ml-10"
+          class="btn ml-10"
           :disabled="deleteDisabled"
           :data-testid="componentTestid + '-confirm-button'"
           @click="remove"
@@ -460,12 +468,24 @@ 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,6 +213,7 @@ 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,6 +56,7 @@ export default {
     name="cancel-modal"
     :width="440"
     height="auto"
+    :trigger-focus-trap="true"
     @close="cancelCancel"
   >
     <div class="header">