draft

AntaresSimulatorTeam · Feb 7, 2025 · 02b176b · 02b176b
1 parent be08fb8
commit 02b176b
Show file tree

Hide file tree

Showing 91 changed files with 773 additions and 952 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -14,14 +14,15 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@emotion/react": "11.13.3",
-    "@emotion/styled": "11.13.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@fontsource/roboto": "5.1.1",
     "@glideapps/glide-data-grid": "6.0.3",
     "@handsontable/react": "14.5.0",
-    "@mui/icons-material": "6.1.1",
-    "@mui/lab": "6.0.0-beta.10",
-    "@mui/material": "6.1.1",
-    "@mui/x-tree-view": "7.18.0",
+    "@mui/icons-material": "6.4.1",
+    "@mui/lab": "6.0.0-beta.24",
+    "@mui/material": "6.4.1",
+    "@mui/x-tree-view": "7.24.1",
     "@reduxjs/toolkit": "1.9.6",
     "axios": "1.7.7",
     "clsx": "2.1.1",

diff --git a/webapp/src/components/App/Api.tsx b/webapp/src/components/App/Api.tsx
@@ -29,9 +29,7 @@ function Api() {
       overflow="auto"
       sx={{ backgroundColor: "#eee" }}
     >
-      <Box sx={{ zIndex: 999 }}>
-        <SwaggerUI url={`${getConfig().baseUrl}${getConfig().restEndpoint}/openapi.json`} />
-      </Box>
+      <SwaggerUI url={`${getConfig().baseUrl}${getConfig().restEndpoint}/openapi.json`} />
     </Box>
   );
 }

diff --git a/webapp/src/components/App/Data/DatasetCreationDialog.tsx b/webapp/src/components/App/Data/DatasetCreationDialog.tsx
@@ -168,7 +168,6 @@ function DatasetCreationDialog(props: PropTypes) {
               boxSizing: "border-box",
               m: 2,
             }}
-            size="small"
             value={name}
             onChange={(event) => setName(event.target.value as string)}
             label={t("data.matrixName")}

diff --git a/webapp/src/components/App/Settings/General.tsx b/webapp/src/components/App/Settings/General.tsx
@@ -17,37 +17,53 @@ import Fieldset from "@/components/common/Fieldset";
 import Form from "@/components/common/Form";
 import { SUPPORTED_LANGUAGES } from "@/i18n";
 import { changeLanguage, getCurrentLanguage } from "@/utils/i18nUtils";
+import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 function General() {
   const { t } = useTranslation();
+  const { palette, setThemeMode } = useTheme();
 
   return (
     <Form
       config={{
         defaultValues: {
           lang: getCurrentLanguage(),
+          themeMode: palette.mode,
         },
       }}
       onSubmit={({ dirtyValues }) => {
+        if (dirtyValues.themeMode) {
+          setThemeMode(dirtyValues.themeMode);
+        }
+
         if (dirtyValues.lang) {
           return changeLanguage(dirtyValues.lang);
         }
       }}
     >
       {({ control }) => (
-        <Fieldset legend={t("global.language")}>
-          <SelectFE
-            name="lang"
-            control={control}
-            options={SUPPORTED_LANGUAGES.map((lang) => ({
-              label: t(`lang.${lang}`),
-              value: lang,
-            }))}
-            variant="outlined"
-            size="small"
-          />
-        </Fieldset>
+        <>
+          <Fieldset legend={t("global.language")}>
+            <SelectFE
+              name="lang"
+              control={control}
+              options={SUPPORTED_LANGUAGES.map((lang) => ({
+                label: t(`lang.${lang}`),
+                value: lang,
+              }))}
+              variant="outlined"
+            />
+          </Fieldset>
+          <Fieldset legend={t("global.theme")}>
+            <SelectFE
+              name="themeMode"
+              control={control}
+              options={["light", "dark"]}
+              variant="outlined"
+            />
+          </Fieldset>
+        </>
       )}
     </Form>
   );

diff --git a/webapp/src/components/App/Settings/Groups/dialog/GroupFormDialog/GroupForm.tsx b/webapp/src/components/App/Settings/Groups/dialog/GroupFormDialog/GroupForm.tsx
@@ -145,7 +145,7 @@ function GroupForm(props: UseFormReturnPlus) {
         {filteredAndSortedUsers.length > 0 && (
           <>
             <Box sx={{ display: "flex", alignItems: "center", mt: 2 }}>
-              <FormControl sx={{ mr: 2, flex: 1 }} size="small">
+              <FormControl sx={{ mr: 2, flex: 1 }}>
                 <InputLabel id={userLabelId}>{t("global.user")}</InputLabel>
                 <Select
                   labelId={userLabelId}
@@ -162,7 +162,6 @@ function GroupForm(props: UseFormReturnPlus) {
               </FormControl>
               <Button
                 variant="contained"
-                size="small"
                 disabled={!allowToAddPermission}
                 onClick={() => {
                   append({ user: selectedUser, type: RoleType.READER });

diff --git a/webapp/src/components/App/Settings/Tokens/dialog/TokenFormDialog/TokenForm.tsx b/webapp/src/components/App/Settings/Tokens/dialog/TokenFormDialog/TokenForm.tsx
@@ -153,7 +153,7 @@ function TokenForm(props: Props) {
           <>
             {!readOnly && (
               <Box sx={{ display: "flex", alignItems: "center", mt: 2 }}>
-                <FormControl sx={{ mr: 2, flex: 1 }} size="small">
+                <FormControl sx={{ mr: 2, flex: 1 }}>
                   <InputLabel id={groupLabelId}>{t("global.group")}</InputLabel>
                   <Select
                     labelId={groupLabelId}
@@ -170,7 +170,6 @@ function TokenForm(props: Props) {
                 </FormControl>
                 <Button
                   variant="contained"
-                  size="small"
                   disabled={!allowToAddPermission}
                   onClick={() => {
                     append({ group: selectedGroup, type: RoleType.READER });

diff --git a/webapp/src/components/App/Settings/Users/dialog/UserFormDialog/UserForm.tsx b/webapp/src/components/App/Settings/Users/dialog/UserFormDialog/UserForm.tsx
@@ -171,7 +171,7 @@ function UserForm(props: Props) {
         {filteredAndSortedGroups.length > 0 && (
           <>
             <Box sx={{ display: "flex", alignItems: "center", mt: 2 }}>
-              <FormControl sx={{ mr: 2, flex: 1 }} size="small">
+              <FormControl sx={{ mr: 2, flex: 1 }}>
                 <InputLabel id={groupLabelId}>{t("global.group")}</InputLabel>
                 <Select
                   labelId={groupLabelId}
@@ -188,7 +188,6 @@ function UserForm(props: Props) {
               </FormControl>
               <Button
                 variant="contained"
-                size="small"
                 disabled={!allowToAddPermission}
                 onClick={() => {
                   append({ group: selectedGroup, type: RoleType.READER });

diff --git a/...rc/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts b/...rc/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
@@ -14,11 +14,10 @@
 
 import { Accordion, Box, styled } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/HighlightOff";
-import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../../theme";
 
 export const ItemContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== "onTopVisible",
-})<{ onTopVisible?: boolean }>(({ theme, onTopVisible }) => ({
+})<{ onTopVisible?: boolean }>(({ onTopVisible }) => ({
   display: "flex",
   justifyContent: "center",
   zIndex: onTopVisible ? 10000 : 9999,
@@ -31,7 +30,6 @@ export const DraggableAccorderon = styled(Accordion, {
 })<{ isDragging?: boolean }>(({ theme, isDragging }) => ({
   flex: 1,
   boxSizing: "border-box",
-  backgroundColor: PAPER_BACKGROUND_NO_TRANSPARENCY,
   maxWidth: "800px",
   width: "100%",
   margin: "0 auto",

diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx
@@ -36,7 +36,6 @@ function DetailsList({ items }: Props) {
     <List
       sx={{
         width: 1,
-        backgroundColor: "#222333",
       }}
     >
       {items.map((item) => (

diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
@@ -18,7 +18,6 @@ import { convertToRaw, type ContentState, type EditorState } from "draft-js";
 import draftToHtml from "draftjs-to-html";
 import { convertFromHTML } from "draft-convert";
 import { js2xml, xml2json, type Element as XMLElement } from "xml-js";
-import theme from "../../../../../../theme";
 
 interface BlockMap {
   from: string;
@@ -567,9 +566,9 @@ export const convertSize = (bytes: number): string => {
 
 const sizeRanges = [
   { limit: 0, color: "default" }, // Size is unknown or not calculated
-  { limit: 5 * BYTES_PER_GB, color: theme.palette.success.main }, // Size is 0 to 5 GB
-  { limit: 25 * BYTES_PER_GB, color: theme.palette.warning.main }, // Size is 5 GB to 25 GB
-  { limit: Infinity, color: theme.palette.error.main }, // Size is 25 GB and above
+  { limit: 5 * BYTES_PER_GB, color: "palette.success.main" }, // Size is 0 to 5 GB
+  { limit: 25 * BYTES_PER_GB, color: "palette.warning.main" }, // Size is 5 GB to 25 GB
+  { limit: Infinity, color: "palette.error.main" }, // Size is 25 GB and above
 ];
 
 export const getColorForSize = (bytes: number): string => {

diff --git a/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx b/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
@@ -130,35 +130,23 @@ function Actions({
         />
       </Tooltip>
       {isManaged ? (
-        <Chip label={t("study.managedStudy")} variant="filled" color="info" size="small" />
+        <Chip label={t("study.managedStudy")} color="info" />
       ) : (
-        <Chip label={study.workspace} variant="filled" size="small" />
+        <Chip label={study.workspace} />
       )}
-      {study.tags?.map((tag) => <Chip key={tag} label={tag} variant="filled" size="small" />)}
+      {study.tags?.map((tag) => <Chip key={tag} label={tag} />)}
       {isExplorer && (
-        <Button
-          size="small"
-          variant="contained"
-          color="primary"
-          onClick={isArchived ? onUnarchive : onLaunch}
-        >
+        <Button variant="contained" color="primary" onClick={isArchived ? onUnarchive : onLaunch}>
           {isArchived ? t("global.unarchive") : t("global.launch")}
         </Button>
       )}
       <Divider flexItem orientation="vertical" />
       {study.type === StudyType.VARIANT && (
-        <Button
-          size="small"
-          variant="outlined"
-          color="primary"
-          onClick={onOpenCommands}
-          sx={{ minWidth: 0 }}
-        >
+        <Button variant="outlined" color="primary" onClick={onOpenCommands} sx={{ minWidth: 0 }}>
           <HistoryOutlinedIcon />
         </Button>
       )}
       <Button
-        size="small"
         variant="outlined"
         color="primary"
         sx={{ width: "auto", minWidth: 0, px: 0 }}

diff --git a/webapp/src/components/App/Singlestudy/NavHeader/index.tsx b/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
@@ -26,7 +26,7 @@ import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import { useTranslation } from "react-i18next";
 import type { StudyMetadata, VariantTree } from "../../../../common/types";
-import { STUDIES_HEIGHT_HEADER } from "../../../../theme";
+import { STUDIES_HEIGHT_HEADER } from "../../theme";
 import { archiveStudy, unarchiveStudy } from "../../../../services/api/study";
 import { deleteStudy } from "../../../../redux/ducks/studies";
 import LauncherDialog from "../../Studies/LauncherDialog";

diff --git a/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx b/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
@@ -71,13 +71,7 @@ function UpgradeDialog({ study, onClose, open }: Props) {
     >
       {({ control }) => (
         <Fieldset fullFieldWidth>
-          <SelectFE
-            name="version"
-            label="Version"
-            variant="filled"
-            options={versionOptions}
-            control={control}
-          />
+          <SelectFE name="version" label="Version" options={versionOptions} control={control} />
         </Fieldset>
       )}
     </FormDialog>

diff --git a/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx b/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
@@ -136,7 +136,6 @@ function Fields(props: Props) {
         <NumberFE
           name="firstDay"
           label={t("study.configuration.general.firstDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "lastDay",
@@ -146,7 +145,6 @@ function Fields(props: Props) {
         <NumberFE
           name="lastDay"
           label={t("study.configuration.general.lastDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "firstDay",
@@ -155,7 +153,7 @@ function Fields(props: Props) {
         />
       </Fieldset>
       <Fieldset legend={t("study.configuration.general.legend.calendar")}>
-        <StringFE name="horizon" label="Horizon" variant="filled" control={control} />
+        <StringFE name="horizon" label="Horizon" control={control} />
         <SelectFE
           name="firstMonth"
           label={t("study.configuration.general.year")}
@@ -197,7 +195,6 @@ function Fields(props: Props) {
           <NumberFE
             name="nbYears"
             label={t("study.configuration.general.nbYears")}
-            variant="filled"
             control={control}
             rules={{
               validate: handleNbYearsValidation,

diff --git a/...mponents/App/Singlestudy/explore/Configuration/General/dialogs/ScenarioPlaylistDialog.tsx b/...mponents/App/Singlestudy/explore/Configuration/General/dialogs/ScenarioPlaylistDialog.tsx
@@ -127,11 +127,7 @@ function ScenarioPlaylistDialog(props: Props) {
         response={res}
         ifFulfilled={(defaultValues) => (
           <>
-            <ButtonGroup
-              size="small"
-              disabled={isSubmitting}
-              sx={{ justifyContent: "flex-end", mb: 1 }}
-            >
+            <ButtonGroup disabled={isSubmitting} sx={{ justifyContent: "flex-end", mb: 1 }}>
               <Button color="secondary" onClick={handleUpdateStatus(R.T)}>
                 {t("study.configuration.general.mcScenarioPlaylist.action.enableAll")}
               </Button>

diff --git a/...ts/App/Singlestudy/explore/Configuration/General/dialogs/ThematicTrimmingDialog/index.tsx b/...ts/App/Singlestudy/explore/Configuration/General/dialogs/ThematicTrimmingDialog/index.tsx
@@ -124,7 +124,6 @@ function ThematicTrimmingDialog(props: Props) {
               value={search}
               onSearchValueChange={setSearch}
               onClear={() => setSearch("")}
-              size="small"
             />
             <Stack direction="row" spacing={1}>
               <Button {...commonBtnProps} onClick={handleUpdateConfig(api, R.T)}>

diff --git a/webapp/src/components/App/Singlestudy/explore/Configuration/TimeSeriesManagement/Fields.tsx b/webapp/src/components/App/Singlestudy/explore/Configuration/TimeSeriesManagement/Fields.tsx
@@ -34,7 +34,7 @@ function Fields() {
 
   return (
     <TableContainer>
-      <Table size="small" sx={{ width: "auto" }}>
+      <Table sx={{ width: "auto" }}>
         <TableHead>
           <TableRow
             sx={{
@@ -68,14 +68,12 @@ function Fields() {
                 trueText={t("study.configuration.tsManagement.status.toBeGenerated")}
                 falseText={t("study.configuration.tsManagement.status.readyMade")}
                 variant="outlined"
-                size="small"
               />
             </TableCell>
             <TableCell align="center">
               <NumberFE
                 name={"thermal.number"}
                 control={control}
-                size="small"
                 disabled={isReadyMade}
                 rules={{ validate: validateNumber({ min: 1 }) }}
                 sx={{ width: 110 }}

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Folder.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Folder.tsx
@@ -154,7 +154,6 @@ function Folder(props: DataCompProps) {
                     canEditFile(study, path) && (
                       <IconButton
                         edge="end"
-                        size="small"
                         onClick={(event) => {
                           setMenuData({
                             anchorEl: event.currentTarget,

diff --git a/...omponents/App/Singlestudy/explore/Modelization/Areas/Hydro/Allocation/AllocationField.tsx b/...omponents/App/Singlestudy/explore/Modelization/Areas/Hydro/Allocation/AllocationField.tsx
@@ -50,7 +50,6 @@ function AllocationField({ field, index, label }: Props) {
           key={field.id}
           name={`allocation.${index}.coefficient` as const}
           control={control}
-          size="small"
           rules={{ validate: validateNumber({ min: 0 }) }}
         />
       </Grid>

diff --git a/...ponents/App/Singlestudy/explore/Modelization/Areas/Hydro/Correlation/CorrelationField.tsx b/...ponents/App/Singlestudy/explore/Modelization/Areas/Hydro/Correlation/CorrelationField.tsx
@@ -56,7 +56,6 @@ function CorrelationField({ field, index, label }: Props) {
           key={field.id}
           label={t("study.modelization.hydro.correlation.coefficient")}
           name={`correlation.${index}.coefficient` as const}
-          size="small"
           control={control}
           rules={{ validate: validateNumber({ min: -100, max: 100 }) }}
           disabled={field.areaId === currentArea?.id}

diff --git a/...src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx b/...src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/InflowStructure/index.tsx
@@ -71,7 +71,6 @@ function InflowStructure() {
             },
           }}
           inputProps={{ step: 0.1 }}
-          size="small"
           sx={{ width: 180 }}
         />
       )}

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ViewMatrixButton.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/ViewMatrixButton.tsx
@@ -24,7 +24,7 @@ function ViewMatrixButton({ label, onClick }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Button variant="outlined" size="small" sx={{ mt: 3, mr: 3 }} onClick={onClick}>
+    <Button variant="outlined" sx={{ mt: 3, mr: 3 }} onClick={onClick}>
       {t(label)}
     </Button>
   );

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/Form.tsx
@@ -62,7 +62,6 @@ function Renewables() {
     <Box sx={{ display: "flex", flexDirection: "column", overflow: "auto" }}>
       <Button
         color="secondary"
-        size="small"
         onClick={() => navigate("../renewables")}
         startIcon={<ArrowBackIcon color="secondary" />}
         sx={{ alignSelf: "flex-start", mb: 1 }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,6 @@ function DetailsList({ items }: Props) { @@
         <List
           sx={{
             width: 1,
-            backgroundColor: "#222333",
           }}
         >
           {items.map((item) => (
@@ Expand Down @@