fix(ingestion modal): stylistic fixes for ingestion modal (#14236)

Co-authored-by: Aseem Bansal <asmbansal2@gmail.com>

Author: gabe-lyons

datahub-web-react/src/app/ingestV2/executions/components/BaseTab.tsx

@@ -1,6 +1,8 @@
 import { Typography } from 'antd';
 import styled from 'styled-components';
 
+import colors from '@src/alchemy-components/theme/foundations/colors';
+
 export const SectionBase = styled.div`
     padding: 16px 30px 0;
 `;
@@ -12,3 +14,17 @@ export const SectionHeader = styled(Typography.Title)`
         margin-bottom: 12px;
     }
 `;
+
+export const DetailsContainer = styled.div`
+    margin-top: 12px;
+
+    pre {
+        background-color: ${colors.gray[1500]};
+        border: 1px solid ${colors.gray[1400]};
+        border-radius: 8px;
+        padding: 16px;
+        margin: 0;
+        color: ${colors.gray[1700]};
+        overflow-y: auto;
+    }
+`;

datahub-web-react/src/app/ingestV2/executions/components/ExecutionDetailsModal.tsx

@@ -1,7 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Icon, Modal, Pill } from '@components';
 import { message } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { Tab, Tabs } from '@components/components/Tabs/Tabs';
 
@@ -23,6 +23,7 @@ import { ExecutionRequestResult } from '@types';
 
 const modalBodyStyle = {
     padding: 0,
+    height: '80vh',
 };
 
 type Props = {
@@ -58,35 +59,37 @@ export const ExecutionDetailsModal = ({ urn, open, onClose }: Props) => {
         const interval = setInterval(() => {
             if (status === EXECUTION_REQUEST_STATUS_RUNNING) refetch();
         }, 2000);
-
         return () => clearInterval(interval);
-    });
+    }, [status, refetch]);
 
-    const tabs: Tab[] = [
-        {
-            component: (
-                <SummaryTab
-                    urn={urn}
-                    status={status}
-                    result={result}
-                    data={data}
-                    onTabChange={(tab: TabType) => setSelectedTab(tab)}
-                />
-            ),
-            key: TabType.Summary,
-            name: TabType.Summary,
-        },
-        {
-            component: <LogsTab urn={urn} data={data} />,
-            key: TabType.Logs,
-            name: TabType.Logs,
-        },
-        {
-            component: <RecipeTab data={data} />,
-            key: TabType.Recipe,
-            name: TabType.Recipe,
-        },
-    ];
+    const tabs: Tab[] = useMemo(
+        () => [
+            {
+                component: (
+                    <SummaryTab
+                        urn={urn}
+                        status={status}
+                        result={result}
+                        data={data}
+                        onTabChange={(tab: TabType) => setSelectedTab(tab)}
+                    />
+                ),
+                key: TabType.Summary,
+                name: TabType.Summary,
+            },
+            {
+                component: <LogsTab urn={urn} data={data} />,
+                key: TabType.Logs,
+                name: TabType.Logs,
+            },
+            {
+                component: <RecipeTab urn={urn} data={data} />,
+                key: TabType.Recipe,
+                name: TabType.Recipe,
+            },
+        ],
+        [data, urn, result, status],
+    );
 
     return (
         <Modal
@@ -96,7 +99,7 @@ export const ExecutionDetailsModal = ({ urn, open, onClose }: Props) => {
             titlePill={titlePill}
             open={open}
             onCancel={onClose}
-            buttons={[{ text: 'Close', variant: 'outline', onClick: onClose }]}
+            buttons={[]}
         >
             {!data && loading && <Message type="loading" content="Loading execution run details..." />}
             {error && message.error('Failed to load execution run details :(')}

datahub-web-react/src/app/ingestV2/executions/components/LogsTab.tsx

@@ -1,10 +1,10 @@
 import { DownloadOutlined } from '@ant-design/icons';
-import { Button, Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
-import { SectionHeader } from '@app/ingestV2/executions/components/BaseTab';
+import { DetailsContainer, SectionHeader } from '@app/ingestV2/executions/components/BaseTab';
 import { downloadFile } from '@app/search/utils/csvUtils';
+import { Button, Text, Tooltip } from '@src/alchemy-components';
 
 import { GetIngestionExecutionRequestQuery } from '@graphql/ingestion.generated';
 
@@ -14,7 +14,7 @@ const SectionSubHeader = styled.div`
     align-items: center;
 `;
 
-const SubHeaderParagraph = styled(Typography.Paragraph)`
+const SubHeaderParagraph = styled(Text)`
     margin-bottom: 0px;
 `;
 
@@ -35,15 +35,20 @@ export const LogsTab = ({ urn, data }: { urn: string; data: GetIngestionExecutio
         <LogsSection>
             <SectionHeader level={5}>Logs</SectionHeader>
             <SectionSubHeader>
-                <SubHeaderParagraph type="secondary">View logs that were collected during the sync.</SubHeaderParagraph>
-                <Button type="text" onClick={downloadLogs}>
-                    <DownloadOutlined />
-                    Download
-                </Button>
+                <SubHeaderParagraph color="gray" colorLevel={600}>
+                    View logs that were collected during the sync.
+                </SubHeaderParagraph>
+                <Tooltip title="Download Logs">
+                    <Button variant="text" onClick={downloadLogs}>
+                        <DownloadOutlined />
+                    </Button>
+                </Tooltip>
             </SectionSubHeader>
-            <Typography.Paragraph ellipsis>
-                <pre>{output}</pre>
-            </Typography.Paragraph>
+            <DetailsContainer>
+                <Text size="sm">
+                    <pre>{output}</pre>
+                </Text>
+            </DetailsContainer>
         </LogsSection>
     );
 };

datahub-web-react/src/app/ingestV2/executions/components/RecipeTab.tsx

@@ -1,9 +1,11 @@
-import { Typography } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
 import React from 'react';
 import styled from 'styled-components';
 import YAML from 'yamljs';
 
-import { SectionBase, SectionHeader } from '@app/ingestV2/executions/components/BaseTab';
+import { DetailsContainer, SectionBase, SectionHeader } from '@app/ingestV2/executions/components/BaseTab';
+import { downloadFile } from '@app/search/utils/csvUtils';
+import { Button, Text, Tooltip } from '@src/alchemy-components';
 import colors from '@src/alchemy-components/theme/foundations/colors';
 
 import { GetIngestionExecutionRequestQuery } from '@graphql/ingestion.generated';
@@ -14,15 +16,15 @@ const SectionSubHeader = styled.div`
     align-items: center;
 `;
 
-const SubHeaderParagraph = styled(Typography.Paragraph)`
+const SubHeaderParagraph = styled(Text)`
     margin-bottom: 0px;
 `;
 
 const RecipeSection = styled(SectionBase)`
     border-top: 1px solid ${colors.gray[1400]};
 `;
 
-export const RecipeTab = ({ data }: { data: GetIngestionExecutionRequestQuery | undefined }) => {
+export const RecipeTab = ({ urn, data }: { urn: string; data: GetIngestionExecutionRequestQuery | undefined }) => {
     const recipeJson = data?.executionRequest?.input?.arguments?.find((arg) => arg.key === 'recipe')?.value;
     let recipeYaml: string;
     try {
@@ -31,17 +33,28 @@ export const RecipeTab = ({ data }: { data: GetIngestionExecutionRequestQuery |
         recipeYaml = '';
     }
 
+    const downloadRecipe = () => {
+        downloadFile(recipeYaml, `recipe-${urn}.yaml`);
+    };
+
     return (
         <RecipeSection>
             <SectionHeader level={5}>Recipe</SectionHeader>
             <SectionSubHeader>
-                <SubHeaderParagraph type="secondary">
+                <SubHeaderParagraph color="gray" colorLevel={600}>
                     The configurations used for this sync with the data source.
                 </SubHeaderParagraph>
+                <Tooltip title="Download Recipe">
+                    <Button variant="text" onClick={downloadRecipe}>
+                        <DownloadOutlined />
+                    </Button>
+                </Tooltip>
             </SectionSubHeader>
-            <Typography.Paragraph ellipsis>
-                <pre>{recipeYaml || 'No recipe found.'}</pre>
-            </Typography.Paragraph>
+            <DetailsContainer>
+                <Text size="sm">
+                    <pre>{recipeYaml || 'No recipe found.'}</pre>
+                </Text>
+            </DetailsContainer>
         </RecipeSection>
     );
 };