Make work with multiple apis (or a table in no apis)

src/qqq/pages/records/developer/TableDeveloperView.tsx

@@ -54,10 +54,12 @@ function TableDeveloperView({table}: Props): JSX.Element
 
    const tableName = table.name;
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
+   const [noApis, setNoApis] = useState(null as boolean);
    const [tableMetaData, setTableMetaData] = useState(null);
    const [metaData, setMetaData] = useState(null as QInstance);
+   const [supportedApis, setSupportedApis] = useState([] as any)
    const [supportedVersions, setSupportedVersions] = useState([] as string[]);
-   const [currentVersion, setCurrentVersion] = useState(null as string);
+   const [selectedApi, setSelectedApi] = useState(null as any);
    const [selectedVersion, setSelectedVersion] = useState(null as string);
 
    const {setPageHeader} = useContext(QContext);
@@ -74,17 +76,6 @@ function TableDeveloperView({table}: Props): JSX.Element
 
       (async () =>
       {
-         const versionsResponse = await fetch("/api/versions.json");
-         const versionsJson = await versionsResponse.json();
-         console.log(versionsJson);
-
-         setSupportedVersions(versionsJson.supportedVersions);
-         if (versionsJson.currentVersion)
-         {
-            setCurrentVersion(versionsJson.currentVersion);
-            setSelectedVersion(versionsJson.currentVersion);
-         }
-
          /////////////////////////////////////////////////////////////////////
          // load the full table meta-data (the one we took in is a partial) //
          /////////////////////////////////////////////////////////////////////
@@ -99,7 +90,30 @@ function TableDeveloperView({table}: Props): JSX.Element
 
          setPageHeader(tableMetaData.label + " Developer Mode");
 
-         // forceUpdate();
+         const apisResponse = await fetch("/apis.json?tableName=" + tableName);
+         const apisJson = await apisResponse.json();
+         console.log(apisJson);
+
+         if(!apisJson["apis"] || apisJson["apis"].length == 0)
+         {
+            setNoApis(true);
+            return;
+         }
+
+         setSupportedApis(apisJson["apis"]);
+
+         const selectedApi = apisJson["apis"][0];
+         setSelectedApi(selectedApi);
+
+         const versionsResponse = await fetch(selectedApi["path"] + "versions.json");
+         const versionsJson = await versionsResponse.json();
+         console.log(versionsJson);
+
+         setSupportedVersions(versionsJson.supportedVersions);
+         if (versionsJson.currentVersion)
+         {
+            setSelectedVersion(versionsJson.currentVersion);
+         }
       })();
    }
 
@@ -108,6 +122,33 @@ function TableDeveloperView({table}: Props): JSX.Element
       e.detail.request.headers.append("Authorization", "Bearer " + accessToken);
    };
 
+   const selectApi = async (event: SelectChangeEvent) =>
+   {
+      setSelectedApi(null);
+      setSelectedVersion(null);
+
+      const name = event.target.value;
+      for(let i = 0; i < supportedApis.length; i++)
+      {
+         if(name == supportedApis[i].name)
+         {
+            const selectedApi = supportedApis[i];
+            setSelectedApi(selectedApi);
+
+            const versionsResponse = await fetch(selectedApi["path"] + "versions.json");
+            const versionsJson = await versionsResponse.json();
+            console.log(versionsJson);
+
+            setSupportedVersions(versionsJson.supportedVersions);
+            if (versionsJson.currentVersion)
+            {
+               setSelectedVersion(versionsJson.currentVersion);
+            }
+            break;
+         }
+      }
+   };
+
    const selectVersion = (event: SelectChangeEvent) =>
    {
       setSelectedVersion(event.target.value);
@@ -120,41 +161,62 @@ function TableDeveloperView({table}: Props): JSX.Element
                <Grid item xs={12}>
                   <Box mb={3}>
                      {
-                        accessToken && metaData && selectedVersion &&
                         <Card sx={{pb: 1}}>
                            <Box display="flex" alignItems="center">
                               <Typography variant="h6" p={2} pl={3} pb={1}>API Docs & Playground</Typography>
-                              <Box display="inline-block" pl={2}>
+
-                                 <Typography fontSize="0.875rem" display="inline-block" pr={0.5} position="relative" top="2px">Version:</Typography>
+                              {
-                                 <Select
+                                 supportedApis?.length > 0 &&
-                                    native
+                                 <Box display="inline-block" pl={2}>
-                                    value={selectedVersion}
+                                    <Typography fontSize="0.875rem" display="inline-block" pr={0.5} position="relative" top="2px">API:</Typography>
-                                    onChange={selectVersion}
+                                    <Select
-                                    size="small"
+                                       native
-                                    inputProps={{
+                                       value={selectedApi?.name}
-                                       id: "select-native",
+                                       onChange={selectApi}
-                                    }}
+                                       size="small"
-                                 >
+                                       inputProps={{id: "select-native"}}>
-                                    {supportedVersions.map((v) => (<option key={v} value={v}>{v}</option>))}
+                                       {supportedApis.map((api: any) => (<option key={api.name} value={api.name}>{api.label}</option>))}
-                                 </Select>
+                                    </Select>
-                              </Box>
+                                 </Box>
+                              }
+
+                              {
+                                 supportedVersions?.length > 0 &&
+                                 <Box display="inline-block" pl={2}>
+                                    <Typography fontSize="0.875rem" display="inline-block" pr={0.5} position="relative" top="2px">Version:</Typography>
+                                    <Select
+                                       native
+                                       value={selectedVersion}
+                                       onChange={selectVersion}
+                                       size="small"
+                                       inputProps={{id: "select-native",}}>
+                                       {supportedVersions.map((v) => (<option key={v} value={v}>{v}</option>))}
+                                    </Select>
+                                 </Box>
+                              }
                            </Box>
-                           <RapiDocReact
+
-                              spec-url={`/api/${selectedVersion}/${tableName}/openapi.json`}
+                           {noApis == true && <Box p={3}>This table is not available in any APIs.</Box>}
-                              regular-font="Roboto,Helvetica,Arial,sans-serif"
+
-                              mono-font="Monaco, Menlo, Consolas, source-code-pro, monospace"
+                           {
-                              primary-color={metaData.branding.accentColor || "blue"}
+                              accessToken && metaData && selectedApi && selectedVersion &&
-                              font-size="large"
+                              <RapiDocReact
-                              render-style="view"
+                                 spec-url={`${selectedApi?.path}${selectedVersion}/${tableName}/openapi.json`}
-                              show-header={false}
+                                 regular-font="Roboto,Helvetica,Arial,sans-serif"
-                              allow-authentication={false}
+                                 mono-font="Monaco, Menlo, Consolas, source-code-pro, monospace"
-                              allow-server-selection={false}
+                                 primary-color={metaData.branding.accentColor || "blue"}
-                              allow-spec-file-download={true}
+                                 font-size="large"
-                              sort-endpoints-by="method"
+                                 render-style="view"
-                              beforeTry={beforeTry}
+                                 show-header={false}
-                              css-file={"/api/rapi-doc.css"}
+                                 allow-authentication={false}
-                              css-classes={"qqq-rapi-doc"}
+                                 allow-server-selection={false}
-                           ></RapiDocReact>
+                                 allow-spec-file-download={true}
+                                 sort-endpoints-by="method"
+                                 beforeTry={beforeTry}
+                                 css-file={"/api/rapi-doc.css"}
+                                 css-classes={"qqq-rapi-doc"}
+                              ></RapiDocReact>
+                           }
                         </Card>
                      }
                   </Box>

src/setupProxy.js

@@ -52,5 +52,6 @@ module.exports = function (app)
    app.use("/processes", getRequestHandler());
    app.use("/reports", getRequestHandler());
    app.use("/images", getRequestHandler());
-   app.use("/api", getRequestHandler());
+   app.use("/api*", getRequestHandler());
+   app.use("/*api", getRequestHandler());
 };