Feature/204 swagger UI page

app/client/package.json

@@ -32,6 +32,7 @@
     "@types/node": "18.8.5",
     "@types/react": "18.0.21",
     "@types/react-dom": "18.0.6",
+    "@types/swagger-ui-react": "4.18.0",
     "web-vitals": "3.0.3"
   },
   "dependencies": {
@@ -49,6 +50,7 @@
     "react-scripts": "5.0.1",
     "react-select": "5.6.0",
     "remark-gfm": "3.0.1",
+    "swagger-ui-react": "4.18.2",
     "typescript": "4.8.4"
   },
   "proxy": "http://localhost:9090",

app/client/src/components/app.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom';
 import '@uswds/uswds/css/uswds.css';
 import 'bootstrap/dist/css/bootstrap-grid.min.css';
 // components
+import ApiDocs from 'routes/apiDocs';
 import { Home, QueryBuilder } from 'routes/home';
 import NationalDownloads from 'routes/nationalDownloads';
 import ErrorPage from 'routes/404';
@@ -132,6 +133,7 @@ export function App() {
     <BrowserRouter basename={serverBasePath}>
       <Routes>
         <Route index element={<Navigate to="/attains" replace />} />
+        <Route path="/api-documentation" element={<ApiDocs />} />
         <Route path="/attains" element={<Home />}>
           <Route path=":profile" element={<QueryBuilder />} />
         </Route>

app/client/src/components/navBar.tsx

@@ -0,0 +1,126 @@
+import type { FunctionComponent, MouseEventHandler, SVGProps } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as Api } from '@uswds/uswds/img/usa-icons/api.svg';
+import { ReactComponent as FilePresent } from '@uswds/uswds/img/usa-icons/file_present.svg';
+import { ReactComponent as Folder } from '@uswds/uswds/img/usa-icons/folder.svg';
+import { ReactComponent as Home } from '@uswds/uswds/img/usa-icons/home.svg';
+import { ReactComponent as Book } from '@uswds/uswds/img/usa-icons/local_library.svg';
+// config
+import { serverUrl } from 'config';
+
+export default NavBar;
+
+export function NavBar() {
+  const navigate = useNavigate();
+
+  const location = window.location;
+  const baseUrl = location.hostname === 'localhost' 
+    ? `${location.protocol}//${location.hostname}:9090`
+    : serverUrl;
+
+  return (
+    <>
+      <NavButton
+        label="Home"
+        icon={Home}
+        onClick={() => navigate('/')}
+        styles={['margin-right-05']}
+      />
+      <NavButton
+        label="National Downloads"
+        icon={Folder}
+        onClick={() => navigate('/national-downloads')}
+        styles={['margin-right-05']}
+      />
+      <NavButton
+        label="API Documentation"
+        icon={Api}
+        onClick={() => navigate('/api-documentation')}
+        styles={['margin-right-05']}
+      />
+      <NavButton
+        label="User's Guide (PDF)"
+        icon={FilePresent}
+        href={`${baseUrl}/api/getFile/path/Expert-Query-Users-Guide.pdf`}
+      />
+      {window.location.pathname.match(/^\/attains/) && (
+        <NavButton
+          label="Glossary"
+          icon={Book}
+          styles={['js-glossary-toggle']}
+        />
+      )}
+    </>
+  );
+}
+
+type NavButtonProps = {
+  icon: FunctionComponent<SVGProps<SVGSVGElement>>;
+  label: string;
+  href?: string;
+  onClick?: MouseEventHandler;
+  styles?: string[];
+};
+
+export function NavButton({
+  icon,
+  label,
+  href,
+  onClick = () => {},
+  styles = [],
+}: NavButtonProps) {
+  const buttonStyles = [
+    'margin-bottom-2',
+    'bg-white',
+    'border-2px',
+    'border-transparent',
+    'padding-1',
+    'radius-md',
+    'width-auto',
+    'hover:bg-white',
+    'hover:border-primary',
+    ...styles,
+  ].join(' ');
+
+  const Icon = icon;
+
+  const innerContent = (
+    <>
+      <Icon
+        aria-hidden="true"
+        className="height-2 margin-right-1 text-primary top-2px usa-icon width-2"
+        focusable="false"
+        role="img"
+      />
+      <span className="font-ui-md text-bold text-primary">{label}</span>    
+    </>
+  );
+
+  if (href) {
+    return (
+      <a 
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={label}
+        className={buttonStyles}
+        style={{ cursor: 'pointer', lineHeight: 1.15, textDecoration: 'none' }}
+        type="button"
+      >
+        {innerContent}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      title={label}
+      className={buttonStyles}
+      onClick={onClick}
+      style={{ cursor: 'pointer' }}
+      type="button"
+    >
+      {innerContent}
+    </button>
+  );
+}

app/client/src/routes/apiDocs.tsx

@@ -0,0 +1,23 @@
+import SwaggerUI from 'swagger-ui-react';
+import 'swagger-ui-react/swagger-ui.css';
+// components
+import { NavBar } from 'components/navBar';
+// config
+import { serverUrl } from 'config';
+
+export default ApiDocs;
+
+export function ApiDocs() {
+  return (
+    <>
+      <NavBar />
+      <div>
+        <SwaggerUI
+          url={`${serverUrl}/api/getFile/path/swagger/attains.json`}
+          deepLinking={true}
+          defaultModelsExpandDepth={-1}
+        />
+      </div>
+    </>
+  );
+}

app/client/src/routes/home.tsx

@@ -7,10 +7,7 @@ import {
   useParams,
 } from 'react-router-dom';
 import Select from 'react-select';
-import { ReactComponent as Book } from '@uswds/uswds/img/usa-icons/local_library.svg';
 import { ReactComponent as Download } from '@uswds/uswds/img/usa-icons/file_download.svg';
-import { ReactComponent as Folder } from '@uswds/uswds/img/usa-icons/folder.svg';
-import { ReactComponent as FilePresent } from '@uswds/uswds/img/usa-icons/file_present.svg';
 // components
 import { Accordion, AccordionItem } from 'components/accordion';
 import { Alert } from 'components/alert';
@@ -22,7 +19,7 @@ import { InfoTooltip } from 'components/infoTooltip';
 import { Loading } from 'components/loading';
 import { DownloadModal } from 'components/downloadModal';
 import { ClearSearchModal } from 'components/clearSearchModal';
-import { NavButton } from 'components/navButton';
+import { NavBar } from 'components/navBar';
 import { RadioButtons } from 'components/radioButtons';
 import { SourceSelect } from 'components/sourceSelect';
 import { Summary } from 'components/summary';
@@ -52,8 +49,6 @@ import type { Profile } from 'config/profiles';
 export default Home;
 
 export function Home() {
-  const navigate = useNavigate();
-
   const { content } = useContentState();
 
   const staticOptions = useStaticOptions(content);
@@ -87,30 +82,10 @@ export function Home() {
     );
   }
 
-  const location = window.location;
-  const baseUrl = location.hostname === 'localhost' 
-    ? `${location.protocol}//${location.hostname}:9090`
-    : serverUrl;
-
   if (content.status === 'success') {
     return (
       <>
-        <NavButton
-          label="Glossary"
-          icon={Book}
-          styles={['js-glossary-toggle', 'margin-right-05']}
-        />
-        <NavButton
-          label="National Downloads"
-          icon={Folder}
-          styles={['margin-right-05']}
-          onClick={() => navigate('/national-downloads')}
-        />
-        <NavButton
-          label="User's Guide (PDF)"
-          icon={FilePresent}
-          href={`${baseUrl}/api/getFile/path/Expert-Query-Users-Guide.pdf`}
-        />
+        <NavBar />
         <GlossaryPanel path={getPageName()} />
         <div>
           <h2>Query ATTAINS Data</h2>

app/client/src/routes/nationalDownloads.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { ReactComponent as Exit } from '@uswds/uswds/img/usa-icons/launch.svg';
-import { ReactComponent as Home } from '@uswds/uswds/img/usa-icons/home.svg';
 // components
 import { Alert } from 'components/alert';
 import { Loading } from 'components/loading';
-import { NavButton } from 'components/navButton';
+import { NavBar } from 'components/navBar';
 import { Summary } from 'components/summary';
 // config
 import { getData, profiles, serverUrl } from 'config';
@@ -23,7 +21,6 @@ export default NationalDownloads;
 
 export function NationalDownloads() {
   const { getSignal } = useAbort();
-  const navigate = useNavigate();
 
   const [metadata, setMetadata] = useState<FetchState<Metadata>>({
     status: 'idle',
@@ -43,7 +40,7 @@ export function NationalDownloads() {
 
   return (
     <>
-      <NavButton label="Home" icon={Home} onClick={() => navigate('/')} />
+      <NavBar />
       <div>
         <h2>National Downloads</h2>
         <ul className="usa-list">

app/client/src/styles.css

@@ -146,3 +146,14 @@
 .glossary-term:hover svg {
   color: #1a4480;
 }
+
+/* --- SwaggerUI --- */
+.swagger-ui td,
+.swagger-ui th {
+  background-color: inherit;
+  border: none;
+}
+
+.swagger-ui .info {
+  margin-top: 0;
+}