@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -6,6 +6,8 @@ import LazyImage from '@shell/components/LazyImage.vue';
 import { DropdownOption } from '@components/RcDropdown/types';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import RcItemCardAction from './RcItemCardAction';
+import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { RcIconType } from '@components/RcIcon/types';
 
 const store = useStore();
 const { t } = useI18n(store);
@@ -25,11 +27,11 @@ type Label = {
 
 /**
  * Represents an image used in the card.
+ * Can be either a traditional image (src) or an icon (icon).
  */
-type Image = {
-  src: string;
-  alt?: Label;
-};
+type Image =
+ | { src?: never, icon: RcIconType; alt: Label; }
+ | { src: string; icon?: never, alt: Label; };
 
 /**
  * Optional pill badge, typically used to highlight a tag or state.
@@ -113,6 +115,12 @@ interface RcItemCardProps {
   /** Makes the card clickable and emits 'card-click' on click/enter/space */
   clickable?: boolean;
 
+  /** The card will have same style as hover clickable with the blue border when selected */
+  selected?: boolean;
+
+  /** Disables the card, preventing clicks and keyboard interaction */
+  disabled?: boolean;
+
   role?: 'link' | 'button' | undefined;
 }
 
@@ -131,6 +139,10 @@ const emit = defineEmits<{(e: 'card-click', value?: ItemValue): void; (e: 'actio
  * which then gets used to ignore 'card-click'
  */
 function _handleCardClick(e: MouseEvent | KeyboardEvent) {
+  if (props.disabled) {
+    return;
+  }
+
   const interactiveSelector = '[item-card-action]';
 
   // Prevent card click if the user clicks on an inner actionable element like repo, category, or tag
@@ -162,8 +174,8 @@ const statusTooltips = computed(() => props.header.statuses?.map((status) => lab
 
 const cardMeta = computed(() => ({
   ariaLabel:       props.clickable ? t('itemCard.ariaLabel.clickable', { cardTitle: labelText(props.header.title) }) : undefined,
-  tabIndex:        props.clickable ? '0' : undefined,
-  role:            props.role ?? (props.clickable ? 'button' : undefined),
+  tabIndex:        props.clickable && !props.disabled ? '0' : undefined,
+  role:            props.role ?? (props.clickable && !props.disabled ? 'button' : undefined),
   actionMenuLabel: props.actions && t('itemCard.actionMenu.label', { cardTitle: labelText(props.header.title) }),
 }));
 
@@ -177,7 +189,7 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
     :data-testid="`item-card-${id}`"
     :class="{
       'clickable':
-        clickable
+        clickable && !disabled,'selected': selected, 'disabled': disabled
     }"
     @click="_handleCardClick"
   >
@@ -190,11 +202,19 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
               :class="['item-card-image', variant]"
               data-testid="item-card-image"
             >
-              <LazyImage
-                :src="image.src"
-                :alt="imageAlt"
-                :style="{'width': '40px', 'height': '40px', 'object-fit': 'contain'}"
-              />
+              <template v-if="image.icon">
+                <RcIcon
+                  :type="image.icon"
+                  size="xxlarge"
+                />
+              </template>
+              <template v-else-if="image.src">
+                <LazyImage
+                  :src="image.src"
+                  :alt="imageAlt"
+                  :style="{'width': '40px', 'height': '40px', 'object-fit': 'contain'}"
+                />
+              </template>
             </div>
           </slot>
           <slot name="item-card-pill">
@@ -229,11 +249,19 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
                   :class="['item-card-image', variant]"
                   data-testid="item-card-image"
                 >
-                  <LazyImage
-                    :src="image.src"
-                    :alt="imageAlt"
-                    :style="{'width': '24px', 'height': '24px', 'object-fit': 'contain'}"
-                  />
+                  <template v-if="image.icon">
+                    <RcIcon
+                      :type="image.icon"
+                      size="xlarge"
+                    />
+                  </template>
+                  <template v-else-if="image.src">
+                    <LazyImage
+                      :src="image.src"
+                      :alt="imageAlt"
+                      :style="{'width': '32px', 'height': '32px', 'object-fit': 'contain'}"
+                    />
+                  </template>
                 </div>
               </slot>
             </template>
@@ -324,10 +352,26 @@ $image-medium-box-width: 48px;
   background: var(--body-bg);
   cursor: v-bind(cursorValue);
 
-  &.clickable:hover {
+  &.clickable:hover,
+  &.selected {
     border-color: var(--primary);
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    background-color: var(--disabled-bg);
+    color: var(--disabled-text);
+
+    .item-card-image {
+      background-color: var(--disabled-bg);
+    }
+
+    .item-card-header-title,
+    .item-card-content {
+      color: var(--disabled-text);
+    }
+  }
+
   &:has(.item-card-header-left:focus-visible) {
     border-color: var(--primary);
     @include focus-outline;
@@ -344,8 +388,9 @@ $image-medium-box-width: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #fff;
+    background: var(--rc-image-bg);
     border-radius: var(--border-radius);
+    color: var(--rc-image-color);
 
     &.small {
       width: 32px;

package/store/prefs.js

@@ -122,6 +122,9 @@ export const READ_SUPPORT_NOTICE = create('read-support-notice', '', { parseJSON
 export const READ_UPCOMING_SUPPORT_NOTICE = create('read-upcoming-support-notice', '', { parseJSON });
 export const READ_ANNOUNCEMENTS = create('read-announcements', '', { parseJSON });
 
+// Hidden banners
+export const HIDE_SUSE_APP_COLLECTION_REPO_BANNER = create('hide-suse-app-collection-repo-banner', false);
+
 // --------------------
 
 const cookiePrefix = 'R_';

package/types/aws-sdk.d.ts

@@ -0,0 +1,121 @@
+// data from aws-sdk/client-ec2
+// aws-sdk/client-iam
+// aws-sdk/client-eks
+
+export interface InstanceType {
+  apiName: string,
+  label: string,
+  groupLabel: string,
+  supportedUsageClasses: string[]
+  supportedArchitectures: string[]
+}
+
+export interface InstanceTypeOption {
+  label: string,
+  value?: string,
+  group?: string,
+  kind?: string
+}
+
+// iam describeRoles
+export interface IamRole {
+  AssumeRolePolicyDocument: string,
+  RoleId: string,
+  RoleName: string,
+  Arn: string
+}
+
+// list of all launch templates from eks describeLaunchTemplates
+export interface LaunchTemplate {
+  LaunchTemplateId?: string,
+  Versions?: string[],
+  LaunchTemplateName: string,
+  LatestVersionNumber?: string,
+  DefaultVersionNumber?: string,
+}
+
+export interface TagSpecification {
+  Tags?: {
+    Key: string,
+    Value: string
+  }[],
+  ResourceType?: string
+}
+
+export interface BlockDeviceMapping {
+  Ebs: {
+    VolumeSize: string
+  }
+}
+
+export interface LaunchTemplateVersionData {
+  BlockDeviceMappings: BlockDeviceMapping[],
+  ImageId:string,
+  InstanceType:string,
+  TagSpecifications: TagSpecification[],
+  UserData: string
+}
+export interface LaunchTemplateVersion {
+  VersionNumber: number,
+  LaunchTemplateName: string,
+  LaunchTemplateData: LaunchTemplateVersionData,
+  LaunchTemplateId: string,
+  DefaultVersion: boolean
+}
+
+// information about a specific launch template returned from eks describeLaunchTemplateVersions
+export interface LaunchTemplateDetail {
+  LaunchTemplateVersions: LaunchTemplateVersion[]
+}
+
+// ec2 describeVpcs
+export interface VPC {
+  VpcId: string,
+  Tags?: {
+    Key: string,
+    Value: string
+  }[],
+  CidrBlock?: string,
+  Ipv6CidrBlockAssociationSet?: {
+    Ipv6CidrBlock: string
+  }[]
+}
+
+// ec2 describeSubnets
+export interface Subnet {
+  VpcId: string,
+  SubnetId: string,
+  Tags?: {
+    Key: string,
+    Value: string
+  }[],
+  CidrBlock?: string,
+  Ipv6CidrBlockAssociationSet?: {
+    Ipv6CidrBlock: string
+  }[]
+}
+
+// kms listKeys
+export interface KmsKey {
+   KeyArn: string
+}
+
+// eks describeAddonVersions
+export interface EKSAddon {
+  addonVersions: {
+    compatibilities: {
+      clusterVersion: string
+    }[]
+}[]
+}
+
+export interface EC2Region {
+  RegionName: string
+}
+
+// ec2 describeSecurityGroups
+export interface SecurityGroup {
+  GroupId: string,
+  GroupName: string,
+  VpcId: string
+}

package/types/resources/node.ts

@@ -0,0 +1,15 @@
+import { KubeMetadata } from '@shell/types/kube/kube-api';
+
+export interface KubeNodeTaint {
+  key: string,
+  effect: string,
+}
+
+export interface KubeNode {
+  metadata: KubeMetadata,
+  spec: {
+    taints: KubeNodeTaint[],
+    [key: string]: any,
+  }
+  [key: string]: any,
+}