fix: api and web bugs

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,

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 (
     <>
       <ParamContainer>
@@ -61,7 +74,7 @@ export const ApiKeysCard = () => {
           />
         </InputWrapper>
       </ParamContainer>
-      <Regenerate />
+      <Regenerate fetchApiKeys={fetchApiKeys} />
     </>
   );
 };

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({
       >
         <div>
           <Text>
-            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?
           </Text>
           <Group position="right">
             <Button variant="outline" size="md" mt={30} onClick={() => cancelAction()}>

apps/web/src/pages/settings/tabs/components/Regenerate.tsx

@@ -3,24 +3,17 @@ 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<
     { key: string }[],
     { 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',
     });
   }