feat: Add multi-cluster management (#1153)

www/src/components/account/billing/BillingStartTrialModal.tsx

@@ -40,7 +40,10 @@ function BillingStartTrialModal({
   onClose,
 }: BillingStartTrialModalProps) {
   const [beginTrial, { loading, error }] = useBeginTrialMutation({
-    onCompleted: onClose,
+    onCompleted: () => {
+      onClose()
+      window.location.reload()
+    },
   })
 
   return (

www/src/components/account/queries.ts

@@ -21,10 +21,11 @@ export const USERS_Q = gql`
     $serviceAccount: Boolean
     $all: Boolean
     $cursor: String
+    $first: Int = 20
   ) {
     users(
       q: $q
-      first: 20
+      first: $first
       after: $cursor
       serviceAccount: $serviceAccount
       all: $all

www/src/components/cluster/ClusterAdminsModal.tsx

@@ -1,14 +1,19 @@
 import { Button, Modal } from '@pluralsh/design-system'
 import { Flex } from 'honorable'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { useMutation } from '@apollo/client'
 
+import subscriptionContext from '../../contexts/SubscriptionContext'
+
 import { BindingInput } from '../account/Typeaheads'
 import { GqlError } from '../utils/Alert'
 import { UPDATE_SERVICE_ACCOUNT } from '../account/queries'
 import { sanitize } from '../account/utils'
 
+import UpgradeNeededModal from './UpgradeNeededModal'
+
 export function ClusterAdminsModal({ open, setOpen, serviceAccount }) {
+  const { isPaidPlan, isTrialPlan } = useContext(subscriptionContext)
   const [bindings, setBindings] = useState(
     serviceAccount.impersonationPolicy?.bindings || []
   )
@@ -21,6 +26,14 @@ export function ClusterAdminsModal({ open, setOpen, serviceAccount }) {
     onCompleted: () => setOpen(false),
   })
 
+  if (!(isPaidPlan || isTrialPlan))
+    return (
+      <UpgradeNeededModal
+        open={open}
+        onClose={() => setOpen(false)}
+      />
+    )
+
   return (
     <Modal
       header="Cluster administrators"

www/src/components/cluster/ClusterDependencyModal.tsx

@@ -1,14 +1,18 @@
 import { ArrowLeftIcon, Button, Modal } from '@pluralsh/design-system'
 import { Div, Flex } from 'honorable'
-import { Dispatch, useCallback, useState } from 'react'
+import { Dispatch, useCallback, useContext, useState } from 'react'
 import { useMutation } from '@apollo/client'
 
+import subscriptionContext from '../../contexts/SubscriptionContext'
+
 import { Cluster } from '../../generated/graphql'
 import { ClusterPicker } from '../utils/ClusterPicker'
 import { GqlError } from '../utils/Alert'
 
 import { CLUSTERS, CREATE_CLUSTER_DEPENDENCY } from '../overview/queries'
 
+import UpgradeNeededModal from './UpgradeNeededModal'
+
 type ClusterDependencyModalProps = {
   open: boolean
   setOpen: Dispatch<boolean>
@@ -20,6 +24,7 @@ export function ClusterDependencyModal({
   setOpen,
   destination,
 }: ClusterDependencyModalProps) {
+  const { isPaidPlan, isTrialPlan } = useContext(subscriptionContext)
   const [source, setSource] = useState<Cluster | undefined>()
 
   const close = useCallback(() => {
@@ -49,6 +54,14 @@ export function ClusterDependencyModal({
     [destination]
   )
 
+  if (!(isPaidPlan || isTrialPlan))
+    return (
+      <UpgradeNeededModal
+        open={open}
+        onClose={close}
+      />
+    )
+
   return (
     <Modal
       portal

www/src/components/cluster/UpgradeNeededModal.tsx

@@ -0,0 +1,55 @@
+import { Button, Modal, WarningIcon } from '@pluralsh/design-system'
+import { ReactElement } from 'react'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+
+const Wrap = styled.div((_) => ({
+  display: 'flex',
+  flexDirection: 'column',
+}))
+
+const Message = styled.div(({ theme }) => ({
+  ...theme.partials.text.body2,
+  marginBottom: theme.spacing.large,
+}))
+
+const Header = styled.div(({ theme }) => ({
+  ...theme.partials.text.overline,
+  display: 'flex',
+}))
+
+function UpgradeNeededModal({ open, onClose }): ReactElement {
+  const navigate = useNavigate()
+
+  return (
+    <Modal
+      BackdropProps={{ zIndex: 20 }}
+      header={
+        <Header>
+          <WarningIcon
+            color="icon-warning"
+            marginRight="xsmall"
+          />
+          Upgrade needed
+        </Header>
+      }
+      open={open}
+      onClose={() => onClose()}
+      style={{ padding: 0 }}
+    >
+      <Wrap>
+        <Message>
+          Upgrade to Plural Professional to access multi-cluster-management.
+        </Message>
+        <Button
+          alignSelf="flex-end"
+          onClick={() => navigate('/account/billing')}
+        >
+          Review plans
+        </Button>
+      </Wrap>
+    </Modal>
+  )
+}
+
+export default UpgradeNeededModal

www/src/components/overview/CreateClusterAction.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@pluralsh/design-system'
+import { ReactElement, useState } from 'react'
+
+import CreateClusterModal from './CreateClusterModal'
+
+function CreateClusterButton(): ReactElement {
+  const [createClusterModalOpen, setCreateClusterModalOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setCreateClusterModalOpen(true)}>
+        Create cluster
+      </Button>
+      {createClusterModalOpen && (
+        <CreateClusterModal
+          open={createClusterModalOpen}
+          onClose={() => setCreateClusterModalOpen(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default CreateClusterButton