[airflow] branch grid-list-mapped-tis updated: Switch to icon buttons

[bb...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch grid-list-mapped-tis
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/grid-list-mapped-tis by this push:
     new d829787  Switch to icon buttons
d829787 is described below

commit d829787e54f5e4cfd933f1b29d7049db15940411
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Fri Apr 1 11:54:21 2022 -0400

    Switch to icon buttons
---
 .../tree/details/content/taskInstance/MappedInstances.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
index 70bbda0..95bf074 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/MappedInstances.jsx
@@ -23,9 +23,12 @@ import {
   Text,
   Box,
   Link,
-  Button,
+  IconButton,
 } from '@chakra-ui/react';
 import { snakeCase } from 'lodash';
+import { FaMicroscope } from 'react-icons/fa';
+import { GiLog } from 'react-icons/gi';
+import { HiTemplate } from 'react-icons/hi';
 
 import { getMetaValue } from '../../../../utils';
 import { formatDateTime, formatDuration } from '../../../../datetime_utils';
@@ -37,6 +40,10 @@ const renderedTemplatesUrl = getMetaValue('rendered_templates_url');
 const logUrl = getMetaValue('log_url');
 const taskUrl = getMetaValue('task_url');
 
+const IconLink = (props) => (
+  <IconButton as={Link} variant="outline" colorScheme="blue" {...props} />
+);
+
 const MappedInstances = ({
   dagId, runId, taskId,
 }) => {
@@ -78,9 +85,9 @@ const MappedInstances = ({
         endDate: mi.endDate && formatDateTime(mi.endDate),
         links: (
           <Flex alignItems="center">
-            <Button as={Link} variant="outline" mr={1} colorScheme="blue" href={renderedLink}>Rendered</Button>
-            <Button as={Link} variant="outline" mr={1} colorScheme="blue" href={logLink}>Log</Button>
-            <Button as={Link} variant="outline" colorScheme="blue" href={detailsLink}>More Details</Button>
+            <IconLink mr={1} title="Rendered Templates" aria-label="Rendered Templates" icon={<HiTemplate />} href={renderedLink} />
+            <IconLink mr={1} title="Log" aria-label="Log" icon={<GiLog />} href={logLink} />
+            <IconLink title="Details" aria-label="Details" icon={<FaMicroscope />} href={detailsLink} />
           </Flex>
         ),
       };