frontend: Replace use of Tooltip+IconButton by ActionButton

headlamp-k8s · Jan 3, 2025 · 7d83542 · 7d83542
1 parent fe2966a
commit 7d83542
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 50 deletions.
diff --git a/frontend/src/components/App/Settings/AllowedNamespaces.tsx b/frontend/src/components/App/Settings/AllowedNamespaces.tsx
@@ -1,8 +1,8 @@
-import { InlineIcon } from '@iconify/react';
-import { Box, Chip, IconButton, TextField, useTheme } from '@mui/material';
+import { Box, Chip, TextField, useTheme } from '@mui/material';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ClusterSettings } from '../../../helpers';
+import { ActionButton } from '../../common';
 import { isValidNamespaceFormat } from './DefaultNamespace';
 
 interface AllowedNamespacesProps {
@@ -55,16 +55,14 @@ export default function AllowedNamespaces(props: AllowedNamespacesProps) {
         }}
         InputProps={{
           endAdornment: (
-            <IconButton
+            <ActionButton
+              description={t('translation|Add namespace')}
               onClick={() => {
                 storeNewAllowedNamespace(newAllowedNamespace);
               }}
-              disabled={!newAllowedNamespace}
-              size="medium"
-              aria-label={t('translation|Add namespace')}
-            >
-              <InlineIcon icon="mdi:plus-circle" />
-            </IconButton>
+              icon="mdi:plus-circle"
+              iconButtonProps={{ size: 'medium', disabled: !newAllowedNamespace }}
+            />
           ),
           onKeyPress: event => {
             if (event.key === 'Enter') {

diff --git a/frontend/src/components/App/Settings/NumRowsInput.tsx b/frontend/src/components/App/Settings/NumRowsInput.tsx
@@ -1,9 +1,7 @@
-import { Icon } from '@iconify/react';
 import {
   Box,
   Button,
   FormControl,
-  IconButton,
   ListItemSecondaryAction,
   ListItemText,
   MenuItem,
@@ -16,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import helpers from '../../../helpers';
 import { defaultTableRowsPerPageOptions, setAppSettings } from '../../../redux/configSlice';
+import { ActionButton } from '../../common';
 
 export default function NumRowsInput(props: { defaultValue: number[] }) {
   const { t } = useTranslation(['frequent', 'settings']);
@@ -119,16 +118,15 @@ export default function NumRowsInput(props: { defaultValue: number[] }) {
           >
             {t('translation|Apply')}
           </Button>
-          <IconButton
-            aria-label={t('translation|Delete')}
+          <ActionButton
+            description={t('translation|Delete')}
             onClick={() => {
               setOptions(defaultTableRowsPerPageOptions);
               setSelectedValue(defaultTableRowsPerPageOptions[0]);
             }}
-            size="medium"
-          >
-            <Icon icon="mdi:delete" />
-          </IconButton>
+            icon="mdi:delete"
+            iconButtonProps={{ size: 'medium' }}
+          />
         </Box>
       </Box>
     ) : (
@@ -149,17 +147,16 @@ export default function NumRowsInput(props: { defaultValue: number[] }) {
                 <ListItemText primary={option} />
                 {isCustom && (
                   <ListItemSecondaryAction>
-                    <IconButton
-                      size="small"
-                      aria-label={t('translation|Delete')}
+                    <ActionButton
+                      description={t('translation|Delete')}
                       onClick={() => {
                         setOptions(defaultTableRowsPerPageOptions);
                         setSelectedValue(defaultTableRowsPerPageOptions[0]);
                         setIsSelectOpen(false);
                       }}
-                    >
-                      <Icon icon="mdi:delete" />
-                    </IconButton>
+                      icon="mdi:delete"
+                      iconButtonProps={{ size: 'small' }}
+                    />
                   </ListItemSecondaryAction>
                 )}
               </MenuItem>

diff --git a/frontend/src/components/cluster/Chooser.tsx b/frontend/src/components/cluster/Chooser.tsx
@@ -1,5 +1,5 @@
-import { Icon, InlineIcon } from '@iconify/react';
-import { DialogActions, IconButton } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { DialogActions } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -300,16 +300,15 @@ export function ClusterDialog(props: ClusterDialogProps) {
         }}
         buttons={[
           showInfoButton && (
-            <IconButton
-              aria-label={t('Show build information')}
+            <ActionButton
+              description={t('Show build information')}
               onClick={() => {
                 handleClose();
                 dispatch(setVersionDialogOpen(true));
               }}
-              size="small"
-            >
-              <InlineIcon icon={'mdi:information-outline'} />
-            </IconButton>
+              icon={'mdi:information-outline'}
+              iconButtonProps={{ size: 'small' }}
+            />
           ),
         ]}
       >

diff --git a/frontend/src/components/common/ActionMenuItem/index.tsx b/frontend/src/components/common/ActionMenuItem/index.tsx
@@ -0,0 +1,3 @@
+export * from './ActionButton';
+import ActionButton from './ActionButton';
+export default ActionButton;
diff --git a/frontend/src/components/common/Resource/Resource.tsx b/frontend/src/components/common/Resource/Resource.tsx
@@ -4,7 +4,6 @@ import { InputLabel } from '@mui/material';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Grid, { GridProps, GridSize } from '@mui/material/Grid';
-import IconButton from '@mui/material/IconButton';
 import Input, { InputProps } from '@mui/material/Input';
 import Paper from '@mui/material/Paper';
 import { BaseTextFieldProps } from '@mui/material/TextField';
@@ -38,7 +37,7 @@ import {
   DetailsViewSection,
 } from '../../DetailsViewSection/detailsViewSectionSlice';
 import { PodListProps, PodListRenderer } from '../../pod/List';
-import { LightTooltip, Loader, ObjectEventList } from '..';
+import { ActionButton, LightTooltip, Loader, ObjectEventList } from '..';
 import BackLink from '../BackLink';
 import Empty from '../EmptyContent';
 import ErrorBoundary from '../ErrorBoundary';
@@ -473,15 +472,12 @@ export function SecretField(props: InputProps) {
   return (
     <Grid container alignItems="stretch" spacing={2}>
       <Grid item>
-        <IconButton
-          edge="end"
-          aria-label={t('toggle field visibility')}
+        <ActionButton
+          description={t('toggle field visibility')}
           onClick={handleClickShowPassword}
-          onMouseDown={event => event.preventDefault()}
-          size="medium"
-        >
-          <Icon icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'} />
-        </IconButton>
+          icon={showPassword ? 'mdi:eye-off' : 'mdi:eye'}
+          iconButtonProps={{ size: 'medium' }}
+        />
       </Grid>
       <Grid item xs>
         <Input

diff --git a/frontend/src/components/portforward/index.tsx b/frontend/src/components/portforward/index.tsx
@@ -1,5 +1,5 @@
-import { Icon, InlineIcon } from '@iconify/react';
-import { Box, IconButton, Menu, MenuItem } from '@mui/material';
+import { InlineIcon } from '@iconify/react';
+import { Box, Menu, MenuItem } from '@mui/material';
 import MuiLink from '@mui/material/Link';
 import { useTheme } from '@mui/system';
 import { useSnackbar } from 'notistack';
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import helpers from '../../helpers';
 import { listPortForward, startPortForward, stopOrDeletePortForward } from '../../lib/k8s/apiProxy';
 import { getCluster } from '../../lib/util';
-import { Link, Loader, SectionBox, SimpleTable, StatusLabel } from '../common';
+import { ActionButton, Link, Loader, SectionBox, SimpleTable, StatusLabel } from '../common';
 import {
   PORT_FORWARD_RUNNING_STATUS,
   PORT_FORWARD_STOP_STATUS,
@@ -261,13 +261,12 @@ export default function PortForwardingList() {
               });
               return (
                 <>
-                  <IconButton
-                    aria-label={t('translation|More')}
+                  <ActionButton
+                    description={t('translation|More')}
                     onClick={e => handleClick(e, portforward)}
-                    size="medium"
-                  >
-                    <Icon icon={'mdi:dots-vertical'} />
-                  </IconButton>
+                    icon="mdi:dots-vertical"
+                    iconButtonProps={{ size: 'medium' }}
+                  />
                   <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                     {filteredOptions.map(option => (
                       <MenuItem onClick={() => handleClose(option)}>