Fix playground (#5043)

Some code quality updates on the doc api playgrounds

packages/twenty-docs/src/components/graphql-playground.tsx

@@ -3,6 +3,7 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { Theme, useTheme } from '@graphiql/react';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { SubDoc } from '@site/src/components/token-form';
 import Layout from '@theme/Layout';
 import { GraphiQL } from 'graphiql';
 
@@ -21,9 +22,6 @@ const GraphQlComponent = ({ token, baseUrl, path }) => {
   const explorer = explorerPlugin({
     showAttribution: true,
   });
-  if (!baseUrl || !token) {
-    return <></>;
-  }
 
   const fetcher = createGraphiQLFetcher({
     url: baseUrl + '/' + path,
@@ -47,6 +45,10 @@ const GraphQlComponent = ({ token, baseUrl, path }) => {
     };
   }, []);
 
+  if (!baseUrl || !token) {
+    return <></>;
+  }
+
   return (
     <div className="fullHeightPlayground">
       <GraphiQL
@@ -58,9 +60,9 @@ const GraphQlComponent = ({ token, baseUrl, path }) => {
   );
 };
 
-const GraphQlPlayground = ({ subDoc }: { subDoc: 'core' | 'metadata' }) => {
+const GraphQlPlayground = ({ subDoc }: { subDoc: SubDoc }) => {
-  const [token, setToken] = useState();
+  const [token, setToken] = useState<string>();
-  const [baseUrl, setBaseUrl] = useState();
+  const [baseUrl, setBaseUrl] = useState<string>();
   const { setTheme } = useTheme();
 
   useEffect(() => {
@@ -99,7 +101,7 @@ const GraphQlPlayground = ({ subDoc }: { subDoc: 'core' | 'metadata' }) => {
             children={children}
             setToken={setToken}
             setBaseUrl={setBaseUrl}
-            subdocName={subDoc}
+            subDoc={subDoc}
           />
         )}
       </BrowserOnly>

packages/twenty-docs/src/components/playground.tsx

@@ -9,9 +9,11 @@ const Playground = ({
   setToken,
   setBaseUrl,
   subDoc,
-}: Partial<React.PropsWithChildren | TokenFormProps> & {
+}: Partial<React.PropsWithChildren> &
-  subDoc: string;
+  Omit<
-}) => {
+    TokenFormProps,
+    'isTokenValid' | 'setIsTokenValid' | 'setLoadingState'
+  >) => {
   const [isTokenValid, setIsTokenValid] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   return (

packages/twenty-docs/src/components/token-form.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from 'react';
+import { TbApi, TbChevronLeft, TbLink } from 'react-icons/tb';
 import { useHistory, useLocation } from '@docusaurus/router';
-import { TbApi, TbChevronLeft, TbLink } from '@theme/icons';
 import { parseJson } from 'nx/src/utils/json';
 
 import tokenForm from '!css-loader!./token-form.css';
 
+export type SubDoc = 'core' | 'metadata';
 export type TokenFormProps = {
   setOpenApiJson?: (json: object) => void;
   setToken?: (token: string) => void;
   setBaseUrl?: (baseUrl: string) => void;
-  isTokenValid: boolean;
+  isTokenValid?: boolean;
-  setIsTokenValid: (boolean) => void;
+  setIsTokenValid?: (boolean) => void;
-  setLoadingState: (boolean) => void;
+  setLoadingState?: (boolean) => void;
-  subDoc?: string;
+  subDoc?: SubDoc;
 };
 
 const TokenForm = ({
@@ -141,25 +142,23 @@ const TokenForm = ({
             onBlur={() => submitToken(token)}
           />
         </div>
-        {!location.pathname.includes('rest-api') && (
+        <div className="inputWrapper" style={{ maxWidth: '100px' }}>
-          <div className="inputWrapper" style={{ maxWidth: '100px' }}>
+          <select
-            <select
+            className="select"
-              className="select"
+            onChange={(event) =>
-              onChange={(event) =>
+              history.replace(
-                history.replace(
+                '/' +
+                  location.pathname.split('/').at(-2) +
                   '/' +
-                    location.pathname.split('/').at(-2) +
+                  event.target.value,
-                    '/' +
+              )
-                    event.target.value,
+            }
-                )
+            value={location.pathname.split('/').at(-1)}
-              }
+          >
-              value={location.pathname.split('/').at(-1)}
+            <option value="core">Core</option>
-            >
+            <option value="metadata">Metadata</option>
-              <option value="core">Core</option>
+          </select>
-              <option value="metadata">Metadata</option>
+        </div>
-            </select>
-          </div>
-        )}
       </form>
     </div>
   );