diff --git a/apps/api/src/app/environments/usecases/index.ts b/apps/api/src/app/environments/usecases/index.ts
index e6d8c733e2c..06e18309574 100644
--- a/apps/api/src/app/environments/usecases/index.ts
+++ b/apps/api/src/app/environments/usecases/index.ts
@@ -1,6 +1,7 @@
import { CreateEnvironment } from './create-environment/create-environment.usecase';
import { GenerateUniqueApiKey } from './generate-unique-api-key/generate-unique-api-key.usecase';
import { GetApiKeys } from './get-api-keys/get-api-keys.usecase';
+import { RegenerateApiKeys } from './regenerate-api-keys/regenerate-api-keys.usecase';
import { GetEnvironment } from './get-environment';
import { GetMyEnvironments } from './get-my-environments/get-my-environments.usecase';
import { UpdateWidgetSettings } from './update-widget-settings/update-widget-settings.usecase';
@@ -10,6 +11,7 @@ export const USE_CASES = [
CreateEnvironment,
GenerateUniqueApiKey,
GetApiKeys,
+ RegenerateApiKeys,
GetEnvironment,
GetMyEnvironments,
UpdateWidgetSettings,
diff --git a/apps/web/src/pages/settings/tabs/ApiKeysCard.tsx b/apps/web/src/pages/settings/tabs/ApiKeysCard.tsx
index 7cf55aaa7ec..cc00f88f698 100644
--- a/apps/web/src/pages/settings/tabs/ApiKeysCard.tsx
+++ b/apps/web/src/pages/settings/tabs/ApiKeysCard.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
import { ActionIcon, InputWrapper } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';
-import { useQuery } from 'react-query';
+import { useQuery, useMutation } from 'react-query';
import { Input, Tooltip } from '../../../design-system';
import { Check, Copy } from '../../../design-system/icons';
import { getApiKeys } from '../../../api/environment';
@@ -11,14 +11,27 @@ import { useEnvController } from '../../../store/use-env-controller';
import { Regenerate } from './components/Regenerate';
export const ApiKeysCard = () => {
+ const [apiKeys, setApiKeys] = useState<{ key: string }[]>([]);
const clipboardApiKey = useClipboard({ timeout: 1000 });
const clipboardEnvironmentIdentifier = useClipboard({ timeout: 1000 });
- const { data: apiKeys } = useQuery<{ key: string }[]>('getApiKeys', getApiKeys);
+ const { mutateAsync: getApiKeysMutation } = useMutation<
+ { key: string }[],
+ { error: string; message: string; statusCode: number }
+ >(getApiKeys);
+ const { data } = useQuery<{ key: string }[]>('getApiKeys', getApiKeys);
+ useEffect(() => {
+ setApiKeys(data || []);
+ }, [data]);
const { environment } = useEnvController();
- const apiKey = apiKeys?.length ? apiKeys[0].key : '';
+ const apiKey = apiKeys.length ? apiKeys[0].key : '';
const environmentIdentifier = environment?.identifier ? environment.identifier : '';
+ async function fetchApiKeys() {
+ const keys = await getApiKeysMutation();
+ setApiKeys(keys);
+ }
+
return (
<>
@@ -61,7 +74,7 @@ export const ApiKeysCard = () => {
/>
-
+
>
);
};
diff --git a/apps/web/src/pages/settings/tabs/components/ConfirmRegenerationModal.tsx b/apps/web/src/pages/settings/tabs/components/ConfirmRegenerationModal.tsx
index 700a671b64e..d98d363875f 100644
--- a/apps/web/src/pages/settings/tabs/components/ConfirmRegenerationModal.tsx
+++ b/apps/web/src/pages/settings/tabs/components/ConfirmRegenerationModal.tsx
@@ -1,5 +1,6 @@
import { Group, Modal, useMantineTheme } from '@mantine/core';
import { Button, colors, shadows, Title, Text } from '../../../../design-system';
+import { useEnvController } from '../../../../store/use-env-controller';
export function ConfirmRegenerationModal({
isOpen,
@@ -11,6 +12,7 @@ export function ConfirmRegenerationModal({
confirmAction: () => void;
}) {
const theme = useMantineTheme();
+ const { environment } = useEnvController();
return (
<>
@@ -40,8 +42,9 @@ export function ConfirmRegenerationModal({
>
- You are about to regenerate the API key of the selected environment. This action is irreversible and will
- render inoperative the access to the API of all your applications that use the current key. Proceed anyway?
+ You are about to regenerate the API key of the {environment?.name} environment. This action is irreversible
+ and will render inoperative the access to the API of all your applications that use the current key. Proceed
+ anyway?
cancelAction()}>
diff --git a/apps/web/src/pages/settings/tabs/components/Regenerate.tsx b/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
index 7dd25a9892b..dfb52afcd1d 100644
--- a/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
+++ b/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
@@ -3,12 +3,10 @@ import { useState } from 'react';
import styled from '@emotion/styled';
import { useMutation } from 'react-query';
import { regenerateApiKeys } from '../../../../api/environment';
-import { useEnvController } from '../../../../store/use-env-controller';
import { ConfirmRegenerationModal } from './ConfirmRegenerationModal';
import { showNotification } from '@mantine/notifications';
-export const Regenerate = () => {
- const { refetchEnvironment } = useEnvController();
+export const Regenerate = ({ fetchApiKeys }: { fetchApiKeys: () => void }) => {
const [isModalOpened, setModalIsOpened] = useState(false);
const { mutateAsync: regenerateApiKeysMutation } = useMutation<
@@ -16,11 +14,6 @@ export const Regenerate = () => {
{ error: string; message: string; statusCode: number }
>(regenerateApiKeys);
- async function regenerate() {
- await regenerateApiKeysMutation();
- await refetchEnvironment();
- }
-
async function handleModal() {
setModalIsOpened(true);
}
@@ -30,11 +23,12 @@ export const Regenerate = () => {
}
async function confirmAction() {
- await regenerate();
+ await regenerateApiKeysMutation();
+ await fetchApiKeys();
setModalIsOpened(false);
showNotification({
message: `Successfully regenereated API keys!`,
- color: 'red',
+ color: 'green',
});
}