Refactor modes and adding edit action to Gatekeeper

components/GatekeeperConfig.vue

@@ -3,7 +3,7 @@ import CodeMirror from './CodeMirror';
 import AsyncButton from '@/components/AsyncButton';
 import Footer from '@/components/form/Footer';
 import { NAMESPACE } from '@/config/types';
-import { _VIEW } from '@/config/query-params';
+import { _VIEW, _EDIT } from '@/config/query-params';
 import GatekeeperTables from '@/components/GatekeeperTables';
 import { findBy } from '@/utils/array';
 
@@ -55,7 +55,8 @@ export default {
     return {
       gatekeeperEnabled,
       showYamlEditor: false,
-      errors:         null,
+      errors:         [],
+      saving:         false,
     };
   },
 
@@ -98,6 +99,16 @@ export default {
     },
   },
 
+  watch: {
+    mode() {
+      if (this.mode === _EDIT) {
+        this.showYamlEditor = true;
+      } else {
+        this.showYamlEditor = false;
+      }
+    },
+  },
+
   methods: {
     async ensureNamespace() {
       if ( findBy(this.namespaces, 'metadata.name', 'gatekeeper-system') ) {
@@ -118,6 +129,12 @@ export default {
       // await newSystemNs.waitForState('active');
     },
 
+    showActions() {
+      this.$store.commit('actionMenu/show', {
+        resources: this.config,
+        elem:      this.$refs.actions,
+      });
+    },
     /**
      * Gets called when the user clicks on the button
      * Checks for the system namespace and creates that first if it does not exist
@@ -142,6 +159,8 @@ export default {
         }
         buttonCb(false);
       }
+
+      this.saving = false;
     },
 
     /**
@@ -150,7 +169,11 @@ export default {
      */
     openYamlEditor() {
       if (this.showYamlEditor) {
-        this.showYamlEditor = false;
+        if (this.mode === _EDIT) {
+          this.$router.push({ name: this.$route.name });
+        } else {
+          this.showYamlEditor = false;
+        }
       } else {
         this.showYamlEditor = true;
       }
@@ -271,10 +294,13 @@ export default {
           v-bind="$attrs"
           @click="disable"
         />
+        <button ref="actions" type="button" class="btn btn-sm role-multi-action actions" @click="showActions">
+          <i class="icon icon-actions" />
+        </button>
       </div>
     </header>
-    <div v-if="gatekeeperEnabled" class="mt-20 text-center">
-      <GatekeeperTables />
+    <div v-if="gatekeeperEnabled" class="mt-20">
+      <GatekeeperTables v-if="gatekeeperEnabled && !showYamlEditor" />
     </div>
     <div v-else class="mt-20 mb-20">
       <hr />
@@ -313,6 +339,7 @@ export default {
           <button
             type="button"
             class="btn bg-primary"
+            :disable="saving"
             @click="openYamlEditor"
           >
             Customize Configuration
@@ -333,7 +360,7 @@ export default {
         @onChanges="onChanges"
       />
       <Footer
-        mode="create"
+        :mode="mode"
         @errors="errors"
         @save="enable"
         @done="openYamlEditor"

models/project.cattle.io.v3.app.js

@@ -0,0 +1,47 @@
+import { addParams } from '@/utils/url';
+import { MODE, _EDIT } from '@/config/query-params';
+
+const GATEKEEPER_DEFAULT_ID = 'rancher-gatekeeper-operator';
+
+export default {
+  isGateKeeper() {
+    return this.id.includes(GATEKEEPER_DEFAULT_ID);
+  },
+  availableActions() {
+    const { isGateKeeper } = this;
+    let out = this._standardActions.slice();
+
+    if (isGateKeeper) {
+      const toFilter = ['cloneYaml'];
+
+      out = out.filter((action) => {
+        if (!toFilter.includes(action.action)) {
+          return action;
+        }
+      });
+    }
+
+    return out;
+  },
+
+  appEditUrl() {
+    const { isGateKeeper } = this;
+    const router = this.currentRouter();
+
+    if (isGateKeeper) {
+      const url = router.resolve({ name: router.currentRoute.name }).href;
+
+      return url;
+    } else {
+      return this.detailUrl();
+    }
+  },
+
+  goToEdit() {
+    return (moreQuery = {}) => {
+      const url = addParams(this.appEditUrl, { [MODE]: _EDIT, ...moreQuery });
+
+      this.currentRouter().push({ path: url });
+    };
+  },
+};

pages/c/_cluster/gatekeeper/index.vue

@@ -1,7 +1,7 @@
 <script>
 import { NAMESPACE, MANAGEMENT, EXTERNAL } from '@/config/types';
 import GatekeeperConfig from '@/components/GatekeeperConfig';
-import { _CREATE, _VIEW } from '@/config/query-params';
+import { _CREATE, _EDIT, _VIEW } from '@/config/query-params';
 
 const TEMPLATE_ID = 'cattle-global-data/system-library-rancher-gatekeeper-operator';
 const APP_ID = 'rancher-gatekeeper-operator';
@@ -33,11 +33,14 @@ export default {
   components: { GatekeeperConfig },
 
   data() {
-    return { gateKeeperUnAvailable: false };
+    return {
+      gateKeeperUnavailable: false,
+      mode:                  _VIEW,
+    };
   },
 
-  async asyncData({ store }) {
-    let mode = _VIEW;
+  async asyncData({ store, route }) {
+    let mode = route?.query?.mode ? route.query.mode : _VIEW;
 
     try {
       const template = await store.dispatch('management/find', {
@@ -46,7 +49,10 @@ export default {
       });
 
       if (!template?.id ) {
-        return { gateKeeperUnAvailable: true };
+        return {
+          gateKeeperUnavailable: true,
+          mode:                  _VIEW,
+        };
       }
 
       // clusterID is on router.state.clusterid and find
@@ -102,15 +108,27 @@ export default {
     } catch (e) {
       console.error(e);
 
-      return { gateKeeperUnAvailable: true };
+      return {
+        gateKeeperUnavailable: true,
+        mode:                  _VIEW,
+      };
     }
   },
+
+  beforeRouteUpdate(to, from, next) {
+    if (to.query?.mode === _EDIT) {
+      this.mode = _EDIT;
+    } else if (from.query?.mode === _EDIT && !to.query?.mode) {
+      this.mode = _VIEW;
+    }
+    next();
+  },
 };
 </script>
 
 <template>
   <div>
-    <div v-if="gateKeeperUnAvailable">
+    <div v-if="gateKeeperUnavailable">
       <h2 class="text-center mt-50">
         OPA + Gatekeeper is not available in the system-charts catalog.
       </h2>