PRD-742/fix:Settings tab should have 2 scrollable sections (#9218)

datahub-project · Nov 20, 2023 · a704290 · a704290
1 parent b7df9e0
commit a704290
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 15 deletions.
diff --git a/datahub-web-react/src/app/entity/ownership/ManageOwnership.tsx b/datahub-web-react/src/app/entity/ownership/ManageOwnership.tsx
@@ -6,6 +6,9 @@ import { OwnershipList } from './OwnershipList';
 const PageContainer = styled.div`
     padding-top: 20px;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const PageHeaderContainer = styled.div`
@@ -20,7 +23,11 @@ const PageTitle = styled(Typography.Title)`
     }
 `;
 
-const ListContainer = styled.div``;
+const ListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 /**
  * Component used for displaying the 'Manage Ownership' experience.

diff --git a/datahub-web-react/src/app/entity/view/ManageViews.tsx b/datahub-web-react/src/app/entity/view/ManageViews.tsx
@@ -6,6 +6,9 @@ import { ViewsList } from './ViewsList';
 const PageContainer = styled.div`
     padding-top: 20px;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const PageHeaderContainer = styled.div`
@@ -20,7 +23,11 @@ const PageTitle = styled(Typography.Title)`
     }
 `;
 
-const ListContainer = styled.div``;
+const ListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 /**
  * Component used for displaying the 'Manage Views' experience.

diff --git a/datahub-web-react/src/app/identity/ManageIdentities.tsx b/datahub-web-react/src/app/identity/ManageIdentities.tsx
@@ -8,6 +8,10 @@ import { UserList } from './user/UserList';
 const PageContainer = styled.div`
     padding-top: 20px;
     width: 100%;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 `;
 
 const PageHeaderContainer = styled.div`
@@ -23,11 +27,14 @@ const PageTitle = styled(Typography.Title)`
 `;
 
 const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
     &&& .ant-tabs-nav {
         margin: 0;
     }
     color: #262626;
-    height: calc(100vh - 60px);
+    // height: calc(100vh - 60px);
 
     &&& .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
         padding-left: 28px;

diff --git a/datahub-web-react/src/app/identity/group/GroupList.tsx b/datahub-web-react/src/app/identity/group/GroupList.tsx
@@ -17,9 +17,16 @@ import { GROUPS_CREATE_GROUP_ID, GROUPS_INTRO_ID } from '../../onboarding/config
 import { OnboardingTour } from '../../onboarding/OnboardingTour';
 import { addGroupToListGroupsCache, DEFAULT_GROUP_LIST_PAGE_SIZE, removeGroupFromListGroupsCache } from './cacheUtils';
 
-const GroupContainer = styled.div``;
+const GroupContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 const GroupStyledList = styled(List)`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
     &&& {
         width: 100%;
         border-color: ${(props) => props.theme.styles['border-color-base']};

diff --git a/datahub-web-react/src/app/identity/user/UserList.tsx b/datahub-web-react/src/app/identity/user/UserList.tsx
@@ -25,9 +25,16 @@ import { useUpdateEducationStepIdsAllowlist } from '../../onboarding/useUpdateEd
 import { DEFAULT_USER_LIST_PAGE_SIZE, removeUserFromListUsersCache } from './cacheUtils';
 import { useUserContext } from '../../context/useUserContext';
 
-const UserContainer = styled.div``;
+const UserContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 const UserStyledList = styled(List)`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
     &&& {
         width: 100%;
         border-color: ${(props) => props.theme.styles['border-color-base']};

diff --git a/datahub-web-react/src/app/permissions/ManagePermissions.tsx b/datahub-web-react/src/app/permissions/ManagePermissions.tsx
@@ -8,6 +8,9 @@ import { ManageRoles } from './roles/ManageRoles';
 const PageContainer = styled.div`
     padding-top: 20px;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const PageHeaderContainer = styled.div`
@@ -27,7 +30,9 @@ const Content = styled.div`
         margin: 0;
     }
     color: #262626;
-    height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 
     &&& .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
         padding-left: 28px;

diff --git a/datahub-web-react/src/app/permissions/policy/ManagePolicies.tsx b/datahub-web-react/src/app/permissions/policy/ManagePolicies.tsx
@@ -38,7 +38,11 @@ import analytics, { EventType } from '../../analytics';
 import { POLICIES_CREATE_POLICY_ID, POLICIES_INTRO_ID } from '../../onboarding/config/PoliciesOnboardingConfig';
 import { OnboardingTour } from '../../onboarding/OnboardingTour';
 
-const SourceContainer = styled.div``;
+const SourceContainer = styled.div`
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+`;
 
 const PaginationContainer = styled.div`
     display: flex;
@@ -75,6 +79,9 @@ const EditPolicyButton = styled(Button)`
 
 const PageContainer = styled.span`
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const DEFAULT_PAGE_SIZE = 10;

diff --git a/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx b/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
@@ -21,7 +21,11 @@ import { OnboardingTour } from '../../onboarding/OnboardingTour';
 import { ROLES_INTRO_ID } from '../../onboarding/config/RolesOnboardingConfig';
 import { clearUserListCache } from '../../identity/user/cacheUtils';
 
-const SourceContainer = styled.div``;
+const SourceContainer = styled.div`
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+`;
 
 const PaginationContainer = styled.div`
     display: flex;
@@ -35,6 +39,9 @@ const RoleName = styled.span`
 
 const PageContainer = styled.span`
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const ActionsContainer = styled.div`

diff --git a/datahub-web-react/src/app/settings/AccessTokens.tsx b/datahub-web-react/src/app/settings/AccessTokens.tsx
@@ -21,6 +21,9 @@ const SourceContainer = styled.div`
     padding-top: 20px;
     padding-right: 40px;
     padding-left: 40px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const TokensContainer = styled.div`

diff --git a/datahub-web-react/src/app/settings/SettingsPage.tsx b/datahub-web-react/src/app/settings/SettingsPage.tsx
@@ -24,12 +24,15 @@ import ManagePosts from './posts/ManagePosts';
 
 const PageContainer = styled.div`
     display: flex;
+    overflow: auto;
 `;
 
 const SettingsBarContainer = styled.div`
     padding-top: 20px;
-    min-height: 100vh;
+    max-height: 100vh;
     border-right: 1px solid ${ANTD_GRAY[5]};
+    display: flex;
+    flex-direction: column;
 `;
 
 const SettingsBarHeader = styled.div`
@@ -54,6 +57,8 @@ const ItemTitle = styled.span`
     margin-left: 8px;
 `;
 
+const menuStyle = { width: 256, 'margin-top': 8, overflow: 'hidden auto' };
+
 /**
  * URL Paths for each settings page.
  */
@@ -108,7 +113,7 @@ export const SettingsPage = () => {
                 <Menu
                     selectable={false}
                     mode="inline"
-                    style={{ width: 256, marginTop: 8 }}
+                    style={menuStyle}
                     selectedKeys={[activePath]}
                     onClick={(newPath) => {
                         history.replace(`${url}/${newPath.key}`);

diff --git a/datahub-web-react/src/app/settings/posts/ManagePosts.tsx b/datahub-web-react/src/app/settings/posts/ManagePosts.tsx
@@ -6,7 +6,9 @@ import { PostList } from './PostsList';
 const PageContainer = styled.div`
     padding-top: 20px;
     width: 100%;
-    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
 `;
 
 const PageHeaderContainer = styled.div`
@@ -21,7 +23,11 @@ const PageTitle = styled(Typography.Title)`
     }
 `;
 
-const ListContainer = styled.div``;
+const ListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 export default function ManagePosts() {
     return (

diff --git a/datahub-web-react/src/app/settings/posts/PostsList.tsx b/datahub-web-react/src/app/settings/posts/PostsList.tsx
@@ -17,7 +17,11 @@ import { SearchBar } from '../../search/SearchBar';
 import { StyledTable } from '../../entity/shared/components/styled/StyledTable';
 import { POST_TYPE_TO_DISPLAY_TEXT } from './constants';
 
-const PostsContainer = styled.div``;
+const PostsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
 
 export const PostsPaginationContainer = styled.div`
     display: flex;

diff --git a/datahub-web-react/src/app/shared/RoutedTabs.tsx b/datahub-web-react/src/app/shared/RoutedTabs.tsx
@@ -3,6 +3,7 @@ import { Route, Switch, useRouteMatch, useLocation } from 'react-router-dom';
 import { Redirect, useHistory } from 'react-router';
 import { Tabs } from 'antd';
 import { TabsProps } from 'antd/lib/tabs';
+import styled from 'styled-components';
 
 const { TabPane } = Tabs;
 
@@ -19,6 +20,12 @@ interface Props extends TabsProps {
     onTabChange?: (selectedTab: string) => void;
 }
 
+const RoutedTabsStyle = styled.div`
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+`;
+
 /**
  * A tab view where each tab is associated with a route mounted on top of the current path.
  * This permits direct navigation to a particular tab via URL.
@@ -33,7 +40,7 @@ export const RoutedTabs = ({ defaultPath, tabs, onTabChange, ...props }: Props)
     const providedPath = splitPathName[splitPathName.length - 1];
     const activePath = subRoutes.includes(providedPath) ? providedPath : defaultPath.replace('/', '');
     return (
-        <div>
+        <RoutedTabsStyle>
             <Tabs
                 defaultActiveKey={activePath}
                 activeKey={activePath}
@@ -62,6 +69,6 @@ export const RoutedTabs = ({ defaultPath, tabs, onTabChange, ...props }: Props)
                     />
                 ))}
             </Switch>
-        </div>
+        </RoutedTabsStyle>
     );
 };