feat(OIDC): API Access tab with trust relationships UI

frontend/common/services/useMasterAPIKeyWithMasterAPIKeyRole.ts

@@ -87,7 +87,7 @@ export async function getRolesMasterAPIKeyWithMasterAPIKeyRoles(
 
 export async function deleteMasterAPIKeyWithMasterAPIKeyRoles(
   store: any,
-  data: Req['getMasterAPIKeyWithMasterAPIKeyRoles'],
+  data: Req['deleteMasterAPIKeyWithMasterAPIKeyRoles'],
   options?: Parameters<
     typeof masterAPIKeyWithMasterAPIKeyRoleService.endpoints.deleteMasterAPIKeyWithMasterAPIKeyRoles.initiate
   >[1],

frontend/common/services/useTrustRelationship.ts

@@ -0,0 +1,87 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const trustRelationshipService = service
+  .enhanceEndpoints({
+    addTagTypes: ['TrustRelationship'],
+  })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createTrustRelationship: builder.mutation<
+        Res['trustRelationship'],
+        Req['createTrustRelationship']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'TrustRelationship' }],
+        query: (query: Req['createTrustRelationship']) => ({
+          body: query.body,
+          method: 'POST',
+          url: `organisations/${query.organisation_id}/trust-relationships/`,
+        }),
+      }),
+      deleteTrustRelationship: builder.mutation<
+        void,
+        Req['deleteTrustRelationship']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'TrustRelationship' }],
+        query: (query: Req['deleteTrustRelationship']) => ({
+          method: 'DELETE',
+          url: `organisations/${query.organisation_id}/trust-relationships/${query.id}/`,
+        }),
+      }),
+      getTrustRelationships: builder.query<
+        Res['trustRelationships'],
+        Req['getTrustRelationships']
+      >({
+        providesTags: [{ id: 'LIST', type: 'TrustRelationship' }],
+        query: (query: Req['getTrustRelationships']) => ({
+          url: `organisations/${query.organisation_id}/trust-relationships/`,
+        }),
+      }),
+      updateTrustRelationship: builder.mutation<
+        Res['trustRelationship'],
+        Req['updateTrustRelationship']
+      >({
+        invalidatesTags: (res) => [
+          { id: 'LIST', type: 'TrustRelationship' },
+          { id: res?.id, type: 'TrustRelationship' },
+        ],
+        query: (query: Req['updateTrustRelationship']) => ({
+          body: query.body,
+          method: 'PUT',
+          url: `organisations/${query.organisation_id}/trust-relationships/${query.id}/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getTrustRelationships(
+  store: any,
+  data: Req['getTrustRelationships'],
+  options?: Parameters<
+    typeof trustRelationshipService.endpoints.getTrustRelationships.initiate
+  >[1],
+) {
+  return store.dispatch(
+    trustRelationshipService.endpoints.getTrustRelationships.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useCreateTrustRelationshipMutation,
+  useDeleteTrustRelationshipMutation,
+  useGetTrustRelationshipsQuery,
+  useUpdateTrustRelationshipMutation,
+  // END OF EXPORTS
+} = trustRelationshipService
+
+/* Usage examples:
+const { data, isLoading } = useGetTrustRelationshipsQuery({ organisation_id: 2 }) //get hook
+const [createTrustRelationship, { isLoading, data, isSuccess }] = useCreateTrustRelationshipMutation() //create hook
+trustRelationshipService.endpoints.getTrustRelationships.select({organisation_id: 2})(store.getState()) //access data from any function
+*/

frontend/common/types/requests.ts

@@ -33,6 +33,7 @@ import {
   TagStrategy,
   FeatureType,
   LifecycleStage,
+  TrustRelationshipClaimRule,
 } from './responses'
 import { UtmsType } from './utms'
 
@@ -494,14 +495,41 @@ export type Req = {
   getRoleMasterApiKey: { org_id: number; role_id: number; id: string }
   updateRoleMasterApiKey: { org_id: number; role_id: number; id: string }
   deleteRoleMasterApiKey: { org_id: number; role_id: number; id: string }
-  createRoleMasterApiKey: { org_id: number; role_id: number }
+  createRoleMasterApiKey: {
+    org_id: number
+    role_id: number
+    body: { master_api_key: string }
+  }
   getMasterAPIKeyWithMasterAPIKeyRoles: { org_id: number; prefix: string }
   deleteMasterAPIKeyWithMasterAPIKeyRoles: {
     org_id: number
     prefix: string
     role_id: number
   }
   getRolesMasterAPIKeyWithMasterAPIKeyRoles: { org_id: number; prefix: string }
+  getTrustRelationships: { organisation_id: number }
+  createTrustRelationship: {
+    organisation_id: number
+    body: {
+      name: string
+      issuer: string
+      audience: string
+      claim_rules: TrustRelationshipClaimRule[]
+      is_admin: boolean
+    }
+  }
+  updateTrustRelationship: {
+    organisation_id: number
+    id: number
+    body: {
+      name: string
+      issuer: string
+      audience: string
+      claim_rules: TrustRelationshipClaimRule[]
+      is_admin: boolean
+    }
+  }
+  deleteTrustRelationship: { organisation_id: number; id: number }
   createLaunchDarklyProjectImport: {
     project_id: number
     body: {

frontend/common/types/responses.ts

@@ -1293,6 +1293,24 @@ export type WarehouseConnection = {
   unique_events_count: number | null
 }
 
+export type TrustRelationshipClaimRule = {
+  claim: string
+  values: string[]
+}
+
+export type TrustRelationship = {
+  id: number
+  name: string
+  issuer: string
+  audience: string
+  claim_rules: TrustRelationshipClaimRule[]
+  is_admin: boolean
+  master_api_key_id: string
+  master_api_key_prefix: string
+  created_at: string
+  created_by: number | null
+}
+
 export type Res = {
   segments: PagedResponse<Segment>
   segment: Segment
@@ -1383,6 +1401,8 @@ export type Res = {
   launchDarklyProjectImport: LaunchDarklyProjectImport
   launchDarklyProjectsImport: LaunchDarklyProjectImport[]
   roleMasterApiKey: { id: number; master_api_key: string; role: number }
+  trustRelationship: TrustRelationship
+  trustRelationships: PagedResponse<TrustRelationship>
   masterAPIKeyWithMasterAPIKeyRoles: {
     id: string
     prefix: string

frontend/web/components/AdminAPIKeys.js

@@ -7,6 +7,8 @@ import OrganisationStore from 'common/stores/organisation-store'
 import getUserDisplayName from 'common/utils/getUserDisplayName'
 import Token from './Token'
 import JSONReference from './JSONReference'
+import PageTitle from './PageTitle'
+import PlanBasedBanner from './PlanBasedAccess'
 import Button from './base/forms/Button'
 import DateSelect from './DateSelect'
 import Icon from './icons/Icon'
@@ -201,8 +203,8 @@ export class CreateAPIKey extends PureComponent {
                 />
               </Flex>
               <>
-                <Row className='mb-3 mt-4'>
-                  <label className='mr-2'>Is admin</label>
+                <Row className='mb-3 mt-4 gap-2'>
+                  <label className='mb-0'>Is admin</label>
                   <Switch
                     onChange={() => {
                       this.setState({
@@ -212,7 +214,13 @@ export class CreateAPIKey extends PureComponent {
                     checked={is_admin}
                     disabled={!Utils.getPlansPermission('RBAC') && is_admin}
                   />
+                  <PlanBasedBanner feature='RBAC' theme='badge' />
                 </Row>
+                <PlanBasedBanner
+                  feature='RBAC'
+                  theme='description'
+                  className='mb-4'
+                />
                 {!is_admin && (
                   <>
                     <Row className='mb-3 mt-4'>
@@ -439,12 +447,19 @@ export default class AdminAPIKeys extends PureComponent {
           title={'API Keys'}
           json={apiKeys}
         />
-        <Column className='my-4 ml-0 col-md-6'>
-          <h5 className='mb-1'>{`${'Manage'} API Keys`}</h5>
-          <p className='mb-0 fs-small lh-sm'>
-            {`API keys are used to authenticate with the Admin API.`}
-          </p>
-          <div className='mb-4 fs-small lh-sm'>
+        <div className='mt-4'>
+          <PageTitle
+            title='API keys'
+            cta={
+              <Button
+                onClick={this.createAPIKey}
+                disabled={this.state.isLoading}
+              >
+                {`Create API Key`}
+              </Button>
+            }
+          >
+            {`API keys are used to authenticate with the Admin API. `}
             <Button
               theme='text'
               href='https://docs.flagsmith.com/integrations/terraform#terraform-api-key'
@@ -453,11 +468,8 @@ export default class AdminAPIKeys extends PureComponent {
             >
               {`Learn about API Keys.`}
             </Button>
-          </div>
-          <Button onClick={this.createAPIKey} disabled={this.state.isLoading}>
-            {`Create API Key`}
-          </Button>
-        </Column>
+          </PageTitle>
+        </div>
         {(this.state.isLoading || !OrganisationStore.model?.users) && (
           <div className='text-center'>
             <Loader />

frontend/web/components/pages/organisation-settings/OrganisationSettingsPage.tsx

@@ -40,15 +40,20 @@ const OrganisationSettingsPage: FC = () => {
     API.trackPage(Constants.pages.ORGANISATION_SETTINGS)
   }, [])
 
-  // Back-compat: the SAML tab was renamed to SSO. Existing bookmarks and
-  // links pointing at ?tab=saml redirect to ?tab=sso so users land in the
-  // right place.
+  // Back-compat: renamed tabs redirect so existing bookmarks and links land
+  // in the right place (SAML became SSO; the API Keys tab became API Access
+  // with the `keys` slug).
   const history = useHistory()
   const location = useLocation()
   useEffect(() => {
+    const legacyTabs: Record<string, string> = {
+      'api-keys': 'keys',
+      'saml': 'sso',
+    }
     const params = new URLSearchParams(location.search)
-    if (params.get('tab') === 'saml') {
-      params.set('tab', 'sso')
+    const redirectTo = legacyTabs[params.get('tab') || '']
+    if (redirectTo) {
+      params.set('tab', redirectTo)
       history.replace(`${location.pathname}?${params.toString()}`)
     }
   }, [history, location])
@@ -116,7 +121,7 @@ const OrganisationSettingsPage: FC = () => {
       component: <APIKeysTab organisationId={organisation.id} />,
       isVisible: true,
       key: 'keys',
-      label: 'API Keys',
+      label: 'API Access',
     },
     {
       component: <WebhooksTab organisationId={organisation.id} />,
@@ -137,7 +142,12 @@ const OrganisationSettingsPage: FC = () => {
       <PageTitle title='Organisation Settings' />
       <Tabs urlParam='tab' className='mt-0' uncontrolled hideNavOnSingleTab>
         {tabs.map(({ component, key, label }) => (
-          <TabItem key={key} tabLabel={label} data-test={key}>
+          <TabItem
+            key={key}
+            tabLabel={label}
+            tabLabelString={key}
+            data-test={key}
+          >
             {component}
           </TabItem>
         ))}

frontend/web/components/pages/organisation-settings/tabs/APIKeysTab.tsx

@@ -1,10 +1,19 @@
 import React from 'react'
 import AdminAPIKeys from 'components/AdminAPIKeys'
+import Utils from 'common/utils/utils'
+import TrustRelationships from './trust-relationships'
 
 type APIKeysTabProps = {
   organisationId: number
 }
 
 export const APIKeysTab = ({ organisationId }: APIKeysTabProps) => {
-  return <AdminAPIKeys organisationId={organisationId} />
+  return (
+    <>
+      <AdminAPIKeys organisationId={organisationId} />
+      {Utils.getFlagsmithHasFeature('trust_relationships') && (
+        <TrustRelationships organisationId={organisationId} />
+      )}
+    </>
+  )
 }