Feat: API Playground (twentyhq#10376)

/claim twentyhq#10283

---------

Co-authored-by: Félix Malfait <[email protected]>
Co-authored-by: Félix Malfait <[email protected]>

Author: oliverqx

package.json

@@ -360,7 +360,8 @@
     "graphql": "16.8.0",
     "type-fest": "4.10.1",
     "typescript": "5.3.3",
-    "prosemirror-model": "1.23.0"
+    "prosemirror-model": "1.23.0",
+    "yjs": "13.6.18"
   },
   "version": "0.2.1",
   "nx": {},

packages/twenty-front/.storybook/main.ts

@@ -37,7 +37,7 @@ const config: StorybookConfig = {
         '@storybook/addon-docs',
         '@storybook/addon-essentials/docs',
       ],
-    }
+    },
   },
   addons: [
     '@storybook/addon-links',

packages/twenty-front/package.json

@@ -38,6 +38,7 @@
     "@nivo/core": "^0.87.0",
     "@nivo/line": "^0.87.0",
     "@react-pdf/renderer": "^4.1.6",
+    "@scalar/api-reference-react": "^0.4.36",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-document": "^2.10.4",
     "@tiptap/extension-hard-break": "^2.10.4",

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -7,6 +7,38 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { SettingsPermissions } from '~/generated/graphql';
 
+const SettingsApiKeys = lazy(() =>
+  import('~/pages/settings/developers/api-keys/SettingsApiKeys').then(
+    (module) => ({
+      default: module.SettingsApiKeys,
+    }),
+  ),
+);
+
+const SettingsGraphQLPlayground = lazy(() =>
+  import(
+    '~/pages/settings/developers/playground/SettingsGraphQLPlayground'
+  ).then((module) => ({
+    default: module.SettingsGraphQLPlayground,
+  })),
+);
+
+const SettingsRestPlayground = lazy(() =>
+  import('~/pages/settings/developers/playground/SettingsRestPlayground').then(
+    (module) => ({
+      default: module.SettingsRestPlayground,
+    }),
+  ),
+);
+
+const SettingsWebhooks = lazy(() =>
+  import(
+    '~/pages/settings/developers/webhooks/components/SettingsWebhooks'
+  ).then((module) => ({
+    default: module.SettingsWebhooks,
+  })),
+);
+
 const SettingsAccountsCalendars = lazy(() =>
   import('~/pages/settings/accounts/SettingsAccountsCalendars').then(
     (module) => ({
@@ -137,12 +169,6 @@ const SettingsBilling = lazy(() =>
   })),
 );
 
-const SettingsDevelopers = lazy(() =>
-  import('~/pages/settings/developers/SettingsDevelopers').then((module) => ({
-    default: module.SettingsDevelopers,
-  })),
-);
-
 const SettingsIntegrations = lazy(() =>
   import('~/pages/settings/integrations/SettingsIntegrations').then(
     (module) => ({
@@ -376,9 +402,15 @@ export const SettingsRoutes = ({
           />
         }
       >
+        <Route path={SettingsPath.APIs} element={<SettingsApiKeys />} />
+        <Route path={SettingsPath.Webhooks} element={<SettingsWebhooks />} />
+        <Route
+          path={`${SettingsPath.GraphQLPlayground}`}
+          element={<SettingsGraphQLPlayground />}
+        />
         <Route
-          path={SettingsPath.Developers}
-          element={<SettingsDevelopers />}
+          path={`${SettingsPath.RestPlayground}/*`}
+          element={<SettingsRestPlayground />}
         />
         <Route
           path={SettingsPath.DevelopersNewApiKey}

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -57,7 +57,9 @@ export const SettingsNavigationDrawerItems = () => {
                   getSelectedIndexForSubItems(subItems);
 
                 return (
-                  <NavigationDrawerItemGroup key={item.path}>
+                  <NavigationDrawerItemGroup
+                    key={item.path || `group-${index}`}
+                  >
                     <SettingsNavigationDrawerItem
                       item={item}
                       subItemState={
@@ -72,7 +74,7 @@ export const SettingsNavigationDrawerItems = () => {
                     />
                     {subItems.map((subItem, subIndex) => (
                       <SettingsNavigationDrawerItem
-                        key={subItem.path}
+                        key={subItem.path || `subitem-${subIndex}`}
                         item={subItem}
                         subItemState={
                           subItem.indentationLevel
@@ -90,7 +92,7 @@ export const SettingsNavigationDrawerItems = () => {
               }
               return (
                 <SettingsNavigationDrawerItem
-                  key={item.path}
+                  key={item.path || `item-${index}`}
                   item={item}
                   subItemState={
                     item.indentationLevel

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

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

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

@@ -1,8 +1,8 @@
 import {
+  IconApi,
   IconApps,
   IconAt,
   IconCalendarEvent,
-  IconCode,
   IconColorSwatch,
   IconComponent,
   IconCurrencyDollar,
@@ -18,6 +18,7 @@ import {
   IconSettings,
   IconUserCircle,
   IconUsers,
+  IconWebhook,
 } from 'twenty-ui';
 
 import { SettingsPath } from '@/types/SettingsPath';
@@ -159,9 +160,16 @@ const useSettingsNavigationItems = (): SettingsNavigationSection[] => {
       isAdvanced: true,
       items: [
         {
-          label: t`API & Webhooks`,
-          path: SettingsPath.Developers,
-          Icon: IconCode,
+          label: t`APIs`,
+          path: SettingsPath.APIs,
+          Icon: IconApi,
+          isAdvanced: true,
+          isHidden: !permissionMap[SettingsPermissions.API_KEYS_AND_WEBHOOKS],
+        },
+        {
+          label: t`Webhooks`,
+          path: SettingsPath.Webhooks,
+          Icon: IconWebhook,
           isAdvanced: true,
           isHidden: !permissionMap[SettingsPermissions.API_KEYS_AND_WEBHOOKS],
         },

packages/twenty-front/src/modules/settings/hooks/useSettingsNavigationItems.tsx

@@ -0,0 +1,55 @@
+import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
+import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
+import '@graphiql/plugin-explorer/dist/style.css';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import 'graphiql/graphiql.css';
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+import { ThemeContext } from 'twenty-ui';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+
+type GraphQLPlaygroundProps = {
+  onError(): void;
+  schema: PlaygroundSchemas;
+};
+
+export const schemaToPath = {
+  [PlaygroundSchemas.CORE]: 'graphql',
+  [PlaygroundSchemas.METADATA]: 'metadata',
+};
+
+export const GraphQLPlayground = ({
+  onError,
+  schema,
+}: GraphQLPlaygroundProps) => {
+  const playgroundApiKey = useRecoilValue(playgroundApiKeyState);
+  const baseUrl = REACT_APP_SERVER_BASE_URL + '/' + schemaToPath[schema];
+
+  const { theme } = useContext(ThemeContext);
+
+  if (!playgroundApiKey) {
+    onError();
+    return null;
+  }
+
+  const explorer = explorerPlugin({
+    showAttribution: true,
+  });
+
+  const fetcher = createGraphiQLFetcher({
+    url: baseUrl,
+  });
+
+  return (
+    <GraphiQL
+      forcedTheme={theme.name as 'light' | 'dark'}
+      plugins={[explorer]}
+      fetcher={fetcher}
+      defaultHeaders={JSON.stringify({
+        Authorization: `Bearer ${playgroundApiKey}`,
+      })}
+    />
+  );
+};