From fdede4aecee98c369d8368d74eef51d3cb109f96 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Tue, 6 Aug 2024 13:17:13 -0400
Subject: [PATCH] Add chevron for dropdown, pr comments

---
 app/scripts/components/common/google-form.tsx |  4 +--
 .../components/common/page-header/index.tsx   |  1 -
 .../common/page-header/nav-menu-item.tsx      | 26 ++++++++-----------
 mock/veda.config.js                           |  2 +-
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/scripts/components/common/google-form.tsx b/app/scripts/components/common/google-form.tsx
index 3e4e15633..923c4ff80 100644
--- a/app/scripts/components/common/google-form.tsx
+++ b/app/scripts/components/common/google-form.tsx
@@ -42,7 +42,7 @@ const ButtonAsNavLink = styled(Button)`
   `}
 `;
 
-function GoogleForm(props: { title: string, src: string}) {
+const GoogleForm: React.FC<{ title: string, src: string }> = (props) => {
   const { title, src } = props;
   const { isRevealed, show, hide } = useFeedbackModal();
 
@@ -78,6 +78,6 @@ function GoogleForm(props: { title: string, src: string}) {
       />
     </>
   );
-}
+};
 
 export default GoogleForm;
diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
index be8bd49b0..5564d8a1a 100644
--- a/app/scripts/components/common/page-header/index.tsx
+++ b/app/scripts/components/common/page-header/index.tsx
@@ -226,7 +226,6 @@ const GlobalMenu = styled.ul`
   `}
 `;
 
-
 export const MODAL_TYPE = 'modal';
 export const INTERNAL_LINK_TYPE = 'internalLink';
 export const EXTERNAL_LINK_TYPE = 'externalLink';
diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx
index a70e3008f..b2858fae3 100644
--- a/app/scripts/components/common/page-header/nav-menu-item.tsx
+++ b/app/scripts/components/common/page-header/nav-menu-item.tsx
@@ -8,12 +8,14 @@ import {
   themeVal
 } from '@devseed-ui/theme-provider';
 import { Button } from '@devseed-ui/button';
+import { CollecticonChevronDownSmall } from '@devseed-ui/collecticons';
 import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown';
 
 import DropdownScrollable from '../dropdown-scrollable';
 import GoogleForm from '../google-form';
 import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ModalNavLink, NavItem } from './types';
 
+import { MODAL_TYPE, INTERNAL_LINK_TYPE, EXTERNAL_LINK_TYPE,  DROPDOWN_TYPE } from './';
 import GlobalMenuLinkCSS from '$styles/menu-link';
 import { useMediaQuery } from '$utils/use-media-query';
 
@@ -58,13 +60,8 @@ const DropMenuNavItem = styled(DropMenuItem)`
   `}
 `;
 
-export const MODAL_TYPE = 'modal';
-export const INTERNAL_LINK_TYPE = 'internalLink';
-export const EXTERNAL_LINK_TYPE = 'externalLink';
-export const DROPDOWN_TYPE = 'dropdown';
 
-
-function ChildItem({ child, onClick }: { child: NavLinkItem, onClick?:() => void}) {
+function LinkDropMenuNavItem({ child, onClick }: { child: NavLinkItem, onClick?:() => void}) {
   const { title, type, ...rest } = child;
   if (type === INTERNAL_LINK_TYPE) {
     return (
@@ -117,7 +114,8 @@ export default function NavMenuItem({ item, alignment, onClick }: {item: NavItem
     );
   } else if (type === MODAL_TYPE) {
     return (<li><GoogleForm title={title} src={(item as ModalNavLink).src} /></li>);
-  } else {// if (item.type === DROPDOWN_TYPE
+
+  } else if (type === DROPDOWN_TYPE) {
     const { title } = item as DropdownNavLink;
     // Mobile view
     if (isMediumDown) {
@@ -125,30 +123,28 @@ export default function NavMenuItem({ item, alignment, onClick }: {item: NavItem
         <>
         <li><GlobalMenuItem>{title} </GlobalMenuItem></li>
           {item.children.map((child) => {
-            return <ChildItem key={`${title}-dropdown-menu`} child={child} onClick={onClick} />;
+            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} onClick={onClick} />;
           })}
         </>
       );
-    // In case a user inputs a wrong type
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    } else if (type === DROPDOWN_TYPE) {
+    } else {
      return (<li>
       <DropdownScrollable
         alignment={alignment?? 'left'}
         triggerElement={(props) => (
           // @ts-expect-error achromic text exists
           <GlobalMenuButton {...props} variation='achromic-text' fitting='skinny'>
-            {title}
+            {title} <CollecticonChevronDownSmall size='small' />
           </GlobalMenuButton>
         )}
       >
         <DropMenu>
           {(item as DropdownNavLink).children.map((child) => {
-            return <ChildItem key={`${title}-dropdown-menu`} child={child} />;
+            return <LinkDropMenuNavItem key={`${title}-dropdown-menu`} child={child} />;
           })}
         </DropMenu>
       </DropdownScrollable>
              </li>);
-    } else throw Error('Invalid type for Nav Items');
-  }
+    } 
+  } else throw Error('Invalid type for Nav Items');
 }
\ No newline at end of file
diff --git a/mock/veda.config.js b/mock/veda.config.js
index 77d9673be..5ce345172 100644
--- a/mock/veda.config.js
+++ b/mock/veda.config.js
@@ -6,7 +6,7 @@ function checkEnvFlag(value) {
 
 let mainNavItems = [
   {
-    title: 'test',
+    title: 'Test',
     type: 'dropdown',
     children: [
       {