Merge remote-tracking branch 'origin/develop' into 1097

UserOfficeProject · Jul 1, 2024 · 6e34a39 · 6e34a39
2 parents 75ae9ee + 77e10af
commit 6e34a39
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 42 deletions.
diff --git a/apps/frontend/src/components/DashBoard.tsx b/apps/frontend/src/components/DashBoard.tsx
@@ -436,7 +436,7 @@ const Dashboard = () => {
             {isUserOfficer && (
               <TitledRoute
                 setHeader={setHeader}
-                title="Techniques"
+                title={i18n.format(t('Technique'), 'plural')}
                 path="/Techniques"
                 component={TechniquesPage}
               />

diff --git a/apps/frontend/src/components/menu/MenuItems.tsx b/apps/frontend/src/components/menu/MenuItems.tsx
@@ -291,7 +291,7 @@ const MenuItems = ({ currentRole, callsData }: MenuItemsProps) => {
           <ListItemIcon>
             <Science />
           </ListItemIcon>
-          <ListItemText primary="Techniques" />
+          <ListItemText primary={i18n.format(t('Technique'), 'plural')} />
         </ListItem>
       </Tooltip>
       {isFapEnabled && (

diff --git a/apps/frontend/src/components/technique/AssignInstrumentsToTechniques.tsx b/apps/frontend/src/components/technique/AssignInstrumentsToTechniques.tsx
@@ -4,7 +4,9 @@ import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { Form, Formik } from 'formik';
+import i18n from 'i18n';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import FormikUIAutocomplete from 'components/common/FormikUIAutocomplete';
 import { InstrumentFragment } from 'generated/sdk';
@@ -30,6 +32,8 @@ const AssignInstrumentsToTechniques = ({
 
   const uniqueInstrumentIds = getUniqueArray(currentlyAssignedInstrumentIds);
 
+  const { t } = useTranslation();
+
   return (
     <Container
       component="main"
@@ -82,30 +86,52 @@ const AssignInstrumentsToTechniques = ({
         {({ isSubmitting, values }): JSX.Element => (
           <Form>
             <Typography variant="h6" component="h1">
-              {`Assign instruments to technique`}
+              {'Assign ' +
+                i18n.format(
+                  i18n.format(t('instrument'), 'plural'),
+                  'lowercase'
+                ) +
+                ' to ' +
+                i18n.format(t('Technique'), 'lowercase')}
             </Typography>
 
             <Grid container spacing={3}>
               <Grid item xs={12}>
                 <FormikUIAutocomplete
                   name="selectedInstrumentIds"
-                  label="Select instruments"
+                  label={
+                    'Select ' +
+                    i18n.format(
+                      i18n.format(t('instrument'), 'plural'),
+                      'lowercase'
+                    )
+                  }
                   loading={loadingInstruments}
                   multiple={true}
                   items={instruments.map((instrument) => ({
                     value: instrument.id,
                     text: instrument.name,
                   }))}
                   disabled={isSubmitting}
-                  noOptionsText={'No Instruments'}
+                  noOptionsText={'No ' + i18n.format(t('instrument'), 'plural')}
                   data-cy="instrument-selection"
                 />
               </Grid>
             </Grid>
             {!values.selectedInstrumentIds.length && (
               <Alert severity="warning" data-cy="remove-instrument-alert">
-                {`Be aware that leaving instrument selection empty will remove
-                assigned instrument from technique.`}
+                {'Be aware that leaving the ' +
+                  i18n.format(
+                    i18n.format(t('instrument'), 'plural'),
+                    'lowercase'
+                  ) +
+                  ' selection empty will remove any assigned ' +
+                  i18n.format(
+                    i18n.format(t('instrument'), 'plural'),
+                    'lowercase'
+                  ) +
+                  ' from the ' +
+                  i18n.format(t('Technique'), 'lowercase')}
               </Alert>
             )}
             <Button

diff --git a/apps/frontend/src/components/technique/AssignedInstrumentsTable.tsx b/apps/frontend/src/components/technique/AssignedInstrumentsTable.tsx
@@ -2,6 +2,7 @@ import MaterialTable from '@material-table/core';
 import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Technique } from 'generated/sdk';
 
@@ -46,14 +47,16 @@ const AssignedInstrumentsTable = ({
 }: AssignedInstrumentsTableProps) => {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <div
       className={classes.root}
       data-cy="technique-instrument-assignments-table"
     >
       <MaterialTable
         columns={instrumentContactColumns}
-        title={`Instrument Details`}
+        title={t('instrument') + ' Details'}
         data={technique.instruments}
         options={{
           search: false,

diff --git a/apps/frontend/src/components/technique/CreateUpdateTechnique.tsx b/apps/frontend/src/components/technique/CreateUpdateTechnique.tsx
@@ -36,7 +36,7 @@ const CreateUpdateTechnique = ({
         if (technique) {
           try {
             const { updateTechnique } = await api({
-              toastSuccessMessage: t('technique') + ' updated successfully!',
+              toastSuccessMessage: t('Technique') + ' updated successfully!',
             }).updateTechnique({
               ...values,
               techniqueId: technique.id,
@@ -49,7 +49,7 @@ const CreateUpdateTechnique = ({
         } else {
           try {
             const { createTechnique } = await api({
-              toastSuccessMessage: t('technique') + ' created successfully!',
+              toastSuccessMessage: t('Technique') + ' created successfully!',
             }).createTechnique(values);
 
             close(createTechnique);
@@ -63,7 +63,7 @@ const CreateUpdateTechnique = ({
         <Form>
           <Typography variant="h6" component="h1">
             {(technique ? 'Update ' : 'Create new ') +
-              i18n.format(t('technique'), 'lowercase')}
+              i18n.format(t('Technique'), 'lowercase')}
           </Typography>
           <Field
             name="name"

diff --git a/apps/frontend/src/components/technique/TechniqueTable.tsx b/apps/frontend/src/components/technique/TechniqueTable.tsx
@@ -1,10 +1,12 @@
 import { Column } from '@material-table/core';
-import AssignmentInd from '@mui/icons-material/AssignmentInd';
 import { Dialog, DialogContent, Typography } from '@mui/material';
+import i18n from 'i18n';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useQueryParams } from 'use-query-params';
 
 import { useCheckAccess } from 'components/common/Can';
+import ScienceIcon from 'components/common/icons/ScienceIcon';
 import SuperMaterialTable, {
   DefaultQueryParams,
   UrlQueryParamsType,
@@ -22,25 +24,6 @@ import {
   UserRole,
 } from '../../generated/sdk';
 
-const columns: Column<TechniqueFragment>[] = [
-  {
-    title: 'Name',
-    field: 'name',
-  },
-  {
-    title: 'Short code',
-    field: 'shortCode',
-  },
-  {
-    title: 'Description',
-    field: 'description',
-  },
-  {
-    title: 'Instruments',
-    render: (data) => data.instruments.length,
-  },
-];
-
 const TechniqueTable = () => {
   const {
     loadingTechniques,
@@ -57,10 +40,31 @@ const TechniqueTable = () => {
   const [selectedTechnique, setSelectedTechnique] =
     useState<TechniqueFragment | null>(null);
 
+  const { t } = useTranslation();
+
+  const columns: Column<TechniqueFragment>[] = [
+    {
+      title: 'Name',
+      field: 'name',
+    },
+    {
+      title: 'Short code',
+      field: 'shortCode',
+    },
+    {
+      title: 'Description',
+      field: 'description',
+    },
+    {
+      title: i18n.format(t('instrument'), 'plural'),
+      render: (data) => data.instruments.length,
+    },
+  ];
+
   const onTechniqueDelete = async (techniqueDeletedId: number | string) => {
     try {
       await api({
-        toastSuccessMessage: 'Technique deleted successfully!',
+        toastSuccessMessage: t('Technique') + ' deleted successfully!',
       }).deleteTechnique({
         id: techniqueDeletedId as number,
       });
@@ -71,7 +75,7 @@ const TechniqueTable = () => {
     }
   };
 
-  const AssignmentIndIcon = (): JSX.Element => <AssignmentInd />;
+  const AssignmentIndIcon = (): JSX.Element => <ScienceIcon />;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function setAssigningTechniqueId(technique: TechniqueFragment): void {
@@ -86,7 +90,11 @@ const TechniqueTable = () => {
       const techniqueId = selectedTechnique.id;
       if (instruments?.length) {
         await api({
-          toastSuccessMessage: `Instrument/s assigned to the selected technique successfully!`,
+          toastSuccessMessage:
+            t('instrument') +
+            '/s assigned to the selected ' +
+            i18n.format(t('Technique'), 'lowercase') +
+            ' successfully!',
         })
           .assignInstrumentsToTechnique({
             instrumentIds: instruments.map((instrument) => instrument.id),
@@ -100,9 +108,9 @@ const TechniqueTable = () => {
                     ...techniqueItem,
                     instruments: [...techniqueItem.instruments, ...instruments],
                   };
-                } else {
-                  return techniqueItem;
                 }
+
+                return techniqueItem;
               })
             );
           });
@@ -121,7 +129,11 @@ const TechniqueTable = () => {
       const techniqueId = selectedTechnique.id;
       if (instrumentIds?.length) {
         await api({
-          toastSuccessMessage: `Instrument/s removed from selected technique successfully!`,
+          toastSuccessMessage:
+            t('instrument') +
+            '/s removed from selected ' +
+            i18n.format(t('Technique'), 'lowercase') +
+            ' successfully!',
         })
           .removeInstrumentsFromTechnique({
             instrumentIds,
@@ -138,9 +150,9 @@ const TechniqueTable = () => {
                         !instrumentIds.find((id) => id === instrument.id)
                     ),
                   };
-                } else {
-                  return techniqueItem;
                 }
+
+                return techniqueItem;
               })
             );
           });
@@ -193,15 +205,21 @@ const TechniqueTable = () => {
           }}
           title={
             <Typography variant="h6" component="h2">
-              Techniques
+              {i18n.format(t('Technique'), 'plural')}
             </Typography>
           }
           columns={columns}
           data={techniques}
           isLoading={loadingTechniques}
           detailPanel={[
             {
-              tooltip: 'Show Instruments and Permissions',
+              tooltip:
+                'Show ' +
+                i18n.format(
+                  i18n.format(t('instrument'), 'plural'),
+                  'lowercase'
+                ) +
+                ' and permissions',
               render: AssignedInstruments,
             },
           ]}
@@ -214,7 +232,12 @@ const TechniqueTable = () => {
               ? [
                   {
                     icon: AssignmentIndIcon,
-                    tooltip: 'Assign/remove instruments',
+                    tooltip:
+                      'Assign/remove ' +
+                      i18n.format(
+                        i18n.format(t('instrument'), 'plural'),
+                        'lowercase'
+                      ),
                     onClick: (_event: unknown, rowData: unknown): void =>
                       setAssigningTechniqueId(rowData as TechniqueFragment),
                   },