Assorted cleanup, minor bug fixes, styling fixes, eslint rules (#5165

* fix: Logic error in toast
fix: Remove useless component

* fix: Logout not clearing all stores

* Add icons to notification settings

* Add eslint rule to enforce spaced comment

* Add eslint rule for arrow-body-style

* Add eslint rule to enforce self-closing components

* Add menu to api key settings
Fix: Deleting webhook subscription does not remove from UI
Split webhook subscriptions into active and inactive
Styling updates

app/menus/AccountMenu.tsx

@@ -36,8 +36,8 @@ const AccountMenu: React.FC = ({ children }) => {
     }
   }, [menu, theme, previousTheme]);
 
-  const actions = React.useMemo(() => {
-    return [
+  const actions = React.useMemo(
+    () => [
       openKeyboardShortcuts,
       downloadApp,
       openAPIDocumentation,
@@ -50,8 +50,9 @@ const AccountMenu: React.FC = ({ children }) => {
       navigateToAccountPreferences,
       separator(),
       logout,
-    ];
-  }, []);
+    ],
+    []
+  );
 
   return (
     <>

app/menus/ApiKeyMenu.tsx

@@ -0,0 +1,52 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useMenuState } from "reakit/Menu";
+import ApiKey from "~/models/ApiKey";
+import TokenRevokeDialog from "~/scenes/Settings/components/TokenRevokeDialog";
+import ContextMenu from "~/components/ContextMenu";
+import MenuItem from "~/components/ContextMenu/MenuItem";
+import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  /** The apiKey to associate with the menu */
+  token: ApiKey;
+  /** CSS class name */
+  className?: string;
+};
+
+function ApiKeyMenu({ token, className }: Props) {
+  const menu = useMenuState({
+    modal: true,
+  });
+  const { dialogs } = useStores();
+  const { t } = useTranslation();
+
+  const handleRevoke = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Revoke token"),
+      isCentered: true,
+      content: (
+        <TokenRevokeDialog onSubmit={dialogs.closeAllModals} token={token} />
+      ),
+    });
+  }, [t, dialogs, token]);
+
+  return (
+    <>
+      <OverflowMenuButton
+        aria-label={t("Show menu")}
+        className={className}
+        {...menu}
+      />
+      <ContextMenu {...menu}>
+        <MenuItem {...menu} onClick={handleRevoke} dangerous>
+          {t("Revoke")}
+        </MenuItem>
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(ApiKeyMenu);

app/menus/OrganizationMenu.tsx

@@ -31,15 +31,16 @@ const OrganizationMenu: React.FC = ({ children }) => {
 
   // NOTE: it's useful to memoize on the team id and session because the action
   // menu is not cached at all.
-  const actions = React.useMemo(() => {
-    return [
+  const actions = React.useMemo(
+    () => [
       ...createTeamsList(context),
       createTeam,
       separator(),
       navigateToSettings,
       logout,
-    ];
-  }, [context]);
+    ],
+    [context]
+  );
 
   return (
     <>