2062 view edit an api key (#2231)

* Add query to get api keys

* Add a link to apiKey detail page

* Reset generatedApiKey when leaving page

* Simplify stuff

* Regenerate key when clicking on button

* Simplify

* Fix test

* Refetch apiKeys when delete or create one

* Add test for utils

* Create utils function

* Enable null expiration dates

* Update formatExpiration

* Fix display

* Fix noteCard

* Fix errors

* Fix reset

* Fix display

* Fix renaming

* Fix tests

* Fix ci

* Fix mocked data

* Fix test

* Update coverage requiremeents

* Rename folder

* Code review returns

* Symplify sht code
This commit is contained in:
martmull
2023-10-26 11:32:44 +02:00
committed by GitHub
parent 2b1945a3e1
commit fc4075b372
34 changed files with 434 additions and 183 deletions

View File

@ -1,13 +1,14 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getOperationName } from '@apollo/client/utilities';
import { DateTime } from 'luxon';
import { useRecoilState } from 'recoil';
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 { generatedApiKeyState } from '@/settings/developers/states/generatedApiKeyState';
import { GET_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
import { useGeneratedApiKeys } from '@/settings/developers/hooks/useGeneratedApiKeys';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Select } from '@/ui/input/components/Select';
@ -20,10 +21,10 @@ import { useInsertOneApiKeyMutation } from '~/generated/graphql';
export const SettingsDevelopersApiKeysNew = () => {
const [insertOneApiKey] = useInsertOneApiKeyMutation();
const navigate = useNavigate();
const [, setGeneratedApiKey] = useRecoilState(generatedApiKeyState);
const setGeneratedApi = useGeneratedApiKeys();
const [formValues, setFormValues] = useState<{
name: string;
expirationDate: number;
expirationDate: number | null;
}>({
expirationDate: ExpirationDates[0].value,
name: '',
@ -33,16 +34,24 @@ export const SettingsDevelopersApiKeysNew = () => {
variables: {
data: {
name: formValues.name,
expiresAt: DateTime.now()
.plus({ days: formValues.expirationDate })
.toISODate(),
expiresAt: formValues.expirationDate
? DateTime.now()
.plus({ days: formValues.expirationDate })
.toISODate()
: null,
},
},
refetchQueries: [getOperationName(GET_API_KEYS) ?? ''],
});
setGeneratedApiKey(apiKey.data?.createOneApiKey?.token);
navigate(
`/settings/developers/api-keys/${apiKey.data?.createOneApiKey?.id}`,
);
if (apiKey.data?.createOneApiKey) {
setGeneratedApi(
apiKey.data.createOneApiKey.id,
apiKey.data.createOneApiKey.token,
);
navigate(
`/settings/developers/api-keys/${apiKey.data.createOneApiKey.id}`,
);
}
};
const canSave = !!formValues.name;
return (