Skip to content
This repository was archived by the owner on Jan 8, 2024. It is now read-only.

Commit adeea73

Browse files
sdav9375jgwhite
sdav9375
and
jgwhite
committed
Hide sensitive variable values from list and form
Co-authored-by: Jamie White <[email protected]>
1 parent b8a768c commit adeea73

File tree

8 files changed

+129
-60
lines changed

8 files changed

+129
-60
lines changed

‎ui/app/components/project-input-variables/list-item.hbs‎

Lines changed: 80 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,139 @@
11
<li data-test-input-variables-list-item>
22
{{#if (or this.isEditing this.isCreating)}}
3-
<form class="pds-form" data-test-input-variables-form {{on "submit" this.saveVariable}}>
4-
<div part="fields" class="card">
5-
<div class="card-header">
6-
<h4>{{t "form.project_variables_settings.title"}}</h4>
3+
<form class='pds-form' data-test-input-variables-form {{on 'submit' this.saveVariable}}>
4+
<div part='fields' class='card'>
5+
<div class='card-header'>
6+
<h4>{{t 'form.project_variables_settings.title'}}</h4>
77
</div>
8-
<fieldset class="pds-formFieldSet">
9-
<div class="pds-formField">
10-
<label for="input-variable-name" class="pds-fieldName">
11-
{{t "form.project_variables_settings.variable_name"}}
8+
<fieldset class='pds-formFieldSet'>
9+
<div class='pds-formField'>
10+
<label for='input-variable-name' class='pds-fieldName'>
11+
{{t 'form.project_variables_settings.variable_name'}}
1212
</label>
1313
<Pds::Input
14-
@type="text"
14+
@type='text'
1515
data-test-input-variables-var-name
16-
id="input-variable-name"
17-
placeholder={{t "form.project_variables_settings.variable_name_placeholder"}}
16+
id='input-variable-name'
17+
placeholder={{t 'form.project_variables_settings.variable_name_placeholder'}}
1818
value={{this.variable.name}}
19-
{{on "input" (pick "target.value" (set this "variable.name"))}}
19+
{{on 'input' (pick 'target.value' (set this 'variable.name'))}}
2020
/>
2121
</div>
22-
<div class="pds-formField">
23-
<label for="input-variable-value" class="pds-fieldName">
24-
{{t "form.project_variables_settings.variable_value"}}
22+
<div class='pds-formField'>
23+
<label for='input-variable-value' class='pds-fieldName'>
24+
{{t 'form.project_variables_settings.variable_value'}}
2525
</label>
26-
<div class="pds-formField__input-inline-toggle">
26+
<div class='pds-formField__input-inline-toggle'>
2727
{{#if this.isHcl}}
2828
<Pds::Input
29-
@type="text"
29+
@type='text'
3030
data-test-input-variables-var-hcl
31-
id="input-variable-value"
32-
placeholder={{t "form.project_variables_settings.variable_value_placeholder"}}
33-
value={{this.variable.hcl}}
34-
{{on "input" (pick "target.value" (set this "variable.hcl"))}}
31+
id='input-variable-value'
32+
placeholder={{if
33+
this.writeOnly
34+
(t 'form.project_variables_settings.variable_value_placeholder_sensitive')
35+
(t 'form.project_variables_settings.variable_value_placeholder')
36+
}}
37+
value={{if this.writeOnly '' this.variable.hcl}}
38+
{{on 'input' (pick 'target.value' (set this 'variable.hcl'))}}
3539
/>
3640
{{else}}
3741
<Pds::Input
38-
@type="text"
39-
id="input-variable-value"
42+
@type='text'
43+
id='input-variable-value'
4044
data-test-input-variables-var-str
41-
placeholder={{t "form.project_variables_settings.variable_value_placeholder"}}
42-
value={{this.variable.str}}
43-
{{on "input" (pick "target.value" (set this "variable.str"))}}
45+
placeholder={{if
46+
this.writeOnly
47+
(t 'form.project_variables_settings.variable_form_placeholder_sensitive')
48+
(t 'form.project_variables_settings.variable_value_placeholder')
49+
}}
50+
value={{if this.writeOnly '' this.variable.str}}
51+
{{on 'input' (pick 'target.value' (set this 'variable.str'))}}
4452
/>
4553
{{/if}}
46-
<span class="pds-input-inline-toggle">
54+
<span class='pds-input-inline-toggle'>
4755
<input
48-
type="checkbox"
56+
type='checkbox'
4957
data-test-input-variables-toggle-hcl
50-
id="input-variable-hcl"
58+
id='input-variable-hcl'
5159
checked={{this.isHcl}}
52-
{{on "change" (fn this.toggleHcl this.variable)}}>
53-
<label for="input-variable-hcl">HCL</label>
60+
{{on 'change' (fn this.toggleHcl this.variable)}}
61+
/>
62+
<label for='input-variable-hcl'>HCL</label>
5463
</span>
5564
</div>
65+
<div class='pds-formField__input-inline-toggle'>
66+
<Hds::Form::Toggle::Field
67+
data-test-input-variables-toggle-sensitive
68+
checked={{this.isSensitive}}
69+
{{on 'change' (fn this.toggleSensitive this.variable)}}
70+
as |F|
71+
>
72+
<F.Label>
73+
{{t 'form.project_variables_settings.variable_set_sensitive'}}
74+
</F.Label>
75+
</Hds::Form::Toggle::Field>
76+
</div>
5677
</div>
5778
</fieldset>
58-
<div class="card-footer">
79+
<div class='card-footer'>
5980
<Pds::ButtonSet>
60-
<Pds::Button
61-
data-test-input-variables-edit-save
62-
@variant="primary"
63-
@type="submit">
64-
{{t "form.project_variables_settings.button_submit"}}
81+
<Pds::Button data-test-input-variables-edit-save @variant='primary' @type='submit'>
82+
{{t 'form.project_variables_settings.button_submit'}}
6583
</Pds::Button>
6684
<Pds::Button
6785
data-test-input-variables-edit-cancel
68-
@variant="secondary"
69-
{{on "click"
70-
(if this.isCreating this.cancelCreate this.cancelEdit)
71-
}}>
72-
{{t "form.project_variables_settings.button_cancel"}}
86+
@variant='secondary'
87+
{{on 'click' (if this.isCreating this.cancelCreate this.cancelEdit)}}
88+
>
89+
{{t 'form.project_variables_settings.button_cancel'}}
7390
</Pds::Button>
7491
</Pds::ButtonSet>
7592
</div>
7693
</div>
7794
</form>
7895
{{else}}
79-
<div class="variables--list-item">
80-
<span class="variables--list-item-name" data-test-input-variables-var-name>{{this.variable.name}}</span>
81-
<span class="variables--list-item-value" data-test-input-variables-var-value>
82-
{{#if this.isHcl}}
83-
<b class="badge" data-test-input-variables-list-item-is-hcl>
96+
<div class='variables--list-item'>
97+
<span class='variables--list-item-name' data-test-input-variables-var-name>{{this.variable.name}}</span>
98+
<span class='variables--list-item-value' data-test-input-variables-var-value>
99+
{{#if this.isSensitive}}
100+
<Hds::Badge
101+
data-test-sensitive-var-badge
102+
@icon='eye-off'
103+
@text={{t 'form.project_variables_settings.variable_value_placeholder_sensitive'}}
104+
/>
105+
{{else if this.isHcl}}
106+
<b class='badge' data-test-input-variables-list-item-is-hcl>
84107
HCL
85108
</b>
86109
{{this.variable.hcl}}
87110
{{else}}
88111
{{this.variable.str}}
89112
{{/if}}
90113
</span>
91-
<Pds::Dropdown @align="right" as |D|>
92-
<D.Trigger
93-
data-test-input-variables-dropdown
94-
@variant="ghost">
114+
<Pds::Dropdown @align='right' as |D|>
115+
<D.Trigger data-test-input-variables-dropdown @variant='ghost'>
95116
Actions
96117
</D.Trigger>
97-
<D.Dialog >
118+
<D.Dialog>
98119
<section>
99120
<Pds::Button
100121
data-test-input-variables-dropdown-edit
101-
@variant="secondary"
102-
{{on "click" (fn this.editVariable this.variable)}}>
122+
@variant='secondary'
123+
{{on 'click' (fn this.editVariable this.variable)}}
124+
>
103125
Edit
104126
</Pds::Button>
105127
<Pds::Button
106128
data-test-input-variables-dropdown-delete
107-
@variant="warning"
108-
{{on "click" (fn this.deleteVariable this.variable)}}>
129+
@variant='warning'
130+
{{on 'click' (fn this.deleteVariable this.variable)}}
131+
>
109132
Delete
110133
</Pds::Button>
111134
</section>
112135
</D.Dialog>
113136
</Pds::Dropdown>
114137
</div>
115138
{{/if}}
116-
</li>
139+
</li>

‎ui/app/components/project-input-variables/list-item.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { tracked } from '@glimmer/tracking';
33
import { action } from '@ember/object';
44
import { Project, Variable } from 'waypoint-pb';
55
import { inject as service } from '@ember/service';
6-
import ApiService from 'waypoint/services/api';
76

87
interface VariableArgs {
98
variable: Variable.AsObject;
@@ -17,29 +16,35 @@ interface VariableArgs {
1716
}
1817

1918
export default class ProjectInputVariablesListItemComponent extends Component<VariableArgs> {
20-
@service api!: ApiService;
2119
@service('pdsFlashMessages') flashMessages;
2220

2321
initialVariable: Variable.AsObject;
2422
@tracked variable: Variable.AsObject;
2523
@tracked isCreating: boolean;
2624
@tracked isEditing: boolean;
25+
@tracked writeOnly: boolean;
2726

2827
constructor(owner: unknown, args: VariableArgs) {
2928
super(owner, args);
3029
let { variable, isEditing, isCreating } = args;
3130
this.variable = variable;
3231
this.isEditing = isEditing;
3332
this.isCreating = isCreating;
33+
this.writeOnly = false;
3434
this.initialVariable = JSON.parse(JSON.stringify(this.variable));
3535
}
3636

3737
get isHcl(): boolean {
3838
return !!this.variable.hcl;
3939
}
4040

41+
get isSensitive(): boolean {
42+
return !!this.variable.sensitive;
43+
}
44+
4145
storeInitialVariable(): void {
4246
this.initialVariable = JSON.parse(JSON.stringify(this.variable));
47+
this.writeOnly = this.variable.sensitive ? true : false;
4348
}
4449

4550
@action
@@ -99,4 +104,9 @@ export default class ProjectInputVariablesListItemComponent extends Component<Va
99104
this.variable.str = '';
100105
}
101106
}
107+
108+
@action
109+
toggleSensitive(variable: Variable.AsObject): void {
110+
this.variable.sensitive = !variable.sensitive;
111+
}
102112
}

‎ui/app/services/api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ export default class ApiService extends Service {
230230
} else {
231231
variable.setStr(v.str);
232232
}
233+
variable.setSensitive(v.sensitive);
233234
return variable;
234235
});
235236
return varProtosList;

‎ui/mirage/factories/project.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default Factory.extend({
2020
afterCreate(project, server) {
2121
server.createList('variable', 2, 'random-str', { project });
2222
server.create('variable', 'random-hcl', { project });
23+
server.create('variable', 'is-sensitive', { project });
2324
},
2425
}),
2526

‎ui/mirage/factories/variable.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,9 @@ export default Factory.extend({
1010
name: () => faker.hacker.noun(),
1111
hcl: () => faker.hacker.adjective(),
1212
}),
13+
'is-sensitive': trait({
14+
name: () => faker.hacker.noun(),
15+
str: () => faker.hacker.adjective(),
16+
sensitive: true,
17+
}),
1318
});

‎ui/mirage/models/variable.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default Model.extend({
99

1010
result.setServer();
1111
result.setName(this.name);
12+
result.setSensitive(this.sensitive);
1213
if (this.hcl) {
1314
result.setStr('');
1415
result.setHcl(this.hcl);

‎ui/tests/integration/components/project-input-variables-list-test.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,29 @@ module('Integration | Component | project-input-variables-list', function (hooks
103103
'the updated variable value is correct'
104104
);
105105
});
106+
107+
test('sensitive variables are hidden in list', async function (assert) {
108+
let dbproj = await this.server.create('project', { name: 'Proj3' });
109+
this.server.create('variable', 'is-sensitive', { project: dbproj });
110+
let project = dbproj.toProtobuf();
111+
this.set('project', project.toObject());
112+
113+
await render(hbs`<ProjectInputVariables::List @project={{this.project}}/>`);
114+
115+
assert.dom('[data-test-sensitive-var-badge]').exists();
116+
});
117+
118+
test('sensitive variables are hidden in forms', async function (assert) {
119+
let dbproj = await this.server.create('project', { name: 'Proj3' });
120+
this.server.create('variable', 'is-sensitive', { project: dbproj });
121+
let project = dbproj.toProtobuf();
122+
this.set('project', project.toObject());
123+
124+
await render(hbs`<ProjectInputVariables::List @project={{this.project}}/>`);
125+
126+
await page.variablesList.objectAt(0).dropdown();
127+
await page.variablesList.objectAt(0).dropdownEdit();
128+
129+
assert.dom('[data-test-input-variables-var-str]').hasAttribute('placeholder', 'sensitive - write only');
130+
});
106131
});

‎ui/translations/en-us.yaml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,9 @@ form:
150150
variable_name_placeholder: 'var_key'
151151
variable_value: 'Value'
152152
variable_value_placeholder: 'var_value'
153+
variable_set_sensitive: Set as sensitive
154+
variable_value_placeholder_sensitive: 'Sensitive - write only'
155+
variable_form_placeholder_sensitive: 'sensitive - write only'
153156
button_submit: 'Save variable'
154157
button_cancel: 'Cancel'
155158
config_variables_settings:
@@ -315,7 +318,7 @@ image-ref:
315318
workspace-switcher:
316319
error: Failed to load workspaces
317320

318-
runner-alert:
321+
runner-alert:
319322
title: Remote runner required
320323
description: In order to connect to a repository, you must install a remote runner first.
321324
link: Waypoint Runners documentation

0 commit comments

Comments
 (0)