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

package/plugins/dashboard-store/actions.js

@@ -408,10 +408,12 @@ export default {
    *
    * @param {*} ctx
    * @param { {type: string, opt: ActionFindPageArgs} } opt
+   * @returns @ActionFindPageResponse
    */
   async findPage(ctx, { type, opt }) {
     const { getters, commit, dispatch } = ctx;
 
+    // of type @ActionFindPageArgs
     opt = opt || {};
 
     if (!opt.pagination) {
@@ -443,7 +445,7 @@ export default {
       return findAllGetter(getters, type, opt);
     }
 
-    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Size: ${ opt.pagination.pageSize }`); // eslint-disable-line no-console
+    console.log(`Find Page: [${ ctx.state.config.namespace }] ${ type }. Page: ${ opt.pagination.page }. Size: ${ opt.pagination.pageSize }. Sort: ${ opt.pagination.sort.map((s) => s.field).join(', ') }`); // eslint-disable-line no-console
     opt = opt || {};
     opt.url = getters.urlFor(type, null, opt);
 
@@ -512,6 +514,9 @@ export default {
    * b) Pagination Disabled - use the old 'native kube api' - findMatching
    *
    * Filter is defined via the kube labelSelector object (see KubeLabelSelector)
+   *
+   * opt: @ActionFindLabelSelectorArgs
+   * @returns @ActionFindMatchingResponse (resources[], or if transient { data: resources[], pagination: StorePagination })
    */
   async findLabelSelector(ctx, {
     type,
@@ -528,6 +533,8 @@ export default {
       context,
     };
 
+    opt = opt || {};
+
     if (getters[`paginationEnabled`]?.(args)) {
       if (isLabelSelectorEmpty(labelSelector)) {
         throw new Error(`labelSelector must not be empty when using findLabelSelector (avoid fetching all resources)`);
@@ -537,21 +544,28 @@ export default {
       return dispatch('findPage', {
         type,
         opt: {
-          ...(opt || {}),
+          ...opt,
           namespaced: namespace,
           pagination: new FilterArgs({ labelSelector }),
+          transient:  opt?.transient !== undefined ? opt.transient : false // Call this out explicitly here, as by default findX methods ar eusually be cached AND watched
         }
       });
     }
 
-    return dispatch('findMatching', {
+    // opt of type ActionFindPageArgs
+    const findMatching = await dispatch('findMatching', {
       type,
       selector: labelSelectorToSelector(labelSelector),
       opt,
       namespace,
     });
+
+    return opt.transient ? { data: findMatching } : findMatching;
   },
 
+  /**
+   * opt: @ActionFindMatchingArgs
+   */
   async findMatching(ctx, {
     type,
     selector,
@@ -796,9 +810,9 @@ export default {
 
   // Forget a type in the store
   // Remove all entries for that type and stop watching it
-  forgetType({ commit, dispatch, state }, type) {
+  forgetType({ commit, dispatch, state }, type, compareWatches) {
     state.started
-      .filter((entry) => entry.type === type)
+      .filter((entry) => compareWatches ? compareWatches(entry) : entry.type === type)
       .forEach((entry) => dispatch('unwatch', entry));
 
     commit('forgetType', type);

package/plugins/dashboard-store/getters.js

@@ -152,6 +152,10 @@ export default {
       return getters.all(type);
     }
 
+    if (getters['havePage'](type)) {
+      return getters.all(type);
+    }
+
     // Does the store have all and we can pretend like it contains a result of a labelSelector?
     if (getters['haveAll'](type)) {
       return getters.matching( type, selector, namespace );

package/plugins/dashboard-store/normalize.js

@@ -17,28 +17,40 @@ export function normalizeType(type) {
   return type;
 }
 
-// Detect and resolve conflicts from a 409 response.
-// If they are resolved, return a false-y value
-// Else they can't be resolved, return an array of errors to show to the user.
-export async function handleConflict(initialValueJSON, value, liveValue, rootGetters, store, storeNamespace) {
-  const orig = await store.dispatch(`${ storeNamespace }/cleanForDiff`, initialValueJSON, { root: true });
-  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, value.toJSON(), { root: true });
-  const cur = await store.dispatch(`${ storeNamespace }/cleanForDiff`, liveValue.toJSON(), { root: true });
-
-  const bgChange = changeset(orig, cur);
-  const userChange = changeset(orig, user);
-  const actualConflicts = changesetConflicts(bgChange, userChange);
-
-  console.log('Background Change', bgChange); // eslint-disable-line no-console
-  console.log('User Change', userChange); // eslint-disable-line no-console
+/**
+ * Detect and resolve conflicts from a 409 response.
+ *
+ * @param {*} initialValue the initial value before changes
+ * @param {*} userValue the value containing the local changes. this function will intentionally mutate this to contain changes made from the server
+ * @param {*} serverValue the very latest value from the server
+ * @returns If `value` has been successfully updated return a false-y value. Else they can't be resolved, return an array of errors to show the user.
+ */
+export async function handleConflict(initialValue, userValue, serverValue, store, storeNamespace, toJSON = (x) => x.toJSON()) {
+  // initial value
+  const initial = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(initialValue), { root: true });
+  // changed value (user edits)
+  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(userValue), { root: true });
+  // server value
+  const server = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(serverValue), { root: true });
+
+  // changes made to the server value
+  const serverChanges = changeset(initial, server);
+  // changes made locally
+  const userChanges = changeset(initial, user);
+  // Any incompatibilities between changes made locally and the server?
+  const actualConflicts = changesetConflicts(serverChanges, userChanges);
+
+  console.log('Background Change', serverChanges); // eslint-disable-line no-console
+  console.log('User Change', userChanges); // eslint-disable-line no-console
   console.log('Conflicts', actualConflicts); // eslint-disable-line no-console
 
-  value.metadata.resourceVersion = liveValue.metadata.resourceVersion;
-  applyChangeset(value, bgChange);
+  userValue.metadata.resourceVersion = serverValue.metadata.resourceVersion;
+  // Apply changes made on the server to the changed (user) value
+  applyChangeset(userValue, serverChanges);
 
   if ( actualConflicts.length ) {
     // Stop the save and let the user inspect and continue editing
-    const out = [rootGetters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
+    const out = [store.getters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
 
     return out;
   } else {

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

@@ -32,6 +32,7 @@ import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
 import { markRaw } from 'vue';
 
+import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { parse } from '@shell/utils/selector';
@@ -736,6 +737,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-');
   }
@@ -1332,9 +1344,7 @@ export default class Resource {
     this.currentRouter().push(location);
   }
 
-  goToEdit(moreQuery = {}) {
-    const location = this.detailLocation;
-
+  goToEdit(moreQuery = {}, location = this.detailLocation) {
     location.query = {
       ...location.query,
       [MODE]: _EDIT,
@@ -1517,11 +1527,11 @@ export default class Resource {
     }
   }
 
-  async saveYaml(yaml) {
-    await this._saveYaml(yaml);
+  async saveYaml(yaml, initialYaml) {
+    await this._saveYaml(yaml, initialYaml);
   }
 
-  async _saveYaml(yaml) {
+  async _saveYaml(yaml, initialYaml, depth = 0) {
     /* Multipart support, but need to know the right cluster and work for management store
       and "apply" seems to only work for create, not update.
 
@@ -1559,20 +1569,56 @@ export default class Resource {
         data:   yaml
       });
     } else {
-      res = await this.followLink('update', {
-        method: 'PUT',
-        headers,
-        data:   yaml
-      });
+      try {
+        res = await this.followLink('update', {
+          method: 'PUT',
+          headers,
+          data:   yaml
+        });
+      } catch (err) {
+        const IS_ERR_409 = err.status === 409 || err._status === 409;
+
+        // Conflict, the resource being edited has changed since starting editing
+        if (IS_ERR_409 && depth === 0 && initialYaml) {
+          const inStore = this.$rootGetters['currentStore'](this.type);
+
+          const initialValue = jsyaml.load(initialYaml);
+          const value = jsyaml.load(yaml);
+          const liveValue = this.$rootGetters[`${ inStore }/byId`](this.type, this.id);
+
+          const handledConflictErr = await handleConflict(
+            initialValue,
+            value,
+            liveValue,
+            {
+              dispatch: this.$dispatch,
+              getters:  this.$rootGetters
+            },
+            this.$rootGetters['currentStore'](this.type),
+            (v) => v.toJSON ? v.toJSON() : v
+          );
+
+          if (handledConflictErr === false) {
+            // It was automatically figured out, save again
+            await this._saveYaml(jsyaml.dump(value), null, depth + 1);
+          } else {
+            throw handledConflictErr;
+          }
+        } else {
+          throw err;
+        }
+      }
     }
 
-    await this.$dispatch(`load`, {
-      data:     res,
-      existing: (isCreate ? this : undefined)
-    });
+    if (res) {
+      await this.$dispatch(`load`, {
+        data:     res,
+        existing: (isCreate ? this : undefined)
+      });
 
-    if (this.isSpoofed) {
-      await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      if (this.isSpoofed) {
+        await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      }
     }
   }
 
@@ -1868,10 +1914,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

@@ -15,7 +15,9 @@ import {
   HPA,
   SECRET
 } from '@shell/config/types';
-import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE } from '@shell/config/labels-annotations';
+import {
+  CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS, STORAGE, UI_PROJECT_SECRET, UI_PROJECT_SECRET_COPY
+} from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
 import { PaginationSettingsStore } from '@shell/types/resources/settings';
 import paginationUtils from '@shell/utils/pagination-utils';
@@ -184,6 +186,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     [CONFIG_MAP]: [
       { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
     ],
+    [SECRET]: [
+      { field: `metadata.labels[${ UI_PROJECT_SECRET }]` },
+      { field: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]` },
+    ],
     [NAMESPACE]: [
       { field: 'metadata.labels[field.cattle.io/projectId]' }
     ],
@@ -454,7 +460,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 +505,29 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const value = encodeURIComponent(field.value);
+              // we're just checking that the field exists, so there's no value
+              if (field.exists) {
+                return field.field;
+              }
+              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 +676,20 @@ 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'] },
+          SECRET
+        ],
+        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']);
 }