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;