From 2fbffacfc84c89682017f05a32404e6a3e95170c Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Thu, 26 May 2022 13:43:27 +0200
Subject: [PATCH 1/4] Show details button and wrap on LegendRow.

---
 airflow/www/static/js/grid/Grid.jsx      |  2 --
 airflow/www/static/js/grid/LegendRow.jsx |  2 +-
 airflow/www/static/js/grid/Main.jsx      | 25 ++++++++++++------------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/airflow/www/static/js/grid/Grid.jsx b/airflow/www/static/js/grid/Grid.jsx
index 2df059dd3570a..ad8aff2a0796f 100644
--- a/airflow/www/static/js/grid/Grid.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -34,7 +34,6 @@ import ResetRoot from './ResetRoot';
 import DagRuns from './dagRuns';
 import ToggleGroups from './ToggleGroups';
 import { getMetaValue } from '../utils';
-import AutoRefresh from './AutoRefresh';
 
 const dagId = getMetaValue('dag_id');
 
@@ -85,7 +84,6 @@ const Grid = ({ isPanelOpen = false, hoveredTaskState }) => {
       minWidth={isPanelOpen && '300px'}
     >
       <Flex alignItems="center" position="sticky" top={0} left={0}>
-        <AutoRefresh />
         <ToggleGroups
           groups={groups}
           openGroupIds={openGroupIds}
diff --git a/airflow/www/static/js/grid/LegendRow.jsx b/airflow/www/static/js/grid/LegendRow.jsx
index 3193435701a96..eff503403c768 100644
--- a/airflow/www/static/js/grid/LegendRow.jsx
+++ b/airflow/www/static/js/grid/LegendRow.jsx
@@ -44,7 +44,7 @@ const StatusBadge = ({
 
 const LegendRow = ({ setHoveredTaskState }) => (
   <Flex p={4} flexWrap="wrap" justifyContent="end">
-    <HStack spacing={2}>
+    <HStack spacing={2} wrap="wrap">
       {
       Object.entries(stateColors).map(([state, stateColor]) => (
         <StatusBadge
diff --git a/airflow/www/static/js/grid/Main.jsx b/airflow/www/static/js/grid/Main.jsx
index 8668c1379d1f8..7d18119d1e17f 100644
--- a/airflow/www/static/js/grid/Main.jsx
+++ b/airflow/www/static/js/grid/Main.jsx
@@ -33,6 +33,7 @@ import useSelection from './utils/useSelection';
 import Grid from './Grid';
 import FilterBar from './FilterBar';
 import LegendRow from './LegendRow';
+import AutoRefresh from './AutoRefresh';
 
 const detailsPanelKey = 'hideDetailsPanel';
 
@@ -57,20 +58,20 @@ const Main = () => {
       <FilterBar />
       <LegendRow setHoveredTaskState={setHoveredTaskState} />
       <Divider mb={5} borderBottomWidth={2} />
-      <Flex flexDirection="row" justifyContent="space-between">
+      <Flex justifyContent="space-between" mb={2}>
+        <AutoRefresh />
+        <Button
+          onClick={toggleDetailsPanel}
+          aria-label={isOpen ? 'Show Details' : 'Hide Details'}
+          variant={isOpen ? 'solid' : 'outline'}
+        >
+          {isOpen ? 'Hide ' : 'Show '}
+          Details Panel
+        </Button>
+      </Flex>
+      <Flex justifyContent="space-between">
         <Grid isPanelOpen={isOpen} hoveredTaskState={hoveredTaskState} />
         <Box borderLeftWidth={isOpen ? 1 : 0} position="relative">
-          <Button
-            position="absolute"
-            top={0}
-            right={0}
-            onClick={toggleDetailsPanel}
-            aria-label={isOpen ? 'Show Details' : 'Hide Details'}
-            variant={isOpen ? 'solid' : 'outline'}
-          >
-            {isOpen ? 'Hide ' : 'Show '}
-            Details Panel
-          </Button>
           {isOpen && (<Details />)}
         </Box>
       </Flex>

From e5df850c75541d5395058aa6cbba365b5f9dbcfe Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Thu, 26 May 2022 17:18:04 +0200
Subject: [PATCH 2/4] Update following brent review

---
 airflow/www/static/js/grid/Grid.jsx | 37 ++++++++++++++++++++++-------
 airflow/www/static/js/grid/Main.jsx | 21 +++++-----------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/airflow/www/static/js/grid/Grid.jsx b/airflow/www/static/js/grid/Grid.jsx
index ad8aff2a0796f..56bdc7d8f21c0 100644
--- a/airflow/www/static/js/grid/Grid.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -26,6 +26,7 @@ import {
   Box,
   Thead,
   Flex,
+  Button,
 } from '@chakra-ui/react';
 
 import { useGridData } from './api';
@@ -34,10 +35,11 @@ import ResetRoot from './ResetRoot';
 import DagRuns from './dagRuns';
 import ToggleGroups from './ToggleGroups';
 import { getMetaValue } from '../utils';
+import AutoRefresh from './AutoRefresh';
 
 const dagId = getMetaValue('dag_id');
 
-const Grid = ({ isPanelOpen = false, hoveredTaskState }) => {
+const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
   const scrollRef = useRef();
   const tableRef = useRef();
 
@@ -83,13 +85,32 @@ const Grid = ({ isPanelOpen = false, hoveredTaskState }) => {
       flexGrow={1}
       minWidth={isPanelOpen && '300px'}
     >
-      <Flex alignItems="center" position="sticky" top={0} left={0}>
-        <ToggleGroups
-          groups={groups}
-          openGroupIds={openGroupIds}
-          onToggleGroups={onToggleGroups}
-        />
-        <ResetRoot />
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        position="sticky"
+        top={0}
+        left={0}
+        mb={2}
+        p={1}
+      >
+        <Flex alignItems="center">
+          <AutoRefresh />
+          <ToggleGroups
+            groups={groups}
+            openGroupIds={openGroupIds}
+            onToggleGroups={onToggleGroups}
+          />
+          <ResetRoot />
+        </Flex>
+        <Button
+          onClick={onPanelToggle}
+          aria-label={isPanelOpen ? 'Show Details' : 'Hide Details'}
+          variant={isPanelOpen ? 'solid' : 'outline'}
+        >
+          {isPanelOpen ? 'Hide ' : 'Show '}
+          Details Panel
+        </Button>
       </Flex>
       <Table>
         <Thead display="block" pr="10px" position="sticky" top={0} zIndex={2} bg="white">
diff --git a/airflow/www/static/js/grid/Main.jsx b/airflow/www/static/js/grid/Main.jsx
index 7d18119d1e17f..98aa360aa6789 100644
--- a/airflow/www/static/js/grid/Main.jsx
+++ b/airflow/www/static/js/grid/Main.jsx
@@ -24,7 +24,6 @@ import {
   Box,
   Flex,
   useDisclosure,
-  Button,
   Divider,
 } from '@chakra-ui/react';
 
@@ -33,7 +32,6 @@ import useSelection from './utils/useSelection';
 import Grid from './Grid';
 import FilterBar from './FilterBar';
 import LegendRow from './LegendRow';
-import AutoRefresh from './AutoRefresh';
 
 const detailsPanelKey = 'hideDetailsPanel';
 
@@ -43,7 +41,7 @@ const Main = () => {
   const { clearSelection } = useSelection();
   const [hoveredTaskState, setHoveredTaskState] = useState();
 
-  const toggleDetailsPanel = () => {
+  const onPanelToggle = () => {
     if (!isOpen) {
       localStorage.setItem(detailsPanelKey, false);
     } else {
@@ -58,19 +56,12 @@ const Main = () => {
       <FilterBar />
       <LegendRow setHoveredTaskState={setHoveredTaskState} />
       <Divider mb={5} borderBottomWidth={2} />
-      <Flex justifyContent="space-between" mb={2}>
-        <AutoRefresh />
-        <Button
-          onClick={toggleDetailsPanel}
-          aria-label={isOpen ? 'Show Details' : 'Hide Details'}
-          variant={isOpen ? 'solid' : 'outline'}
-        >
-          {isOpen ? 'Hide ' : 'Show '}
-          Details Panel
-        </Button>
-      </Flex>
       <Flex justifyContent="space-between">
-        <Grid isPanelOpen={isOpen} hoveredTaskState={hoveredTaskState} />
+        <Grid
+          isPanelOpen={isOpen}
+          onPanelToggle={onPanelToggle}
+          hoveredTaskState={hoveredTaskState}
+        />
         <Box borderLeftWidth={isOpen ? 1 : 0} position="relative">
           {isOpen && (<Details />)}
         </Box>

From ae79fbaee4ff41d0e31a0e8e27ced8463a871a72 Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Thu, 26 May 2022 18:10:48 +0200
Subject: [PATCH 3/4] Fix display on small width

---
 airflow/www/static/js/grid/AutoRefresh.jsx |  8 +++++++-
 airflow/www/static/js/grid/Grid.jsx        | 16 ++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/airflow/www/static/js/grid/AutoRefresh.jsx b/airflow/www/static/js/grid/AutoRefresh.jsx
index d92cf07838045..b7c1c29206095 100644
--- a/airflow/www/static/js/grid/AutoRefresh.jsx
+++ b/airflow/www/static/js/grid/AutoRefresh.jsx
@@ -33,7 +33,13 @@ const AutoRefresh = () => {
   return (
     <FormControl display="flex" width="auto" mr={2}>
       <Spinner color="blue.500" speed="1s" mr="4px" visibility={isRefreshOn ? 'visible' : 'hidden'} />
-      <FormLabel htmlFor="auto-refresh" mb={0} fontWeight="normal">
+      <FormLabel
+        htmlFor="auto-refresh"
+        mb={0}
+        fontWeight="normal"
+        display="flex"
+        alignItems="center"
+      >
         Auto-refresh
       </FormLabel>
       <Switch
diff --git a/airflow/www/static/js/grid/Grid.jsx b/airflow/www/static/js/grid/Grid.jsx
index 56bdc7d8f21c0..825ef788cc91b 100644
--- a/airflow/www/static/js/grid/Grid.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -26,9 +26,10 @@ import {
   Box,
   Thead,
   Flex,
-  Button,
+  IconButton,
 } from '@chakra-ui/react';
 
+import { MdReadMore } from 'react-icons/md';
 import { useGridData } from './api';
 import renderTaskRows from './renderTaskRows';
 import ResetRoot from './ResetRoot';
@@ -83,7 +84,7 @@ const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
       overflow="auto"
       ref={scrollRef}
       flexGrow={1}
-      minWidth={isPanelOpen && '300px'}
+      minWidth={isPanelOpen && '350px'}
     >
       <Flex
         alignItems="center"
@@ -103,14 +104,13 @@ const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
           />
           <ResetRoot />
         </Flex>
-        <Button
+        <IconButton
+          fontSize="2xl"
           onClick={onPanelToggle}
+          title={`${isPanelOpen ? 'Hide ' : 'Show '} Details Panel`}
           aria-label={isPanelOpen ? 'Show Details' : 'Hide Details'}
-          variant={isPanelOpen ? 'solid' : 'outline'}
-        >
-          {isPanelOpen ? 'Hide ' : 'Show '}
-          Details Panel
-        </Button>
+          icon={<MdReadMore />}
+        />
       </Flex>
       <Table>
         <Thead display="block" pr="10px" position="sticky" top={0} zIndex={2} bg="white">

From 57e1cff9c9e7a8f9e44f870c516a495220139cd1 Mon Sep 17 00:00:00 2001
From: pierrejeambrun <pierrejbrun@gmail.com>
Date: Thu, 26 May 2022 18:48:56 +0200
Subject: [PATCH 4/4] Rotate icon for a 'ReadLess' effect

---
 airflow/www/static/js/grid/Grid.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airflow/www/static/js/grid/Grid.jsx b/airflow/www/static/js/grid/Grid.jsx
index 825ef788cc91b..9bb510778a6fe 100644
--- a/airflow/www/static/js/grid/Grid.jsx
+++ b/airflow/www/static/js/grid/Grid.jsx
@@ -110,6 +110,8 @@ const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
           title={`${isPanelOpen ? 'Hide ' : 'Show '} Details Panel`}
           aria-label={isPanelOpen ? 'Show Details' : 'Hide Details'}
           icon={<MdReadMore />}
+          transform={!isPanelOpen && 'rotateZ(180deg)'}
+          transitionProperty="none"
         />
       </Flex>
       <Table>