Icu 7301 UI target oss workflow (#1589)

Icu 7301 UI target OSS workflow (#1589)

addons/core/translations/form/en-us.yaml

@@ -55,7 +55,7 @@ worker_type:
   help: Type of worker
 worker_filter:
   label: Worker Filter
-  help: Deprecated. Optional boolean expression to filter the workers that are allowed to satisfy this request.
+  help: Deprecated. Boolean expression to filter the workers that are allowed to satisfy this request.
 host_set:
   label: Host Set
 grant_scope:

addons/core/translations/resources/en-us.yaml

@@ -367,7 +367,7 @@ target:
         description: Select injected Application credential sources to assign to this target.
   workers:
     title: Workers
-    description: Optional. You can customize how your workers route traffic to this target by setting up a filter that matches specific worker tags. If your target is in a private network, we recommend setting up an egress filter to specify a worker inside the network so that Boundary can access the host. Ingress and egress filters are allowed to select the same worker.
+    description: You can customize how your workers route traffic to this target by setting up a filter that matches specific worker tags. If your target is in a private network, we recommend setting up an egress filter to specify a worker inside the network so that Boundary can access the host. Ingress and egress filters are allowed to select the same worker.
     deprecation_message:
       title: Worker filters have been updated
       description: This target is configured using an older version of worker filters. You can update to the new filters but this will also update this field in the Boundary API. We will continue to use this filter until you update.
@@ -390,7 +390,7 @@ target:
       dual-egress-on-ingress-on: In this configuration, the client will attempt to connect through any filtered ingress worker and reach the house through any filtered egress worker.
     egress_worker_filter:
       title: Egress worker filter
-      description: Optional. Specify workers that have access to the target (such as within a private network).
+      description: Specify workers that have access to the target (such as within a private network).
       filter:
         title: Filter
         description: Boolean expression.

addons/rose/addon/styles/hds/overrides.scss

@@ -3,3 +3,11 @@
 [class^='hds-form-group'] {
   margin-bottom: 1.5rem;
 }
+/* stylelint-disable selector-class-pattern */
+.hds-form-group__control-fields-wrapper {
+  .hds-form-group__legend ~ & {
+    .hds-form-label {
+      font-weight: var(--token-typography-font-weight-semibold);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 <Rose::Form
   @onSubmit={{@submit}}
-  @cancel={{@cancel}}
+  @cancel={{this.cancel}}
   @disabled={{@model.isSaving}}
   @showEditToggle={{if @model.isNew false true}}
   as |form|
@@ -67,7 +67,6 @@
         </G.RadioCard>
       {{/each}}
     </Hds::Form::RadioCard::Group>
-
   {{else}}
     <InfoField
       @value={{t (concat 'resources.target.types.' @model.type)}}
@@ -181,80 +180,121 @@
       class='target-workers'
       @layout='horizontal'
       @isRequired={{false}}
+      @isOptional={{true}}
       as |F|
     >
       <F.Legend>{{t 'resources.target.workers.title'}}</F.Legend>
       <F.HelperText>{{t 'resources.target.workers.description'}}</F.HelperText>
-      {{#unless this.migrateWorkerFilter}}
+
-        {{#if this.showDeprecationMessage}}
+      {{#if this.showDeprecationMessage}}
+        <F.Control>
+          <Hds::Alert @color='highlight' @type='inline' as |A|>
+            <A.Title>{{t
+                'resources.target.workers.deprecation_message.title'
+              }}</A.Title>
+            <A.Description>{{t
+                'resources.target.workers.deprecation_message.description'
+              }}</A.Description>
+          </Hds::Alert>
+        </F.Control>
+        <F.Control>
+          <Hds::Form::TextInput::Field
+            @value={{@model.worker_filter}}
+            @isInvalid={{@model.errors.worker_filter}}
+            @type='text'
+            name='worker_filter'
+            disabled={{true}}
+            {{on 'input' (set-from-event @model 'worker_filter')}}
+            as |F|
+          >
+            <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
+            <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
+          </Hds::Form::TextInput::Field>
+        </F.Control>
+      {{/if}}
+
+      {{#if form.isEditable}}
+        {{#if this.showUpdateWorkerFilterButton}}
           <F.Control>
-            <Hds::Alert @color='highlight' @type='inline' as |A|>
+            <Hds::Button
-              <A.Title>{{t
+              class='update-filter-button'
-                  'resources.target.workers.deprecation_message.title'
+              @text={{t
-                }}</A.Title>
+                'resources.target.workers.egress_worker_filter.filter.update_filter'
-              <A.Description>{{t
+              }}
-                  'resources.target.workers.deprecation_message.description'
+              @color='secondary'
-                }}</A.Description>
+              disabled={{form.disabled}}
-            </Hds::Alert>
+              {{on 'click' this.migrateWorkerFilters}}
-          </F.Control>
+            />
-          <F.Control>
-            <Hds::Form::TextInput::Field
-              @isRequired={{false}}
-              @isOptional={{true}}
-              @value={{@model.worker_filter}}
-              @isInvalid={{@model.errors.worker_filter}}
-              @type='text'
-              name='worker_filter'
-              disabled={{true}}
-              {{on 'input' (set-from-event @model 'worker_filter')}}
-              as |F|
-            >
-              <F.Label>{{t 'form.worker_filter.label'}}</F.Label>
-              <F.HelperText>{{t 'form.worker_filter.help'}}</F.HelperText>
-            </Hds::Form::TextInput::Field>
           </F.Control>
         {{/if}}
-      {{/unless}}
+      {{/if}}
+
+      {{#if this.showEgressFilter}}
+        <F.Control>
+          <WorkerDiagram::SingleFilter
+            @egressFilter={{this.egressWorkerFilterEnabled}}
+          />
+
+        </F.Control>
+        <F.Control>
+          <Form::Target::WorkerFilter
+            @name='egress_worker_filter'
+            @type='text'
+            @disabled={{form.disabled}}
+            @value={{@model.egress_worker_filter}}
+            @toggleAction={{this.toggleEgressWorkerFilter}}
+            @checked={{this.egressWorkerFilterEnabled}}
+            @toggleEnabled={{this.egressWorkerFilterEnabled}}
+            @errors={{@model.errors.egress_worker_filter}}
+            @onChange={{set-from-event @model 'egress_worker_filter'}}
+            @isInvalid={{@model.errors.egress_worker_filter}}
+            as |F|
+          >
+            {{#if @model.errors.egress_worker_filter}}
+              <F.Error as |E|>
+                {{#each @model.errors.egress_worker_filter as |error|}}
+                  <E.Message>{{error.message}}</E.Message>
+                {{/each}}
+              </F.Error>
+            {{/if}}
+          </Form::Target::WorkerFilter>
+
+        </F.Control>
+      {{/if}}
+
+      {{#if @model.isNew}}
+        <F.Control>
+          <WorkerDiagram::SingleFilter
+            @egressFilter={{this.egressWorkerFilterEnabled}}
+          />
+        </F.Control>
+        <F.Control>
+          <Form::Target::WorkerFilter
+            @name='egress_worker_filter'
+            @type='text'
+            @disabled={{form.disabled}}
+            @value={{@model.egress_worker_filter}}
+            @toggleAction={{this.toggleEgressWorkerFilter}}
+            @checked={{this.egressWorkerFilterEnabled}}
+            @toggleEnabled={{this.egressWorkerFilterEnabled}}
+            @errors={{@model.errors.egress_worker_filter}}
+            @onChange={{set-from-event @model 'egress_worker_filter'}}
+            @isInvalid={{@model.errors.egress_worker_filter}}
+            as |F|
+          >
+            {{#if @model.errors.egress_worker_filter}}
+              <F.Error as |E|>
+                {{#each @model.errors.egress_worker_filter as |error|}}
+                  <E.Message>{{error.message}}</E.Message>
+                {{/each}}
+              </F.Error>
+            {{/if}}
+          </Form::Target::WorkerFilter>
+        </F.Control>
+      {{/if}}
+
     </Hds::Form::Fieldset>
 
-    {{#if this.showUpdateWorkerFilterButton}}
-      {{#if form.isEditable}}
-        <Hds::Button
-          class='update-filter-button'
-          @text={{t
-            'resources.target.workers.egress_worker_filter.filter.update_filter'
-          }}
-          @color='secondary'
-          disabled={{form.disabled}}
-          {{on 'click' this.migrateWorkerFilters}}
-        />
-      {{/if}}
-    {{else}}
-      <WorkerDiagram::SingleFilter
-        @egressFilter={{this.egressWorkerFilterEnabled}}
-      />
-      <Form::Target::WorkerFilter
-        @name='egress_worker_filter'
-        @type='text'
-        @disabled={{form.disabled}}
-        @value={{@model.egress_worker_filter}}
-        @toggleAction={{this.toggleEgressWorkerFilter}}
-        @checked={{this.egressWorkerFilterEnabled}}
-        @toggleEnabled={{this.egressWorkerFilterEnabled}}
-        @errors={{@model.errors.egress_worker_filter}}
-        @onChange={{set-from-event @model 'egress_worker_filter'}}
-        @isInvalid={{@model.errors.egress_worker_filter}}
-        as |F|
-      >
-        {{#if @model.errors.egress_worker_filter}}
-          <F.Error as |E|>
-            {{#each @model.errors.egress_worker_filter as |error|}}
-              <E.Message>{{error.message}}</E.Message>
-            {{/each}}
-          </F.Error>
-        {{/if}}
-      </Form::Target::WorkerFilter>
-    {{/if}}
   {{else}}
     <Hds::Form::TextInput::Field
       @isRequired={{false}}

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

@@ -15,8 +15,6 @@ export default class FormTargetComponent extends Component {
   @tracked egressWorkerFilterEnabled =
     this.args.model.egress_worker_filter?.length;
 
-  @tracked migrateWorkerFilter = false;
-
   // =properties
   /**
    * maps resource type with icon
@@ -51,25 +49,40 @@ export default class FormTargetComponent extends Component {
    * @type {boolean}
    */
   get showUpdateWorkerFilterButton() {
-    return (
+    return this.args.model.worker_filter?.length;
-      !this.args.model.isNew &&
+  }
-      this.args.model.worker_filter &&
+
-      !this.migrateWorkerFilter
+  get showEgressFilter() {
-    );
+    return !this.args.model.worker_filter?.length && !this.args.model.isNew;
   }
 
   //actions
   @action
   toggleEgressWorkerFilter() {
     this.egressWorkerFilterEnabled = !this.egressWorkerFilterEnabled;
+    if (!this.egressWorkerFilterEnabled) {
+      this.args.model.egress_worker_filter = '';
+    }
   }
+
   // =actions
   @action
   migrateWorkerFilters() {
-    this.migrateWorkerFilter = true;
     this.egressWorkerFilterEnabled = true;
-    // When update is clicked, copy worker filter value into egress filter.
+    // 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.worker_filter = '';
   }
+
+  /**
+   * Call passed cancel function.
+   * Unset selected filters.
+   */
+  @action
+  cancel() {
+    this.args.cancel();
+    // Reset the tracked variable for toggles after rollback
+    this.egressWorkerFilterEnabled =
+      this.args.model.egress_worker_filter?.length;
+  }
 }

ui/admin/app/components/form/target/worker-filter/index.hbs

@@ -1,8 +1,11 @@
 <div class='target-worker-filter'>
+
   <Hds::Form::Toggle::Field
     name='target-worker-filter-toggle'
     checked={{@checked}}
     disabled={{@disabled}}
+    @isRequired={{false}}
+    @isOptional={{true}}
     {{on 'change' @toggleAction}}
     as |F|
   >
@@ -14,10 +17,13 @@
 
   {{#if @toggleEnabled}}
     <Hds::Form::TextInput::Field
+      @isRequired={{false}}
+      @isOptional={{true}}
       @value={{@value}}
-      disabled={{@disabled}}
+      @isInvalid={{@isInvalid}}
       @type={{@type}}
       name={{@name}}
+      disabled={{@disabled}}
       {{on 'input' @onChange}}
       as |F|
     >

ui/admin/app/styles/app.scss

@@ -493,20 +493,6 @@
   }
 }
 
-// target worker filters
-// note re Button margin: this is a temp solution,
-// when we migrate buttons to HDS, we will analyze the spacing
-// issue in all scenarios to come up with an efficient solution
-.update-filter-button {
-  margin-bottom: 1.5rem;
-}
-
-.target-worker-filter {
-  .hds-form-field--layout-vertical {
-    margin-left: 2.5rem;
-  }
-}
-
 // json secret editor
 .secret-editor {
   // Secret Editor body and gutter colors are based on the Monokai color template
@@ -615,6 +601,7 @@
 .ordered-series-diagram {
   --group-title-line-height: 2.25rem;
 
+  width: 100%;
   display: flex;
   margin-bottom: 1rem;
 
@@ -677,8 +664,10 @@
   }
 }
 
+// target worker filters
 .target-workers {
   margin-top: sizing.rems(xxl);
+  margin-bottom: sizing.rems(xxl) + sizing.rems(l);
 
   .hds-form-legend {
     font-size: sizing.rems(l) - sizing.rems(xxs); // 20
@@ -687,6 +676,22 @@
   .hds-alert {
     margin-bottom: sizing.rems(l);
   }
+
+  // note re Button margin: this is a temp solution,
+  // when we migrate buttons to HDS, we will analyze the spacing
+  // issue in all scenarios to come up with an efficient solution
+  .target-worker-filter {
+    width: 100%;
+
+    .hds-form-field--layout-vertical {
+      margin-left: 2.5rem;
+      width: 50%;
+    }
+
+    .hds-form-field--layout-flag {
+      margin-bottom: 1rem;
+    }
+  }
 }
 
 .target-worker-filter-explainer {

ui/admin/tests/acceptance/targets/update-test.js

@@ -66,7 +66,7 @@ module('Acceptance | targets | update', function (hooks) {
     assert.notEqual(instances.target.worker_filter, 'random filter');
 
     await click(`[href="${urls.target}"]`);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     await fillIn('[name="worker_filter"]', 'random filter');
     await click('.rose-form-actions [type="submit"]');
@@ -111,7 +111,7 @@ module('Acceptance | targets | update', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     await click('.rose-form-actions [type="button"]');
 
@@ -143,7 +143,7 @@ module('Acceptance | targets | update', function (hooks) {
     });
 
     await click(`[href="${urls.target}"]`);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     await click('[type="submit"]');
 
@@ -159,7 +159,7 @@ module('Acceptance | targets | update', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     assert.strictEqual(currentURL(), urls.target);
     await click(`[href="${urls.targets}"]`);
@@ -178,7 +178,7 @@ module('Acceptance | targets | update', function (hooks) {
     await visit(urls.targets);
 
     await click(`[href="${urls.target}"]`);
-    await click('form [type="button"]', 'Activate edit mode');
+    await click('.rose-form-actions [type="button"]', 'Activate edit mode');
     await fillIn('[name="name"]', 'random string');
     assert.strictEqual(currentURL(), urls.target);
     await click(`[href="${urls.targets}"]`);
@@ -197,7 +197,7 @@ module('Acceptance | targets | update', function (hooks) {
 
     await click(`[href="${urls.target}"]`);
 
-    assert.dom('form [type="button"]').doesNotExist();
+    assert.dom('.rose-form-actions [type="button"]').doesNotExist();
   });
 
   test('saving address with existing host sources brings up confirmation modal and removes host sources', async function (assert) {