refactor: Composable new in unleash (#8505)

Unleash · Oct 22, 2024 · cbfdb8c · cbfdb8c
1 parent d3294d5
commit cbfdb8c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -18,6 +18,7 @@ import { NavigationSidebar } from './NavigationSidebar/NavigationSidebar';
 import { MainLayoutEventTimeline } from './MainLayoutEventTimeline';
 import { EventTimelineProvider } from 'component/events/EventTimeline/EventTimelineProvider';
 import { AIChat } from 'component/ai/AIChat';
+import { NewInUnleash } from './NavigationSidebar/NewInUnleash/NewInUnleash';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -124,7 +125,11 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                         >
                             <ConditionallyRender
                                 condition={!isSmallScreen}
-                                show={<NavigationSidebar />}
+                                show={
+                                    <NavigationSidebar
+                                        NewInUnleash={NewInUnleash}
+                                    />
+                                }
                             />
 
                             <Box

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -15,16 +15,17 @@ import {
 import { useInitialPathname } from './useInitialPathname';
 import { useLastViewedProject } from 'hooks/useLastViewedProject';
 import { useLastViewedFlags } from 'hooks/useLastViewedFlags';
-import { NewInUnleash } from './NewInUnleash/NewInUnleash';
+import type { NewInUnleash } from './NewInUnleash/NewInUnleash';
 
-export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
-    onClick,
-}) => {
+export const MobileNavigationSidebar: FC<{
+    onClick: () => void;
+    NewInUnleash?: typeof NewInUnleash;
+}> = ({ onClick, NewInUnleash }) => {
     const { routes } = useRoutes();
 
     return (
         <>
-            <NewInUnleash onItemClick={onClick} />
+            {NewInUnleash ? <NewInUnleash /> : null}
             <PrimaryNavigationList mode='full' onClick={onClick} />
             <SecondaryNavigationList
                 routes={routes.mainNavRoutes}
@@ -66,7 +67,9 @@ const StickyContainer = styled(Box)(({ theme }) => ({
     borderTop: `1px solid ${theme.palette.divider}`,
 }));
 
-export const NavigationSidebar = () => {
+export const NavigationSidebar: FC<{ NewInUnleash?: typeof NewInUnleash }> = ({
+    NewInUnleash,
+}) => {
     const { routes } = useRoutes();
 
     const [mode, setMode] = useNavigationMode();
@@ -154,10 +157,12 @@ export const NavigationSidebar = () => {
             <Box sx={{ flex: 1 }} />
 
             <StickyContainer>
-                <NewInUnleash
-                    mode={mode}
-                    onMiniModeClick={() => setMode('full')}
-                />
+                {NewInUnleash ? (
+                    <NewInUnleash
+                        mode={mode}
+                        onMiniModeClick={() => setMode('full')}
+                    />
+                ) : null}
                 <ShowHide
                     mode={mode}
                     onChange={() => {

diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash.tsx
@@ -89,13 +89,11 @@ type NewItem = {
 
 interface INewInUnleashProps {
     mode?: NavigationMode;
-    onItemClick?: () => void;
     onMiniModeClick?: () => void;
 }
 
 export const NewInUnleash = ({
     mode = 'full',
-    onItemClick,
     onMiniModeClick,
 }: INewInUnleashProps) => {
     const navigate = useNavigate();

diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
@@ -8,6 +8,7 @@ import styles from './DrawerMenu.module.scss'; // FIXME: useStyle - theme
 import theme from 'themes/theme';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { MobileNavigationSidebar } from 'component/layout/MainLayout/NavigationSidebar/NavigationSidebar';
+import { NewInUnleash } from 'component/layout/MainLayout/NavigationSidebar/NewInUnleash/NewInUnleash';
 
 const StyledDrawerHeader = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -71,7 +72,10 @@ export const DrawerMenu: VFC<IDrawerMenuProps> = ({
                     </Link>
                 </StyledDrawerHeader>
                 <Divider />
-                <MobileNavigationSidebar onClick={toggleDrawer} />
+                <MobileNavigationSidebar
+                    onClick={toggleDrawer}
+                    NewInUnleash={NewInUnleash}
+                />
             </nav>
         </Drawer>
     );