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/scenes/Settings/Groups.tsx

@@ -12,7 +12,6 @@ import Heading from "~/components/Heading";
 import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
-import Subheading from "~/components/Subheading";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -57,11 +56,15 @@ function Groups() {
           Groups can be used to organize and manage the people on your team.
         </Trans>
       </Text>
-      <Subheading>{t("All groups")}</Subheading>
       <PaginatedList
         items={groups.orderedData}
         empty={<Empty>{t("No groups have been created yet")}</Empty>}
         fetch={groups.fetchPage}
+        heading={
+          <h2>
+            <Trans>All</Trans>
+          </h2>
+        }
         renderItem={(item: Group) => (
           <GroupListItem
             key={item.id}

app/scenes/Settings/Notifications.tsx

@@ -1,9 +1,20 @@
 import { debounce } from "lodash";
 import { observer } from "mobx-react";
-import { EmailIcon } from "outline-icons";
+import {
+  AcademicCapIcon,
+  CheckboxIcon,
+  CollectionIcon,
+  CommentIcon,
+  EditIcon,
+  EmailIcon,
+  PublishIcon,
+  StarredIcon,
+  UserIcon,
+} from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { NotificationEventType } from "@shared/types";
+import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
 import Notice from "~/components/Notice";
@@ -24,6 +35,7 @@ function Notifications() {
   const options = [
     {
       event: NotificationEventType.PublishDocument,
+      icon: <PublishIcon color="currentColor" />,
       title: t("Document published"),
       description: t(
         "Receive a notification whenever a new document is published"
@@ -31,6 +43,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.UpdateDocument,
+      icon: <EditIcon color="currentColor" />,
       title: t("Document updated"),
       description: t(
         "Receive a notification when a document you are subscribed to is edited"
@@ -38,6 +51,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateComment,
+      icon: <CommentIcon color="currentColor" />,
       title: t("Comment posted"),
       description: t(
         "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
@@ -45,6 +59,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.Mentioned,
+      icon: <EmailIcon color="currentColor" />,
       title: t("Mentioned"),
       description: t(
         "Receive a notification when someone mentions you in a document or comment"
@@ -52,6 +67,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.CreateCollection,
+      icon: <CollectionIcon color="currentColor" />,
       title: t("Collection created"),
       description: t(
         "Receive a notification whenever a new collection is created"
@@ -59,6 +75,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.InviteAccepted,
+      icon: <UserIcon color="currentColor" />,
       title: t("Invite accepted"),
       description: t(
         "Receive a notification when someone you invited creates an account"
@@ -66,6 +83,7 @@ function Notifications() {
     },
     {
       event: NotificationEventType.ExportCompleted,
+      icon: <CheckboxIcon checked color="currentColor" />,
       title: t("Export completed"),
       description: t(
         "Receive a notification when an export you requested has been completed"
@@ -73,12 +91,14 @@ function Notifications() {
     },
     {
       visible: isCloudHosted,
+      icon: <AcademicCapIcon color="currentColor" />,
       event: NotificationEventType.Onboarding,
       title: t("Getting started"),
       description: t("Tips on getting started with features and functionality"),
     },
     {
       visible: isCloudHosted,
+      icon: <StarredIcon color="currentColor" />,
       event: NotificationEventType.Features,
       title: t("New features"),
       description: t("Receive an email when new features of note are added"),
@@ -138,7 +158,11 @@ function Notifications() {
             return (
               <SettingRow
                 visible={option.visible}
-                label={option.title}
+                label={
+                  <Flex align="center" gap={4}>
+                    {option.icon} {option.title}
+                  </Flex>
+                }
                 name={option.event}
                 description={option.description}
               >

app/scenes/Settings/Tokens.tsx

@@ -10,7 +10,6 @@ import Heading from "~/components/Heading";
 import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
-import Subheading from "~/components/Subheading";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -59,7 +58,7 @@ function Tokens() {
       <PaginatedList
         fetch={apiKeys.fetchPage}
         items={apiKeys.orderedData}
-        heading={<Subheading sticky>{t("Tokens")}</Subheading>}
+        heading={<h2>{t("Active")}</h2>}
         renderItem={(token: ApiKey) => (
           <TokenListItem key={token.id} token={token} />
         )}

app/scenes/Settings/Zapier.tsx

@@ -21,7 +21,7 @@ function Zapier() {
           type="module"
           src="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.esm.js"
           key="zapier-js"
-        ></script>
+        />
         <link
           rel="stylesheet"
           href="https://cdn.zapier.com/packages/partner-sdk/v0/zapier-elements/zapier-elements.css"

app/scenes/Settings/components/TokenListItem.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from "react-i18next";
 import ApiKey from "~/models/ApiKey";
 import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
+import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
-import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import TokenRevokeDialog from "./TokenRevokeDialog";
+import ApiKeyMenu from "~/menus/ApiKeyMenu";
 
 type Props = {
   token: ApiKey;
@@ -16,7 +16,6 @@ type Props = {
 const TokenListItem = ({ token }: Props) => {
   const { t } = useTranslation();
   const { showToast } = useToasts();
-  const { dialogs } = useStores();
   const [linkCopied, setLinkCopied] = React.useState<boolean>(false);
 
   React.useEffect(() => {
@@ -34,32 +33,20 @@ const TokenListItem = ({ token }: Props) => {
     });
   }, [showToast, t]);
 
-  const showRevokeConfirmation = React.useCallback(() => {
-    dialogs.openModal({
-      title: t("Revoke token"),
-      isCentered: true,
-      content: (
-        <TokenRevokeDialog onSubmit={dialogs.closeAllModals} token={token} />
-      ),
-    });
-  }, [t, dialogs, token]);
-
   return (
     <ListItem
       key={token.id}
       title={token.name}
-      subtitle={<code>{token.secret}</code>}
+      subtitle={<code>{token.secret.slice(0, 15)}…</code>}
       actions={
-        <>
+        <Flex align="center" gap={8}>
           <CopyToClipboard text={token.secret} onCopy={handleCopy}>
             <Button type="button" icon={<CopyIcon />} neutral borderOnHover>
               {linkCopied ? t("Copied") : t("Copy")}
             </Button>
           </CopyToClipboard>
-          <Button onClick={showRevokeConfirmation} neutral>
-            Revoke
-          </Button>
-        </>
+          <ApiKeyMenu token={token} />
+        </Flex>
       }
     />
   );