fix: add tooltips to repl buttons (#34)

Tooltips help describe the functionality of the button

fix: french translation

fix: constants and translations

Author: spaenleh

src/components/layout/MiniButton.cy.tsx

@@ -13,6 +13,7 @@ describe('MiniButton.cy.ts', () => {
         id={testId}
         text={testText}
         icon={<Edit />}
+        tooltip="Test button"
         // eslint-disable-next-line no-console
         onClick={() => console.log('clicked')}
       />,
@@ -29,6 +30,7 @@ describe('MiniButton.cy.ts', () => {
         text={testText}
         icon={<Edit />}
         // eslint-disable-next-line no-console
+        tooltip="Test button"
         onClick={() => console.log('clicked')}
       />,
     );

src/components/layout/MiniButton.tsx

@@ -6,15 +6,19 @@ import {
   ButtonProps,
   CircularProgress,
   IconButton,
+  Tooltip,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 
+import { BUTTON_LOADER_SIZE } from '../../config/constants';
+
 type Props = {
   id?: string;
   dataCy?: string;
   text: string;
   icon: ReactElement;
+  tooltip: string;
   disabled?: boolean;
   isLoading?: boolean;
   color?: ButtonProps['color'];
@@ -26,6 +30,7 @@ const MiniButton: FC<Props> = ({
   dataCy,
   text,
   icon,
+  tooltip,
   disabled = false,
   isLoading = false,
   color = 'primary',
@@ -52,30 +57,38 @@ const MiniButton: FC<Props> = ({
       );
     }
     return (
-      <Button
-        data-cy={dataCy}
-        id={id}
-        disabled={disabled}
-        color={color}
-        variant="outlined"
-        startIcon={icon}
-        onClick={onClick}
-      >
-        {text}
-      </Button>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            data-cy={dataCy}
+            id={id}
+            disabled={disabled}
+            color={color}
+            variant="outlined"
+            startIcon={icon}
+            onClick={onClick}
+          >
+            {text}
+          </Button>
+        </span>
+      </Tooltip>
     );
   }
 
   return (
-    <IconButton
-      color={color}
-      disabled={disabled || isLoading}
-      data-cy={dataCy}
-      id={id}
-      onClick={onClick}
-    >
-      {isLoading ? <CircularProgress size={24} /> : icon}
-    </IconButton>
+    <Tooltip title={tooltip}>
+      <span>
+        <IconButton
+          color={color}
+          disabled={disabled || isLoading}
+          data-cy={dataCy}
+          id={id}
+          onClick={onClick}
+        >
+          {isLoading ? <CircularProgress size={BUTTON_LOADER_SIZE} /> : icon}
+        </IconButton>
+      </span>
+    </Tooltip>
   );
 };
 export default MiniButton;

src/components/repl/ReplToolbar.tsx

@@ -76,6 +76,7 @@ const ReplToolbar: FC<Props> = ({
             icon={<Save />}
             onClick={onSaveCode}
             disabled={savedStatus}
+            tooltip={t('Save Code')}
             text={savedStatus ? t('Saved') : t('Save')}
           />
           <MiniButton
@@ -85,6 +86,7 @@ const ReplToolbar: FC<Props> = ({
             icon={<PlayArrow />}
             onClick={onRunCode}
             text={t('Run')}
+            tooltip={t('Run Code')}
           />
         </Stack>
       </Stack>
@@ -101,6 +103,7 @@ const ReplToolbar: FC<Props> = ({
           icon={<Square />}
           onClick={onStopCode}
           text={t('Stop')}
+          tooltip={t('Stop Execution')}
         />
         <MiniButton
           dataCy={REPLY_CLEAR_BUTTON_CY}
@@ -114,6 +117,7 @@ const ReplToolbar: FC<Props> = ({
             />
           }
           onClick={onClearOutput}
+          tooltip={t('Clear outputs and figures')}
           text={t('Clear')}
         />
       </Stack>

src/config/constants.ts

@@ -1,4 +1,5 @@
 export const GRAASP_LOGO_HEADER_HEIGHT = 40;
+export const BUTTON_LOADER_SIZE = 24;
 
 // Admin view constants
 export const NB_COL_TABLE_VIEW_TABLE = 4;

src/langs/en.json

@@ -124,6 +124,10 @@
     "Upload Data Files": "Upload Data Files",
     "No files": "No files",
     "Supported formats": "Supported formats: {{formats}}",
-    "Pre-loaded libraries": "Pre-loaded libraries"
+    "Pre-loaded libraries": "Preloaded Libraries",
+    "Stop Execution": "Stop Execution",
+    "Clear outputs and figures": "Clear Outputs and Figures",
+    "Run Code": "Run Code",
+    "Save Code": "Save Code"
   }
 }

src/langs/fr.json

@@ -122,6 +122,10 @@
     "Data files": "Fichiers de données",
     "Upload Data Files": "Télécharger des fichiers de données",
     "No files": "Pas de fichiers",
-    "Pre-loaded libraries": "Libraries pré-chargées"
+    "Pre-loaded libraries": "Librairies pré-chargées",
+    "Stop Execution": "Arrêter l'exécution",
+    "Clear outputs and figures": "Effacer les sorties et les figures",
+    "Run Code": "Exécuter le code",
+    "Save Code": "Enregistrer le code"
   }
 }