yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-03 12:16:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: allow the sidebar size to be draggable (#9401)

Browse Source
This commit is contained in:
Salman-Apptware 2023-12-12 15:03:30 +05:30 committed by GitHub
parent 79ccbc57d1
commit ee4e8dd74c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datahub-web-react/src/app/search/SearchResults.tsx
View File

@ -197,7 +197,7 @@ export const SearchResults = ({
{showBrowseV2 && (
<SidebarProvider selectedFilters={selectedFilters} onChangeFilters={onChangeFilters}>
<BrowseProvider>
<BrowseSidebar visible={isSidebarOpen} width={360} />
<BrowseSidebar visible={isSidebarOpen} />
</BrowseProvider>
</SidebarProvider>
)}

51
datahub-web-react/src/app/search/sidebar/BrowseSidebar.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Typography } from 'antd';
import EntityNode from './EntityNode';
@ -7,10 +7,16 @@ import SidebarLoadingError from './SidebarLoadingError';
import { SEARCH_RESULTS_BROWSE_SIDEBAR_ID } from '../../onboarding/config/SearchOnboardingConfig';
import useSidebarEntities from './useSidebarEntities';
import { ANTD_GRAY_V2 } from '../../entity/shared/constants';
import { ProfileSidebarResizer } from '../../entity/shared/containers/profile/sidebar/ProfileSidebarResizer';
const Sidebar = styled.div<{ visible: boolean; width: number }>`
export const MAX_BROWSER_WIDTH = 500;
export const MIN_BROWSWER_WIDTH = 200;
export const SidebarWrapper = styled.div<{ visible: boolean; width: number }>`
height: 100%;
width: ${(props) => (props.visible ? `${props.width}px` : '0')};
min-width: ${(props) => (props.visible ? `${props.width}px` : '0')};
transition: width 250ms ease-in-out;
border-right: 1px solid ${(props) => props.theme.styles['border-color-base']};
background-color: ${ANTD_GRAY_V2[1]};
@ -37,29 +43,38 @@ const SidebarBody = styled.div<{ visible: boolean }>`
type Props = {
visible: boolean;
width: number;
};
const BrowseSidebar = ({ visible, width }: Props) => {
const BrowseSidebar = ({ visible }: Props) => {
const { error, entityAggregations, retry } = useSidebarEntities({
skip: !visible,
});
const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
return (
<Sidebar visible={visible} width={width} id={SEARCH_RESULTS_BROWSE_SIDEBAR_ID} data-testid="browse-v2">
<SidebarHeader>
<Typography.Text strong>Navigate</Typography.Text>
</SidebarHeader>
<SidebarBody visible={visible}>
{entityAggregations && !entityAggregations.length && <div>No results found</div>}
{entityAggregations?.map((entityAggregation) => (
<BrowseProvider key={entityAggregation.value} entityAggregation={entityAggregation}>
<EntityNode />
</BrowseProvider>
))}
{error && <SidebarLoadingError onClickRetry={retry} />}
</SidebarBody>
</Sidebar>
<>
<SidebarWrapper visible={visible} width={browserWidth} id={SEARCH_RESULTS_BROWSE_SIDEBAR_ID} data-testid="browse-v2">
<SidebarHeader>
<Typography.Text strong>Navigate</Typography.Text>
</SidebarHeader>
<SidebarBody visible={visible}>
{entityAggregations && !entityAggregations.length && <div>No results found</div>}
{entityAggregations?.map((entityAggregation) => (
<BrowseProvider key={entityAggregation.value} entityAggregation={entityAggregation}>
<EntityNode />
</BrowseProvider>
))}
{error && <SidebarLoadingError onClickRetry={retry} />}
</SidebarBody>
</SidebarWrapper>
<ProfileSidebarResizer
setSidePanelWidth={(widthProp) =>
setBrowserWith(Math.min(Math.max(widthProp, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH))
}
initialSize={browserWidth}
isSidebarOnLeft
/>
</>
);
};

3
datahub-web-react/src/app/search/sidebar/EntityNode.tsx
View File

@ -38,7 +38,8 @@ const EntityNode = () => {
onToggle: (isNowOpen: boolean) => trackToggleNodeEvent(isNowOpen, 'entity'),
});
const onClickHeader = () => {
const onClickHeader = (e) => {
e.preventDefault();
if (count) toggle();
};

10
smoke-test/tests/cypress/cypress/e2e/browse/browseV2.js
View File

@ -46,31 +46,31 @@ describe("search", () => {
cy.get("[data-testid=browse-v2")
.invoke("css", "width")
.should("match", /^\d\d\dpx$/);
.should("match", /\d\d\dpx$/);
cy.get("[data-testid=browse-v2-toggle").click();
cy.get("[data-testid=browse-v2")
.invoke("css", "width")
.should("match", /^\dpx$/);
.should("match", /\dpx$/);
cy.reload();
cy.get("[data-testid=browse-v2")
.invoke("css", "width")
.should("match", /^\dpx$/);
.should("match", /\dpx$/);
cy.get("[data-testid=browse-v2-toggle").click();
cy.get("[data-testid=browse-v2")
.invoke("css", "width")
.should("match", /^\d\d\dpx$/);
.should("match", /\d\d\dpx$/);
cy.reload();
cy.get("[data-testid=browse-v2")
.invoke("css", "width")
.should("match", /^\d\d\dpx$/);
.should("match", /\d\d\dpx$/);
});
it("should take you to the old browse experience when clicking entity type on home page with the browse flag off", () => {