FI-1925: Dynamically update Swagger path (#352)

* add logic to dynamically update hostname * add check for empty query params * remove console * send scheme through api link --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
inferno-framework · May 25, 2023 · c62b840 · c62b840
1 parent 4cf9149
commit c62b840
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 37 deletions.
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
-import useStyles from './styles';
 import { Box, Link, Typography, Divider, IconButton, MenuItem, Menu } from '@mui/material';
+import { Help } from '@mui/icons-material';
 import logo from '~/images/inferno_logo.png';
-import { getStaticPath } from '~/api/infernoApiService';
+import { basePath, getStaticPath } from '~/api/infernoApiService';
 import { FooterLink } from '~/models/testSuiteModels';
 import { useAppStore } from '~/store/app';
-import { Help } from '@mui/icons-material';
+import useStyles from './styles';
 
 interface FooterProps {
   version: string;
@@ -19,23 +19,32 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [showMenu, setShowMenu] = React.useState<boolean>(false);
 
-  const apiLink = (
-    <Box display="flex">
-      <Link
-        href="https://inferno-framework.github.io/inferno-core/api-docs/"
-        target="_blank"
-        rel="noreferrer"
-        underline="hover"
-        className={`${classes.link} ${classes.logoLink}`}
-        sx={{ fontSize: windowIsSmall ? '0.7rem' : '0.9rem' }}
-      >
-        API
-      </Link>
-    </Box>
-  );
+  const apiLink = () => {
+    // To test locally, set apiBase to 'http://127.0.0.1:4000/inferno-core/api-docs/'
+    const apiBase = 'https://inferno-framework.github.io/inferno-core/api-docs/';
+    const hostname = window.location.host;
+    console.log(window.location);
+    const fullHost = `${hostname}/${basePath}`;
+    const scheme = window.location.protocol;
+
+    return (
+      <Box display="flex">
+        <Link
+          href={`${apiBase}?scheme=${scheme}&host=${fullHost}`}
+          target="_blank"
+          rel="noreferrer"
+          underline="hover"
+          className={`${classes.link} ${classes.logoLink}`}
+          sx={{ fontSize: windowIsSmall ? '0.7rem' : '0.9rem' }}
+        >
+          API
+        </Link>
+      </Box>
+    );
+  };
 
   const renderLogoText = () => {
-    if (!version) return apiLink;
+    if (!version) return apiLink();
     return (
       <Box display="flex" flexDirection="column">
         {!windowIsSmall && (
@@ -53,7 +62,7 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
             </Typography>
           </Box>
           <Divider flexItem orientation="vertical" sx={{ margin: '4px 8px' }} />
-          {apiLink}
+          {apiLink()}
         </Box>
       </Box>
     );

diff --git a/docs/api-docs/index.html b/docs/api-docs/index.html
@@ -36,25 +36,63 @@
     <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
     <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
     <script>
-    window.onload = function() {
-      // Begin Swagger UI call region
-      const ui = SwaggerUIBundle({
-        url: "/inferno-core/swagger.yml",
-        dom_id: '#swagger-ui',
-        deepLinking: true,
-        presets: [
-          SwaggerUIBundle.presets.apis,
-          SwaggerUIStandalonePreset
-        ],
-        plugins: [
-          SwaggerUIBundle.plugins.DownloadUrl
-        ],
-        layout: "StandaloneLayout"
+      // Referencing this open issue: https://github.com/swagger-api/swagger-ui/issues/5981
+      // This solution may be subject to change dependent on Swagger issue status - awang@, 4/14/23
+      const UrlMutatorPlugin = (system) => ({
+        rootInjects: {
+          setScheme: (scheme) => {
+            const jsonSpec = system.getState().toJSON().spec.json;
+            const schemes = Array.isArray(scheme) ? scheme : [scheme];
+            const newJsonSpec = Object.assign({}, jsonSpec, { schemes });
+
+            return system.specActions.updateJsonSpec(newJsonSpec);
+          },
+          setHost: (host) => {
+            const jsonSpec = system.getState().toJSON().spec.json;
+            const newJsonSpec = Object.assign({}, jsonSpec, { host });
+
+            return system.specActions.updateJsonSpec(newJsonSpec);
+          },
+          setBasePath: (basePath) => {
+            const jsonSpec = system.getState().toJSON().spec.json;
+            const newJsonSpec = Object.assign({}, jsonSpec, { basePath });
+
+            return system.specActions.updateJsonSpec(newJsonSpec);
+          }
+        }
       });
-      // End Swagger UI call region
 
-      window.ui = ui;
-    };
-  </script>
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const scheme = urlParams.get('scheme').replaceAll(':', '');
+      const host = urlParams.get('host');
+
+      window.onload = () => {
+        // Begin Swagger UI call region
+        const ui = SwaggerUIBundle({
+          url: "/inferno-core/swagger.yml",
+          dom_id: '#swagger-ui',
+          deepLinking: true,
+          onComplete: () => {
+            if (host) window.ui.setHost(host);
+            if (scheme) window.ui.setScheme(scheme);
+          },
+          presets: [
+            SwaggerUIBundle.presets.apis,
+            SwaggerUIStandalonePreset
+          ],
+          plugins: [
+            SwaggerUIBundle.plugins.DownloadUrl,
+            UrlMutatorPlugin,
+          ],
+          layout: "StandaloneLayout"
+        });
+        // End Swagger UI call region
+
+        window.ui = ui;
+
+
+      };
+    </script>
   </body>
 </html>