From 3096aa6ffa8148b9fdc4047f5916e75e22a83ee5 Mon Sep 17 00:00:00 2001
From: Olga Dimova <38855943+olgadimova@users.noreply.github.com>
Date: Thu, 7 Dec 2023 20:44:24 +0300
Subject: [PATCH] =?UTF-8?q?feat(glossary):=20add=20toggle=20sidebar=20butt?=
 =?UTF-8?q?on=20and=20functionality=20to=20Busine=E2=80=A6=20(#9222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Chris Collins <chriscollins3456@gmail.com>
---
 .../entity/shared/GlossaryEntityContext.tsx   | 25 ++++++++++++++++---
 .../src/app/glossary/BusinessGlossaryPage.tsx | 16 +++++++++++-
 .../src/app/glossary/GlossaryRoutes.tsx       | 11 +++++++-
 .../src/app/glossary/GlossarySidebar.tsx      | 23 +++++++++++++----
 .../src/app/glossary/useToggleSidebar.tsx     | 17 +++++++++++++
 .../src/app/shared/sidebar/components.tsx     |  1 +
 6 files changed, 83 insertions(+), 10 deletions(-)
 create mode 100644 datahub-web-react/src/app/glossary/useToggleSidebar.tsx

diff --git a/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx b/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx
index f00f16647c..79ec142fd8 100644
--- a/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx
+++ b/datahub-web-react/src/app/entity/shared/GlossaryEntityContext.tsx
@@ -10,6 +10,8 @@ export interface GlossaryEntityContextType {
     // This will happen when you edit a name, move a term/group, create a new term/group, and delete a term/group
     urnsToUpdate: string[];
     setUrnsToUpdate: (updatdUrns: string[]) => void;
+    isSidebarOpen: boolean;
+    setIsSidebarOpen: (isOpen: boolean) => void;
 }
 
 export const GlossaryEntityContext = React.createContext<GlossaryEntityContextType>({
@@ -18,10 +20,27 @@ export const GlossaryEntityContext = React.createContext<GlossaryEntityContextTy
     setEntityData: () => {},
     urnsToUpdate: [],
     setUrnsToUpdate: () => {},
+    isSidebarOpen: true,
+    setIsSidebarOpen: () => {},
 });
 
 export const useGlossaryEntityData = () => {
-    const { isInGlossaryContext, entityData, setEntityData, urnsToUpdate, setUrnsToUpdate } =
-        useContext(GlossaryEntityContext);
-    return { isInGlossaryContext, entityData, setEntityData, urnsToUpdate, setUrnsToUpdate };
+    const {
+        isInGlossaryContext,
+        entityData,
+        setEntityData,
+        urnsToUpdate,
+        setUrnsToUpdate,
+        isSidebarOpen,
+        setIsSidebarOpen,
+    } = useContext(GlossaryEntityContext);
+    return {
+        isInGlossaryContext,
+        entityData,
+        setEntityData,
+        urnsToUpdate,
+        setUrnsToUpdate,
+        isSidebarOpen,
+        setIsSidebarOpen,
+    };
 };
diff --git a/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx b/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
index a5262265fd..4e424b776a 100644
--- a/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
+++ b/datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
@@ -20,6 +20,8 @@ import {
 import { OnboardingTour } from '../onboarding/OnboardingTour';
 import { useGlossaryEntityData } from '../entity/shared/GlossaryEntityContext';
 import { useUserContext } from '../context/useUserContext';
+import useToggleSidebar from './useToggleSidebar';
+import ToggleSidebarButton from '../search/ToggleSidebarButton';
 
 export const HeaderWrapper = styled(TabToolbar)`
     padding: 15px 45px 10px 24px;
@@ -38,6 +40,12 @@ const MainContentWrapper = styled.div`
     flex-direction: column;
 `;
 
+const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+`;
+
 export const MAX_BROWSER_WIDTH = 500;
 export const MIN_BROWSWER_WIDTH = 200;
 
@@ -56,6 +64,7 @@ function BusinessGlossaryPage() {
     } = useGetRootGlossaryNodesQuery();
     const entityRegistry = useEntityRegistry();
     const { setEntityData } = useGlossaryEntityData();
+    const { isOpen: isSidebarOpen, toggleSidebar } = useToggleSidebar();
 
     useEffect(() => {
         setEntityData(null);
@@ -94,7 +103,12 @@ function BusinessGlossaryPage() {
                 )}
                 <MainContentWrapper data-testid="glossary-entities-list">
                     <HeaderWrapper>
-                        <Typography.Title level={3}>Business Glossary</Typography.Title>
+                        <TitleContainer>
+                            <ToggleSidebarButton isOpen={isSidebarOpen} onClick={toggleSidebar} />
+                            <Typography.Title style={{ margin: '0' }} level={3}>
+                                Business Glossary
+                            </Typography.Title>
+                        </TitleContainer>
                         <div>
                             <Button
                                 data-testid="add-term-button"
diff --git a/datahub-web-react/src/app/glossary/GlossaryRoutes.tsx b/datahub-web-react/src/app/glossary/GlossaryRoutes.tsx
index abba77d1a3..0062cefee0 100644
--- a/datahub-web-react/src/app/glossary/GlossaryRoutes.tsx
+++ b/datahub-web-react/src/app/glossary/GlossaryRoutes.tsx
@@ -20,12 +20,21 @@ export default function GlossaryRoutes() {
     const entityRegistry = useEntityRegistry();
     const [entityData, setEntityData] = useState<GenericEntityProperties | null>(null);
     const [urnsToUpdate, setUrnsToUpdate] = useState<string[]>([]);
+    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
 
     const isAtRootGlossary = window.location.pathname === PageRoutes.GLOSSARY;
 
     return (
         <GlossaryEntityContext.Provider
-            value={{ isInGlossaryContext: true, entityData, setEntityData, urnsToUpdate, setUrnsToUpdate }}
+            value={{
+                isInGlossaryContext: true,
+                entityData,
+                setEntityData,
+                urnsToUpdate,
+                setUrnsToUpdate,
+                isSidebarOpen,
+                setIsSidebarOpen,
+            }}
         >
             {!isAtRootGlossary && <GlossaryEntitiesPath />}
             <ContentWrapper>
diff --git a/datahub-web-react/src/app/glossary/GlossarySidebar.tsx b/datahub-web-react/src/app/glossary/GlossarySidebar.tsx
index 4126c8f2bb..4fa99da70e 100644
--- a/datahub-web-react/src/app/glossary/GlossarySidebar.tsx
+++ b/datahub-web-react/src/app/glossary/GlossarySidebar.tsx
@@ -1,14 +1,25 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import GlossarySearch from './GlossarySearch';
 import GlossaryBrowser from './GlossaryBrowser/GlossaryBrowser';
 import { ProfileSidebarResizer } from '../entity/shared/containers/profile/sidebar/ProfileSidebarResizer';
 import { SidebarWrapper } from '../shared/sidebar/components';
+import { useGlossaryEntityData } from '../entity/shared/GlossaryEntityContext';
 
 export const MAX_BROWSER_WIDTH = 500;
 export const MIN_BROWSWER_WIDTH = 200;
 
 export default function GlossarySidebar() {
-    const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
+    const [browserWidth, setBrowserWidth] = useState(window.innerWidth * 0.2);
+    const [previousBrowserWidth, setPreviousBrowserWidth] = useState(window.innerWidth * 0.2);
+    const { isSidebarOpen } = useGlossaryEntityData();
+
+    useEffect(() => {
+        if (isSidebarOpen) {
+            setBrowserWidth(previousBrowserWidth);
+        } else {
+            setBrowserWidth(0);
+        }
+    }, [isSidebarOpen, previousBrowserWidth]);
 
     return (
         <>
@@ -17,9 +28,11 @@ export default function GlossarySidebar() {
                 <GlossaryBrowser openToEntity />
             </SidebarWrapper>
             <ProfileSidebarResizer
-                setSidePanelWidth={(width) =>
-                    setBrowserWith(Math.min(Math.max(width, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH))
-                }
+                setSidePanelWidth={(width) => {
+                    const newWidth = Math.min(Math.max(width, MIN_BROWSWER_WIDTH), MAX_BROWSER_WIDTH);
+                    setBrowserWidth(newWidth);
+                    setPreviousBrowserWidth(newWidth);
+                }}
                 initialSize={browserWidth}
                 isSidebarOnLeft
             />
diff --git a/datahub-web-react/src/app/glossary/useToggleSidebar.tsx b/datahub-web-react/src/app/glossary/useToggleSidebar.tsx
new file mode 100644
index 0000000000..3f2e02385d
--- /dev/null
+++ b/datahub-web-react/src/app/glossary/useToggleSidebar.tsx
@@ -0,0 +1,17 @@
+import { useGlossaryEntityData } from '../entity/shared/GlossaryEntityContext';
+import useToggle from '../shared/useToggle';
+
+const useToggleSidebar = () => {
+    const { isSidebarOpen, setIsSidebarOpen } = useGlossaryEntityData();
+
+    const { isOpen, toggle: toggleSidebar } = useToggle({
+        initialValue: isSidebarOpen ?? true,
+        onToggle: (isNowOpen: boolean) => {
+            setIsSidebarOpen(isNowOpen);
+        },
+    });
+
+    return { isOpen, toggleSidebar } as const;
+};
+
+export default useToggleSidebar;
diff --git a/datahub-web-react/src/app/shared/sidebar/components.tsx b/datahub-web-react/src/app/shared/sidebar/components.tsx
index 5d123d6022..c5e529bd3a 100644
--- a/datahub-web-react/src/app/shared/sidebar/components.tsx
+++ b/datahub-web-react/src/app/shared/sidebar/components.tsx
@@ -7,6 +7,7 @@ export const SidebarWrapper = styled.div<{ width: number }>`
     max-height: 100%;
     width: ${(props) => props.width}px;
     min-width: ${(props) => props.width}px;
+    display: ${(props) => (props.width ? 'block' : 'none')};
 `;
 
 export function RotatingTriangle({ isOpen, onClick }: { isOpen: boolean; onClick?: () => void }) {