yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-27 18:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Salman-Apptware 2023-11-20 10:06:21 +05:30 committed by GitHub
parent b7df9e0996
commit a704290be4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 94 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
datahub-web-react/src/app/entity/ownership/ManageOwnership.tsx
View File

@ -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.

9
datahub-web-react/src/app/entity/view/ManageViews.tsx
View File

@ -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.

9
datahub-web-react/src/app/identity/ManageIdentities.tsx
View File

@ -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;

9
datahub-web-react/src/app/identity/group/GroupList.tsx
View File

@ -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']};

9
datahub-web-react/src/app/identity/user/UserList.tsx
View File

@ -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']};

7
datahub-web-react/src/app/permissions/ManagePermissions.tsx
View File

@ -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;

9
datahub-web-react/src/app/permissions/policy/ManagePolicies.tsx
View File

@ -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;

9
datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
View File

@ -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`

3
datahub-web-react/src/app/settings/AccessTokens.tsx
View File

@ -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`

9
datahub-web-react/src/app/settings/SettingsPage.tsx
View File

@ -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}`);

10
datahub-web-react/src/app/settings/posts/ManagePosts.tsx
View File

@ -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 (

6
datahub-web-react/src/app/settings/posts/PostsList.tsx
View File

@ -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;

11
datahub-web-react/src/app/shared/RoutedTabs.tsx
View File

@ -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>
);
};