CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icu 7301 UI target oss workflow (#1589)

Browse Source 
Icu 7301 UI target OSS workflow (#1589)
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2023-01-23 14:28:37 -08:00
1 parent da59684f25
commit b41b6ee3e3
8 files changed
+172 -100
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/core/translations/form/en-us.yaml
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+8
View File
@@ -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
+107 -67
View File
@@ -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|>
<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
@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>
<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}}
/>
</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
+22 -9
View File
@@ -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 (
!this.args.model.isNew &&
this.args.model.worker_filter &&
!this.migrateWorkerFilter
);
return this.args.model.worker_filter?.length;
}
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
+7 -1
View File
@@ -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
+19 -14
View File
@@ -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
+6 -6
View File
@@ -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) {