Add known sources dropdown to api docs (#5204)

closes #5156

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

@@ -7,6 +7,7 @@
     padding: 0px 8px;
     background: var(--ifm-color-secondary-contrast-background);
     z-index: 2;
+    display: flex;
 }
 
 .form {
@@ -15,6 +16,7 @@
     gap: 10px;
     width: 50%;
     margin-left: auto;
+    flex: 0.7;
 }
 
 .link {
@@ -42,6 +44,10 @@
     height: 32px;
 }
 
+.input[disabled] {
+    color: rgb(153, 153, 153)
+}
+
 [data-theme='dark'] .input {
     background-color: #16233f;
 }

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

@@ -28,6 +28,10 @@ const TokenForm = ({
   const history = useHistory();
   const location = useLocation();
   const [isLoading, setIsLoading] = useState(false);
+  const [locationSetting, setLocationSetting] = useState(
+    parseJson(localStorage.getItem('baseUrl'))?.locationSetting ??
+      'production',
+  );
   const [baseUrl, setBaseUrl] = useState(
     parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
       'https://api.twenty.com',
@@ -49,13 +53,24 @@ const TokenForm = ({
     await submitToken(event.target.value);
   };
 
-  const updateBaseUrl = (baseUrl: string) => {
-    const url = baseUrl?.endsWith('/')
+  const updateBaseUrl = (baseUrl: string, locationSetting: string) => {
+    let url: string;
+    if (locationSetting === 'production') {
+      url = 'https://api.twenty.com';
+    } else if (locationSetting === 'demo') {
+      url = 'https://api-demo.twenty.com';
+    } else if (locationSetting === 'localhost') {
+      url = 'http://localhost:3000';
+    } else {
+      url = baseUrl?.endsWith('/')
       ? baseUrl.substring(0, baseUrl.length - 1)
-      : baseUrl;
+      : baseUrl
+    }
+    
     setBaseUrl(url);
+    setLocationSetting(locationSetting);
     submitBaseUrl?.(url);
-    localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url }));
+    localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url, locationSetting }));
   };
 
   const validateToken = (openApiJson) => {
@@ -93,7 +108,7 @@ const TokenForm = ({
 
   useEffect(() => {
     (async () => {
-      updateBaseUrl(baseUrl);
+      updateBaseUrl(baseUrl, locationSetting);
       await submitToken(token);
     })();
   }, []);
@@ -114,7 +129,35 @@ const TokenForm = ({
           <TbChevronLeft size={18} />
           <span>Back</span>
         </div>
-
+        <div className="inputWrapper">
+          <select
+            className="select"
+            onChange={(event) => {
+              updateBaseUrl(baseUrl, event.target.value)
+            }}
+            value={locationSetting}
+          >
+            <option value="production">Production API</option>
+            <option value="demo">Demo API</option>
+            <option value="localhost">Localhost</option>
+            <option value="other">Other</option>
+          </select>
+        </div>
+        <div className="inputWrapper">
+          <div className="inputIcon" title="Base URL">
+            <TbLink size={20} />
+          </div>
+          <input
+            className={'input'}
+            type="text"
+            readOnly={isLoading}
+            disabled={locationSetting !== 'other'}
+            placeholder="Base URL"
+            value={baseUrl}
+            onChange={(event) => updateBaseUrl(event.target.value, locationSetting)}
+            onBlur={() => submitToken(token)}
+          />
+        </div>
         <div className="inputWrapper">
           <div className="inputIcon" title="Api Key">
             <TbApi size={20} />
@@ -128,20 +171,6 @@ const TokenForm = ({
             onChange={updateToken}
           />
         </div>
-        <div className="inputWrapper">
-          <div className="inputIcon" title="Base URL">
-            <TbLink size={20} />
-          </div>
-          <input
-            className={'input'}
-            type="text"
-            readOnly={isLoading}
-            placeholder="Base URL"
-            defaultValue={baseUrl}
-            onChange={(event) => updateBaseUrl(event.target.value)}
-            onBlur={() => submitToken(token)}
-          />
-        </div>
         <div className="inputWrapper" style={{ maxWidth: '100px' }}>
           <select
             className="select"