@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

package/assets/styles/base/_color.scss

@@ -21,6 +21,7 @@ $yellow001: #FFE47A;
 $yellow002: #473900;
 
 $red001: #B13333;
+$red002: #F2E0E0;
 
 $gray001: #EDEFF3;
 $gray002: #DCDEE4;

package/assets/styles/base/_typography.scss

@@ -1,14 +1,18 @@
+@mixin h-css() {
+  color: var(--body-text);
+  font-style: normal;
+  font-weight: 400;
+  margin: 0 0 10px 0;
+  font-family: var(--title-font-family, unset);
+}
+
 HTML, BODY {
   font-family: $body-font;
   font-size: 14px;
 }
 
 H1, H2, H3, H4, H5, H6 {
-  color: var(--body-text);
-  font-style: normal;
-  font-weight: 400;
-  margin: 0 0 10px 0;
-  font-family: var(--title-font-family, unset); // Use the var if set, otherwise unset and use the font defined by the parent
+  @include h-css;
 }
 
 H1 {
@@ -42,6 +46,11 @@ P {
   margin: 0;
 }
 
+legend.h3-legend {
+  @include h-css;
+  font-size: 18px // Same as H3
+}
+
 //code
 code, samp, kbd, .monospace {
   font-family: $mono-font;

package/assets/styles/themes/_light.scss

@@ -575,7 +575,7 @@
     --rc-warning-secondary: #{$yellow002};
 
     --rc-error: #{$red001};
-    --rc-error-secondary: #{$gray003};
+    --rc-error-secondary: #{$red002};
 
     --rc-unknown: #{$gray001};
     --rc-unknown-secondary: #{$gray004};

package/assets/styles/themes/_modern.scss

@@ -705,7 +705,7 @@ BODY, .theme-light {
   --rc-warning-secondary: #{$yellow002};
 
   --rc-error: #{$red001};
-  --rc-error-secondary: #{$gray003};
+  --rc-error-secondary: #{$red002};
 
   --rc-unknown: #{$gray001};
   --rc-unknown-secondary: #{$gray004};

package/assets/translations/en-us.yaml

@@ -121,6 +121,7 @@ generic:
         1d: 1d
         7d: 7d
         30d: 30d
+  tooltip: Tooltip
   completed: Completed
   enable: Enable
   disable: Disable
@@ -786,6 +787,11 @@ authConfig:
       label: Scopes
       placeholder: openid
       protip: The <code>openid</code>, <code>profile</code>, and <code>email</code> scopes are required and cannot be removed.
+    pkce:
+      label: Enable PKCE (S256)
+      tooltip: Enable Proof Key for Code Exchange (PKCE) using the S256 code challenge method. When enabled, this client must use PKCE with S256 for authorization requests.
+    pkceMethod:
+      label: PKCE Method
     cert:
       label: Certificate
       placeholder: Paste in the certificate, starting with -----BEGIN CERTIFICATE-----
@@ -1210,7 +1216,7 @@ catalog:
         tag: tag
   install:
     action:
-      goToUpgrade: Edit/Upgrade
+      goToUpgrade: Edit / Change Version
     appReadmeMissing: This chart doesn't have any additional chart information.
     appReadmeTitle: Chart Information (Helm README)
     button:
@@ -2004,7 +2010,8 @@ cluster:
         description: Choose what hypervisor the virtual machine will be scheduled to
         dataCenter: Data Center
         resourcePool: Resource Pool
-        dataStore: Data Store
+        dataStore: Datastore
+        dataStoreCluster: Datastore Cluster
         folder: Folder
         host:
           label: Host
@@ -2530,9 +2537,6 @@ cluster:
       caCerts:
         label: CA Certificates
         toolTip: Certificates required for the client to successfully verify the validity of the certificate returned by the endpoint.
-      ipv6:
-        warning: It looks like you are using an IPv6 CIDR. Your node driver may require additional configuration to support this.
-        enable: Enable IPv6 support
     etcd:
       disableSnapshots:
         label: Automatic Backups
@@ -2569,6 +2573,10 @@ cluster:
         dual: Dual-Stack
       errorNeedsIpv6: Stack preference must be set to dual-stack or ipv6 if using ipv6 networking in nodepools.
   k3s:
+    flannelMasq:
+      title: IPv6 NAT
+      label: Enable Flannel IPv6 Masquerade
+      banner: It looks like you're using IPv6. If your IPv6 addresses are not publically routed, for example in the ULA range, you might want to check this option to enable IPv6 NAT; by default, pods use their IPv6 address for outgoing communication.
     systemService:
       coredns: 'CoreDNS'
       local-storage: 'Local Storage'
@@ -2727,7 +2735,6 @@ cruResource:
 providers:
   hosted: 
     title: Hosted Providers
-    prime: Prime only
     warning: Disabling providers will make any clusters that use them uneditable
 drivers:
   kontainer:
@@ -2957,6 +2964,10 @@ fleet:
     expandAll: Expand All
     collapseAll: Collapse All
     state: State
+    resourceDetails:
+      clusters: Clusters
+      resources: Resources
+      source: Source
     viewMode:
       table: Show table
       cards: Show cards
@@ -3014,24 +3025,36 @@ fleet:
       notReady: Not Ready
       waitApplied: Wait Applied
   clusterTargets:
-    title: Select by name
-    label: Clusters
     advancedConfigs: Advanced target configurations are defined, check the YAML file for further details.
-    placeholders:
-      selectMultiple: Select Multiple Clusters
+    clusters:
+      title: Clusters
+      byName:
+        placeholder: Select Multiple Clusters
+        label: Select by cluster name
+      byLabel:
+        title: Select by labels
+        addSelector: Add cluster selector
+        labelKey: Label
+    clusterGroups:
+      title: Cluster Groups
+      byName:
+        label: Select by cluster group name
+        placeholder: Select Multiple Cluster Groups
     rules:
-      title: Select by labels
-      addSelector: Add cluster selector
-      labelKey: Label
       matching:
-        title: Selected clusters
-        placeholder: Select clusters by name or labels
+        title: |-
+          {n, plural,
+            =0 {No clusters selected}
+            =1 {1 cluster selected}
+            other {{n, number} clusters selected}
+            }
+        placeholder: Select clusters by name, labels or groups
         empty: No clusters in the workspace
         plusMore: |-
           {n, plural,
             =1 {+ 1 more cluster}
             other {+ {n, number} more clusters}
-          }
+            }
   application:
     pageTitle: App Bundles
     menuLabel: App Bundles
@@ -3591,6 +3614,7 @@ hpa:
     last: Last Scale Time
     max: Maximum Replicas
     min: Minimum Replicas
+    targetReferenceType: Target Type
     targetReference: Target Reference
 
 import:
@@ -3855,6 +3879,8 @@ istio:
 itemCard:
   ariaLabel:
     clickable: Click on card for {cardTitle}
+  actionMenu:
+    label: '{cardTitle} actions'
 jwt:
   title: JWT Authentication
   actions:
@@ -7332,39 +7358,64 @@ workload:
     removeContainer: Remove Container
     addContainer: Add Container
     security:
-      addCapabilities: Add Capabilities
       addGroupIDs: Add Group IDs
       allowPrivilegeEscalation:
-        label: Privilege Escalation
-        'false': No
-        'true': "Yes: container can gain more privileges than its parent process"
-      dropCapabilities: Drop Capabilities
+        title: Privilege Escalation
+        'true': "Container can gain more privileges than its parent process"
+      capabilities:
+        title: Capabilities
+        add: Add Capabilities
+        drop: Drop Capabilities
       fsGroup: Filesystem Group
       hostIPC: Use Host IPC Namespace
       hostPID: Use Host PID Namespace
       podFsGroup: Pod Filesystem Group
       privileged:
-        label: Privileged
-        'false': No
-        'true': "Yes: container has full access to the host"
+        title: Privileged
+        'true': "Container has full access to the host"
+        help: Enabling privilege will hide Privilege Escalation and seccompProfile.
+        afterTick: 
+          'true': Privilege Escalation and seccompProfile have been hidden.
+          'false': Privilege Escalation and seccompProfile appeared.
       readOnlyRootFilesystem:
-        label: Read-Only Root Filesystem
-        'false': No
-        'true': "Yes: container has a read-only root filesystem"
+        title: Read-Only Root Filesystem
+        'true': "Container has a read-only root filesystem"
       runAsGroup: Run as Group ID
       runAsNonRoot:
-        label: Run as Non-Root
-        'false': No
-        'true': "Yes: container must run as a non-root user"
+        title: Run as Non-Root
+        'true': "Container must run as a non-root user"
       runAsNonRootOptions:
-        noOption: "No"
-        yesOption: "Yes: containers must run as non-root-user"
-      runAsUser: Run as User ID
+        'true': "Containers must run as non-root-user"
+      runAsUser: 
+        title: Run as User ID
+        label: User ID
+      seccompProfile:
+        pod: Pod Seccomp Profile
+        container: Seccomp Profile
+        type: Type
+        localhostProfile:
+          label: Localhost Profile Path
+          tooltip: Points to a specific seccomp file that must already exist on the machine running the container.
+          placeholder: e.g. path/to/json
+        afterLocalhostProfile: 
+          selected: Localhost Profile input appeared.
+          unselected: Localhost Profile input has been hidden.
+        types:
+          none:
+            label: None
+          runtimeDefault:
+            label: RuntimeDefault - inherit the default seccomp profile
+          localhost:
+            label: Localhost - define a custom seccomp profile
+          unconfined:
+            label: Unconfined - no seccomp profile
       shareProcessNamespace: Share single process namespace
       supplementalGroups: Additional Group IDs
       sysctls: Sysctls
       sysctlsKey: Name
     standard: Standard Container
+    initContainer:
+      label: Init Containers
     terminationState: "Last state: Terminated with {lsExitCode}: {lsDescription}, started: {lsStartedAt}, finished: {lsFinishedAt}"
     titles:
       pods: Pods
@@ -7492,6 +7543,7 @@ workload:
   validation:
     containers: Containers
     containerImage: Container {name} - "Container Image" is required.
+    localhostProfile: Container {name} - "Container Localhost Profile" is required when SeccompProfile Type is Localhost.
   replicas: Replicas
   showTabs: 'Show Advanced Options'
   scheduling:
@@ -8364,6 +8416,11 @@ typeLabel:
       one { Role }
       other { Roles }
     }
+  replicationcontroller: |-
+    {count, plural,
+      one { Replication Controller }
+      other { Replication Controllers }
+    }
   scheduling.k8s.io.priorityclass: |-
     {count, plural,
       one { PriorityClass }
@@ -8800,6 +8857,7 @@ notifications:
     showCheckboxLabel: Show custom login error
     messageLabel: Text to display
 resourceQuota:
+  banner: Limit resource consumption in a project for both standard (e.g. CPU Limit) and custom resource types. For custom resource types you have to provide the resource identifier yourself. Want to learn more about resource quotas? Read our <a href="https://ranchermanager.docs.rancher.com/how-to-guides/advanced-user-guides/manage-projects/manage-project-resource-quotas" target="_blank" rel="noopener noreferrer nofollow">documentation <i class="icon icon-external-link"></i></a><span class="sr-only">Opens in a new tab</span>
   label: Resource Quotas
   headers:
     limit: Limit
@@ -8807,9 +8865,14 @@ resourceQuota:
     projectLimit: Project Limit
     projectResourceAvailability: Project Resource Availability
     resourceType: Resource Type
+    resourceIdentifier: Resource Identifier
   helpText: Configure how much of the resources the namespace as a whole can consume.
   helpTextDetail: The amount of resources the namespace as a whole can consume.
   helpTextHarvester: VMs need to reserve additional memory overhead.
+  custom: Custom
+  resourceIdentifier:
+    placeholder: e.g. configmaps
+    tooltip: Select 'Custom' from the 'Resource Type' list and enter the resource identifier (e.g. requests.nvidia.com/gpu) to add custom resources quotas.
   configMaps: Config Maps
   limitsCpu: CPU Limit
   limitsMemory: Memory Limit
@@ -8839,6 +8902,8 @@ resourceQuota:
     unitlessPlaceholder: e.g. 10
   add:
     label: Add Resource
+  errors:
+    customTypeRequired: Resource identifier is required
   tooltip:
     reserved: 'Other Namespaces:'
     namespace: 'This Namespace:'
@@ -9099,11 +9164,17 @@ component:
         podsCard:
           title: Pods
           ariaResourceName: pods
+        jobsCard:
+          title: Jobs
+          ariaResourceName: jobs
         insightsCard:
           title: Insights
           rows:
             conditions: Conditions
             events: Events
+        extrasCard:
+          title: Extras
+          message: 'Consider installing additional <a class="secondary text-deemphasized" href="{extensionsUrl}">extensions</a> and / or <a class="secondary-text-link" href="{clusterToolsUrl}">cluster tools</a> to enrich your Rancher experience.'
         scaler:
           ariaLabel:
             increase: Increase {resourceName}

package/assets/translations/zh-hans.yaml

@@ -651,6 +651,10 @@ asyncButton:
     action: 保存
     success: 已保存
     waiting: 正在保存…
+  editVersion:
+    action: 保存更改
+    success: 已保存
+    waiting: 正在保存更改…
   enable:
     action: 启用
     success: 启用
@@ -874,8 +878,13 @@ catalog:
       windows: Windows
     search: 筛选
   install:
-    action:
-      goToUpgrade: 编辑/升级
+    warning:
+      managed: |-
+        警告，{manager} 管理 {name} 应用的部署和升级。不支持升级此应用。<br>
+        {version, select,
+          null { }
+          other { 在大多数情况下，无需用户干预即可确保 {version} 版本与你正在运行的 Rancher 版本兼容。}
+        }
     appReadmeMissing: 此 Chart 没有其他 Chart 信息。
     appReadmeTitle: Chart 信息（Helm 自述）
     chart: Chart
@@ -941,6 +950,8 @@ catalog:
             install { 创建 }
             upgrade { 升级 }
             update { 更新 }
+            editVersion { 更新 }
+            downgrade { 降级 }
           } 这个 {existing, select,
             true { 应用 }
             false { Chart}

package/components/ActionMenu.vue

@@ -11,7 +11,7 @@ const SHOW = 'show';
 export default {
   name: 'ActionMenu',
 
-  emits: ['close'],
+  emits: ['close', 'action-invoked'],
 
   components: { IconOrSvg },
   props:      {
@@ -217,15 +217,14 @@ export default {
         // If the state of this component is controlled
         // by props instead of Vuex, we assume you wouldn't want
         // the mutation to have a dependency on Vuex either.
-        // So in that case we use events to execute actions instead.
-        // If an action list item is clicked, this
-        // component emits that event, then we assume the parent
-        // component will execute the action.
-        this.$emit(action.action, {
-          action,
+        // The parent component should handle the action based on the action property
+        // in the 'action-invoked' event payload.
+        this.$emit('action-invoked', {
+          action:     action.action,
+          actionData: action,
           event,
           ...args,
-          route: this.$route
+          route:      this.$route
         });
       } else {
         // If the state of this component is controlled

package/components/ActionMenuShell.vue

@@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';
 
 import { isAlternate } from '@shell/utils/platform';
 import { RcDropdownMenu } from '@components/RcDropdown';
-import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
+import { ButtonVariant, ButtonSize } from '@components/RcButton/types';
 import { DropdownOption } from '@components/RcDropdown/types';
 
 defineOptions({ inheritAttrs: false });
@@ -13,8 +13,8 @@ defineOptions({ inheritAttrs: false });
 const store = useStore();
 
 type RcDropdownMenuComponentProps = {
-  buttonRole?: keyof ButtonRoleProps;
-  buttonSize?: keyof ButtonSizeProps;
+  buttonVariant?: ButtonVariant;
+  buttonSize?: ButtonSize;
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
@@ -30,7 +30,15 @@ const openChanged = (event: boolean) => {
   }
 };
 
-const emit = defineEmits<{(event: string, payload: any): void;(event: 'action-invoked'): void;}>();
+export interface ActionMenuSelection {
+  action: string;
+  actionData: any;
+  event: MouseEvent;
+  route: ReturnType<typeof useRoute>;
+  [key: string]: any;
+}
+
+const emit = defineEmits<{(event: 'action-invoked', payload?: ActionMenuSelection): void;}>();
 const route = useRoute();
 
 const execute = (action: any, event: MouseEvent, args?: any) => {
@@ -38,7 +46,15 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
     return;
   }
 
-  emit('action-invoked');
+  const payload: ActionMenuSelection = {
+    action:     action.action,
+    actionData: action,
+    event,
+    ...args,
+    route,
+  };
+
+  emit('action-invoked', payload);
 
   // this will come from extensions...
   if (action.invoke) {
@@ -56,24 +72,7 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
         fn.apply(this, [opts, resources]);
       }
     }
-  } else if (props.customActions) {
-    // If the state of this component is controlled
-    // by props instead of Vuex, we assume you wouldn't want
-    // the mutation to have a dependency on Vuex either.
-    // So in that case we use events to execute actions instead.
-    // If an action list item is clicked, this
-    // component emits that event, then we assume the parent
-    // component will execute the action.
-    emit(
-      action.action,
-      {
-        action,
-        event,
-        ...args,
-        route,
-      }
-    );
-  } else {
+  } else if (!props.customActions) {
     // If the state of this component is controlled
     // by Vuex, mutate the store when an action is clicked.
     const opts = { alt: isAlternate(event) };
@@ -97,7 +96,7 @@ const menuOptions = () => {
 
 <template>
   <rc-dropdown-menu
-    :button-role="buttonRole || 'link'"
+    :button-variant="buttonVariant || 'link'"
     :button-size="buttonSize || 'small'"
     :button-aria-label="buttonAriaLabel"
     :dropdown-aria-label="dropdownAriaLabel"

package/components/CodeMirror.vue

@@ -330,9 +330,6 @@ export default {
         border-color: var(--primary-border);
       }
 
-      .CodeMirror-wrap pre {
-        word-break: break-word;
-      }
       .CodeMirror-code {
         .CodeMirror-line {
           &:not(:last-child)>span:after,
@@ -426,6 +423,10 @@ export default {
       .CodeMirror-gutters {
         background: inherit;
       }
+
+      .CodeMirror-wrap pre {
+        word-break: break-word;
+      }
     }
 
     .keymap.overlay {

package/components/DetailText.vue

@@ -167,8 +167,12 @@ export default {
     <h5
       v-if="labelKey"
       v-t="labelKey"
+      v-clean-tooltip="{content: itemLabel, popperClass: 'detail-text-tooltip'}"
     />
-    <h5 v-else-if="label">
+    <h5
+      v-else-if="label"
+      v-clean-tooltip="{content: label, popperClass: 'detail-text-tooltip'}"
+    >
       {{ label }}
     </h5>
 
@@ -190,17 +194,22 @@ export default {
       aria-live="polite"
     />
 
-    <span
+    <div
       v-else
-      v-clean-html="bodyHtml"
-      data-testid="detail-top_html"
-      :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
-      aria-live="polite"
-    />
+      :class="{'conceal-wrapper': concealed}"
+    >
+      <span
+        v-clean-html="bodyHtml"
+        data-testid="detail-top_html"
+        :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+        aria-live="polite"
+      />
+    </div>
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">
       <a
         href="#"
+        class="more-characters"
         @click.prevent="expand"
       >{{ plusMore }}</a>
     </template>
@@ -238,6 +247,30 @@ export default {
   background-color: var(--input-bg);
   border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
+  contain: inline-size;
+
+  h5 {
+    margin-bottom: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: fit-content;
+    // Accounting for the button on the right
+    max-width: calc(100% - 150px);
+  }
+
+  // This prevents the scrollbar from overlapping the text without changing the size of the detailtext container.
+  $scrollBarShift: 10px;
+  .conceal-wrapper {
+    overflow-x: auto;
+    padding-bottom: $scrollBarShift;
+    margin-bottom: -$scrollBarShift;
+  }
+
+  .conceal {
+    white-space: nowrap;
+    display: block;
+  }
 
   .action-group {
     position: absolute;
@@ -267,4 +300,18 @@ export default {
   white-space: pre-wrap;
   word-wrap: break-all
 }
+
+.more-characters {
+  margin-top: 8px;
+  display: inline-block;
+}
+</style>
+
+<style lang="scss">
+// The global styles for tooltips are in dashboard/shell/assets/styles/global/_tooltip.scss.
+// I don't want to make this change for all tooltips since there's 149 instances as of writing this
+// so I'm adding a global style here that's scoped to the class we're adding to the tooltips we have in this component.
+.detail-text-tooltip.v-popper__popper.v-popper--theme-tooltip {
+  overflow-wrap: anywhere;
+}
 </style>

package/components/Drawer/Chrome.vue

@@ -3,6 +3,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 import { Props } from './types';
+import RcButton from '@components/RcButton/RcButton.vue';
 
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
@@ -34,16 +35,20 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     <div class="body pp-4">
       <slot name="body" />
     </div>
-    <div class="footer pp-4">
+    <div
+      v-if="!removeFooter"
+      class="footer pp-4"
+    >
       <slot name="footer">
         <div class="actions">
-          <button
-            class="btn role-secondary"
+          <RcButton
+            variant="secondary"
+            size="large"
             :aria-label="ariaLabel"
             @click="emit('close')"
           >
             {{ i18n.t('component.drawer.chrome.close') }}
-          </button>
+          </RcButton>
           <slot name="additional-actions" />
         </div>
       </slot>
@@ -71,6 +76,8 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
       height: var(--header-height);
 
       & > .title {
+        display: flex;
+        align-items: center;
         flex: 1;
         font-size: 16px;
       }

package/components/Drawer/DrawerCard.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="drawer-card">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.drawer-card {
+  background-color: var(--body-bg);
+  border-radius: var(--border-radius-md);
+  padding: 16px;
+  max-width: 100%;
+  width: 100%;
+  position: relative;
+}
+</style>