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 6, 2022 · 5106de0 · 5106de0
1 parent f70afcd
commit 5106de0
Show file tree

Hide file tree

Showing 26 changed files with 343 additions and 717 deletions.
diff --git a/nms/packages/magmalte/.env.mock b/nms/packages/magmalte/.env.mock
@@ -1,3 +1,3 @@
 API_HOST=https://mock_server:3001
 API_CERT_FILENAME=.cache/mock_server.cert
-API_PRIVATE_KEY_FILENAME=.cache/mock_server.key
+API_PRIVATE_KEY_FILENAME=.cache/mock_server.key
diff --git a/nms/packages/magmalte/app/components/Main.js b/nms/packages/magmalte/app/components/Main.js
@@ -14,7 +14,7 @@
  * @format
  */
 
-import Admin from './admin/Admin';
+import AdminWithoutNetworks from './admin/AdminWithoutNetworks';
 import ApplicationMain from './ApplicationMain';
 import ErrorLayout from './main/ErrorLayout';
 import Index, {ROOT_PATHS} from './main/Index';
@@ -82,12 +82,20 @@ function Main() {
   );
 }
 
+function AdminFallback() {
+  return (
+    <AppContextProvider>
+      <AdminWithoutNetworks />
+    </AppContextProvider>
+  );
+}
+
 export default () => (
   <ApplicationMain>
     <Switch>
       <Route path="/nms/:networkId" component={Main} />
       <Route path="/nms" component={Main} />
-      <Route path="/admin" component={Admin} />
+      <Route path="/admin" component={AdminFallback} />
     </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}>
@@ -179,6 +186,7 @@ const NetworkSelector = () => {
         onClose={() => setIsMenuOpen(false)}>
         <Tooltip title={networkId} placement="right">
           <div
+            onClick={() => setIsMenuOpen(true)}
             className={classNames({
               [classes.button]: true,
               [classes.openButton]: isMenuOpen,

diff --git a/nms/packages/magmalte/app/components/SecuritySettings.js b/nms/packages/magmalte/app/components/SecuritySettings.js
@@ -16,6 +16,7 @@
 
 import Button from '../../fbc_js_core/ui/components/design-system/Button';
 import FormGroup from '@material-ui/core/FormGroup';
+import Paper from '@material-ui/core/Paper';
 import React from 'react';
 import Text from '../../fbc_js_core/ui/components/design-system/Text';
 import TextField from '@material-ui/core/TextField';
@@ -32,7 +33,8 @@ const useStyles = makeStyles(theme => ({
     paddingBottom: theme.spacing(2),
   },
   paper: {
-    margin: '10px',
+    margin: theme.spacing(3),
+    padding: theme.spacing(),
   },
   formGroup: {
     marginBottom: theme.spacing(2),
@@ -73,45 +75,47 @@ 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>
+    <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/nms/packages/magmalte/app/components/Settings.js b/nms/packages/magmalte/app/components/Settings.js
diff --git a/nms/packages/magmalte/app/components/__tests__/Main-test.js b/nms/packages/magmalte/app/components/__tests__/Main-test.js
@@ -33,6 +33,11 @@ jest.mock('../main/Index', () => ({
   default: () => <div>Index</div>,
 }));
 
+jest.mock('../admin/AdminWithoutNetworks', () => ({
+  __esModule: true,
+  default: () => <div>Admin</div>,
+}));
+
 const Wrapper = props => (
   <MemoryRouter initialEntries={[props.path]} initialIndex={0}>
     <AppContextProvider>{props.children}</AppContextProvider>
@@ -41,29 +46,20 @@ const Wrapper = props => (
 
 afterEach(cleanup);
 
-const testCases = [
-  {
-    section: 'nms',
-    path: '/nms/mynetwork',
-    text: 'Index',
-  },
-  {
-    section: 'admin',
-    path: '/admin/settings',
-    testId: 'change-password-title',
-  },
-];
-
-testCases.forEach(testCase => {
+describe.each`
+  path                | text       | networks
+  ${'/nms/mynetwork'} | ${'Index'} | ${['mynetwork']}
+  ${'/admin'}         | ${'Admin'} | ${[]}
+`('renders $path', ({path, text, networks}) => {
   beforeEach(() => {
-    MagmaAPIBindings.getNetworks.mockResolvedValueOnce(['mynetwork']);
+    MagmaAPIBindings.getNetworks.mockResolvedValueOnce(networks);
   });
 
   afterEach(() => {
     jest.resetAllMocks();
   });
 
-  it(`renders for ${testCase.path} path`, async () => {
+  it(`renders for ${path} path`, async () => {
     global.CONFIG = {
       appData: {
         enabledFeatures: [],
@@ -75,18 +71,14 @@ testCases.forEach(testCase => {
       MAPBOX_ACCESS_TOKEN: '',
     };
 
-    const {getByTestId, getByText} = render(
-      <Wrapper path={testCase.path}>
+    const {getByText} = render(
+      <Wrapper path={path}>
         <Main />
       </Wrapper>,
     );
 
     await wait();
 
-    if (testCase.text) {
-      expect(getByText(testCase.text)).toBeInTheDocument();
-    } else {
-      expect(getByTestId(testCase.testId)).toBeInTheDocument();
-    }
+    expect(getByText(text)).toBeInTheDocument();
   });
 });