Migrate Query page to React: Delete visualization button

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,51 @@
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { find, orderBy } from "lodash";
 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, 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}
+      <a className="hidden-xs delete-visualization-button" onClick={handleDelete}>
+        <i className="zmdi zmdi-close" />
+      </a>
+    </>
+  );
+}
+
+TabWithDeleteButton.propTypes = { visualizationName: PropTypes.string.isRequired, onDelete: PropTypes.func };
+TabWithDeleteButton.defaultProps = { onDelete: () => {} };
+
 export default function QueryVisualizationTabs({
   visualizations,
   queryResult,
   selectedTab,
   showNewVisualizationButton,
+  canDeleteVisualizations,
   onChangeTab,
   onClickNewVisualization,
+  onDeleteVisualization,
 }) {
   const tabsProps = {};
   if (find(visualizations, { id: selectedTab })) {
@@ -29,12 +61,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]);
 
   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={(canDeleteVisualizations && !isFirstVisualization(visualization.id)) ? (
+            <TabWithDeleteButton
+              visualizationName={visualization.name}
+              onDelete={() => onDeleteVisualization(visualization)}
+            />
+          ) : visualization.name}
+        >
           <VisualizationRenderer visualization={visualization} queryResult={queryResult} context="query" />
         </TabPane>
       ))}
@@ -47,15 +95,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%;
+    }
+  }
+}