feat(nms): Merging administration tools into nms

Move administration and password settings from separate tab into main UI. Signed-off-by: Thomas Schmitt <thomas.schmitt@tngtech.com>
magma · Apr 13, 2022 · 8ef614f · 8ef614f
1 parent d5b69ee
commit 8ef614f
Show file tree

Hide file tree

Showing 39 changed files with 433 additions and 757 deletions.
diff --git a/nms/jest.config.js b/nms/jest.config.js
@@ -30,8 +30,6 @@ module.exports = {
       testMatch: [
         '<rootDir>/__tests__/*.js',
         '<rootDir>/packages/**/server/**/__tests__/*.js',
-        // run app/server shared tests in both node and jsdom environments
-        '<rootDir>/packages/**/shared/**/__tests__/*.js',
       ],
       transform: {
         '^.+\\.js$': 'babel-jest',
@@ -49,8 +47,7 @@ module.exports = {
       testEnvironment: 'jsdom',
       testMatch: [
         '<rootDir>/packages/**/app/**/__tests__/*.js',
-        // run app/server shared tests in both node and jsdom environments
-        '<rootDir>/packages/**/shared/**/__tests__/*.js',
+        '<rootDir>/packages/**/fbc_js_core/**/__tests__/*.js',
       ],
       transform: {
         '^.+\\.js$': 'babel-jest',

diff --git a/...gmalte/app/components/SecuritySettings.js → ...agmalte/app/components/AccountSettings.js b/...gmalte/app/components/SecuritySettings.js → ...agmalte/app/components/AccountSettings.js
@@ -16,35 +16,42 @@
 
 import Button from '../../fbc_js_core/ui/components/design-system/Button';
 import FormGroup from '@material-ui/core/FormGroup';
-import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import React, {useContext} from 'react';
 import Text from '../../fbc_js_core/ui/components/design-system/Text';
 import TextField from '@material-ui/core/TextField';
 import axios from 'axios';
 
+import AppContext from '../../fbc_js_core/ui/context/AppContext';
+import TopBar from './TopBar';
 import {makeStyles} from '@material-ui/styles';
 import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
 import {useState} from 'react';
 
+const TITLE = 'Account Settings';
+
 const useStyles = makeStyles(theme => ({
   input: {},
   formContainer: {
     margin: theme.spacing(2),
     paddingBottom: theme.spacing(2),
   },
   paper: {
-    margin: '10px',
+    margin: theme.spacing(3),
+    padding: theme.spacing(),
   },
   formGroup: {
     marginBottom: theme.spacing(2),
   },
 }));
 
-export default function SecuritySettings() {
+export default function AccountSettings() {
   const classes = useStyles();
   const enqueueSnackbar = useEnqueueSnackbar();
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const {isOrganizations} = useContext(AppContext);
 
   const onSave = async () => {
     if (!currentPassword || !newPassword || !confirmPassword) {
@@ -73,45 +80,50 @@ export default function SecuritySettings() {
   };
 
   return (
-    <div className={classes.formContainer}>
-      <Text data-testid="change-password-title" variant="h5">
-        Change Password
-      </Text>
-      <FormGroup row className={classes.formGroup}>
-        <TextField
-          required
-          label="Current Password"
-          type="password"
-          value={currentPassword}
-          onChange={({target}) => setCurrentPassword(target.value)}
-          className={classes.input}
-        />
-      </FormGroup>
-      <FormGroup row className={classes.formGroup}>
-        <TextField
-          required
-          autoComplete="off"
-          label="New Password"
-          type="password"
-          value={newPassword}
-          onChange={({target}) => setNewPassword(target.value)}
-          className={classes.input}
-        />
-      </FormGroup>
-      <FormGroup row className={classes.formGroup}>
-        <TextField
-          required
-          autoComplete="off"
-          label="Confirm Password"
-          type="password"
-          value={confirmPassword}
-          onChange={({target}) => setConfirmPassword(target.value)}
-          className={classes.input}
-        />
-      </FormGroup>
-      <FormGroup row className={classes.formGroup}>
-        <Button onClick={onSave}>Save</Button>
-      </FormGroup>
-    </div>
+    <>
+      {!isOrganizations && <TopBar header={TITLE} tabs={[]} />}
+      <Paper className={classes.paper}>
+        <div className={classes.formContainer}>
+          <Text data-testid="change-password-title" variant="h5">
+            Change Password
+          </Text>
+          <FormGroup row className={classes.formGroup}>
+            <TextField
+              required
+              label="Current Password"
+              type="password"
+              value={currentPassword}
+              onChange={({target}) => setCurrentPassword(target.value)}
+              className={classes.input}
+            />
+          </FormGroup>
+          <FormGroup row className={classes.formGroup}>
+            <TextField
+              required
+              autoComplete="off"
+              label="New Password"
+              type="password"
+              value={newPassword}
+              onChange={({target}) => setNewPassword(target.value)}
+              className={classes.input}
+            />
+          </FormGroup>
+          <FormGroup row className={classes.formGroup}>
+            <TextField
+              required
+              autoComplete="off"
+              label="Confirm Password"
+              type="password"
+              value={confirmPassword}
+              onChange={({target}) => setConfirmPassword(target.value)}
+              className={classes.input}
+            />
+          </FormGroup>
+          <FormGroup row className={classes.formGroup}>
+            <Button onClick={onSave}>Save</Button>
+          </FormGroup>
+        </div>
+      </Paper>
+    </>
   );
 }
diff --git a/...agmalte/app/components/admin/AdminMain.js → ...lte/app/components/IndexWithoutNetwork.js b/...agmalte/app/components/admin/AdminMain.js → ...lte/app/components/IndexWithoutNetwork.js
@@ -15,39 +15,31 @@
  */
 
 import * as React from 'react';
-import AppContent from '../layout/AppContent';
-import AppContext from '../../../fbc_js_core/ui/context/AppContext';
-import AppSideBar from '../../../fbc_js_core/ui/components/layout/AppSideBar';
-
-import nullthrows from '../../../fbc_js_core/util/nullthrows';
-import {getProjectLinks} from '../../../fbc_js_core/projects/projects';
+import AccountSettings from './AccountSettings';
+import Admin from './admin/Admin';
+import AppContent from './layout/AppContent';
+import AppSideBar from '../../fbc_js_core/ui/components/layout/AppSideBar';
+import {Route, Switch} from 'react-router-dom';
 import {makeStyles} from '@material-ui/styles';
-import {useContext} from 'react';
 
 const useStyles = makeStyles(_theme => ({
   root: {
     display: 'flex',
   },
 }));
 
-type Props = {
-  navItems: () => React.Node,
-  navRoutes: () => React.Node,
-};
-
-export default function AdminMain(props: Props) {
+export default function IndexWithoutNetwork() {
   const classes = useStyles();
-  const {tabs, user, ssoEnabled} = useContext(AppContext);
 
   return (
     <div className={classes.root}>
-      <AppSideBar
-        mainItems={props.navItems()}
-        projects={getProjectLinks(tabs, user)}
-        user={nullthrows(user)}
-        showSettings={!ssoEnabled}
-      />
-      <AppContent>{props.navRoutes()}</AppContent>
+      <AppSideBar mainItems={[]} />
+      <AppContent>
+        <Switch>
+          <Route path="/admin" component={Admin} />
+          <Route path="/settings" component={AccountSettings} />
+        </Switch>
+      </AppContent>
     </div>
   );
 }
diff --git a/nms/packages/magmalte/app/components/Main.js b/nms/packages/magmalte/app/components/Main.js
@@ -14,10 +14,10 @@
  * @format
  */
 
-import Admin from './admin/Admin';
 import ApplicationMain from './ApplicationMain';
 import ErrorLayout from './main/ErrorLayout';
 import Index, {ROOT_PATHS} from './main/Index';
+import IndexWithoutNetwork from './IndexWithoutNetwork';
 import MagmaV1API from '../../generated/WebClient';
 import NetworkError from './main/NetworkError';
 import NoNetworksMessage from '../../fbc_js_core/ui/components/NoNetworksMessage';
@@ -82,12 +82,20 @@ function Main() {
   );
 }
 
+function NoNetworkFallback() {
+  return (
+    <AppContextProvider>
+      <IndexWithoutNetwork />
+    </AppContextProvider>
+  );
+}
+
 export default () => (
   <ApplicationMain>
     <Switch>
       <Route path="/nms/:networkId" component={Main} />
       <Route path="/nms" component={Main} />
-      <Route path="/admin" component={Admin} />
+      <Route component={NoNetworkFallback} />
     </Switch>
   </ApplicationMain>
 );
diff --git a/nms/packages/magmalte/app/components/NetworkSelector.js b/nms/packages/magmalte/app/components/NetworkSelector.js
@@ -46,7 +46,7 @@ const useStyles = makeStyles(_ => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: '20px',
+    marginBottom: '2px',
     border: `1px solid ${colors.primary.white}`,
     '&:hover, &$openButton': {
       border: `1px solid ${colors.secondary.dodgerBlue}`,
@@ -91,6 +91,12 @@ const useStyles = makeStyles(_ => ({
       marginBottom: '8px',
     },
   },
+  sidebarEntry: {
+    display: 'flex',
+    padding: '9px',
+    justifyContent: 'center',
+    width: '100%',
+  },
 }));
 
 const NetworkSelector = () => {
@@ -137,6 +143,7 @@ const NetworkSelector = () => {
         }}
       />
       <Popout
+        className={classes.sidebarEntry}
         open={isMenuOpen}
         content={
           <List component="nav" className={classes.networksList}>

diff --git a/nms/packages/magmalte/app/components/Settings.js b/nms/packages/magmalte/app/components/Settings.js