feat: Console OIDC in Users tab (#377)

assets/src/components/account/users/OIDCInvite.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from '@apollo/client'
+import {
+  Button,
+  LoadingSpinner,
+  Modal,
+  PersonIcon,
+} from '@pluralsh/design-system'
+import { PluralApi } from 'components/PluralApi'
+import { UserManagementCard } from 'components/apps/app/oidc/UserManagement'
+import { INSTALLATION } from 'components/apps/app/oidc/queries'
+import { GqlError } from 'components/utils/Alert'
+import { useState } from 'react'
+
+function OIDCInner() {
+  const { data, error } = useQuery(INSTALLATION, {
+    variables: { name: 'console' },
+    fetchPolicy: 'cache-and-network',
+  })
+
+  if (error)
+    return (
+      <GqlError
+        header="Could not find console OIDC provider"
+        error={error}
+      />
+    )
+
+  if (!data?.installation) return <LoadingSpinner />
+
+  const { installation } = data
+
+  return (
+    <UserManagementCard
+      id={installation.id}
+      provider={installation.oidcProvider}
+      header="Console OpenID User Management"
+      description="Modify this console installation's OpenID provider to add or remove users"
+    />
+  )
+}
+
+export function OIDCInvite() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <div>
+        <Button
+          startIcon={<PersonIcon />}
+          secondary
+          onClick={() => setOpen(true)}
+        >
+          Manage users
+        </Button>
+      </div>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        size="large"
+      >
+        <PluralApi>
+          <OIDCInner />
+        </PluralApi>
+      </Modal>
+    </>
+  )
+}

assets/src/components/account/users/Users.tsx

@@ -8,6 +8,7 @@ import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
 
 import UserList from './UsersList'
 import UserInvite from './UserInvite'
+import { OIDCInvite } from './OIDCInvite'
 
 // const directory = [
 //   {
@@ -52,8 +53,8 @@ export default function Users() {
             </SubTab>
           ))}
         </TabList> */}
-          {/* Invites are only available when not using login with Plural. */}
           {configuration && !configuration?.pluralLogin && <UserInvite />}
+          {configuration?.pluralLogin && <OIDCInvite />}
         </Flex>
       }
     >

assets/src/components/apps/app/oidc/UserManagement.tsx

@@ -88,7 +88,12 @@ function areEquivalentBindings(bindings1, bindings2) {
   return true
 }
 
-function UserManagementCard({ id, provider }) {
+export function UserManagementCard({
+  id,
+  provider,
+  header = 'OpenID Connect',
+  description = 'Control which users and groups have access to this application with OIDC.',
+}) {
   const { authMethod, redirectUris, bindings: initialBindings } = provider
   const [bindings, setBindings] = useState(initialBindings)
   const [mutation, { loading, error }] = useMutation(UPDATE_PROVIDER, {
@@ -128,12 +133,7 @@ function UserManagementCard({ id, provider }) {
   const navBlocker = useNavBlocker(changed)
 
   return (
-    <Card
-      paddingHorizontal={100}
-      paddingVertical="large"
-      maxHeight="100%"
-      overflowY="auto"
-    >
+    <>
       {navBlocker}
       <Flex
         direction="column"
@@ -144,14 +144,13 @@ function UserManagementCard({ id, provider }) {
           body1
           fontWeight={600}
         >
-          OpenID Connect
+          {header}
         </P>
         <P
           body2
           color="text-light"
         >
-          Control which users and groups have access to this application with
-          OIDC.
+          {description}
         </P>
       </Flex>
       <Flex
@@ -217,7 +216,7 @@ function UserManagementCard({ id, provider }) {
           </Button>
         </Flex>
       </Flex>
-    </Card>
+    </>
   )
 }
 
@@ -232,7 +231,7 @@ function UserManagementContent() {
     return (
       <GqlError
         error={error}
-        header="Could not update provider"
+        header="Could not find provider"
       />
     )
   }
@@ -242,10 +241,17 @@ function UserManagementContent() {
   const { installation } = data
 
   return installation && installation.oidcProvider ? (
-    <UserManagementCard
-      id={installation.id}
-      provider={installation.oidcProvider}
-    />
+    <Card
+      paddingHorizontal={100}
+      paddingVertical="large"
+      maxHeight="100%"
+      overflowY="auto"
+    >
+      <UserManagementCard
+        id={installation.id}
+        provider={installation.oidcProvider}
+      />
+    </Card>
   ) : (
     <Flex
       maxHeight="100%"