refactor(ui): Misc improvements to the setup ingestion flow (ingest u…

…plift 1/2) (#10764) Co-authored-by: John Joyce <[email protected]> Co-authored-by: John Joyce <[email protected]>
datahub-project · Jul 16, 2024 · 1e32d73 · 1e32d73
1 parent 18969a5
commit 1e32d73
Show file tree

Hide file tree

Showing 19 changed files with 490 additions and 208 deletions.
diff --git a/datahub-web-react/src/app/ingest/ManageIngestionPage.tsx b/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)}>

diff --git a/datahub-web-react/src/app/ingest/source/builder/CreateScheduleStep.tsx b/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>

diff --git a/datahub-web-react/src/app/ingest/source/builder/DataPlatformCard.tsx b/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>
+    );
+};
diff --git a/datahub-web-react/src/app/ingest/source/builder/DefineRecipeStep.tsx b/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>

diff --git a/datahub-web-react/src/app/ingest/source/builder/IngestionDocumentationHint.tsx b/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>
+    );
+};