@rancher/shell 0.5.3 → 2.0.0

package/store/index.js

@@ -1,7 +1,9 @@
 import { BACK_TO } from '@shell/config/local-storage';
 import { setBrand, setVendor } from '@shell/config/private-label';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { LOGGED_OUT, TIMED_OUT, UPGRADED, _FLAGGED } from '@shell/config/query-params';
+import {
+  LOGGED_OUT, IS_SSO, TIMED_OUT, UPGRADED, _FLAGGED
+} from '@shell/config/query-params';
 import { SETTING } from '@shell/config/settings';
 import {
   COUNT,
@@ -35,6 +37,7 @@ import { addParam } from '@shell/utils/url';
 import semver from 'semver';
 import { STORE, BLANK_CLUSTER } from '@shell/store/store-types';
 import { isDevBuild } from '@shell/utils/version';
+import { markRaw } from 'vue';
 
 // 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.
@@ -144,7 +147,7 @@ const getReadOnlyActiveNamespaces = (namespaces, activeNamespaces) => {
 };
 
 /**
- * Collect all the namespaces grouped by category, project or single pick
+ * Collect all the namespaces for the current cluster grouped by category, project or single pick
  * @returns Record<string, true>
  */
 const getActiveNamespaces = (state, getters, readonly = false) => {
@@ -238,11 +241,16 @@ export const state = () => {
     error:                   null,
     cameFromError:           false,
     pageActions:             [],
+    pageActionHandler:       null,
     serverVersion:           null,
     systemNamespaces:        [],
     isSingleProduct:         undefined,
     isRancherInHarvester:    false,
-    targetRoute:             null
+    targetRoute:             null,
+    rootProduct:             undefined,
+    $router:                 markRaw(undefined),
+    $route:                  markRaw(undefined),
+    $plugin:                 markRaw(undefined),
   };
 };
 
@@ -305,6 +313,13 @@ export const getters = {
     return out;
   },
 
+  // Get the root product - this is either the current product or the current product's root (if set)
+  // Used for navigation and other areas that don't want to re-evaluate when the product changes, but is still within
+  // a common root product
+  rootProduct(state) {
+    return state.rootProduct;
+  },
+
   getStoreNameByProductId(state) {
     const products = state['type-map']?.products;
 
@@ -328,13 +343,9 @@ export const getters = {
   },
 
   isExplorer(state, getters) {
-    const product = getters.currentProduct;
-
-    if ( !product ) {
-      return false;
-    }
+    const product = getters.rootProduct;
 
-    return product.name === EXPLORER || product.inStore === 'cluster';
+    return product?.name === EXPLORER;
   },
 
   defaultClusterId(state, getters) {
@@ -394,6 +405,9 @@ export const getters = {
     return !filters[0].startsWith(NAMESPACE_FILTER_NS_FULL_PREFIX);
   },
 
+  /**
+   * Namespace/Project filter for the current cluster
+   */
   namespaceFilters(state) {
     const filters = state.namespaceFilters.filter((x) => !!x && !`${ x }`.startsWith(NAMESPACED_PREFIX));
 
@@ -446,6 +460,9 @@ export const getters = {
     return state.namespaceFilters;
   },
 
+  /**
+   * All namespaces in the current cluster
+   */
   allNamespaces(state) {
     return state.allNamespaces;
   },
@@ -592,6 +609,14 @@ export const getters = {
 };
 
 export const mutations = {
+  pageActionHandler(state, handler) {
+    if (handler && typeof handler === 'function') {
+      state.pageActionHandler = handler;
+    }
+  },
+  clearPageActionHandler(state) {
+    state.pageActionHandler = null;
+  },
   managementChanged(state, { ready, isRancher }) {
     state.managementReady = ready;
     state.isRancher = isRancher;
@@ -604,15 +629,19 @@ export const mutations = {
     state.isRancherInHarvester = neu;
   },
 
-  updateNamespaces(state, { filters, all, getters }) {
+  /**
+   * Updates cluster specific ns settings, including the selected ns cache `activeNamespaceCache`
+   */
+  updateNamespaces(state, { filters, all, getters: optGetters }) {
     state.namespaceFilters = filters.filter((x) => !!x);
 
     if ( all ) {
       state.allNamespaces = all;
     }
-    // Create map that can be used to efficiently check if a
-    // resource should be displayed
-    getActiveNamespaces(state, getters);
+    // - Create map that can be used to efficiently check if a resource should be displayed.
+    // - The 'getters' parameter is required to preserve compatibility with older Harvester's versions in embedded mode.
+    //   see https://github.com/rancher/dashboard/issues/10647
+    getActiveNamespaces(state, optGetters || getters);
   },
 
   changeAllNamespaces(state, namespace) {
@@ -650,8 +679,20 @@ export const mutations = {
     state.clusterId = neu;
   },
 
-  setProduct(state, neu) {
-    state.productId = neu;
+  setProduct(state, value) {
+    state.productId = value;
+
+    // Update rootProduct ONLY if the root product has changed as a result of the product change
+    const newProduct = this.getters['type-map/productByName'](value);
+    let newRootProduct = newProduct;
+
+    if (newProduct?.rootProduct) {
+      newRootProduct = this.getters['type-map/productByName'](newProduct.rootProduct) || newProduct;
+    }
+
+    if (newRootProduct?.name !== state.rootProduct?.name) {
+      state.rootProduct = newRootProduct;
+    }
   },
 
   setError(state, { error: obj, locationError }) {
@@ -685,10 +726,27 @@ export const mutations = {
 
   targetRoute(state, route) {
     state.targetRoute = route;
+  },
+
+  setRouter(state, router) {
+    state.$router = markRaw(router);
+  },
+
+  setRoute(state, route) {
+    state.$route = markRaw(route);
+  },
+
+  setPlugin(state, pluginDefinition) {
+    state.$plugin = markRaw(pluginDefinition);
   }
 };
 
 export const actions = {
+  handlePageAction({ state }, action) {
+    if (state.pageActionHandler) {
+      state.pageActionHandler(action);
+    }
+  },
   async loadManagement({
     getters, state, commit, dispatch, rootGetters
   }) {
@@ -711,14 +769,24 @@ export const actions = {
       rancherSchemas: dispatch('rancher/loadSchemas', true),
     });
 
+    // Note - why aren't we watching anything fetched in the `promises` object?
+    // To watch we need feature flags to know that the vai cache is enabled.
+    // So to work around this we won't watch anything initially... and then watch once we have feature flags
+    // The alternative is simpler (fetch features up front) but would add another blocking request in
+
     const promises = {
       // Clusters guaranteed always available or your money back
-      clusters: dispatch('management/findAll', { type: MANAGEMENT.CLUSTER }),
+      clusters: dispatch('management/findAll', { type: MANAGEMENT.CLUSTER, opt: { watch: false } }),
 
       // Features checks on its own if they are available
       features: dispatch('features/loadServer'),
     };
 
+    const toWatch = [
+      MANAGEMENT.CLUSTER,
+      MANAGEMENT.FEATURE,
+    ];
+
     const isRancher = res.rancherSchemas.status === 'fulfilled' && !!getters['management/schemaFor'](MANAGEMENT.PROJECT);
 
     if ( isRancher ) {
@@ -727,25 +795,34 @@ export const actions = {
     }
 
     if ( getters['management/schemaFor'](COUNT) ) {
-      promises['counts'] = dispatch('management/findAll', { type: COUNT });
+      promises['counts'] = dispatch('management/findAll', { type: COUNT, opt: { watch: false } });
+      toWatch.push(COUNT);
     }
 
     if ( getters['management/canList'](MANAGEMENT.SETTING) ) {
-      promises['settings'] = dispatch('management/findAll', { type: MANAGEMENT.SETTING });
+      promises['settings'] = dispatch('management/findAll', { type: MANAGEMENT.SETTING, opt: { watch: false } });
+      toWatch.push(MANAGEMENT.SETTING);
     }
 
     if ( getters['management/schemaFor'](NAMESPACE) ) {
-      promises['namespaces'] = dispatch('management/findAll', { type: NAMESPACE });
+      promises['namespaces'] = dispatch('management/findAll', { type: NAMESPACE, opt: { watch: false } });
+      toWatch.push(NAMESPACE);
     }
 
     const fleetSchema = getters['management/schemaFor'](FLEET.WORKSPACE);
 
     if (fleetSchema?.links?.collection) {
-      promises['workspaces'] = dispatch('management/findAll', { type: FLEET.WORKSPACE });
+      promises['workspaces'] = dispatch('management/findAll', { type: FLEET.WORKSPACE, opt: { watch: false } });
+      toWatch.push(FLEET.WORKSPACE);
     }
 
     res = await allHash(promises);
-    dispatch('i18n/init');
+
+    // See comment above. Now that we have feature flags we can watch resources
+    toWatch.forEach((type) => {
+      dispatch('management/watch', { type });
+    });
+
     const isMultiCluster = getters['isMultiCluster'];
 
     // If the local cluster is a Harvester cluster and 'rancher-manager-support' is true, it means that the embedded Rancher is being used.
@@ -793,6 +870,9 @@ export const actions = {
     console.log(`Done loading management; isRancher=${ isRancher }; isMultiCluster=${ isMultiCluster }`); // eslint-disable-line no-console
   },
 
+  // Note:
+  // - state.clusterId is the old cluster id (or undefined)
+  // - id is the new cluster id (or undefined)
   async loadCluster({
     state, commit, dispatch, getters
   }, {
@@ -804,11 +884,15 @@ export const actions = {
     const sameProduct = oldProduct === product;
     const isMultiCluster = getters['isMultiCluster'];
 
-    // Are we in the same cluster and package or product?
-    if ( sameCluster && (samePackage || sameProduct)) {
+    const productConfig = state['type-map']?.products?.find((p) => p.name === product);
+    const oldProductConfig = state['type-map']?.products?.find((p) => p.name === oldProduct);
+
+    // Are we in the same cluster and package or product or root product?
+    if (sameCluster && (samePackage || sameProduct || (productConfig?.rootProduct === oldProductConfig?.rootProduct))) {
       // Do nothing, we're already connected/connecting to this cluster
       return;
     }
+
     const oldPkgClusterStore = oldPkg?.stores.find(
       (s) => getters[`${ s.storeName }/isClusterStore`]
     )?.storeName;
@@ -817,8 +901,11 @@ export const actions = {
       (s) => getters[`${ s.storeName }/isClusterStore`]
     )?.storeName;
 
-    const productConfig = state['type-map']?.products?.find((p) => p.name === product);
-    const forgetCurrentCluster = ((state.clusterId && id) || !samePackage) && !productConfig?.inExplorer;
+    // Forget the cluster if we had a cluster and we have a new cluster OR if the store changed between the old and new products OR if the pkg store changed
+    // Package stores are only there for UI Extensions that have their own stores (normal case is this is undefined)
+    const forgetCurrentCluster = ((state.clusterId && id) ||
+      (productConfig?.inStore && productConfig.inStore !== oldProductConfig?.inStore)) ||
+      (oldPkgClusterStore !== newPkgClusterStore);
 
     // Should we leave/forget the current cluster? Only if we're going from an existing cluster to a new cluster, or the package has changed
     // (latter catches cases like nav from explorer cluster A to epinio cluster A)
@@ -855,6 +942,13 @@ export const actions = {
 
       // Use a pseudo cluster ID to pretend we have a cluster... to ensure some screens that don't care about a cluster but 'require' one to show
       if (id === BLANK_CLUSTER) {
+        // Remove previous cluster context from cached namespaces
+        commit('updateNamespaces', {
+          filters: [],
+          all:     [],
+          getters
+        });
+
         commit('clusterReady', true);
 
         return;
@@ -1057,24 +1151,23 @@ export const actions = {
         window.localStorage.setItem(BACK_TO, window.location.href);
       }
 
-      const QUERY = (LOGGED_OUT in route.query) ? LOGGED_OUT : TIMED_OUT;
+      let QUERY = (LOGGED_OUT in route.query) ? LOGGED_OUT : TIMED_OUT;
 
-      router.replace(`/auth/login?${ QUERY }`);
-    }
-  },
+      // adds IS_SSO query param to login route if logout came with an auth provider enabled
+      QUERY += (IS_SSO in route.query) ? `&${ IS_SSO }` : '';
 
-  nuxtServerInit({ dispatch, rootState }, nuxt) {
-    // Models in SSR server mode have no way to get to the route or router, so hack one in...
-    Object.defineProperty(rootState, '$router', { value: nuxt.app.router });
-    Object.defineProperty(rootState, '$route', { value: nuxt.route });
-    dispatch('prefs/loadCookies');
+      // Go back to login and force a full page reload, this ensures we unload any dangling resources the user is no longer authorized to use (like extensions).
+      // We use document instead of router because router does a clunky job of visiting a new page and reloading. In this case it would cause the login page to flash before actually reloading.
+      const base = process.env.routerBase || '/';
+
+      document.location.href = `${ base }auth/login?${ QUERY }`;
+    }
   },
 
-  nuxtClientInit({ dispatch, rootState }, nuxt) {
-    Object.defineProperty(rootState, '$router', { value: nuxt.app.router });
-    Object.defineProperty(rootState, '$route', { value: nuxt.route });
-    Object.defineProperty(rootState, '$plugin', { value: nuxt.app.$plugin });
-    Object.defineProperty(this, '$plugin', { value: nuxt.app.$plugin });
+  nuxtClientInit({ dispatch, commit, rootState }, nuxt) {
+    commit('setRouter', nuxt.app.router);
+    commit('setRoute', nuxt.route);
+    commit('setPlugin', nuxt.app.$plugin);
 
     dispatch('management/rehydrateSubscribe');
     dispatch('cluster/rehydrateSubscribe');

package/store/plugins.js

@@ -165,16 +165,18 @@ export const getters = {
   },
 
   fieldNamesForDriver(state, getters) {
-    return (name) => {
+    return async(name) => {
       const schema = getters.schemaForDriver(name);
 
+      await schema.fetchResourceFields();
+
       if ( !schema ) {
         // eslint-disable-next-line no-console
         console.error(`Machine Driver Config schema not found for ${ name }`);
 
         return [];
       }
-
+      // This is used in places where `createPopulated` has been called, which has called fetchResourceFields to populate resourceFields
       const out = Object.keys(schema?.resourceFields || {});
 
       removeObjects(out, ['apiVersion', 'dockerPort', 'kind', 'metadata']);
@@ -184,9 +186,11 @@ export const getters = {
   },
 
   fieldsForDriver(state, getters) {
-    return (name) => {
+    return async(name) => {
       const schema = getters.schemaForDriver(name);
-      const names = getters.fieldNamesForDriver(name);
+
+      await schema.fetchResourceFields();
+      const names = await getters.fieldNamesForDriver(name);
 
       const out = {};