fix(datahub-web-react): Update Titles and subtitles of Settings pages (#15072)

datahub-web-react/src/app/entityV2/ownership/ManageOwnership.tsx

@@ -1,33 +1,16 @@
-import { Typography } from 'antd';
+import { PageTitle } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 
 import { OwnershipList } from '@app/entityV2/ownership/OwnershipList';
 
 const PageContainer = styled.div`
-    padding-top: 20px;
+    padding: 16px 20px;
     width: 100%;
     display: flex;
     flex-direction: column;
     overflow: auto;
-`;
+    gap: 16px;
-
-const PageHeaderContainer = styled.div`
-    && {
-        padding-left: 24px;
-    }
-`;
-
-const PageTitle = styled(Typography.Title)`
-    && {
-        margin-bottom: 12px;
-    }
-`;
-
-const ListContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
 `;
 
 /**
@@ -36,15 +19,8 @@ const ListContainer = styled.div`
 export const ManageOwnership = () => {
     return (
         <PageContainer>
-            <PageHeaderContainer>
+            <PageTitle title="Manage Ownership" subTitle="Create, edit, and remove custom Ownership Types." />
-                <PageTitle level={3}>Manage Ownership</PageTitle>
+            <OwnershipList />
-                <Typography.Paragraph type="secondary">
-                    Create, edit, and remove custom Ownership Types.
-                </Typography.Paragraph>
-            </PageHeaderContainer>
-            <ListContainer>
-                <OwnershipList />
-            </ListContainer>
         </PageContainer>
     );
 };

datahub-web-react/src/app/settingsV2/AccessTokens.tsx

@@ -1,5 +1,6 @@
 import { red } from '@ant-design/colors';
 import { DeleteOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { PageTitle } from '@components';
 import { Alert, Button, Divider, Dropdown, Empty, Modal, Pagination, Select, Typography, message } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -23,9 +24,7 @@ import { EntityType, FacetFilterInput } from '@types';
 
 const SourceContainer = styled.div`
     width: 100%;
-    padding-top: 20px;
+    padding: 16px 20px;
-    padding-right: 40px;
-    padding-left: 40px;
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -35,18 +34,6 @@ const TokensContainer = styled.div`
     padding-top: 0px;
 `;
 
-const TokensHeaderContainer = styled.div`
-    && {
-        padding-left: 0px;
-    }
-`;
-
-const TokensTitle = styled(Typography.Title)`
-    && {
-        margin-bottom: 8px;
-    }
-`;
-
 const StyledAlert = styled(Alert)`
     padding-top: 12px;
     padding-bottom: 12px;
@@ -322,12 +309,7 @@ export const AccessTokens = () => {
             {tokensError && message.error('Failed to load tokens :(')}
             {revokeTokenError && message.error('Failed to update the Token :(')}
             <TokensContainer>
-                <TokensHeaderContainer>
+                <PageTitle title="Manage Access Tokens" subTitle="Manage Access Tokens for use with DataHub APIs." />
-                    <TokensTitle level={2}>Manage Access Tokens</TokensTitle>
-                    <Typography.Paragraph type="secondary">
-                        Manage Access Tokens for use with DataHub APIs.
-                    </Typography.Paragraph>
-                </TokensHeaderContainer>
             </TokensContainer>
             <Divider />
             {isTokenAuthEnabled === false && (

datahub-web-react/src/app/settingsV2/posts/ManagePosts.tsx

@@ -1,27 +1,16 @@
-import { Typography } from 'antd';
+import { PageTitle } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 
 import { PostList } from '@app/settingsV2/posts/PostsList';
 
-export const PageContainer = styled.div`
+const PageContainer = styled.div`
-    padding-top: 20px;
+    padding: 16px 20px;
     width: 100%;
     display: flex;
     flex-direction: column;
     overflow: auto;
-`;
+    gap: 16px;
-
-export const PageHeaderContainer = styled.div`
-    && {
-        padding-left: 24px;
-    }
-`;
-
-export const PageTitle = styled(Typography.Title)`
-    && {
-        margin-bottom: 12px;
-    }
 `;
 
 const ListContainer = styled.div`
@@ -32,13 +21,11 @@ const ListContainer = styled.div`
 
 export default function ManagePosts() {
     return (
-        <PageContainer>
+        <PageContainer data-testid="managePostsV2">
-            <PageHeaderContainer data-testid="managePostsV2">
+            <PageTitle
-                <PageTitle level={3}>Home Page</PageTitle>
+                title="Home Page"
-                <Typography.Paragraph type="secondary">
+                subTitle="View and manage pinned announcements and links that appear to all users on the landing page."
-                    View and manage pinned announcements and links that appear to all users on the landing page.
+            />
-                </Typography.Paragraph>
-            </PageHeaderContainer>
             <ListContainer>
                 <PostList />
             </ListContainer>