Skip to content

feat(ingest): improve sync schedule UX with toggle, info tooltip, and conditional fields #17724

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

Open
rajatoss wants to merge 4 commits into
base: master
Choose a base branch
from
+91 −69
Open

feat(ingest): improve sync schedule UX with toggle, info tooltip, and conditional fields #17724

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
0c85015
feat(ingest): improve sync schedule UX with toggle, info tooltip, and…
rajatoss Jun 4, 2026
63c1976
style(ingest): capitalize "(Recommended)" in sync schedule heading
rajatoss Jun 4, 2026
ec9fd7d
Improve tooltip for schedule sync option
rajatoss Jun 4, 2026
b46e574
Update CreateScheduleStep.tsx
rajatoss Jun 4, 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
94 changes: 49 additions & 45 deletions datahub-web-react/src/app/ingestV2/source/builder/CreateScheduleStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,51 +159,55 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
</WarningContainer>
)}
</Form.Item>
<StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}>
<Schedule>
{advancedCronCheck ? (
<CronInput
placeholder={DAILY_MIDNIGHT_CRON_INTERVAL}
autoFocus
value={scheduleCronInterval}
onChange={(e) => setScheduleCronInterval(e.target.value)}
/>
) : (
<Cron
value={scheduleCronInterval}
setValue={setScheduleCronInterval}
clearButton={false}
className="cron-builder"
leadingZero
/>
)}
<AdvancedSchedule>
<AdvancedCheckBox type="secondary">Show Advanced</AdvancedCheckBox>
<Checkbox
checked={advancedCronCheck}
onChange={(event) => setAdvancedCronCheck(event.target.checked)}
/>
</AdvancedSchedule>
</Schedule>
<CronText>
{cronAsText.error && <>Invalid cron schedule. Cron must be of UNIX form:</>}
{!cronAsText.text && (
<Typography.Paragraph keyboard style={{ marginTop: 4 }}>
minute, hour, day, month, day of week
</Typography.Paragraph>
)}
{cronAsText.text && (
<>
<CronSuccessCheck />
{cronAsText.text}
</>
)}
</CronText>
</StyledFormItem>
<Form.Item required label={<Typography.Text strong>Timezone</Typography.Text>}>
<ItemDescriptionText>Choose a timezone for the schedule.</ItemDescriptionText>
<TimezoneSelect value={scheduleTimezone} onChange={setScheduleTimezone} />
</Form.Item>
{scheduleEnabled && (
<>
<StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}>
<Schedule>
{advancedCronCheck ? (
<CronInput
placeholder={DAILY_MIDNIGHT_CRON_INTERVAL}
autoFocus
value={scheduleCronInterval}
onChange={(e) => setScheduleCronInterval(e.target.value)}
/>
) : (
<Cron
value={scheduleCronInterval}
setValue={setScheduleCronInterval}
clearButton={false}
className="cron-builder"
leadingZero
/>
)}
<AdvancedSchedule>
<AdvancedCheckBox type="secondary">Show Advanced</AdvancedCheckBox>
<Checkbox
checked={advancedCronCheck}
onChange={(event) => setAdvancedCronCheck(event.target.checked)}
/>
</AdvancedSchedule>
</Schedule>
<CronText>
{cronAsText.error && <>Invalid cron schedule. Cron must be of UNIX form:</>}
{!cronAsText.text && (
<Typography.Paragraph keyboard style={{ marginTop: 4 }}>
minute, hour, day, month, day of week
</Typography.Paragraph>
)}
{cronAsText.text && (
<>
<CronSuccessCheck />
{cronAsText.text}
</>
)}
</CronText>
</StyledFormItem>
<Form.Item required label={<Typography.Text strong>Timezone</Typography.Text>}>
<ItemDescriptionText>Choose a timezone for the schedule.</ItemDescriptionText>
<TimezoneSelect value={scheduleTimezone} onChange={setScheduleTimezone} />
</Form.Item>
</>
)}
</RequiredFieldForm>
<ControlsContainer>
<Button variant="outline" color="gray" onClick={prev}>
Expand Down
66 changes: 42 additions & 24 deletions ...ConnectionDetails/sections/recipeSection/sections/syncScheduleSection/ScheduleSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Icon, Switch, Text } from '@components';
import { Info } from '@phosphor-icons/react/dist/csr/Info';
import { Warning } from '@phosphor-icons/react/dist/csr/Warning';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
Expand All @@ -21,6 +22,12 @@ const SectionContainer = styled.div`
gap: 16px;
`;

const ScheduleToggleRow = styled.div`
display: flex;
align-items: center;
gap: 8px;
`;

const SwitchLabel = styled.div`
display: flex;
gap: 2px;
Expand Down Expand Up @@ -107,21 +114,28 @@ export function ScheduleSection() {
return (
<SectionContainer data-testid="sync-schedule-section">
<SectionName name="Sync Schedule" description={subtitle} />
<SwitchLabel>
<Text size="sm" weight="bold" color="gray" colorLevel={600}>
Run on a schedule
</Text>
<Text size="sm" weight="bold" color="gray" colorLevel={1700}>
(recommended)
</Text>
</SwitchLabel>
<Switch
label="Keep metadata current by automatically syncing on a regular interval"
checked={scheduleEnabled}
onChange={(e) => setScheduleEnabled(e.target.checked)}
labelPosition="right"
data-testid="schedule-enabled-switch"
/>
<ScheduleToggleRow>
<Switch
label=""
checked={scheduleEnabled}
onChange={(e) => setScheduleEnabled(e.target.checked)}
data-testid="schedule-enabled-switch"
/>
<SwitchLabel>
<Text size="sm" weight="bold" color="gray" colorLevel={600}>
Run on a schedule
</Text>
<Text size="sm" weight="bold" color="gray" colorLevel={1700}>
(Recommended)
</Text>
</SwitchLabel>
<Icon
icon={Info}
color="gray"
size="md"
tooltipText="Keep metadata current by automatically syncing on a regular interval"
/>
</ScheduleToggleRow>
{!scheduleEnabled && (
<WarningContainer>
<Icon icon={Warning} color="yellow" colorLevel={1000} size="md" />
Expand All @@ -130,15 +144,19 @@ export function ScheduleSection() {
</Text>
</WarningContainer>
)}
<CronField
scheduleCronInterval={scheduleCronInterval}
setScheduleCronInterval={setScheduleCronInterval}
cronAsText={cronAsText}
/>
<TimezoneContainer>
<Text color="gray">Choose a timezone for the schedule.</Text>
<TimezoneSelect value={scheduleTimezone} onChange={setScheduleTimezone} />
</TimezoneContainer>
{scheduleEnabled && (
<>
<CronField
scheduleCronInterval={scheduleCronInterval}
setScheduleCronInterval={setScheduleCronInterval}
cronAsText={cronAsText}
/>
<TimezoneContainer>
<Text color="gray">Choose a timezone for the schedule.</Text>
<TimezoneSelect value={scheduleTimezone} onChange={setScheduleTimezone} />
</TimezoneContainer>
</>
)}
</SectionContainer>
);
}