From 711327e28dac3f8096eb1b6e0bfc1851b836c129 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Wed, 6 Jul 2022 15:23:05 +1000 Subject: [PATCH] update navigation --- src/App.tsx | 7 +- src/assets/Logo.tsx | 16 +- src/config/firebaseui.ts | 8 + src/constants/routes.tsx | 4 +- src/layouts/AuthLayout.tsx | 29 ++-- src/layouts/Navigation/HelpMenu.tsx | 148 +++++++----------- src/layouts/Navigation/NavDrawer.tsx | 104 +++++------- src/layouts/Navigation/NavItem.tsx | 17 +- src/layouts/Navigation/TopBar.tsx | 50 +++--- src/layouts/Navigation/UpdateCheckBadge.tsx | 11 +- src/pages/Auth/SignUpPage.tsx | 94 +++++------ src/pages/Settings/DebugSettingsPage.tsx | 2 +- ...UserManagementPage.tsx => MembersPage.tsx} | 10 +- ...Firebase.tsx => MembersSourceFirebase.tsx} | 16 +- 14 files changed, 231 insertions(+), 285 deletions(-) rename src/pages/Settings/{UserManagementPage.tsx => MembersPage.tsx} (92%) rename src/sources/{UserManagementSourceFirebase.tsx => MembersSourceFirebase.tsx} (54%) diff --git a/src/App.tsx b/src/App.tsx index 92d33ff6..8fec3fc9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,7 +52,7 @@ const UserSettingsPage = lazy(() => import("@src/pages/Settings/UserSettingsPage // prettier-ignore const ProjectSettingsPage = lazy(() => import("@src/pages/Settings/ProjectSettingsPage" /* webpackChunkName: "ProjectSettingsPage" */)); // prettier-ignore -const UserManagementPage = lazy(() => import("@src/pages/Settings/UserManagementPage" /* webpackChunkName: "UserManagementPage" */)); +const MembersPage = lazy(() => import("@src/pages/Settings/MembersPage" /* webpackChunkName: "MembersPage" */)); // prettier-ignore const DebugSettingsPage = lazy(() => import("@src/pages/Settings/DebugSettingsPage" /* webpackChunkName: "DebugSettingsPage" */)); @@ -141,10 +141,7 @@ export default function App() { path={ROUTES.projectSettings} element={} /> - } - /> + } /> } diff --git a/src/assets/Logo.tsx b/src/assets/Logo.tsx index acd8151f..c4037f30 100644 --- a/src/assets/Logo.tsx +++ b/src/assets/Logo.tsx @@ -22,20 +22,20 @@ export default function Logo({ size = 1.5, ...props }: ILogoProps) { - - + + - - + + - - + + - - + + diff --git a/src/config/firebaseui.ts b/src/config/firebaseui.ts index b69fe91d..e015e190 100644 --- a/src/config/firebaseui.ts +++ b/src/config/firebaseui.ts @@ -14,9 +14,15 @@ import githubLogo from "@src/assets/logos/github.svg"; import appleLogo from "@src/assets/logos/apple.svg"; import yahooLogo from "@src/assets/logos/yahoo.svg"; +import { EXTERNAL_LINKS } from "@src/constants/externalLinks"; + export const authOptions = { google: { provider: GoogleAuthProvider.PROVIDER_ID, + customParameters: { + // Forces account selection even when one account is available + prompt: "select_account", + }, }, twitter: { provider: TwitterAuthProvider.PROVIDER_ID, @@ -59,6 +65,8 @@ export const defaultUiConfig: firebaseui.auth.Config = { signInFlow: "popup", signInSuccessUrl: "/", signInOptions: [authOptions.google], + // tosUrl: EXTERNAL_LINKS.terms, + // privacyPolicyUrl: EXTERNAL_LINKS.privacy, }; export const getSignInOptions = ( diff --git a/src/constants/routes.tsx b/src/constants/routes.tsx index 5c65d586..498204a8 100644 --- a/src/constants/routes.tsx +++ b/src/constants/routes.tsx @@ -35,7 +35,7 @@ export enum ROUTES { settings = "/settings", userSettings = "/settings/user", projectSettings = "/settings/project", - userManagement = "/settings/userManagement", + members = "/members", debugSettings = "/settings/debug", test = "/test", @@ -62,7 +62,7 @@ export const ROUTE_TITLES = { [ROUTES.settings]: "Settings", [ROUTES.userSettings]: "Settings", [ROUTES.projectSettings]: "Project Settings", - [ROUTES.userManagement]: "User Management", + [ROUTES.members]: "Members", [ROUTES.debugSettings]: "Debug", [ROUTES.test]: "Test", diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx index 08e5ad6a..22a11d6e 100644 --- a/src/layouts/AuthLayout.tsx +++ b/src/layouts/AuthLayout.tsx @@ -1,3 +1,4 @@ +import { useAtom } from "jotai"; import { use100vh } from "react-div-100vh"; import { @@ -14,6 +15,7 @@ import Logo from "@src/assets/Logo"; import bgTableLight from "@src/assets/bg-table-light.webp"; import bgTableDark from "@src/assets/bg-table-dark.webp"; +import { globalScope, projectIdAtom } from "@src/atoms/globalScope"; import { EXTERNAL_LINKS } from "@src/constants/externalLinks"; export interface IAuthLayoutProps { @@ -35,6 +37,7 @@ export default function AuthLayout({ children, loading, }: IAuthLayoutProps) { + const [projectId] = useAtom(projectIdAtom, globalScope); const fullScreenHeight = use100vh() ?? 0; const linkProps: LinkProps = { @@ -50,8 +53,8 @@ export default function AuthLayout({ sx={{ backgroundImage: (theme) => `linear-gradient(to bottom, - ${alpha(theme.palette.background.default, 0.6)}, - ${alpha(theme.palette.background.default, 0.6)}), + ${alpha(theme.palette.background.default, 0.75)}, + ${alpha(theme.palette.background.default, 0.75)}), url(${theme.palette.mode === "dark" ? bgTableDark : bgTableLight})`, backgroundSize: { xs: "1920px 1080px", md: "cover" }, backgroundRepeat: "no-repeat", @@ -59,20 +62,19 @@ export default function AuthLayout({ display: "grid", placeItems: "center", - alignContent: "center", + alignContent: "space-between", gap: 2, gridAutoRows: "max-content", minHeight: fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh", - pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(1)})`, - pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(1)})`, - pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(1)})`, + pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`, + pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(2)})`, pr: (theme) => `max(env(safe-area-inset-right), ${theme.spacing(1)})`, + pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(1)})`, }} >
- +
:not(style) + :not(style)": { mt: 4 }, } as any @@ -140,13 +143,13 @@ export default function AuthLayout({ /> )} - {/* Project: {projectId} - */} + (null); - const [open, setOpen] = useState(false); +export default function HelpMenu({ + anchorEl, + onClose, +}: Pick) { + // useEffect(() => { + // analytics.logEvent("open_help_menu"); + // }, []); const externalLinkIcon = ( @@ -31,89 +30,54 @@ export default function UserMenu(props: IconButtonProps) { ); return ( - <> - - { - setOpen(true); - analytics.logEvent("open_help_menu"); - }} - > - - - - - setOpen(false)} - sx={{ "& .MuiPaper-root": { minWidth: 160 } }} + + - setOpen(false)} - > - - - - Docs - {externalLinkIcon} - - - - - setOpen(false)} - > - - - - Discord - {externalLinkIcon} - - setOpen(false)} - > - - - - GitHub - {externalLinkIcon} - - setOpen(false)} - > - - - - Twitter - {externalLinkIcon} - - - + + + + Discord + {externalLinkIcon} + + + + + + GitHub + {externalLinkIcon} + + + + + + Twitter + {externalLinkIcon} + + ); } diff --git a/src/layouts/Navigation/NavDrawer.tsx b/src/layouts/Navigation/NavDrawer.tsx index 6e5d2060..6ae58bac 100644 --- a/src/layouts/Navigation/NavDrawer.tsx +++ b/src/layouts/Navigation/NavDrawer.tsx @@ -11,29 +11,27 @@ import { List, ListItemIcon, ListItemText, - Avatar, Divider, ListItemSecondaryAction, Box, - Fade, } from "@mui/material"; import CloseIcon from "@mui/icons-material/MenuOpen"; -import ArrowBackIcon from "@mui/icons-material/WorkspacesOutlined"; import HomeIcon from "@mui/icons-material/HomeOutlined"; import SettingsIcon from "@mui/icons-material/SettingsOutlined"; -import ProjectSettingsIcon from "@mui/icons-material/BuildCircleOutlined"; import UserManagementIcon from "@mui/icons-material/AccountCircleOutlined"; import AddIcon from "@mui/icons-material/Add"; -import { Table as TableIcon } from "@src/assets/icons"; import DocsIcon from "@mui/icons-material/LibraryBooksOutlined"; import LearningIcon from "@mui/icons-material/LocalLibraryOutlined"; import HelpIcon from "@mui/icons-material/HelpOutline"; +import CommunityIcon from "@mui/icons-material/SentimentSatisfiedAltOutlined"; import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon"; +import { ChevronRight as ChevronRightIcon } from "@src/assets/icons"; import Logo from "@src/assets/Logo"; import NavItem from "./NavItem"; import NavTableSection from "./NavTableSection"; import UpdateCheckBadge from "./UpdateCheckBadge"; +import HelpMenu from "./HelpMenu"; import { globalScope, @@ -70,6 +68,8 @@ export default function NavDrawer({ ); const [hover, setHover] = useState(false); + const [helpMenuAnchorEl, setHelpMenuAnchorEl] = + useState(null); const favorites = Array.isArray(userSettings.favoriteTables) ? userSettings.favoriteTables @@ -89,8 +89,8 @@ export default function NavDrawer({ ? undefined : (e: {}) => onClose(e, "escapeKeyDown"); - const externalLinkIcon = !collapsed && ( - + const externalLinkIcon = ( + ); @@ -194,48 +194,6 @@ export default function NavDrawer({ disablePadding style={{ height: "100%", display: "flex", flexDirection: "column" }} > -
  • - - - - - - -
    • - -
  • - - - - P - - - - -
    • - - {/* {userRoles.includes("ADMIN") && ( -
  • - - - - - - -
    • - )} */} - - -
  • @@ -251,30 +209,30 @@ export default function NavDrawer({ + {userRoles.includes("ADMIN") && ( + + )}
    • {userRoles.includes("ADMIN") && (
  • - + - + - - +
    • )} - {/* Your tables */} -
  • { + onClick={(e: any) => { if (closeDrawer) closeDrawer(e); openTableSettingsDialog({}); }} @@ -286,15 +244,6 @@ export default function NavDrawer({
    • - {/*
  • - - - - - - -
    • */} - {sections && Object.entries(sections) .filter(([, tables]) => tables.length > 0) @@ -329,13 +278,36 @@ export default function NavDrawer({
  • - + setHelpMenuAnchorEl(e.currentTarget)} + > + + + + + + + + +
    • +
  • + setHelpMenuAnchorEl(e.currentTarget)} + > + + +
    • + + setHelpMenuAnchorEl(null)} + /> diff --git a/src/layouts/Navigation/NavItem.tsx b/src/layouts/Navigation/NavItem.tsx index efe92f66..cc6cf903 100644 --- a/src/layouts/Navigation/NavItem.tsx +++ b/src/layouts/Navigation/NavItem.tsx @@ -4,24 +4,29 @@ import { spreadSx } from "@src/utils/ui"; const linkProps = { target: "_blank", rel: "noopener noreferrer" }; -export default function NavItem(props: MenuItemProps) { +export default function NavItem( + props: MenuItemProps +) { const { pathname } = useLocation(); return ( + colord(theme.palette.background.paper) + .mix("#fff", 0.09) // Elevation 8 + .alpha(1) + .toHslString() + : "transparent", + transitionProperty: "box-shadow, background-color", }} > - + + diff --git a/src/layouts/Navigation/UpdateCheckBadge.tsx b/src/layouts/Navigation/UpdateCheckBadge.tsx index e41ade67..7c142d55 100644 --- a/src/layouts/Navigation/UpdateCheckBadge.tsx +++ b/src/layouts/Navigation/UpdateCheckBadge.tsx @@ -1,10 +1,19 @@ +import { useAtom } from "jotai"; + import { Badge, BadgeProps } from "@mui/material"; + +import { globalScope, userRolesAtom } from "@src/atoms/globalScope"; import useUpdateCheck from "@src/hooks/useUpdateCheck"; export default function UpdateCheckBadge(props: Partial) { + const [userRoles] = useAtom(userRolesAtom, globalScope); const [latestUpdate] = useUpdateCheck(); - if (!latestUpdate.rowy && !latestUpdate.rowyRun) return <>{props.children}; + if ( + !userRoles.includes("ADMIN") || + (!latestUpdate.rowy && !latestUpdate.rowyRun) + ) + return <>{props.children}; return ( theme.breakpoints.down("md")); - return ( - - - -
    - + Welcome! To join this project, sign up with the email address + {searchParams.get("email") ? ( <> - Welcome! To join this project, sign in with the email address - {searchParams.get("email") ? ( - <> - :{" "} - - {searchParams.get("email")} - - - ) : ( - " used to invite you." - )} + : {searchParams.get("email")} - } + ) : ( + " used to invite you." + )} + + } + > + + + By signing up, you agree to our{" "} + - - - By signing up, you agree to our{" "} - - Terms and Conditions - {" "} - and{" "} - - Privacy Policy - - . - - -
    -     + Terms and Conditions + {" "} + and{" "} + + Privacy Policy + + . + + ); } diff --git a/src/pages/Settings/DebugSettingsPage.tsx b/src/pages/Settings/DebugSettingsPage.tsx index ebd10f1d..d6ad22fa 100644 --- a/src/pages/Settings/DebugSettingsPage.tsx +++ b/src/pages/Settings/DebugSettingsPage.tsx @@ -17,7 +17,7 @@ import { allUsersAtom, updateUserAtom, } from "@src/atoms/globalScope"; -import UserManagementSourceFirebase from "@src/sources/UserManagementSourceFirebase"; +import UserManagementSourceFirebase from "@src/sources/MembersSourceFirebase"; import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase"; import { USERS } from "@src/config/dbPaths"; import { getTableSchemaPath } from "@src/utils/table"; diff --git a/src/pages/Settings/UserManagementPage.tsx b/src/pages/Settings/MembersPage.tsx similarity index 92% rename from src/pages/Settings/UserManagementPage.tsx rename to src/pages/Settings/MembersPage.tsx index 045ae49b..2431e608 100644 --- a/src/pages/Settings/UserManagementPage.tsx +++ b/src/pages/Settings/MembersPage.tsx @@ -19,18 +19,18 @@ import UserSkeleton from "@src/components/Settings/UserManagement/UserSkeleton"; import InviteUser from "@src/components/Settings/UserManagement/InviteUser"; import { globalScope, allUsersAtom } from "@src/atoms/globalScope"; -import UserManagementSourceFirebase from "@src/sources/UserManagementSourceFirebase"; +import MembersSourceFirebase from "@src/sources/MembersSourceFirebase"; import useBasicSearch from "@src/hooks/useBasicSearch"; const SEARCH_KEYS = ["id", "user.displayName", "user.email"]; -function UserManagementPage() { +function MembersPage() { const [users] = useAtom(allUsersAtom, globalScope); const [results, query, handleQuery] = useBasicSearch(users, SEARCH_KEYS); return ( - + } > - + ); } diff --git a/src/sources/UserManagementSourceFirebase.tsx b/src/sources/MembersSourceFirebase.tsx similarity index 54% rename from src/sources/UserManagementSourceFirebase.tsx rename to src/sources/MembersSourceFirebase.tsx index 9b64ea1f..aa4acde5 100644 --- a/src/sources/UserManagementSourceFirebase.tsx +++ b/src/sources/MembersSourceFirebase.tsx @@ -11,14 +11,12 @@ import { USERS } from "@src/config/dbPaths"; /** * When rendered, provides atom values for top-level tables */ -const UserManagementSourceFirebase = memo( - function UserManagementSourceFirebase() { - useFirestoreCollectionWithAtom(allUsersAtom, globalScope, USERS, { - updateDocAtom: updateUserAtom, - }); +const MembersSourceFirebase = memo(function MembersSourceFirebase() { + useFirestoreCollectionWithAtom(allUsersAtom, globalScope, USERS, { + updateDocAtom: updateUserAtom, + }); - return null; - } -); + return null; +}); -export default UserManagementSourceFirebase; +export default MembersSourceFirebase;