feat(ui): Add warning banner to looker and lookml UI ingestion forms (d…

…atahub-project#6111)

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

@@ -1,5 +1,5 @@
-import { Alert, Button, Space, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
+import { Alert, Button, Space, Typography } from 'antd';
 import styled from 'styled-components';
 import { StepProps } from './types';
 import { getPlaceholderRecipe, getSourceConfigs, jsonToYaml } from '../utils';

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Alert } from 'antd';
+import { LOOKER, LOOK_ML } from './constants';
+
+const LOOKML_DOC_LINK = 'https://datahubproject.io/docs/generated/ingestion/sources/looker#module-lookml';
+const LOOKER_DOC_LINK = 'https://datahubproject.io/docs/generated/ingestion/sources/looker#module-looker';
+
+interface Props {
+    type: string;
+}
+
+export const LookerWarning = ({ type }: Props) => {
+    let link: React.ReactNode;
+    if (type === LOOKER) {
+        link = (
+            <a href={LOOKML_DOC_LINK} target="_blank" rel="noopener noreferrer">
+                DataHub lookml module
+            </a>
+        );
+    } else if (type === LOOK_ML) {
+        link = (
+            <a href={LOOKER_DOC_LINK} target="_blank" rel="noopener noreferrer">
+                DataHub looker module
+            </a>
+        );
+    }
+
+    return (
+        <Alert
+            style={{ marginBottom: '10px' }}
+            type="warning"
+            banner
+            message={
+                <>
+                    To get complete Looker metadata integration (including Looker views and lineage to the underlying
+                    warehouse tables), you must <b>also</b> use the {link}.
+                </>
+            }
+        />
+    );
+};

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

@@ -1,12 +1,14 @@
-import { Button, message } from 'antd';
 import React, { useState } from 'react';
+import { Button, message, Typography } from 'antd';
 import YAML from 'yamljs';
 import { CodeOutlined, FormOutlined } from '@ant-design/icons';
 import styled from 'styled-components/macro';
 import { ANTD_GRAY } from '../../../entity/shared/constants';
 import { YamlEditor } from './YamlEditor';
 import RecipeForm from './RecipeForm/RecipeForm';
 import { SourceBuilderState, SourceConfig } from './types';
+import { LOOKER, LOOK_ML } from './constants';
+import { LookerWarning } from './LookerWarning';
 
 export const ControlsContainer = styled.div`
     display: flex;
@@ -32,9 +34,20 @@ const StyledButton = styled(Button)<{ isSelected: boolean }>`
     `}
 `;
 
+const Title = styled(Typography.Title)`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+`;
+
 const ButtonsWrapper = styled.div`
     display: flex;
     justify-content: flex-end;
+`;
+
+const HeaderContainer = styled.div`
+    display: flex;
+    justify-content: space-between;
     margin-bottom: 10px;
 `;
 
@@ -50,7 +63,7 @@ interface Props {
 
 function RecipeBuilder(props: Props) {
     const { state, isEditing, displayRecipe, sourceConfigs, setStagedRecipe, onClickNext, goToPrevious } = props;
-
+    const { type } = state;
     const [isViewingForm, setIsViewingForm] = useState(true);
 
     function switchViews(isFormView: boolean) {
@@ -67,14 +80,20 @@ function RecipeBuilder(props: Props) {
 
     return (
         <div>
-            <ButtonsWrapper>
-                <StyledButton type="text" isSelected={isViewingForm} onClick={() => switchViews(true)}>
-                    <FormOutlined /> Form
-                </StyledButton>
-                <StyledButton type="text" isSelected={!isViewingForm} onClick={() => switchViews(false)}>
-                    <CodeOutlined /> YAML
-                </StyledButton>
-            </ButtonsWrapper>
+            {(type === LOOKER || type === LOOK_ML) && <LookerWarning type={type} />}
+            <HeaderContainer>
+                <Title style={{ marginBottom: 0 }} level={5}>
+                    {sourceConfigs?.displayName} Recipe
+                </Title>
+                <ButtonsWrapper>
+                    <StyledButton type="text" isSelected={isViewingForm} onClick={() => switchViews(true)}>
+                        <FormOutlined /> Form
+                    </StyledButton>
+                    <StyledButton type="text" isSelected={!isViewingForm} onClick={() => switchViews(false)}>
+                        <CodeOutlined /> YAML
+                    </StyledButton>
+                </ButtonsWrapper>
+            </HeaderContainer>
             {isViewingForm && (
                 <RecipeForm
                     state={state}