yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-12-04 03:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change deprecated Layout to V1 (#7194)

Browse Source 
* Change depreacted Layout to V1

* remove unanted dependecy

* test fixes

* remove scrollbar from layout
This commit is contained in:
Ashish Gupta 2022-09-05 18:50:36 +05:30 committed by GitHub
parent 15bba94825
commit 59cc88c327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 242 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js
View File

@ -51,11 +51,11 @@ const createGlossaryTerm = (term) => {
.should('be.visible')
.click();
cy.wait(200);
cy.get('#left-panel').contains(term.name).should('be.visible');
cy.get('#left-panelV1').contains(term.name).should('be.visible');
};
const deleteGlossary = ({ name }) => {
cy.get('#left-panel').contains(name).should('be.visible').click();
cy.get('#left-panelV1').contains(name).should('be.visible').click();
cy.wait(500);
cy.get('[data-testid="inactive-link"]').contains(name).should('be.visible');
@ -85,7 +85,7 @@ const deleteGlossary = ({ name }) => {
};
const goToAssetsTab = (term) => {
cy.get('#left-panel').should('be.visible').contains(term).click();
cy.get('#left-panelV1').should('be.visible').contains(term).click();
cy.wait(500);
cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');
cy.get('[data-testid="Assets"]').should('be.visible').click();
@ -212,7 +212,7 @@ describe('Glossary page should work properly', () => {
const uSynonyms = 'pick up,take,obtain';
const newRef = { name: 'take', url: 'https://take.com' };
const newDescription = 'Updated description';
cy.get('#left-panel').should('be.visible').contains(term).click();
cy.get('#left-panelV1').should('be.visible').contains(term).click();
cy.wait(500);
cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');
@ -300,7 +300,7 @@ describe('Glossary page should work properly', () => {
it.skip('Releted Terms should work properly', () => {
const term = NEW_GLOSSARY_TERMS.term_1.name;
const term2 = NEW_GLOSSARY_TERMS.term_2.name;
cy.get('#left-panel').should('be.visible').contains(term).click();
cy.get('#left-panelV1').should('be.visible').contains(term).click();
cy.wait(500);
cy.get('[data-testid="inactive-link"]').contains(term).should('be.visible');

6
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
View File

@ -148,10 +148,10 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
const getFilterDropDown = () => {
return hideFeedFilter && hideThreadFilter ? null : (
<div className="tw-flex tw-justify-between tw-px-1.5">
<div className="tw-flex tw-justify-between tw-py-2 tw-px-1.5">
{/* Feed filter */}
{!hideFeedFilter && (
<div className="tw-relative tw-mt-5 tw-mr-5">
<div className="tw-relative tw-mr-5">
<Button
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="feeds"
@ -175,7 +175,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
)}
{/* Thread filter */}
{!hideThreadFilter && (
<div className="tw-relative tw-mt-5">
<div className="tw-relative">
<Button
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="thread-filter"

8
openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx
View File

@ -316,11 +316,9 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
const fetchRightPanel = useCallback(() => {
return (
<div className="tw-px-2">
<CardV1
description={CONFIGURE_TEXT[webhookType]}
heading="Configure Webhooks"
id="webhook"
/>
<CardV1 heading="Configure Webhooks" id="webhook">
{CONFIGURE_TEXT[webhookType]}
</CardV1>
</div>
);
}, [webhookType]);

86
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
View File

@ -16,7 +16,6 @@ import {
faSortAmountUpAlt,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Card } from 'antd';
import classNames from 'classnames';
import { cloneDeep, isEmpty, lowerCase } from 'lodash';
import {
@ -26,13 +25,7 @@ import {
FormattedTableData,
SearchResponse,
} from 'Models';
import React, {
Fragment,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { Button } from '../../components/buttons/Button/Button';
import ErrorPlaceHolderES from '../../components/common/error-with-placeholder/ErrorPlaceHolderES';
@ -68,7 +61,8 @@ import { getCountBadge } from '../../utils/CommonUtils';
import { getFilterCount, getFilterString } from '../../utils/FilterUtils';
import AdvancedFields from '../AdvancedSearch/AdvancedFields';
import AdvancedSearchDropDown from '../AdvancedSearch/AdvancedSearchDropDown';
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
import PageLayoutV1 from '../containers/PageLayoutV1';
import { AdvanceField, ExploreProps } from './explore.interface';
import SortingDropDown from './SortingDropDown';
@ -653,11 +647,9 @@ const Explore: React.FC<ExploreProps> = ({
const fetchLeftPanel = () => {
return (
<Card
data-testid="data-summary-container"
style={{ ...leftPanelAntCardStyle, marginTop: '16px', height: '98%' }}>
<Fragment>
<div className="tw-w-64 tw-mr-5 tw-flex-shrink-0">
<LeftPanelCard id="explorer">
<div className="tw-py-3" data-testid="data-summary-container">
<div className="tw-w-64 tw-px-3 tw-flex-shrink-0">
<Button
className={classNames('tw-underline tw-pb-4')}
disabled={!getFilterCount(filters)}
@ -681,8 +673,8 @@ const Explore: React.FC<ExploreProps> = ({
onSelectHandler={handleSelectedFilter}
/>
)}
</Fragment>
</Card>
</div>
</LeftPanelCard>
);
};
@ -690,38 +682,38 @@ const Explore: React.FC<ExploreProps> = ({
!connectionError && Boolean(selectedAdvancedFields.length);
return (
<Fragment>
<PageLayout leftPanel={Boolean(!error) && fetchLeftPanel()}>
{error ? (
<ErrorPlaceHolderES errorMessage={error} type="error" />
) : (
<>
{!connectionError && getTabs()}
{advanceFieldCheck && (
<AdvancedFields
fields={selectedAdvancedFields}
index={searchIndex}
onClear={onAdvancedFieldClear}
onFieldRemove={onAdvancedFieldRemove}
onFieldValueSelect={onAdvancedFieldValueSelect}
/>
)}
<SearchedData
showResultCount
currentPage={currentPage}
data={data}
isFilterSelected={isFilterSelected}
isLoading={
!location.pathname.includes(ROUTES.TOUR) && isEntityLoading
}
paginate={paginate}
searchText={searchText}
totalValue={totalNumberOfValue}
<PageLayoutV1
className="tw-h-full tw-px-6"
leftPanel={Boolean(!error) && fetchLeftPanel()}>
{error ? (
<ErrorPlaceHolderES errorMessage={error} type="error" />
) : (
<div>
{!connectionError && getTabs()}
{advanceFieldCheck && (
<AdvancedFields
fields={selectedAdvancedFields}
index={searchIndex}
onClear={onAdvancedFieldClear}
onFieldRemove={onAdvancedFieldRemove}
onFieldValueSelect={onAdvancedFieldValueSelect}
/>
</>
)}
</PageLayout>
</Fragment>
)}
<SearchedData
showResultCount
currentPage={currentPage}
data={data}
isFilterSelected={isFilterSelected}
isLoading={
!location.pathname.includes(ROUTES.TOUR) && isEntityLoading
}
paginate={paginate}
searchText={searchText}
totalValue={totalNumberOfValue}
/>
</div>
)}
</PageLayoutV1>
);
};

6
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.test.tsx
View File

@ -52,7 +52,7 @@ jest.mock('../../components/searched-data/SearchedData', () => {
});
jest.mock(
'../containers/PageLayout',
'../containers/PageLayoutV1',
() =>
({
children,
@ -64,7 +64,7 @@ jest.mock(
leftPanel: React.ReactNode;
}) =>
(
<div data-testid="PageLayout">
<div data-testid="PageLayoutV1">
<div data-testid="left-panel-content">{leftPanel}</div>
<div data-testid="right-panel-content">{rightPanel}</div>
{children}
@ -115,7 +115,7 @@ describe('Test Explore component', () => {
wrapper: MemoryRouter,
}
);
const pageContainer = await findByTestId(container, 'PageLayout');
const pageContainer = await findByTestId(container, 'PageLayoutV1');
const searchData = await findByTestId(container, 'search-data');
const wrappedContent = await findByTestId(container, 'wrapped-content');
const tabs = await findAllByTestId(container, /tab/i);

17
openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx
View File

@ -24,6 +24,7 @@ import {
MenuList,
} from '../../utils/GlobalSettingsUtils';
import { getSettingPath, getTeamsWithFqnPath } from '../../utils/RouterUtils';
import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
const GlobalSettingLeftPanel = () => {
@ -66,13 +67,15 @@ const GlobalSettingLeftPanel = () => {
};
return menuItems.length ? (
<Menu
className="global-setting-left-panel"
items={menuItems}
mode="inline"
selectedKeys={[`${settingCategory}.${tab}`]}
onClick={onClick}
/>
<LeftPanelCard id="settings">
<Menu
className="global-setting-left-panel"
items={menuItems}
mode="inline"
selectedKeys={[`${settingCategory}.${tab}`]}
onClick={onClick}
/>
</LeftPanelCard>
) : (
<Empty className="tw-mt-8" />
);

25
openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx
View File

@ -75,6 +75,30 @@ jest.mock('react-router-dom', () => ({
glossaryName: 'GlossaryName',
}),
}));
jest.mock('antd', () => ({
Col: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Input: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Row: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Space: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Typography: {
Title: jest
.fn()
.mockImplementation(({ children }) => <div>{children}</div>),
},
Dropdown: jest.fn().mockImplementation(({ children, overlay }) => (
<div>
{children}
{overlay}
</div>
)),
Menu: jest.fn().mockImplementation(({ items }) => (
<div>
{items.map((item: { key: string; label: JSX.Element }) => {
<div key={item.key}>{item.label}</div>;
})}
</div>
)),
}));
jest.mock('../../components/GlossaryDetails/GlossaryDetails.component', () => {
return jest.fn().mockReturnValue(<>Glossary-Details component</>);
@ -150,6 +174,7 @@ const mockProps = {
onGlossaryTermDelete: jest.fn(),
onAssetPaginate: jest.fn(),
onRelatedTermClick: jest.fn(),
handleUserRedirection: jest.fn(),
};
describe('Test Glossary component', () => {

31
openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
View File

@ -48,11 +48,12 @@ import SVGIcons, { Icons } from '../../utils/SvgUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import { Button } from '../buttons/Button/Button';
import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
import LeftPanelCard from '../common/LeftPanelCard/LeftPanelCard';
import Searchbar from '../common/searchbar/Searchbar';
import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
import TreeView from '../common/TreeView/TreeView.component';
import PageLayout from '../containers/PageLayout';
import PageLayoutV1 from '../containers/PageLayoutV1';
import GlossaryDetails from '../GlossaryDetails/GlossaryDetails.component';
import GlossaryTermsV1 from '../GlossaryTerms/GlossaryTermsV1.component';
import Loader from '../Loader/Loader';
@ -323,15 +324,15 @@ const GlossaryV1 = ({
const fetchLeftPanel = () => {
return (
<div className="tw-h-full tw-px-1" id="glossary-left-panel">
<div className="tw-bg-white tw-h-full tw-py-2 left-panel-container">
<LeftPanelCard id="glossary">
<div className="tw-h-full tw-py-2">
<div className="tw-flex tw-justify-between tw-items-center tw-px-3">
<h6 className="tw-heading tw-text-base">Glossary</h6>
<h6 className="tw-heading tw-text-sm tw-font-semibold">Glossary</h6>
</div>
<div>
{treeData.length ? (
<Fragment>
<div className="tw-px-3 tw-mb-3">
<div className="tw-px-3 tw-mb-2">
<Searchbar
showLoadingStatus
placeholder="Search term..."
@ -346,7 +347,7 @@ const GlossaryV1 = ({
: NO_PERMISSION_FOR_ACTION
}>
<button
className="tw--mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
className="tw-mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
disabled={!createGlossaryPermission}
onClick={handleAddGlossaryClick}>
<SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMERY} />{' '}
@ -379,7 +380,7 @@ const GlossaryV1 = ({
)}
</div>
</div>
</div>
</LeftPanelCard>
);
};
@ -392,7 +393,7 @@ const GlossaryV1 = ({
}, [selectedData]);
return glossaryList.length ? (
<PageLayout classes="tw-h-full tw-px-6" leftPanel={fetchLeftPanel()}>
<PageLayoutV1 leftPanel={fetchLeftPanel()}>
<div
className="tw-flex tw-justify-between tw-items-center"
data-testid="header">
@ -404,7 +405,9 @@ const GlossaryV1 = ({
}
/>
</div>
<div className="tw-relative tw-mr-2 tw--mt-2" id="add-term-button">
<div
className="tw-relative tw-flex tw-justify-between tw-items-center"
id="add-term-button">
<Tooltip
title={
createGlossaryTermPermission
@ -412,7 +415,7 @@ const GlossaryV1 = ({
: NO_PERMISSION_FOR_ACTION
}>
<ButtonAntd
className="tw-h-8 tw-rounded tw-mb-1 tw-mr-2"
className="tw-h-8 tw-rounded tw-mr-2"
data-testid="add-new-tag-button"
disabled={!createGlossaryTermPermission}
type="primary"
@ -441,7 +444,7 @@ const GlossaryV1 = ({
: NO_PERMISSION_FOR_ACTION
}>
<Button
className="tw-rounded tw-justify-center tw-w-8 tw-h-8 glossary-manage-button tw-mb-1 tw-flex"
className="tw-rounded tw-justify-center tw-w-8 tw-h-8 glossary-manage-button tw-flex"
data-testid="manage-button"
disabled={!glossaryPermission.Delete}
size="small"
@ -555,9 +558,9 @@ const GlossaryV1 = ({
onConfirm={handleDelete}
/>
)}
</PageLayout>
</PageLayoutV1>
) : (
<PageLayout>
<PageLayoutV1>
<ErrorPlaceHolder
buttonId="add-webhook-button"
buttonLabel="Add New Glossary"
@ -566,7 +569,7 @@ const GlossaryV1 = ({
heading="glossaries"
type="ADD_DATA"
/>
</PageLayout>
</PageLayoutV1>
);
};

16
openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
View File

@ -33,7 +33,8 @@ import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import SVGIcons, { Icons } from '../../utils/SvgUtils';
import ActivityFeedList from '../ActivityFeed/ActivityFeedList/ActivityFeedList';
import ErrorPlaceHolderES from '../common/error-with-placeholder/ErrorPlaceHolderES';
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
import { leftPanelAntCardStyle } from '../containers/PageLayout';
import PageLayoutV1 from '../containers/PageLayoutV1';
import { EntityListWithAntd } from '../EntityList/EntityList';
import Loader from '../Loader/Loader';
import MyAssetStats from '../MyAssetStats/MyAssetStats.component';
@ -67,13 +68,13 @@ const MyData: React.FC<MyDataProps> = ({
const getLeftPanel = () => {
return (
<div className="tw-mt-4">
<>
<MyAssetStats entityCounts={entityCounts} />
<div className="tw-mb-5" />
<RecentlyViewed />
<div className="tw-mb-5" />
<RecentSearchedTermsAntd />
</div>
</>
);
};
@ -81,7 +82,7 @@ const MyData: React.FC<MyDataProps> = ({
const currentUserDetails = AppState.getCurrentUserDetails();
return (
<div className="tw-mt-4">
<>
{/* Pending task count card */}
{pendingTaskCount ? (
<div className="tw-mb-5" data-testid="my-tasks-container ">
@ -170,7 +171,7 @@ const MyData: React.FC<MyDataProps> = ({
/>
</div>
<div className="tw-mt-5" />
</div>
</>
);
}, [ownedData, followedData, pendingTaskCount]);
@ -219,7 +220,7 @@ const MyData: React.FC<MyDataProps> = ({
);
return (
<PageLayout leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
<PageLayoutV1 leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
{error ? (
<ErrorPlaceHolderES errorMessage={error} type="error" />
) : (
@ -228,7 +229,6 @@ const MyData: React.FC<MyDataProps> = ({
<>
<ActivityFeedList
withSidePanel
className="tw-mt-3"
deletePostHandler={deletePostHandler}
feedList={feedData}
postFeedHandler={postFeedHandler}
@ -252,7 +252,7 @@ const MyData: React.FC<MyDataProps> = ({
<div className="tw-p-4" />
</Fragment>
)}
</PageLayout>
</PageLayoutV1>
);
};

6
openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.test.tsx
View File

@ -285,7 +285,7 @@ jest.mock('../RecentSearchedTerms/RecentSearchedTerms', () => {
});
jest.mock(
'../containers/PageLayout',
'../containers/PageLayoutV1',
() =>
({
children,
@ -297,7 +297,7 @@ jest.mock(
leftPanel: ReactNode;
}) =>
(
<div data-testid="PageLayout">
<div data-testid="PageLayoutV1">
<div data-testid="left-panel-content">{leftPanel}</div>
<div data-testid="right-panel-content">{rightPanel}</div>
{children}
@ -366,7 +366,7 @@ describe('Test MyData page', () => {
const { container } = render(<MyData {...mockProp} />, {
wrapper: MemoryRouter,
});
const pageLayout = await findByTestId(container, 'PageLayout');
const pageLayout = await findByTestId(container, 'PageLayoutV1');
const leftPanel = await findByTestId(container, 'left-panel-content');
const rightPanel = await findByTestId(container, 'right-panel-content');
const recentSearchedTerms = await findByText(

4
openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
View File

@ -115,7 +115,9 @@ const Services = ({
<Row data-testid="data-container" gutter={[16, 16]}>
{serviceData.map((service, index) => (
<Col key={index} lg={8} xl={6}>
<Card size="small" style={leftPanelAntCardStyle}>
<Card
size="small"
style={{ ...leftPanelAntCardStyle, height: '100%' }}>
<div
className="tw-flex tw-justify-between tw-text-grey-muted"
data-testid="service-card">

8
openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
View File

@ -61,7 +61,8 @@ import Ellipses from '../common/Ellipses/Ellipses';
import ProfilePicture from '../common/ProfilePicture/ProfilePicture';
import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
import TabsPane from '../common/TabsPane/TabsPane';
import PageLayout, { leftPanelAntCardStyle } from '../containers/PageLayout';
import { leftPanelAntCardStyle } from '../containers/PageLayout';
import PageLayoutV1 from '../containers/PageLayoutV1';
import DropDownList from '../dropdown/DropDownList';
import Loader from '../Loader/Loader';
import { Option, Props } from './Users.interface';
@ -630,7 +631,6 @@ const Users = ({
key="left-panel-card"
style={{
...leftPanelAntCardStyle,
marginTop: '12px',
}}>
<div className="tw-flex tw-flex-col">
{image ? (
@ -818,7 +818,7 @@ const Users = ({
);
return (
<PageLayout classes="tw-h-full tw-px-6" leftPanel={fetchLeftPanel()}>
<PageLayoutV1 className="tw-h-full" leftPanel={fetchLeftPanel()}>
<div className="tw-mb-10">
<TabsPane
activeTab={activeTab}
@ -830,7 +830,7 @@ const Users = ({
<div>{(activeTab === 1 || activeTab === 2) && getFeedTabData()}</div>
<div>{activeTab === 3 && getEntityData(userData.owns || [], 3)}</div>
<div>{activeTab === 4 && getEntityData(userData.follows || [], 4)}</div>
</PageLayout>
</PageLayoutV1>
);
};

17
openmetadata-ui/src/main/resources/ui/src/components/common/Card/CardV1.tsx
View File

@ -13,19 +13,22 @@
import { Card } from 'antd';
import { lowerCase } from 'lodash';
import React from 'react';
interface CardProps {
description: string;
import React, { HTMLAttributes } from 'react';
interface CardProps extends HTMLAttributes<HTMLDivElement> {
id: string;
heading?: string;
classes?: string;
}
const CardV1 = ({ description, id, heading }: CardProps) => {
const CardV1 = ({ children, id, heading, classes, style }: CardProps) => {
return (
<Card data-testid={`${lowerCase(id)}-summary-container`} size="small">
<Card
className={`${classes} tw-h-full`}
data-testid={`${lowerCase(id)}-summary-container`}
size="small"
style={style}>
{heading ? <h6 className="tw-heading tw-text-base">{heading}</h6> : ''}
<div style={{ margin: '8px', textAlign: 'justify' }}>{description}</div>
<div style={{ textAlign: 'justify' }}>{children}</div>
</Card>
);
};

8
openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
View File

@ -175,10 +175,10 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
return (
<>
<div
className="sidebar-my-data-holder mt-2 mb-3"
className="sidebar-my-data-holder my-3"
data-testid="show-deleted-cntnr">
<div
className="filter-group tw-justify-between tw-mb-1"
className="filter-group tw-justify-between tw-my-3 tw-px-3"
data-testid="filter-container-deleted">
<div className="tw-flex">
<div className="filters-title tw-w-36 tw-truncate custom-checkbox-label">
@ -206,7 +206,7 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
<div data-testid={aggregation.title}>
<div className="tw-flex tw-justify-between tw-flex-col">
<h6
className="tw-heading tw-my-1"
className="tw-heading tw-my-1 tw-px-3"
data-testid="filter-heading">
{
facetFilterPlaceholder.find(
@ -248,7 +248,7 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
</div>
</div>
<div
className="sidebar-my-data-holder"
className="sidebar-my-data-holder tw-px-3"
data-testid={`filter-containers-${index}`}>
{getFilterItems(aggregation)}
</div>

4
openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx
View File

@ -24,7 +24,9 @@ const PageContainerV1 = ({
className = '',
}: PageContainerV1Props) => {
return (
<div className={classNames('page-container-v1 tw-bg-body-main', className)}>
<div
className={classNames('page-container-v1 tw-bg-body-main', className)}
data-testid="container">
{children}
</div>
);

3
openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx
View File

@ -28,9 +28,6 @@ export const leftPanelAntCardStyle = {
border: '1px rgb(221, 227, 234) solid',
borderRadius: '4px',
boxShadow: '1px 1px 8px rgb(0 0 0 / 6%)',
marginRight: '4px',
marginLeft: '4px',
height: '100%',
};
/**

28
openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayoutV1.tsx
View File

@ -23,7 +23,9 @@ interface PageLayoutProp extends HTMLAttributes<HTMLDivElement> {
export const pageContainerStyles = {
height: '100%',
padding: '1rem',
padding: '1rem 0.5rem',
margin: '0px',
overflow: 'hidden',
};
const PageLayoutV1: FC<PageLayoutProp> = ({
@ -35,24 +37,32 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
return (
<Row className={className} gutter={[16, 16]} style={pageContainerStyles}>
{leftPanel && (
<Col flex="312px">
<div className="page-layout-v1-left-panel page-layout-v1-vertical-scroll">
{leftPanel}
</div>
<Col
className="page-layout-v1-vertical-scroll"
flex="284px"
id="left-panelV1">
{leftPanel}
</Col>
)}
<Col
className="page-layout-v1-center page-layout-v1-vertical-scroll"
flex={
leftPanel && rightPanel
? 'calc(100% - 624px)'
? 'calc(100% - 568px)'
: leftPanel || rightPanel
? 'calc(100% - 312px)'
: '1080px'
? 'calc(100% - 284px)'
: '100%'
}>
{children}
</Col>
{rightPanel && <Col span={6}>{rightPanel}</Col>}
{rightPanel && (
<Col
className="page-layout-v1-vertical-scroll"
flex="284px"
id="right-panelV1">
{rightPanel}
</Col>
)}
</Row>
);
};

31
openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx
View File

@ -36,6 +36,35 @@ jest.mock('fast-json-patch', () => ({
compare: jest.fn(),
}));
jest.mock('antd', () => ({
Card: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Col: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Input: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Row: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Space: jest.fn().mockImplementation(({ children }) => <div>{children}</div>),
Divider: jest
.fn()
.mockImplementation(({ children }) => <div>{children}</div>),
Typography: {
Title: jest
.fn()
.mockImplementation(({ children }) => <div>{children}</div>),
},
Dropdown: jest.fn().mockImplementation(({ children, overlay }) => (
<div>
{children}
{overlay}
</div>
)),
Menu: jest.fn().mockImplementation(({ items }) => (
<div>
{items.map((item: { key: string; label: JSX.Element }) => {
<div key={item.key}>{item.label}</div>;
})}
</div>
)),
}));
jest.mock('../../authentication/auth-provider/AuthProvider', () => {
return {
useAuthContext: jest.fn(() => ({
@ -213,8 +242,10 @@ describe('Test GlossaryComponent page', () => {
fireEvent.click(handleChildLoading);
fireEvent.click(handleExpandedKey);
fireEvent.click(handleGlossaryDelete);
fireEvent.click(handleGlossaryTermUpdate);
fireEvent.click(handleGlossaryTermDelete);
fireEvent.click(handleSearchText);
});

2
openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPageV1.component.tsx
View File

@ -700,7 +700,7 @@ const GlossaryPageV1 = () => {
}, [glossaryName]);
return (
<PageContainerV1 className="tw-pt-4">
<PageContainerV1>
{isLoading ? (
<Loader />
) : (

2
openmetadata-ui/src/main/resources/ui/src/pages/UserPage/UserPage.component.tsx
View File

@ -276,7 +276,7 @@ const UserPage = () => {
}, [AppState.nonSecureUserDetails, AppState.userDetails]);
return (
<PageContainerV1 className="tw-pt-4">
<PageContainerV1>
{isLoading ? <Loader /> : getUserComponent()}
</PageContainerV1>
);

4
openmetadata-ui/src/main/resources/ui/src/pages/tags/index.test.tsx
View File

@ -261,11 +261,11 @@ jest.mock('../../utils/TagsUtils', () => ({
}));
jest.mock(
'../../components/containers/PageLayout',
'../../components/containers/PageLayoutV1',
() =>
({ children, leftPanel }: { children: ReactNode; leftPanel: ReactNode }) =>
(
<div data-testid="PageLayout">
<div data-testid="PageLayoutV1">
<div data-testid="left-panel-content">{leftPanel}</div>
{children}
</div>

8
openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
View File

@ -33,7 +33,7 @@ import ErrorPlaceHolder from '../../components/common/error-with-placeholder/Err
import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard';
import RichTextEditorPreviewer from '../../components/common/rich-text-editor/RichTextEditorPreviewer';
import PageContainerV1 from '../../components/containers/PageContainerV1';
import PageLayout from '../../components/containers/PageLayout';
import PageLayoutV1 from '../../components/containers/PageLayoutV1';
import Loader from '../../components/Loader/Loader';
import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal';
import FormModal from '../../components/Modals/FormModal';
@ -509,8 +509,8 @@ const TagsPage = () => {
};
return (
<PageContainerV1 className="tw-py-4">
<PageLayout leftPanel={fetchLeftPanel()}>
<PageContainerV1>
<PageLayoutV1 leftPanel={fetchLeftPanel()}>
{isLoading ? (
<Loader />
) : error ? (
@ -788,7 +788,7 @@ const TagsPage = () => {
)}
</div>
)}
</PageLayout>
</PageLayoutV1>
</PageContainerV1>
);
};

20
openmetadata-ui/src/main/resources/ui/src/styles/app.less
View File

@ -13,6 +13,9 @@
// common css utils file
@primary: #7147e8;
@primary-light: rgb(244, 240, 253);
.flex-center {
display: flex;
align-items: center;
@ -35,3 +38,20 @@
.h-full {
width: 100%;
}
.border-l-2 {
border-left: 2px;
}
.border-primary {
border-color: @primary;
}
.bg-primary-lite {
background: @primary-light;
}
.activeCategory {
border-left: 2px solid @primary;
background: @primary-light;
}

23
openmetadata-ui/src/main/resources/ui/src/styles/layout/page-layout.less
View File

@ -2,10 +2,31 @@
// 64 header + ( 16 + 16 )spacing Y
height: calc(100vh - 96px);
overflow-y: auto;
overflow-x: hidden;
}
.page-layout-v1-left-panel {
border: 1px rgb(221, 227, 234) solid;
border-radius: '4px';
border-radius: 4px;
box-shadow: 1px 1px 8px rgb(0 0 0 / 6%);
}
.left-panel-card {
.ant-card-body {
padding: 0;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
}
/* Hide scrollbar for Chrome, Safari and Opera */
.page-layout-v1-vertical-scroll::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.page-layout-v1-vertical-scroll::-webkit-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

4
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -1072,11 +1072,11 @@ code {
@media only screen and (max-width: 1440px) {
#left-panel {
width: 256px;
width: 284px;
}
.page-layout-container.l3-col {
grid-template-columns: 256px auto 256px;
grid-template-columns: 284px auto 284px;
}
}