Organization update to add My Account and start of reseller support

Author: JamieRuderman

frontend/src/components/Avatar/Avatar.tsx

@@ -17,6 +17,7 @@ export interface Props {
   active?: boolean
   border?: number
   fallback?: string
+  marginRight?: number
   children?: React.ReactNode
 }
 
@@ -30,11 +31,12 @@ export const Avatar: React.FC<Props> = ({
   active,
   border = 1,
   fallback,
+  marginRight,
   children,
 }) => {
   const url = `https://www.gravatar.com/avatar/${md5(email || '')}?s=${size * 2}&d=force-fail`
   const color = createColor(email)
-  const css = useStyles({ size, color, button, inline, active, border })
+  const css = useStyles({ size, color, button, inline, marginRight, active, border })
   fallback = (fallback || email || '?').substring(0, 1).toUpperCase()
 
   let Element = (
@@ -57,10 +59,18 @@ export const Avatar: React.FC<Props> = ({
   )
 }
 
-type StyleProps = { button?: boolean; inline?: boolean; active?: boolean; size: number; color: number; border: number }
+type StyleProps = {
+  button?: boolean
+  inline?: boolean
+  marginRight?: number
+  active?: boolean
+  size: number
+  color: number
+  border: number
+}
 
 const useStyles = makeStyles(({ palette }) => ({
-  avatar: ({ size, color, inline, border }: StyleProps) => ({
+  avatar: ({ size, color, inline, marginRight, border }: StyleProps) => ({
     color: palette.alwaysWhite.main,
     fontSize: size * 0.625,
     height: size,
@@ -70,7 +80,7 @@ const useStyles = makeStyles(({ palette }) => ({
     fontFamily: 'Roboto Mono',
     backgroundColor: labelLookup[color].color,
     border: `${border}px solid ${palette.white.main}`,
-    marginRight: inline ? spacing.sm : 0,
+    marginRight: inline ? spacing.sm : marginRight,
   }),
   button: ({ active, border }: StyleProps) => ({
     backgroundColor: active ? undefined : palette.white.main,

frontend/src/components/LinearProgress.tsx

@@ -1,21 +1,18 @@
 import React from 'react'
-import { makeStyles } from '@mui/styles'
 import { LinearProgress as MuiLinearProgress } from '@mui/material'
 
 type Props = { loading?: boolean }
 
-export const LinearProgress: React.FC<Props> = ({ loading }) => {
-  const css = useStyles()
-  return loading ? <MuiLinearProgress className={css.loading} /> : null
-}
-
-const useStyles = makeStyles({
-  loading: {
-    position: 'absolute',
-    width: '100%',
-    zIndex: 10,
-    height: 1,
-    bottom: 0,
-    left: 0,
-  },
-})
+export const LinearProgress: React.FC<Props> = ({ loading }) =>
+  loading ? (
+    <MuiLinearProgress
+      sx={{
+        position: 'absolute',
+        width: '100%',
+        zIndex: 10,
+        height: '1px',
+        bottom: 0,
+        left: 0,
+      }}
+    />
+  ) : null

frontend/src/components/OrganizationGuestDetails.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { getAllDevices } from '../selectors/devices'
-import { useSelector, useDispatch } from 'react-redux'
 import { selectNetworks } from '../selectors/networks'
+import { useSelector, useDispatch } from 'react-redux'
+import { LinearProgress, Typography, List, Box } from '@mui/material'
 import { State, Dispatch } from '../store'
-import { Typography, List, Box } from '@mui/material'
 import { ListItemLocation } from './ListItemLocation'
+import { LoadingMessage } from './LoadingMessage'
 import { TargetPlatform } from './TargetPlatform'
 import { ShareDetails } from './ShareDetails'
 import { Gutters } from './Gutters'
 import { Icon } from './Icon'
 
 type Props = {
-  loaded: boolean
   guest?: IGuest
+  loaded?: boolean
 }
 
 export const OrganizationGuestDetails: React.FC<Props> = ({ guest, loaded }) => {
@@ -37,7 +38,9 @@ export const OrganizationGuestDetails: React.FC<Props> = ({ guest, loaded }) =>
 
   useEffect(() => {
     if (!loaded) dispatch.organization.fetchGuests()
-  }, [guest])
+  }, [guest, loaded])
+
+  if (!loaded) return <LinearProgress color="info" sx={{ marginTop: 5, marginX: 5, height: '1px' }} />
 
   if (!guest?.deviceIds.length && !guest?.networkIds.length) return null
 

frontend/src/components/OrganizationMember.tsx

@@ -44,7 +44,7 @@ export const OrganizationMember: React.FC<Props> = ({ member, roles = [], disabl
             onClick={event => event.stopPropagation()}
           />
           {!enterprise && (
-            <Box width={120} display="inline-block" textAlign="right" marginRight={`${spacing.md}px`}>
+            <Box width={90} display="inline-block" textAlign="right" marginRight={`${spacing.md}px`}>
               <LicenseSelect member={member} disabled={disabled} />
             </Box>
           )}

frontend/src/components/OrganizationMemberDetails.tsx

@@ -9,13 +9,14 @@ import { Typography, List, Box } from '@mui/material'
 import { RoleAccessCounts } from './RoleAccessCounts'
 import { ListItemLocation } from './ListItemLocation'
 import { LicenseSelect } from './LicenseSelect'
+import { FormDisplay } from './FormDisplay'
 import { RoleSelect } from './RoleSelect'
-import { Duration } from '../components/Duration'
+import { Timestamp } from './Timestamp'
 import { Gutters } from './Gutters'
 import { Icon } from './Icon'
 
 type Props = {
-  member: IOrganizationMember
+  member?: IOrganizationMember
   organization: IOrganizationState
 }
 
@@ -36,9 +37,6 @@ export const OrganizationMemberDetails: React.FC<Props> = ({ member, organizatio
         <>
           <Typography variant="subtitle1">Member</Typography>
           <Gutters>
-            <Typography variant="caption" marginBottom={3} component="div">
-              Since <Duration startTime={member?.created?.getTime()} ago />
-            </Typography>
             <Box display="flex" flexWrap="wrap" alignItems="center" justifyContent="space-between">
               <Box display="flex" marginRight={2} gap={1}>
                 <RoleSelect
@@ -61,6 +59,12 @@ export const OrganizationMemberDetails: React.FC<Props> = ({ member, organizatio
               </Box>
             </Box>
           </Gutters>
+          <FormDisplay
+            icon={<Icon name="calendar-star" />}
+            label="Member since"
+            displayValue={<Timestamp date={member?.created} />}
+            displayOnly
+          />
         </>
       )}
       {!!accessible.length && (

frontend/src/components/OrganizationMemberList.tsx

@@ -17,7 +17,7 @@ export const OrganizationMemberList: React.FC<Props> = ({ organization, owner, e
         <OrganizationMember
           disabled
           key={owner.user.id}
-          link={false}
+          link={true}
           member={owner}
           roles={organization?.roles}
           enterprise={enterprise}