Feat: API Playground (#10376)

/claim #10283

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx

@@ -4,13 +4,15 @@ import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/componen
 import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { formatExpirations } from '@/settings/developers/utils/formatExpiration';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { Trans } from '@lingui/react/macro';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledTableBody = styled(TableBody)`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
@@ -53,7 +55,9 @@ export const SettingsApiKeysTable = () => {
             <SettingsApiKeysFieldItemTableRow
               key={fieldItem.id}
               fieldItem={fieldItem as ApiFieldItem}
-              to={`/settings/developers/api-keys/${fieldItem.id}`}
+              to={getSettingsPath(SettingsPath.DevelopersApiKeyDetail, {
+                apiKeyId: fieldItem.id,
+              })}
             />
           ))}
         </StyledTableBody>

packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx

@@ -1,18 +0,0 @@
-import { useLingui } from '@lingui/react/macro';
-import { Button, IconBook2 } from 'twenty-ui';
-
-export const SettingsReadDocumentationButton = () => {
-  const { t } = useLingui();
-
-  return (
-    <Button
-      title={t`Read documentation`}
-      variant="secondary"
-      accent="default"
-      size="small"
-      Icon={IconBook2}
-      to={'https://docs.twenty.com'}
-      target="_blank"
-    ></Button>
-  );
-};

packages/twenty-front/src/modules/settings/developers/hooks/useWebhookUpdateForm.ts

@@ -145,7 +145,7 @@ export const useWebhookUpdateForm = ({
 
   const deleteWebhook = async () => {
     await deleteOneWebhook(webhookId);
-    navigate(SettingsPath.Developers);
+    navigate(SettingsPath.Webhooks);
   };
 
   useFindOneRecord({