Merge pull request #10689 from rak-phillip/chore/simple-store

Replace `createNamespace` pattern with a simple store for sharing data

shell/components/CruResource.vue

@@ -6,7 +6,7 @@ import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
 
@@ -158,19 +158,11 @@ export default {
   },
 
   data(props) {
-    this.$on('createNamespace', (e) => {
-      // When createNamespace is set to true,
-      // the UI will attempt to create a new namespace
-      // before saving the resource.
-      this.createNamespace = e;
-    });
-
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
 
     return {
       isCancelModal:   false,
-      createNamespace: false,
       showAsForm:      this.$route.query[AS] !== _YAML,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
@@ -249,6 +241,8 @@ export default {
     },
 
     ...mapGetters({ t: 'i18n/t' }),
+    ...mapState('cru-resource', ['createNamespace']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
 
     /**
      * Prevent issues for malformed types injection
@@ -277,6 +271,14 @@ export default {
     }
   },
 
+  mounted() {
+    this.$store.dispatch('cru-resource/setCreateNamespace', false);
+  },
+
+  beforeDestroy() {
+    this.$store.dispatch('cru-resource/setCreateNamespace', false);
+  },
+
   methods: {
     stringify,
 

shell/components/__tests__/CruResource.test.ts

@@ -20,7 +20,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -54,7 +55,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -87,7 +89,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },
@@ -126,7 +129,8 @@ describe('component: CruResource', () => {
             'current_store/all':       jest.fn(),
             'i18n/t':                  jest.fn(),
             'i18n/exists':             jest.fn(),
-          }
+          },
+          dispatch: jest.fn(),
         },
         $route:  { query: { AS: _YAML } },
         $router: { applyQuery: jest.fn() },

shell/components/form/NameNsDescription.vue

@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
@@ -215,6 +215,7 @@ export default {
 
   computed: {
     ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -381,12 +382,18 @@ export default {
     selectNamespace(e) {
       if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
         this.createNamespace = true;
-        this.$parent.$emit('createNamespace', true);
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          true,
+        );
         this.$emit('isNamespaceNew', true);
         Vue.nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
-        this.$parent.$emit('createNamespace', false);
+        this.$store.dispatch(
+          'cru-resource/setCreateNamespace',
+          false,
+        );
         this.$emit('isNamespaceNew', false);
       }
     },

shell/config/store.js

@@ -38,6 +38,7 @@ let store = {};
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
   resolveStoreModules(require('../store/wm.js'), 'wm.js');
   resolveStoreModules(require('../store/customisation.js'), 'customisation.js');
+  resolveStoreModules(require('../store/cru-resource.ts'), 'cru-resource.ts');
 
   // If the environment supports hot reloading...
 
@@ -63,7 +64,8 @@ let store = {};
       '../store/type-map.js',
       '../store/uiplugins.ts',
       '../store/wm.js',
-      '../store/customisation.js'
+      '../store/customisation.js',
+      '../store/cru-resource.ts',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules();

shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts

@@ -25,7 +25,18 @@ describe('view: management.cattle.io.clusterroletemplatebinding should', () => {
           'i18n/t':                  (val) => val,
           'i18n/exists':             jest.fn(),
         },
-        dispatch: { 'management/findAll': () => ([]) }
+        dispatch: jest.fn((action, payload) => {
+          const actions = {
+            'management/findAll':              () => [],
+            'cru-resource/setCreateNamespace': jest.fn(),
+          };
+
+          if (actions[action]) {
+            return actions[action](payload);
+          }
+
+          throw new Error(`Unknown action: ${ action }`);
+        }),
       },
       $fetchState: { pending: false },
       $route:      { query: { AS: '' } },

shell/edit/__tests__/management.cattle.io.setting.test.ts

@@ -13,7 +13,8 @@ describe('view: management.cattle.io.setting should', () => {
           'current_store/all':       jest.fn(),
           'i18n/t':                  jest.fn(),
           'i18n/exists':             jest.fn(),
-        }
+        },
+        dispatch: jest.fn(),
       },
       $route:  { query: { AS: '' } },
       $router: { applyQuery: jest.fn() },

shell/store/cru-resource.ts

@@ -0,0 +1,26 @@
+interface State {
+  createNamespace: boolean;
+}
+
+export const state = (): State => {
+  return { createNamespace: false };
+};
+
+export const mutations = {
+  SET_CREATE_NAMESPACE(state: State, shouldCreateNamespace: boolean): void {
+    state.createNamespace = shouldCreateNamespace;
+  }
+};
+
+export const actions = {
+  setCreateNamespace({ commit }: unknown, shouldCreateNamespace: boolean): void {
+    commit('SET_CREATE_NAMESPACE', shouldCreateNamespace);
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};