Move "Webhook" settings to table (outline#12119)

* Move 'Webhook' settings to table

* Add tests

Author: tommoor

app/models/WebhookSubscription.ts

@@ -1,8 +1,11 @@
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
+import Relation from "./decorators/Relation";
+import type { Searchable } from "./interfaces/Searchable";
+import User from "./User";
 
-class WebhookSubscription extends Model {
+class WebhookSubscription extends Model implements Searchable {
   static modelName = "WebhookSubscription";
 
   @Field
@@ -24,6 +27,23 @@ class WebhookSubscription extends Model {
   @Field
   @observable
   events: string[];
+
+  /** The user who created this webhook subscription. */
+  @Relation(() => User)
+  createdBy?: User;
+
+  /** The user ID that created this webhook subscription. */
+  createdById: string;
+
+  @computed
+  get searchContent(): string[] {
+    return [this.name, this.url, ...(this.events ?? [])].filter(Boolean);
+  }
+
+  @computed
+  get searchSuppressed(): boolean {
+    return false;
+  }
 }
 
 export default WebhookSubscription;

app/scenes/Settings/components/Status.tsx

@@ -1,12 +1,14 @@
 import Text from "@shared/components/Text";
 import { s } from "@shared/styles";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+
+type StatusColor = "accent" | "warning" | "danger" | "textTertiary" | "success";
 
 export const Status = styled(Text).attrs({
   type: "secondary",
   size: "small",
   as: "span",
-})`
+})<{ $color?: StatusColor }>`
   display: inline-flex;
   align-items: center;
 
@@ -16,11 +18,13 @@ export const Status = styled(Text).attrs({
     width: 17px;
     height: 17px;
 
-    background: radial-gradient(
-      circle at center,
-      ${s("accent")} 0 33%,
-      transparent 33%
-    );
+    ${(props) => css`
+      background: radial-gradient(
+        circle at center,
+        ${s(props.$color ?? "accent")} 0 33%,
+        transparent 33%
+      );
+    `}
     border-radius: 50%;
   }
 `;

plugins/webhooks/client/Settings.tsx

@@ -1,30 +1,106 @@
+import type { ColumnSort } from "@tanstack/react-table";
 import { observer } from "mobx-react";
 import { PlusIcon, WebhooksIcon } from "outline-icons";
-import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation, Trans } from "react-i18next";
-import type WebhookSubscription from "~/models/WebhookSubscription";
+import { useHistory, useLocation } from "react-router-dom";
+import { toast } from "sonner";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
-import Modal from "~/components/Modal";
-import PaginatedList from "~/components/PaginatedList";
+import InputSearch from "~/components/InputSearch";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import env from "~/env";
-import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
+import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
-import WebhookSubscriptionListItem from "./components/WebhookSubscriptionListItem";
-import WebhookSubscriptionNew from "./components/WebhookSubscriptionNew";
+import { useTableRequest } from "~/hooks/useTableRequest";
+import { StickyFilters } from "~/scenes/Settings/components/StickyFilters";
+import { createWebhookSubscription } from "./actions";
+import { WebhookSubscriptionsTable } from "./components/WebhookSubscriptionsTable";
 
 function Webhooks() {
   const team = useCurrentTeam();
   const { t } = useTranslation();
   const { webhookSubscriptions } = useStores();
-  const [newModalOpen, handleNewModalOpen, handleNewModalClose] = useBoolean();
   const can = usePolicy(team);
   const appName = env.APP_NAME;
+  const params = useQuery();
+  const history = useHistory();
+  const location = useLocation();
+  const [query, setQuery] = useState(params.get("query") || "");
+
+  const reqParams = useMemo(
+    () => ({
+      query: params.get("query") || undefined,
+      sort: params.get("sort") || "createdAt",
+      direction: (params.get("direction") || "desc").toUpperCase() as
+        | "ASC"
+        | "DESC",
+    }),
+    [params]
+  );
+
+  const sort: ColumnSort = useMemo(
+    () => ({
+      id: reqParams.sort,
+      desc: reqParams.direction === "DESC",
+    }),
+    [reqParams.sort, reqParams.direction]
+  );
+
+  const orderedData = webhookSubscriptions.orderedData;
+  const filteredWebhooks = useMemo(
+    () =>
+      reqParams.query
+        ? webhookSubscriptions.findByQuery(reqParams.query)
+        : orderedData,
+    [webhookSubscriptions, orderedData, reqParams.query]
+  );
+
+  const { data, error, loading, next } = useTableRequest({
+    data: filteredWebhooks,
+    sort,
+    reqFn: webhookSubscriptions.fetchPage,
+    reqParams,
+  });
+
+  const updateParams = useCallback(
+    (name: string, value: string) => {
+      if (value) {
+        params.set(name, value);
+      } else {
+        params.delete(name);
+      }
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+    },
+    [params, history, location.pathname]
+  );
+
+  const handleSearch = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(event.target.value);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (error) {
+      toast.error(t("Could not load webhooks"));
+    }
+  }, [t, error]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => updateParams("query", query), 250);
+    return () => clearTimeout(timeout);
+  }, [query, updateParams]);
 
   return (
     <Scene
@@ -36,7 +112,7 @@ function Webhooks() {
             <Action>
               <Button
                 type="button"
-                onClick={handleNewModalOpen}
+                action={createWebhookSubscription}
                 icon={<PlusIcon />}
               >
                 {`${t("New webhook")}…`}
@@ -45,6 +121,7 @@ function Webhooks() {
           )}
         </>
       }
+      wide
     >
       <Heading>{t("Webhooks")}</Heading>
       <Text as="p" type="secondary">
@@ -54,29 +131,25 @@ function Webhooks() {
           in near real-time.
         </Trans>
       </Text>
-      <PaginatedList<WebhookSubscription>
-        fetch={webhookSubscriptions.fetchPage}
-        items={webhookSubscriptions.enabled}
-        heading={<h2>{t("Active")}</h2>}
-        renderItem={(webhook) => (
-          <WebhookSubscriptionListItem key={webhook.id} webhook={webhook} />
-        )}
-      />
-      <PaginatedList<WebhookSubscription>
-        items={webhookSubscriptions.disabled}
-        heading={<h2>{t("Inactive")}</h2>}
-        renderItem={(webhook) => (
-          <WebhookSubscriptionListItem key={webhook.id} webhook={webhook} />
-        )}
-      />
-      <Modal
-        title={t("New webhook")}
-        onRequestClose={handleNewModalClose}
-        isOpen={newModalOpen}
-        width="480px"
-      >
-        <WebhookSubscriptionNew onSubmit={handleNewModalClose} />
-      </Modal>
+      <StickyFilters>
+        <InputSearch
+          short
+          value={query}
+          placeholder={`${t("Filter")}…`}
+          onChange={handleSearch}
+        />
+      </StickyFilters>
+      <ConditionalFade animate={!data}>
+        <WebhookSubscriptionsTable
+          data={data ?? []}
+          sort={sort}
+          loading={loading}
+          page={{
+            hasNext: !!next,
+            fetchNext: next,
+          }}
+        />
+      </ConditionalFade>
     </Scene>
   );
 }

plugins/webhooks/client/actions.tsx

@@ -0,0 +1,84 @@
+import { EditIcon, PlusIcon, TrashIcon } from "outline-icons";
+import stores from "~/stores";
+import type WebhookSubscription from "~/models/WebhookSubscription";
+import { createAction } from "~/actions";
+import { SettingsSection } from "~/actions/sections";
+import WebhookSubscriptionDeleteDialog from "./components/WebhookSubscriptionDeleteDialog";
+import WebhookSubscriptionEdit from "./components/WebhookSubscriptionEdit";
+import WebhookSubscriptionNew from "./components/WebhookSubscriptionNew";
+
+export const createWebhookSubscription = createAction({
+  name: ({ t }) => t("New webhook"),
+  analyticsName: "New webhook",
+  section: SettingsSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: () =>
+    stores.policies.abilities(stores.auth.team?.id || "")
+      .createWebhookSubscription,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("New webhook"),
+      content: (
+        <WebhookSubscriptionNew onSubmit={stores.dialogs.closeAllModals} />
+      ),
+    });
+  },
+});
+
+export const editWebhookSubscriptionFactory = ({
+  webhook,
+}: {
+  webhook: WebhookSubscription;
+}) =>
+  createAction({
+    name: ({ t }) => `${t("Edit")}…`,
+    analyticsName: "Edit webhook",
+    section: SettingsSection,
+    icon: <EditIcon />,
+    perform: ({ t, event }) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      stores.dialogs.openModal({
+        title: t("Edit webhook"),
+        content: (
+          <WebhookSubscriptionEdit
+            onSubmit={stores.dialogs.closeAllModals}
+            webhookSubscription={webhook}
+          />
+        ),
+      });
+    },
+  });
+
+export const deleteWebhookSubscriptionFactory = ({
+  webhook,
+}: {
+  webhook: WebhookSubscription;
+}) =>
+  createAction({
+    name: ({ t }) => `${t("Delete")}…`,
+    analyticsName: "Delete webhook",
+    section: SettingsSection,
+    icon: <TrashIcon />,
+    keywords: "delete remove",
+    dangerous: true,
+    perform: ({ t, event }) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      stores.dialogs.openModal({
+        title: t("Delete webhook"),
+        content: (
+          <WebhookSubscriptionDeleteDialog
+            onSubmit={stores.dialogs.closeAllModals}
+            webhook={webhook}
+          />
+        ),
+      });
+    },
+  });