Skip to content

Commit

Permalink
Merge pull request #536 from pokt-foundation/account-level-migration
Browse files Browse the repository at this point in the history 
Account level migration
  • Loading branch information
@RabeeAbuBaker
RabeeAbuBaker authored Nov 14, 2023
2 parents 0eeb155 + 113993d commit 26d68fb
Show file tree
Hide file tree
Showing 91 changed files with 1,567 additions and 1,469 deletions.
17 changes: 5 additions & 12 deletions app/components/AccountDrawer/AccountDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {
import { Link, LinkProps, useFetcher } from "@remix-run/react"
import React, { useState } from "react"
import {
LuBook,
LuDiamond,
LuBookOpen,
LuLeaf,
LuLifeBuoy,
LuSmile,
Expand Down Expand Up @@ -69,7 +68,7 @@ const drawerExternalLinks = [
{
label: "Documentation",
to: DOCS_PATH,
icon: <LuBook size={18} />,
icon: <LuBookOpen size={18} />,
},
{
label: "Support",
Expand Down Expand Up @@ -138,12 +137,6 @@ const AccountDrawer = ({ user, hasPendingInvites }: AccountDrawerProps) => {
setIsDrawerOpen={setIsDrawerOpen}
to="/user/profile"
/>
<DrawerLink
icon={<LuTowerControl size={18} />}
label="My Accounts"
setIsDrawerOpen={setIsDrawerOpen}
to={`/user/accounts`}
/>
<Indicator
inline
disabled={!hasPendingInvites}
Expand All @@ -154,10 +147,10 @@ const AccountDrawer = ({ user, hasPendingInvites }: AccountDrawerProps) => {
size={16}
>
<DrawerLink
icon={<LuDiamond size={18} />}
label="Invited Apps"
icon={<LuTowerControl size={18} />}
label="My Accounts"
setIsDrawerOpen={setIsDrawerOpen}
to={`/user/invited-apps`}
to={`/user/accounts`}
/>
</Indicator>
<Divider my={8} />
Expand Down
4 changes: 2 additions & 2 deletions app/components/AccountSelect/AccountSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ const AccountItem = ({
{account.name ? account.name : account.id}
</Text>
<Text size={11}>{`${getPlanName(account.planType)} · ${
account?.accountUsers?.length ?? 1
} member${account?.accountUsers?.length > 1 ? "s" : ""}`}</Text>
account?.users?.length ?? 1
} member${account?.users?.length > 1 ? "s" : ""}`}</Text>
</Stack>
{hasMultipleAccounts && (
<LuChevronsUpDown size={18} style={{ marginLeft: "auto", marginRight: 0 }} />
Expand Down
48 changes: 24 additions & 24 deletions app/components/GroveLogo/GroveLogo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,51 @@ function GroveLogo({ icon }: GroveLogoProps) {
return icon ? (
<svg
fill="none"
height="18"
viewBox="0 0 14 18"
width="14"
height="28"
viewBox="0 0 22 28"
width="22"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#808B95">
<path d="M7 5.679V4.04a.6.6 0 00-.3-.52L4.477 2.233a.904.904 0 00-1.357.781V4.66a.6.6 0 00.302.52l2.224 1.28a.904.904 0 001.355-.782v.001z"></path>
<path d="M7 8.544V6.902a.6.6 0 01.299-.52l3.353-1.96a.903.903 0 011.36.78v1.677a.602.602 0 01-.302.521L8.355 9.326A.903.903 0 017 8.544z"></path>
<path d="M7 2.853v-1.64a.6.6 0 01.296-.518l.958-.567a.903.903 0 011.364.776v1.654a.601.601 0 01-.3.521l-.962.555A.904.904 0 017 2.853z"></path>
<path d="M6.987 11.376V9.739a.6.6 0 00-.298-.519L1.665 6.287a.904.904 0 00-1.36.779v1.666c0 .214.115.413.3.52l5.026 2.905a.904.904 0 001.356-.781z"></path>
<path d="M7 14.211v-1.635a.6.6 0 01.299-.52l5.03-2.936a.904.904 0 011.36.776l.005 1.659a.602.602 0 01-.3.523l-5.037 2.915A.904.904 0 017 14.212z"></path>
<path d="M6.229 14.6l.481.293c.18.109.29.303.29.514v1.69a.904.904 0 01-1.359.78l-.486-.284a.601.601 0 01-.299-.52v-1.702a.904.904 0 011.373-.77z"></path>
</g>
<path
d="M11 8.833V6.285a.934.934 0 00-.465-.81L7.08 3.474a1.403 1.403 0 00-2.107 1.214v2.56c0 .335.178.644.469.81l3.454 1.99a1.404 1.404 0 002.105-1.216L11 8.833zM11.001 13.29v-2.554c0-.333.176-.64.463-.808l5.21-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.18.645-.47.812l-5.211 2.996a1.403 1.403 0 01-2.103-1.218H11zM11.001 4.437V1.886c0-.331.174-.637.459-.805l1.487-.883a1.403 1.403 0 012.12 1.208V3.98a.936.936 0 01-.468.81l-1.492.863A1.403 1.403 0 0111 4.437zM10.98 17.695V15.15a.935.935 0 00-.462-.807L2.714 9.779a1.404 1.404 0 00-2.112 1.212v2.591c0 .334.178.643.467.81l7.805 4.518a1.403 1.403 0 002.107-1.215zM11.001 22.106v-2.544c0-.332.176-.64.463-.807l7.813-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.937.937 0 01-.467.813l-7.823 4.535A1.404 1.404 0 0111 22.107zM9.803 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.464-.809V23.91a1.404 1.404 0 012.132-1.199z"
fill="#389F58"
></path>
</svg>
) : (
<svg
fill="none"
height="12"
viewBox="0 0 39 12"
width="39"
height="28"
viewBox="0 0 95 28"
width="95"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.754.658h-2.07l1.75 8.065h4.055l1.75-8.065h-2.043L26.708 7.53c-.054.249-.412.249-.465 0L24.753.658z"
fill="#808B95"
d="M10.4 8.833V6.285a.934.934 0 00-.467-.81L6.48 3.474a1.403 1.403 0 00-2.108 1.214v2.56c0 .335.178.644.469.81l3.454 1.99A1.404 1.404 0 0010.4 8.833v.001zM10.4 13.29v-2.554c0-.333.176-.64.463-.808l5.209-3.048a1.403 1.403 0 012.112 1.212V10.7c0 .335-.179.645-.469.812l-5.212 2.996A1.403 1.403 0 0110.4 13.29zM10.4 4.437V1.886c0-.331.174-.637.458-.805l1.488-.883a1.403 1.403 0 012.119 1.208V3.98a.935.935 0 01-.467.81l-1.493.863a1.403 1.403 0 01-2.106-1.216zM10.38 17.695V15.15a.935.935 0 00-.464-.807L2.112 9.779A1.404 1.404 0 000 10.991v2.591c0 .334.178.643.467.81l7.806 4.518a1.403 1.403 0 002.106-1.215zM10.4 22.106v-2.544c0-.332.176-.64.463-.807l7.812-4.568a1.404 1.404 0 012.112 1.207l.01 2.58a.936.936 0 01-.466.813l-7.824 4.535a1.404 1.404 0 01-2.108-1.215zM9.202 22.711l.748.455c.28.17.45.473.45.8v2.628a1.404 1.404 0 01-2.11 1.213l-.756-.44a.935.935 0 01-.465-.809V23.91a1.404 1.404 0 012.133-1.199z"
fill="#389F58"
></path>
<path
d="M71.6 4.965h-3.494l2.954 13.64h6.847l2.955-13.64h-3.449L74.9 16.59c-.092.42-.695.42-.786 0L71.6 4.965z"
fill="#fff"
></path>
<path
clipRule="evenodd"
d="M22.524 4.692c0 2.227-1.815 4.032-4.055 4.032-2.24 0-4.055-1.805-4.055-4.032 0-2.228 1.816-4.033 4.055-4.033 2.24 0 4.055 1.805 4.055 4.033zm-1.88.017a2.152 2.152 0 01-2.158 2.146 2.153 2.153 0 01-2.158-2.146c0-1.184.966-2.146 2.158-2.146s2.159.961 2.159 2.146z"
fill="#808B95"
d="M67.836 11.788c0 3.766-3.066 6.82-6.849 6.82-3.782 0-6.847-3.053-6.847-6.82 0-3.767 3.066-6.82 6.847-6.82 3.783 0 6.85 3.053 6.85 6.82zm-3.174.03a3.637 3.637 0 01-3.645 3.628 3.638 3.638 0 01-3.645-3.628 3.638 3.638 0 013.645-3.63 3.637 3.637 0 013.645 3.63z"
fill="#fff"
fillRule="evenodd"
></path>
<path
d="M11.684 3.939v4.793H9.69V3.035A2.372 2.372 0 0112.068.67h2.346v1.983l-2.85-.014a.188.188 0 00-.171.268l.107.223c.121.253.184.528.184.809z"
fill="#808B95"
d="M49.529 10.514v8.107H46.16V8.985c0-2.21 1.799-4 4.017-4h3.962V8.34l-4.813-.024a.317.317 0 00-.29.454l.182.377c.205.427.31.893.31 1.367z"
fill="#fff"
></path>
<path
clipRule="evenodd"
d="M8.416.66H6.422v.985c0 .111-.144.164-.223.086A3.621 3.621 0 003.622.66C1.622.66 0 2.272 0 4.26c0 1.99 1.622 3.602 3.622 3.602a3.62 3.62 0 002.577-1.071c.079-.08.223-.026.223.085v2.127c0 .197-.16.355-.357.355H1.137v1.983h4.901a2.372 2.372 0 002.379-2.365V.66zM4.281 6.442c1.227 0 2.157-.927 2.157-2.147 0-1.22-.995-2.21-2.222-2.21-1.227 0-2.222.989-2.222 2.21 0 1.22 1.059 2.147 2.287 2.147z"
fill="#808B95"
d="M44.01 4.968h-3.369v1.668c0 .188-.243.277-.375.144a6.111 6.111 0 00-4.352-1.811c-3.379 0-6.117 2.727-6.117 6.09 0 3.365 2.738 6.092 6.116 6.092a6.11 6.11 0 004.353-1.812c.132-.133.375-.043.375.144v3.599a.6.6 0 01-.602.6h-8.321v3.354h8.276a4.009 4.009 0 004.017-4V4.968h-.001zm-6.984 9.782c2.072 0 3.644-1.569 3.644-3.632a3.746 3.746 0 00-3.753-3.738 3.745 3.745 0 00-3.753 3.738c0 2.063 1.789 3.632 3.862 3.632z"
fill="#fff"
fillRule="evenodd"
></path>
<path
d="M38.182 4.888c.153 0 .28-.12.278-.272a3.944 3.944 0 00-.089-.747c-.392-1.805-2.03-3.21-3.965-3.21a4.054 4.054 0 00-3.97 3.203 4.064 4.064 0 00-.085.83c0 2.227 1.815 4.032 4.055 4.032a4.056 4.056 0 003.817-2.666h-2.116c-.397.5-1.011.82-1.701.82a2.165 2.165 0 01-2.161-1.988h4.621l1.317-.001zm-1.93-1.02h-2.558c-.281 0-.56.064-.813.185l-.224.106a.189.189 0 01-.27-.167.603.603 0 01.087-.289c.047-.079.098-.155.155-.229.41-.536 1.07-.909 1.776-.909a2.169 2.169 0 011.992 1.305l-.146-.001z"
fill="#808B95"
d="M94.278 12.12a.46.46 0 00.47-.46 6.69 6.69 0 00-.15-1.264c-.663-3.053-3.429-5.428-6.698-5.428a6.839 6.839 0 00-3.384.89 6.833 6.833 0 00-3.318 4.526 6.89 6.89 0 00-.145 1.404c0 3.766 3.066 6.82 6.849 6.82a6.85 6.85 0 006.446-4.51h-3.574a3.658 3.658 0 01-2.873 1.386 3.657 3.657 0 01-3.65-3.361h7.805l2.224-.002h-.002zm-3.26-1.724h-4.32a3.19 3.19 0 00-1.371.311l-.38.18a.32.32 0 01-.456-.282c.002-.114.027-.265.149-.489.078-.133.165-.263.26-.387v-.002c.693-.904 1.809-1.536 3-1.536a3.663 3.663 0 013.364 2.207l-.246-.002z"
fill="#fff"
></path>
</svg>
)
Expand Down
2 changes: 1 addition & 1 deletion app/components/LinkTabs/LinkTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const LinkTabs = ({ routes }: LinkTabsProps) => {
content: '""',
display: "block",
width: "100%",
borderBottom: `2px solid ${theme.colors.gray[8]}`,
borderBottom: `1px solid ${theme.colors.gray[8]}`,
position: "absolute",
bottom: 11,
opacity: "50%",
Expand Down
2 changes: 1 addition & 1 deletion app/components/ModalHeader/ModalHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ type ModalHeaderProps = {
const ModalHeader = ({ title, subtitle, onDiscard }: ModalHeaderProps) => {
return (
<Box>
<Flex align="center" justify="space-between" mb={12} mt={32}>
<Flex align="center" justify="space-between" mb={12}>
<Text fw={600} fz="21px">
{title}
</Text>
Expand Down
43 changes: 20 additions & 23 deletions app/components/RootAppShell/RootAppShell.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,61 @@
import { showNotification } from "@mantine/notifications"
import { AppShell, Container } from "@pokt-foundation/pocket-blocks"
import { Link, useLocation, useParams } from "@remix-run/react"
import { Link, useLocation } from "@remix-run/react"
import React, { ReactNode, useEffect, useMemo, useState } from "react"
import { LuShapes } from "react-icons/lu"
import { AppHeader } from "~/components/AppHeader"
import { Sidebar } from "~/components/Sidebar"
import { Account, PortalApp, User } from "~/models/portal/sdk"
import { Account, RoleName, User } from "~/models/portal/sdk"
import { useRoot } from "~/root/hooks/useRoot"
import isUserAccountOwner from "~/utils/user"

type RootAppShellProps = {
user: User
apps?: PortalApp[]
hasPendingInvites: boolean
children: ReactNode
account?: Account
accounts: Account[]
children: ReactNode
hasPendingInvites: boolean
user: User
userRole?: RoleName
}

export const PENDING_INVITES_NOTIFICATION_ID = "pending-account-invites"

export const RootAppShell = ({
user,
apps,
account,
children,
accounts,
userRole,
hasPendingInvites,
}: RootAppShellProps) => {
const [opened, setOpened] = useState(false)
const { hideSidebar } = useRoot({ user })
const { pathname } = useLocation()
const { accountId } = useParams()

const isUserOwner = useMemo(
() => isUserAccountOwner({ accounts, accountId: accountId as string, user }),
[accountId, accounts, user],
)

const navProp = useMemo(
() => ({
...(!hideSidebar &&
apps && {
...(account &&
userRole &&
!hideSidebar && {
navbar: (
<Sidebar
account={account}
accounts={accounts}
apps={apps}
canCreateApps={isUserOwner}
hidden={!opened}
userRole={userRole}
/>
),
}),
}),
[hideSidebar, apps, accounts, isUserOwner, opened],
[hideSidebar, userRole, account, accounts, opened],
)

useEffect(() => {
if (hasPendingInvites && pathname !== "/user/invited-apps") {
if (hasPendingInvites && pathname !== "/user/accounts") {
showNotification({
id: PENDING_INVITES_NOTIFICATION_ID,
icon: <LuShapes size={18} />,
autoClose: 8000,
message: (
<Link to="/user/invited-apps">You have pending application invitations.</Link>
),
message: <Link to="/user/accounts">You have pending account invitations.</Link>,
})
}
// We want the notification to be shown only once
Expand Down
63 changes: 33 additions & 30 deletions app/components/Sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,46 @@ import { Box, MediaQuery, Navbar, ScrollArea } from "@pokt-foundation/pocket-blo
import { Link, useParams } from "@remix-run/react"
import React, { useMemo, useState } from "react"
import {
LuBarChart4,
LuBook,
LuDiamond,
LuArrowUpCircle,
LuBookOpen,
LuLifeBuoy,
LuLineChart,
LuPanelLeft,
LuPlus,
LuSettings,
} from "react-icons/lu"
import AccountSelect from "~/components/AccountSelect"
import GroveLogo from "~/components/GroveLogo"
import {
InternalLink,
ExternalLink,
InternalLink,
NavButton,
SidebarNavRoute,
SidebarApps,
SidebarNavRoute,
} from "~/components/Sidebar/components"
import { Account, PayPlanType, PortalApp } from "~/models/portal/sdk"
import { Account, PayPlanType, PortalApp, RoleName } from "~/models/portal/sdk"
import useCommonStyles from "~/styles/commonStyles"
import { DISCORD_PATH, DOCS_PATH } from "~/utils/utils"

type SidebarProps = {
apps: PortalApp[] | null
account: Account
hidden: boolean
canCreateApps: boolean
accounts: Account[]
userRole: RoleName
}

const getStaticRoutes = (activeAccount: Account | undefined): SidebarNavRoute[] => {
const getStaticRoutes = (
activeAccount: Account,
userRole: RoleName,
): SidebarNavRoute[] => {
const isStarterAccount = activeAccount?.planType === PayPlanType.FreetierV0
return [
...(isStarterAccount
...(isStarterAccount && userRole !== RoleName.Member
? [
{
// to: `/account/${activeAccount?.id}/plan`,
to: `/user/accounts`,
to: `/api/stripe/checkout-session?account-id=${activeAccount.id}`,
label: "Upgrade to Auto-Scale",
icon: LuDiamond,
icon: LuArrowUpCircle,
end: true,
},
]
Expand All @@ -49,19 +51,18 @@ const getStaticRoutes = (activeAccount: Account | undefined): SidebarNavRoute[]
{
to: `/account/${activeAccount?.id}`,
label: "Insights",
icon: LuBarChart4,
icon: LuLineChart,
end: true,
},
{
to: `/user/accounts`,
label: "Settings and members",
to: `/account/${activeAccount?.id}/settings`,
label: "Settings",
icon: LuSettings,
end: true,
},
{
to: DOCS_PATH,
icon: LuBook,
label: "Docs",
icon: LuBookOpen,
label: "Documentation",
external: true,
},
{
Expand All @@ -74,14 +75,16 @@ const getStaticRoutes = (activeAccount: Account | undefined): SidebarNavRoute[]
]
}

export const Sidebar = ({ apps, hidden, canCreateApps, accounts }: SidebarProps) => {
export const Sidebar = ({ account, hidden, userRole, accounts }: SidebarProps) => {
const { classes: commonClasses } = useCommonStyles()
const { accountId } = useParams()
const [collapsed, setCollapsed] = useState(false)
const staticRoutes = useMemo(() => {
const activeAccount = accounts.find(({ id }) => id === accountId)
return getStaticRoutes(activeAccount)
}, [accountId, accounts])
return getStaticRoutes(account, userRole)
}, [account, userRole])

const canCreateApps = userRole !== RoleName.Member
const { portalApps: apps } = account

return (
<Navbar
Expand All @@ -93,6 +96,12 @@ export const Sidebar = ({ apps, hidden, canCreateApps, accounts }: SidebarProps)
width={{ base: collapsed ? 60 : 300 }}
>
<>
<Box ml={10}>
<Link to={`/account/${accountId}`}>
<GroveLogo icon={collapsed} />
</Link>
</Box>
<Divider mb="md" ml={-8} mr={-8} mt="sm" />
<AccountSelect accounts={accounts} collapsed={collapsed} />
<ScrollArea h="100%" mt="lg" mx="-xs" px="xs">
{staticRoutes.map((route, index) =>
Expand All @@ -108,7 +117,7 @@ export const Sidebar = ({ apps, hidden, canCreateApps, accounts }: SidebarProps)
)}
<Divider my="lg" />
<Navbar.Section>
{apps && <SidebarApps apps={apps} iconOnly={collapsed} />}
{apps && <SidebarApps apps={apps as PortalApp[]} iconOnly={collapsed} />}
{canCreateApps && (
<InternalLink
iconOnly={collapsed}
Expand All @@ -132,12 +141,6 @@ export const Sidebar = ({ apps, hidden, canCreateApps, accounts }: SidebarProps)
/>
</Navbar.Section>
</MediaQuery>

<Box ml="md" mt={30}>
<Link to={`/account/${accountId}`}>
<GroveLogo icon={collapsed} />
</Link>
</Box>
</>
</Navbar>
)
Expand Down
2 changes: 1 addition & 1 deletion app/hooks/useActionNotification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useEffect } from "react"
import { LuCheck, LuX } from "react-icons/lu"
import { DataStruct } from "~/types/global"

type ActionNotificationData = Pick<DataStruct<DataStruct<any>>, "message" | "error">
type ActionNotificationData = Pick<DataStruct<any>, "message" | "error">

const useActionNotification = (data: ActionNotificationData) => {
useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions app/hooks/useModals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const useModals = () => {
overlayOpacity: 0.8,
overlayBlur: 3,
padding: "md",
styles: { body: { marginTop: "90px" } },
}

const openConfirmationModal = (modalProps: OpenConfirmModal) =>
Expand Down
Loading

0 comments on commit 26d68fb

Please sign in to comment.