add feature to web

apps/api/src/app/environments/environments.controller.ts

@@ -118,7 +118,7 @@ export class EnvironmentsController {
     return await this.getApiKeysUsecase.execute(command);
   }
 
-  @Post('/api-keys/regenerate')
+  @Get('/api-keys/regenerate')
   @ApiOperation({
     summary: 'Regenerate api keys',
   })

apps/web/src/api/environment.ts

@@ -12,6 +12,10 @@ export function getApiKeys() {
   return api.get(`/v1/environments/api-keys`);
 }
 
+export function regenerateApiKeys() {
+  return api.get(`/v1/environments/api-keys/regenerate`);
+}
+
 export function updateEmailSettings(payload: { senderEmail: string; senderName: string }) {
   return api.put(`/v1/channels/email/settings`, payload);
 }

apps/web/src/pages/settings/tabs/ApiKeysCard.tsx

@@ -8,6 +8,7 @@ import { getApiKeys } from '../../../api/environment';
 import styled from 'styled-components';
 import { inputStyles } from '../../../design-system/config/inputs.styles';
 import { useEnvController } from '../../../store/use-env-controller';
+import { Regenerate } from './components/Regenerate';
 
 export const ApiKeysCard = () => {
   const clipboardApiKey = useClipboard({ timeout: 1000 });
@@ -60,6 +61,7 @@ export const ApiKeysCard = () => {
           />
         </InputWrapper>
       </ParamContainer>
+      <Regenerate />
     </>
   );
 };

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

@@ -0,0 +1,59 @@
+import { Group, Modal, useMantineTheme } from '@mantine/core';
+import { Button, colors, shadows, Title, Text } from '../../design-system';
+
+export function ConfirmRegenerationModal({
+  isOpen,
+  cancelAction,
+  confirmAction,
+}: {
+  isOpen: boolean;
+  cancelAction: () => void;
+  confirmAction: () => void;
+}) {
+  const theme = useMantineTheme();
+
+  return (
+    <>
+      <Modal
+        opened={isOpen}
+        overlayColor={theme.colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
+        overlayOpacity={0.7}
+        styles={{
+          modal: {
+            backgroundColor: theme.colorScheme === 'dark' ? colors.B15 : colors.white,
+          },
+          body: {
+            paddingTop: '5px',
+          },
+          inner: {
+            paddingTop: '180px',
+          },
+        }}
+        title={<Title size={2}>Caution</Title>}
+        sx={{ backdropFilter: 'blur(10px)' }}
+        shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.medium}
+        radius="md"
+        size="lg"
+        onClose={() => {
+          cancelAction();
+        }}
+      >
+        <div>
+          <Text>
+            You are about to X. 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()}>
+              No
+            </Button>
+            <Button mt={30} size="md" onClick={() => confirmAction()}>
+              Yes
+            </Button>
+          </Group>
+        </div>
+      </Modal>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { Button, Text } from '../../../../design-system';
+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';
+
+export const Regenerate = () => {
+  const { refetchEnvironment } = useEnvController();
+  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);
+  }
+
+  function cancelAction() {
+    setModalIsOpened(false);
+  }
+
+  async function confirmAction() {
+    await regenerate();
+    setModalIsOpened(false);
+  }
+
+  return (
+    <>
+      <div>
+        <Title>Regenerate API key</Title>
+        <Button mb={20} mt={10} data-test-id="show-regenerate-api-key-modal" onClick={() => handleModal()}>
+          Regenerate
+        </Button>
+      </div>
+      <ConfirmRegenerationModal
+        isOpen={isModalOpened}
+        cancelAction={cancelAction}
+        confirmAction={confirmAction}
+      />
+    </>
+  );
+};
+
+
+const Title = styled(Text)`
+  padding-bottom: 17px;
+  font-size: 20px;
+  font-weight: 700;
+`;