[cleanup] Make the navbar used explicit

Views are not handling the lifecycle of their navbar and it creates numerous issues since it complexify the lifecycle of the navbars. On top of that, it degrades the user experience because everyone starts the creation of a new view by using the View component without taking into account whether it's relevant or not. Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>
eclipse-sirius · Feb 23, 2021 · abdf2bf · abdf2bf
1 parent a574cc6
commit abdf2bf
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 111 deletions.
diff --git a/frontend/src/navbar/ProjectNavbar.tsx b/frontend/src/navbar/ProjectNavbar.tsx
@@ -0,0 +1,32 @@
+/*******************************************************************************
+ * Copyright (c) 2021 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { useBranding } from 'common/BrandingContext';
+import { Logo } from 'navbar/Logo';
+import { Title } from 'navbar/Title';
+import React from 'react';
+import styles from './LoggedInNavbar.module.css';
+
+export const ProjectNavbar = () => {
+  const { productName, userStatus } = useBranding();
+  return (
+    <div className={styles.loggedInNavbar}>
+      <div className={styles.container}>
+        <div className={styles.leftArea}>
+          <Logo title="Back to all projects" />
+          <Title label={productName} />
+        </div>
+        <div className={styles.rightArea}>{userStatus}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/stories/view/ViewStory.tsx b/frontend/src/stories/view/ViewStory.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2020 Obeo.
+ * Copyright (c) 2019, 2021 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -14,7 +14,6 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Border } from 'stories/common/Border';
 import { View } from 'views/View';
-
 import styles from './ViewStory.module.css';
 
 export const ViewStory = () => {
@@ -30,16 +29,6 @@ export const ViewStory = () => {
           </MemoryRouter>
         </Border>
       </div>
-      <div className={styles.condensed}>
-        Condensed view
-        <Border>
-          <MemoryRouter>
-            <View condensed>
-              <div className={styles.placeholder}></div>
-            </View>
-          </MemoryRouter>
-        </Border>
-      </div>
     </div>
   );
 };
diff --git a/frontend/src/views/modelers/ModelersView.tsx b/frontend/src/views/modelers/ModelersView.tsx
@@ -12,6 +12,7 @@
  *******************************************************************************/
 import { useQuery } from '@apollo/client';
 import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import IconButton from '@material-ui/core/IconButton';
 import Link from '@material-ui/core/Link';
@@ -35,13 +36,14 @@ import EditIcon from '@material-ui/icons/Edit';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import PublishIcon from '@material-ui/icons/Publish';
 import { useMachine } from '@xstate/react';
+import { useBranding } from 'common/BrandingContext';
 import gql from 'graphql-tag';
 import { PublishModelerModal } from 'modals/publish-modeler/PublishModelerModal';
 import { RenameModelerModal } from 'modals/rename-modeler/RenameModelerModal';
+import { ProjectNavbar } from 'navbar/ProjectNavbar';
 import React, { useEffect } from 'react';
 import { Link as RouterLink, useParams } from 'react-router-dom';
 import { Modeler } from 'views/modelers/ModelersView.types';
-import { View } from 'views/View';
 import {
   CloseMenuEvent,
   CloseModalEvent,
@@ -71,6 +73,16 @@ const getModelersQuery = gql`
 `;
 
 const useModelersViewStyles = makeStyles((theme) => ({
+  modelersView: {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: 'min-content 1fr min-content',
+    minHeight: '100vh',
+  },
+  main: {
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+  },
   modelersViewContainer: {
     display: 'flex',
     flexDirection: 'column',
@@ -91,6 +103,7 @@ const useModelersViewStyles = makeStyles((theme) => ({
 export const ModelersView = () => {
   const classes = useModelersViewStyles();
   const { projectId } = useParams();
+  const { footer } = useBranding();
   const [{ value, context }, dispatch] = useMachine<ModelersViewContext, ModelersViewEvent>(modelersViewMachine);
   const { toast, modelersView } = value as SchemaValue;
   const { modelers, selectedModeler, menuAnchor, modalToDisplay, message } = context;
@@ -172,28 +185,36 @@ export const ModelersView = () => {
   }
 
   return (
-    <View>
-      <Grid container justify="center">
-        <Grid item xs={8}>
-          <div className={classes.modelersViewContainer}>
-            <div className={classes.header}>
-              <Typography variant="h3">Modelers</Typography>
-              <div className={classes.actions}>
-                <Button
-                  to={`/projects/${projectId}/new/modeler`}
-                  component={RouterLink}
-                  data-testid="create"
-                  color="primary"
-                  variant="contained"
-                  disabled={modelersView === 'missing'}>
-                  New
-                </Button>
-              </div>
-            </div>
-            {main}
-          </div>
-        </Grid>
-      </Grid>
+    <>
+      <div className={classes.modelersView}>
+        <ProjectNavbar />
+        <main className={classes.main}>
+          <Container maxWidth="xl">
+            <Grid container justify="center">
+              <Grid item xs={8}>
+                <div className={classes.modelersViewContainer}>
+                  <div className={classes.header}>
+                    <Typography variant="h3">Modelers</Typography>
+                    <div className={classes.actions}>
+                      <Button
+                        to={`/projects/${projectId}/new/modeler`}
+                        component={RouterLink}
+                        data-testid="create"
+                        color="primary"
+                        variant="contained"
+                        disabled={modelersView === 'missing'}>
+                        New
+                      </Button>
+                    </div>
+                  </div>
+                  {main}
+                </div>
+              </Grid>
+            </Grid>
+          </Container>
+        </main>
+        {footer}
+      </div>
       <Snackbar
         anchorOrigin={{
           vertical: 'bottom',
@@ -214,7 +235,7 @@ export const ModelersView = () => {
         }
         data-testid="error"
       />
-    </View>
+    </>
   );
 };
 

diff --git a/frontend/src/views/new-modeler/NewModelerView.tsx b/frontend/src/views/new-modeler/NewModelerView.tsx
@@ -12,18 +12,20 @@
  *******************************************************************************/
 import { useMutation } from '@apollo/client';
 import Button from '@material-ui/core/Button';
+import Container from '@material-ui/core/Container';
 import IconButton from '@material-ui/core/IconButton';
 import Snackbar from '@material-ui/core/Snackbar';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import CloseIcon from '@material-ui/icons/Close';
 import { useMachine } from '@xstate/react';
+import { useBranding } from 'common/BrandingContext';
 import { Form } from 'core/form/Form';
 import gql from 'graphql-tag';
+import { ProjectNavbar } from 'navbar/ProjectNavbar';
 import React, { useEffect } from 'react';
 import { Redirect, useParams } from 'react-router-dom';
 import { FormContainer } from 'views/FormContainer';
-import { View } from 'views/View';
 import {
   HandleChangedNameEvent,
   HandleCreateModelerEvent,
@@ -55,6 +57,16 @@ const createModelerMutation = gql`
 `;
 
 const useNewModelerViewStyles = makeStyles((theme) => ({
+  newModelerView: {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: 'min-content 1fr min-content',
+    minHeight: '100vh',
+  },
+  main: {
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+  },
   buttons: {
     display: 'flex',
     flexDirection: 'row',
@@ -64,6 +76,7 @@ const useNewModelerViewStyles = makeStyles((theme) => ({
 export const NewModelerView = () => {
   const { projectId } = useParams();
   const classes = useNewModelerViewStyles();
+  const { footer } = useBranding();
   const [{ value, context }, dispatch] = useMachine<NewModelerViewContext, NewModelerEvent>(newModelerViewMachine);
   const { newModelerView, toast } = value as SchemaValue;
   const { name, nameMessage, nameIsInvalid, message } = context;
@@ -116,32 +129,40 @@ export const NewModelerView = () => {
   }
 
   return (
-    <View condensed>
-      <FormContainer title="Create a new modeler" subtitle="Get started by creating a new modeler">
-        <Form onSubmit={onCreateNewModeler}>
-          <TextField
-            error={nameIsInvalid}
-            helperText={nameMessage}
-            label="Name"
-            name="name"
-            value={name}
-            placeholder="Enter the modeler name"
-            data-testid="name"
-            autoFocus={true}
-            onChange={onNameChange}
-          />
-          <div className={classes.buttons}>
-            <Button
-              variant="contained"
-              type="submit"
-              disabled={newModelerView !== 'valid'}
-              data-testid="create-modeler"
-              color="primary">
-              Create
-            </Button>
-          </div>
-        </Form>
-      </FormContainer>
+    <>
+      <div className={classes.newModelerView}>
+        <ProjectNavbar />
+        <main className={classes.main}>
+          <Container maxWidth="sm">
+            <FormContainer title="Create a new modeler" subtitle="Get started by creating a new modeler">
+              <Form onSubmit={onCreateNewModeler}>
+                <TextField
+                  error={nameIsInvalid}
+                  helperText={nameMessage}
+                  label="Name"
+                  name="name"
+                  value={name}
+                  placeholder="Enter the modeler name"
+                  data-testid="name"
+                  autoFocus={true}
+                  onChange={onNameChange}
+                />
+                <div className={classes.buttons}>
+                  <Button
+                    variant="contained"
+                    type="submit"
+                    disabled={newModelerView !== 'valid'}
+                    data-testid="create-modeler"
+                    color="primary">
+                    Create
+                  </Button>
+                </div>
+              </Form>
+            </FormContainer>
+          </Container>
+        </main>
+        {footer}
+      </div>
       <Snackbar
         anchorOrigin={{
           vertical: 'bottom',
@@ -162,6 +183,6 @@ export const NewModelerView = () => {
         }
         data-testid="error"
       />
-    </View>
+    </>
   );
 };