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

package/plugins/dashboard-store/resource-class.js

@@ -736,6 +736,17 @@ export default class Resource {
     );
   }
 
+  get stateColorPair() {
+    return {
+      state: this.stateDisplay,
+      color: this.stateSimpleColor
+    };
+  }
+
+  get stateSimpleColor() {
+    return this.stateColor.replace('text-', '');
+  }
+
   get stateBackground() {
     return this.stateColor.replace('text-', 'bg-');
   }
@@ -1868,10 +1879,13 @@ export default class Resource {
           namespace,
           labelSelector: { matchExpressions: parse(selector) }
         },
-        opts: opt
+        opts: {
+          transient: true,
+          ...opt,
+        },
       });
 
-      addObjects(out, matching);
+      addObjects(out, matching.data);
     }
 
     // Find all the resources that match the required id's

package/plugins/steve/steve-pagination-utils.ts

@@ -454,7 +454,6 @@ class StevePaginationUtils extends NamespaceProjectFilters {
 
     // First check in our hardcoded list of supported filters
     if (
-      process.env.NODE_ENV === 'dev' &&
       !!schema &&
       [
         StevePaginationUtils.VALID_FIELDS[''], // Global
@@ -500,16 +499,25 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const value = encodeURIComponent(field.value);
+              const encodedValue = encodeURIComponent(field.value);
 
               // = exact match (equals + exact)
               // ~ partial match (equals + !exact)
               // != not exact match (!equals + exact)
               // !~ not partial match (!equals + !exact)
               const operator = `${ field.equals ? '' : '!' }${ field.exact ? '=' : '~' }`;
-              const quotedValue = StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(value) ? value : `"${ value }"`;
-
-              return `${ this.convertArrayPath(field.field) }${ operator }${ quotedValue }`;
+              let safeValue;
+
+              if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value)) {
+                // Does not contain any protected characters, send as is
+                safeValue = encodedValue;
+              } else {
+                // Contains protected characters, wrap in quotes to ensure backend doesn't fail
+                // - replace reserver `"`/`%22` with empty string - see https://github.com/rancher/dashboard/issues/14549 for improvement
+                safeValue = `"${ encodedValue.replaceAll('%22', '') }"`;
+              }
+
+              return `${ this.convertArrayPath(field.field) }${ operator }${ safeValue }`;
             }
 
             return field.value;
@@ -658,19 +666,19 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
       }
     }
   },
-  // Disabled due to https://github.com/rancher/dashboard/issues/14493
-  // management: {
-  //   resources: {
-  //     enableAll:  false,
-  //     enableSome: {
-  //       enabled: [
-  //         { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
-  //         { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
-  //       ],
-  //       generic: false,
-  //     }
-  //   }
-  // }
+  management: {
+    resources: {
+      enableAll:  false,
+      enableSome: {
+        enabled: [
+          // { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] }, // Disabled due to https://github.com/rancher/dashboard/issues/14493
+          // { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] }, // Disabled due to https://github.com/rancher/dashboard/issues/14493
+          { resource: CATALOG.APP, context: ['branding'] },
+        ],
+        generic: false,
+      }
+    }
+  }
 };
 
 export default new StevePaginationUtils();

package/plugins/steve/subscribe.js

@@ -544,6 +544,9 @@ const sharedActions = {
     return dispatch('send', msg);
   },
 
+  /**
+   * @param {STEVE_WATCH_PARAMS} params
+   */
   unwatch(ctx, {
     type, id, namespace, selector, all, mode
   }) {
@@ -577,7 +580,7 @@ const sharedActions = {
         dispatch('watch', obj); // Ask the backend to stop watching the type
       } else if (all) {
         getters['watchesOfType'](type).forEach((obj) => {
-          unwatch(obj);
+          unwatch({ ...obj, stop: true });
         });
       } else if (getters['watchStarted'](obj)) {
         unwatch(obj);
@@ -752,6 +755,7 @@ const defaultActions = {
       if (mode === STEVE_WATCH_MODE.RESOURCE_CHANGES) {
         // Other findX use options (id/ns/selector) from the messages received over socket.
         // However paginated requests have more complex params so grab them from store from the store.
+        // of type @StorePagination
         const storePagination = getters['havePage'](resourceType);
 
         if (!!storePagination) {
@@ -766,6 +770,7 @@ const defaultActions = {
             type: resourceType,
             opt:  {
               ...opt,
+              namespaced: namespace,
               // This brings in page, page size, filter, etc
               ...storePagination.request
             }

package/rancher-components/Banner/Banner.vue

@@ -3,6 +3,19 @@ import { defineComponent } from 'vue';
 import { nlToBr, generateRandomAlphaString } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
+/**
+ * These should eventually be used when making this component use the composable api but I need the props elsewhere so I'm defining them here.
+ */
+export interface Props {
+  color?: string;
+  label?: string | Error | Object;
+  labelKey?: string;
+  icon?: string;
+  closable?: boolean;
+  stacked?: boolean;
+  disabled?: boolean;
+}
+
 export default defineComponent({
   props: {
     /**

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -305,12 +305,15 @@ export default defineComponent({
         :class="{ 'checkbox-primary': primary }"
       >
         <slot name="label">
-          <t
+          <span
             v-if="labelKey"
             :id="idForLabel"
-            :k="labelKey"
-            :raw="true"
-          />
+          >
+            <t
+              :k="labelKey"
+              :raw="true"
+            />
+          </span>
           <span
             v-else-if="label"
             :id="idForLabel"
@@ -322,6 +325,7 @@ export default defineComponent({
             class="checkbox-info icon icon-info icon-lg"
             :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
+            role="tooltip"
           />
           <i
             v-else-if="tooltip"
@@ -330,6 +334,7 @@ export default defineComponent({
             class="checkbox-info icon icon-info icon-lg"
             :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
+            role="tooltip"
           />
         </slot>
       </span>

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -407,7 +407,7 @@ export default defineComponent({
         :id="inputId"
         ref="value"
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
-        role="textbox"
+        :role="type === 'number' ? undefined : 'textbox'"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :maxlength="_maxlength"

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -73,6 +73,7 @@ export default defineComponent({
         class="icon status-icon"
         tabindex="0"
         :data-testid="componentTestid"
+        role="tooltip"
       />
     </template>
     <template v-else>

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -80,7 +80,7 @@ interface RcItemCardProps {
   image?: Image;
 
   /** Optional actions that will be displayed inside an action-menu */
-  actions?: DropdownOption;
+  actions?: DropdownOption[];
 
   /** Text content inside the card body. A slot is available for it too #item-card-content */
   content?: Label;
@@ -149,6 +149,10 @@ const cardMeta = computed(() => ({
   <div
     ref="cardEl"
     class="item-card"
+    :class="{
+      'clickable':
+        clickable
+    }"
     :role="cardMeta.role"
     :tabindex="cardMeta.tabIndex"
     :aria-label="cardMeta.ariaLabel"
@@ -288,7 +292,7 @@ $image-medium-box-width: 48px;
   border: 1px solid var(--border);
   background: var(--body-bg);
 
-  &:hover {
+  &.clickable:hover {
     border-color: var(--primary);
   }
 
@@ -329,10 +333,11 @@ $image-medium-box-width: 48px;
 
     &-left {
       flex-grow: 1;
+      min-width: 0;
     }
 
     &-title {
-      max-width: 60%;
+      max-width: 80%;
       font-size: 18px;
       font-weight: 600;
       margin-bottom: 0px;

package/store/auth.js

@@ -356,6 +356,8 @@ export const actions = {
 
     commit('loggedOut');
     dispatch('onLogout', null, { root: true });
+
+    dispatch('uiplugins/setReady', false, { root: true });
   },
 
   async logout({ dispatch, getters, rootState }, options = {}) {

package/store/catalog.js

@@ -1,4 +1,4 @@
-import { CATALOG, EXPERIMENTAL, DEPRECATED } from '@shell/config/types';
+import { CATALOG, EXPERIMENTAL, DEPRECATED, CATALOG_SORT_OPTIONS } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { addParams } from '@shell/utils/url';
 import { allHash, allHashSettled } from '@shell/utils/promise';
@@ -536,6 +536,7 @@ function addChart(ctx, map, chart, repo) {
       chartNameDisplay: chart.annotations?.[CATALOG_ANNOTATIONS.DISPLAY_NAME] || chart.name,
       chartDescription: chart.description,
       featured:         chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED],
+      featuredIndex:    chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED] ? Number(chart.annotations?.[CATALOG_ANNOTATIONS.FEATURED]) : Number.MAX_SAFE_INTEGER,
       repoKey:          repo._key,
       versions:         [],
       categories:       filterCategories(chart.keywords),
@@ -565,6 +566,10 @@ function addChart(ctx, map, chart, repo) {
   }
 
   obj.versions.push(chart);
+
+  if (!obj.durationSinceRelease) {
+    obj.durationSinceRelease = Date.now() - new Date(obj.versions[0].created).getTime();
+  }
 }
 
 function preferSameRepo(matching, repoType, repoName) {
@@ -648,6 +653,7 @@ export function filterAndArrangeCharts(charts, {
   category,
   tag,
   searchQuery,
+  sort,
   showDeprecated = false,
   showHidden = false,
   showPrerelease = true,
@@ -700,5 +706,21 @@ export function filterAndArrangeCharts(charts, {
     return true;
   });
 
+  if (sort === CATALOG_SORT_OPTIONS.RECOMMENDED) {
+    return sortBy(out, ['featuredIndex', 'certifiedSort', 'repoName', 'chartNameDisplay']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC) {
+    return sortBy(out, ['durationSinceRelease', 'featuredIndex', 'certifiedSort', 'repoName', 'chartNameDisplay']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC) {
+    return sortBy(out, ['chartNameDisplay', 'featuredIndex', 'certifiedSort', 'repoName']);
+  }
+
+  if (sort === CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC) {
+    return sortBy(out, ['chartNameDisplay'], true);
+  }
+
   return sortBy(out, ['certifiedSort', 'repoName', 'chartNameDisplay']);
 }

package/store/growl.js

@@ -1,8 +1,11 @@
 import { clear, findBy, removeObject } from '@shell/utils/array';
 import { stringify } from '@shell/utils/error';
+import { NotificationLevel } from '@shell/types/notifications';
 
 const DEFAULT_TIMEOUT = 5000;
 
+const MAX_GROWLS = 5;
+
 export const state = function() {
   return {
     nextId: 1,
@@ -13,18 +16,28 @@ export const state = function() {
 export const getters = {
   find: (state) => ({ key, val }) => {
     return findBy(state.stack, key, val);
+  },
+
+  // findBy is slow, so more efficient getter for id
+  byId: (state) => (id) => {
+    return state.stack.find((item) => item.id === id);
   }
 };
 
 export const mutations = {
   add(state, data) {
+    if (state.stack.length === MAX_GROWLS) {
+      // Remove the last one
+      state.stack.pop();
+    }
+
     state.stack = [
-      ...state.stack,
       {
         id:      state.nextId++,
         started: (new Date().getTime()),
         ...data
-      }
+      },
+      ...state.stack
     ];
   },
 
@@ -50,11 +63,29 @@ export const actions = {
     commit('remove', id);
   },
 
-  success({ commit }, data) {
+  async close({ commit, dispatch, getters }, id ) {
+    const growl = getters.byId(id);
+
+    commit('remove', id);
+
+    // If the growl has a notification, mark it as read if the user dismisses the growl
+    if (growl.notification) {
+      await dispatch('notifications/markRead', growl.notification, { root: true });
+    }
+  },
+
+  async success({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Success
+    }, { root: true });
+
     commit('add', {
       color:   'success',
       icon:    'checkmark',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
@@ -68,31 +99,89 @@ export const actions = {
     });
   },
 
-  warning({ commit }, data) {
+  async warning({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Warning
+    }, { root: true });
+
     commit('add', {
       color:   'warning',
       icon:    'warning',
       timeout: DEFAULT_TIMEOUT,
+      notification,
       ...data
     });
   },
 
-  error({ commit }, data) {
+  async error({ commit, dispatch }, data) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      ...data,
+      level: NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       ...data
     });
   },
 
-  fromError({ commit }, { title, err }) {
+  async fromError({ commit, dispatch }, { title, err }) {
+    // Send a notification for the growl
+    const notification = await dispatch('notifications/fromGrowl', {
+      title,
+      message: stringify(err),
+      level:   NotificationLevel.Error
+    }, { root: true });
+
     commit('add', {
       color:   'error',
       icon:    'error',
-      timeout: 0, // Errors don't timeout
+      timeout: DEFAULT_TIMEOUT, // Errors timeout since they will be available as a notification
+      notification,
       title,
       message: stringify(err),
     });
+  },
+
+  /**
+   * Used to create a growl when a notification is sent
+   *
+   * Growls are only shown for Success, Warning and Error notifications
+   */
+  notification({ commit }, notification) {
+    const growl = {
+      title:        notification.title,
+      message:      notification.message,
+      notification: notification.id,
+      timeout:      DEFAULT_TIMEOUT,
+    };
+
+    switch (notification.level) {
+    case NotificationLevel.Success:
+      growl.color = 'success';
+      growl.icon = 'checkmark';
+      break;
+    case NotificationLevel.Warning:
+      growl.color = 'warning';
+      growl.icon = 'warning';
+      break;
+    case NotificationLevel.Error:
+      growl.color = 'error';
+      growl.icon = 'error';
+      break;
+    default:
+      growl.skip = true;
+    }
+
+    // We don't show growls for info, announcement, task
+    if (!growl.skip) {
+      commit('add', growl);
+    }
   }
 };

package/store/index.js

@@ -39,6 +39,7 @@ import { STORE, BLANK_CLUSTER } from '@shell/store/store-types';
 import { isDevBuild } from '@shell/utils/version';
 import { markRaw } from 'vue';
 import paginationUtils from '@shell/utils/pagination-utils';
+import { addReleaseNotesNotification } from '@shell/utils/release-notes';
 
 // Disables strict mode for all store instances to prevent warning about changing state outside of mutations
 // because it's more efficient to do that sometimes.
@@ -896,6 +897,11 @@ export const actions = {
       setBrand(brand);
     }
 
+    // Add the notification for the release notes
+    if (isRancher) {
+      await addReleaseNotesNotification(dispatch, getters);
+    }
+
     if (systemNamespaces) {
       const namespace = (systemNamespaces.value || systemNamespaces.default)?.split(',');