frontend use action if possible

Signed-off-by: farodin91 <[email protected]>
headlamp-k8s · Jun 18, 2024 · be965c3 · be965c3
1 parent fabaf8a
commit be965c3
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 67 deletions.
diff --git a/frontend/src/components/App/Notifications/index.tsx b/frontend/src/components/App/Notifications/index.tsx
@@ -21,7 +21,7 @@ import { useClustersConf } from '../../../lib/k8s';
 import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
 import { useTypedSelector } from '../../../redux/reducers/reducers';
-import { DateLabel } from '../../common';
+import { ActionButton, DateLabel } from '../../common';
 import Empty from '../../common/EmptyContent';
 import {
   defaultMaxNotificationsStored,
@@ -93,15 +93,11 @@ function NotificationsList(props: {
           </Grid>
           {!notification.seen && (
             <Grid item md={1}>
-              <Tooltip title={t('translation|Mark as read')}>
-                <IconButton
-                  onClick={e => notificationSeenUnseenHandler(e, notification)}
-                  aria-label={t('translation|Mark as read')}
-                  size="medium"
-                >
-                  <Icon icon="mdi:circle" color={theme.palette.error.main} height={12} width={12} />
-                </IconButton>
-              </Tooltip>
+              <ActionButton
+                description={t('translation|Mark as read')}
+                onClick={e => notificationSeenUnseenHandler(e, notification)}
+                icon="mdi:circle"
+              />
             </Grid>
           )}
           <Grid item md={12}>

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,14 @@ 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"
+          />
         </Box>
       </Box>
     ) : (
@@ -149,17 +146,15 @@ 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"
+                    />
                   </ListItemSecondaryAction>
                 )}
               </MenuItem>

diff --git a/frontend/src/components/common/Resource/RestartButton.tsx b/frontend/src/components/common/Resource/RestartButton.tsx
@@ -1,13 +1,10 @@
-import { Icon } from '@iconify/react';
 import {
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  IconButton,
-  Tooltip,
 } from '@mui/material';
 import _ from 'lodash';
 import { useState } from 'react';
@@ -21,6 +18,7 @@ import {
   HeadlampEventType,
   useEventCallback,
 } from '../../../redux/headlampEventSlice';
+import ActionButton from '../ActionButton';
 import AuthVisible from './AuthVisible';
 
 interface RestartButtonProps {
@@ -81,15 +79,13 @@ export function RestartButton(props: RestartButtonProps) {
         console.error(`Error while getting authorization for restart button in ${item}:`, err);
       }}
     >
-      <Tooltip title={t('translation|Restart') as string}>
-        <IconButton
-          aria-label={t('translation|restart')}
-          onClick={() => setOpenDialog(true)}
-          size="medium"
-        >
-          <Icon icon="mdi:restart" />
-        </IconButton>
-      </Tooltip>
+      <ActionButton
+        description={t('translation|Restart')}
+        onClick={() => {
+          setOpenDialog(true);
+        }}
+        icon="mdi:restart"
+      />
       <RestartDialog resource={item} open={openDialog} onClose={handleClose} onSave={handleSave} />
     </AuthVisible>
   );

diff --git a/frontend/src/components/common/Resource/ScaleButton.tsx b/frontend/src/components/common/Resource/ScaleButton.tsx
@@ -7,10 +7,8 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Fab from '@mui/material/Fab';
 import Grid from '@mui/material/Grid';
-import IconButton from '@mui/material/IconButton';
 import MuiInput from '@mui/material/Input';
 import { styled, useTheme } from '@mui/material/styles';
-import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
@@ -22,6 +20,7 @@ import {
   HeadlampEventType,
   useEventCallback,
 } from '../../../redux/headlampEventSlice';
+import ActionButton from '../ActionButton';
 import { LightTooltip } from '../Tooltip';
 import AuthVisible from './AuthVisible';
 
@@ -83,16 +82,13 @@ export default function ScaleButton(props: ScaleButtonProps) {
         console.error(`Error while getting authorization for scaling button in ${item}:`, err);
       }}
     >
-      <Tooltip title={t('translation|Scale') as string}>
-        <IconButton
-          aria-label={t('translation|scale')}
-          onClick={() => {
-            setOpenDialog(true);
-          }}
-        >
-          <Icon icon="mdi:content-copy" />
-        </IconButton>
-      </Tooltip>
+      <ActionButton
+        description={t('translation|Scale')}
+        onClick={() => {
+          setOpenDialog(true);
+        }}
+        icon="mdi:content-copy"
+      />
       <ScaleDialog resource={item} open={openDialog} onClose={handleClose} onSave={handleSave} />
     </AuthVisible>
   );

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,11 @@ 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"
+                  />
                   <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
                     {filteredOptions.map(option => (
                       <MenuItem onClick={() => handleClose(option)}>

diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -224,14 +224,12 @@
   "Restarted {{ itemName }}.": "{{ itemName }} neu gestartet.",
   "Failed to restart {{ itemName }}.": "Neustart von {{ itemName }} fehlgeschlagen.",
   "Restart": "Neu starten",
-  "restart": "Neustart",
   "Are you sure you want to restart {{ name }}?": "Sind Sie sicher, dass Sie {{ name }} neu starten wollen?",
   "Scaling {{ itemName }}…": "Skaliere {{ itemName }}…",
   "Cancelled scaling {{ itemName }}.": "Skalierung von {{ itemName }} abgebrochen.",
   "Scaled {{ itemName }}.": "{{ itemName }} skaliert .",
   "Failed to scale {{ itemName }}.": "Skalierung von {{ itemName }} fehlgeschlagen.",
   "Scale": "Skalieren",
-  "scale": "Skala",
   "Scale Replicas": "Scale-Replikas",
   "Current number of replicas: {{ numReplicas }}": "Aktuelle Anzahl der Replikas: {{ numReplicas }}",
   "Desired number of replicas:": "Gewünschte Anzahl von Replikas:",

diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -224,14 +224,12 @@
   "Restarted {{ itemName }}.": "Restarted {{ itemName }}.",
   "Failed to restart {{ itemName }}.": "Failed to restart {{ itemName }}.",
   "Restart": "Restart",
-  "restart": "restart",
   "Are you sure you want to restart {{ name }}?": "Are you sure you want to restart {{ name }}?",
   "Scaling {{ itemName }}…": "Scaling {{ itemName }}…",
   "Cancelled scaling {{ itemName }}.": "Cancelled scaling {{ itemName }}.",
   "Scaled {{ itemName }}.": "Scaled {{ itemName }}.",
   "Failed to scale {{ itemName }}.": "Failed to scale {{ itemName }}.",
   "Scale": "Scale",
-  "scale": "scale",
   "Scale Replicas": "Scale Replicas",
   "Current number of replicas: {{ numReplicas }}": "Current number of replicas: {{ numReplicas }}",
   "Desired number of replicas:": "Desired number of replicas:",

diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -225,14 +225,12 @@
   "Restarted {{ itemName }}.": "Se ha reiniciado {{ itemName }}.",
   "Failed to restart {{ itemName }}.": "Fallo al reiniciar {{ itemName }}.",
   "Restart": "Reiniciar",
-  "restart": "reiniciar",
   "Are you sure you want to restart {{ name }}?": "¿Está seguro de que quiere reiniciar {{ name }}?",
   "Scaling {{ itemName }}…": "Escalando {{ itemName }}…",
   "Cancelled scaling {{ itemName }}.": "Se ha cancelado la escalada de {{ itemName }}.",
   "Scaled {{ itemName }}.": "Se ha escalado {{ itemName }}.",
   "Failed to scale {{ itemName }}.": "Fallo al escalar {{ itemName }}.",
   "Scale": "Escalar",
-  "scale": "escalar",
   "Scale Replicas": "Escalar Replicas",
   "Current number of replicas: {{ numReplicas }}": "Número actual de replicas: {{ numReplicas }}",
   "Desired number of replicas:": "Número deseado de replicas:",

diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -225,14 +225,12 @@
   "Restarted {{ itemName }}.": "{{ itemName }} redémarré.",
   "Failed to restart {{ itemName }}.": "Échec du redémarrage de {{ itemName }}.",
   "Restart": "Redémarrer",
-  "restart": "redémarrer",
   "Are you sure you want to restart {{ name }}?": "Êtes-vous sûr de vouloir redémarrer {{ name }} ?",
   "Scaling {{ itemName }}…": "Mise à l'échelle {{ itemName }}…",
   "Cancelled scaling {{ itemName }}.": "Annulation de la graduation {{ itemName }}.",
   "Scaled {{ itemName }}.": "Mise à l'échelle {{ itemName }}.",
   "Failed to scale {{ itemName }}.": "Échec de la mise à l'échelle de {{ itemName }}.",
   "Scale": "Mettre à l'échelle",
-  "scale": "échelle",
   "Scale Replicas": "Répliques à l'échelle",
   "Current number of replicas: {{ numReplicas }}": "Nombre actuel de réplique(s) : {{ numReplicas }}",
   "Desired number of replicas:": "Nombre souhaité de réplique(s) :",

diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -225,14 +225,12 @@
   "Restarted {{ itemName }}.": "{{ itemName }} foi reiniciado.",
   "Failed to restart {{ itemName }}.": "Falha ao reiniciar {{ itemName }}.",
   "Restart": "Reiniciar",
-  "restart": "reiniciar",
   "Are you sure you want to restart {{ name }}?": "Tem a certeza que quer reiniciar {{ name }}?",
   "Scaling {{ itemName }}…": "A escalar {{ itemName }}…",
   "Cancelled scaling {{ itemName }}.": "Cancelada a escala de {{ itemName }}.",
   "Scaled {{ itemName }}.": "{{ itemName }} foi escalado.",
   "Failed to scale {{ itemName }}.": "Falha ao escalar {{ itemName }}.",
   "Scale": "Escalar",
-  "scale": "escalar",
   "Scale Replicas": "Escalar Replicas",
   "Current number of replicas: {{ numReplicas }}": "Número atual de replicas: {{ numReplicas }}",
   "Desired number of replicas:": "Número desejado de replicas:",