feat(fronted): tenanted admin api credentials #3213
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { Form, useActionData, useNavigation } from '@remix-run/react' | ||
| import { useRef, useState, useEffect } from 'react' | ||
| import { Input, Button } from '~/components/ui' | ||
| import { validate as validateUUID } from 'uuid' | ||
|
|
||
| interface ApiCredentialsFormProps { | ||
| showClearCredentials: boolean | ||
| defaultTenantId: string | ||
| defaultApiSecret: string | ||
| } | ||
|
|
||
| interface ActionErrorResponse { | ||
| status: number | ||
| statusText: string | ||
| } | ||
|
|
||
| export const ApiCredentialsForm = ({ | ||
| showClearCredentials, | ||
| defaultTenantId, | ||
| defaultApiSecret | ||
| }: ApiCredentialsFormProps) => { | ||
| const actionData = useActionData<ActionErrorResponse>() | ||
| const navigation = useNavigation() | ||
| const inputRef = useRef<HTMLInputElement>(null) | ||
| const formRef = useRef<HTMLFormElement>(null) | ||
| const [tenantIdError, setTenantIdError] = useState<string | null>(null) | ||
|
|
||
| const isSubmitting = navigation.state === 'submitting' | ||
|
|
||
| const handleTenantIdChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| const tenantId = event.target.value.trim() | ||
|
|
||
| if (tenantId === '') { | ||
| setTenantIdError('Tenant ID is required') | ||
| } else if (!validateUUID(tenantId)) { | ||
| setTenantIdError('Invalid Tenant ID (must be a valid UUID)') | ||
| } else { | ||
| setTenantIdError(null) | ||
| } | ||
| } | ||
|
|
||
| // auto submit form if values passed in | ||
| useEffect(() => { | ||
| if (defaultTenantId && defaultApiSecret && !tenantIdError) { | ||
| if (formRef.current) { | ||
| formRef.current.submit() | ||
| } | ||
| } | ||
| }, [defaultTenantId, defaultApiSecret, tenantIdError]) | ||
|
|
||
| return ( | ||
| <div className='space-y-4'> | ||
| {showClearCredentials ? ( | ||
| <Form method='post' action='/api/set-credentials' className='space-y-4'> | ||
| <p className='text-green-600'>✓ API credentials configured</p> | ||
| <input hidden readOnly name='intent' value='clear' /> | ||
| <Button | ||
| type='submit' | ||
| intent='danger' | ||
| aria-label='Clear API credentials' | ||
| disabled={isSubmitting} | ||
| > | ||
| {isSubmitting ? 'Submitting...' : 'Clear Credentials'} | ||
| </Button> | ||
| </Form> | ||
| ) : ( | ||
| <Form | ||
| method='post' | ||
| action='/api/set-credentials' | ||
| className='space-y-4' | ||
| ref={formRef} // Reference for the credentials form | ||
| > | ||
| <Input | ||
| ref={inputRef} | ||
| required | ||
| type='text' | ||
| name='tenantId' | ||
| label='Tenant ID' | ||
| defaultValue={defaultTenantId} | ||
| onChange={handleTenantIdChange} | ||
| aria-invalid={!!tenantIdError} | ||
| aria-describedby={tenantIdError ? 'tenantId-error' : undefined} | ||
| /> | ||
| {tenantIdError && ( | ||
| <p id='tenantId-error' className='text-red-500 text-sm'> | ||
| {tenantIdError} | ||
| </p> | ||
| )} | ||
| <Input | ||
| required | ||
| type='password' | ||
| name='apiSecret' | ||
| label='API Secret' | ||
| defaultValue={defaultApiSecret} | ||
| /> | ||
| <input hidden readOnly name='intent' value='save' /> | ||
| <div className='flex justify-center'> | ||
| <Button | ||
| type='submit' | ||
| aria-label='Save API credentials' | ||
| disabled={!!tenantIdError || isSubmitting} | ||
| > | ||
| {isSubmitting ? 'Submitting...' : 'Save Credentials'} | ||
| </Button> | ||
| </div> | ||
| </Form> | ||
| )} | ||
| {actionData?.statusText && ( | ||
| <div className='text-red-500'>{actionData.statusText}</div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,9 +27,10 @@ import type { | |
| WithdrawAssetLiquidity, | ||
| WithdrawAssetLiquidityVariables | ||
| } from '~/generated/graphql' | ||
| import { getApolloClient } from '../apollo.server' | ||
|
|
||
| export const getAssetInfo = async (request: Request, args: QueryAssetArgs) => { | ||
| const apolloClient = await getApolloClient(request) | ||
|
Comment on lines
+32
to
+33
There was a problem hiding this comment. example of changs to apollo client to support requestor specific api signature and tenant id header as described here: https://github.com/interledger/rafiki/pull/3213/files#r1916826388 The gql requests exported by these |
||
| const response = await apolloClient.query< | ||
| GetAssetQuery, | ||
| GetAssetQueryVariables | ||
|
|
@@ -56,7 +57,11 @@ export const getAssetInfo = async (args: QueryAssetArgs) => { | |
| return response.data.asset | ||
| } | ||
|
|
||
| export const getAssetWithFees = async ( | ||
| request: Request, | ||
| args: QueryAssetArgs | ||
| ) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.query< | ||
| GetAssetWithFeesQuery, | ||
| GetAssetWithFeesQueryVariables | ||
|
|
@@ -97,7 +102,8 @@ export const getAssetWithFees = async (args: QueryAssetArgs) => { | |
| return response.data.asset | ||
| } | ||
|
|
||
| export const listAssets = async (request: Request, args: QueryAssetsArgs) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.query< | ||
| ListAssetsQuery, | ||
| ListAssetsQueryVariables | ||
|
|
@@ -130,11 +136,11 @@ export const listAssets = async (args: QueryAssetsArgs) => { | |
| `, | ||
| variables: args | ||
| }) | ||
| return response.data.assets | ||
| } | ||
|
|
||
| export const createAsset = async (request: Request, args: CreateAssetInput) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| CreateAssetMutation, | ||
| CreateAssetMutationVariables | ||
|
|
@@ -166,7 +172,8 @@ export const createAsset = async (args: CreateAssetInput) => { | |
| return response.data?.createAsset | ||
| } | ||
|
|
||
| export const updateAsset = async (request: Request, args: UpdateAssetInput) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| UpdateAssetMutation, | ||
| UpdateAssetMutationVariables | ||
|
|
@@ -198,7 +205,8 @@ export const updateAsset = async (args: UpdateAssetInput) => { | |
| return response.data?.updateAsset | ||
| } | ||
|
|
||
| export const setFee = async (request: Request, args: SetFeeInput) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| SetFeeMutation, | ||
| SetFeeMutationVariables | ||
|
|
@@ -226,8 +234,10 @@ export const setFee = async (args: SetFeeInput) => { | |
| } | ||
|
|
||
| export const depositAssetLiquidity = async ( | ||
| request: Request, | ||
| args: DepositAssetLiquidityInput | ||
| ) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| DepositAssetLiquidityMutation, | ||
| DepositAssetLiquidityMutationVariables | ||
|
|
@@ -250,8 +260,10 @@ export const depositAssetLiquidity = async ( | |
| } | ||
|
|
||
| export const withdrawAssetLiquidity = async ( | ||
| request: Request, | ||
| args: CreateAssetLiquidityWithdrawalInput | ||
| ) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| WithdrawAssetLiquidity, | ||
| WithdrawAssetLiquidityVariables | ||
|
|
@@ -273,13 +285,13 @@ export const withdrawAssetLiquidity = async ( | |
| return response.data?.createAssetLiquidityWithdrawal | ||
| } | ||
|
|
||
| export const loadAssets = async (request: Request) => { | ||
| let assets: ListAssetsQuery['assets']['edges'] = [] | ||
| let hasNextPage = true | ||
| let after: string | undefined | ||
|
|
||
| while (hasNextPage) { | ||
| const response = await listAssets(request, { first: 100, after }) | ||
|
|
||
| if (!response.edges.length) { | ||
| return [] | ||
|
|
@@ -295,7 +307,8 @@ export const loadAssets = async () => { | |
| return assets | ||
| } | ||
|
|
||
| export const deleteAsset = async (request: Request, args: DeleteAssetInput) => { | ||
| const apolloClient = await getApolloClient(request) | ||
| const response = await apolloClient.mutate< | ||
| DeleteAssetMutation, | ||
| DeleteAssetMutationVariables | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It doesn't seem like
SIGNATURE_SECRETis set in the environment anymore.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It was removed from the frontend - is that what you're referring to? The docker compose sets them for the mock ase. When I spin up rafiki it doesnt error on the lines below for the secret, and it spits out a link with the
apiSecret.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, got it. My mistake.