refactor(ui): Misc improvements to the setup ingestion flow (ingest uplift 1/2)

datahub-web-react/src/app/ingest/ManageIngestionPage.tsx

@@ -58,9 +58,9 @@ export const ManageIngestionPage = () => {
  <PageContainer>
  <OnboardingTour stepIds={[INGESTION_CREATE_SOURCE_ID, INGESTION_REFRESH_SOURCES_ID]} />
  <PageHeaderContainer>
- <PageTitle level={3}>Manage Ingestion</PageTitle>
+ <PageTitle level={3}>Manage Data Sources</PageTitle>
  <Typography.Paragraph type="secondary">
- Create, schedule, and run DataHub ingestion sources.
+ Configure and schedule syncs to import data from your data sources
  </Typography.Paragraph>
  </PageHeaderContainer>
  <StyledTabs activeKey={selectedTab} size="large" onTabClick={(tab: string) => onClickTab(tab)}>

datahub-web-react/src/app/ingest/source/builder/CreateScheduleStep.tsx

@@ -10,6 +10,7 @@ import { TimezoneSelect } from './TimezoneSelect';
 import { ANTD_GRAY, REDESIGN_COLORS } from '../../../entity/shared/constants';
 import { lowerFirstLetter } from '../../../shared/textUtil';
 import { IngestionSourceBuilderStep } from './steps';
+import { RequiredFieldForm } from '../../../shared/form/RequiredFieldForm';
 
 const Section = styled.div`
  display: flex;
@@ -31,10 +32,25 @@ const CronText = styled(Typography.Paragraph)`
  color: ${ANTD_GRAY[7]};
 `;
 
+const CronInput = styled(Input)`
+ margin-bottom: 8px;
+ max-width: 200px;
+`;
+
+const Schedule = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: start;
+`;
+
+const AdvancedSchedule = styled.div`
+ margin-left: 20px;
+`;
+
 const AdvancedCheckBox = styled(Typography.Text)`
  margin-right: 10px;
- margin-bottom: 8px;
 `;
+
 const CronSuccessCheck = styled(CheckCircleOutlined)`
  color: ${REDESIGN_COLORS.BLUE};
  margin-right: 4px;
@@ -123,9 +139,9 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
  <Section>
  <SelectTemplateHeader level={5}>Configure an Ingestion Schedule</SelectTemplateHeader>
  </Section>
- <Form layout="vertical">
+ <RequiredFieldForm layout="vertical">
  <Form.Item
- tooltip="Enable to run ingestion on a schedule. Running ingestion on a schedule helps to keep the information inside of DataHub up to date."
+ tooltip="Enable to run ingestion syncs on a schedule. Running syncs on a schedule helps to keep information up to date."
  label={
  <Typography.Text strong>
  Run on a schedule <Typography.Text type="secondary">(Recommended)</Typography.Text>
@@ -141,29 +157,31 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
  )}
  </Form.Item>
  <StyledFormItem required label={<Typography.Text strong>Schedule</Typography.Text>}>
- <div style={{ paddingBottom: 10, paddingLeft: 10 }}>
- <AdvancedCheckBox type="secondary">Advanced</AdvancedCheckBox>
- <Checkbox
- checked={advancedCronCheck}
- onChange={(event) => setAdvancedCronCheck(event.target.checked)}
- />
- </div>
- {advancedCronCheck ? (
- <Input
- 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
- />
- )}
+ <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 && (
@@ -183,14 +201,15 @@ export const CreateScheduleStep = ({ state, updateState, goTo, prev }: StepProps
  <ItemDescriptionText>Choose a timezone for the schedule.</ItemDescriptionText>
  <TimezoneSelect value={scheduleTimezone} onChange={setScheduleTimezone} />
  </Form.Item>
- </Form>
+ </RequiredFieldForm>
  <ControlsContainer>
  <Button onClick={prev}>Previous</Button>
  <div>
  <Button
  data-testid="ingestion-schedule-next-button"
  disabled={!interval || interval.length === 0 || cronAsText.error}
  onClick={onClickNext}
+ type="primary"
  >
  Next
  </Button>

datahub-web-react/src/app/ingest/source/builder/DataPlatformCard.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button, Image } from 'antd';
+import styled from 'styled-components';
+
+import { REDESIGN_COLORS } from '../../../entity/shared/constants';
+
+const Container = styled(Button)`
+ padding: 32px;
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ border-radius: 8px;
+ align-items: start;
+ flex-direction: column;
+ border: 1px solid #e0e0e0;
+ background-color: #ffffff;
+ &&:hover {
+ border: 1px solid ${REDESIGN_COLORS.BLUE};
+ background-color: #ffffff;
+ }
+ white-space: unset;
+`;
+
+const PlatformLogo = styled(Image)`
+ max-height: 32px;
+ height: 32px;
+ width: auto;
+ object-fit: contain;
+ background-color: transparent;
+`;
+
+const LogoContainer = styled.div`
+ margin-bottom: 14px;
+`;
+
+const Title = styled.div`
+ word-break: break-word;
+ color: #464646;
+ font-weight: bold;
+ font-size: 16px;
+ margin-bottom: 8px;
+`;
+
+const Description = styled.div`
+ word-break: break-word;
+ text-align: left;
+ color: #7c7c7c;
+`;
+
+type Props = {
+ logoUrl?: string;
+ logoComponent?: React.ReactNode;
+ name: string;
+ description?: string;
+ onClick?: () => void;
+};
+
+export const DataPlatformCard = ({ logoUrl, logoComponent, name, description, onClick }: Props) => {
+ return (
+ <Container type="link" onClick={onClick}>
+ <LogoContainer>
+ {(logoUrl && <PlatformLogo preview={false} src={logoUrl} alt={name} />) || logoComponent}
+ </LogoContainer>
+ <Title>{name}</Title>
+ <Description>{description}</Description>
+ </Container>
+ );
+};

datahub-web-react/src/app/ingest/source/builder/DefineRecipeStep.tsx

@@ -164,7 +164,7 @@ export const DefineRecipeStep = ({ state, updateState, goTo, prev, ingestionSour
  <Button disabled={isEditing} onClick={prev}>
  Previous
  </Button>
- <Button disabled={!stepComplete} onClick={onClickNext}>
+ <Button type="primary" disabled={!stepComplete} onClick={onClickNext}>
  Next
  </Button>
  </ControlsContainer>

datahub-web-react/src/app/ingest/source/builder/IngestionDocumentationHint.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, Tooltip } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+
+import { SourceConfig } from './types';
+import { ANTD_GRAY } from '../../../entity/shared/constants';
+
+const Container = styled.div`
+ background-color: #ffffff;
+ border-radius: 8px;
+ padding: 12px 12px 16px 24px;
+ border: 1px solid #e0e0e0;
+ margin-bottom: 20px;
+`;
+
+const Header = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+`;
+
+const Title = styled.div`
+ font-size: 16px;
+ font-weight: bold;
+`;
+
+const Description = styled.div`
+ font-size: 14px;
+ max-width: 90%;
+`;
+
+const StyledCloseOutlined = styled(CloseOutlined)`
+ color: ${ANTD_GRAY[6]};
+`;
+
+interface Props {
+ sourceConfigs: SourceConfig;
+ onHide: () => void;
+}
+
+export const IngestionDocumentationHint = ({ sourceConfigs, onHide }: Props) => {
+ const { displayName, docsUrl } = sourceConfigs;
+ return (
+ <Container>
+ <Header>
+ <Title>Let&apos;s get connected! 🎉</Title>
+ <Tooltip showArrow={false} title="Hide">
+ <Button type="text" icon={<StyledCloseOutlined />} onClick={onHide} />
+ </Tooltip>
+ </Header>
+ <Description>
+ <div style={{ marginBottom: 8 }}>
+ To import from {displayName}, we&apos;ll need some more information to connect to your instance.
+ </div>
+ <div>
+ Check out the{' '}
+ <a href={docsUrl} target="_blank" rel="noopener noreferrer">
+ {displayName} Guide
+ </a>{' '}
+ to understand the prerequisites, learn about available settings, and view examples to help connect
+ to the data source.
+ </div>
+ </Description>
+ </Container>
+ );
+};