fix(playground): replace antd overlay

packages/cubejs-playground/src/App.tsx

@@ -1,24 +1,23 @@
 /* eslint-disable no-undef,react/jsx-no-target-blank */
-import { Component, useEffect } from 'react';
 import '@ant-design/compatible/assets/index.css';
-import { Layout, Alert } from 'antd';
+import { Alert, Layout } from 'antd';
+import { Component, useEffect } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
-import Header from './components/Header/Header';
-import GlobalStyles from './components/GlobalStyles';
 import { CubeLoader } from './atoms';
+import { AppContextConsumer, PlaygroundContext } from './components/AppContext';
+import GlobalStyles from './components/GlobalStyles';
+import Header from './components/Header/Header';
+import { LivePreviewContextProvider } from './components/LivePreviewContext/LivePreviewContextProvider';
 import {
   event,
   setAnonymousId,
-  setTracker,
   setTelemetry,
+  setTracker,
   trackImpl,
 } from './events';
-import { AppContextConsumer, PlaygroundContext } from './components/AppContext';
 import { useAppContext } from './hooks';
-import { LivePreviewContextProvider } from './components/LivePreviewContext/LivePreviewContextProvider';
-
 const StyledLayoutContent = styled(Layout.Content)`
   height: 100%;
 `;

packages/cubejs-playground/src/ChartContainer.tsx

@@ -1,27 +1,26 @@
-import { Component, FunctionComponent, Suspense } from 'react';
 import {
   CodeOutlined,
   CodeSandboxOutlined,
   CopyOutlined,
   DownOutlined,
-  PlusOutlined,
-  ThunderboltOutlined,
   QuestionCircleOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons';
-import { Dropdown, Menu, Modal } from 'antd';
+import { ChartType, Meta, Query, ResultSet } from '@cubejs-client/core';
+import { Dropdown, Menu } from 'antd';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
-import styled from 'styled-components';
+import { Component, FunctionComponent, Suspense } from 'react';
 import { Redirect, RouteComponentProps, withRouter } from 'react-router-dom';
-import { ChartType, Meta, Query, ResultSet } from '@cubejs-client/core';
+import styled from 'styled-components';
 
-import { FatalError } from './components/Error/FatalError';
-import { SectionRow } from './components';
-import { Button, Card, CubeLoader } from './atoms';
 import PrismCode from './PrismCode';
+import { Button, Card, CubeLoader } from './atoms';
+import { SectionRow } from './components';
+import { FatalError } from './components/Error/FatalError';
 import { playgroundAction } from './events';
-import { codeSandboxDefinition, copyToClipboard } from './utils';
-import { GraphQLIcon } from './shared/icons/GraphQLIcon';
 import { loadable } from './loadable';
+import { GraphQLIcon } from './shared/icons/GraphQLIcon';
+import { codeSandboxDefinition, copyToClipboard } from './utils';
 
 const GraphiQLSandbox = loadable(
   () => import('./components/GraphQL/GraphiQLSandbox')

packages/cubejs-playground/src/QueryBuilder/ButtonDropdown.tsx

@@ -1,32 +1,90 @@
-import { Dropdown, DropDownProps, ButtonProps } from 'antd';
+import { ButtonProps } from 'antd';
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
 
 import { Button } from '../atoms';
 
+const TooltipTriggerWrapper = styled.div`
+  position: relative;
+`;
+
+const TooltipContent = styled.div`
+  position: absolute;
+  left: 16px;
+  top: 40px;
+  z-index: 9999;
+  left: 0;
+  overflow: hidden;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+`;
+
+function TooltipTrigger({ children, shown, onClose, ...overlayStyles }) {
+  const ref = useRef<any>(null);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', (event: any) => {
+      if (!ref?.current) {
+        return;
+      }
+
+      if (!ref.current.contains(event.target)) {
+        onClose();
+      }
+    });
+  }, []);
+
+  return (
+    <TooltipTriggerWrapper>
+      {children[0]}
+      {shown ? (
+        <TooltipContent
+          ref={ref}
+          className="ant-dropdown ant-dropdown-placement-bottomLeft "
+          style={{ ...overlayStyles }}
+        >
+          {children[1]}
+        </TooltipContent>
+      ) : null}
+    </TooltipTriggerWrapper>
+  );
+}
+
 type ButtonDropdownProps = {
-  onOverlayClose?: () => void;
-} & DropDownProps & ButtonProps
+  show: boolean;
+  overlay: React.ReactNode;
+  overlayStyles?: any;
+  onOverlayClose: () => void;
+  onOverlayOpen: () => void;
+  onItemClick?: () => void;
+} & ButtonProps;
 
-const ButtonDropdown = ({
+export function ButtonDropdown({
+  show,
   overlay,
   disabled = false,
+  overlayStyles,
   onOverlayClose,
+  onOverlayOpen,
+  onItemClick,
   ...buttonProps
-}: ButtonDropdownProps) => {
+}: ButtonDropdownProps) {
   return (
-    <Dropdown
-      disabled={disabled}
-      overlay={overlay}
-      placement="bottomLeft"
-      trigger={['click']}
-      onVisibleChange={(visible) => {
-        if (!visible) {
-          onOverlayClose?.();
-        }
+    <TooltipTrigger
+      shown={show}
+      {...overlayStyles}
+      onClose={() => {
+        onOverlayClose();
       }}
     >
-      <Button {...buttonProps} disabled={disabled} />
-    </Dropdown>
+      <Button
+        {...buttonProps}
+        onClick={() => {
+          onOverlayOpen();
+        }}
+        disabled={disabled}
+      />
+      <div onClick={onItemClick}>{overlay}</div>
+    </TooltipTrigger>
   );
-};
-
-export default ButtonDropdown;
+}