Made filters bar collapsible and add a full screen toggle (#38296)

airflow/www/static/js/dag/Main.tsx

@@ -20,15 +20,27 @@
 /* global localStorage */
 
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import { Box, Flex, Divider, Spinner, useDisclosure } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Spinner,
+  useDisclosure,
+  IconButton,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+} from "@chakra-ui/react";
 import { isEmpty, debounce } from "lodash";
+import { MdDoubleArrow } from "react-icons/md";
+import { useSearchParams } from "react-router-dom";
 
 import { useGridData } from "src/api";
 import { hoverDelay } from "src/utils";
 
 import ShortcutCheatSheet from "src/components/ShortcutCheatSheet";
 import { useKeysPress } from "src/utils/useKeysPress";
-import { useSearchParams } from "react-router-dom";
+
 import Details, { TAB_PARAM } from "./details";
 import Grid from "./grid";
 import FilterBar from "./nav/FilterBar";
@@ -68,11 +80,20 @@ const MainInContext = () => {
     isLoading,
   } = useGridData();
   const [isGridCollapsed, setIsGridCollapsed] = useState(false);
+
+  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);
@@ -182,6 +203,17 @@ const MainInContext = () => {
     onToggleShortcut
   );
 
+  const isFullScreen = isFilterCollapsed && isGridCollapsed;
+  const toggleFullScreen = () => {
+    if (!isFullScreen) {
+      setAccordionIndexes([]);
+      setIsGridCollapsed(true);
+    } else {
+      setAccordionIndexes([0]);
+      setIsGridCollapsed(false);
+    }
+  };
+
   return (
     <Box
       flex={1}
@@ -191,9 +223,30 @@ const MainInContext = () => {
       overflow="hidden"
       position="relative"
     >
-      <FilterBar />
-      <LegendRow onStatusHover={onStatusHover} onStatusLeave={onStatusLeave} />
-      <Divider mb={5} borderBottomWidth={2} />
+      <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>
+          <AccordionButton display="none" />
+          <AccordionPanel p={0}>
+            <FilterBar />
+            <LegendRow
+              onStatusHover={onStatusHover}
+              onStatusLeave={onStatusLeave}
+            />
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
       <Flex height="100%">
         {isLoading || isEmpty(groups) ? (
           <Spinner />
@@ -240,6 +293,8 @@ const MainInContext = () => {
                     hoveredTaskState={hoveredTaskState}
                     gridScrollRef={gridScrollRef}
                     ganttScrollRef={ganttScrollRef}
+                    isFullScreen={isFullScreen}
+                    toggleFullScreen={toggleFullScreen}
                   />
                 </Box>
               </>

airflow/www/static/js/dag/details/graph/index.tsx

@@ -28,7 +28,9 @@ 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";
@@ -47,11 +49,19 @@ 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 }: Props) => {
+const Graph = ({
+  openGroupIds,
+  onToggleGroups,
+  hoveredTaskState,
+  isFullScreen,
+  toggleFullScreen,
+}: Props) => {
   const graphRef = useRef(null);
   const { data } = useGraphData();
   const [arrange, setArrange] = useState(data?.arrange || "LR");
@@ -224,7 +234,15 @@ const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
             </Box>
           </Panel>
           <Background />
-          <Controls showInteractive={false} />
+          <Controls showInteractive={false}>
+            <ControlButton
+              onClick={toggleFullScreen}
+              aria-label="Toggle full screen"
+              title="Toggle full screen"
+            >
+              {isFullScreen ? <BiCollapse /> : <BiExpand />}
+            </ControlButton>
+          </Controls>
           <MiniMap
             nodeStrokeWidth={15}
             nodeStrokeColor={(props) => nodeStrokeColor(props, colors)}
@@ -238,17 +256,9 @@ const Graph = ({ openGroupIds, onToggleGroups, hoveredTaskState }: Props) => {
   );
 };
 
-const GraphWrapper = ({
-  openGroupIds,
-  onToggleGroups,
-  hoveredTaskState,
-}: Props) => (
+const GraphWrapper = (props: Props) => (
   <ReactFlowProvider>
-    <Graph
-      openGroupIds={openGroupIds}
-      onToggleGroups={onToggleGroups}
-      hoveredTaskState={hoveredTaskState}
-    />
+    <Graph {...props} />
   </ReactFlowProvider>
 );
 

airflow/www/static/js/dag/details/index.tsx

@@ -77,6 +77,8 @@ interface Props {
   hoveredTaskState?: string | null;
   gridScrollRef: React.RefObject<HTMLDivElement>;
   ganttScrollRef: React.RefObject<HTMLDivElement>;
+  isFullScreen?: boolean;
+  toggleFullScreen?: () => void;
 }
 
 const tabToIndex = (tab?: string) => {
@@ -148,6 +150,8 @@ const Details = ({
   hoveredTaskState,
   gridScrollRef,
   ganttScrollRef,
+  isFullScreen,
+  toggleFullScreen,
 }: Props) => {
   const {
     selected: { runId, taskId, mapIndex },
@@ -407,6 +411,8 @@ const Details = ({
               openGroupIds={openGroupIds}
               onToggleGroups={onToggleGroups}
               hoveredTaskState={hoveredTaskState}
+              isFullScreen={isFullScreen}
+              toggleFullScreen={toggleFullScreen}
             />
           </TabPanel>
           <TabPanel p={0} height="100%">
@@ -456,6 +462,8 @@ const Details = ({
                     ? undefined
                     : instance.state
                 }
+                isFullScreen={isFullScreen}
+                toggleFullScreen={toggleFullScreen}
               />
             </TabPanel>
           )}

airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx

@@ -27,16 +27,17 @@ 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";
 import LinkButton from "src/components/LinkButton";
 import { useTimezone } from "src/context/timezone";
 import type { Dag, DagRun, TaskInstance } from "src/types";
 import MultiSelect from "src/components/MultiSelect";
-
 import URLSearchParamsWrapper from "src/utils/URLSearchParamWrapper";
 
 import LogLink from "./LogLink";
@@ -95,6 +96,8 @@ interface Props {
   executionDate: DagRun["executionDate"];
   tryNumber: TaskInstance["tryNumber"];
   state?: TaskInstance["state"];
+  isFullScreen?: boolean;
+  toggleFullScreen?: () => void;
 }
 
 const Logs = ({
@@ -105,6 +108,8 @@ const Logs = ({
   executionDate,
   tryNumber,
   state,
+  isFullScreen,
+  toggleFullScreen,
 }: Props) => {
   const [internalIndexes, externalIndexes] = getLinkIndexes(tryNumber);
   const [selectedTryNumber, setSelectedTryNumber] = useState<
@@ -294,6 +299,19 @@ 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>

airflow/www/static/js/dag/nav/FilterBar.tsx

@@ -121,13 +121,8 @@ const FilterBar = () => {
   });
 
   return (
-    <Flex
-      backgroundColor="blackAlpha.200"
-      mt={4}
-      p={4}
-      justifyContent="space-between"
-    >
-      <Flex>
+    <Flex backgroundColor="blackAlpha.200" p={4} justifyContent="space-between">
+      <Flex ml={10}>
         <Box px={2}>
           <Input
             {...inputStyles}