feat: collapsible explore page sidebar. (#378)

parseablehq · Dec 6, 2024 · 6af2086 · 6af2086
1 parent e6d532f
commit 6af2086
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 26 deletions.
diff --git a/src/pages/Stream/Views/Explore/LogsViewConfig.tsx b/src/pages/Stream/Views/Explore/LogsViewConfig.tsx
@@ -1,19 +1,20 @@
 import { LOGS_CONFIG_SIDEBAR_WIDTH } from '@/constants/theme';
 import { Checkbox, Divider, Group, ScrollArea, Select, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
 import classes from '../../styles/LogsViewConfig.module.css';
-import { useStreamStore } from '../../providers/StreamProvider';
+import { streamStoreReducers, useStreamStore } from '../../providers/StreamProvider';
 import _ from 'lodash';
 import { Field } from '@/@types/parseable/dataType';
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
-import { IconGripVertical, IconPin, IconPinFilled } from '@tabler/icons-react';
+import { IconChevronsLeft, IconGripVertical, IconPin, IconPinFilled } from '@tabler/icons-react';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
-import { ResizableBox } from 'react-resizable';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 
 const { toggleConfigViewType, toggleDisabledColumns, setOrderedHeaders, togglePinnedColumns, setDisabledColumns } =
 	logsStoreReducers;
 
+const { toggleSideBar } = streamStoreReducers;
+
 const Header = () => {
 	const [configViewType, setLogsStore] = useLogsStore((store) => store.tableOpts.configViewType);
 
@@ -300,6 +301,8 @@ const ColumnsList = (props: { isLoading: boolean }) => {
 const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; infoLoading: boolean }) => {
 	const [configViewType] = useLogsStore((store) => store.tableOpts.configViewType);
 	const [maximized] = useAppStore((store) => store.maximized);
+	const [{ sideBarOpen }, setStreamStore] = useStreamStore((store) => store);
+
 	const divRef = useRef<HTMLDivElement | null>(null);
 	const [height, setHeight] = useState(0);
 
@@ -308,23 +311,35 @@ const LogsViewConfig = (props: { schemaLoading: boolean; logsLoading: boolean; i
 			setHeight(divRef.current.offsetHeight);
 		}
 	}, [maximized]);
+
 	return (
-		<Stack ref={divRef}>
-			<ResizableBox
-				width={LOGS_CONFIG_SIDEBAR_WIDTH}
-				height={height}
-				axis="x"
-				maxConstraints={[500, height]}
-				minConstraints={[200, height]}>
-				<Stack style={{ width: '100%', height: '100%' }} className={classes.container}>
-					<Header />
-					{configViewType === 'schema' ? (
-						<SchemaList isLoading={props.schemaLoading || props.infoLoading} />
-					) : (
-						<ColumnsList isLoading={props.logsLoading || props.infoLoading} />
-					)}
-				</Stack>
-			</ResizableBox>
+		<Stack
+			ref={divRef}
+			style={{
+				borderRight: '1px solid var(--mantine-color-gray-2)',
+				width: sideBarOpen ? 0 : LOGS_CONFIG_SIDEBAR_WIDTH,
+				transition: 'width 0.5s',
+			}}>
+			<Stack style={{ width: LOGS_CONFIG_SIDEBAR_WIDTH, height: height - 30 }} className={classes.container}>
+				<Header />
+				{configViewType === 'schema' ? (
+					<SchemaList isLoading={props.schemaLoading || props.infoLoading} />
+				) : (
+					<ColumnsList isLoading={props.logsLoading || props.infoLoading} />
+				)}
+			</Stack>
+			<Stack className={classes.collapseBtn}>
+				{!sideBarOpen && (
+					<Tooltip label="Collapse" position="left">
+						<IconChevronsLeft
+							className={classes.collapseIcon}
+							onClick={() => setStreamStore((store) => toggleSideBar(store))}
+							stroke={1.2}
+							size="1.2rem"
+						/>
+					</Tooltip>
+				)}
+			</Stack>
 		</Stack>
 	);
 };

diff --git a/src/pages/Stream/components/Sidebar.tsx b/src/pages/Stream/components/Sidebar.tsx
@@ -1,11 +1,14 @@
 import { Stack, Tooltip } from '@mantine/core';
 import classes from '../styles/SideBar.module.css';
-import { IconBolt, IconFilterSearch, IconSettings2 } from '@tabler/icons-react';
+import { IconBolt, IconChevronsRight, IconFilterSearch, IconSettings2 } from '@tabler/icons-react';
 import { useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { STREAM_VIEWS } from '@/constants/routes';
 import _ from 'lodash';
+import { streamStoreReducers, useStreamStore } from '../providers/StreamProvider';
+
+const { toggleSideBar } = streamStoreReducers;
 
 type MenuItemProps = {
 	setCurrentView: (view: string) => void;
@@ -59,6 +62,24 @@ const ConfigButton = (props: MenuItemProps) => {
 	);
 };
 
+const ExpandCollapseButton = () => {
+	const [{ sideBarOpen }, setStreamStore] = useStreamStore((store) => store);
+	return (
+		<Stack
+			onClick={() => setStreamStore((store) => toggleSideBar(store))}
+			style={{ padding: '4px 0', alignItems: 'center', marginTop: 'auto' }}
+			className={classes.menuItemContainer}>
+			{sideBarOpen && (
+				<Tooltip label="Expand" position="right">
+					<Stack className={classes.collapseBtn} style={{ padding: '4px 4px' }}>
+						<IconChevronsRight className={classes.collapseIcon} stroke={1.2} size="1.2rem" />
+					</Stack>
+				</Tooltip>
+			)}
+		</Stack>
+	);
+};
+
 const LiveTailMenu = (props: MenuItemProps) => {
 	const viewName = 'live-tail';
 	const isActive = props.currentView === viewName;
@@ -104,6 +125,9 @@ const SideBar = () => {
 				{isStandAloneMode && <LiveTailMenu setCurrentView={setCurrentView} currentView={view || ''} />}
 				<ConfigButton setCurrentView={setCurrentView} currentView={view || ''} />
 			</Stack>
+			<Stack style={{ marginTop: 'auto' }}>
+				<ExpandCollapseButton />
+			</Stack>
 		</Stack>
 	);
 };

diff --git a/src/pages/Stream/index.tsx b/src/pages/Stream/index.tsx
@@ -1,5 +1,5 @@
-import { Box, Stack, rem } from '@mantine/core';
-import { useDocumentTitle } from '@mantine/hooks';
+import { Box, Stack } from '@mantine/core';
+import { useDocumentTitle, useHotkeys } from '@mantine/hooks';
 import { FC, useCallback, useEffect } from 'react';
 import LiveLogTable from './Views/LiveTail/LiveLogTable';
 import ViewLog from './components/ViewLog';
@@ -20,7 +20,7 @@ import { useGetStreamSchema } from '@/hooks/useGetLogStreamSchema';
 import { useGetStreamInfo } from '@/hooks/useGetStreamInfo';
 import useParamsController from './hooks/useParamsController';
 
-const { streamChangeCleanup } = streamStoreReducers;
+const { streamChangeCleanup, toggleSideBar } = streamStoreReducers;
 
 const ErrorView = (props: { error: string | null; onRetry: () => void }) => {
 	return (
@@ -45,12 +45,14 @@ const Stream: FC = () => {
 	const [maximized] = useAppStore((store) => store.maximized);
 	const [instanceConfig] = useAppStore((store) => store.instanceConfig);
 	const queryEngine = instanceConfig?.queryEngine;
-	const [sideBarOpen, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
+	const [, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
 	const { getStreamInfoRefetch, getStreamInfoLoading, getStreamInfoRefetching } = useGetStreamInfo(
 		currentStream || '',
 		currentStream !== null,
 	);
 
+	useHotkeys([['mod+/', () => setStreamStore((store) => toggleSideBar(store))]]);
+
 	const {
 		refetch: refetchSchema,
 		isLoading: isSchemaLoading,
@@ -78,7 +80,7 @@ const Stream: FC = () => {
 		}
 	}, [isStoreSynced, currentStream]);
 
-	const sideBarWidth = sideBarOpen ? rem(180) : SECONDARY_SIDEBAR_WIDTH;
+	const sideBarWidth = SECONDARY_SIDEBAR_WIDTH;
 
 	if (!currentStream) return null;
 	if (!_.includes(STREAM_VIEWS, view)) return null;

diff --git a/src/pages/Stream/styles/LogsViewConfig.module.css b/src/pages/Stream/styles/LogsViewConfig.module.css
@@ -1,5 +1,4 @@
 .container {
-    border: 1px solid var(--mantine-color-gray-2);
     border-top: none;
     border-left: none;
     border-bottom: none;
@@ -110,3 +109,21 @@
 	color: var(--mantine-color-brandPrimary-4);
 	cursor: pointer;
 }
+
+.collapseBtn {
+	display: flex;
+	align-items: end;
+	cursor: pointer;
+	padding: 4px;
+}
+
+.collapseIcon{
+	color: var(--mantine-color-gray-6);
+	border-radius: 0.175rem;
+	height: 20px;
+	width: 20px;
+	&:hover {
+		background-color: #F0F3F5;
+		color: black;
+	}
+}
diff --git a/src/pages/Stream/styles/SideBar.module.css b/src/pages/Stream/styles/SideBar.module.css
@@ -49,4 +49,19 @@
 
 .icon {
     color: var(--mantine-color-gray-6);
+}
+
+.collapseBtn {
+	display: flex;
+	align-items: end;
+	cursor: pointer;
+}
+
+.collapseIcon{
+	color: var(--mantine-color-gray-6);
+	border-radius: 0.175rem;
+	&:hover {
+		background-color: #F0F3F5;
+		color: black;
+	}
 }