Migrate Query page to React: Delete visualization button (#4461)

client/app/pages/queries/QueryView.jsx

@@ -74,6 +74,7 @@ function QueryView({ query }) {
             queryResult={queryResult}
             visualizations={query.visualizations}
             showNewVisualizationButton={query.can_edit}
+            canDeleteVisualizations={query.can_edit}
             selectedTab={selectedTab}
             onChangeTab={setSelectedTab}
           />

client/app/pages/queries/components/QueryVisualizationTabs.jsx

@@ -1,19 +1,61 @@
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { find, orderBy } from "lodash";
+import useMedia from "use-media";
 import Tabs from "antd/lib/tabs";
 import { VisualizationRenderer } from "@/visualizations/VisualizationRenderer";
 import Button from "antd/lib/button";
+import Modal from "antd/lib/modal";
+
+import "./query-visualization-tabs.less";
 
 const { TabPane } = Tabs;
 
+function TabWithDeleteButton({ visualizationName, canDelete, onDelete }) {
+  const handleDelete = useCallback(
+    e => {
+      e.stopPropagation();
+      Modal.confirm({
+        title: "Delete Visualization",
+        content: "Are you sure you want to delete this visualization?",
+        okText: "Delete",
+        okType: "danger",
+        onOk: onDelete,
+        maskClosable: true,
+        autoFocusButton: null,
+      });
+    },
+    [onDelete]
+  );
+
+  return (
+    <>
+      {visualizationName}
+      {canDelete && (
+        <a className="delete-visualization-button" onClick={handleDelete}>
+          <i className="zmdi zmdi-close" />
+        </a>
+      )}
+    </>
+  );
+}
+
+TabWithDeleteButton.propTypes = {
+  visualizationName: PropTypes.string.isRequired,
+  canDelete: PropTypes.bool,
+  onDelete: PropTypes.func,
+};
+TabWithDeleteButton.defaultProps = { canDelete: false, onDelete: () => {} };
+
 export default function QueryVisualizationTabs({
   visualizations,
   queryResult,
   selectedTab,
   showNewVisualizationButton,
+  canDeleteVisualizations,
   onChangeTab,
   onClickNewVisualization,
+  onDeleteVisualization,
 }) {
   const tabsProps = {};
   if (find(visualizations, { id: selectedTab })) {
@@ -29,12 +71,28 @@ export default function QueryVisualizationTabs({
     );
   }
 
-  const orderedVisualizations = orderBy(visualizations, ["id"]);
+  const orderedVisualizations = useMemo(() => orderBy(visualizations, ["id"]), [visualizations]);
+  const isFirstVisualization = useCallback(visId => visId === orderedVisualizations[0].id, [orderedVisualizations]);
+  const isMobile = useMedia({ maxWidth: 768 });
 
   return (
-    <Tabs {...tabsProps} animated={false} tabBarGutter={0} onChange={activeKey => onChangeTab(+activeKey)}>
+    <Tabs
+      {...tabsProps}
+      className="query-visualization-tabs"
+      animated={false}
+      tabBarGutter={0}
+      onChange={activeKey => onChangeTab(+activeKey)}
+      destroyInactiveTabPane>
       {orderedVisualizations.map(visualization => (
-        <TabPane key={`${visualization.id}`} tab={visualization.name}>
+        <TabPane
+          key={`${visualization.id}`}
+          tab={
+            <TabWithDeleteButton
+              canDelete={!isMobile && canDeleteVisualizations && !isFirstVisualization(visualization.id)}
+              visualizationName={visualization.name}
+              onDelete={() => onDeleteVisualization(visualization)}
+            />
+          }>
           <VisualizationRenderer visualization={visualization} queryResult={queryResult} context="query" />
         </TabPane>
       ))}
@@ -47,15 +105,19 @@ QueryVisualizationTabs.propTypes = {
   visualizations: PropTypes.arrayOf(PropTypes.object),
   selectedTab: PropTypes.number,
   showNewVisualizationButton: PropTypes.bool,
+  canDeleteVisualizations: PropTypes.bool,
   onChangeTab: PropTypes.func,
   onClickNewVisualization: PropTypes.func,
+  onDeleteVisualization: PropTypes.func,
 };
 
 QueryVisualizationTabs.defaultProps = {
   queryResult: null,
   visualizations: [],
   selectedTab: null,
   showNewVisualizationButton: false,
+  canDeleteVisualizations: false,
   onChangeTab: () => {},
   onClickNewVisualization: () => {},
+  onDeleteVisualization: () => {},
 };

client/app/pages/queries/components/query-visualization-tabs.less

@@ -0,0 +1,14 @@
+.query-visualization-tabs {
+  .delete-visualization-button {
+    margin-left: 5px;
+    cursor: pointer;
+    color: #A09797;
+    font-size: 11px;
+    padding: 0 4px 1px;
+    &:hover {
+      color: white;
+      background-color: #FF8080;
+      border-radius: 50%;
+    }
+  }
+}

package.json

@@ -84,7 +84,8 @@
     "react2angular": "^3.2.1",
     "tinycolor2": "^1.4.1",
     "ui-select": "^0.19.8",
-    "use-debounce": "^3.1.0"
+    "use-debounce": "^3.1.0",
+    "use-media": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",