From 617f7cda1079a0138265eeabbbe627d6d743c85c Mon Sep 17 00:00:00 2001
From: Katie Stahl <kathryn.stahl@nationwidechildrens.org>
Date: Fri, 8 Dec 2023 09:24:53 -0500
Subject: [PATCH] feat: update API page to show users endpoint for graphql
 requests

* feat: update API page to show users endpoint for graphql requests

* feat: update API page to show users endpoint for graphql requests

* feat: update API page to show users endpoint for graphql requests
---
 .../Playground.scss => API/API.scss}          | 21 +++++
 .../Playground.tsx => API/API.tsx}            | 82 +++++++++++--------
 client/src/pages/API/index.ts                 |  1 +
 client/src/pages/Playground/index.ts          |  1 -
 client/src/routes/public.tsx                  |  4 +-
 5 files changed, 74 insertions(+), 35 deletions(-)
 rename client/src/pages/{Playground/Playground.scss => API/API.scss} (54%)
 rename client/src/pages/{Playground/Playground.tsx => API/API.tsx} (81%)
 create mode 100644 client/src/pages/API/index.ts
 delete mode 100644 client/src/pages/Playground/index.ts

diff --git a/client/src/pages/Playground/Playground.scss b/client/src/pages/API/API.scss
similarity index 54%
rename from client/src/pages/Playground/Playground.scss
rename to client/src/pages/API/API.scss
index 199750ef..62e78171 100644
--- a/client/src/pages/Playground/Playground.scss
+++ b/client/src/pages/API/API.scss
@@ -1,3 +1,24 @@
+.api-page-header {
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
+.api-info-container {
+  padding: 20px;
+  p {
+    margin-bottom: 15px;
+    code {
+      color: #c7254e;
+    }
+  }
+}
+
+.playground-page-header {
+  padding-left: 20px;
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
 .playground-page-container {
   background-color: var(--background);
   display: flex;
diff --git a/client/src/pages/Playground/Playground.tsx b/client/src/pages/API/API.tsx
similarity index 81%
rename from client/src/pages/Playground/Playground.tsx
rename to client/src/pages/API/API.tsx
index 5024497a..c1256292 100644
--- a/client/src/pages/Playground/Playground.tsx
+++ b/client/src/pages/API/API.tsx
@@ -1,6 +1,6 @@
 // hooks/dependencies
 import { useState } from 'react';
-import './Playground.scss';
+import './API.scss';
 import { API_URL } from 'config';
 
 // graphiql
@@ -185,7 +185,7 @@ const query6 = `
 
 const fetcher = createGraphiQLFetcher({ url: API_URL ?? '' });
 
-export const Playground = () => {
+export const API = () => {
   const [isCopied, setIsCopied] = useState(false);
 
   const onCopyText = () => {
@@ -339,37 +339,55 @@ export const Playground = () => {
   ];
 
   return (
-    <div className="playground-page-container">
-      <div className="collapse-group">
-        {sectionsMap.map((section) => {
-          return (
-            <Accordion key={section.header}>
-              <AccordionSummary
-                style={{
-                  padding: '0 10px',
-                  backgroundColor: 'var(--background-light)',
-                }}
-                expandIcon={<ExpandMoreIcon />}
-              >
-                <h5>
-                  <b>{section.header}</b>
-                </h5>
-              </AccordionSummary>
-              <AccordionDetails
-                style={{
-                  maxHeight: '350px',
-                  overflow: 'scroll',
-                  padding: '5px',
-                }}
-              >
-                {section.sectionContent}
-              </AccordionDetails>
-            </Accordion>
-          );
-        })}
+    <div>
+      <div className="api-info-container">
+        <div className="api-page-header">API Documentation</div>
+        <p>
+          The DGIdb API can be used to query for drug-gene interactions in your
+          own applications.
+        </p>
+        <p>
+          To query the API, make GraphQL queries to:{' '}
+          <code>https://dgidb.org/api/graphql</code>
+        </p>
+        <p>
+          For examples and to experiment with API requests in your browser,
+          refer to the Playground below.
+        </p>
       </div>
-      <div className="main">
-        <GraphiQL fetcher={fetcher} />
+      <div className="playground-page-header">Playground</div>
+      <div className="playground-page-container">
+        <div className="collapse-group">
+          {sectionsMap.map((section) => {
+            return (
+              <Accordion key={section.header}>
+                <AccordionSummary
+                  style={{
+                    padding: '0 10px',
+                    backgroundColor: 'var(--background-light)',
+                  }}
+                  expandIcon={<ExpandMoreIcon />}
+                >
+                  <h5>
+                    <b>{section.header}</b>
+                  </h5>
+                </AccordionSummary>
+                <AccordionDetails
+                  style={{
+                    maxHeight: '350px',
+                    overflow: 'scroll',
+                    padding: '5px',
+                  }}
+                >
+                  {section.sectionContent}
+                </AccordionDetails>
+              </Accordion>
+            );
+          })}
+        </div>
+        <div className="main">
+          <GraphiQL fetcher={fetcher} />
+        </div>
       </div>
     </div>
   );
diff --git a/client/src/pages/API/index.ts b/client/src/pages/API/index.ts
new file mode 100644
index 00000000..6e432e7c
--- /dev/null
+++ b/client/src/pages/API/index.ts
@@ -0,0 +1 @@
+export * from './API';
diff --git a/client/src/pages/Playground/index.ts b/client/src/pages/Playground/index.ts
deleted file mode 100644
index 469667af..00000000
--- a/client/src/pages/Playground/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Playground';
diff --git a/client/src/routes/public.tsx b/client/src/routes/public.tsx
index be874b60..4cb6c843 100644
--- a/client/src/routes/public.tsx
+++ b/client/src/routes/public.tsx
@@ -11,7 +11,7 @@ import { DrugRecord } from 'components/Drug/DrugRecord';
 import { MainLayout } from 'components/Layout';
 import { About } from 'pages/About';
 import { Downloads } from 'pages/Downloads';
-import { Playground } from 'pages/Playground';
+import { API } from 'pages/API';
 import { InteractionRecord } from 'components/Interaction/InteractionRecord';
 
 const App = () => {
@@ -91,7 +91,7 @@ export const Routes = () => {
         { path: '/browse/sources', element: <BrowseSources /> },
         { path: '/about', element: <About /> },
         { path: '/downloads', element: <Downloads /> },
-        { path: '/api', element: <Playground /> },
+        { path: '/api', element: <API /> },
         { path: '/', element: <Home /> },
         { path: '*', element: <Navigate to="." /> },
       ],