Fixed DeveloperSettings stories (#4166)

* Fixed Developer Settings page Storybook.

* Remove unused stories

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeys.stories.tsx

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
-import {
-  PageDecorator,
-  PageDecoratorArgs,
-} from '~/testing/decorators/PageDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
-
-const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeys',
-  component: SettingsDevelopersApiKeys,
-  decorators: [PageDecorator],
-  args: { routePath: '/settings/developers' },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof SettingsDevelopersApiKeys>;
-
-export const Default: Story = {
-  play: async () => {
-    await sleep(100);
-  },
-};

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysDetail.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
 
 import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
 import {
@@ -13,10 +14,32 @@ const meta: Meta<PageDecoratorArgs> = {
   component: SettingsDevelopersApiKeyDetail,
   decorators: [PageDecorator],
   args: {
-    routePath: '/settings/apis/f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
+    routePath: '/settings/developers/api-keys/:apiKeyId',
+    routeParams: {
+      ':apiKeyId': 'f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
+    },
   },
   parameters: {
-    msw: graphqlMocks,
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query('FindOneapiKey', () => {
+          return HttpResponse.json({
+            data: {
+              apiKey: {
+                __typename: 'ApiKey',
+                id: 'f7c6d736-8fcd-4e9c-ab99-28f6a9031570',
+                revokedAt: null,
+                expiresAt: '2024-03-10T09:23:10.511Z',
+                name: 'sfsfdsf',
+                updatedAt: '2024-02-24T10:23:10.673Z',
+                createdAt: '2024-02-24T10:23:10.673Z',
+              },
+            },
+          });
+        }),
+      ],
+    },
   },
 };
 export default meta;

packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooks.stories.tsx

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooks';
-import {
-  PageDecorator,
-  PageDecoratorArgs,
-} from '~/testing/decorators/PageDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/testing/sleep';
-
-const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooks',
-  component: SettingsDevelopersWebhooks,
-  decorators: [PageDecorator],
-  args: { routePath: '/settings/developers' },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof SettingsDevelopersWebhooks>;
-
-export const Default: Story = {
-  play: async () => {
-    await sleep(100);
-  },
-};

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -52,8 +52,8 @@ export const graphqlMocks = {
       },
     ),
     graphql.query('FindManyViews', ({ variables }) => {
-      const objectMetadataId = variables.filter.objectMetadataId.eq;
+      const objectMetadataId = variables.filter?.objectMetadataId?.eq;
-      const viewType = variables.filter.type.eq;
+      const viewType = variables.filter?.type?.eq;
 
       return HttpResponse.json({
         data: {
@@ -61,8 +61,8 @@ export const graphqlMocks = {
             edges: mockedViewsData
               .filter(
                 (view) =>
-                  view.objectMetadataId === objectMetadataId &&
+                  view?.objectMetadataId === objectMetadataId &&
-                  view.type === viewType,
+                  view?.type === viewType,
               )
               .map((view) => ({
                 node: view,

packages/twenty-front/src/testing/mock-data/metadata.ts

@@ -6802,6 +6802,7 @@ export const mockedObjectMetadataItems = {
         },
       },
     },
+    mockedWebhooksMetadata,
     mockedPeopleMetadata,
     mockedCompaniesMetadata,
     mockedPipelineStepsMetadata,