[fix] Add product-tier limitation to the panel (#264)

someengineering · Jul 9, 2024 · 0a7dfc4 · 0a7dfc4
1 parent 0db50cc
commit 0a7dfc4
Show file tree

Hide file tree

Showing 23 changed files with 802 additions and 364 deletions.
diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po
diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
diff --git a/src/pages/panel/shared/queries/getWorkspaceProductTiers.query.ts b/src/pages/panel/shared/queries/getWorkspaceProductTiers.query.ts
@@ -0,0 +1,15 @@
+import { QueryFunctionContext } from '@tanstack/react-query'
+import { endPoints } from 'src/shared/constants'
+import { GetWorkspaceProductTiersResponse } from 'src/shared/types/server'
+import { axiosWithAuth } from 'src/shared/utils/axios'
+
+export const getWorkspaceProductTiersQuery = ({
+  signal,
+  queryKey: [, workspaceId],
+}: QueryFunctionContext<['workspace-product-tiers', string | undefined]>) => {
+  return workspaceId
+    ? axiosWithAuth
+        .get<GetWorkspaceProductTiersResponse>(endPoints.workspaces.workspace(workspaceId).productTiers, { signal })
+        .then((res) => res.data)
+    : ({} as GetWorkspaceProductTiersResponse)
+}
diff --git a/...settings-users/getWorkspaceUsers.query.ts → ...shared/queries/getWorkspaceUsers.query.ts b/...settings-users/getWorkspaceUsers.query.ts → ...shared/queries/getWorkspaceUsers.query.ts
diff --git a/src/pages/panel/shared/queries/index.ts b/src/pages/panel/shared/queries/index.ts
@@ -11,6 +11,8 @@ export { getWorkspaceInventoryReportChecksQuery } from './getWorkspaceInventoryR
 export { getWorkspaceInventoryReportSummaryQuery } from './getWorkspaceInventoryReportSummary.query'
 export { getWorkspaceInventorySearchStartQuery } from './getWorkspaceInventorySearchStart.query'
 export { getWorkspaceNotificationsQuery } from './getWorkspaceNotifications.query'
+export { getWorkspaceProductTiersQuery } from './getWorkspaceProductTiers.query'
+export { getWorkspaceUsersQuery } from './getWorkspaceUsers.query'
 export { patchWorkspaceInventoryNodeSecurityIgnoreQuery } from './patchWorkspaceInventoryNodeSecurityIgnore.query'
 export { postWorkspaceInventoryPropertyAttributesQuery } from './postWorkspaceInventoryPropertyAttributes.query'
 export { postWorkspaceInventoryPropertyPathCompleteQuery } from './postWorkspaceInventoryPropertyPathComplete.query'

diff --git a/...panel/workspace-settings-accounts-setup-cloud/WorkspaceSettingsAccountsSetupCloudPage.tsx b/...panel/workspace-settings-accounts-setup-cloud/WorkspaceSettingsAccountsSetupCloudPage.tsx
@@ -1,6 +1,6 @@
-import { Button, Stack, Typography } from '@mui/material'
-import { Link } from 'react-router-dom'
+import { Stack, Typography } from '@mui/material'
 import { AwsLogo, AzureLogo, GcpLogo } from 'src/assets/icons'
+import { InternalLinkButton } from 'src/shared/link-button'
 import { useNonce } from 'src/shared/providers'
 
 export default function WorkspaceSettingsAccountsSetupCloudPage() {
@@ -16,8 +16,7 @@ export default function WorkspaceSettingsAccountsSetupCloudPage() {
     >
       <Stack direction="row" width="100%" height="100%" flex={1} flexWrap="wrap" alignItems="center" justifyContent="center">
         <Stack direction="row" width="50%" height="50%" p={1} alignItems="center" justifyContent="center">
-          <Button
-            component={Link}
+          <InternalLinkButton
             to="/workspace-settings/accounts/setup-cloud/aws"
             color="primary"
             sx={{
@@ -34,11 +33,10 @@ export default function WorkspaceSettingsAccountsSetupCloudPage() {
             <Typography variant="h3" textAlign="center">
               Amazon Web Services
             </Typography>
-          </Button>
+          </InternalLinkButton>
         </Stack>
         <Stack direction="row" width="50%" height="50%" p={1} alignItems="stretch" justifyContent="center">
-          <Button
-            component={Link}
+          <InternalLinkButton
             to="/workspace-settings/accounts/setup-cloud/gcp"
             color="primary"
             sx={{
@@ -55,11 +53,10 @@ export default function WorkspaceSettingsAccountsSetupCloudPage() {
             <Typography variant="h3" textAlign="center">
               Google Cloud Platform
             </Typography>
-          </Button>
+          </InternalLinkButton>
         </Stack>
         <Stack direction="row" width="50%" height="50%" p={1} alignItems="stretch" justifyContent="center">
-          <Button
-            component={Link}
+          <InternalLinkButton
             to="/workspace-settings/accounts/setup-cloud/azure"
             color="primary"
             sx={{
@@ -76,7 +73,7 @@ export default function WorkspaceSettingsAccountsSetupCloudPage() {
             <Typography variant="h3" textAlign="center">
               Azure
             </Typography>
-          </Button>
+          </InternalLinkButton>
         </Stack>
       </Stack>
     </Stack>

diff --git a/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountRow.tsx b/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountRow.tsx
@@ -19,7 +19,8 @@ import {
   Typography,
 } from '@mui/material'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { AxiosError } from 'axios'
+import { FormEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { useUserProfile } from 'src/core/auth'
 import { CloudAvatar } from 'src/shared/cloud-avatar'
 import { InternalLinkButton } from 'src/shared/link-button'
@@ -38,13 +39,21 @@ import { replaceRowByAccount } from './replaceRowByAccount'
 
 interface WorkspaceSettingsAccountRowProps {
   account: Account
+  enableErrorModalContent?: ReactNode
   isNotConfigured?: boolean
+  canEnable?: boolean
 }
-export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: WorkspaceSettingsAccountRowProps) => {
+export const WorkspaceSettingsAccountRow = ({
+  account,
+  enableErrorModalContent,
+  isNotConfigured,
+  canEnable,
+}: WorkspaceSettingsAccountRowProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const {
     i18n: { locale },
   } = useLingui()
+  const showCannotEnableModalRef = useRef<(show?: boolean) => void>()
   const showDeleteModalRef = useRef<(show?: boolean) => void>()
   const showDegradedModalRef = useRef<(show?: boolean) => void>()
   const { selectedWorkspace, checkPermission } = useUserProfile()
@@ -120,18 +129,27 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
   }
 
   const handleEnableChange = (_: unknown, checked: boolean) => {
-    if (selectedWorkspace?.id) {
-      return (checked ? enableAccount : disableAccount)(
-        { workspaceId: selectedWorkspace.id, id: account.id },
-        {
-          onSuccess: (data) => {
-            void queryClient.invalidateQueries({
-              predicate: (query) => typeof query.queryKey[0] === 'string' && query.queryKey[0].startsWith('workspace-cloud-account'),
-            })
-            replaceRowByAccount(queryClient, data, selectedWorkspace?.id)
+    if (canEnable || !checked) {
+      if (selectedWorkspace?.id) {
+        return (checked ? enableAccount : disableAccount)(
+          { workspaceId: selectedWorkspace.id, id: account.id },
+          {
+            onSuccess: (data) => {
+              void queryClient.invalidateQueries({
+                predicate: (query) => typeof query.queryKey[0] === 'string' && query.queryKey[0].startsWith('workspace-cloud-account'),
+              })
+              replaceRowByAccount(queryClient, data, selectedWorkspace?.id)
+            },
+            onError: (err) => {
+              if ((err as AxiosError)?.status === 403) {
+                showCannotEnableModalRef.current?.(true)
+              }
+            },
           },
-        },
-      )
+        )
+      }
+    } else {
+      showCannotEnableModalRef.current?.(true)
     }
   }
 
@@ -478,6 +496,17 @@ export const WorkspaceSettingsAccountRow = ({ account, isNotConfigured }: Worksp
           <Trans>Name</Trans>: {accountName}
         </Typography>
       </Modal>
+      <Modal
+        title={<Trans>Cannot enable this account</Trans>}
+        openRef={showCannotEnableModalRef}
+        actions={
+          <Button color="primary" variant="contained" onClick={() => showCannotEnableModalRef.current?.(false)}>
+            <Trans>Ok</Trans>
+          </Button>
+        }
+      >
+        {enableErrorModalContent}
+      </Modal>
     </TableRow>
   )
 }
diff --git a/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountTableTitle.tsx b/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountTableTitle.tsx
@@ -4,9 +4,10 @@ import { AddAccountButton } from 'src/shared/add-account-button'
 
 interface WorkspaceSettingsAccountTableTitleProps extends PropsWithChildren {
   isTop: boolean
+  withAddButton?: boolean
 }
 
-export const WorkspaceSettingsAccountTableTitle = ({ isTop, children }: WorkspaceSettingsAccountTableTitleProps) =>
+export const WorkspaceSettingsAccountTableTitle = ({ isTop, withAddButton, children }: WorkspaceSettingsAccountTableTitleProps) =>
   isTop ? (
     <Stack
       mb={{ xs: 0, sm: 1 }}
@@ -16,7 +17,7 @@ export const WorkspaceSettingsAccountTableTitle = ({ isTop, children }: Workspac
       justifyContent={isTop ? 'space-between' : undefined}
     >
       <Typography variant="h4">{children}</Typography>
-      <AddAccountButton />
+      {withAddButton ? <AddAccountButton /> : null}
     </Stack>
   ) : (
     <Box mb={{ xs: 0, sm: 1 }}>

diff --git a/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountsTable.tsx b/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountsTable.tsx
@@ -1,16 +1,61 @@
-import { t } from '@lingui/macro'
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { plural, t, Trans } from '@lingui/macro'
+import { Alert, Typography } from '@mui/material'
+import { useSuspenseQueries } from '@tanstack/react-query'
 import { useUserProfile } from 'src/core/auth'
-import { getWorkspaceCloudAccountsQuery } from 'src/pages/panel/shared/queries'
+import { getWorkspaceCloudAccountsQuery, getWorkspaceProductTiersQuery } from 'src/pages/panel/shared/queries'
+import { InternalLink } from 'src/shared/link-button'
+import { GetWorkspaceProductTiersResponse } from 'src/shared/types/server'
 import { WorkspaceSettingsAccountsTableItem } from './WorkspaceSettingsAccountsTableItem'
 
 export const WorkspaceSettingsAccountsTable = () => {
   const { selectedWorkspace } = useUserProfile()
-  const { data } = useSuspenseQuery({
-    queryKey: ['workspace-cloud-accounts', selectedWorkspace?.id, false],
-    queryFn: getWorkspaceCloudAccountsQuery,
+  const [{ data }, { data: currentTier }] = useSuspenseQueries({
+    queries: [
+      {
+        queryKey: ['workspace-cloud-accounts', selectedWorkspace?.id, false],
+        queryFn: getWorkspaceCloudAccountsQuery,
+      },
+      {
+        queryFn: getWorkspaceProductTiersQuery,
+        queryKey: ['workspace-product-tiers', selectedWorkspace?.id],
+        select: (data: GetWorkspaceProductTiersResponse) => (selectedWorkspace?.tier ? data[selectedWorkspace.tier] : undefined),
+      },
+    ],
   })
 
+  const accountLength =
+    typeof data === 'object'
+      ? [
+          ...new Set(
+            [...data.added, ...data.discovered, ...data.recent].filter((acc) => acc.enabled && acc.is_configured).map((acc) => acc.id),
+          ),
+        ].length
+      : 0
+  const accountLimit = currentTier?.account_limit ?? Number.POSITIVE_INFINITY
+
+  const canInviteBasedOnTier = accountLimit > accountLength
+
+  const enableErrorModalContent = canInviteBasedOnTier ? null : (
+    <Alert color="warning">
+      <Typography>
+        <Trans>
+          You currently have{' '}
+          {plural(accountLength, {
+            one: '# enabled cloud account',
+            other: '# enabled cloud accounts',
+          })}
+          . There must only be{' '}
+          {plural(accountLimit ?? 1, {
+            one: '# cloud account',
+            other: '# cloud accounts',
+          })}{' '}
+          enabled in {selectedWorkspace?.tier} tier. To increase your cloud account limit, you can upgrade your product tier{' '}
+          <InternalLink to="/workspace-settings/billing-receipts">here</InternalLink>.
+        </Trans>
+      </Typography>
+    </Alert>
+  )
+
   return (
     typeof data !== 'string' && (
       <>
@@ -20,6 +65,8 @@ export const WorkspaceSettingsAccountsTable = () => {
             isTop
             isBottom={!data.discovered.length && !data.added.length}
             title={t`Recently added accounts`}
+            canInviteBasedOnTier={canInviteBasedOnTier}
+            enableErrorModalContent={enableErrorModalContent}
           />
         ) : null}
         {data?.added.length ? (
@@ -28,6 +75,8 @@ export const WorkspaceSettingsAccountsTable = () => {
             isTop={!data.recent.length}
             isBottom={!data.discovered.length}
             title={t`Added accounts`}
+            canInviteBasedOnTier={canInviteBasedOnTier}
+            enableErrorModalContent={enableErrorModalContent}
           />
         ) : null}
         {data?.discovered.length ? (
@@ -36,6 +85,8 @@ export const WorkspaceSettingsAccountsTable = () => {
             isTop={!data.recent.length && !data.added.length}
             isBottom
             title={t`Discovered but unconfigured accounts`}
+            canInviteBasedOnTier={canInviteBasedOnTier}
+            enableErrorModalContent={enableErrorModalContent}
             isNotConfigured
           />
         ) : null}

diff --git a/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountsTableItem.tsx b/src/pages/panel/workspace-settings-accounts/WorkspaceSettingsAccountsTableItem.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { useUserProfile } from 'src/core/auth'
 import { panelUI } from 'src/shared/constants'
 import { TableView } from 'src/shared/layouts/panel-layout'
@@ -15,6 +15,8 @@ interface WorkspaceSettingsAccountsTableItemProps {
   isTop: boolean
   isBottom: boolean
   isNotConfigured?: boolean
+  canInviteBasedOnTier?: boolean
+  enableErrorModalContent: ReactNode
 }
 
 export const WorkspaceSettingsAccountsTableItem = ({
@@ -23,6 +25,8 @@ export const WorkspaceSettingsAccountsTableItem = ({
   isTop,
   isBottom,
   isNotConfigured,
+  canInviteBasedOnTier,
+  enableErrorModalContent,
 }: WorkspaceSettingsAccountsTableItemProps) => {
   const { checkPermission } = useUserProfile()
   const hasPermission = checkPermission('updateCloudAccounts')
@@ -34,7 +38,9 @@ export const WorkspaceSettingsAccountsTableItem = ({
   )
   return (
     <Box mb={isBottom ? undefined : { xs: 8, sm: 5 }} mt={isTop ? undefined : { sm: 3 }}>
-      <WorkspaceSettingsAccountTableTitle isTop={isTop}>{title}</WorkspaceSettingsAccountTableTitle>
+      <WorkspaceSettingsAccountTableTitle isTop={isTop} withAddButton={canInviteBasedOnTier}>
+        {title}
+      </WorkspaceSettingsAccountTableTitle>
       <TableView
         stickyPagination
         paginationProps={{
@@ -89,7 +95,13 @@ export const WorkspaceSettingsAccountsTableItem = ({
             {data
               ?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               .map((account, i) => (
-                <WorkspaceSettingsAccountRow account={account} key={`${account.id}_${i}`} isNotConfigured={isNotConfigured} />
+                <WorkspaceSettingsAccountRow
+                  account={account}
+                  key={`${account.id}_${i}`}
+                  isNotConfigured={isNotConfigured}
+                  canEnable={canInviteBasedOnTier}
+                  enableErrorModalContent={enableErrorModalContent}
+                />
               ))}
           </TableBody>
         </Table>