feat: added webhook list section and updated api key section (#3567)
* feat: added webhook list section and updated api key ui * Fix style * Fix webhook style * Update setting path * Add soon pill on not developped features * Code review returns --------- Co-authored-by: Lakshay saini <lakshay.saini@finmo.net> Co-authored-by: martmull <martmull@hotmail.fr>
This commit is contained in:
Lakshay saini
@ -1,201 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
import { DateTime } from 'luxon';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { ApiKeyInput } from '@/settings/developers/components/ApiKeyInput';
|
||||
import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
|
||||
import { generatedApiKeyFamilyState } from '@/settings/developers/states/generatedApiKeyFamilyState';
|
||||
import { ApiKey } from '@/settings/developers/types/ApiKey';
|
||||
import { computeNewExpirationDate } from '@/settings/developers/utils/compute-new-expiration-date';
|
||||
import { formatExpiration } from '@/settings/developers/utils/format-expiration';
|
||||
import { IconRepeat, 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 { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
|
||||
|
||||
const StyledInfo = styled.span`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
`;
|
||||
|
||||
const StyledInputContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const SettingsDevelopersApiKeyDetail = () => {
|
||||
const navigate = useNavigate();
|
||||
const { apiKeyId = '' } = useParams();
|
||||
|
||||
const setGeneratedApi = useGeneratedApiKeys();
|
||||
const [generatedApiKey] = useRecoilState(
|
||||
generatedApiKeyFamilyState(apiKeyId),
|
||||
);
|
||||
const { performOptimisticEvict } = useOptimisticEvict();
|
||||
|
||||
const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
|
||||
const { createOneRecord: createOneApiKey } = useCreateOneRecord<ApiKey>({
|
||||
objectNameSingular: CoreObjectNameSingular.ApiKey,
|
||||
});
|
||||
const { updateOneRecord: updateApiKey } = useUpdateOneRecord<ApiKey>({
|
||||
objectNameSingular: CoreObjectNameSingular.ApiKey,
|
||||
});
|
||||
|
||||
const { record: apiKeyData } = useFindOneRecord({
|
||||
objectNameSingular: CoreObjectNameSingular.ApiKey,
|
||||
objectRecordId: apiKeyId,
|
||||
});
|
||||
|
||||
const deleteIntegration = async (redirect = true) => {
|
||||
await updateApiKey?.({
|
||||
idToUpdate: apiKeyId,
|
||||
updateOneRecordInput: { revokedAt: DateTime.now().toString() },
|
||||
});
|
||||
performOptimisticEvict('ApiKey', 'id', apiKeyId);
|
||||
if (redirect) {
|
||||
navigate('/settings/developers/api-keys');
|
||||
}
|
||||
};
|
||||
|
||||
const createIntegration = async (
|
||||
name: string,
|
||||
newExpiresAt: string | null,
|
||||
) => {
|
||||
const newApiKey = await createOneApiKey?.({
|
||||
name: name,
|
||||
expiresAt: newExpiresAt ?? '',
|
||||
});
|
||||
|
||||
if (!newApiKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenData = await generateOneApiKeyToken({
|
||||
variables: {
|
||||
apiKeyId: newApiKey.id,
|
||||
expiresAt: newApiKey?.expiresAt,
|
||||
},
|
||||
});
|
||||
return {
|
||||
id: newApiKey.id,
|
||||
token: tokenData.data?.generateApiKeyToken.token,
|
||||
};
|
||||
};
|
||||
|
||||
const regenerateApiKey = async () => {
|
||||
if (apiKeyData?.name) {
|
||||
const newExpiresAt = computeNewExpirationDate(
|
||||
apiKeyData.expiresAt,
|
||||
apiKeyData.createdAt,
|
||||
);
|
||||
const apiKey = await createIntegration(apiKeyData.name, newExpiresAt);
|
||||
await deleteIntegration(false);
|
||||
|
||||
if (apiKey && apiKey.token) {
|
||||
setGeneratedApi(apiKey.id, apiKey.token);
|
||||
navigate(`/settings/developers/api-keys/${apiKey.id}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (apiKeyData) {
|
||||
return () => {
|
||||
setGeneratedApi(apiKeyId, null);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{apiKeyData?.name && (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'APIs', href: '/settings/developers/api-keys' },
|
||||
{ children: apiKeyData.name },
|
||||
]}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
{generatedApiKey ? (
|
||||
<>
|
||||
<H2Title
|
||||
title="Api Key"
|
||||
description="Copy this key as it will only be visible this one time"
|
||||
/>
|
||||
<ApiKeyInput apiKey={generatedApiKey} />
|
||||
<StyledInfo>
|
||||
{formatExpiration(apiKeyData?.expiresAt || '', true, false)}
|
||||
</StyledInfo>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<H2Title
|
||||
title="Api Key"
|
||||
description="Regenerate an Api key"
|
||||
/>
|
||||
<StyledInputContainer>
|
||||
<Button
|
||||
title="Regenerate Key"
|
||||
Icon={IconRepeat}
|
||||
onClick={regenerateApiKey}
|
||||
/>
|
||||
<StyledInfo>
|
||||
{formatExpiration(
|
||||
apiKeyData?.expiresAt || '',
|
||||
true,
|
||||
false,
|
||||
)}
|
||||
</StyledInfo>
|
||||
</StyledInputContainer>
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title title="Name" description="Name of your API key" />
|
||||
<TextInput
|
||||
placeholder="E.g. backoffice integration"
|
||||
value={apiKeyData.name}
|
||||
disabled
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,102 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
|
||||
import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
|
||||
import { formatExpirations } from '@/settings/developers/utils/format-expiration';
|
||||
import { IconPlus, IconSettings } from '@/ui/display/icon';
|
||||
import { H1Title } from '@/ui/display/typography/components/H1Title';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Button } from '@/ui/input/button/components/Button';
|
||||
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
|
||||
import { Table } from '@/ui/layout/table/components/Table';
|
||||
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
|
||||
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
height: fit-content;
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(8)};
|
||||
`;
|
||||
|
||||
const StyledH1Title = styled(H1Title)`
|
||||
margin-bottom: 0;
|
||||
`;
|
||||
|
||||
export const SettingsDevelopersApiKeys = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [apiKeys, setApiKeys] = useState<Array<ApiFieldItem>>([]);
|
||||
|
||||
useFindManyRecords({
|
||||
objectNameSingular: CoreObjectNameSingular.ApiKey,
|
||||
filter: { revokedAt: { is: 'NULL' } },
|
||||
orderBy: {},
|
||||
onCompleted: (data) => {
|
||||
setApiKeys(
|
||||
formatExpirations(
|
||||
data.edges.map((apiKey) => ({
|
||||
id: apiKey.node.id,
|
||||
name: apiKey.node.name,
|
||||
expiresAt: apiKey.node.expiresAt,
|
||||
})),
|
||||
),
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<StyledContainer>
|
||||
<StyledHeader>
|
||||
<StyledH1Title title="APIs" />
|
||||
<Button
|
||||
Icon={IconPlus}
|
||||
title="Create Key"
|
||||
accent="blue"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
navigate('/settings/developers/api-keys/new');
|
||||
}}
|
||||
/>
|
||||
</StyledHeader>
|
||||
<H2Title
|
||||
title="Active Keys"
|
||||
description="Active APIs keys created by you or your team"
|
||||
/>
|
||||
<Table>
|
||||
<StyledTableRow>
|
||||
<TableHeader>Name</TableHeader>
|
||||
<TableHeader>Type</TableHeader>
|
||||
<TableHeader>Expiration</TableHeader>
|
||||
<TableHeader></TableHeader>
|
||||
</StyledTableRow>
|
||||
{apiKeys.map((fieldItem) => (
|
||||
<SettingsApiKeysFieldItemTableRow
|
||||
key={fieldItem.id}
|
||||
fieldItem={fieldItem}
|
||||
onClick={() => {
|
||||
navigate(`/settings/developers/api-keys/${fieldItem.id}`);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Table>
|
||||
</StyledContainer>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
@ -1,115 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { DateTime } from 'luxon';
|
||||
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
|
||||
import { ExpirationDates } from '@/settings/developers/constants/expirationDates';
|
||||
import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
|
||||
import { ApiKey } from '@/settings/developers/types/ApiKey';
|
||||
import { IconSettings } from '@/ui/display/icon';
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
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 { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
|
||||
|
||||
export const SettingsDevelopersApiKeysNew = () => {
|
||||
const [generateOneApiKeyToken] = useGenerateApiKeyTokenMutation();
|
||||
const navigate = useNavigate();
|
||||
const setGeneratedApi = useGeneratedApiKeys();
|
||||
const [formValues, setFormValues] = useState<{
|
||||
name: string;
|
||||
expirationDate: number | null;
|
||||
}>({
|
||||
expirationDate: ExpirationDates[0].value,
|
||||
name: '',
|
||||
});
|
||||
|
||||
const { createOneRecord: createOneApiKey } = useCreateOneRecord<ApiKey>({
|
||||
objectNameSingular: CoreObjectNameSingular.ApiKey,
|
||||
});
|
||||
|
||||
const onSave = async () => {
|
||||
const expiresAt = DateTime.now()
|
||||
.plus({ days: formValues.expirationDate ?? 30 })
|
||||
.toString();
|
||||
const newApiKey = await createOneApiKey?.({
|
||||
name: formValues.name,
|
||||
expiresAt,
|
||||
});
|
||||
|
||||
if (!newApiKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tokenData = await generateOneApiKeyToken({
|
||||
variables: {
|
||||
apiKeyId: newApiKey.id,
|
||||
expiresAt: expiresAt,
|
||||
},
|
||||
});
|
||||
if (tokenData.data?.generateApiKeyToken) {
|
||||
setGeneratedApi(newApiKey.id, tokenData.data.generateApiKeyToken.token);
|
||||
navigate(`/settings/developers/api-keys/${newApiKey.id}`);
|
||||
}
|
||||
};
|
||||
const canSave = !!formValues.name && createOneApiKey;
|
||||
return (
|
||||
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
|
||||
<SettingsPageContainer>
|
||||
<SettingsHeaderContainer>
|
||||
<Breadcrumb
|
||||
links={[
|
||||
{ children: 'APIs', href: '/settings/developers/api-keys' },
|
||||
{ children: 'New' },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
isSaveDisabled={!canSave}
|
||||
onCancel={() => {
|
||||
navigate('/settings/developers/api-keys');
|
||||
}}
|
||||
onSave={onSave}
|
||||
/>
|
||||
</SettingsHeaderContainer>
|
||||
<Section>
|
||||
<H2Title title="Name" description="Name of your API key" />
|
||||
<TextInput
|
||||
placeholder="E.g. backoffice integration"
|
||||
value={formValues.name}
|
||||
onChange={(value) => {
|
||||
setFormValues((prevState) => ({
|
||||
...prevState,
|
||||
name: value,
|
||||
}));
|
||||
}}
|
||||
fullWidth
|
||||
/>
|
||||
</Section>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Expiration Date"
|
||||
description="When the API key will expire."
|
||||
/>
|
||||
<Select
|
||||
dropdownId="object-field-type-select"
|
||||
options={ExpirationDates}
|
||||
value={formValues.expirationDate}
|
||||
onChange={(value) => {
|
||||
setFormValues((prevState) => ({
|
||||
...prevState,
|
||||
expirationDate: value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Section>
|
||||
</SettingsPageContainer>
|
||||
</SubMenuTopBarContainer>
|
||||
);
|
||||
};
|
||||
@ -1,29 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
const meta: Meta<PageDecoratorArgs> = {
|
||||
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeys',
|
||||
component: SettingsDevelopersApiKeys,
|
||||
decorators: [PageDecorator],
|
||||
args: { routePath: '/settings/developers/api-keys' },
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeys>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
const meta: Meta<PageDecoratorArgs> = {
|
||||
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeyDetail',
|
||||
component: SettingsDevelopersApiKeyDetail,
|
||||
decorators: [PageDecorator],
|
||||
args: {
|
||||
routePath: '/settings/apis/f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
|
||||
},
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
@ -1,29 +0,0 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
|
||||
import {
|
||||
PageDecorator,
|
||||
PageDecoratorArgs,
|
||||
} from '~/testing/decorators/PageDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { sleep } from '~/testing/sleep';
|
||||
|
||||
const meta: Meta<PageDecoratorArgs> = {
|
||||
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
|
||||
component: SettingsDevelopersApiKeysNew,
|
||||
decorators: [PageDecorator],
|
||||
args: { routePath: '/settings/developers/api-keys/new' },
|
||||
parameters: {
|
||||
msw: graphqlMocks,
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async () => {
|
||||
await sleep(100);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user