From cdad2319286ffb0528aa6de4f0b9a63b7f5a1093 Mon Sep 17 00:00:00 2001
From: Samantha <samantha.piatt@childrens.harvard.edu>
Date: Wed, 24 Jan 2024 15:40:56 -0500
Subject: [PATCH] [ALS-5654] Add dropdown to help link if more than one url is
 given (#163)

---
 .../packages/main/src/parts/App.js            | 36 ++++++++++++++++---
 main/config/settings/example.yml              |  2 +-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/addons/addon-custom/packages/main/src/parts/App.js b/addons/addon-custom/packages/main/src/parts/App.js
index 9ce9b2c849..2b8ca7f67c 100644
--- a/addons/addon-custom/packages/main/src/parts/App.js
+++ b/addons/addon-custom/packages/main/src/parts/App.js
@@ -18,7 +18,7 @@ import { Switch, Redirect, withRouter } from 'react-router-dom';
 import { action, decorate, computed } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import { getEnv } from 'mobx-state-tree';
-import { Menu } from 'semantic-ui-react';
+import { Menu, Dropdown, DropdownMenu, DropdownItem } from 'semantic-ui-react';
 
 import { getRoutes, getMenuItems, getDefaultRouteLocation } from '@aws-ee/base-ui/dist/helpers/plugins-util';
 import MainLayout from '@aws-ee/base-ui/dist/parts/MainLayout';
@@ -73,14 +73,42 @@ class RegisterApp extends React.Component {
     }
   }
 
-  openHelp() {
-    window.open(branding.page.help, '_blank');
+  openHelp(url) {
+    return () => window.open(url, '_blank');
+  }
+
+  getLinks() {
+    const helpLinks = (branding.page.help || '').split(',').filter(x => x);
+    if (helpLinks.length < 2) {
+      return helpLinks;
+    }
+    return helpLinks.reduce((items, link) => {
+      const [text, ...urlParts] = link.split('=');
+      const url = urlParts.join('='); // if there are query params then we need to rebuild the url
+      if (!text || !url) {
+        console.error(`Poorly formed help link was provided: "${link}"`, 'Expected: "Text=URL"');
+        return items;
+      }
+      return [...items, { text, url }];
+    }, []);
   }
 
   appMenuItems() {
+    const links = this.getLinks();
     return (
       <>
-        {branding.page.help && <Menu.Item onClick={this.openHelp}>Help</Menu.Item>}
+        {links.length === 1 && <Menu.Item onClick={this.openHelp(links[0])}>Help</Menu.Item>}
+        {links.length > 1 && (
+          <Dropdown item text="Help">
+            <DropdownMenu>
+              {links.map(({ text, url }) => (
+                <DropdownItem key={text} onClick={this.openHelp(url)}>
+                  {text}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        )}
         <TermsModal // Clickable Terms menu item
           trigger={<Menu.Item>Terms of Service</Menu.Item>}
           closeOnDimmerClick
diff --git a/main/config/settings/example.yml b/main/config/settings/example.yml
index e4d85b2cfa..7b450c0962 100644
--- a/main/config/settings/example.yml
+++ b/main/config/settings/example.yml
@@ -163,5 +163,5 @@ HostedZoneId: 'Z02455261RJ9QQPVHFZGA'
 # Should the TOS link be enabled on the landing page.
 #tosLinkOnLanding: true
 
-# URL for help link
+# URL for help link. Can be empty, a single url, or a list like, "Some Link=https://www.google.com/?q=what,Other Link=https://www.example.com/"
 #helpUrl: about:blank
\ No newline at end of file