refactor(nms): move fbc lib ui (#12675)

Signed-off-by: Fritz Lehnert <13189449+Neudrino@users.noreply.github.com>

nms/.flowconfig

@@ -27,7 +27,6 @@
 [untyped]
 // TODO - fix flow error in core packages
 .*/view/alarms/legacy/Alarms/AlarmApi.js
-.*/fbc_js_core/platform_server/network/routes.js
 .*/babelRegister.js
 
 [options]
@@ -40,8 +39,8 @@ esproposal.optional_chaining=enable
 .*/node_modules/react-beautiful-dnd/.*
 .*/node_modules/express/.*
 .*/fbc_js_core/express-middleware/.*
-.*/fbc_js_core/ui/.*
 .*/fbc_js_core/util/.*
+.*/app/views/organizations/.*
 
 [lints]
 all=warn

nms/api/useMagmaAPI.js

@@ -17,7 +17,7 @@
 import MagmaV1API from '../generated/WebClient';
 
 import {useEffect, useState} from 'react';
-import {useEnqueueSnackbar} from '../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../app/hooks/useSnackbar';
 
 export default function <TParams: {...}, TResponse>(
   func: TParams => Promise<TResponse>,

nms/app/components/AccountSettings.js

@@ -14,7 +14,7 @@
  * @format
  */
 
-import AppContext from '../../fbc_js_core/ui/context/AppContext';
+import AppContext from './context/AppContext';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import React, {useContext, useState} from 'react';
@@ -24,7 +24,7 @@ import axios from 'axios';
 import {AltFormField, PasswordInput} from './FormField';
 import {List} from '@material-ui/core';
 import {makeStyles} from '@material-ui/styles';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 
 const TITLE = 'Account Settings';
 

nms/fbc_js_core/ui/components/ActionTable.js → nms/app/components/ActionTableLegacy.js

@@ -39,7 +39,7 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 import Remove from '@material-ui/icons/Remove';
 import SaveAlt from '@material-ui/icons/SaveAlt';
 import Search from '@material-ui/icons/Search';
-import Text from '../../../app/theme/design-system/Text';
+import Text from '../theme/design-system/Text';
 
 import {forwardRef} from 'react';
 import {makeStyles} from '@material-ui/styles';
@@ -167,7 +167,7 @@ function PaperComponent(props: {}) {
   return <Paper {...props} elevation={0} />;
 }
 
-export default function ActionTable<T>(props: ActionTableProps<T>) {
+export default function ActionTableLegacy<T>(props: ActionTableProps<T>) {
   const actionTableJSX = [];
   const [anchorEl, setAnchorEl] = useState(null);
   const classes = useStyles();

nms/app/components/AddGatewayDialog.js

@@ -21,7 +21,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
-import LoadingFillerBackdrop from '../../fbc_js_core/ui/components/LoadingFillerBackdrop';
+import LoadingFillerBackdrop from './LoadingFillerBackdrop';
 import MagmaV1API from '../../generated/WebClient';
 import MenuItem from '@material-ui/core/MenuItem';
 import React, {useState} from 'react';
@@ -30,7 +30,7 @@ import TextField from '@material-ui/core/TextField';
 import nullthrows from '../../shared/util/nullthrows';
 import useMagmaAPI from '../../api/useMagmaAPI';
 import {makeStyles} from '@material-ui/styles';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 import {useParams} from 'react-router-dom';
 
 const useStyles = makeStyles(() => ({

nms/fbc_js_core/ui/components/Alert/Alert.js → nms/app/components/Alert/Alert.js

@@ -22,7 +22,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import React from 'react';
-import Text from '../../../../app/theme/design-system/Text';
+import Text from '../../theme/design-system/Text';
 import {makeStyles} from '@material-ui/styles';
 
 const useStyles = makeStyles(theme => ({

nms/fbc_js_core/ui/components/layout/AppSideBar.js → nms/app/components/AppSideBar.js

@@ -14,13 +14,13 @@
  * @format
  */
 
-import ProfileButton from '../ProfileButton';
+import ProfileButton from './ProfileButton';
 import React, {useContext, useState} from 'react';
-import SidebarItem from '../SidebarItem';
-import Text from '../../../../app/theme/design-system/Text';
-import VersionContext from '../../../../app/components/context/VersionContext';
+import SidebarItem from './SidebarItem';
+import Text from '../theme/design-system/Text';
+import VersionContext from './context/VersionContext';
 import classNames from 'classnames';
-import {colors} from '../../../../app/theme/default';
+import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
 
 const useStyles = makeStyles(() => ({
@@ -94,7 +94,7 @@ const AppSideBar = (props: Props) => {
           [classes.inner]: true,
           [classes.expanded]: expanded,
         })}>
-        <div className={classes.mainItems}>
+        <div>
           {items.map(({path, label, icon}) => (
             <SidebarItem
               key={label}
@@ -105,7 +105,7 @@ const AppSideBar = (props: Props) => {
             />
           ))}
         </div>
-        <div className={classes.secondaryItems}>
+        <div>
           <ProfileButton
             expanded={expanded}
             isMenuOpen={isProfileMenuOpen}

nms/app/components/ApplicationMain.js

@@ -15,15 +15,13 @@
  */
 
 import * as React from 'react';
-import Alert from '../../fbc_js_core/ui/components/Alert/Alert';
+import Alert from './Alert/Alert';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import axios from 'axios';
-// import defaultTheme from '../../fbc_js_core/ui/theme/default';
 import defaultTheme from '../theme/default';
 import {ErrorCodes} from '../../shared/errorCodes';
 import {SnackbarProvider} from 'notistack';
-import {TopBarContextProvider} from '../../fbc_js_core/ui/components/layout/TopBarContext';
 import {useEffect, useState} from 'react';
 
 const DIALOG_MESSAGE =
@@ -78,10 +76,8 @@ const ApplicationMain = (props: Props) => {
           vertical: 'bottom',
           horizontal: 'right',
         }}>
-        <TopBarContextProvider>
-          <CssBaseline />
-          {props.children}
-        </TopBarContextProvider>
+        <CssBaseline />
+        {props.children}
       </SnackbarProvider>
       <Alert
         confirmLabel="Reload Page"

nms/app/components/DashboardAlertTable.js

@@ -26,7 +26,7 @@ import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 import Grid from '@material-ui/core/Grid';
 import InfoIcon from '@material-ui/icons/Info';
 import Link from '@material-ui/core/Link';
-import LoadingFiller from '../../fbc_js_core/ui/components/LoadingFiller';
+import LoadingFiller from './LoadingFiller';
 import MagmaV1API from '../../generated/WebClient';
 import Paper from '@material-ui/core/Paper';
 import React from 'react';

nms/app/components/DataGrid.js

@@ -113,7 +113,7 @@ function StatusIndicator(disabled: boolean, up: boolean, val: string) {
   return (
     <Grid container alignItems="center">
       <Grid item>
-        <DeviceStatusCircle isGrey={disabled} isActive={up} isFilled={true} />
+        <DeviceStatusCircle isGrey={disabled} isActive={up} />
       </Grid>
       <Grid item className={classes.dataValue}>
         {val}

nms/fbc_js_core/ui/components/auth/EditUserDialog.js → nms/app/components/EditUserDialog.js

@@ -14,7 +14,7 @@
  * @format
  */
 
-import AppContext from '../../../../fbc_js_core/ui/context/AppContext';
+import AppContext from './context/AppContext';
 import Button from '@material-ui/core/Button';
 import Checkbox from '@material-ui/core/Checkbox';
 import Dialog from '@material-ui/core/Dialog';
@@ -30,8 +30,8 @@ import MenuItem from '@material-ui/core/MenuItem';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import Select from '@material-ui/core/Select';
 import TextField from '@material-ui/core/TextField';
-import renderList from '../../../../fbc_js_core/util/renderList';
-import {UserRoles} from '../../../../shared/types';
+import renderList from '../../fbc_js_core/util/renderList';
+import {UserRoles} from '../../shared/types';
 import {makeStyles} from '@material-ui/styles';
 
 export type EditUser = {
@@ -169,7 +169,7 @@ export default function EditUserDialog(props: Props) {
             labelId="role-select-label"
             id="role-select"
             value={role}
-            onChange={({target}) => setRole(target.value)}>
+            onChange={({target}) => setRole(parseInt(target.value))}>
             <MenuItem value={UserRoles.USER}>User</MenuItem>
             <MenuItem value={UserRoles.READ_ONLY_USER}>Read Only User</MenuItem>
             <MenuItem value={UserRoles.SUPERUSER}>Super User</MenuItem>

nms/app/components/EventAlertChart.js

@@ -21,7 +21,7 @@ import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardTitleRow from './layout/CardTitleRow';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
-import LoadingFiller from '../../fbc_js_core/ui/components/LoadingFiller';
+import LoadingFiller from './LoadingFiller';
 import MagmaV1API from '../../generated/WebClient';
 import React from 'react';
 import moment from 'moment';
@@ -35,7 +35,7 @@ import {
 } from './CustomMetrics';
 import {colors} from '../theme/default';
 import {useEffect, useState} from 'react';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 import {useParams} from 'react-router-dom';
 
 type Props = {

nms/app/components/FEGServicingAccessGatewayKPIs.js

@@ -16,7 +16,7 @@
 
 import CellWifiIcon from '@material-ui/icons/CellWifi';
 import DataGrid from './DataGrid';
-import LoadingFiller from '../../fbc_js_core/ui/components/LoadingFiller';
+import LoadingFiller from './LoadingFiller';
 import MagmaV1API from '../../generated/WebClient';
 import React from 'react';
 import nullthrows from '../../shared/util/nullthrows';
@@ -29,7 +29,7 @@ import type {
 
 import {FetchGateways} from '../state/lte/EquipmentState';
 import {useEffect, useState} from 'react';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 import {useParams} from 'react-router-dom';
 
 /**

nms/app/components/GatewayCellularFields.js

@@ -31,7 +31,7 @@ import Text from '../theme/design-system/Text';
 import nullthrows from '../../shared/util/nullthrows';
 import {makeStyles} from '@material-ui/styles';
 import {toString} from './GatewayUtils';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 import {useParams} from 'react-router-dom';
 
 const useStyles = makeStyles(() => ({

nms/app/components/GatewayCommandFields.js

@@ -30,7 +30,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
-import LoadingFiller from '../../fbc_js_core/ui/components/LoadingFiller';
+import LoadingFiller from './LoadingFiller';
 import MagmaV1API from '../../generated/WebClient';
 import React from 'react';
 import Text from '../theme/design-system/Text';
@@ -41,7 +41,7 @@ import useMagmaAPI from '../../api/useMagmaAPI';
 import {AltFormField} from './FormField';
 import {makeStyles} from '@material-ui/styles';
 import {useCallback, useState} from 'react';
-import {useEnqueueSnackbar} from '../../fbc_js_core/ui/hooks/useSnackbar';
+import {useEnqueueSnackbar} from '../../app/hooks/useSnackbar';
 import {useParams} from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({

nms/app/components/Grafana.js

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import LoadingFiller from '../../fbc_js_core/ui/components/LoadingFiller';
+import LoadingFiller from './LoadingFiller';
 
 import {makeStyles} from '@material-ui/styles';
 import {useState} from 'react';

nms/app/components/IndexWithoutNetwork.js

@@ -18,7 +18,7 @@ import * as React from 'react';
 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 AppSideBar from './AppSideBar';
 import {Route, Routes} from 'react-router-dom';
 import {makeStyles} from '@material-ui/styles';
 

nms/app/components/Main.js

@@ -20,9 +20,9 @@ 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';
+import NoNetworksMessage from './NoNetworksMessage';
 import React from 'react';
-import {AppContextProvider} from '../../fbc_js_core/ui/context/AppContext';
+import {AppContextProvider} from './context/AppContext';
 import {Navigate, Route, Routes, useParams} from 'react-router-dom';
 
 import useMagmaAPI from '../../api/useMagmaAPI';

nms/app/components/NetworkSelector.js

@@ -13,7 +13,7 @@
  * @flow
  * @format
  */
-import AppContext from '../../fbc_js_core/ui/context/AppContext';
+import AppContext from '../components/context/AppContext';
 import Divider from '@material-ui/core/Divider';
 import MagmaV1API from '../../generated/WebClient';
 import MenuButton from './MenuButton';

nms/fbc_js_core/ui/components/NoNetworksMessage.js → nms/app/components/NoNetworksMessage.js

@@ -17,7 +17,7 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
 import WifiTethering from '@material-ui/icons/WifiTethering';
-import {colors} from '../../../app/theme/default';
+import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
 
 const useStyles = makeStyles(() => ({

nms/fbc_js_core/ui/components/ProfileButton.js → nms/app/components/ProfileButton.js

@@ -14,17 +14,17 @@
  * @format
  */
 
-import AppContext from '../context/AppContext';
+import AppContext from './context/AppContext';
 import Divider from '@material-ui/core/Divider';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import PersonIcon from '@material-ui/icons/Person';
 import Popout from './Popout';
 import React, {useContext} from 'react';
-import Text from '../../../app/theme/design-system/Text';
+import Text from '../theme/design-system/Text';
 import classNames from 'classnames';
-import {Events, GeneralLogger} from '../utils/Logging';
-import {colors} from '../../../app/theme/default';
+import {Events, GeneralLogger} from '../util/Logging';
+import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useNavigate, useResolvedPath} from 'react-router-dom';
 

nms/fbc_js_core/ui/components/SidebarItem.js → nms/app/components/SidebarItem.js

@@ -15,10 +15,10 @@
  */
 
 import React from 'react';
-import Text from '../../../app/theme/design-system/Text';
+import Text from '../theme/design-system/Text';
 import classNames from 'classnames';
 import {Link, useLocation, useResolvedPath} from 'react-router-dom';
-import {colors} from '../../../app/theme/default';
+import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
 
 const useStyles = makeStyles(() => ({
@@ -54,6 +54,7 @@ type Props = {
   path: string,
   label: string,
   icon: any,
+  expanded: boolean,
 };
 
 export default function SidebarItem(props: Props) {

nms/fbc_js_core/ui/components/SnackbarItem.js → nms/app/components/SnackbarItem.js

@@ -19,14 +19,14 @@ import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import CloseIcon from '@material-ui/icons/Close';
 import ErrorIcon from '@material-ui/icons/Error';
 import InfoIcon from '@material-ui/icons/Info';
-import Text from '../../../app/theme/design-system/Text';
+import Text from '../theme/design-system/Text';
 import WarningIcon from '@material-ui/icons/Warning';
 import classNames from 'classnames';
-import {colors} from '../../../app/theme/default';
+import {colors} from '../theme/default';
 import {makeStyles} from '@material-ui/styles';
 import {useSnackbar} from 'notistack';
-import {withForwardRef} from '../../../fbc_js_core/ui/components/ForwardRef';
-import type {ForwardRef} from '../../../fbc_js_core/ui/components/ForwardRef';
+import {withForwardRef} from './ForwardRef';
+import type {ForwardRef} from './ForwardRef';
 import type {Variants} from 'notistack';
 
 const useStyles = makeStyles(() => ({

nms/app/components/TopBar.js

@@ -17,7 +17,7 @@ import typeof SvgIcon from '@material-ui/core/@@SvgIcon';
 
 import AppBar from '@material-ui/core/AppBar';
 import Grid from '@material-ui/core/Grid';
-import NestedRouteLink from '../../fbc_js_core/ui/components/NestedRouteLink';
+import NestedRouteLink from './NestedRouteLink';
 import React from 'react';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';