Handle disable at the route level and recreate a new gatekeeper app

so you can re-enable without having to refresh the page

rancher/dashboard#394

components/GatekeeperConfig.vue

@@ -1,4 +1,5 @@
 <script>
+import { isEmpty } from 'lodash';
 import CodeMirror from './CodeMirror';
 import AsyncButton from '@/components/AsyncButton';
 import Footer from '@/components/form/Footer';
@@ -136,14 +137,14 @@ export default {
         const gatekeeperStatus = (gatekeeper.status?.conditions || []).slice();
 
         // this doesn't seeem right but the only way I can see to check that it was removed before the object goes away
-        if (Object.prototype.hasOwnProperty.call(meta, 'deletionTimestamp')) {
+        if (meta && Object.prototype.hasOwnProperty.call(meta, 'deletionTimestamp')) {
           this.gatekeeperEnabled = false;
           this.$emit('gatekeeperEnabled', this.gatekeeperEnabled);
 
           return;
         }
 
-        if (gatekeeperStatus.some(app => app.type === 'Deployed')) {
+        if (!this.gatekeeperEnabled && gatekeeperStatus.some(app => app.type === 'Deployed')) {
           this.gatekeeperEnabled = true;
           this.$emit('gatekeeperEnabled', this.gatekeeperEnabled);
         }

pages/c/_cluster/gatekeeper/index.vue

@@ -42,7 +42,9 @@ export default {
   data() {
     return {
       gateKeeperUnavailable:    false,
+      gatekeeperSystemTemplate: null,
       mode:                     _VIEW,
+      systemProject:            null,
     };
   },
 
@@ -59,6 +61,8 @@ export default {
         return {
           gateKeeperUnavailable:    true,
           gatekeeperEnabled:        false,
+          gatekeeperSystemTemplate: null,
+          systemProject:            null,
           mode,
         };
       }
@@ -77,6 +81,8 @@ export default {
         return {
           gateKeeperUnAvailable:    true,
           gatekeeperEnabled:        false,
+          gatekeeperSystemTemplate: null,
+          systemProject:            null,
           mode,
         };
       }
@@ -117,6 +123,8 @@ export default {
 
       return {
         gatekeeperEnabled:        !!gatekeeper?.id,
+        gatekeeperSystemTemplate: template,
+        systemProject:            targetSystemProject,
         gatekeeper,
         mode,
         namespaces,
@@ -151,6 +159,43 @@ export default {
     }
     next();
   },
+
+  methods: {
+    async syncGatekeeperStatus(status) {
+      const gatekeeperVersionsMap = this.gatekeeperSystemTemplate?.spec?.versions || [];
+      const latestGKVersion = gatekeeperVersionsMap[0] ? gatekeeperVersionsMap[0] : null;
+      let newApp = null;
+
+      this.gatekeeperEnabled = status;
+
+      if (!status && latestGKVersion) {
+        try {
+          newApp = await this.createGatekeeperDefaultApp(this.systemProject, latestGKVersion.externalId);
+          this.gatekeeper = newApp;
+          this.mode = _CREATE;
+          console.log('New Gatekeeper', this.gatekeeper);
+        } catch (err) {
+          console.error('could not create new gatekeeper app', err);
+        }
+      }
+    },
+    createGatekeeperDefaultApp(systemProject, externalId) {
+      return this.$store.dispatch('clusterExternal/create', {
+        type:       'app',
+        metadata:   {
+          namespace: systemProject.metadata.name,
+          name:      APP_ID
+        },
+        spec: {
+          targetNamespace: 'gatekeeper-system',
+          timeout:         300,
+          valuesYaml:      CONFIG,
+          projectName:     systemProject.namespacedName,
+          externalId,
+        }
+      });
+    },
+  }
 };
 </script>
 
@@ -167,7 +212,7 @@ export default {
         :mode="mode"
         :namespaces="namespaces"
         :projects="projects"
-        @gatekeeperEnabled="status => gatekeeperEnabled = status"
+        @gatekeeperEnabled="syncGatekeeperStatus"
       />
       <InfoBox v-if="gatekeeperEnabled">
         <div class="mb-15">