feat(ingestion): update the layout of secrets tab

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

@@ -1,4 +1,6 @@
-import { Tabs, Typography } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, PageTitle } from '@components';
+import { Tabs } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import styled from 'styled-components';
@@ -8,44 +10,53 @@ import { SecretsList } from '@app/ingest/secret/SecretsList';
 import { IngestionSourceList } from '@app/ingest/source/IngestionSourceList';
 import { TabType } from '@app/ingest/types';
 import { OnboardingTour } from '@app/onboarding/OnboardingTour';
-import {
-    INGESTION_CREATE_SOURCE_ID,
-    INGESTION_REFRESH_SOURCES_ID,
-} from '@app/onboarding/config/IngestionOnboardingConfig';
+import { INGESTION_CREATE_SOURCE_ID } from '@app/onboarding/config/IngestionOnboardingConfig';
+import { NoPageFound } from '@app/shared/NoPageFound';
 import { useAppConfig } from '@app/useAppConfig';
 import { useShowNavBarRedesign } from '@app/useShowNavBarRedesign';
 
 const PageContainer = styled.div<{ $isShowNavBarRedesign?: boolean }>`
-    padding-top: 20px;
+    padding-top: 16px;
+    padding-right: 16px;
     background-color: white;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     border-radius: ${(props) =>
         props.$isShowNavBarRedesign ? props.theme.styles['border-radius-navbar-redesign'] : '8px'};
     ${(props) =>
         props.$isShowNavBarRedesign &&
         `
-        overflow: hidden;
         margin: 5px;
         box-shadow: ${props.theme.styles['box-shadow-navbar-redesign']};
-        height: 100%;
     `}
 `;
 
 const PageHeaderContainer = styled.div`
     && {
-        padding-left: 24px;
+        padding-left: 20px;
+        padding-right: 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
     }
 `;
 
-const PageTitle = styled(Typography.Title)`
-    && {
-        margin-bottom: 12px;
-    }
+const TitleContainer = styled.div`
+    flex: 1;
+`;
+
+const HeaderActionsContainer = styled.div`
+    display: flex;
+    justify-content: flex-end;
 `;
 
 const StyledTabs = styled(Tabs)`
     &&& .ant-tabs-nav {
         margin-bottom: 0;
-        padding-left: 28px;
+        padding-left: 20px;
     }
 `;
 
@@ -54,26 +65,42 @@ const Tab = styled(Tabs.TabPane)`
     line-height: 22px;
 `;
 
-const ListContainer = styled.div``;
+const ListContainer = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+`;
 
 export const ManageIngestionPage = () => {
     /**
      * Determines which view should be visible: ingestion sources or secrets.
      */
-    const me = useUserContext();
-    const { config, loaded } = useAppConfig();
+    const { platformPrivileges, loaded: loadedPlatformPrivileges } = useUserContext();
+    const { config, loaded: loadedAppConfig } = useAppConfig();
     const isIngestionEnabled = config?.managedIngestionConfig?.enabled;
-    const showIngestionTab = isIngestionEnabled && me && me.platformPrivileges?.manageIngestion;
-    const showSecretsTab = isIngestionEnabled && me && me.platformPrivileges?.manageSecrets;
-    const [selectedTab, setSelectedTab] = useState<TabType>(TabType.Sources);
+    const showIngestionTab = isIngestionEnabled && platformPrivileges?.manageIngestion;
+    const showSecretsTab = isIngestionEnabled && platformPrivileges?.manageSecrets;
+
+    // undefined == not loaded, null == no permissions
+    const [selectedTab, setSelectedTab] = useState<TabType | undefined | null>();
+
+    const [showCreateSourceModal, setShowCreateSourceModal] = useState<boolean>(false);
+    const [showCreateSecretModal, setShowCreateSecretModal] = useState<boolean>(false);
     const isShowNavBarRedesign = useShowNavBarRedesign();
 
     // defaultTab might not be calculated correctly on mount, if `config` or `me` haven't been loaded yet
     useEffect(() => {
-        if (loaded && me.loaded && !showIngestionTab && selectedTab === TabType.Sources) {
-            setSelectedTab(TabType.Secrets);
+        if (loadedAppConfig && loadedPlatformPrivileges && selectedTab === undefined) {
+            if (showIngestionTab) {
+                setSelectedTab(TabType.Sources);
+            } else if (showSecretsTab) {
+                setSelectedTab(TabType.Secrets);
+            } else {
+                setSelectedTab(null);
+            }
         }
-    }, [loaded, me.loaded, showIngestionTab, selectedTab]);
+    }, [loadedAppConfig, loadedPlatformPrivileges, showIngestionTab, showSecretsTab, selectedTab]);
 
     const history = useHistory();
     const onSwitchTab = (newTab: string, options?: { clearQueryParams: boolean }) => {
@@ -84,19 +111,61 @@ export const ManageIngestionPage = () => {
         }
     };
 
+    const handleCreateSource = () => {
+        setShowCreateSourceModal(true);
+    };
+
+    const handleCreateSecret = () => {
+        setShowCreateSecretModal(true);
+    };
+
     const TabTypeToListComponent = {
-        [TabType.Sources]: <IngestionSourceList />,
-        [TabType.Secrets]: <SecretsList />,
+        [TabType.Sources]: (
+            <IngestionSourceList
+                showCreateModal={showCreateSourceModal}
+                setShowCreateModal={setShowCreateSourceModal}
+            />
+        ),
+        [TabType.Secrets]: (
+            <SecretsList showCreateModal={showCreateSecretModal} setShowCreateModal={setShowCreateSecretModal} />
+        ),
     };
 
+    if (selectedTab === undefined) {
+        return <></>; // loading
+    }
+    if (selectedTab === null) {
+        return <NoPageFound />;
+    }
+
     return (
         <PageContainer $isShowNavBarRedesign={isShowNavBarRedesign}>
-            <OnboardingTour stepIds={[INGESTION_CREATE_SOURCE_ID, INGESTION_REFRESH_SOURCES_ID]} />
+            <OnboardingTour stepIds={[INGESTION_CREATE_SOURCE_ID]} />
             <PageHeaderContainer>
-                <PageTitle level={3}>Manage Data Sources</PageTitle>
-                <Typography.Paragraph type="secondary">
-                    Configure and schedule syncs to import data from your data sources
-                </Typography.Paragraph>
+                <TitleContainer>
+                    <PageTitle
+                        title="Manage Data Sources"
+                        subTitle="Configure and schedule syncs to import data from your data sources"
+                    />
+                </TitleContainer>
+                <HeaderActionsContainer>
+                    {selectedTab === TabType.Sources && showIngestionTab && (
+                        <Button
+                            variant="filled"
+                            id={INGESTION_CREATE_SOURCE_ID}
+                            onClick={handleCreateSource}
+                            data-testid="create-ingestion-source-button"
+                        >
+                            <PlusOutlined style={{ marginRight: '4px' }} /> Create new source
+                        </Button>
+                    )}
+
+                    {selectedTab === TabType.Secrets && showSecretsTab && (
+                        <Button variant="filled" onClick={handleCreateSecret} data-testid="create-secret-button">
+                            <PlusOutlined style={{ marginRight: '4px' }} /> Create new secret
+                        </Button>
+                    )}
+                </HeaderActionsContainer>
             </PageHeaderContainer>
             <StyledTabs
                 activeKey={selectedTab}