Refacto rest api, fix graphl playground, improve analytics (#5844)

- Improve the rest api by introducing startingAfter/endingBefore (we
previously had lastCursor), and moving pageInfo/totalCount outside of
the data object.
- Fix broken GraphQL playground on website
- Improve analytics by sending server url

packages/twenty-website/src/app/_components/playground/graphql-playground.tsx

@@ -1,7 +1,7 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
-import { Theme, useTheme } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 
@@ -9,6 +9,13 @@ import { SubDoc } from '@/app/_components/playground/token-form';
 
 import Playground from './playground';
 
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+
+const StyledContainer = styled.div`
+  height: 100%;
+`;
+
 const SubDocToPath = {
   core: 'graphql',
   metadata: 'metadata',
@@ -28,37 +35,19 @@ const GraphQlComponent = ({ token, baseUrl, path }: any) => {
   }
 
   return (
-    <div className="fullHeightPlayground">
+    <StyledContainer>
       <GraphiQL
         plugins={[explorer]}
         fetcher={fetcher}
         defaultHeaders={JSON.stringify({ Authorization: `Bearer ${token}` })}
       />
-    </div>
+    </StyledContainer>
   );
 };
 
 const GraphQlPlayground = ({ subDoc }: { subDoc: SubDoc }) => {
   const [token, setToken] = useState<string>();
   const [baseUrl, setBaseUrl] = useState<string>();
-  const { setTheme } = useTheme();
-
-  useEffect(() => {
-    window.localStorage.setItem(
-      'graphiql:theme',
-      window.localStorage.getItem('theme') || 'light',
-    );
-
-    const handleThemeChange = (ev: any) => {
-      if (ev.key === 'theme') {
-        setTheme(ev.newValue as Theme);
-      }
-    };
-
-    window.addEventListener('storage', handleThemeChange);
-
-    return () => window.removeEventListener('storage', handleThemeChange);
-  }, []);
 
   const children = (
     <GraphQlComponent

packages/twenty-website/src/app/_components/playground/token-form.tsx

@@ -33,20 +33,23 @@ const TokenForm = ({
 
   const [isLoading, setIsLoading] = useState(false);
   const [locationSetting, setLocationSetting] = useState(
-    (window &&
+    (typeof window !== 'undefined' &&
       window.localStorage.getItem('baseUrl') &&
       JSON.parse(window.localStorage.getItem('baseUrl') ?? '')
         ?.locationSetting) ??
       'production',
   );
   const [baseUrl, setBaseUrl] = useState(
-    (window.localStorage.getItem('baseUrl') &&
+    (typeof window !== 'undefined' &&
+      window.localStorage.getItem('baseUrl') &&
       JSON.parse(window.localStorage.getItem('baseUrl') ?? '')?.baseUrl) ??
       'https://api.twenty.com',
   );
 
-  const tokenLocal = window?.localStorage?.getItem?.(
-    'TryIt_securitySchemeValues',
+  const tokenLocal = (
+    typeof window !== 'undefined'
+      ? window?.localStorage?.getItem?.('TryIt_securitySchemeValues')
+      : '{}'
   ) as string;
 
   const token = JSON.parse(tokenLocal)?.bearerAuth ?? '';