Merge pull request #364 from metrico/fix/remove_split_button

fix: close split on remove last from right
metrico · Nov 6, 2023 · 35f3a44 · 35f3a44
2 parents 61fa728 + ad32cb0
commit 35f3a44
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 39 deletions.
diff --git a/src/components/QueryItem/QueryItemContainer.tsx b/src/components/QueryItem/QueryItemContainer.tsx
@@ -1,7 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import { setLeftPanel } from "../../actions/setLeftPanel";
 import { setRightPanel } from "../../actions/setRightPanel";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import SyncIcon from "@mui/icons-material/Sync";
 import {
     CloseQuery,
@@ -34,13 +33,20 @@ export const StyledTabsCont = (theme: any) => css`
     }
 `;
 
+const iconButtonStyle = {
+    fontSize: "15px",
+    cursor: "pointer",
+    padding: "3px",
+    marginLeft: "10px",
+};
+
 export function QueryItemContainer(props: any) {
     const dispatch = useDispatch();
     // update panel on id change
     const { onTabChange, tabsValue, isTabs, activeTabs } = props;
     const { children } = props;
     const {
-        data: { expr, open, id, start, stop, label, pickerOpen, idRef },
+        data: { expr, id, start, stop, label, pickerOpen, idRef },
         isQueryOpen,
     } = props;
 
@@ -284,8 +290,8 @@ export function QueryItemContainer(props: any) {
                             />
                             {!isTabletOrMobile && (
                                 <SplitViewButton
+                                    type="split"
                                     isSplit={isSplit}
-                                    open={open}
                                     side={props.name}
                                 />
                             )}
@@ -303,12 +309,7 @@ export function QueryItemContainer(props: any) {
 
                             <Tooltip title={"Sync Time Ranges"}>
                                 <SyncIcon
-                                    style={{
-                                        fontSize: "15px",
-                                        cursor: "pointer",
-                                        padding: "3px",
-                                        marginLeft: "10px",
-                                    }}
+                                    style={iconButtonStyle}
                                     onClick={onSyncTimeRanges}
                                 />
                             </Tooltip>
@@ -321,30 +322,18 @@ export function QueryItemContainer(props: any) {
                                 label={""}
                             />
                             <AddOutlinedIcon
-                                style={{
-                                    fontSize: "15px",
-                                    cursor: "pointer",
-                                    padding: "3px",
-                                    marginLeft: "10px",
-                                }}
+                                style={iconButtonStyle}
                                 onClick={props.onAddQuery}
                             />
-                            <DeleteOutlineIcon
-                                style={{
-                                    fontSize: "15px",
-                                    cursor: "pointer",
-                                    padding: "3px",
-                                }}
-                                onClick={props.onDeleteQuery}
+                            <SplitViewButton
+                                type="remove"
+                                onDeleteQuery={props.onDeleteQuery}
+                                side={props.name}
                             />
                         </div>
                     </div>
                 )}
             </div>
-
-            {/* add a flag in here for when we will have tabs */}
-
-            {/* here we need the children container // the tabs */}
             {children}
         </QueryItemContainerStyled>
     );

diff --git a/src/components/StatusBar/components/SplitViewButton/index.tsx b/src/components/StatusBar/components/SplitViewButton/index.tsx
@@ -4,6 +4,7 @@ import { setLeftPanel } from "../../../../actions/setLeftPanel";
 import { setRightPanel } from "../../../../actions/setRightPanel";
 import { setSplitView } from "./setSplitView";
 import { SplitButton } from "./styled";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
 export type props = {
     panel?: string;
@@ -40,22 +41,30 @@ export function openPanel(
     dispatch(setRightPanel(openRight));
 }
 
-export default function SplitViewButton(props: any) {
-    // close button will go into queryitemtoolbar
-    const { side, isSplit } = props;
-    // see which one is open
-    // set open to false
+type SplitButtonProps = {
+    type: "remove" | "split";
+    side?: "left" | "right";
+    isSplit?: boolean;
+    onDeleteQuery?: () => void | undefined;
+};
+
+export default function SplitViewButton({
+    type,
+    side = "left",
+    onDeleteQuery,
+    isSplit,
+}: SplitButtonProps) {
     const panel = useSelector((store: any) => store[side]);
-    //const { left, right } = useSelector((store: any) => store);
     const left = useSelector((store: any) => store.left);
     const right = useSelector((store: any) => store.right);
+    const usedSide = useSelector((store: any) => store[side]);
     const dispatch = useDispatch();
+    const isSplitView = useSelector((store: any) => store.isSplit);
 
     const splitView = (e: any) => {
         e.preventDefault();
         e.stopPropagation();
-
-        if (!isSplit) {
+        if (!isSplit && !isSplitView) {
             openPanel([left, right], dispatch);
             dispatch(setSplitView(true));
         } else {
@@ -66,14 +75,33 @@ export default function SplitViewButton(props: any) {
         }
     };
 
+    const handleDeleteAction = (e: any) => {
+        if (usedSide?.length > 1 && onDeleteQuery !== undefined) {
+            onDeleteQuery();
+        } else if (isSplitView) {
+            splitView(e);
+        }
+    };
+
     const setTitle = isSplit ? "Close Split View" : "Split View";
     return (
         <>
-            <Tooltip title={setTitle}>
-                <SplitButton onClick={splitView}>
-                    {isSplit ? "Close" : "Split"}
-                </SplitButton>
-            </Tooltip>
+            {type === "split" ? (
+                <Tooltip title={setTitle}>
+                    <SplitButton onClick={splitView}>
+                        {isSplit ? "Close" : "Split"}
+                    </SplitButton>
+                </Tooltip>
+            ) : (
+                <DeleteOutlineIcon
+                    style={{
+                        fontSize: "15px",
+                        cursor: "pointer",
+                        padding: "3px",
+                    }}
+                    onClick={handleDeleteAction}
+                />
+            )}
         </>
     );
 }