diff --git a/packages/manager/.changeset/pr-10052-upcoming-features-1704993330964.md b/packages/manager/.changeset/pr-10052-upcoming-features-1704993330964.md new file mode 100644 index 00000000000..54971d820c8 --- /dev/null +++ b/packages/manager/.changeset/pr-10052-upcoming-features-1704993330964.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Add Switch Account button to Account Landing page for parent and proxy users ([#10052](https://github.com/linode/manager/pull/10052)) diff --git a/packages/manager/src/components/LandingHeader/LandingHeader.tsx b/packages/manager/src/components/LandingHeader/LandingHeader.tsx index 063331b8632..05881941fb4 100644 --- a/packages/manager/src/components/LandingHeader/LandingHeader.tsx +++ b/packages/manager/src/components/LandingHeader/LandingHeader.tsx @@ -61,15 +61,17 @@ export const LandingHeader = ({ const labelTitle = title?.toString(); const xsDown = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm')); + const customXsDownBreakpoint = useMediaQuery((theme: Theme) => + theme.breakpoints.down(636) + ); + const customSmMdBetweenBreakpoint = useMediaQuery((theme: Theme) => + theme.breakpoints.between(636, 'md') + ); const docsAnalyticsLabel = analyticsLabel ? analyticsLabel : `${title} Landing`; - const sxButton = { - marginLeft: theme.spacing(1), - }; - return ( {!shouldHideDocsAndCreateButtons && ( - + {betaFeedbackLink && ( {createButtonText ?? `Create ${entity}`} @@ -139,6 +154,7 @@ export const LandingHeader = ({ ); }; -const Actions = styled('div')(({ theme }) => ({ - marginLeft: `${theme.spacing(2)}`, +const Actions = styled('div')(() => ({ + display: 'flex', + justifyContent: 'flex-end', })); diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx index bb0543690e9..68b0e028020 100644 --- a/packages/manager/src/features/Account/AccountLanding.tsx +++ b/packages/manager/src/features/Account/AccountLanding.tsx @@ -11,10 +11,14 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel'; import { TabLinkList } from 'src/components/Tabs/TabLinkList'; import { TabPanels } from 'src/components/Tabs/TabPanels'; import { Tabs } from 'src/components/Tabs/Tabs'; +import { useFlags } from 'src/hooks/useFlags'; import { useAccount } from 'src/queries/account'; -import { useGrants } from 'src/queries/profile'; +import { useAccountUser } from 'src/queries/accountUsers'; +import { useGrants, useProfile } from 'src/queries/profile'; import AccountLogins from './AccountLogins'; +import { SwitchAccountButton } from './SwitchAccountButton'; +import { SwitchAccountDrawer } from './SwitchAccountDrawer'; const Billing = React.lazy(() => import('src/features/Billing/BillingDetail').then((module) => ({ @@ -43,6 +47,11 @@ const AccountLanding = () => { const location = useLocation(); const { data: account } = useAccount(); const { data: grants } = useGrants(); + const { data: profile } = useProfile(); + const { data: user } = useAccountUser(profile?.username ?? ''); + + const flags = useFlags(); + const [isDrawerOpen, setIsDrawerOpen] = React.useState(false); const accountAccessGrant = grants?.global?.account_access; const readOnlyAccountAccess = accountAccessGrant === 'read_only'; @@ -107,6 +116,9 @@ const AccountLanding = () => { let idx = 0; const isBillingTabSelected = location.pathname.match(/billing/); + const canSwitchBetweenParentOrProxyAccount = + flags.parentChildAccountAccess && + (user?.user_type === 'parent' || user?.user_type === 'proxy'); const landingHeaderProps: LandingHeaderProps = { breadcrumbProps: { @@ -125,6 +137,9 @@ const AccountLanding = () => { history.replace('/account/billing/make-payment'); } landingHeaderProps.disabledCreateButton = readOnlyAccountAccess; + landingHeaderProps.extraActions = canSwitchBetweenParentOrProxyAccount ? ( + setIsDrawerOpen(true)} /> + ) : undefined; } return ( @@ -158,6 +173,11 @@ const AccountLanding = () => { + setIsDrawerOpen(false)} + open={isDrawerOpen} + username={user?.username ?? ''} + /> ); }; diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx index b9e5268bf2a..ad938a6cd72 100644 --- a/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx +++ b/packages/manager/src/features/Account/SwitchAccountDrawer.test.tsx @@ -55,6 +55,9 @@ describe('SwitchAccountDrawer', () => { it('should display a list of child accounts', async () => { server.use( + rest.get('*/account/users/*', (req, res, ctx) => { + return res(ctx.json(accountUserFactory.build({ user_type: 'parent' }))); + }), rest.get('*/account/child-accounts', (req, res, ctx) => { return res( ctx.json(