Improve SidebarDropdownMenu component (#17945)

airbytehq · Oct 13, 2022 · 9836c11 · 9836c11
1 parent 57571ee
commit 9836c11
Showing 1 changed file with 44 additions and 27 deletions.
diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx
@@ -30,34 +30,43 @@ interface Label {
   displayName: React.ReactNode;
 }
 
+interface LinkMenuItemProps {
+  active: boolean;
+  item: MenuItemLink;
+}
+
+const LinkMenuItem: React.FC<LinkMenuItemProps> = ({ active, item }) => {
+  return (
+    <a
+      className={classNames(styles.item, { [styles.active]: active })}
+      href={item.href}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <span className={styles.icon}>{item.icon}</span>
+      <Text size="lg">{item.displayName}</Text>
+    </a>
+  );
+};
+
+interface ButtonMenuItemProps {
+  active: boolean;
+  item: MenuItemButton;
+}
+
+const ButtonMenuItem: React.FC<ButtonMenuItemProps> = ({ active, item }) => {
+  return (
+    <button className={classNames(styles.item, { [styles.active]: active })} onClick={item.onClick}>
+      <span className={styles.icon}>{item.icon}</span>
+      <Text size="lg">{item.displayName}</Text>
+    </button>
+  );
+};
+
 export const SidebarDropdownMenu: React.FC<{
   label: Label;
-  options?: Array<MenuItemLink | MenuItemButton>;
+  options: Array<MenuItemLink | MenuItemButton>;
 }> = ({ label, options }) => {
-  function menuItem(active: boolean, item: MenuItemLink | MenuItemButton): React.ReactNode {
-    switch (item.type) {
-      case SidebarDropdownMenuItemType.LINK:
-        return (
-          <a
-            className={classNames(styles.item, { [styles.active]: active })}
-            href={item.href}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <span className={styles.icon}>{item.icon}</span>
-            <Text size="lg">{item.displayName}</Text>
-          </a>
-        );
-      case SidebarDropdownMenuItemType.BUTTON:
-        return (
-          <button className={classNames(styles.item, { [styles.active]: active })} onClick={item.onClick}>
-            <span className={styles.icon}>{item.icon}</span>
-            <Text size="lg">{item.displayName}</Text>
-          </button>
-        );
-    }
-  }
-
   return (
     <Menu className={styles.sidebarMenu} as="div">
       {({ open }) => (
@@ -69,8 +78,16 @@ export const SidebarDropdownMenu: React.FC<{
             </Text>
           </Menu.Button>
           <Menu.Items className={styles.items}>
-            {options?.map((item, index) => (
-              <Menu.Item key={index}>{({ active }) => menuItem(active, item)}</Menu.Item>
+            {options.map((item, index) => (
+              <Menu.Item key={index}>
+                {({ active }) =>
+                  item.type === SidebarDropdownMenuItemType.LINK ? (
+                    <LinkMenuItem item={item} active={active} />
+                  ) : (
+                    <ButtonMenuItem item={item} active={active} />
+                  )
+                }
+              </Menu.Item>
             ))}
           </Menu.Items>
         </>