feat(ui): add command details on variants commands panel

AntaresSimulatorTeam · Dec 12, 2024 · 833e8e2 · 833e8e2
1 parent 93884de
commit 833e8e2
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 37 deletions.
diff --git a/webapp/src/common/types.ts b/webapp/src/common/types.ts
@@ -306,6 +306,9 @@ export interface CommandDTO {
   id?: string;
   action: string;
   args: object;
+  version?: number;
+  user_name?: string;
+  updated_at?: string;
 }
 
 export type Components = Record<string, () => React.ReactNode>;

diff --git a/...nts/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx b/...nts/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/CommandDetails.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import { Fragment } from "react";
+import { Box, Typography, Divider, Tooltip } from "@mui/material";
+import { CommandItem } from "../../commandTypes";
+import { PersonOutlineOutlined, UpdateOutlined } from "@mui/icons-material";
+import { format, formatDistanceToNow, parseISO } from "date-fns";
+import { enUS, fr } from "date-fns/locale";
+import { useTranslation } from "react-i18next";
+import { getCurrentLanguage } from "@/utils/i18nUtils";
+
+interface Props {
+  item: CommandItem;
+}
+
+const formatDate = (dateStr: string) => {
+  const date = parseISO(dateStr);
+  return format(date, "dd/MM/yyyy HH:mm");
+};
+
+const formatDateWithLocale = (dateStr: string) => {
+  const date = parseISO(dateStr);
+  const lang = getCurrentLanguage();
+  const locale = lang.startsWith("fr") ? fr : enUS;
+
+  return formatDistanceToNow(date, {
+    addSuffix: true,
+    locale,
+  });
+};
+
+function CommandDetails({ item }: Props) {
+  const [t] = useTranslation();
+  const details = [
+    {
+      icon: <PersonOutlineOutlined sx={{ fontSize: 20 }} />,
+      text: item.user || t("global.unknown"),
+    },
+    {
+      icon: <UpdateOutlined sx={{ fontSize: 20 }} />,
+      text: item.updatedAt ? formatDate(item.updatedAt) : t("global.unknown"),
+      tooltip: item.updatedAt
+        ? formatDateWithLocale(item.updatedAt)
+        : t("global.unknown"),
+    },
+  ];
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      {details.map((detail, index) => (
+        <Fragment key={index}>
+          {index > 0 && (
+            <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+          )}
+          <Box sx={{ display: "flex", alignItems: "center", gap: "4px" }}>
+            {detail.icon}
+            {detail.tooltip ? (
+              <Tooltip title={detail.tooltip}>
+                <Typography sx={{ fontSize: "12px" }}>{detail.text}</Typography>
+              </Tooltip>
+            ) : (
+              <Typography sx={{ fontSize: "12px" }}>{detail.text}</Typography>
+            )}
+          </Box>
+        </Fragment>
+      ))}
+    </Box>
+  );
+}
+
+export default CommandDetails;
diff --git a/...c/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx b/...c/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/index.tsx
@@ -43,6 +43,7 @@ import {
   StyledDeleteIcon,
 } from "./style";
 import CommandMatrixViewer from "./CommandMatrixViewer";
+import CommandDetails from "./CommandDetails";
 
 export const Item = styled(Box)(({ theme }) => ({
   boxSizing: "border-box",
@@ -51,9 +52,6 @@ export const Item = styled(Box)(({ theme }) => ({
   justifyContent: "space-between",
   alignItems: "flex-start",
   width: "100%",
-  height: "auto",
-  userSelect: "none",
-  maxWidth: "800px",
 }));
 
 interface StyleType {
@@ -189,9 +187,8 @@ function CommandListItem({
             onClick={() => onExpanded(index, !(expandedIndex === index))}
           >
             <Info>
-              <Typography style={{ fontSize: "0.9em", color: "text.primary" }}>
-                {item.action}
-              </Typography>
+              <Typography sx={{ px: 0.5, mb: 0.5 }}>{item.action}</Typography>
+              <CommandDetails item={item} />
             </Info>
           </AccordionSummary>
           <AccordionDetails sx={{ ...detailsStyle }}>

diff --git a/...rc/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts b/...rc/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
@@ -22,6 +22,8 @@ export const ItemContainer = styled(Box, {
   display: "flex",
   justifyContent: "center",
   zIndex: onTopVisible ? 10000 : 9999,
+  width: "100%",
+  boxSizing: "border-box",
 }));
 
 export const DraggableAccorderon = styled(Accordion, {
@@ -30,6 +32,9 @@ export const DraggableAccorderon = styled(Accordion, {
   flex: 1,
   boxSizing: "border-box",
   backgroundColor: PAPER_BACKGROUND_NO_TRANSPARENCY,
+  maxWidth: "800px",
+  width: "100%",
+  margin: "0 auto",
   ...(isDragging
     ? {
         borderColor: theme.palette.secondary.main,
@@ -43,9 +48,9 @@ export const DraggableAccorderon = styled(Accordion, {
 export const StyledDeleteIcon = styled(DeleteIcon)(({ theme }) => ({
   flex: "0 0 24px",
   color: theme.palette.error.light,
-  marginLeft: theme.spacing(1),
-  marginRight: theme.spacing(1),
+  margin: theme.spacing(0, 2),
   cursor: "pointer",
+  alignSelf: "center",
   "&:hover": {
     color: theme.palette.error.main,
   },

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListView.tsx
@@ -129,9 +129,9 @@ function CommandListView({
       >
         {(provided) => (
           <FixedSizeList
-            height={500}
+            height={1000}
             itemCount={items.length}
-            itemSize={68}
+            itemSize={80}
             width={300}
             outerRef={provided.innerRef}
             ref={listRef}
@@ -149,7 +149,7 @@ function CommandListView({
             }}
             style={{
               width: "100%",
-              height: "90%",
+              height: "100%",
             }}
           >
             {Row}

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/commandTypes.ts
@@ -14,12 +14,32 @@
 
 import { CommandResultDTO } from "../../../../../common/types";
 
+interface AntaresConfig {
+  version: string;
+  caption: string;
+  created: number;
+  lastsave: number;
+  author: string;
+}
+
+interface CommandArgsData {
+  antares: AntaresConfig;
+}
+
+export interface CommandArgsDTO {
+  data: CommandArgsData;
+  target: string;
+}
+
 export interface CommandItem {
   id?: string;
   action: string;
   updated: boolean;
-  args: object;
+  args: CommandArgsDTO | object;
   results?: CommandResultDTO;
+  version?: number;
+  user?: string;
+  updatedAt?: string;
 }
 
 export interface JsonCommandItem {

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx b/webapp/src/components/App/Singlestudy/Commands/Edition/index.tsx
@@ -23,7 +23,7 @@ import BoltIcon from "@mui/icons-material/Bolt";
 import debug from "debug";
 import { AxiosError } from "axios";
 import HelpIcon from "@mui/icons-material/Help";
-import { Box, Button, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Skeleton, Tooltip, Typography } from "@mui/material";
 import { useMountedState } from "react-use";
 import { CommandItem, JsonCommandItem } from "./commandTypes";
 import CommandListView from "./DraggableCommands/CommandListView";
@@ -50,7 +50,6 @@ import { CommandResultDTO } from "../../../../../common/types";
 import CommandImportButton from "./DraggableCommands/CommandImportButton";
 import { getTask } from "../../../../../services/api/tasks";
 import { Body, EditHeader, Header, headerIconStyle, Root } from "./style";
-import SimpleLoader from "../../../../common/loaders/SimpleLoader";
 import useEnqueueErrorSnackbar from "../../../../../hooks/useEnqueueErrorSnackbar";
 import {
   addWsEventListener,
@@ -500,7 +499,7 @@ function EditionView(props: Props) {
           </Typography>
         </Header>
       )}
-      {loaded && commands.length > 0 ? (
+      {commands.length > 0 ? (
         <Body>
           <CommandListView
             items={commands}
@@ -516,18 +515,15 @@ function EditionView(props: Props) {
             onExpanded={onExpanded}
           />
         </Body>
-      ) : (
-        loaded && (
-          <Body sx={{ alignItems: "left" }}>
-            <Box height="85%">
-              <EmptyView title="variants.error.noCommands" />
-            </Box>
-          </Body>
-        )
-      )}
-      {!loaded && (
+      ) : !loaded ? (
         <Body>
-          <SimpleLoader color="" />
+          <Skeleton sx={{ width: 1, height: "80vh", transform: "none" }} />
+        </Body>
+      ) : (
+        <Body sx={{ alignItems: "left" }}>
+          <Box height="85%">
+            <EmptyView title="variants.error.noCommands" />
+          </Box>
         </Body>
       )}
       {openClearCommandsDialog && (

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/style.ts
@@ -14,26 +14,26 @@
 
 import { Box, styled } from "@mui/material";
 
-export const Root = styled(Box)(({ theme }) => ({
-  flex: 1,
+export const Root = styled(Box)(() => ({
+  width: "100%",
   height: "98%",
   display: "flex",
   flexFlow: "column nowrap",
   justifyContent: "flex-start",
   alignItems: "center",
-  overflowY: "hidden",
+  overflowY: "auto",
 }));
 
-export const Header = styled(Box)(({ theme }) => ({
-  width: "90%",
+export const Header = styled(Box)(() => ({
+  width: "95%",
   height: "80px",
   display: "flex",
   flexFlow: "row nowrap",
   justifyContent: "space-between",
   alignItems: "center",
 }));
 
-export const EditHeader = styled(Box)(({ theme }) => ({
+export const EditHeader = styled(Box)(() => ({
   flex: 1,
   display: "flex",
   flexFlow: "row nowrap",
@@ -43,10 +43,8 @@ export const EditHeader = styled(Box)(({ theme }) => ({
 
 export const Body = styled(Box)(({ theme }) => ({
   width: "100%",
-  maxHeight: "90%",
-  minHeight: "90%",
+  height: "100%",
   display: "flex",
-  flexFlow: "column nowrap",
   justifyContent: "flex-start",
   alignItems: "center",
   overflow: "auto",

diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/utils.ts
@@ -49,13 +49,15 @@ export const reorder = <T>(
 export const fromCommandDTOToCommandItem = (
   commands: CommandDTO[],
 ): CommandItem[] => {
-  const dtoItems: CommandItem[] = commands.map((elm) => ({
+  return commands.map((elm) => ({
     id: elm?.id,
     action: elm.action,
     args: elm.args,
     updated: false,
+    version: elm.version,
+    user: elm.user_name,
+    updatedAt: elm.updated_at,
   }));
-  return dtoItems;
 };
 
 export const fromCommandDTOToJsonCommand = (