@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/models/management.cattle.io.fleetworkspace.js

@@ -1,6 +1,7 @@
 import { COUNT, FLEET, NORMAN } from '@shell/config/types';
 import { filterBy } from '@shell/utils/array';
 import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 export default class Workspace extends HybridModel {
   get isLocal() {
@@ -14,7 +15,8 @@ export default class Workspace extends HybridModel {
     const out = {
       clusterGroups: summary[FLEET.CLUSTER_GROUP]?.namespaces?.[name]?.count || 0,
       clusters:      summary[FLEET.CLUSTER]?.namespaces?.[name]?.count || 0,
-      gitRepos:      summary[FLEET.GIT_REPO]?.namespaces?.[name]?.count || 0
+      gitRepos:      summary[FLEET.GIT_REPO]?.namespaces?.[name]?.count || 0,
+      helmOps:       summary[FLEET.HELM_OP]?.namespaces?.[name]?.count || 0
     };
 
     return out;
@@ -41,6 +43,13 @@ export default class Workspace extends HybridModel {
     return forWorkspace;
   }
 
+  get helmOps() {
+    const all = this.$getters['all'](FLEET.HELM_OP);
+    const forWorkspace = filterBy(all, 'namespace', this.id);
+
+    return forWorkspace;
+  }
+
   get basicNorman() {
     if (this.id) {
       return this.$dispatch(`rancher/find`, { id: this.id, type: NORMAN.FLEET_WORKSPACES }, { root: true });
@@ -87,4 +96,8 @@ export default class Workspace extends HybridModel {
   get confirmRemove() {
     return true;
   }
+
+  get systemAnnotations() {
+    return [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_DEFAULT];
+  }
 }

package/models/management.cattle.io.oidcclient.js

@@ -0,0 +1,18 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+
+export default class OIDCClient extends SteveModel {
+  get details() {
+    return [
+      ...this._details, {
+        label:   this.t('oidcclient.redirectURIs.label'),
+        content: this.spec.redirectURIs?.join(', ')
+      }, {
+        label:   this.t('oidcclient.refreshTokenExpirationSeconds.detailLabel'),
+        content: this.spec.refreshTokenExpirationSeconds
+      }, {
+        label:   this.t('oidcclient.tokenExpirationSeconds.detailLabel'),
+        content: this.spec.tokenExpirationSeconds
+      }
+    ];
+  }
+}

package/models/management.cattle.io.registration.js

@@ -0,0 +1,3 @@
+import SteveDescriptionModel from '@shell/plugins/steve/steve-description-class';
+
+export default class RancherRegistration extends SteveDescriptionModel { }

package/models/provisioning.cattle.io.cluster.js

@@ -162,8 +162,8 @@ export default class ProvCluster extends SteveModel {
 
     const all = actions.concat(out);
 
-    // If the cluster is a KEV1 cluster then prevent edit
-    if (this.isKev1) {
+    // If the cluster is a KEV1 cluster or Harvester cluster then prevent edit
+    if (this.isKev1 || this.isHarvester) {
       const edit = all.find((action) => action.action === 'goToEdit');
 
       if (edit) {
@@ -719,7 +719,7 @@ export default class ProvCluster extends SteveModel {
   async copyKubeConfig() {
     await this.mgmt?.copyKubeConfig();
 
-    this.$dispatch('growl/success', {
+    this.$dispatch('growl/info', {
       title:   this.t('cluster.copiedConfig'),
       timeout: 3000,
     }, { root: true });
@@ -736,7 +736,7 @@ export default class ProvCluster extends SteveModel {
   async snapshotAction() {
     try {
       await this.takeSnapshot();
-      this.$dispatch('growl/success', {
+      this.$dispatch('growl/info', {
         title:   this.$rootGetters['i18n/t']('cluster.snapshot.successTitle', { name: this.nameDisplay }),
         message: this.$rootGetters['i18n/t']('cluster.snapshot.successMessage', { name: this.nameDisplay })
       }, { root: true });
@@ -756,7 +756,7 @@ export default class ProvCluster extends SteveModel {
     const successful = res.filter( (x) => x.status === 'fulfilled').length;
 
     if ( successful ) {
-      this.$dispatch('growl/success', {
+      this.$dispatch('growl/info', {
         title:   this.$rootGetters['i18n/t']('cluster.snapshot.bulkSuccessTitle'),
         message: this.$rootGetters['i18n/t']('cluster.snapshot.bulkSuccessMessage', { count: successful })
       }, { root: true });

package/models/service.js

@@ -152,6 +152,10 @@ export default class Service extends SteveModel {
     });
   }
 
+  async unWatchPods() {
+    return await this.$dispatch('unwatch', { type: POD, all: true });
+  }
+
   /**
    * This getter expects a superset of workload pods to have been fetched already
    *

package/models/workload.js

@@ -1,5 +1,5 @@
 import { findBy, insertAt } from '@shell/utils/array';
-import { TIMESTAMP, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
+import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { WORKLOAD_TYPES, SERVICE, POD } from '@shell/config/types';
 import { get, set } from '@shell/utils/object';
 import day from 'dayjs';
@@ -48,11 +48,12 @@ export default class Workload extends WorkloadService {
       });
 
       insertAt(out, 0, {
-        action:   'redeploy',
-        label:    this.t('action.redeploy'),
-        icon:     'icon icon-refresh',
-        enabled:  !!this.links.update,
-        bulkable: true,
+        action:     'redeploy',
+        label:      this.t('action.redeploy'),
+        icon:       'icon icon-refresh',
+        enabled:    !!this.links.update,
+        bulkable:   true,
+        bulkAction: 'redeploy'
       });
 
       insertAt(out, 0, {
@@ -444,19 +445,14 @@ export default class Workload extends WorkloadService {
     return out;
   }
 
-  redeploy() {
-    const now = (new Date()).toISOString().replace(/\.\d+Z$/, 'Z');
+  redeploy(resources = this) {
+    const workloads = Array.isArray(resources) ? resources : [resources];
 
-    if ( !this.spec.template.metadata ) {
-      set(this.spec.template, 'metadata', {});
-    }
-
-    const annotations = this.spec.template.metadata.annotations || {};
-
-    annotations[TIMESTAMP] = now;
-    set(this.spec.template.metadata, 'annotations', annotations);
-
-    this.save();
+    this.$dispatch('promptModal', {
+      modalWidth:     '500px',
+      componentProps: { workloads },
+      component:      'RedeployWorkloadDialog'
+    });
   }
 
   // match existing container ports with services created for this workload
@@ -571,6 +567,10 @@ export default class Workload extends WorkloadService {
     return undefined;
   }
 
+  async unWatchPods() {
+    return await this.$dispatch('unwatch', { type: POD, all: true });
+  }
+
   /**
    * This getter expects a superset of workload pods to have been fetched already
    *
@@ -707,6 +707,7 @@ export default class Workload extends WorkloadService {
       $store:        this.$store || { getters: this.$rootGetters, dispatch: (action, args) => this.$dispatch(action.split('/')[1], args) },
       inStore:       this.$rootGetters['currentProduct'].inStore,
       namespace:     this.metadata.namespace,
+      transient:     true,
     });
 
     return matchInfo.matches;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5-rc.3", 
+  "version": "3.0.5-rc.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -56,6 +56,7 @@
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
+    "chart.js": "4.4.8",
     "clipboard-polyfill": "4.0.1",
     "codemirror-editor-vue3": "2.8.0",
     "codemirror": ">=5.64.0 <6",

package/pages/about.vue

@@ -5,7 +5,6 @@ import BackRoute from '@shell/mixins/back-link';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { getVendor } from '@shell/config/private-label';
-import { downloadFile } from '@shell/utils/download';
 import { mapGetters } from 'vuex';
 import TabTitle from '@shell/components/TabTitle';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
@@ -47,50 +46,27 @@ export default {
     },
     downloads() {
       return [
-        this.createOSOption('about.os.mac', 'icon-apple', this.settings?.find((s) => s.id === SETTING.CLI_URL.DARWIN)?.value, null),
-        this.createOSOption('about.os.linux', 'icon-linux', this.settings?.find((s) => s.id === SETTING.CLI_URL.LINUX)?.value, this.downloadLinuxImages),
-        this.createOSOption('about.os.windows', 'icon-windows', this.settings?.find((s) => s.id === SETTING.CLI_URL.WINDOWS)?.value, this.downloadWindowsImages)
+        this.createOSOption('about.os.mac', 'icon-apple', this.settings?.find((s) => s.id === SETTING.CLI_URL.DARWIN)?.value),
+        this.createOSOption('about.os.linux', 'icon-linux', this.settings?.find((s) => s.id === SETTING.CLI_URL.LINUX)?.value),
+        this.createOSOption('about.os.windows', 'icon-windows', this.settings?.find((s) => s.id === SETTING.CLI_URL.WINDOWS)?.value)
       ];
     },
-    downloadImageList() {
-      return this.downloads.filter((d) => !!d.imageList);
-    },
     downloadCli() {
       return this.downloads.filter((d) => !!d.cliLink);
     }
   },
   methods: {
-    createOSOption(label, icon, cliLink, imageList) {
+    createOSOption(label, icon, cliLink) {
       const slash = cliLink?.lastIndexOf('/');
 
       return {
         label,
         icon,
-        imageList,
         cliLink,
         cliFile: slash >= 0 ? cliLink.substr(slash + 1, cliLink.length - 1) : cliLink
       };
     },
 
-    async downloadLinuxImages() {
-      const res = await this.$store.dispatch('management/request', { url: '/v3/kontainerdrivers/rancher-images' });
-
-      try {
-        await downloadFile(`.rancher-linux-images.txt`, res.data);
-      } catch (error) {
-        this.$store.dispatch('growl/fromError', { title: 'Error downloading Linux image list', err: error }, { root: true });
-      }
-    },
-
-    async downloadWindowsImages() {
-      const res = await this.$store.dispatch('management/request', { url: '/v3/kontainerdrivers/rancher-windows-images' });
-
-      try {
-        await downloadFile(`.rancher-windows-images.txt`, res.data);
-      } catch (error) {
-        this.$store.dispatch('growl/fromError', { title: 'Error downloading Windows image list', err: error }, { root: true });
-      }
-    },
   }
 };
 </script>
@@ -215,36 +191,6 @@ export default {
         {{ t('about.versions.releaseNotes') }}
       </a>
     </p>
-    <template v-if="downloadImageList.length">
-      <h3 class="pt-40">
-        {{ t('about.downloadImageList.title') }}
-      </h3>
-      <table>
-        <tr
-          v-for="(d, i) in downloadImageList"
-          :key="i"
-        >
-          <th>
-            <div class="os">
-              <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
-            </div>
-          </th>
-          <td>
-            <a
-              v-if="d.imageList"
-              tabindex="0"
-              :data-testid="`image_list_download_link__${d.label}`"
-              role="link"
-              :aria-label="t('about.versions.downloadImages', { listName: t(d.label) })"
-              @click="d.imageList"
-              @keyup.enter="d.imageList"
-            >
-              {{ t('asyncButton.download.action') }}
-            </a>
-          </td>
-        </tr>
-      </table>
-    </template>
     <template v-if="downloadCli.length">
       <h3 class="pt-40">
         {{ t('about.downloadCLI.title') }}

package/pages/auth/login.vue

@@ -452,7 +452,7 @@ export default {
                   v-model:value="password"
                   data-testid="local-login-password"
                   :label="t('login.password')"
-                  autocomplete="password"
+                  autocomplete="current-password"
                 />
               </div>
             </div>

package/pages/auth/verify.vue

@@ -6,6 +6,7 @@ import { get } from '@shell/utils/object';
 import { base64Decode } from '@shell/utils/crypto';
 import loadPlugins from '@shell/plugins/plugin';
 import { LOGIN_ERRORS } from '@shell/store/auth';
+import { AUTH_BROADCAST_CHANNEL_NAME } from '@shell/utils/auth';
 
 const samlProviders = ['ping', 'adfs', 'keycloak', 'okta', 'shibboleth'];
 
@@ -13,11 +14,22 @@ const oauthProviders = ['github', 'googleoauth', 'azuread'];
 
 function reply(err, code) {
   try {
-    window.opener.window.onAuthTest(err, code);
+    // If we have access to the opener, then use the `onAuthTest` callback
+    if (window.opener) {
+      window.opener.window.onAuthTest(err, code);
+    } else {
+      // Otherwise, use a broadcast channel
+      const bc = new BroadcastChannel(AUTH_BROADCAST_CHANNEL_NAME);
+      const msg = { err, code };
+
+      bc.postMessage(JSON.stringify(msg));
+      bc.close();
+    }
     setTimeout(() => {
       window.close();
     }, 250);
   } catch (e) {
+    console.error('Error replying to authentication verification', e); // eslint-disable-line no-console
     window.close();
   }
 }

package/pages/c/_cluster/apps/charts/AddRepoLink.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+
+defineProps<{
+  clusterId: string;
+}>();
+
+</script>
+
+<template>
+  <router-link
+    :to="`/c/${clusterId}/apps/catalog.cattle.io.clusterrepo/create`"
+    class="add-repo-link"
+    tabindex="0"
+    :aria-label="t('catalog.charts.addNewRepo.ariaLabel')"
+  >
+    <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+    + <span class="secondary-text-link">{{ t('catalog.charts.addNewRepo.label') }}</span>
+  </router-link>
+</template>
+
+<style scoped lang="scss">
+.add-repo-link {
+  all: unset;
+  cursor: pointer;
+  color: var(--link-text-secondary);
+  margin-left: 4px;
+
+  &:focus-visible, &:focus {
+    @include focus-outline;
+  }
+
+  span {
+    margin-left: 4px;
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { RcItemCardAction } from '@components/RcItemCard';
+
+interface FooterItem {
+  icon?: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  labels: string[];
+}
+
+const emit = defineEmits<{(e: 'click:item', type: string, label: string): void; }>();
+
+defineProps<{
+  items: FooterItem[];
+}>();
+
+function onClickItem(type: string, label: string) {
+  emit('click:item', type, label);
+}
+
+</script>
+
+<template>
+  <div class="app-chart-card-footer">
+    <div
+      v-for="(footerItem, i) in items"
+      :key="i"
+      class="app-chart-card-footer-item"
+      data-testid="app-chart-card-footer-item"
+    >
+      <i
+        v-if="footerItem.icon"
+        v-clean-tooltip="t(footerItem.iconTooltip?.key)"
+        :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
+      />
+      <rc-item-card-action
+        v-for="(label, j) in footerItem.labels"
+        :key="j"
+        class="app-chart-card-footer-item-text secondary-text-link"
+        data-testid="app-chart-card-footer-item-text"
+        tabindex="0"
+        :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
+        @click="onClickItem(footerItem.type, label)"
+        @keydown.enter="onClickItem(footerItem.type, label)"
+        @keydown.space.prevent="onClickItem(footerItem.type, label)"
+      >
+        {{ label }}<span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+      </rc-item-card-action>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    color: var(--link-text-secondary);
+    margin-top: 8px;
+    margin-right: 8px;
+
+    &-text {
+      text-transform: capitalize;
+      margin-right: 8px;
+    }
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      font-size: 19px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/AppChartCardSubHeader.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+interface SubHeaderItem {
+  icon: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  label: string;
+}
+
+defineProps<{
+  items: SubHeaderItem[];
+}>();
+
+</script>
+
+<template>
+  <div class="app-chart-card-sub-header">
+    <div
+      v-for="(subHeaderItem, i) in items"
+      :key="i"
+      class="app-chart-card-sub-header-item"
+      data-testid="app-chart-card-version"
+    >
+      <i
+        v-clean-tooltip="t(subHeaderItem.iconTooltip.key)"
+        :class="['icon', 'app-chart-card-sub-header-item-icon', subHeaderItem.icon]"
+      />
+      <p>{{ subHeaderItem.label }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-sub-header {
+  display: flex;
+  gap: var(--gap-md);
+  color: var(--link-text-secondary);
+  margin-bottom: 8px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-item-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    font-size: 19px;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/StatusLabel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+defineProps<{
+  label: string;
+  icon: string;
+  iconColor?: string;
+  tooltip?: string;
+}>();
+
+</script>
+
+<template>
+  <div class="status-label">
+    {{ label }}
+    <i
+      v-clean-tooltip.right="tooltip"
+      :class="['icon', icon, iconColor]"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.status-label {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--gap);
+  margin-left: 4px;
+
+  .icon {
+    &.warning  { color: var(--warning); }
+  }
+}
+</style>