@rancher/shell 3.0.8 → 3.0.9-rc.2

package/apis/intf/modal.ts

@@ -11,6 +11,44 @@ export interface ModalConfig {
    * ```ts
    * props: { title: 'Hello Modal', isVisible: true }
    * ```
+   *
+   * Props can include callback functions to be invoked when confirming a modal.
+   *
+   * Example with a callback function:
+   *
+   * ```ts
+   * import MyCustomModal from './MyCustomModal.vue';
+   *
+   * export default {
+   *   methods: {
+   *     myAction() {
+   *       console.log('Performed an action');
+   *     },
+   *     showModal() {
+   *       this.$shell.modal.open(MyCustomModal, {
+   *         props: { onConfirm: this.myAction }
+   *       });
+   *     }
+   *   }
+   * }
+   * ```
+   *
+   * ```ts
+   * export default {
+   *   props: {
+   *     onConfirm: {
+   *       type: Function,
+   *       required: true
+   *     }
+   *   },
+   *   methods:.
+   *     confirm() {
+   *       this.onConfirm();
+   *       this.$emit('close');
+   *     }
+   *   }
+   * }
+   * ```
    */
   props?: Record<string, any>;
 

package/apis/intf/slide-in.ts

@@ -65,7 +65,9 @@ export interface SlideInConfig {
    * Useful for passing additional information or context to the component rendered inside the Slide-In window
    *
    */
-  [key: string]: any;
+  props?: {
+    [key: string]: any;
+  };
 }
 
 /**

package/apis/shell/__tests__/slide-in.test.ts

@@ -51,4 +51,40 @@ describe('slideInApiImpl', () => {
       componentProps: { ...config }, // The implementation spreads the config
     });
   });
+
+  it('should open a slide-in panel with an undefined config gracefully', () => {
+    // 3. Act
+    slideInApi.open(MockComponent, undefined);
+
+    // 4. Assert
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {},
+    });
+  });
+
+  it('should handle config with props property', () => {
+    const config = {
+      title: 'Test Panel',
+      props: {
+        foo: 'bar',
+        baz: 123
+      }
+    };
+
+    // 3. Act
+    slideInApi.open(MockComponent, config);
+
+    // 4. Assert
+    expect(mockCommit).toHaveBeenCalledTimes(1);
+    expect(mockCommit).toHaveBeenCalledWith('slideInPanel/open', {
+      component:      MockComponent,
+      componentProps: {
+        title: 'Test Panel',
+        foo:   'bar',
+        baz:   123
+      },
+    });
+  });
 });

package/apis/shell/slide-in.ts

@@ -25,9 +25,13 @@ export class SlideInApiImpl implements SlideInApi {
    * @param config - Slide-In configuration object
    */
   public open(component: Component, config?: SlideInConfig): void {
+    const props = config?.props || {};
+
+    delete config?.props;
+
     this.store.commit('slideInPanel/open', {
       component,
-      componentProps: { ...config || {} }
+      componentProps: { ...(config || {}), ...props }
     });
   }
 }

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:
@@ -7332,39 +7356,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 +7541,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 +8414,11 @@ typeLabel:
       one { Role }
       other { Roles }
     }
+  replicationcontroller: |-
+    {count, plural,
+      one { Replication Controller }
+      other { Replication Controllers }
+    }
   scheduling.k8s.io.priorityclass: |-
     {count, plural,
       one { PriorityClass }
@@ -9099,11 +9154,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

@@ -874,8 +874,6 @@ catalog:
       windows: Windows
     search: 筛选
   install:
-    action:
-      goToUpgrade: 编辑/升级
     appReadmeMissing: 此 Chart 没有其他 Chart 信息。
     appReadmeTitle: Chart 信息（Helm 自述）
     chart: Chart

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;
@@ -97,7 +97,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>

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -3,6 +3,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
+import DrawerCard from '@shell/components/Drawer/DrawerCard.vue';
 import { ConfigProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
 const props = defineProps<ConfigProps>();
@@ -15,7 +16,7 @@ const i18n = useI18n(store);
     name="config-tab"
     :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
   >
-    <div class="container">
+    <DrawerCard>
       <component
         :is="props.component"
         :value="props.resource"
@@ -28,21 +29,12 @@ const i18n = useI18n(store);
         :default-tab="props.defaultTab"
         as="config"
       />
-    </div>
+    </DrawerCard>
   </Tab>
 </template>
 
 <style lang="scss" scoped>
 .config-tab {
-  .container {
-    background-color: var(--body-bg);
-    border-radius: var(--border-radius-md);
-    padding: 16px;
-    max-width: 100%;
-    width: 100%;
-    position: relative;
-  }
-
   // Handle the loading indicator
   :deep() .overlay-content-mode {
     left: 0;