Skip to content

Migrate holocene modal to runes syntax #3759

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

Merged
tegan-temporal merged 4 commits into from
Aug 3, 2026
Merged

Migrate holocene modal to runes syntax #3759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb821f3
Update holocene orderable-list-item to runes syntax
tegan-temporal Jul 29, 2026
85dce54
Add runes modal alongside legacy (strangler part 1)
tegan-temporal Jul 29, 2026
a6d9cb6
Migrate all ui modal consumers to runes modal (strangler part 2)
tegan-temporal Jul 29, 2026
f9a8fb1
Collapse: migrate modal.svelte in place, drop parallel runes file
tegan-temporal Jul 29, 2026
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
54 changes: 29 additions & 25 deletions src/lib/components/activity/activity-pause-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,30 +47,34 @@
confirmText={translate('workflows.pause')}
cancelText={translate('common.cancel')}
confirmType="destructive"
on:cancelModal={hideModal}
on:confirmModal={onActivityPause}
onCancelModal={hideModal}
onConfirmModal={onActivityPause}
>
<h3 slot="title">
{translate('activities.pause-modal-confirmation', {
activityId,
})}
</h3>
<div slot="content">
<p>{translate('activities.pause-modal-description')}</p>
<Link
newTab
trailingIcon="book"
href="https://docs.temporal.io/activity-operations#important-considerations"
class="mt-1"
>
{translate('activities.pause-modal-docs-link')}
</Link>
<Input
id="activity-pause-reason"
class="mt-4"
placeholder={translate('common.reason-placeholder')}
label={translate('common.reason-optional')}
bind:value={reason}
/>
</div>
{#snippet titleSnippet()}

@laurakwhit laurakwhit Aug 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Wonder if we really need a title snippet here or if we could just pass the title copy instead.

<h3>
{translate('activities.pause-modal-confirmation', {
activityId,
})}
</h3>
{/snippet}
{#snippet content()}
<div>
<p>{translate('activities.pause-modal-description')}</p>
<Link
newTab
trailingIcon="book"
href="https://docs.temporal.io/activity-operations#important-considerations"
class="mt-1"
>
{translate('activities.pause-modal-docs-link')}
</Link>
<Input
id="activity-pause-reason"
class="mt-4"
placeholder={translate('common.reason-placeholder')}
label={translate('common.reason-optional')}
bind:value={reason}
/>
</div>
{/snippet}
</Modal>
34 changes: 19 additions & 15 deletions src/lib/components/activity/activity-reset-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,24 @@
confirmText={translate('workflows.reset')}
cancelText={translate('common.cancel')}
confirmType="destructive"
on:cancelModal={hideModal}
on:confirmModal={onActivityReset}
onCancelModal={hideModal}
onConfirmModal={onActivityReset}
>
<h3 slot="title">
{translate('activities.reset-modal-confirmation', {
activityId,
})}
</h3>
<div slot="content" class="flex flex-col gap-4">
<p>{translate('activities.reset-modal-description')}</p>
<Checkbox
bind:checked={resetHeartbeat}
label={translate('activities.reset-heartbeat-details')}
data-testid="reset-heartbeat-details"
/>
</div>
{#snippet titleSnippet()}
<h3>
{translate('activities.reset-modal-confirmation', {
activityId,
})}
</h3>
{/snippet}
{#snippet content()}
<div class="flex flex-col gap-4">
<p>{translate('activities.reset-modal-description')}</p>
<Checkbox
bind:checked={resetHeartbeat}
label={translate('activities.reset-heartbeat-details')}
data-testid="reset-heartbeat-details"
/>
</div>
{/snippet}
</Modal>
24 changes: 14 additions & 10 deletions src/lib/components/activity/activity-unpause-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,19 @@
confirmText={translate('workflows.unpause')}
cancelText={translate('common.cancel')}
confirmType="destructive"
on:cancelModal={hideModal}
on:confirmModal={onActivityUnpause}
onCancelModal={hideModal}
onConfirmModal={onActivityUnpause}
>
<h3 slot="title">
{translate('activities.unpause-modal-confirmation', {
activityId,
})}
</h3>
<div slot="content">
<p>{translate('activities.unpause-modal-description')}</p>
</div>
{#snippet titleSnippet()}
<h3>
{translate('activities.unpause-modal-confirmation', {
activityId,
})}
</h3>
{/snippet}
{#snippet content()}
<div>
<p>{translate('activities.unpause-modal-description')}</p>
</div>
{/snippet}
</Modal>
96 changes: 50 additions & 46 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 @@ -84,55 +84,59 @@
cancelText={translate('common.cancel')}
confirmText={translate('common.apply')}
{confirmDisabled}
on:cancelModal={onCancel}
on:confirmModal={onConfirm}
onCancelModal={onCancel}
onConfirmModal={onConfirm}
large
data-theme={md.current ? 'dark' : undefined}
>
<h3 slot="title" data-testid="data-encoder-title">
{translate('common.codec-server')}
</h3>
<div slot="content" class="flex w-full flex-col gap-4">
<p class="text-sm">
{translate('data-encoder.codec-server-description-prefix')}<Link
href="https://docs.temporal.io/dataconversion#codec-server"
newTab>{translate('common.codec-server')}</Link
>
{translate('data-encoder.codec-server-description-suffix', {
level: namespaceOrCluster,
})}
</p>

<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', {
{#snippet titleSnippet()}
<h3 data-testid="data-encoder-title">
{translate('common.codec-server')}
</h3>
{/snippet}
{#snippet content()}
<div class="flex w-full flex-col gap-4">
<p class="text-sm">
{translate('data-encoder.codec-server-description-prefix')}<Link
href="https://docs.temporal.io/dataconversion#codec-server"
newTab>{translate('common.codec-server')}</Link
>
{translate('data-encoder.codec-server-description-suffix', {
level: namespaceOrCluster,
})}
description={clusterOrNamespaceLevelSetting
? clusterOrNamespaceLevelSetting
: ''}
/>

<RadioInput
id="use-local-endpoint-radio"
data-testid="use-local-endpoint-input"
value={true}
label={translate('data-encoder.browser-override-description', {
level: namespaceOrCluster,
})}
/>
</RadioGroup>

{#if $override}
<CodecEndpointSettings
bind:endpoint
bind:passToken
bind:includeCreds
{error}
/>
{/if}
</div>
</p>

<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,
})}
description={clusterOrNamespaceLevelSetting
? clusterOrNamespaceLevelSetting
: ''}
/>

<RadioInput
id="use-local-endpoint-radio"
data-testid="use-local-endpoint-input"
value={true}
label={translate('data-encoder.browser-override-description', {
level: namespaceOrCluster,
})}
/>
</RadioGroup>

{#if $override}
<CodecEndpointSettings
bind:endpoint
bind:passToken
bind:includeCreds
{error}
/>
{/if}
</div>
{/snippet}
</Modal>
34 changes: 19 additions & 15 deletions src/lib/components/delete-confirmation-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,24 @@
cancelText={translate('common.cancel')}
confirmType="destructive"
confirmDisabled={deleteInput !== 'DELETE'}
on:confirmModal={() => onConfirm?.()}
on:cancelModal={() => onCancel?.()}
onConfirmModal={() => onConfirm?.()}
onCancelModal={() => onCancel?.()}
>
<h3 slot="title">{title}</h3>
<div slot="content" class="flex flex-col gap-4">
<p class="text-sm">{description}</p>
{#if entityName}
<p class="font-mono text-sm font-medium">{entityName}</p>
{/if}
<Input
id="{id}-confirm-input"
label={translate('deployments.delete-deployment-confirm-instruction')}
bind:value={deleteInput}
required
/>
</div>
{#snippet titleSnippet()}
<h3>{title}</h3>
{/snippet}
{#snippet content()}
<div class="flex flex-col gap-4">
<p class="text-sm">{description}</p>
{#if entityName}
<p class="font-mono text-sm font-medium">{entityName}</p>
{/if}
<Input
id="{id}-confirm-input"
label={translate('deployments.delete-deployment-confirm-instruction')}
bind:value={deleteInput}
required
/>
</div>
{/snippet}
</Modal>
18 changes: 11 additions & 7 deletions src/lib/components/deployments/delete-deployment-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,18 @@
confirmText=""
cancelText={translate('common.close')}
hideConfirm
on:cancelModal={() => onCancel?.()}
onCancelModal={() => onCancel?.()}
>
<h3 slot="title">{translate('deployments.cannot-delete-deployment')}</h3>
<div slot="content">
<p class="text-sm">
{translate('deployments.cannot-delete-deployment-body')}
</p>
</div>
{#snippet titleSnippet()}
<h3>{translate('deployments.cannot-delete-deployment')}</h3>
{/snippet}
{#snippet content()}
<div>
<p class="text-sm">
{translate('deployments.cannot-delete-deployment-body')}
</p>
</div>
{/snippet}
</Modal>
{:else}
<DeleteConfirmModal
Expand Down
58 changes: 33 additions & 25 deletions src/lib/components/deployments/ramp-unversioned-modal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,31 +28,39 @@
{open}
confirmText={translate('common.confirm')}
cancelText={translate('common.cancel')}
on:confirmModal={() => onConfirm?.(percentage)}
on:cancelModal={() => onCancel?.()}
onConfirmModal={() => onConfirm?.(percentage)}
onCancelModal={() => onCancel?.()}
>
{#if onRemove}
<Button slot="footer" variant="destructive" size="sm" onclick={onRemove}>
{translate('deployments.remove-unversioned-ramping')}
</Button>
{/if}
<h3 slot="title">{translate('deployments.ramp-to-unversioned')}</h3>
<div slot="content" class="flex flex-col gap-4">
<p class="text-sm">
{translate('deployments.ramp-to-unversioned-description')}
</p>
<NumberInput
id="unversioned-ramping-percentage"
label={translate('deployments.ramping-percentage', {
percentage: '',
}).trim()}
bind:value={percentage}
min={0}
max={100}
units="%"
/>
{#if error}
<p class="text-sm text-danger">{error}</p>
{#snippet footer()}
{#if onRemove}
<Button variant="destructive" size="sm" onclick={onRemove}>
{translate('deployments.remove-unversioned-ramping')}
</Button>
{:else}
<div></div>
{/if}
</div>
{/snippet}
{#snippet titleSnippet()}
<h3>{translate('deployments.ramp-to-unversioned')}</h3>
{/snippet}
{#snippet content()}
<div class="flex flex-col gap-4">
<p class="text-sm">
{translate('deployments.ramp-to-unversioned-description')}
</p>
<NumberInput
id="unversioned-ramping-percentage"
label={translate('deployments.ramping-percentage', {
percentage: '',
}).trim()}
bind:value={percentage}
min={0}
max={100}
units="%"
/>
{#if error}
<p class="text-sm text-danger">{error}</p>
{/if}
</div>
{/snippet}
</Modal>
Loading
Loading