Create feature-flagged placeholder Account Quotas tab

packages/manager/src/features/Account/AccountLanding.tsx

@@ -12,6 +12,7 @@ import { Tabs } from 'src/components/Tabs/Tabs';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
+import { useFlags } from 'src/hooks/useFlags';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useProfile } from 'src/queries/profile/profile';
@@ -40,6 +41,9 @@ const Users = React.lazy(() =>
     default: module.UsersLanding,
   }))
 );
+const Quotas = React.lazy(() =>
+  import('./Quotas').then((module) => ({ default: module.Quotas }))
+);
 const GlobalSettings = React.lazy(() => import('./GlobalSettings'));
 const MaintenanceLanding = React.lazy(
   () => import('./Maintenance/MaintenanceLanding')
@@ -50,6 +54,7 @@ const AccountLanding = () => {
   const location = useLocation();
   const { data: account } = useAccount();
   const { data: profile } = useProfile();
+  const { limitsEvolution } = useFlags();
 
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
   const sessionContext = React.useContext(switchAccountSessionContext);
@@ -59,6 +64,8 @@ const AccountLanding = () => {
   const isChildUser = profile?.user_type === 'child';
   const isParentUser = profile?.user_type === 'parent';
 
+  const showQuotasTab = limitsEvolution?.enabled ?? false;
+
   const isReadOnly =
     useRestrictedGlobalGrantCheck({
       globalGrantType: 'account_access',
@@ -80,6 +87,14 @@ const AccountLanding = () => {
       routeName: '/account/users',
       title: 'Users & Grants',
     },
+    ...(showQuotasTab
+      ? [
+          {
+            routeName: '/account/quotas',
+            title: 'Quotas',
+          },
+        ]
+      : []),
     {
       routeName: '/account/login-history',
       title: 'Login History',
@@ -193,6 +208,11 @@ const AccountLanding = () => {
             <SafeTabPanel index={++idx}>
               <Users />
             </SafeTabPanel>
+            {showQuotasTab && (
+              <SafeTabPanel index={++idx}>
+                <Quotas />
+              </SafeTabPanel>
+            )}
             <SafeTabPanel index={++idx}>
               <AccountLogins />
             </SafeTabPanel>

packages/manager/src/features/Account/Quotas.tsx

@@ -0,0 +1,36 @@
+import { Autocomplete, Divider, Paper, Stack, Typography } from '@linode/ui';
+import { styled } from '@mui/material';
+import * as React from 'react';
+
+import { Link } from 'src/components/Link';
+import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
+
+export const Quotas = () => {
+  return (
+    <MainStack spacing={2}>
+      <Typography variant="h3">Quotas</Typography>
+      <Paper>
+        <Stack divider={<Divider spacingBottom={20} spacingTop={40} />}>
+          <Stack spacing={1}>
+            <Autocomplete label="Select a Service" options={[]} />
+            <RegionSelect
+              currentCapability={undefined}
+              regions={[]}
+              value={undefined}
+            />
+          </Stack>
+          <Stack>
+            <Stack direction="row-reverse">
+              <Link to="#">Learn More About Quotas</Link>
+            </Stack>
+            <Typography variant="h3">Quotas</Typography>
+          </Stack>
+        </Stack>
+      </Paper>
+    </MainStack>
+  );
+};
+
+const MainStack = styled(Stack, { label: 'MainStack' })(({ theme }) => ({
+  marginTop: theme.spacing(2),
+}));