From f24272e969a1351bca2ddae3380a7d160d28b67c Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 22 Mar 2024 12:36:23 -0700
Subject: [PATCH 1/4] Create `cru-resource` store

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/config/store.js       |  4 +++-
 shell/store/cru-resource.ts | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 shell/store/cru-resource.ts

diff --git a/shell/config/store.js b/shell/config/store.js
index 22ddf141a5..05e9c9b4b9 100644
--- a/shell/config/store.js
+++ b/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();
diff --git a/shell/store/cru-resource.ts b/shell/store/cru-resource.ts
new file mode 100644
index 0000000000..cc80090c7f
--- /dev/null
+++ b/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,
+};

From de3e9517cea33f83699fcfaca3deffb4e38e4754 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 22 Mar 2024 15:45:44 -0700
Subject: [PATCH 2/4] Replace `createNamespace` with store in `CruResource`

This replaces the current method of managing the `createNamespace` state with something that will be Vue3 compatible.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/CruResource.vue            | 20 +++++++++++---------
 shell/components/form/NameNsDescription.vue | 13 ++++++++++---
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/shell/components/CruResource.vue b/shell/components/CruResource.vue
index 1569949be5..a008692b81 100644
--- a/shell/components/CruResource.vue
+++ b/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,
 
diff --git a/shell/components/form/NameNsDescription.vue b/shell/components/form/NameNsDescription.vue
index a3361f3298..c86cfa363c 100644
--- a/shell/components/form/NameNsDescription.vue
+++ b/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);
       }
     },

From e5bbf42c5264528c9d0f266f264be92027bb990b Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 26 Mar 2024 10:38:29 -0700
Subject: [PATCH 3/4] Mock `dispatch` for unit tests

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/__tests__/CruResource.test.ts       | 12 ++++++++----
 ...ment.cattle.io.clusterroletemplatebinding.test.ts |  2 +-
 .../__tests__/management.cattle.io.setting.test.ts   |  3 ++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/shell/components/__tests__/CruResource.test.ts b/shell/components/__tests__/CruResource.test.ts
index fbafc502cb..9a7e0c14fd 100644
--- a/shell/components/__tests__/CruResource.test.ts
+++ b/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() },
diff --git a/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts b/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts
index 5ede923016..1f80107b6c 100644
--- a/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts
+++ b/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts
@@ -25,7 +25,7 @@ describe('view: management.cattle.io.clusterroletemplatebinding should', () => {
           'i18n/t':                  (val) => val,
           'i18n/exists':             jest.fn(),
         },
-        dispatch: { 'management/findAll': () => ([]) }
+        dispatch: jest.fn(),
       },
       $fetchState: { pending: false },
       $route:      { query: { AS: '' } },
diff --git a/shell/edit/__tests__/management.cattle.io.setting.test.ts b/shell/edit/__tests__/management.cattle.io.setting.test.ts
index be21378f4b..28518ff074 100644
--- a/shell/edit/__tests__/management.cattle.io.setting.test.ts
+++ b/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() },

From 8fd88c52f62735167016f4ccfe95daed740da210 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 26 Mar 2024 13:07:32 -0700
Subject: [PATCH 4/4] Explicitly mock individual actions

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 ...ent.cattle.io.clusterroletemplatebinding.test.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts b/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts
index 1f80107b6c..7c107700f8 100644
--- a/shell/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts
+++ b/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: jest.fn(),
+        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: '' } },