feat: Plural OIDC clients

www/package.json

@@ -45,7 +45,7 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "3.75.0",
+    "@pluralsh/design-system": "3.75.1",
     "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",

www/src/components/app/oidc/OIDC.tsx

@@ -314,7 +314,7 @@ export function CreateProvider({ installation }: any) {
   const [bindings, setBindings] = useState([])
   const [mutation, { loading, error }] = useCreateProviderMutation({
     variables: {
-      id: installation.id,
+      installationId: installation.id,
       attributes: { ...attributes, bindings: bindings.map(sanitize) },
     },
     update: (cache, { data }) =>
@@ -384,7 +384,7 @@ export function UpdateProvider({ installation }: any) {
 
   const [mutation, { loading, error }] = useUpdateProviderMutation({
     variables: {
-      id: installation.id,
+      installationId: installation.id,
       attributes: {
         ...{
           redirectUris: attributes.redirectUris,

www/src/components/cluster/Cluster.tsx

@@ -13,13 +13,17 @@ import { useNavigate, useParams } from 'react-router-dom'
 
 import { CLUSTERS_ROOT_CRUMB } from 'components/overview/clusters/Clusters'
 
+import { useTheme } from 'styled-components'
+
 import ClustersContext from '../../contexts/ClustersContext'
 import CurrentUserContext from '../../contexts/CurrentUserContext'
 import { ensureURLValidity } from '../../utils/url'
 import { ClusterPicker } from '../utils/ClusterPicker'
 import ImpersonateServiceAccount from '../utils/ImpersonateServiceAccount'
 import { ResponsiveLayoutPage } from '../utils/layout/ResponsiveLayoutPage'
 
+import { EditPluralOIDCClients } from '../overview/clusters/plural-cloud/EditPluralOIDCClients'
+
 import { ClusterAdminsModal } from './ClusterAdminsModal'
 import { ClusterApps } from './ClusterApps'
 import { ClusterDependencyModal } from './ClusterDependencyModal'
@@ -29,6 +33,7 @@ import { ClusterSidecar } from './ClusterSidecar'
 import { CollapsibleButton } from './misc'
 
 export function Cluster() {
+  const theme = useTheme()
   const [dependencyOpen, setDependencyOpen] = useState(false)
   const [promoteOpen, setPromoteOpen] = useState(false)
   const [adminsOpen, setAdminsOpen] = useState(false)
@@ -69,10 +74,7 @@ export function Cluster() {
   }
 
   return (
-    <ResponsiveLayoutPage
-      gap="large"
-      overflowY="auto"
-    >
+    <ResponsiveLayoutPage gap="large">
       <Flex
         direction="column"
         grow={1}
@@ -172,12 +174,24 @@ export function Cluster() {
           direction="column"
           gap="medium"
           grow={1}
+          minHeight={0}
         >
           <ImpersonateServiceAccount
             id={cluster?.owner?.id}
             skip={!cluster.owner?.serviceAccount}
           >
-            <ClusterApps cluster={cluster} />
+            <>
+              <ClusterApps cluster={cluster} />
+              <div
+                css={{
+                  ...theme.partials.text.body1Bold,
+                  marginTop: theme.spacing.medium,
+                }}
+              >
+                Plural OIDC clients
+              </div>
+              <EditPluralOIDCClients instanceName={cluster.name} />
+            </>
           </ImpersonateServiceAccount>
         </Flex>
       </Flex>

www/src/components/cluster/ClusterApps.tsx

@@ -48,11 +48,13 @@ export function ClusterApps({
           placeholder="Search for a repository"
           disabled={isEmpty(apps)}
           border="none"
+          borderRadius={0}
           value={search}
           width="100%"
           onChange={({ target: { value } }) => setSearch(value)}
         />
       }
+      flexGrow={0}
     >
       {!isEmpty(apps) ? (
         <InfiniteScroller

www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx

@@ -2,10 +2,14 @@ import {
   AppIcon,
   Button,
   Chip,
+  CloudIcon,
   ConsoleIcon,
   Flex,
   ListBoxItem,
+  PeopleIcon,
+  PersonPlusIcon,
   Tooltip,
+  TrashCanIcon,
 } from '@pluralsh/design-system'
 import { createColumnHelper } from '@tanstack/react-table'
 import { ProviderIcon } from 'components/utils/ProviderIcon'
@@ -30,6 +34,7 @@ import { CellCaption, CellWrap } from '../SelfHostedTableCols'
 import { ConsoleInstanceOIDC } from './ConsoleInstanceOIDC'
 import { DeleteInstanceModal } from './DeleteInstance'
 import { EditInstanceSizeModal } from './EditInstance'
+import { EditPluralOIDCClientsModal } from './EditPluralOIDCClients'
 
 const columnHelper = createColumnHelper<ConsoleInstanceFragment>()
 
@@ -159,6 +164,7 @@ const ColOwner = columnHelper.accessor((instance) => instance.owner, {
 enum MenuItemKey {
   EditSize = 'editSize',
   EditOidc = 'editOidc',
+  EditPluralOIDCClients = 'editPluralOIDCClients',
   Delete = 'delete',
 }
 
@@ -194,7 +200,8 @@ const ColActions = columnHelper.accessor((instance) => instance, {
         <MoreMenu onSelectionChange={(newKey) => setMenuKey(newKey)}>
           <ListBoxItem
             key={MenuItemKey.EditSize}
-            label="Edit instance size"
+            label="Edit cloud instance size"
+            leftContent={<CloudIcon />}
           />
           <ListBoxItem
             key={MenuItemKey.EditOidc}
@@ -203,11 +210,18 @@ const ColActions = columnHelper.accessor((instance) => instance, {
                 <span>Edit cluster managers</span>
               </Tooltip>
             }
+            leftContent={<PersonPlusIcon />}
+          />
+          <ListBoxItem
+            key={MenuItemKey.EditPluralOIDCClients}
+            label="Edit Plural OIDC clients"
+            leftContent={<PeopleIcon />}
           />
           <ListBoxItem
             key={MenuItemKey.Delete}
             destructive
             label="Delete instance"
+            leftContent={<TrashCanIcon color="icon-danger" />}
           />
         </MoreMenu>
         {/* Modals */}
@@ -223,6 +237,11 @@ const ColActions = columnHelper.accessor((instance) => instance, {
           serviceAccount={instance.console?.owner}
           showHeading={false}
         />
+        <EditPluralOIDCClientsModal
+          open={menuKey === MenuItemKey.EditPluralOIDCClients}
+          onClose={onClose}
+          instance={instance}
+        />
         <DeleteInstanceModal
           open={menuKey === MenuItemKey.Delete}
           onClose={onClose}

www/src/components/overview/clusters/plural-cloud/ConsoleInstanceOIDC.tsx

@@ -2,6 +2,7 @@ import {
   Accordion,
   AccordionItem,
   Button,
+  ConsoleIcon,
   Flex,
   FormField,
   Modal,
@@ -57,6 +58,7 @@ export function ConsoleInstanceOIDC({
             label="Enable login for your team members for this console instance"
           >
             <Button
+              startIcon={<ConsoleIcon />}
               secondary
               onClick={() => setOpen(true)}
             >

www/src/components/overview/clusters/plural-cloud/DeletePluralOIDCClient.tsx

@@ -0,0 +1,121 @@
+import { Button, Input, Modal } from '@pluralsh/design-system'
+import {
+  OidcProviderFragment,
+  useDeleteProviderMutation,
+} from 'generated/graphql'
+import { useTheme } from 'styled-components'
+
+import { useState } from 'react'
+
+import { GqlError } from '../../../utils/Alert'
+
+export function DeletePluralOIDCClientModal({
+  open,
+  onClose,
+  provider,
+  refetch,
+}: {
+  open: boolean
+  onClose: () => void
+  provider?: OidcProviderFragment
+  refetch: () => void
+}) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      header="Confirm deletion"
+      size="large"
+    >
+      <DeletePluralOIDCClient
+        onClose={onClose}
+        provider={provider}
+        refetch={refetch}
+      />
+    </Modal>
+  )
+}
+
+function DeletePluralOIDCClient({
+  onClose,
+  provider,
+  refetch,
+}: {
+  onClose: () => void
+  provider?: OidcProviderFragment
+  refetch: () => void
+}) {
+  const theme = useTheme()
+  const [confirmText, setConfirmText] = useState('')
+
+  const [mutation, { loading, error }] = useDeleteProviderMutation({
+    variables: { id: provider?.id ?? '' },
+    onCompleted: () => {
+      onClose()
+      refetch()
+    },
+  })
+
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.xlarge,
+      }}
+    >
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: theme.spacing.small,
+        }}
+      >
+        <p>
+          Are you sure you want to delete this OIDC client? This action is not
+          reversible.
+          <br />
+          <br />
+          Type "
+          <span css={{ color: theme.colors['text-danger'] }}>
+            {provider?.name}
+          </span>
+          " to confirm deletion.
+        </p>
+        <Input
+          placeholder="Enter OIDC client name"
+          value={confirmText}
+          onChange={(e) => setConfirmText(e.target.value)}
+        />
+      </div>
+      {error && (
+        <GqlError
+          error={error}
+          header="Delete OIDC provider request failed"
+        />
+      )}
+      <div
+        css={{
+          display: 'flex',
+          justifyContent: 'end',
+          gap: theme.spacing.small,
+        }}
+      >
+        <Button
+          secondary
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          destructive
+          disabled={confirmText !== provider?.name}
+          loading={loading}
+          onClick={mutation}
+        >
+          Delete
+        </Button>
+      </div>
+    </div>
+  )
+}