yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-04 04:39: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 && ( {showBrowseV2 && (
<SidebarProvider selectedFilters={selectedFilters} onChangeFilters={onChangeFilters}> <SidebarProvider selectedFilters={selectedFilters} onChangeFilters={onChangeFilters}>
<BrowseProvider> <BrowseProvider>
<BrowseSidebar visible={isSidebarOpen} width={360} /> <BrowseSidebar visible={isSidebarOpen} />
</BrowseProvider> </BrowseProvider>
</SidebarProvider> </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 styled from 'styled-components';
import { Typography } from 'antd'; import { Typography } from 'antd';
import EntityNode from './EntityNode'; import EntityNode from './EntityNode';
@ -7,10 +7,16 @@ import SidebarLoadingError from './SidebarLoadingError';
import { SEARCH_RESULTS_BROWSE_SIDEBAR_ID } from '../../onboarding/config/SearchOnboardingConfig'; import { SEARCH_RESULTS_BROWSE_SIDEBAR_ID } from '../../onboarding/config/SearchOnboardingConfig';
import useSidebarEntities from './useSidebarEntities'; import useSidebarEntities from './useSidebarEntities';
import { ANTD_GRAY_V2 } from '../../entity/shared/constants'; 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%; height: 100%;
width: ${(props) => (props.visible ? `${props.width}px` : '0')}; width: ${(props) => (props.visible ? `${props.width}px` : '0')};
min-width: ${(props) => (props.visible ? `${props.width}px` : '0')};
transition: width 250ms ease-in-out; transition: width 250ms ease-in-out;
border-right: 1px solid ${(props) => props.theme.styles['border-color-base']}; border-right: 1px solid ${(props) => props.theme.styles['border-color-base']};
background-color: ${ANTD_GRAY_V2[1]}; background-color: ${ANTD_GRAY_V2[1]};
@ -37,29 +43,38 @@ const SidebarBody = styled.div<{ visible: boolean }>`
type Props = { type Props = {
visible: boolean; visible: boolean;
width: number;
}; };
const BrowseSidebar = ({ visible, width }: Props) => { const BrowseSidebar = ({ visible }: Props) => {
const { error, entityAggregations, retry } = useSidebarEntities({ const { error, entityAggregations, retry } = useSidebarEntities({
skip: !visible, skip: !visible,
}); });
const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
return ( return (
<Sidebar visible={visible} width={width} id={SEARCH_RESULTS_BROWSE_SIDEBAR_ID} data-testid="browse-v2"> <>
<SidebarHeader> <SidebarWrapper visible={visible} width={browserWidth} id={SEARCH_RESULTS_BROWSE_SIDEBAR_ID} data-testid="browse-v2">
<Typography.Text strong>Navigate</Typography.Text> <SidebarHeader>
</SidebarHeader> <Typography.Text strong>Navigate</Typography.Text>
<SidebarBody visible={visible}> </SidebarHeader>
{entityAggregations && !entityAggregations.length && <div>No results found</div>} <SidebarBody visible={visible}>
{entityAggregations?.map((entityAggregation) => ( {entityAggregations && !entityAggregations.length && <div>No results found</div>}
<BrowseProvider key={entityAggregation.value} entityAggregation={entityAggregation}> {entityAggregations?.map((entityAggregation) => (
<EntityNode /> <BrowseProvider key={entityAggregation.value} entityAggregation={entityAggregation}>
</BrowseProvider> <EntityNode />
))} </BrowseProvider>
{error && <SidebarLoadingError onClickRetry={retry} />} ))}
</SidebarBody> {error && <SidebarLoadingError onClickRetry={retry} />}
</Sidebar> </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'), onToggle: (isNowOpen: boolean) => trackToggleNodeEvent(isNowOpen, 'entity'),
}); });
const onClickHeader = () => { const onClickHeader = (e) => {
e.preventDefault();
if (count) toggle(); 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") cy.get("[data-testid=browse-v2")
.invoke("css", "width") .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-toggle").click();
cy.get("[data-testid=browse-v2") cy.get("[data-testid=browse-v2")
.invoke("css", "width") .invoke("css", "width")
.should("match", /^\dpx$/); .should("match", /\dpx$/);
cy.reload(); cy.reload();
cy.get("[data-testid=browse-v2") cy.get("[data-testid=browse-v2")
.invoke("css", "width") .invoke("css", "width")
.should("match", /^\dpx$/); .should("match", /\dpx$/);
cy.get("[data-testid=browse-v2-toggle").click(); cy.get("[data-testid=browse-v2-toggle").click();
cy.get("[data-testid=browse-v2") cy.get("[data-testid=browse-v2")
.invoke("css", "width") .invoke("css", "width")
.should("match", /^\d\d\dpx$/); .should("match", /\d\d\dpx$/);
cy.reload(); cy.reload();
cy.get("[data-testid=browse-v2") cy.get("[data-testid=browse-v2")
.invoke("css", "width") .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", () => { it("should take you to the old browse experience when clicking entity type on home page with the browse flag off", () => {