dashboard-shell-shell 1.0.113 → 1.0.114

package/components/ExplorerMembers.vue

@@ -63,7 +63,7 @@ export default {
     }
 
     if (projectRoleTemplateBindingSchema) {
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING, opt: { force: true } }, { root: true })
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
         .then((bindings) => {
           this['projectRoleTemplateBindings'] = bindings;
           this.loadingProjectBindings = false;

package/components/ExplorerProjectsNamespaces.vue

@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, useStore } from 'vuex';
+import { mapGetters } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
@@ -11,13 +11,11 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
-import { escapeHtml } from '@shell/utils/string';
+
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 export default {
   name:       'ListProjectNamespace',
@@ -27,7 +25,6 @@ export default {
     MoveModal,
     ResourceTable,
     ButtonMultiAction,
-    ActionMenu,
   },
   mixins: [ResourceFetch],
 
@@ -61,13 +58,6 @@ export default {
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
-  setup() {
-    const store = useStore();
-    const { featureDropdownMenu } = useRuntimeFlag(store);
-
-    return { featureDropdownMenu };
-  },
-
   data() {
     return {
       loadResources:                [NAMESPACE],
@@ -165,7 +155,7 @@ export default {
     rowsWithFakeNamespaces() {
       const fakeRows = this.projectsWithoutNamespaces.map((project) => {
         return {
-          groupById:        `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
+          groupByLabel:     `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
           isFake:           true,
           mainRowKey:       project.id,
           nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
@@ -176,8 +166,8 @@ export default {
 
       if (this.showMockNotInProjectGroup) {
         fakeRows.push( {
-          groupById:  this.t('resourceTable.groupLabel.notInAProject'),
-          mainRowKey: 'fake-empty',
+          groupByLabel: this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
+          mainRowKey:   'fake-empty',
         });
       }
 
@@ -283,9 +273,6 @@ export default {
     },
     showCreateNsButton() {
       return this.groupPreference !== 'namespace';
-    },
-    projectGroupBy() {
-      return this.groupPreference === 'none' ? null : 'groupById';
     }
   },
   methods: {
@@ -349,10 +336,6 @@ export default {
       return location;
     },
 
-    getProjectActions(group) {
-      return group.rows[0].project;
-    },
-
     showProjectAction(event, group) {
       const project = group.rows[0].project;
 
@@ -376,13 +359,7 @@ export default {
         );
       }
 
-      if ( row.groupById === this.notInProjectKey) {
-        return this.t('resourceTable.groupLabel.notInAProject');
-      }
-
-      const project = row.project?.nameDisplay || row.project?.id || '';
-
-      return this.t('resourceTable.groupLabel.project', { name: escapeHtml(project) }, true);
+      return row.groupByLabel;
     },
 
     projectDescription(group) {
@@ -454,7 +431,6 @@ export default {
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
-      :group-by="projectGroupBy"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
       :loading="loading"
@@ -481,7 +457,7 @@ export default {
               {{ projectDescription(group.group) }}
             </div>
           </div>
-          <div class="right mr-10">
+          <div class="right">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
               class="create-namespace btn btn-sm role-secondary mr-5"
@@ -489,26 +465,13 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
-            <template v-if="featureDropdownMenu">
-              <ActionMenu
-                v-if="showProjectActionButton(group.group)"
-                :resource="getProjectActions(group.group)"
-                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
-              />
-              <div
-                v-else
-                class="invisible"
-              />
-            </template>
-            <template v-else>
-              <ButtonMultiAction
-                class="project-action"
-                :borderless="true"
-                :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
-                :invisible="!showProjectActionButton(group.group)"
-                @click="showProjectAction($event, group.group)"
-              />
-            </template>
+            <ButtonMultiAction
+              class="project-action mr-10"
+              :borderless="true"
+              :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              :invisible="!showProjectActionButton(group.group)"
+              @click="showProjectAction($event, group.group)"
+            />
           </div>
         </div>
       </template>
@@ -573,11 +536,6 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
-.invisible {
-  display: inline-block;
-  min-width: 28px;
-}
-
 .project-namespaces {
   & :deep() {
     .project-namespaces-table table {

package/components/FixedBanner.vue

@@ -37,7 +37,7 @@ export default {
     handleLineBreaksConsentText(banner) {
       if (banner.text?.length) {
         // split text by newline char
-        const textArray = banner.text.split('\n').filter((element) => element);
+        const textArray = banner.text.split(/\\n/).filter((element) => element);
 
         if (textArray.length > 1) {
           textArray.forEach((str, i) => {
@@ -130,11 +130,11 @@ export default {
 
             if (isEmpty(banner)) {
               if (showHeader && this.header) {
-                bannerContent = this.handleLineBreaksConsentText(bannerHeader) || {};
+                bannerContent = bannerHeader || {};
               } else if (showConsent && this.consent) {
                 bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
               } else if (showFooter && this.footer) {
-                bannerContent = this.handleLineBreaksConsentText(bannerFooter) || {};
+                bannerContent = bannerFooter || {};
               } else {
                 bannerContent = {};
               }
@@ -168,20 +168,16 @@ export default {
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
-        <div
+        <p
           v-for="(text, index) in banner.text"
           :key="index"
-          class="array-row"
         >
           {{ text }}
-        </div>
+        </p>
       </div>
-      <div
-        v-else
-        class="single-row"
-      >
+      <p v-else>
         {{ banner.text }}
-      </div>
+      </p>
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -196,20 +192,16 @@ export default {
           >
             <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
             <div v-if="isTextAnArray">
-              <div
+              <p
                 v-for="(text, index) in banner.text"
                 :key="index"
-                class="array-row"
               >
                 {{ text }}
-              </div>
+              </p>
             </div>
-            <div
-              v-else
-              class="single-row"
-            >
+            <p v-else>
               {{ banner.text }}
-            </div>
+            </p>
           </div>
           <button
             class="btn role-primary"
@@ -231,6 +223,7 @@ export default {
     padding: 0 20px;
 
     &.banner-consent {
+      position: absolute;
       height: unset;
       min-height: 2em;
       overflow: hidden;

package/components/GlobalRoleBindings.vue

@@ -49,10 +49,6 @@ export default {
     userId: {
       type:    String,
       default: ''
-    },
-    watchOverride: {
-      type:    Boolean,
-      default: true,
     }
   },
   async fetch() {
@@ -142,7 +138,7 @@ export default {
       this.update();
     },
     userId(userId, oldUserId) {
-      if (userId === oldUserId || this.watchOverride === true) {
+      if (userId === oldUserId) {
         return;
       }
       this.update();

package/components/GrafanaDashboard.vue

@@ -262,22 +262,22 @@ export default {
     <div v-if="loading">
       <Loading />
     </div>
-    <!-- <div
+    <div
       v-if="!loading && !error"
       class="external-link"
-    > -->
+    >
       <!-- https://github.com/harvester/harvester-installer/pull/512/files -->
       <!-- It is necessary to include the parameter referer when accessing the Grafana page. -->
       <!-- This parameter is required by the backend to identify the origin of the request from which cluster -->
       <!-- The matching mechanism as follows: -->
       <!-- ~.*/k8s/clusters/(c-m-.+)/.* -->
       <!-- ~.*/dashboard/harvester/c/(c-m-.+)/.* -->
-      <!-- <a
+      <a
         :href="grafanaUrl"
         target="_blank"
         rel="noopener nofollow"
       >{{ t('grafanaDashboard.grafana') }} <i class="icon icon-external-link" /></a>
-    </div> -->
+    </div>
   </div>
 </template>
 

package/components/GrowlManager.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapState } from 'vuex';
-import { translateError } from '@shell/utils/error'
 
 export default {
   data() {
@@ -26,7 +25,6 @@ export default {
   },
 
   methods: {
-    translateError,
     close(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
@@ -109,7 +107,6 @@ export default {
               @click="close(growl)"
             />
             <div
-              v-if="growl.title"
               :id="`growl-title-${ growl.id }`"
               class="growl-text-title"
             >
@@ -120,7 +117,7 @@ export default {
               :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
-            {{ translateError(growl.message) }}
+              {{ growl.message }}
             </p>
           </div>
         </div>

package/components/HardwareResourceGauge.vue

@@ -85,9 +85,8 @@ export default {
           :capacity="reserved.total"
           :used="reserved.useful"
           :color-stops="colorStops"
-          :reserveText="`已分配`"
         >
-          <!-- <template #title>
+          <template #title>
             <span>
               {{ reservedTitle ?? t('clusterIndexPage.hardwareResourceGauge.reserved') }}
               <span class="values text-muted">
@@ -109,23 +108,6 @@ export default {
             <span>
               {{ percentage(reserved) }}
             </span>
-          </template> -->
-          <template #content>
-            <span>
-              {{ percentage(reserved) }}(
-              共 <span v-if="reserved.formattedTotal">
-                {{ reserved.formattedTotal }}
-              </span>
-              <span v-else>
-                {{ maxDecimalPlaces(reserved.total) }} {{ reserved.units }}
-              </span>，{{ reservedTitle === '分配'? '已分配': '预留' }} <span v-if="reserved.formattedUseful">
-                {{ reserved.formattedUseful }} {{ reserved.units }}
-              </span>
-              <span v-else>
-                {{ maxDecimalPlaces(reserved.useful) }} {{ reserved.units }}
-              </span>
-              )
-            </span>
           </template>
         </ConsumptionGauge>
       </div>
@@ -137,26 +119,8 @@ export default {
           :capacity="used.total"
           :used="used.useful"
           :color-stops="colorStops"
-          :reserveText="`已使用`"
         >
-        <template #content>
-            <span>
-              {{ percentage(used) }}(
-              共 <span v-if="used.formattedTotal">
-                {{ used.formattedTotal }}
-              </span>
-              <span v-else>
-                {{ maxDecimalPlaces(used.total) }} {{ used.units }}
-              </span>，已使用 <span v-if="used.formattedUseful">
-                {{ used.formattedUseful }} {{ used.units }}
-              </span>
-              <span v-else>
-                {{ maxDecimalPlaces(used.useful) }} {{ used.units }}
-              </span>
-              )
-            </span>
-          </template>
-          <!-- <template #title>
+          <template #title>
             <span>
               {{ usedTitle ?? t('clusterIndexPage.hardwareResourceGauge.used') }}
               <span class="values text-muted">
@@ -178,7 +142,7 @@ export default {
             <span>
               {{ percentage(used) }}
             </span>
-          </template> -->
+          </template>
         </ConsumptionGauge>
       </div>
     </div>

package/components/InfoBox.vue

@@ -26,8 +26,8 @@ export default {
 
 <style lang="scss" scoped>
   .info-box {
-    border: 1px solid var(--tabbed-border);
-    padding: 20px;
+    border: 2px solid var(--tabbed-border);
+    padding: 10px;
     margin-bottom: 20px;
     border-radius: var(--border-radius);
     flex-grow: 1;
@@ -81,4 +81,4 @@ export default {
       }
     }
   }
-</style>
+</style>

package/components/InputOrDisplay.vue

@@ -45,9 +45,7 @@ export default {
     </div>
     <div class="value">
       <slot name="value">
-        <span v-clean-tooltip="displayValue">
-          {{ displayValue }}
-        </span>
+        {{ displayValue }}
       </slot>
     </div>
   </div>
@@ -55,7 +53,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-/* .label {
+.label {
   display: flex;
   flex-direction: column;
 
@@ -63,29 +61,5 @@ export default {
     font-size: 14px;
     line-height: $input-line-height;
   }
-} */
-.label {
-  display: flex;
-  /* align-items: center; */
-  /* flex-direction: column; */
-
-  .text-label{
-    width: 160px;
-    line-height: 32px;
-  }
-  .value {
-    /* font-size: 14px; */
-    /* line-height: $input-line-height; */
-    line-height: 32px;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    
-    ul{
-      line-height: $input-line-height;
-      list-style:none;
-    }
-  }
 }
 </style>

package/components/LabelValue.vue

@@ -30,7 +30,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-/* .label {
+.label {
   display: flex;
   flex-direction: column;
 
@@ -38,20 +38,5 @@ export default {
     font-size: 14px;
     line-height: $input-line-height;
   }
-} */
-.label {
-  display: flex;
-  /* flex-direction: column; */
-  align-items: center;
-  .text-label{
-    width: 160px;
-    line-height: 32px;
-  }
-  .value {
-    line-height: $input-line-height;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }
 </style>

package/components/LandingPagePreference.vue

@@ -103,6 +103,9 @@ export default {
 
 <template>
   <div>
+    <p class="set-landing-leadin">
+      {{ t('landing.landingPrefs.body') }}
+    </p>
     <RadioGroup
       id="login-route"
       :value="afterLoginRoute"
@@ -110,11 +113,6 @@ 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,17 +1,11 @@
 <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,
-    RcDropdown,
-    RcDropdownItem,
-    RcDropdownTrigger,
-  },
+  components: { Select },
 
   props: {
     mode: {
@@ -71,51 +65,111 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <rc-dropdown v-if="showLocale">
-        <rc-dropdown-trigger
-          data-testid="locale-selector"
-          link
-          class="baseline"
-          :aria-label="t('locale.menu')"
+      <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"
         >
-          {{ selectedLocaleLabel }}
-          <template
-            v-if="showIcon"
-            #after
+          <a
+            data-testid="locale-selector"
+            class="locale-chooser"
           >
-            <i class="icon icon-fw icon-sort-down" />
+            {{ 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>
           </template>
-        </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>
+        </v-dropdown>
+      </div>
     </div>
     <div v-else>
       <Select
         :value="selectedOption"
         :options="localesOptions"
-        :is-lang-select="true"
         @update:value="switchLocale($event)"
       />
     </div>
   </div>
 </template>
 
-<style lang="scss">
-  .baseline {
-    align-items: baseline;
+<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;
   }
+}
+
+.locale-login-container:focus-visible {
+  @include focus-outline;
+  outline-offset: 2px;
+}
 </style>