Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DT-1407 - add RadioInput component and replace existing native radio inputs #1670

Merged
merged 8 commits into from
Oct 10, 2023
Merged

DT-1407 - add RadioInput component and replace existing native radio inputs #1670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5e152c6
add RadioInput component and replace existing
rossedfort Oct 5, 2023
d8e577b
add click listener back to MenuItem in DatetimeFilter
rossedfort Oct 6, 2023
61a8787
fix override in data encoder settings
rossedfort Oct 6, 2023
ee73b2a
rm console.log
rossedfort Oct 6, 2023
aa256f1
Merge remote-tracking branch 'origin/main' into DT-1407-radio-input
rossedfort Oct 6, 2023
0e0b505
update snaps
rossedfort Oct 6, 2023
bfbb789
add data-testid back to data-encoder radio inputs
rossedfort Oct 10, 2023
788957e
fix radio input
rossedfort Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 27 additions & 38 deletions src/lib/components/data-encoder-settings.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,14 @@
</script>

<script lang="ts">
import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';

let endpoint = $codecEndpoint ?? '';
let port = $dataConverterPort ?? '';
let passToken = $passAccessToken ?? false;
let includeCreds = $includeCredentials ?? false;
let override = $overrideRemoteCodecConfiguration ?? false;
laurakwhit marked this conversation as resolved.
Show resolved Hide resolved
let override = writable($overrideRemoteCodecConfiguration);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious why you've chosen writable over ⬇️ here

Suggested change
let override = writable($overrideRemoteCodecConfiguration);
let override = $overrideRemoteCodecConfiguration ?? false;

and if we want to change the other variables to stores as well 🤔

Copy link
Contributor Author

@rossedfort rossedfort Oct 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did it this way because override needs to be a Writable, and let override = $overrideRemoteCodecConfiguration would make override the value of the store, i.e. a boolean. Additionally, let override = overrideRemoteCodecConfiguration (without the $) would assign override by reference and thus the store value would still be mutated.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah forgot about the context r.e. the group needing to be a store in the note for this PR, thanks!


$: error = '';
$: namespaceOrCluster = $page.data?.settings?.runtimeEnvironment?.isCloud
Expand All @@ -56,7 +59,7 @@
port = $dataConverterPort;
passToken = $passAccessToken;
includeCreds = $includeCredentials;
override = $overrideRemoteCodecConfiguration;
$override = $overrideRemoteCodecConfiguration;
$viewDataEncoderSettings = false;
};

Expand All @@ -66,8 +69,8 @@
$passAccessToken = passToken;
$includeCredentials = includeCreds;
$dataConverterPort = port;
$overrideRemoteCodecConfiguration = override;
$viewDataEncoderSettings = false;
$overrideRemoteCodecConfiguration = $override;

if ($page.url.pathname.endsWith('history')) {
$refresh = Date.now();
Expand Down Expand Up @@ -99,50 +102,36 @@
</p>
<Accordion
data-testid="override-accordion"
title={override
title={$override
? translate('data-encoder', 'browser-override-description', {
level: namespaceOrCluster,
})
: translate('data-encoder', 'no-browser-override-description', {
level: namespaceOrCluster,
})}
>
<div class="flex flex-col gap-2">
<label
class="flex cursor-pointer flex-row items-center gap-2"
for="use-configuration-endpoint-radio"
>
<input
on:click={() => (override = false)}
class="h-4 w-4 accent-gray-900"
type="radio"
checked={!override}
name="use-configuration-endpoint"
id="use-configuration-endpoint-radio"
data-testid="use-configuration-endpoint-input"
/>
{translate('data-encoder', 'no-browser-override-description', {
level: namespaceOrCluster,
})}
</label>
<label
class="flex cursor-pointer flex-row items-center gap-2"
for="use-local-endpoint-radio"
>
<input
on:click={() => (override = true)}
class="h-4 w-4 accent-gray-900"
type="radio"
checked={override}
name="use-local-endpoint"
id="use-local-endpoint-radio"
data-testid="use-local-endpoint-input"
/>
{translate('data-encoder', 'browser-override-description', {
<RadioGroup name="override" group={override}>
<RadioInput
id="use-configuration-endpoint-radio"
data-testid="use-configuration-endpoint-input"
value={false}
label={translate(
'data-encoder',
'no-browser-override-description',
{
level: namespaceOrCluster,
},
)}
/>
<RadioInput
id="use-local-endpoint-radio"
data-testid="use-local-endpoint-input"
value={true}
label={translate('data-encoder', 'browser-override-description', {
level: namespaceOrCluster,
})}
</label>
</div>
/>
</RadioGroup>
</Accordion>
<CodecEndpointSettings
bind:endpoint
Expand Down
10 changes: 6 additions & 4 deletions src/lib/components/workflow-actions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import { writable } from 'svelte/store';

import { page } from '$app/stores';

import WorkflowResetForm from '$lib/components/workflow/workflow-reset-form.svelte';
Expand Down Expand Up @@ -47,7 +49,7 @@
let signalConfirmationModalOpen = false;
let error = '';
let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
let resetId: string;
let resetId = writable<string>();
let resetReason: string;
let loading = false;
let resetTooltipText: string;
Expand All @@ -68,7 +70,7 @@

const hideResetModal = () => {
resetReapplyType = ResetReapplyType.Unspecified;
resetId = undefined;
$resetId = undefined;
resetReason = undefined;
};

Expand Down Expand Up @@ -158,7 +160,7 @@
namespace,
workflowId: workflow.id,
runId: workflow.runId,
eventId: resetId,
eventId: $resetId,
reason: formatReason({
action: Action.Reset,
reason: resetReason,
Expand Down Expand Up @@ -294,7 +296,7 @@
bind:open={resetConfirmationModalOpen}
on:confirmModal={reset}
on:cancelModal={hideResetModal}
confirmDisabled={!resetId}
confirmDisabled={!$resetId}
>
<h3 slot="title">{translate('workflows', 'reset-modal-title')}</h3>
<svelte:fragment slot="content">
Expand Down
65 changes: 26 additions & 39 deletions src/lib/components/workflow/filter-search/datetime-filter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
<script lang="ts">
import { writable, type Writable } from 'svelte/store';

import {
addHours,
addMinutes,
Expand All @@ -15,6 +17,7 @@
import { Menu, MenuButton, MenuContainer } from '$lib/holocene/menu';
import MenuDivider from '$lib/holocene/menu/menu-divider.svelte';
import MenuItem from '$lib/holocene/menu/menu-item.svelte';
import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
import Option from '$lib/holocene/select/option.svelte';
import Select from '$lib/holocene/select/select.svelte';
import TimePicker from '$lib/holocene/time-picker.svelte';
Expand Down Expand Up @@ -48,11 +51,11 @@
let timeUnit = TIME_UNIT_OPTIONS[0];
let relativeTime = '';

let type: 'relative' | 'absolute' = 'relative';
const type: Writable<'relative' | 'absolute'> = writable('relative');

$: useBetweenDateTimeQuery = isTimeRange || !$supportsAdvancedVisibility;
$: disabled =
type === 'relative' &&
$type === 'relative' &&
!useBetweenDateTimeQuery &&
(!relativeTime || error(relativeTime));

Expand All @@ -77,7 +80,7 @@
};

const onApply = () => {
if (type === 'relative' && !useBetweenDateTimeQuery) {
if ($type === 'relative' && !useBetweenDateTimeQuery) {
if (!relativeTime) return;
$filter.value = toDate(`${relativeTime} ${timeUnit}`);
$filter.customDate = false;
Expand Down Expand Up @@ -181,24 +184,15 @@
</div>
</MenuItem>
{:else}
<MenuItem on:click={() => (type = 'relative')}>
<MenuItem on:click={() => ($type = 'relative')}>
<div class="flex flex-col">
<label
class="flex cursor-pointer flex-row items-center gap-2"
for="relative-time"
>
<input
on:click|stopPropagation={() => {
type = 'relative';
}}
class="h-4 w-4 accent-gray-900"
type="radio"
checked={type === 'relative'}
id="relative-time"
tabindex="-1"
/>
{translate('relative')}
</label>
<RadioInput
label={translate('relative')}
id="relative-time"
value="relative"
name="time-filter-type"
group={type}
/>
<div class="ml-6 flex gap-0 pt-2">
<Input
label={translate('relative')}
Expand All @@ -209,15 +203,15 @@
error={error(relativeTime)}
unroundRight
class="h-10"
disabled={type !== 'relative'}
disabled={$type !== 'relative'}
/>
<Select
unroundLeft
bind:value={timeUnit}
id="relative-datetime-unit-input"
label={translate('time-unit')}
labelHidden
disabled={type !== 'relative'}
disabled={$type !== 'relative'}
>
{#each TIME_UNIT_OPTIONS as unit}
<Option value={unit}>{unit} {translate('ago')}</Option>
Expand All @@ -227,22 +221,15 @@
</div>
</MenuItem>
<MenuDivider />
<MenuItem on:click={() => (type = 'absolute')}>
<MenuItem on:click={() => ($type = 'absolute')}>
<div class="flex flex-col gap-2">
<label
class="flex cursor-pointer flex-row items-center gap-2"
for="absolute-time"
>
<input
on:click|stopPropagation={() => (type = 'absolute')}
class="h-4 w-4 accent-gray-900"
type="radio"
checked={type === 'absolute'}
id="absolute-time"
tabindex="-1"
/>
{translate('absolute')}
</label>
<RadioInput
label={translate('absolute')}
id="absolute-time"
value="absolute"
name="time-filter-type"
group={type}
/>
<div class="ml-6 flex flex-col gap-2">
<DatePicker
label={''}
Expand All @@ -252,14 +239,14 @@
todayLabel={translate('today')}
closeLabel={translate('close')}
clearLabel={translate('clear-input-button-label')}
disabled={type !== 'absolute'}
disabled={$type !== 'absolute'}
/>
<TimePicker
bind:hour={startHour}
bind:minute={startMinute}
bind:second={startSecond}
twelveHourClock={false}
disabled={type !== 'absolute'}
disabled={$type !== 'absolute'}
/>
</div>
</div>
Expand Down
43 changes: 16 additions & 27 deletions src/lib/components/workflow/workflow-reset-form.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<script lang="ts">
import type { Writable } from 'svelte/store';

import Input from '$lib/holocene/input/input.svelte';
import RadioGroup from '$lib/holocene/radio-input/radio-group.svelte';
import RadioInput from '$lib/holocene/radio-input/radio-input.svelte';
import Option from '$lib/holocene/select/option.svelte';
import Select from '$lib/holocene/select/select.svelte';
import { translate } from '$lib/i18n/translate';
Expand All @@ -8,7 +12,7 @@

export let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
export let reason = '';
export let eventId: string;
export let eventId: Writable<string>;

const resetReapplyTypes = [
{
Expand All @@ -27,34 +31,19 @@
</script>

<div class="flex w-full flex-col gap-4">
<ul class="max-h-40 w-full overflow-y-scroll rounded border border-primary">
<RadioGroup
name="reset-event-id"
group={eventId}
class="max-h-40 overflow-auto"
>
{#each $resetEvents as event}
<li
class="h-10 w-full border-b border-primary from-blue-100 to-purple-100 bg-fixed first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-none hover:bg-gradient-to-br"
>
<label
class="flex h-full w-full cursor-pointer flex-row items-center gap-2 px-4 py-2"
for="reset-event-{event.id}"
>
<input
on:click={() => (eventId = event.id)}
type="radio"
checked={event.id === eventId}
name="reset-event-id"
id="reset-event-{event.id}"
/>
<p class="grid grid-cols-8">
<span class="col-span-1 font-medium text-gray-500">
{event.eventId}
</span>
<span class="font-semibold">
{event.eventType}
</span>
</p>
</label>
</li>
<RadioInput
id="reset-event-{event.id}"
value={event.id}
label="{event.id} - {event.eventType}"
/>
{/each}
</ul>
</RadioGroup>
<Select
label={translate('workflows', 'reset-reapply-type-label')}
id="reset-reapply-type-select"
Expand Down
Loading
Loading