Grid fix details button truncated and small UI tweaks (apache#23934)

* Show details button and wrap on LegendRow. * Update following brent review * Fix display on small width * Rotate icon for a 'ReadLess' effect
astronomer · May 26, 2022 · 5ab58d0 · 5ab58d0
1 parent 9314a4a
commit 5ab58d0
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 26 deletions.
diff --git 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
@@ -26,8 +26,10 @@ import {
   Box,
   Thead,
   Flex,
+  IconButton,
 } from '@chakra-ui/react';
 
+import { MdReadMore } from 'react-icons/md';
 import { useGridData } from './api';
 import renderTaskRows from './renderTaskRows';
 import ResetRoot from './ResetRoot';
@@ -38,7 +40,7 @@ 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();
 
@@ -82,16 +84,35 @@ const Grid = ({ isPanelOpen = false, hoveredTaskState }) => {
       overflow="auto"
       ref={scrollRef}
       flexGrow={1}
-      minWidth={isPanelOpen && '300px'}
+      minWidth={isPanelOpen && '350px'}
     >
-      <Flex alignItems="center" position="sticky" top={0} left={0}>
-        <AutoRefresh />
-        <ToggleGroups
-          groups={groups}
-          openGroupIds={openGroupIds}
-          onToggleGroups={onToggleGroups}
+      <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>
+        <IconButton
+          fontSize="2xl"
+          onClick={onPanelToggle}
+          title={`${isPanelOpen ? 'Hide ' : 'Show '} Details Panel`}
+          aria-label={isPanelOpen ? 'Show Details' : 'Hide Details'}
+          icon={<MdReadMore />}
+          transform={!isPanelOpen && 'rotateZ(180deg)'}
+          transitionProperty="none"
         />
-        <ResetRoot />
       </Flex>
       <Table>
         <Thead display="block" pr="10px" position="sticky" top={0} zIndex={2} bg="white">

diff --git 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
@@ -24,7 +24,6 @@ import {
   Box,
   Flex,
   useDisclosure,
-  Button,
   Divider,
 } from '@chakra-ui/react';
 
@@ -42,7 +41,7 @@ const Main = () => {
   const { clearSelection } = useSelection();
   const [hoveredTaskState, setHoveredTaskState] = useState();
 
-  const toggleDetailsPanel = () => {
+  const onPanelToggle = () => {
     if (!isOpen) {
       localStorage.setItem(detailsPanelKey, false);
     } else {
@@ -57,20 +56,13 @@ const Main = () => {
       <FilterBar />
       <LegendRow setHoveredTaskState={setHoveredTaskState} />
       <Divider mb={5} borderBottomWidth={2} />
-      <Flex flexDirection="row" justifyContent="space-between">
-        <Grid isPanelOpen={isOpen} hoveredTaskState={hoveredTaskState} />
+      <Flex justifyContent="space-between">
+        <Grid
+          isPanelOpen={isOpen}
+          onPanelToggle={onPanelToggle}
+          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>