Revert "Explorer Toolbar maximised and minimised (#4656)" (#4705)

This reverts commit aadb962. (cherry picked from commit cf22039)
SigNoz · Mar 14, 2024 · c04d0e9 · c04d0e9
1 parent 6c2a3d5
commit c04d0e9
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 391 deletions.
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
@@ -16,5 +16,4 @@ export enum LOCALSTORAGE {
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
-	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
 }
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -3,7 +3,7 @@
 }
 .explorer-update {
 	position: fixed;
-	bottom: 24px;
+	bottom: 16px;
 	left: calc(50% - 225px);
 	display: flex;
 	align-items: center;
@@ -47,7 +47,7 @@
 	box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
 	backdrop-filter: blur(20px);
 	position: fixed;
-	bottom: 24px;
+	bottom: 16px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -1,7 +1,5 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
-import { useDraggable } from '@dnd-kit/core';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -33,15 +31,7 @@ import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react';
-import {
-	CSSProperties,
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { CSSProperties, useCallback, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -51,7 +41,6 @@ import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
-import ExplorerOptionsDroppableArea from './ExplorerOptionsDroppableArea';
 import {
 	DATASOURCE_VS_ROUTES,
 	generateRGBAFromHex,
@@ -68,8 +57,6 @@ function ExplorerOptions({
 	onExport,
 	query,
 	sourcepage,
-	isExplorerOptionHidden = false,
-	setIsExplorerOptionHidden,
 }: ExplorerOptionsProps): JSX.Element {
 	const [isExport, setIsExport] = useState<boolean>(false);
 	const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
@@ -79,7 +66,6 @@ function ExplorerOptions({
 	const history = useHistory();
 	const ref = useRef<RefSelectProps>(null);
 	const isDarkMode = useIsDarkMode();
-	const [isDragEnabled, setIsDragEnabled] = useState(false);
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -271,31 +257,11 @@ function ExplorerOptions({
 		[isDarkMode],
 	);
 
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		transform,
-		isDragging,
-	} = useDraggable({
-		id: 'explorer-options-draggable',
-		disabled: isDragEnabled,
-	});
-
 	const isEditDeleteSupported = allowedRoles.includes(role as string);
 
-	const style: React.CSSProperties | undefined = transform
-		? {
-				transform: `translate3d(${transform.x - 338}px, ${transform.y}px, 0)`,
-				width: `${400 - transform.y * 6}px`,
-				maxWidth: '440px', // initial width of the explorer options
-				overflow: 'hidden',
-		  }
-		: undefined;
-
 	return (
 		<>
-			{isQueryUpdated && !isExplorerOptionHidden && !isDragging && (
+			{isQueryUpdated && (
 				<div
 					className={cx(
 						isEditDeleteSupported ? '' : 'hide-update',
@@ -323,105 +289,87 @@ function ExplorerOptions({
 					</Tooltip>
 				</div>
 			)}
-			{!isExplorerOptionHidden && (
-				<div
-					className="explorer-options"
-					style={{
-						background: extraData
-							? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
-							: 'transparent',
-						backdropFilter: 'blur(20px)',
-						...style,
-					}}
-					ref={setNodeRef}
-					{...listeners}
-					{...attributes}
-				>
-					<div className="view-options">
-						<Select<string, { key: string; value: string }>
-							showSearch
-							placeholder="Select a view"
-							loading={viewsIsLoading || isRefetching}
-							value={viewName || undefined}
-							onSelect={handleSelect}
-							style={{
-								minWidth: 170,
-							}}
-							dropdownStyle={dropdownStyle}
-							className="views-dropdown"
-							allowClear={{
-								clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
-							}}
-							onDropdownVisibleChange={(open): void => {
-								setIsDragEnabled(open);
-							}}
-							onClear={handleClearSelect}
-							ref={ref}
-						>
-							{viewsData?.data?.data?.map((view) => {
-								const extraData =
-									view.extraData !== '' ? JSON.parse(view.extraData) : '';
-								let bgColor = getRandomColor();
-								if (extraData !== '') {
-									bgColor = extraData.color;
-								}
-								return (
-									<Select.Option key={view.uuid} value={view.name}>
-										<div className="render-options">
-											<span
-												className="dot"
-												style={{
-													background: bgColor,
-													boxShadow: `0px 0px 6px 0px ${bgColor}`,
-												}}
-											/>{' '}
-											{view.name}
-										</div>
-									</Select.Option>
-								);
-							})}
-						</Select>
+			<div
+				className="explorer-options"
+				style={{
+					background: extraData
+						? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
+						: 'transparent',
+					backdropFilter: 'blur(20px)',
+				}}
+			>
+				<div className="view-options">
+					<Select<string, { key: string; value: string }>
+						showSearch
+						placeholder="Select a view"
+						loading={viewsIsLoading || isRefetching}
+						value={viewName || undefined}
+						onSelect={handleSelect}
+						style={{
+							minWidth: 170,
+						}}
+						dropdownStyle={dropdownStyle}
+						className="views-dropdown"
+						allowClear={{
+							clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
+						}}
+						onClear={handleClearSelect}
+						ref={ref}
+					>
+						{viewsData?.data?.data?.map((view) => {
+							const extraData =
+								view.extraData !== '' ? JSON.parse(view.extraData) : '';
+							let bgColor = getRandomColor();
+							if (extraData !== '') {
+								bgColor = extraData.color;
+							}
+							return (
+								<Select.Option key={view.uuid} value={view.name}>
+									<div className="render-options">
+										<span
+											className="dot"
+											style={{
+												background: bgColor,
+												boxShadow: `0px 0px 6px 0px ${bgColor}`,
+											}}
+										/>{' '}
+										{view.name}
+									</div>
+								</Select.Option>
+							);
+						})}
+					</Select>
+
+					<Button
+						shape="round"
+						onClick={handleSaveViewModalToggle}
+						className={isEditDeleteSupported ? '' : 'hidden'}
+						disabled={viewsIsLoading || isRefetching}
+					>
+						<Disc3 size={16} /> Save this view
+					</Button>
+				</div>
+
+				<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
+				<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
+					<Tooltip title="Create Alerts">
 						<Button
-							shape="round"
-							onClick={handleSaveViewModalToggle}
-							className={isEditDeleteSupported ? '' : 'hidden'}
-							disabled={viewsIsLoading || isRefetching}
+							disabled={disabled}
+							shape="circle"
+							onClick={onCreateAlertsHandler}
 						>
-							<Disc3 size={16} /> Save this view
+							<ConciergeBell size={16} />
 						</Button>
-					</div>
-
-					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
-
-					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<Tooltip title="Create Alerts">
-							<Button
-								disabled={disabled}
-								shape="circle"
-								onClick={onCreateAlertsHandler}
-							>
-								<ConciergeBell size={16} />
-							</Button>
-						</Tooltip>
-
-						<Tooltip title="Add to Dashboard">
-							<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
-								<Plus size={16} />
-							</Button>
-						</Tooltip>
-					</div>
-				</div>
-			)}
+					</Tooltip>
 
-			<ExplorerOptionsDroppableArea
-				isExplorerOptionHidden={isExplorerOptionHidden}
-				setIsExplorerOptionHidden={setIsExplorerOptionHidden}
-				sourcepage={sourcepage}
-				isQueryUpdated={isQueryUpdated}
-				handleClearSelect={handleClearSelect}
-				onUpdateQueryHandler={onUpdateQueryHandler}
-			/>
+					<Tooltip title="Add to Dashboard">
+						<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
+							<Plus size={16} />
+						</Button>
+					</Tooltip>
+				</div>
+			</div>
 
 			<Modal
 				className="save-view-modal"
@@ -479,14 +427,8 @@ export interface ExplorerOptionsProps {
 	query: Query | null;
 	disabled: boolean;
 	sourcepage: DataSource;
-	isExplorerOptionHidden?: boolean;
-	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 }
 
-ExplorerOptions.defaultProps = {
-	isLoading: false,
-	isExplorerOptionHidden: false,
-	setIsExplorerOptionHidden: undefined,
-};
+ExplorerOptions.defaultProps = { isLoading: false };
 
 export default ExplorerOptions;