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/testing/decorators/FullScreenDecorator.tsx

@@ -0,0 +1,28 @@
+import { FullScreenContainer } from '@/ui/layout/fullscreen/components/FullScreenContainer';
+import styled from '@emotion/styled';
+import { action } from '@storybook/addon-actions';
+import { Decorator } from '@storybook/react';
+const StyledT = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
+export const FullScreenDecorator: Decorator = (Story) => (
+  <FullScreenContainer
+    links={[
+      {
+        children: 'Layout',
+        href: '/',
+      },
+      {
+        children: 'FullScreen',
+        href: '/',
+      },
+    ]}
+    exitFullScreen={action('Full screen exit called.')}
+  >
+    <StyledT>
+      <Story />
+    </StyledT>
+  </FullScreenContainer>
+);

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

@@ -44,6 +44,39 @@ export const metadataGraphql = graphql.link(
 
 export const graphqlMocks = {
   handlers: [
+    graphql.query('IntrospectionQuery', () => {
+      return HttpResponse.json({
+        data: {
+          __schema: {
+            queryType: { name: 'Query' },
+            types: [
+              {
+                kind: 'OBJECT',
+                name: 'Query',
+                fields: [
+                  {
+                    name: 'name',
+                    type: { kind: 'SCALAR', name: 'String' },
+                    args: [],
+                  },
+                ],
+                interfaces: [],
+                args: [],
+              },
+              {
+                kind: 'SCALAR',
+                name: 'String',
+                fields: [],
+                interfaces: [],
+                args: [],
+              },
+            ],
+            directives: [],
+          },
+        },
+      });
+    }),
+
     graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
       return HttpResponse.json({
         data: {