Add a current study menu (#811)

AntaresSimulatorTeam · Apr 8, 2022 · 87948b3 · 87948b3
1 parent 06984f8
commit 87948b3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/webapp_v2/src/pages/SingleStudy/index.tsx b/webapp_v2/src/pages/SingleStudy/index.tsx
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Box, Divider } from "@mui/material";
 import debug from "debug";
+import { connect, ConnectedProps } from "react-redux";
 import { StudyMetadata, VariantTree } from "../../common/types";
 import { getStudyMetadata } from "../../services/api/study";
 import NavHeader from "../../components/singlestudy/NavHeader";
@@ -12,15 +13,26 @@ import {
 } from "../../services/api/variant";
 import TabWrapper from "../../components/singlestudy/explore/TabWrapper";
 import HomeView from "../../components/singlestudy/HomeView";
+import { viewStudy } from "../../store/study";
 
 const logError = debug("antares:singlestudy:error");
 
-interface Props {
+const mapState = () => ({});
+
+const mapDispatch = {
+  setCurrentStudy: viewStudy,
+};
+
+const connector = connect(mapState, mapDispatch);
+type PropsFromRedux = ConnectedProps<typeof connector>;
+interface OwnProps {
   isExplorer?: boolean;
 }
+type Props = PropsFromRedux & OwnProps;
 
 function SingleStudy(props: Props) {
   const { studyId } = useParams();
+  const { setCurrentStudy } = props;
   const { isExplorer } = props;
 
   const [study, setStudy] = useState<StudyMetadata>();
@@ -45,6 +57,7 @@ function SingleStudy(props: Props) {
   useEffect(() => {
     const init = async () => {
       if (studyId) {
+        setCurrentStudy(studyId);
         try {
           const tmpStudy = await getStudyMetadata(studyId, false);
           if (tmpStudy) {
@@ -108,4 +121,4 @@ SingleStudy.defaultProps = {
   isExplorer: undefined,
 };
 
-export default SingleStudy;
+export default connector(SingleStudy);
diff --git a/webapp_v2/src/pages/wrappers/MenuWrapper/index.tsx b/webapp_v2/src/pages/wrappers/MenuWrapper/index.tsx
@@ -17,6 +17,7 @@ import Divider from "@mui/material/Divider";
 import TravelExploreOutlinedIcon from "@mui/icons-material/TravelExploreOutlined";
 import ShowChartOutlinedIcon from "@mui/icons-material/ShowChartOutlined";
 import PlaylistAddCheckOutlinedIcon from "@mui/icons-material/PlaylistAddCheckOutlined";
+import CenterFocusStrongIcon from "@mui/icons-material/CenterFocusStrong";
 
 import ApiIcon from "@mui/icons-material/Api";
 import ClassOutlinedIcon from "@mui/icons-material/ClassOutlined";
@@ -45,11 +46,13 @@ interface MenuItem {
   id: string;
   link: string;
   newTab?: boolean;
+  strict?: boolean;
   icon: FunctionComponent<SvgIconProps>;
 }
 
 const mapState = (state: AppState) => ({
   extended: state.ui.menuExtended,
+  currentStudy: state.study.current,
 });
 
 const mapDispatch = {
@@ -61,13 +64,18 @@ type ReduxProps = ConnectedProps<typeof connector>;
 type PropTypes = ReduxProps;
 
 function MenuWrapper(props: PropsWithChildren<PropTypes>) {
-  const { children, extended, setExtended } = props;
+  const { children, extended, setExtended, currentStudy } = props;
   const theme = useTheme();
   const [t] = useTranslation();
   const [openLogoutModal, setOpenLogoutModal] = useState<boolean>(false);
 
-  const navigation: Array<MenuItem> = [
-    { id: "studies", link: "/studies", icon: TravelExploreOutlinedIcon },
+  let navigation: Array<MenuItem> = [
+    {
+      id: "studies",
+      link: "/studies",
+      strict: true,
+      icon: TravelExploreOutlinedIcon,
+    },
     { id: "tasks", link: "/tasks", icon: PlaylistAddCheckOutlinedIcon },
     { id: "data", link: "/data", icon: ShowChartOutlinedIcon },
     { id: "api", link: "/api", icon: ApiIcon },
@@ -86,6 +94,18 @@ function MenuWrapper(props: PropsWithChildren<PropTypes>) {
     { id: "settings", link: "/settings", icon: SettingsOutlinedIcon },
   ];
 
+  if (currentStudy) {
+    navigation = (
+      [
+        {
+          id: "studies",
+          link: `/studies/${currentStudy}`,
+          icon: CenterFocusStrongIcon,
+        },
+      ] as MenuItem[]
+    ).concat(navigation);
+  }
+
   const settings = navigation[navigation.length - 1];
 
   const drawMenuItem = (elm: MenuItem): ReactNode => (
@@ -100,6 +120,7 @@ function MenuWrapper(props: PropsWithChildren<PropTypes>) {
       ) : (
         <NavInternalLink
           to={elm.link}
+          end={elm.strict}
           style={({ isActive }) => ({
             background: isActive
               ? theme.palette.primary.outlinedHoverBackground
@@ -115,6 +136,8 @@ function MenuWrapper(props: PropsWithChildren<PropTypes>) {
     </NavListItem>
   );
 
+  const topMenuLastIndexOffset = currentStudy ? 1 : 0;
+
   return (
     <Box
       display="flex"
@@ -180,12 +203,12 @@ function MenuWrapper(props: PropsWithChildren<PropTypes>) {
         >
           <List>
             {navigation
-              .slice(0, 3)
+              .slice(0, 3 + topMenuLastIndexOffset)
               .map((elm: MenuItem, index) => drawMenuItem(elm))}
           </List>
           <List>
             {navigation
-              .slice(3, 6)
+              .slice(3 + topMenuLastIndexOffset, 6 + topMenuLastIndexOffset)
               .map((elm: MenuItem, index) => drawMenuItem(elm))}
           </List>
         </Box>