diff --git a/packages/twenty-docs/src/components/graphql-playground.tsx b/packages/twenty-docs/src/components/graphql-playground.tsx
index 21018adb1c..3c2e333d40 100644
--- a/packages/twenty-docs/src/components/graphql-playground.tsx
+++ b/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 (
{
);
};
-const GraphQlPlayground = ({ subDoc }: { subDoc: 'core' | 'metadata' }) => {
- const [token, setToken] = useState();
- const [baseUrl, setBaseUrl] = useState();
+const GraphQlPlayground = ({ subDoc }: { subDoc: SubDoc }) => {
+ const [token, setToken] = useState();
+ const [baseUrl, setBaseUrl] = useState();
const { setTheme } = useTheme();
useEffect(() => {
@@ -99,7 +101,7 @@ const GraphQlPlayground = ({ subDoc }: { subDoc: 'core' | 'metadata' }) => {
children={children}
setToken={setToken}
setBaseUrl={setBaseUrl}
- subdocName={subDoc}
+ subDoc={subDoc}
/>
)}
diff --git a/packages/twenty-docs/src/components/playground.tsx b/packages/twenty-docs/src/components/playground.tsx
index 687900f826..af96e2c196 100644
--- a/packages/twenty-docs/src/components/playground.tsx
+++ b/packages/twenty-docs/src/components/playground.tsx
@@ -9,9 +9,11 @@ const Playground = ({
setToken,
setBaseUrl,
subDoc,
-}: Partial & {
- subDoc: string;
-}) => {
+}: Partial &
+ Omit<
+ TokenFormProps,
+ 'isTokenValid' | 'setIsTokenValid' | 'setLoadingState'
+ >) => {
const [isTokenValid, setIsTokenValid] = useState(false);
const [isLoading, setIsLoading] = useState(false);
return (
diff --git a/packages/twenty-docs/src/components/token-form.tsx b/packages/twenty-docs/src/components/token-form.tsx
index 8c9ee1fc15..3c59ba0969 100644
--- a/packages/twenty-docs/src/components/token-form.tsx
+++ b/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;
- setIsTokenValid: (boolean) => void;
- setLoadingState: (boolean) => void;
- subDoc?: string;
+ isTokenValid?: boolean;
+ setIsTokenValid?: (boolean) => void;
+ setLoadingState?: (boolean) => void;
+ subDoc?: SubDoc;
};
const TokenForm = ({
@@ -141,25 +142,23 @@ const TokenForm = ({
onBlur={() => submitToken(token)}
/>
- {!location.pathname.includes('rest-api') && (
-
-
+
);