fix: Keyboard accessible context menus (#1768)

- Makes menus fully accessible and keyboard driven
- Currently adds 2.8% to initial bundle size due to the inclusion of Reakit and its dependency, popperjs.
- Converts all menus to functional components
- Remove old custom menu system
- Various layout and flow improvements around the menus

closes #1766

app/menus/GroupMenu.js

@@ -1,108 +1,74 @@
 // @flow
-import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import { withRouter, type RouterHistory } from "react-router-dom";
-import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
+import { useTranslation } from "react-i18next";
+import { useMenuState } from "reakit/Menu";
 import Group from "models/Group";
 import GroupDelete from "scenes/GroupDelete";
 import GroupEdit from "scenes/GroupEdit";
-import { DropdownMenu } from "components/DropdownMenu";
-import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
+import ContextMenu from "components/ContextMenu";
+import OverflowMenuButton from "components/ContextMenu/OverflowMenuButton";
+import Template from "components/ContextMenu/Template";
 import Modal from "components/Modal";
+import useStores from "hooks/useStores";
 
-type Props = {
-  ui: UiStore,
-  policies: PoliciesStore,
+type Props = {|
   group: Group,
-  history: RouterHistory,
   onMembers: () => void,
-  onOpen?: () => void,
-  onClose?: () => void,
-  t: TFunction,
-};
+|};
 
-@observer
-class GroupMenu extends React.Component<Props> {
-  @observable editModalOpen: boolean = false;
-  @observable deleteModalOpen: boolean = false;
+function GroupMenu({ group, onMembers }: Props) {
+  const { t } = useTranslation();
+  const { policies } = useStores();
+  const menu = useMenuState({ modal: true });
+  const [editModalOpen, setEditModalOpen] = React.useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
+  const can = policies.abilities(group.id);
 
-  onEdit = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    this.editModalOpen = true;
-  };
-
-  onDelete = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    this.deleteModalOpen = true;
-  };
-
-  handleEditModalClose = () => {
-    this.editModalOpen = false;
-  };
-
-  handleDeleteModalClose = () => {
-    this.deleteModalOpen = false;
-  };
-
-  render() {
-    const { policies, group, onOpen, onClose, t } = this.props;
-    const can = policies.abilities(group.id);
-
-    return (
-      <>
-        <Modal
-          title={t("Edit group")}
-          onRequestClose={this.handleEditModalClose}
-          isOpen={this.editModalOpen}
-        >
-          <GroupEdit
-            group={this.props.group}
-            onSubmit={this.handleEditModalClose}
-          />
-        </Modal>
-
-        <Modal
-          title={t("Delete group")}
-          onRequestClose={this.handleDeleteModalClose}
-          isOpen={this.deleteModalOpen}
-        >
-          <GroupDelete
-            group={this.props.group}
-            onSubmit={this.handleDeleteModalClose}
-          />
-        </Modal>
-        <DropdownMenu onOpen={onOpen} onClose={onClose}>
-          <DropdownMenuItems
-            items={[
-              {
-                title: `${t("Members")}…`,
-                onClick: this.props.onMembers,
-                visible: !!(group && can.read),
-              },
-              {
-                type: "separator",
-              },
-              {
-                title: `${t("Edit")}…`,
-                onClick: this.onEdit,
-                visible: !!(group && can.update),
-              },
-              {
-                title: `${t("Delete")}…`,
-                onClick: this.onDelete,
-                visible: !!(group && can.delete),
-              },
-            ]}
-          />
-        </DropdownMenu>
-      </>
-    );
-  }
+  return (
+    <>
+      <Modal
+        title={t("Edit group")}
+        onRequestClose={() => setEditModalOpen(false)}
+        isOpen={editModalOpen}
+      >
+        <GroupEdit group={group} onSubmit={() => setEditModalOpen(false)} />
+      </Modal>
+      <Modal
+        title={t("Delete group")}
+        onRequestClose={() => setDeleteModalOpen(false)}
+        isOpen={deleteModalOpen}
+      >
+        <GroupDelete group={group} onSubmit={() => setDeleteModalOpen(false)} />
+      </Modal>
+      <OverflowMenuButton {...menu} />
+      <ContextMenu {...menu} aria-label={t("Group options")}>
+        <Template
+          {...menu}
+          items={[
+            {
+              title: `${t("Members")}…`,
+              onClick: onMembers,
+              visible: !!(group && can.read),
+            },
+            {
+              type: "separator",
+            },
+            {
+              title: `${t("Edit")}…`,
+              onClick: () => setEditModalOpen(true),
+              visible: !!(group && can.update),
+            },
+            {
+              title: `${t("Delete")}…`,
+              onClick: () => setDeleteModalOpen(true),
+              visible: !!(group && can.delete),
+            },
+          ]}
+        />
+      </ContextMenu>
+    </>
+  );
 }
 
-export default withTranslation()<GroupMenu>(
-  inject("policies")(withRouter(GroupMenu))
-);
+export default observer(GroupMenu);