Consolidate grid collapse actions to a single full screen toggle

apache · Apr 16, 2024 · 1e7f79e · 1e7f79e
1 parent b59cef1
commit 1e7f79e
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 202 deletions.
diff --git a/airflow/www/static/js/dag/Main.tsx b/airflow/www/static/js/dag/Main.tsx
@@ -32,23 +32,21 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 import { isEmpty, debounce } from "lodash";
-import { MdDoubleArrow } from "react-icons/md";
-import { useSearchParams } from "react-router-dom";
+import { FaExpandArrowsAlt, FaCompressArrowsAlt } from "react-icons/fa";
 
 import { useGridData } from "src/api";
 import { hoverDelay } from "src/utils";
 
 import ShortcutCheatSheet from "src/components/ShortcutCheatSheet";
 import { useKeysPress } from "src/utils/useKeysPress";
 
-import Details, { TAB_PARAM } from "./details";
+import Details from "./details";
 import Grid from "./grid";
 import FilterBar from "./nav/FilterBar";
 import LegendRow from "./nav/LegendRow";
 import useToggleGroups from "./useToggleGroups";
 import keyboardShortcutIdentifier from "./keyboardShortcutIdentifier";
 
-const detailsPanelKey = "hideDetailsPanel";
 const minPanelWidth = 300;
 const collapsedWidth = "32px";
 
@@ -82,21 +80,12 @@ const Main = () => {
 
   const [accordionIndexes, setAccordionIndexes] = useState<Array<number>>([0]);
   const isFilterCollapsed = !accordionIndexes.length;
-  const toggleFilterCollapsed = () => {
-    if (isFilterCollapsed) setAccordionIndexes([0]);
-    else setAccordionIndexes([]);
-  };
 
-  const [searchParams] = useSearchParams();
   const resizeRef = useRef<HTMLDivElement>(null);
   const gridRef = useRef<HTMLDivElement>(null);
   const gridScrollRef = useRef<HTMLDivElement>(null);
   const ganttScrollRef = useRef<HTMLDivElement>(null);
 
-  const isPanelOpen =
-    localStorage.getItem(detailsPanelKey) !== "true" ||
-    !!searchParams.get(TAB_PARAM);
-  const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
   const [hoveredTaskState, setHoveredTaskState] = useState<
     string | null | undefined
   >();
@@ -122,18 +111,6 @@ const Main = () => {
 
   const gridWidth = localStorage.getItem(gridWidthKey) || undefined;
 
-  const onPanelToggle = () => {
-    if (!isOpen) {
-      localStorage.setItem(detailsPanelKey, "false");
-    } else {
-      localStorage.setItem(detailsPanelKey, "true");
-      if (isGridCollapsed) {
-        setIsGridCollapsed(!isGridCollapsed);
-      }
-    }
-    onToggle();
-  };
-
   const onToggleGridCollapse = useCallback(() => {
     const gridElement = gridRef.current;
     if (gridElement) {
@@ -195,7 +172,7 @@ const Main = () => {
       };
     }
     return () => {};
-  }, [resize, isLoading, isOpen]);
+  }, [resize, isLoading]);
 
   useKeysPress(
     keyboardShortcutIdentifier.toggleShortcutCheatSheet,
@@ -222,18 +199,6 @@ const Main = () => {
       overflow="hidden"
       position="relative"
     >
-      <IconButton
-        position="absolute"
-        variant="ghost"
-        color="gray.400"
-        top={0}
-        left={0}
-        onClick={toggleFilterCollapsed}
-        icon={<MdDoubleArrow />}
-        aria-label="Toggle filters bar"
-        transform={isFilterCollapsed ? "rotateZ(90deg)" : "rotateZ(270deg)"}
-        transition="all 0.2s"
-      />
       <Accordion allowToggle index={accordionIndexes} borderTopWidth={0}>
         <AccordionItem
           sx={{
@@ -259,52 +224,58 @@ const Main = () => {
         ) : (
           <>
             <Box
-              flex={isOpen ? undefined : 1}
               minWidth={isGridCollapsed ? collapsedWidth : minPanelWidth}
               ref={gridRef}
               height="100%"
               width={isGridCollapsed ? collapsedWidth : gridWidth}
+              position="relative"
             >
+              <IconButton
+                icon={
+                  isFullScreen ? <FaExpandArrowsAlt /> : <FaCompressArrowsAlt />
+                }
+                fontSize="xl"
+                position="absolute"
+                right={0}
+                top={0}
+                variant="ghost"
+                color="gray.400"
+                size="sm"
+                aria-label="Toggle full screen details"
+                title="Toggle full screen details"
+                onClick={toggleFullScreen}
+              />
               <Grid
-                isPanelOpen={isOpen}
-                onPanelToggle={onPanelToggle}
                 hoveredTaskState={hoveredTaskState}
                 openGroupIds={openGroupIds}
                 onToggleGroups={onToggleGroups}
                 isGridCollapsed={isGridCollapsed}
-                setIsGridCollapsed={onToggleGridCollapse}
                 gridScrollRef={gridScrollRef}
                 ganttScrollRef={ganttScrollRef}
               />
             </Box>
-            {isOpen && (
-              <>
-                <Box
-                  width={2}
-                  cursor="ew-resize"
-                  bg="gray.200"
-                  ref={resizeRef}
-                  zIndex={1}
-                />
-                <Box
-                  flex={1}
-                  minWidth={minPanelWidth}
-                  zIndex={1}
-                  bg="white"
-                  height="100%"
-                >
-                  <Details
-                    openGroupIds={openGroupIds}
-                    onToggleGroups={onToggleGroups}
-                    hoveredTaskState={hoveredTaskState}
-                    gridScrollRef={gridScrollRef}
-                    ganttScrollRef={ganttScrollRef}
-                    isFullScreen={isFullScreen}
-                    toggleFullScreen={toggleFullScreen}
-                  />
-                </Box>
-              </>
-            )}
+            <Box
+              width={2}
+              cursor="ew-resize"
+              bg="gray.200"
+              ref={resizeRef}
+              zIndex={1}
+            />
+            <Box
+              flex={1}
+              minWidth={minPanelWidth}
+              zIndex={1}
+              bg="white"
+              height="100%"
+            >
+              <Details
+                openGroupIds={openGroupIds}
+                onToggleGroups={onToggleGroups}
+                hoveredTaskState={hoveredTaskState}
+                gridScrollRef={gridScrollRef}
+                ganttScrollRef={ganttScrollRef}
+              />
+            </Box>
           </>
         )}
       </Flex>

diff --git a/airflow/www/static/js/dag/details/graph/index.tsx b/airflow/www/static/js/dag/details/graph/index.tsx
@@ -28,9 +28,7 @@ import ReactFlow, {
   Panel,
   useOnViewportChange,
   Viewport,
-  ControlButton,
 } from "reactflow";
-import { BiCollapse, BiExpand } from "react-icons/bi";
 
 import { useDatasets, useGraphData, useGridData } from "src/api";
 import useSelection from "src/dag/useSelection";
@@ -49,19 +47,11 @@ interface Props {
   openGroupIds: string[];
   onToggleGroups: (groupIds: string[]) => void;
   hoveredTaskState?: string | null;
-  isFullScreen?: boolean;
-  toggleFullScreen?: () => void;
 }
 
 const dagId = getMetaValue("dag_id");
 
-const Graph = ({
-  openGroupIds,
-  onToggleGroups,
-  hoveredTaskState,
-  isFullScreen,
-  toggleFullScreen,
-}: Props) => {
+const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
   const graphRef = useRef(null);
   const { data } = useGraphData();
   const [arrange, setArrange] = useState(data?.arrange || "LR");
@@ -235,15 +225,7 @@ const Graph = ({
             </Box>
           </Panel>
           <Background />
-          <Controls showInteractive={false}>
-            <ControlButton
-              onClick={toggleFullScreen}
-              aria-label="Toggle full screen"
-              title="Toggle full screen"
-            >
-              {isFullScreen ? <BiCollapse /> : <BiExpand />}
-            </ControlButton>
-          </Controls>
+          <Controls showInteractive={false} />
           <MiniMap
             nodeStrokeWidth={15}
             nodeStrokeColor={(props) => nodeStrokeColor(props, colors)}

diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
@@ -77,8 +77,6 @@ interface Props {
   hoveredTaskState?: string | null;
   gridScrollRef: React.RefObject<HTMLDivElement>;
   ganttScrollRef: React.RefObject<HTMLDivElement>;
-  isFullScreen?: boolean;
-  toggleFullScreen?: () => void;
 }
 
 const tabToIndex = (tab?: string) => {
@@ -150,8 +148,6 @@ const Details = ({
   hoveredTaskState,
   gridScrollRef,
   ganttScrollRef,
-  isFullScreen,
-  toggleFullScreen,
 }: Props) => {
   const {
     selected: { runId, taskId, mapIndex },
@@ -241,12 +237,7 @@ const Details = ({
 
   return (
     <Flex flexDirection="column" height="100%">
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        flexWrap="wrap"
-        ml={6}
-      >
+      <Flex alignItems="center" justifyContent="space-between" flexWrap="wrap">
         <Header
           mapIndex={
             mappedTaskInstance?.renderedMapIndex || mappedTaskInstance?.mapIndex
@@ -418,8 +409,6 @@ const Details = ({
               openGroupIds={openGroupIds}
               onToggleGroups={onToggleGroups}
               hoveredTaskState={hoveredTaskState}
-              isFullScreen={isFullScreen}
-              toggleFullScreen={toggleFullScreen}
             />
           </TabPanel>
           <TabPanel p={0} height="100%">
@@ -469,8 +458,6 @@ const Details = ({
                     ? undefined
                     : instance.state
                 }
-                isFullScreen={isFullScreen}
-                toggleFullScreen={toggleFullScreen}
               />
             </TabPanel>
           )}

diff --git a/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx b/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx
@@ -27,10 +27,8 @@ import {
   Icon,
   Spinner,
   Select,
-  IconButton,
 } from "@chakra-ui/react";
 import { MdWarning } from "react-icons/md";
-import { BiCollapse, BiExpand } from "react-icons/bi";
 
 import { getMetaValue } from "src/utils";
 import useTaskLog from "src/api/useTaskLog";
@@ -96,8 +94,6 @@ interface Props {
   executionDate: DagRun["executionDate"];
   tryNumber: TaskInstance["tryNumber"];
   state?: TaskInstance["state"];
-  isFullScreen?: boolean;
-  toggleFullScreen?: () => void;
 }
 
 const Logs = ({
@@ -108,8 +104,6 @@ const Logs = ({
   executionDate,
   tryNumber,
   state,
-  isFullScreen,
-  toggleFullScreen,
 }: Props) => {
   const [internalIndexes, externalIndexes] = getLinkIndexes(tryNumber);
   const [selectedTryNumber, setSelectedTryNumber] = useState<
@@ -297,19 +291,6 @@ const Logs = ({
             <LinkButton href={`${logUrl}&${params.toString()}`}>
               See More
             </LinkButton>
-            <IconButton
-              variant="ghost"
-              aria-label="Toggle full screen"
-              title="Toggle full screen"
-              onClick={toggleFullScreen}
-              icon={
-                isFullScreen ? (
-                  <BiCollapse height="24px" />
-                ) : (
-                  <BiExpand height="24px" />
-                )
-              }
-            />
           </Flex>
         </Flex>
       </Box>