Merge pull request #550 from westlywright/opa.bugs2

Gatekeeper Config Bugs

components/AsyncButton.vue

@@ -40,11 +40,20 @@ const LABEL = {
     waiting: 'Saving…',
     success: 'Saved',
     error:   'Error',
+  },
+  enable: {
+    action:  'Enable',
+    waiting: 'Enabling…',
+    success: 'Enabled',
+    error:   'Error',
   }
 };
 
 export default {
   props: {
+    /**
+     * Mode maps to key in LABEL map for phase labels of button
+     */
     mode: {
       type:    String,
       default: 'edit',
@@ -112,7 +121,7 @@ export default {
     showLabel: {
       type:    Boolean,
       default: true,
-    }
+    },
   },
 
   data() {

components/GatekeeperConfig.vue

@@ -134,19 +134,19 @@ export default {
       handler() {
         const gatekeeper = this.config || {};
         const meta = gatekeeper?.metadata;
-        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 (meta && Object.prototype.hasOwnProperty.call(meta, 'deletionTimestamp')) {
           this.gatekeeperEnabled = false;
           this.$emit('gatekeeperEnabled', this.gatekeeperEnabled);
-
-          return;
         }
 
-        if (!this.gatekeeperEnabled && gatekeeperStatus.some(app => app.type === 'Deployed')) {
-          this.gatekeeperEnabled = true;
-          this.$emit('gatekeeperEnabled', this.gatekeeperEnabled);
+        if (!this.gatekeeperEnabled && this.saving && gatekeeper.hasCondition('Deployed', 'True')) { // we can get here if waitForCondition takes too long
+          if (this.showYamlEditor) {
+            this.showYamlEditor = false;
+          }
+
+          this.$emit('gatekeeperEnabled', this.gatekeeperEnabled = true);
         }
       }
     }
@@ -184,25 +184,29 @@ export default {
      *
      * @param {buttonCb} Callback to be called on success or fail
      */
-    async enable(buttonCb) {
+    async enableGatekeeper(buttonCb) {
       try {
         this.saving = true;
         await this.ensureNamespace();
         await this.config.save();
-        await this.config.waitForState('active', 60000);
-        this.gatekeeperEnabled = true;
+        await this.config.waitForCondition('Deployed');
         this.showYamlEditor = false;
         this.saving = false;
+        this.$emit('gatekeeperEnabled', this.gatekeeperEnabled = true);
         buttonCb(true);
       } catch (err) {
-        this.gatekeeperEnabled = false;
-        this.saving = false;
-        if (err?.message) {
-          this.errors = [err.message];
+        if (this?.config.hasCondition('Deployed', 'True')) { // we can hit this if waitForCondition above fails, in that case the config observer will enable
+          buttonCb(true); // dont want to see red button error in this case
         } else {
-          this.errors = [err];
+          this.gatekeeperEnabled = false;
+          this.saving = false;
+          if (err?.message) {
+            this.errors = [err.message];
+          } else {
+            this.errors = [err];
+          }
+          buttonCb(false);
         }
-        buttonCb(false);
       }
 
       this.saving = false;
@@ -407,14 +411,10 @@ export default {
             <t k="generic.customize" />
           </button>
           <AsyncButton
-            :mode="mode"
-            action-label="Enable"
-            waiting-label="Enabling"
-            success-label="Enabled"
-            error-label="Error enabling"
+            mode="enable"
             :disabled="showYamlEditor"
             v-bind="$attrs"
-            @click="enable"
+            @click="enableGatekeeper"
           />
         </div>
       </div>
@@ -429,9 +429,9 @@ export default {
         @onChanges="onChanges"
       />
       <Footer
-        :mode="mode"
+        mode="enable"
         @errors="errors"
-        @save="enable"
+        @save="enableGatekeeper"
         @done="openYamlEditor"
       />
     </section>

components/form/Footer.vue

@@ -1,11 +1,15 @@
 <script>
-import { _CREATE, _EDIT, _VIEW } from '@/config/query-params';
+import { _VIEW } from '@/config/query-params';
 import AsyncButton from '@/components/AsyncButton';
 
 export default {
   components: { AsyncButton },
 
   props: {
+    /**
+     * Current mode of the page
+     * passed to asyncButton to determine lables of the button
+     */
     mode: {
       type:     String,
       required: true,
@@ -14,18 +18,10 @@ export default {
     errors: {
       type:    Array,
       default: null,
-    }
+    },
   },
 
   computed: {
-    isCreate() {
-      return this.mode === _CREATE;
-    },
-
-    isEdit() {
-      return this.mode === _EDIT;
-    },
-
     isView() {
       return this.mode === _VIEW;
     },
@@ -60,8 +56,11 @@ export default {
       </slot>
       <slot name="middle" />
       <slot name="save">
-        <AsyncButton v-if="isEdit" key="edit" mode="edit" @click="save" />
-        <AsyncButton v-if="isCreate" key="create" mode="create" @click="save" />
+        <AsyncButton
+          v-if="!isView"
+          :mode="mode"
+          @click="save"
+        />
       </slot>
       <slot name="right" />
     </div>