From b41b6ee3e320c03b8dd8a43abb61586eb320aebf Mon Sep 17 00:00:00 2001 From: Dharini Jeeva Date: Mon, 23 Jan 2023 14:28:37 -0800 Subject: [PATCH] Icu 7301 UI target oss workflow (#1589) Icu 7301 UI target OSS workflow (#1589) --- addons/core/translations/form/en-us.yaml | 2 +- addons/core/translations/resources/en-us.yaml | 4 +- addons/rose/addon/styles/hds/overrides.scss | 8 + .../components/form/target/details/index.hbs | 174 +++++++++++------- .../components/form/target/details/index.js | 31 +++- .../form/target/worker-filter/index.hbs | 8 +- ui/admin/app/styles/app.scss | 33 ++-- .../tests/acceptance/targets/update-test.js | 12 +- 8 files changed, 172 insertions(+), 100 deletions(-) diff --git a/addons/core/translations/form/en-us.yaml b/addons/core/translations/form/en-us.yaml index 455c8d37d..7858388a7 100644 --- a/addons/core/translations/form/en-us.yaml +++ b/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: diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml index 4651fb9b1..5fb976c04 100644 --- a/addons/core/translations/resources/en-us.yaml +++ b/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. diff --git a/addons/rose/addon/styles/hds/overrides.scss b/addons/rose/addon/styles/hds/overrides.scss index 0b593f703..ac31743eb 100644 --- a/addons/rose/addon/styles/hds/overrides.scss +++ b/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); + } + } +} diff --git a/ui/admin/app/components/form/target/details/index.hbs b/ui/admin/app/components/form/target/details/index.hbs index 2fa1f77bd..76c78bb02 100644 --- a/ui/admin/app/components/form/target/details/index.hbs +++ b/ui/admin/app/components/form/target/details/index.hbs @@ -1,6 +1,6 @@ {{/each}} - {{else}} {{t 'resources.target.workers.title'}} {{t 'resources.target.workers.description'}} - {{#unless this.migrateWorkerFilter}} - {{#if this.showDeprecationMessage}} + + {{#if this.showDeprecationMessage}} + + + {{t + 'resources.target.workers.deprecation_message.title' + }} + {{t + 'resources.target.workers.deprecation_message.description' + }} + + + + + {{t 'form.worker_filter.label'}} + {{t 'form.worker_filter.help'}} + + + {{/if}} + + {{#if form.isEditable}} + {{#if this.showUpdateWorkerFilterButton}} - - {{t - 'resources.target.workers.deprecation_message.title' - }} - {{t - 'resources.target.workers.deprecation_message.description' - }} - - - - - {{t 'form.worker_filter.label'}} - {{t 'form.worker_filter.help'}} - + {{/if}} - {{/unless}} + {{/if}} + + {{#if this.showEgressFilter}} + + + + + + + {{#if @model.errors.egress_worker_filter}} + + {{#each @model.errors.egress_worker_filter as |error|}} + {{error.message}} + {{/each}} + + {{/if}} + + + + {{/if}} + + {{#if @model.isNew}} + + + + + + {{#if @model.errors.egress_worker_filter}} + + {{#each @model.errors.egress_worker_filter as |error|}} + {{error.message}} + {{/each}} + + {{/if}} + + + {{/if}} + - {{#if this.showUpdateWorkerFilterButton}} - {{#if form.isEditable}} - - {{/if}} - {{else}} - - - {{#if @model.errors.egress_worker_filter}} - - {{#each @model.errors.egress_worker_filter as |error|}} - {{error.message}} - {{/each}} - - {{/if}} - - {{/if}} {{else}} + @@ -14,10 +17,13 @@ {{#if @toggleEnabled}} diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss index 8cf2b9b12..e370dfa14 100644 --- a/ui/admin/app/styles/app.scss +++ b/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 { diff --git a/ui/admin/tests/acceptance/targets/update-test.js b/ui/admin/tests/acceptance/targets/update-test.js index f51484a47..01a2ed21b 100644 --- a/ui/admin/tests/acceptance/targets/update-test.js +++ b/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) {