From ab2a944b81cd3400a04a0a04aea988533aa1342e Mon Sep 17 00:00:00 2001
From: amazon-meaisiah <meaisiah@amazon.com>
Date: Thu, 5 Mar 2020 11:27:36 -0800
Subject: [PATCH 1/2] Show stage names with APIs

---
 dev-portal/src/components/ApisMenu.jsx | 52 ++++++++++++++++++++------
 1 file changed, 40 insertions(+), 12 deletions(-)

diff --git a/dev-portal/src/components/ApisMenu.jsx b/dev-portal/src/components/ApisMenu.jsx
index f4fa721d7..743c01e2a 100644
--- a/dev-portal/src/components/ApisMenu.jsx
+++ b/dev-portal/src/components/ApisMenu.jsx
@@ -68,14 +68,29 @@ function GenericApiSubsection ({ title, listOfApis, selectedApiId }) {
       >
         {title}
       </Menu.Header>
-      {listOfApis.map(api => (
+      {_.toPairs(_.groupBy(listOfApis, api => api.apiId || api.id)).map(([id, apis]) => (
         <Menu.Item
-          key={api.id}
-          as={Link}
-          to={`/apis/${api.id}`}
-          active={isActive(api.id.toString(), selectedApiId.toString())}
+          key={id}
+          className='link'
+          active={apis.some(api => isActive(`${api.id}`, `${selectedApiId}`))}
         >
-          {api.swagger.info.title}
+          {apis[0].swagger.info.title}
+          {apis.length === 1 ? (
+            apis[0].stage != null ? ` (${apis[0].stage})` : null
+          ) : (
+            <Menu.Menu>
+              {apis.map(api => (
+                <Menu.Item
+                  key={api.id}
+                  as={Link}
+                  to={`/apis/${api.id}`}
+                  active={isActive(api.id, `${selectedApiId}`)}
+                >
+                  {api.stage}
+                </Menu.Item>
+              ))}
+            </Menu.Menu>
+          )}
         </Menu.Item>
       ))}
     </Menu>
@@ -93,14 +108,27 @@ function ApiSubsection ({ title, listOfApis, selectedApiId, selectedStage = fals
       >
         {title}
       </Menu.Header>
-      {listOfApis.map(api => (
+      {_.toPairs(_.groupBy(listOfApis, "id")).map(([id, apis]) => (
         <Menu.Item
-          key={`${api.id}_${api.stage}`}
-          as={Link}
-          to={`/apis/${api.id}/${api.stage}`}
-          active={isActive(api.id.toString(), selectedApiId.toString(), api.stage.toString(), selectedStage)}
+          key={id}
+          className='link'
+          active={isActive(id, `${selectedApiId}`)}
         >
-          {api.swagger.info.title}
+          {apis[0].swagger.info.title}
+          {apis.length === 1 ? ` (${apis[0].stage})` : (
+            <Menu.Menu>
+              {apis.map(api => (
+                <Menu.Item
+                  key={`${id}_${api.stage}`}
+                  as={Link}
+                  to={`/apis/${id}/${api.stage}`}
+                  active={isActive(id, `${selectedApiId}`, `${api.stage}`, selectedStage)}
+                >
+                  {api.stage}
+                </Menu.Item>
+              ))}
+            </Menu.Menu>
+          )}
         </Menu.Item>
       ))}
     </Menu>

From 3a877c378cecf3a4e7aa26ec95be6058afd8c4ad Mon Sep 17 00:00:00 2001
From: amazon-meaisiah <meaisiah@amazon.com>
Date: Thu, 5 Mar 2020 14:50:43 -0800
Subject: [PATCH 2/2] Tweak styling a little

---
 dev-portal/src/components/ApisMenu.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dev-portal/src/components/ApisMenu.jsx b/dev-portal/src/components/ApisMenu.jsx
index 743c01e2a..343b79651 100644
--- a/dev-portal/src/components/ApisMenu.jsx
+++ b/dev-portal/src/components/ApisMenu.jsx
@@ -85,6 +85,7 @@ function GenericApiSubsection ({ title, listOfApis, selectedApiId }) {
                   as={Link}
                   to={`/apis/${api.id}`}
                   active={isActive(api.id, `${selectedApiId}`)}
+                  style={{ 'font-weight': '400' }}
                 >
                   {api.stage}
                 </Menu.Item>
@@ -123,6 +124,7 @@ function ApiSubsection ({ title, listOfApis, selectedApiId, selectedStage = fals
                   as={Link}
                   to={`/apis/${id}/${api.stage}`}
                   active={isActive(id, `${selectedApiId}`, `${api.stage}`, selectedStage)}
+                  style={{ 'font-weight': '400' }}
                 >
                   {api.stage}
                 </Menu.Item>