Merge branch 'datahub-project:master' into master

acryldata · Dec 12, 2023 · e2ba09c · e2ba09c
2 parents 10746c0 + 02982ed
commit e2ba09c
Show file tree

Hide file tree

Showing 17 changed files with 1,102 additions and 70 deletions.
diff --git a/build.gradle b/build.gradle
@@ -16,7 +16,7 @@ buildscript {
   ext.playVersion = '2.8.18'
   ext.log4jVersion = '2.19.0'
   ext.slf4jVersion = '1.7.36'
-  ext.logbackClassic = '1.2.12'
+  ext.logbackClassic = '1.2.13'
   ext.hadoop3Version = '3.3.5'
   ext.kafkaVersion = '2.3.0'
   ext.hazelcastVersion = '5.3.6'

diff --git a/datahub-web-react/src/app/search/SearchResults.tsx b/datahub-web-react/src/app/search/SearchResults.tsx
@@ -197,7 +197,7 @@ export const SearchResults = ({
                     {showBrowseV2 && (
                         <SidebarProvider selectedFilters={selectedFilters} onChangeFilters={onChangeFilters}>
                             <BrowseProvider>
-                                <BrowseSidebar visible={isSidebarOpen} width={360} />
+                                <BrowseSidebar visible={isSidebarOpen} />
                             </BrowseProvider>
                         </SidebarProvider>
                     )}

diff --git a/datahub-web-react/src/app/search/sidebar/BrowseSidebar.tsx b/datahub-web-react/src/app/search/sidebar/BrowseSidebar.tsx
@@ -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
+            />
+        </>
     );
 };
 

diff --git a/datahub-web-react/src/app/search/sidebar/EntityNode.tsx b/datahub-web-react/src/app/search/sidebar/EntityNode.tsx
@@ -38,7 +38,8 @@ const EntityNode = () => {
         onToggle: (isNowOpen: boolean) => trackToggleNodeEvent(isNowOpen, 'entity'),
     });
 
-    const onClickHeader = () => {
+    const onClickHeader = (e) => {
+        e.preventDefault();
         if (count) toggle();
     };