d61511262e
* Add folder for api settings * Init create api key page * Update create api key page * Implement api call to create apiKey * Add create api key mutation * Get id when creating apiKey * Display created Api Key * Add delete api key button * Remove button from InputText * Update stuff * Add test for ApiDetail * Fix type * Use recoil instead of router state * Remane route paths * Remove online return * Move and test date util * Remove useless Component * Rename ApiKeys paths * Rename ApiKeys files * Add input text info testing * Rename hooks to webhooks * Remove console error * Add tests to reach minimum coverage
77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { useRecoilState } from 'recoil';
|
|
|
|
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
|
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
|
import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
|
|
import { generatedApiKeyState } from '@/settings/developers/states/generatedApiKeyState';
|
|
import { IconSettings, IconTrash } from '@/ui/display/icon';
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { Button } from '@/ui/input/button/components/Button';
|
|
import { TextInput } from '@/ui/input/components/TextInput';
|
|
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
|
import { Section } from '@/ui/layout/section/components/Section';
|
|
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
|
import {
|
|
useDeleteOneApiKeyMutation,
|
|
useGetApiKeyQuery,
|
|
} from '~/generated/graphql';
|
|
|
|
export const SettingsDevelopersApiKeyDetail = () => {
|
|
const navigate = useNavigate();
|
|
const { apiKeyId = '' } = useParams();
|
|
const [generatedApiKey] = useRecoilState(generatedApiKeyState);
|
|
const apiKeyQuery = useGetApiKeyQuery({
|
|
variables: {
|
|
apiKeyId,
|
|
},
|
|
});
|
|
const [deleteApiKey] = useDeleteOneApiKeyMutation();
|
|
const deleteIntegration = async () => {
|
|
await deleteApiKey({ variables: { apiKeyId } });
|
|
navigate('/settings/developers/api-keys');
|
|
};
|
|
const { expiresAt, name } = apiKeyQuery.data?.findManyApiKey[0] || {};
|
|
|
|
return (
|
|
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
|
<SettingsPageContainer>
|
|
<SettingsHeaderContainer>
|
|
<Breadcrumb
|
|
links={[
|
|
{ children: 'APIs', href: '/settings/developers/api-keys' },
|
|
{ children: name || '' },
|
|
]}
|
|
/>
|
|
</SettingsHeaderContainer>
|
|
<Section>
|
|
<H2Title
|
|
title="Api Key"
|
|
description="Copy this key as it will only be visible this one time"
|
|
/>
|
|
<ApiKeyInput expiresAt={expiresAt} apiKey={generatedApiKey || ''} />
|
|
</Section>
|
|
<Section>
|
|
<H2Title title="Name" description="Name of your API key" />
|
|
<TextInput
|
|
placeholder="E.g. backoffice integration"
|
|
value={name || ''}
|
|
disabled={true}
|
|
fullWidth
|
|
/>
|
|
</Section>
|
|
<Section>
|
|
<H2Title title="Danger zone" description="Delete this integration" />
|
|
<Button
|
|
accent="danger"
|
|
variant="secondary"
|
|
title="Disable"
|
|
Icon={IconTrash}
|
|
onClick={deleteIntegration}
|
|
/>
|
|
</Section>
|
|
</SettingsPageContainer>
|
|
</SubMenuTopBarContainer>
|
|
);
|
|
};
|