@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/components/google/util/gcp.ts

@@ -0,0 +1,134 @@
+import { addParams, QueryParams } from '@shell/utils/url';
+import {
+  getGKEMachineTypesResponse,
+  getGKEClustersResponse,
+  getGKENetworksResponse,
+  getGKESharedSubnetworksResponse,
+  getGKESubnetworksResponse,
+  getGKEVersionsResponse,
+  GKEZone,
+  getGKEZonesResponse,
+  getGKEServiceAccountsResponse,
+  getGKEImageFamiliesResponse
+} from 'types/gcp';
+import { Store } from 'vuex';
+
+// If any of these defaults are not available in the actual list from gcp, the ui will default to the first option in the (sorted) list
+export const DEFAULT_GCP_ZONE = 'us-central1-c';
+export const DEFAULT_GCP_REGION = 'us-central1';
+
+export const DEFAULT_GCP_SERVICE_ACCOUNT = 'Compute Engine default service account';
+/**
+ * @param resource gcp resource to fetch eg gkeZones
+ * @param store vuex store used to dispatch management/request
+ * @param cloudCredentialId gcp credential id - will be in the form cattle-global-data:<random string>
+ * @param projectId gcp project in which to make the request
+ * @param location object containing either gcp region or zone in which to make the request - defaults to DEFAULT_GCP_ZONE if both zone and region are undefined. region preempts zone
+ * @param extraParams any additional parameters required by requests
+ * @returns
+ */
+function getGKEOptions(resource: string, store: any, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}, clusterId?:string, extraParams?: object ) {
+  if (!cloudCredentialId || !projectId) {
+    return;
+  }
+  if (!location.zone && !location.region) {
+    location.zone = DEFAULT_GCP_ZONE;
+  }
+  let params: QueryParams = {};
+
+  if (location.region) {
+    params = {
+      cloudCredentialId, projectId, region: location.region
+    };
+  } else if (location.zone) {
+    params = {
+      cloudCredentialId, projectId, zone: location.zone
+
+    };
+  }
+  if (clusterId) {
+    params.clusterId = clusterId;
+  }
+  if (extraParams) {
+    params = { ...params, ...extraParams };
+  }
+
+  const url = addParams(`/meta/${ resource }`, params);
+
+  return store.dispatch('management/request', {
+    url,
+    method:               'POST',
+    redirectUnauthorized: false,
+  });
+}
+
+export function getGKEZones(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEZonesResponse> {
+  return getGKEOptions('gkeZones', store, cloudCredentialId, projectId, location);
+}
+
+export async function getGKEVersions(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEVersionsResponse> {
+  return await getGKEOptions('gkeVersions', store, cloudCredentialId, projectId, location);
+}
+
+export function getGKEMachineTypes(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEMachineTypesResponse> {
+  return getGKEOptions('gkeMachineTypes', store, cloudCredentialId, projectId, { zone: location.zone });
+}
+
+export function getGKENetworks(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKENetworksResponse> {
+  return getGKEOptions('gkeNetworks', store, cloudCredentialId, projectId, location);
+}
+
+export function getGKESubnetworks(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKESubnetworksResponse> {
+  return getGKEOptions('gkeSubnetworks', store, cloudCredentialId, projectId, location);
+}
+
+export function getGKESharedSubnetworks(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKESharedSubnetworksResponse> {
+  return getGKEOptions('gkeSharedSubnets', store, cloudCredentialId, projectId, location);
+}
+
+export function getGKEClusters(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEClustersResponse> {
+  return getGKEOptions('gkeClusters', store, cloudCredentialId, projectId, location);
+}
+
+export function getGKEServiceAccounts(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEServiceAccountsResponse> {
+  return getGKEOptions('gkeServiceAccounts', store, cloudCredentialId, projectId, location);
+}
+/**
+ * we fetch GKE zones and etrapolate available regions from that list. Zones include a url to the region they are in.
+ * @param zone
+ * @returns region the zone is contained in
+ */
+export function getGKERegionFromZone(zone: GKEZone): string|undefined {
+  const regionUrl = zone.region || '';
+
+  return regionUrl.split('/').pop();
+}
+
+export function getGKEFamiliesFromProject(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}, imageProjects: string, showDeprecated = false): Promise<getGKEServiceAccountsResponse> {
+  const extraParams = { imageProjects, showDeprecated };
+
+  return getGKEOptions('gkeFamiliesFromProject', store, cloudCredentialId, projectId, location, '', extraParams);
+}
+
+export function getGKEImageFamilies(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}, imageFamilies: string, imageProject: string, showDeprecated = false): Promise<getGKEImageFamiliesResponse> {
+  const extraParams = {
+    imageFamilies, imageProject, showDeprecated
+  };
+
+  return getGKEOptions('gkeImageFamilies', store, cloudCredentialId, projectId, location, '', extraParams);
+}
+export function getGKEDiskTypes(store: Store<any>, cloudCredentialId: string, projectId: string, location: {zone?: string, region?: string}): Promise<getGKEServiceAccountsResponse> {
+  return getGKEOptions('gkeDiskTypes', store, cloudCredentialId, projectId, location);
+}
+
+/** The Ember logic around image types is more complicated; it includes docker variants and windows SAC, with version-dependent availability
+ * the gke versions supporting those options are well outside the versions that will be supported in rancher 2.9
+ * No windows SAC since 2022 https://cloud.google.com/kubernetes-engine/docs/deprecations/windows-server-sac
+ * No more docker (non _containerd) since gke 1.24 https://cloud.google.com/kubernetes-engine/docs/concepts/node-images
+ * We will simply exclude those options from the UI and display a warning if the user is editing a cluster with one of them already configured
+ */
+export const GKEImageTypes = [
+  'COS_CONTAINERD',
+  'WINDOWS_LTSC_CONTAINERD',
+  'UBUNTU_CONTAINERD',
+];

package/components/google/util/index.d.ts

@@ -0,0 +1,11 @@
+import { GKENetwork, GKESubnetwork } from '@shell/components/google/types/gcp';
+
+export interface GKENetworkOption extends Partial<GKENetwork>{
+  label: string,
+  kind?: string,
+  disabled?: boolean,
+}
+
+export interface GKESubnetworkOption extends Partial<GKESubnetwork>{
+  label: string,
+}

package/components/nav/Favorite.vue

@@ -34,7 +34,7 @@ export default {
     :aria-pressed="!!isFavorite"
     class="favorite icon"
     :class="{'icon-star-open': !isFavorite, 'icon-star': isFavorite}"
-    aria-role="button"
+    role="button"
     :aria-label="ariaLabel"
     @click.stop.prevent="toggle"
     @keydown.enter.prevent="toggle"

package/components/nav/Group.vue

@@ -227,33 +227,38 @@ export default {
     :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
   >
     <div
-      v-if="showHeader"
-      class="header"
-      :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
-      role="button"
-      :tabindex="fixedOpen ? -1 : 0"
-      :aria-label="group.labelDisplay || group.label || ''"
-      @click="groupSelected()"
-      @keyup.enter="groupSelected()"
-      @keyup.space="groupSelected()"
+      v-if="showHeader || (!onlyHasOverview && canCollapse)"
+      class="accordion-item"
     >
-      <slot name="header">
-        <router-link
-          v-if="hasOverview"
-          :to="group.children[0].route"
-          :exact="group.children[0].exact"
-          :tabindex="-1"
-        >
-          <h6>
+      <div
+        v-if="showHeader"
+        class="header"
+        :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
+        role="button"
+        :tabindex="fixedOpen ? -1 : 0"
+        :aria-label="group.labelDisplay || group.label || ''"
+        @click="groupSelected()"
+        @keyup.enter="groupSelected()"
+        @keyup.space="groupSelected()"
+      >
+        <slot name="header">
+          <router-link
+            v-if="hasOverview"
+            :to="group.children[0].route"
+            :exact="group.children[0].exact"
+            :tabindex="-1"
+          >
+            <h6>
+              <span v-clean-html="group.labelDisplay || group.label" />
+            </h6>
+          </router-link>
+          <h6
+            v-else
+          >
             <span v-clean-html="group.labelDisplay || group.label" />
           </h6>
-        </router-link>
-        <h6
-          v-else
-        >
-          <span v-clean-html="group.labelDisplay || group.label" />
-        </h6>
-      </slot>
+        </slot>
+      </div>
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle toggle-accordion"
@@ -330,6 +335,12 @@ export default {
       font-size: 14px;
     }
 
+    > H6 {
+        text-transform: none;
+        height: 100%;
+        padding: 8px 0 8px 16px;
+      }
+
     > A {
       display: block;
       box-sizing:border-box;
@@ -348,6 +359,19 @@ export default {
   }
 
   .accordion {
+    .accordion-item {
+      position: relative;
+      cursor: pointer;
+      color: var(--body-text);
+      height: 33px;
+      outline: none;
+
+      .toggle-accordion:focus-visible {
+        @include focus-outline;
+        outline-offset: -6px;
+      }
+    }
+
     .header {
       &:focus-visible {
         h6 span {
@@ -355,10 +379,6 @@ export default {
           outline-offset: 2px;
         }
       }
-      .toggle-accordion:focus-visible {
-        @include focus-outline;
-        outline-offset: -6px;
-      }
 
       &.active {
         color: var(--primary-hover-text);
@@ -373,6 +393,10 @@ export default {
         &:hover {
           background-color: var(--primary-hover-bg);
         }
+
+        ~ I {
+          color: var(--primary-hover-text);
+        }
       }
       &:hover:not(.active) {
         background-color: var(--nav-hover);
@@ -395,14 +419,14 @@ export default {
           text-transform: none;
           padding: 8px 0 8px 16px;
         }
+      }
 
-        > I {
-          position: absolute;
-          right: 0;
-          top: 0;
-          padding: 10px 10px 9px 7px;
-          user-select: none;
-        }
+      .accordion-item > I {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 10px 10px 9px 7px;
+        user-select: none;
       }
 
       > .body {
@@ -421,9 +445,11 @@ export default {
           line-height: 18px;
           padding: 8px 0 7px 5px !important;
         }
-        > I {
-          padding: 10px 7px 9px 7px !important;
-        }
+
+      }
+
+      .accordion-item > I {
+        padding: 10px 7px 9px 7px !important;
       }
 
       &:deep() .type-link > .label {
@@ -438,19 +464,19 @@ export default {
           display: inline-block;
           padding: 5px 0 5px 5px;
         }
+      }
 
-        > I {
-          position: absolute;
-          right: 0;
-          top: 0;
-          padding: 6px 8px 6px 8px;
-        }
+      .accordion-item > I {
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 6px 8px 6px 8px;
       }
     }
   }
 
   .body :deep() > .child.router-link-active,
-  .header :deep() > .child.router-link-exact-active {
+  .accordion-item :deep() > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {

package/components/nav/Header.vue

@@ -22,6 +22,7 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
 import HeaderPageActionMenu from './HeaderPageActionMenu.vue';
+import NotificationCenter from './NotificationCenter';
 import {
   RcDropdown,
   RcDropdownItem,
@@ -40,6 +41,7 @@ export default {
     ClusterProviderIcon,
     IconOrSvg,
     AppModal,
+    NotificationCenter,
     HeaderPageActionMenu,
     RcDropdown,
     RcDropdownItem,
@@ -645,7 +647,7 @@ export default {
           :data-testid="`extension-header-action-${ action.labelKey || action.label }`"
           role="button"
           tabindex="0"
-          :aria-label="action.label"
+          :aria-label="action.labelKey ? t(action.labelKey) : action.label"
           @shortkey="handleExtensionAction(action, $event)"
           @click="handleExtensionAction(action, $event)"
         >
@@ -653,6 +655,7 @@ export default {
             class="icon icon-lg"
             :icon="action.icon"
             :src="action.svg"
+            :img-alt="action.tooltipKey ? t(action.tooltipKey) : action.labelKey ? t(action.labelKey) : action.label ? action.label : t('generic.imageAlt')"
             color="header"
           />
         </button>
@@ -660,6 +663,7 @@ export default {
 
       <div class="center-self">
         <header-page-action-menu v-if="showPageActions" />
+        <NotificationCenter />
         <rc-dropdown
           v-if="showUserMenu"
           :aria-label="t('nav.userMenu.label')"

package/components/nav/NamespaceFilter.vue

@@ -63,6 +63,9 @@ export default {
       return this.$store.getters[`${ this.currentProduct.inStore }/paginationEnabled`](this.$route.params?.resource) ? paginationUtils.validNsProjectFilters : null;
     },
 
+    /**
+     * Create visible options (filtered version of `options`)
+     */
     filtered() {
       let out = this.options;
 
@@ -142,6 +145,9 @@ export default {
       return createNamespaceFilterKey(this.$store.getters['clusterId'], this.currentProduct);
     },
 
+    /**
+     * Create options (see `filtered` for visible collection)
+     */
     options() {
       const t = this.$store.getters['i18n/t'];
       let out = [];
@@ -341,6 +347,11 @@ export default {
           })
           .filter((x) => !!x);
 
+        if (filters.length !== values.length) {
+          // filter has changed, ensure we persist these to store
+          this.value = filters;
+        }
+
         return filters;
       },
 
@@ -401,7 +412,7 @@ export default {
      *
      * This is caused by churn of the filtered and options computed properties causing multiple renders for each action.
      *
-     * To break this multiple-render per cycle behaviour detatch `filtered` from the value used in `v-for`.
+     * To break this multiple-render per cycle behaviour detach `filtered` from the value used in `v-for`.
      *
      */
     filtered(neu) {
@@ -700,6 +711,7 @@ export default {
     :aria-activedescendant="containerId"
     class="ns-filter"
     data-testid="namespaces-filter"
+    :aria-label="t('generic.namespaceFilter')"
     tabindex="0"
     @mousedown.prevent
     @keydown.self.down.enter.space.prevent="open"