Target form refactor (#1627)

* refactor: 💡 target form

ui/admin/app/components/form/target/details/index.hbs

@@ -206,12 +206,7 @@
               <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
             </Hds::Form::TextInput::Field>
           </div>
-        </F.Control>
+          {{#if form.isEditable}}
-      {{/if}}
-
-      {{#if form.isEditable}}
-        {{#if this.showUpdateWorkerFilterButton}}
-          <F.Control>
             <Hds::Button
               class='update-filter-button'
               @text={{t 'resources.target.workers.actions.update-filter'}}
@@ -219,16 +214,14 @@
               disabled={{form.disabled}}
               {{on 'click' this.migrateWorkerFilters}}
             />
-          </F.Control>
+          {{/if}}
-        {{/if}}
+        </F.Control>
-      {{/if}}
+      {{else}}
-      <F.Control>
+        <F.Control>
-        {{#if this.showTargetFilters}}
           <WorkerDiagram
             @egressWorkerFilterEnabled={{this.egressWorkerFilterEnabled}}
             @ingressWorkerFilterEnabled={{this.ingressWorkerFilterEnabled}}
           />
-
           {{#if (feature-flag 'target-worker-filters-v2-ingress')}}
             <Form::Target::WorkerFilter
               @name='ingress_worker_filter'
@@ -269,8 +262,9 @@
             {{/if}}
           </Form::Target::WorkerFilter>
 
-        {{/if}}
+        </F.Control>
-      </F.Control>
+      {{/if}}
+
     </Hds::Form::Fieldset>
 
   {{else}}

ui/admin/app/components/form/target/details/index.js

@@ -37,30 +37,6 @@ export default class FormTargetComponent extends Component {
     return icons[this.args.model.type];
   }
 
-  /**
-   * determines when the worker filter deprecation message should be shown
-   * @type {boolean}
-   */
-  get showDeprecationMessage() {
-    return !this.args.model.isNew && this.args.model.worker_filter;
-  }
-
-  /**
-   * determines when the update worker filter button should be shown
-   * @type {boolean}
-   */
-  get showUpdateWorkerFilterButton() {
-    return this.args.model.worker_filter;
-  }
-
-  /**
-   * determines when the filters should be shown
-   * @type {boolean}
-   */
-  get showTargetFilters() {
-    return !this.args.model.worker_filter;
-  }
-
   //actions
   @action
   toggleEgressFilter() {
@@ -77,15 +53,6 @@ export default class FormTargetComponent extends Component {
       this.args.model.ingress_worker_filter = '';
     }
   }
-  @action
-  migrateWorkerFilters() {
-    this.egressWorkerFilterEnabled = true;
-    this.ingressWorkerFilterEnabled = true;
-    // When update is clicked, copy worker filter value into egress filter and clear the worker_filter
-    this.args.model.egress_worker_filter = this.args.model.worker_filter;
-    this.args.model.ingress_worker_filter = this.args.model.worker_filter;
-    this.args.model.worker_filter = '';
-  }
 
   /**
    * Call passed cancel function.
@@ -95,9 +62,31 @@ export default class FormTargetComponent extends Component {
   cancel() {
     this.args.cancel();
     // Reset the tracked variable for toggles after rollback
-
     this.egressWorkerFilterEnabled = this.args.model.egress_worker_filter;
-
     this.ingressWorkerFilterEnabled = this.args.model.ingress_worker_filter;
   }
+
+  // These methods may be removed after the `worker_filter` field is removed from the API.
+
+  /**
+   * Evaluates to `true` if the worker filter deprecation message should be shown.
+   * @type {boolean}
+   */
+  get showDeprecationMessage() {
+    return !this.args.model.isNew && this.args.model.worker_filter;
+  }
+
+  /**
+   * Copies the value from `worker_filter` into `egress_worker_filter` and `ingress_worker_filter`
+   * and unsets `worker_filter`.
+   */
+  @action
+  migrateWorkerFilters() {
+    this.egressWorkerFilterEnabled = true;
+    this.ingressWorkerFilterEnabled = true;
+    // When update is clicked, copy worker filter value into egress and ingress filter and clear the worker_filter
+    this.args.model.egress_worker_filter = this.args.model.worker_filter;
+    this.args.model.ingress_worker_filter = this.args.model.worker_filter;
+    this.args.model.worker_filter = '';
+  }
 }