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

src/lib/components/data-encoder-settings.svelte

@@ -26,11 +26,13 @@
 </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;
 
   $: error = '';
   $: namespaceOrCluster = $page.data?.settings?.runtimeEnvironment?.isCloud
@@ -56,7 +58,6 @@
     port = $dataConverterPort;
     passToken = $passAccessToken;
     includeCreds = $includeCredentials;
-    override = $overrideRemoteCodecConfiguration;
     $viewDataEncoderSettings = false;
   };
 
@@ -66,7 +67,6 @@
     $passAccessToken = passToken;
     $includeCredentials = includeCreds;
     $dataConverterPort = port;
-    $overrideRemoteCodecConfiguration = override;
     $viewDataEncoderSettings = false;
 
     if ($page.url.pathname.endsWith('history')) {
@@ -99,50 +99,34 @@
       </p>
       <Accordion
         data-testid="override-accordion"
-        title={override
+        title={$overrideRemoteCodecConfiguration
           ? 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={overrideRemoteCodecConfiguration}>
+          <RadioInput
+            id="use-configuration-endpoint-radio"
+            value={false}
+            label={translate(
+              'data-encoder',
+              'no-browser-override-description',
+              {
+                level: namespaceOrCluster,
+              },
+            )}
+          />
+          <RadioInput
+            id="use-local-endpoint-radio"
+            value={true}
+            label={translate('data-encoder', 'browser-override-description', {
               level: namespaceOrCluster,
             })}
-          </label>
-        </div>
+          />
+        </RadioGroup>
       </Accordion>
       <CodecEndpointSettings
         bind:endpoint
@@ -153,7 +137,8 @@
       <DataConverterPortSettings bind:port />
       <div class="flex items-center gap-4">
         <Button
-          disabled={Boolean(error) || (override && !endpoint)}
+          disabled={Boolean(error) ||
+            ($overrideRemoteCodecConfiguration && !endpoint)}
           data-testid="confirm-data-encoder-button"
           on:click={onConfirm}
           type="submit">{translate('apply')}</Button

src/lib/components/workflow-actions.svelte

@@ -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';
@@ -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;
@@ -68,7 +70,7 @@
 
   const hideResetModal = () => {
     resetReapplyType = ResetReapplyType.Unspecified;
-    resetId = undefined;
+    $resetId = undefined;
     resetReason = undefined;
   };
 
@@ -158,7 +160,7 @@
         namespace,
         workflowId: workflow.id,
         runId: workflow.runId,
-        eventId: resetId,
+        eventId: $resetId,
         reason: formatReason({
           action: Action.Reset,
           reason: resetReason,
@@ -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">

src/lib/components/workflow/filter-search/datetime-filter.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { writable, type Writable } from 'svelte/store';
+
   import {
     addHours,
     addMinutes,
@@ -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';
@@ -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));
 
@@ -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;
@@ -181,24 +184,15 @@
           </div>
         </MenuItem>
       {:else}
-        <MenuItem on:click={() => (type = 'relative')}>
+        <MenuItem>
           <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')}
@@ -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>
@@ -227,22 +221,15 @@
           </div>
         </MenuItem>
         <MenuDivider />
-        <MenuItem on:click={() => (type = 'absolute')}>
+        <MenuItem>
           <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={''}
@@ -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>

src/lib/components/workflow/workflow-reset-form.svelte

@@ -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';
@@ -8,7 +12,7 @@
 
   export let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
   export let reason = '';
-  export let eventId: string;
+  export let eventId: Writable<string>;
 
   const resetReapplyTypes = [
     {
@@ -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"

src/lib/holocene/menu/menu-item.svelte

@@ -124,7 +124,7 @@
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}
-    on:click|preventDefault|stopPropagation={handleClick}
+    on:click={handleClick}
     on:keydown|stopPropagation={handleKeydown}
     {...$$restProps}
   >
@@ -154,7 +154,7 @@
 
 <style lang="postcss">
   .menu-item {
-    @apply m-1 flex cursor-pointer flex-row items-center gap-2 rounded px-3 py-2 font-primary text-sm font-medium hover:bg-indigo-50 focus:bg-indigo-50 focus:shadow-focus focus:shadow-blue-600/50 focus:outline focus:outline-1 focus:outline-indigo-600;
+    @apply m-1 flex cursor-pointer flex-row items-center gap-2 rounded px-3 py-2 font-primary text-sm font-medium hover:bg-indigo-50 focus:outline-none focus-visible:bg-indigo-50 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:outline focus-visible:outline-1 focus-visible:outline-indigo-600;
   }
 
   .menu-item-wrapper {

src/lib/holocene/radio-input/index.ts

@@ -0,0 +1,6 @@
+import RadioGroup, { RADIO_GROUP_CONTEXT } from './radio-group.svelte';
+import RadioInput from './radio-input.svelte';
+
+export type { RadioGroupContext, RadioInputProps } from './types';
+
+export { RADIO_GROUP_CONTEXT, RadioGroup, RadioInput };