Skip to content
This repository has been archived by the owner on Mar 25, 2022. It is now read-only.

Commit

Permalink
feat(fbcnms-ui): Add Organization onboarding tooltips
Browse files Browse the repository at this point in the history 
Signed-off-by: HannaFar <[email protected]>
  • Loading branch information
@HannaFar
HannaFar committed Feb 23, 2022
1 parent bfee49e commit 62c1dec
Showing 1 changed file with 140 additions and 15 deletions.
155 changes: 140 additions & 15 deletions fbcnms-packages/fbcnms-ui/master/Organizations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,26 @@ import type {UserType} from '@fbcnms/sequelize-models/models/user.js';
import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';

import ActionTable from '../components/ActionTable';
import BusinessIcon from '@material-ui/icons/Business';
import Button from '@material-ui/core/Button';
import CloseIcon from '@material-ui/icons/Close';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import LoadingFiller from '@fbcnms/ui/components/LoadingFiller';
import OrganizationDialog from './OrganizationDialog';
import Paper from '@material-ui/core/Paper';
import PersonAdd from '@material-ui/icons/PersonAdd';
import PersonIcon from '@material-ui/icons/Person';
import Popper from '@material-ui/core/Popper';
import React from 'react';
import Text from '../components/design-system/Text';
import axios from 'axios';
Expand All @@ -49,6 +55,11 @@ const useStyles = makeStyles(_ => ({
addButton: {
backgroundColor: comet,
color: white,
maxHeight: '40px',
'&:hover': {
backgroundColor: comet,
color: white,
},
},
description: {
margin: '20px 0',
Expand All @@ -58,7 +69,7 @@ const useStyles = makeStyles(_ => ({
display: 'flex',
justifyContent: 'space-between',
},
paper: {
container: {
margin: '40px 32px',
},
dialogTitle: {
Expand All @@ -82,24 +93,52 @@ const useStyles = makeStyles(_ => ({
color: comet,
},
},

subtitle: {
margin: '16px 0',
},
tooltip: {
backgroundColor: 'white',
color: 'black',
fontSize: '18px',
padding: '16px 8px',
pointerEvents: 'auto',
},
arrow: {
color: 'white',
},
paper: {
// border: '1px solid',
// padding: theme.spacing(1),
backgroundColor: '#FFFFFF',
minHeight: '56px',
display: 'flex',
alignItems: 'center',
minWidth: '350px',
padding: '16px',
},
popperHelperText: {
fontSize: '18px',
},
popperHelperSubtitle: {
maxWidth: '400px',
padding: '10px 0',
},
}));

type Props = {...WithAlert, hideAdvancedFields: boolean};

function OnboardingDialog() {
type OnboardingDialogType = {
open: boolean,
setOpen: boolean => void,
};
function OnboardingDialog(props: OnboardingDialogType) {
const classes = useStyles();
const [open, setOpen] = useState(true);
return (
<Dialog
maxWidth={'sm'}
fullWidth={true}
open={open}
open={props.open}
keepMounted
onClose={() => setOpen(false)}
onClose={() => props.setOpen(false)}
aria-describedby="alert-dialog-slide-description">
<DialogTitle classes={{root: classes.dialogTitle}}>
{'Welcome to Magma Host Portal'}
Expand All @@ -113,7 +152,7 @@ function OnboardingDialog() {
<List dense={true}>
<ListItem disableGutters>
<ListItemIcon>
<PersonIcon />
<BusinessIcon />
</ListItemIcon>
<Text variant="subtitle1">Add an organization</Text>
</ListItem>
Expand All @@ -125,7 +164,7 @@ function OnboardingDialog() {
</ListItem>
<ListItem disableGutters>
<ListItemIcon>
<PersonIcon />
<ExitToAppIcon />
</ListItemIcon>
<Text variant="subtitle1">
Log in to the organization portal with the user account you
Expand All @@ -138,7 +177,7 @@ function OnboardingDialog() {
<DialogActions classes={{root: classes.dialogActions}}>
<Button
classes={{root: classes.dialogButton}}
onClick={() => setOpen(false)}>
onClick={() => props.setOpen(false)}>
Get Started
</Button>
</DialogActions>
Expand Down Expand Up @@ -176,6 +215,12 @@ function Organizations(props: Props) {
const [showOrganizationDialog, setShowOrganizationDialog] = useState(false);
const [addUser, setAddUser] = useState(false);
const enqueueSnackbar = useEnqueueSnackbar();
const child1 = React.useRef(null);
const linkHelperRef = React.useRef(null);

const [showPopperHelper, setShowPopperHelper] = useState(true);
const [showPopperLinkHelper, setShowPopperLinkHelper] = useState(true);

const {error, isLoading} = useAxios({
url: '/master/organization/async',
onResponse: useCallback(res => {
Expand Down Expand Up @@ -228,22 +273,50 @@ function Organizations(props: Props) {
};
},
);

return (
<div className={classes.paper}>
<div className={classes.container}>
<Grid container>
<Grid container justify="space-between">
<Text variant="h3">Organizations</Text>
<Button
ref={child1}
className={classes.addButton}
variant="contained"
onClick={() => setShowOrganizationDialog(true)}>
Add Organization
onClick={() => {
setShowOrganizationDialog(true);
}}>
Add Organizations
</Button>
</Grid>
<Popper
placement={'left-start'}
open={
!showOnboardingDialog &&
!showOrganizationDialog &&
organizations.length < 2 &&
showPopperHelper
}
anchorEl={child1.current}>
<Paper elevation={2} className={classes.paper}>
{/* <div className={classes.paper}> */}
<Grid container alignContent="center" justify="space-around">
<span className={classes.popperHelperText}>
Start by adding an organization
</span>
<CloseIcon onClick={() => setShowPopperHelper(false)} />
</Grid>
{/* </div> */}
</Paper>
</Popper>

<Grid xs={12} className={classes.description}>
<Text variant="body2">{ORGANIZATION_DESCRIPTION}</Text>
</Grid>
<>{showOnboardingDialog && <OnboardingDialog />}</>
<OnboardingDialog
open={showOnboardingDialog}
setOpen={open => setShowOnboardingDialog(open)}
/>
<Grid xs={12}>
<ActionTable
data={organizationRows}
Expand All @@ -261,7 +334,24 @@ function Organizations(props: Props) {
},
{title: 'Name', field: 'name'},
{title: 'Accessible Networks', field: 'networks'},
{title: 'Link to Organization Portal', field: 'portalLink'},
{
title: 'Link to Organization Portal',
field: 'portalLink',
render: rowData => {
return (
<Link
variant="subtitle3"
ref={
organizations.length === rowData.tableData?.id + 1 &&
organizations.length < 3
? linkHelperRef
: null
}>
link to org
</Link>
);
},
},
{title: 'Number of Users', field: 'userNumber'},
]}
handleCurrRow={(row: OrganizationRowType) => {
Expand Down Expand Up @@ -298,6 +388,41 @@ function Organizations(props: Props) {
toolbar: false,
}}
/>
<Popper
open={!showOnboardingDialog && showPopperLinkHelper}
anchorEl={linkHelperRef.current}
placement={'bottom-end'}>
<Paper elevation={2} className={classes.paper}>
{/* <div className={classes.paper}> */}
<Grid
container
alignContent="center"
justify="space-around"
direction="row">
<Grid>
<div>
<Grid container alignContent="center" direction="column">
<span className={classes.popperHelperText}>
Log into the Organization Portal
</span>
<span className={classes.popperHelperSubtitle}>
Add and manage the Network, Access Gateway, Subscribers,
and Policies for the organization.
</span>
</Grid>
</div>
</Grid>
<Grid>
<CloseIcon
onClick={() => {
setShowPopperLinkHelper(false);
}}
/>
</Grid>
</Grid>
{/* </div> */}
</Paper>
</Popper>
</Grid>
<OrganizationDialog
edit={false}
Expand Down

0 comments on commit 62c1dec

Please sign in to comment.