Skip to content

Commit a0d8fe5

Browse files
feedmeapplesAlex-Tideman
feedmeapples
and
Alex-Tideman
authored
Checkbox for whether to pass access token to codec (#941)
* Checkbox for whether to pass access token to codec * Refactor the data encoder settings modal * Fix unit and cypress tests * Add back absolute for checkbox label * Bump version number Co-authored-by: Alex Tideman <[email protected]>
1 parent e658a68 commit a0d8fe5

17 files changed

+267
-334
lines changed

‎cypress/integration/data-encoder-settings.spec.js

+89-125
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
describe('Set Data Encoder Settings', () => {
2-
describe('Data Encoder without site setting endpoint', () => {
2+
describe('Data Encoder without site setting codec endpoint', () => {
33
beforeEach(() => {
44
cy.interceptApi();
5+
cy.clearLocalStorage();
56

67
cy.visit('/namespaces/default/workflows');
78

@@ -19,7 +20,7 @@ describe('Set Data Encoder Settings', () => {
1920
cy.get('[data-cy="navigation-header"]').as('header');
2021
});
2122

22-
it('can set and clear both endpoint and port with error message', () => {
23+
it('Enter invalid endpoint to show error and enter valid enpoint with confirm', () => {
2324
cy.get('@header').find('[data-cy="data-encoder-status"]').click();
2425
cy.get('[data-cy="data-encoder-title"]').contains('Data Encoder');
2526
cy.get('[data-cy="data-encoder-endpoint-title"]').contains(
@@ -29,75 +30,82 @@ describe('Set Data Encoder Settings', () => {
2930
'have.value',
3031
'',
3132
);
32-
cy.get('[data-cy="data-encoder-set-endpoint"]').contains('Set');
33-
3433
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
35-
cy.get('[data-cy="data-encoder-set-port"]').contains('Set');
3634

3735
// Set invalid endpoint and get error
3836
cy.get('[data-cy="data-encoder-endpoint-input"]').type('abc123');
39-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
37+
4038
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
4139
'Endpoint must start with http:// or https://',
4240
);
4341

42+
cy.get('[data-cy="confirm-modal-button"]').should('be.disabled');
43+
4444
// Clear endpoint and set valid endpoint
4545
cy.get('[data-cy="data-encoder-endpoint-input"]').clear();
4646
cy.get('[data-cy="data-encoder-endpoint-input"]').type('http://test.com');
47-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
48-
cy.get('[data-cy="data-encoder-endpoint"]').contains('http://test.com');
49-
cy.get('[data-cy="data-encoder-clear-endpoint"]').contains('Clear');
50-
51-
// Clear endpoint
52-
cy.get('[data-cy="data-encoder-clear-endpoint"]').click();
53-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
47+
cy.get('[data-cy="confirm-modal-button"]').click();
5448

55-
// Set port
56-
cy.get('[data-cy="data-encoder-port-input"]').type('5534');
57-
cy.get('[data-cy="data-encoder-set-port"]').click();
58-
cy.get('[data-cy="data-encoder-port"]').contains('5534');
59-
cy.get('[data-cy="data-encoder-clear-port"]').contains('Clear');
60-
cy.get('[data-cy="data-encoder-clear-port"]').click();
61-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
49+
cy.get('@header')
50+
.find('[data-cy="data-encoder-status-configured"]')
51+
.should('be.visible');
52+
cy.get('@header')
53+
.find('[data-cy="data-encoder-status-configured"]')
54+
.click();
6255

63-
cy.get('[data-cy="data-encoder-info"]').contains(
64-
'If both are set, the Remote Codec Endpoint will be used.',
56+
cy.get('[data-cy="data-encoder-endpoint-input"]').should(
57+
'have.value',
58+
'http://test.com',
6559
);
6660
});
67-
});
6861

69-
describe('Data Encoder with site setting endpoint', () => {
70-
beforeEach(() => {
71-
cy.interceptApi();
62+
it('Check pass access token and enter invalid endpoint to show error and enter valid enpoint with confirm', () => {
63+
cy.get('@header').find('[data-cy="data-encoder-status"]').click();
64+
cy.get('[data-cy="data-encoder-title"]').contains('Data Encoder');
65+
cy.get('[data-cy="data-encoder-endpoint-title"]').contains(
66+
'Remote Codec Endpoint',
67+
);
68+
cy.get('[data-cy="data-encoder-endpoint-input"]').should(
69+
'have.value',
70+
'',
71+
);
72+
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
7273

73-
cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/settings*', {
74-
Auth: { Enabled: false, Options: null },
75-
Codec: {
76-
Endpoint: 'http://test.com',
77-
},
78-
}).as('settings-api');
74+
// Set pass access token to true
75+
cy.get('.checkmark').click();
7976

80-
cy.visit('/namespaces/default/workflows');
77+
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
78+
'Endpoint must be https:// if passing access token',
79+
);
8180

82-
cy.fixture('namespaces.json')
83-
.then(({ namespaces }) => {
84-
return namespaces
85-
.map((n) => n.namespaceInfo.name)
86-
.filter((name) => name !== 'temporal-system');
87-
})
88-
.as('namespaces');
81+
cy.get('[data-cy="data-encoder-endpoint-input"]').type('http://test.com');
82+
cy.get('[data-cy="confirm-modal-button"]').should('be.disabled');
8983

90-
cy.wait('@namespaces-api');
91-
cy.wait('@workflows-api');
92-
cy.wait('@settings-api');
84+
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
85+
'Endpoint must be https:// if passing access token',
86+
);
9387

94-
cy.get('[data-cy="navigation-header"]').as('header');
95-
});
88+
cy.get('[data-cy="data-encoder-endpoint-input"]').clear();
89+
cy.get('[data-cy="data-encoder-endpoint-input"]').type(
90+
'https://test.com',
91+
);
92+
cy.get('[data-cy="confirm-modal-button"]').click();
9693

97-
it('can set and clear both endpoint and port with error message', () => {
94+
cy.get('@header')
95+
.find('[data-cy="data-encoder-status-configured"]')
96+
.should('be.visible');
9897
cy.get('@header')
9998
.find('[data-cy="data-encoder-status-configured"]')
10099
.click();
100+
101+
cy.get('[data-cy="data-encoder-endpoint-input"]').should(
102+
'have.value',
103+
'https://test.com',
104+
);
105+
});
106+
107+
it('Enter port with confirm', () => {
108+
cy.get('@header').find('[data-cy="data-encoder-status"]').click();
101109
cy.get('[data-cy="data-encoder-title"]').contains('Data Encoder');
102110
cy.get('[data-cy="data-encoder-endpoint-title"]').contains(
103111
'Remote Codec Endpoint',
@@ -106,58 +114,34 @@ describe('Set Data Encoder Settings', () => {
106114
'have.value',
107115
'',
108116
);
109-
cy.get('[data-cy="data-encoder-set-endpoint"]').contains('Set');
110-
cy.get('[data-cy="data-encoder-site-endpoint"]').contains(
111-
'http://test.com',
112-
);
113-
114117
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
115-
cy.get('[data-cy="data-encoder-set-port"]').contains('Set');
116-
117-
// Set invalid endpoint and get error
118-
cy.get('[data-cy="data-encoder-endpoint-input"]').type('abc123');
119-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
120-
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
121-
'Endpoint must start with http:// or https://',
122-
);
123-
124-
// Clear endpoint and set valid endpoint
125-
cy.get('[data-cy="data-encoder-endpoint-input"]').clear();
126-
cy.get('[data-cy="data-encoder-endpoint-input"]').type('http://test.com');
127-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
128-
cy.get('[data-cy="data-encoder-endpoint"]').contains('http://test.com');
129-
cy.get('[data-cy="data-encoder-clear-endpoint"]').contains('Clear');
130-
cy.get('[data-cy="data-encoder-endpoint-info"]').contains(
131-
'Set endpoint overrides site setting endpoint.',
132-
);
133118

134-
// Clear endpoint
135-
cy.get('[data-cy="data-encoder-clear-endpoint"]').click();
136-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
119+
cy.get('[data-cy="data-encoder-port-input"]').type('3456');
120+
cy.get('[data-cy="confirm-modal-button"]').click();
137121

138-
// Set port
139-
cy.get('[data-cy="data-encoder-port-input"]').type('5534');
140-
cy.get('[data-cy="data-encoder-set-port"]').click();
141-
cy.get('[data-cy="data-encoder-port"]').contains('5534');
142-
cy.get('[data-cy="data-encoder-clear-port"]').contains('Clear');
143-
cy.get('[data-cy="data-encoder-clear-port"]').click();
144-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
122+
cy.get('@header')
123+
.find('[data-cy="data-encoder-status-configured"]')
124+
.should('be.visible');
145125

146-
cy.get('[data-cy="data-encoder-info"]').contains(
147-
'If both are set, the Remote Codec Endpoint will be used.',
126+
cy.get('@header')
127+
.find('[data-cy="data-encoder-status-configured"]')
128+
.click();
129+
cy.get('[data-cy="data-encoder-port-input"]').should(
130+
'have.value',
131+
'3456',
148132
);
149133
});
150134
});
151135

152-
describe('Data Encoder with site setting endpoint and access token', () => {
136+
describe('Data Encoder with site setting codec endpoint', () => {
153137
beforeEach(() => {
154138
cy.interceptApi();
139+
cy.clearLocalStorage();
155140

156141
cy.intercept(Cypress.env('VITE_API_HOST') + '/api/v1/settings*', {
157142
Auth: { Enabled: false, Options: null },
158143
Codec: {
159-
Endpoint: 'http://test.com',
160-
PassAccessToken: true,
144+
Endpoint: 'http://www.site-setting.com',
161145
},
162146
}).as('settings-api');
163147

@@ -171,75 +155,55 @@ describe('Set Data Encoder Settings', () => {
171155
})
172156
.as('namespaces');
173157

174-
cy.wait('@namespaces-api');
175158
cy.wait('@workflows-api');
176-
cy.wait('@settings-api');
159+
cy.wait('@namespaces-api');
177160

178161
cy.get('[data-cy="navigation-header"]').as('header');
179162
});
180163

181-
it('can set and clear both endpoint and port with error message', () => {
164+
it('Enter invalid endpoint to show error and enter valid enpoint with confirm', () => {
182165
cy.get('@header')
183166
.find('[data-cy="data-encoder-status-configured"]')
184167
.click();
185168
cy.get('[data-cy="data-encoder-title"]').contains('Data Encoder');
186169
cy.get('[data-cy="data-encoder-endpoint-title"]').contains(
187170
'Remote Codec Endpoint',
188171
);
172+
173+
cy.get('[data-cy="data-encoder-site-endpoint"]').contains(
174+
'http://www.site-setting.com',
175+
);
176+
189177
cy.get('[data-cy="data-encoder-endpoint-input"]').should(
190178
'have.value',
191179
'',
192180
);
193-
cy.get('[data-cy="data-encoder-set-endpoint"]').contains('Set');
194-
cy.get('[data-cy="data-encoder-site-endpoint"]').contains(
195-
'http://test.com',
196-
);
197-
198181
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
199-
cy.get('[data-cy="data-encoder-set-port"]').contains('Set');
200182

201183
// Set invalid endpoint and get error
202184
cy.get('[data-cy="data-encoder-endpoint-input"]').type('abc123');
203-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
185+
204186
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
205187
'Endpoint must start with http:// or https://',
206188
);
207189

208-
// Clear endpoint and set invalid http endpoint
209-
cy.get('[data-cy="data-encoder-endpoint-input"]').clear();
210-
cy.get('[data-cy="data-encoder-endpoint-input"]').type('http://test.com');
211-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
212-
cy.get('[data-cy="data-encoder-endpoint-error"]').contains(
213-
'Endpoint must start with https:// to authenticate',
214-
);
190+
cy.get('[data-cy="confirm-modal-button"]').should('be.disabled');
215191

216-
// Clear endpoint and set valid https endpoint
192+
// Clear endpoint and set valid endpoint
217193
cy.get('[data-cy="data-encoder-endpoint-input"]').clear();
218-
cy.get('[data-cy="data-encoder-endpoint-input"]').type(
219-
'https://test.com',
220-
);
221-
cy.get('[data-cy="data-encoder-set-endpoint"]').click();
222-
223-
cy.get('[data-cy="data-encoder-endpoint"]').contains('https://test.com');
224-
cy.get('[data-cy="data-encoder-clear-endpoint"]').contains('Clear');
225-
cy.get('[data-cy="data-encoder-endpoint-info"]').contains(
226-
'Set endpoint overrides site setting endpoint.',
227-
);
228-
229-
// Clear endpoint
230-
cy.get('[data-cy="data-encoder-clear-endpoint"]').click();
231-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
194+
cy.get('[data-cy="data-encoder-endpoint-input"]').type('http://test.com');
195+
cy.get('[data-cy="confirm-modal-button"]').click();
232196

233-
// Set port
234-
cy.get('[data-cy="data-encoder-port-input"]').type('5534');
235-
cy.get('[data-cy="data-encoder-set-port"]').click();
236-
cy.get('[data-cy="data-encoder-port"]').contains('5534');
237-
cy.get('[data-cy="data-encoder-clear-port"]').contains('Clear');
238-
cy.get('[data-cy="data-encoder-clear-port"]').click();
239-
cy.get('[data-cy="data-encoder-port-input"]').should('have.value', '');
197+
cy.get('@header')
198+
.find('[data-cy="data-encoder-status-configured"]')
199+
.should('be.visible');
200+
cy.get('@header')
201+
.find('[data-cy="data-encoder-status-configured"]')
202+
.click();
240203

241-
cy.get('[data-cy="data-encoder-info"]').contains(
242-
'If both are set, the Remote Codec Endpoint will be used.',
204+
cy.get('[data-cy="data-encoder-endpoint-input"]').should(
205+
'have.value',
206+
'http://test.com',
243207
);
244208
});
245209
});

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@temporalio/ui",
3-
"version": "2.1.83",
3+
"version": "2.1.84",
44
"type": "module",
55
"description": "Temporal.io UI",
66
"keywords": [

‎src/lib/holocene/checkbox.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717

1818
<label
1919
on:click
20+
on:keypress
2021
class="checkbox {$$props.class}"
2122
class:disabled
2223
class:on-dark={onDark}

‎src/lib/holocene/codec-endpoint-settings.svelte

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import {
3+
codecEndpoint,
4+
passAccessToken,
5+
} from '$lib/stores/data-encoder-config';
6+
import { dataEncoder } from '$lib/stores/data-encoder';
7+
8+
import Checkbox from '$holocene/checkbox.svelte';
9+
10+
export let endpoint = '';
11+
export let passToken = false;
12+
export let error = '';
13+
</script>
14+
15+
<div class="mb-8">
16+
<h3 class="text-lg" data-cy="data-encoder-endpoint-title">
17+
Remote Codec Endpoint
18+
</h3>
19+
<div class="flex flex-col gap-2">
20+
<Checkbox
21+
bind:checked={passToken}
22+
data-cy="data-encoder-pass-access-token"
23+
label="Pass access token"
24+
class="mt-2 mb-2 block h-5 w-full"
25+
/>
26+
<textarea
27+
class="block w-full rounded-md border border-gray-200 p-2"
28+
rows={3}
29+
placeholder="Endpoint"
30+
data-cy="data-encoder-endpoint-input"
31+
bind:value={endpoint}
32+
/>
33+
{#if error}
34+
<small data-cy="data-encoder-endpoint-error" class="text-red-700"
35+
>{error}</small
36+
>
37+
{/if}
38+
{#if $dataEncoder.settingsEndpoint}
39+
<div class="flex items-center justify-between">
40+
<p data-cy="data-encoder-site-endpoint">
41+
{$dataEncoder.settingsEndpoint}
42+
</p>
43+
<p data-cy="data-encoder-site-settings">Site setting</p>
44+
</div>
45+
{#if $codecEndpoint}
46+
<small class="text-yellow-700" data-cy="data-encoder-endpoint-info"
47+
>Set endpoint overrides site setting endpoint.</small
48+
>
49+
{/if}
50+
{/if}
51+
</div>
52+
</div>

0 commit comments

Comments
 (0)