feat: Support embed configuration (#3980)

* wip

* stash

* fix: make authenticationId nullable fk

* fix: apply generics to resolve compile time type errors

* fix: loosen integration settings

* chore: refactor into functional component

* feat: pass integrations all the way to embeds

* perf: avoid re-fetching integrations

* fix: change attr name to avoid type overlap

* feat: use hostname from embed settings in matcher

* Revert "feat: use hostname from embed settings in matcher"

This reverts commit e7485d9cda4dcf45104e460465ca104a56c67ddc.

* feat: refactor  into a class

* chore: refactor url regex formation as a util

* fix: escape regex special chars

* fix: remove in-house escapeRegExp in favor of lodash's

* fix: sanitize url

* perf: memoize embeds

* fix: rename hostname to url and allow spreading entire settings instead of just url

* fix: replace diagrams with drawio

* fix: rename

* fix: support self-hosted and saas both

* fix: assert on settings url

* fix: move embed integrations loading to hook

* fix: address review comments

* fix: use observer in favor of explicit state setters

* fix: refactor useEmbedIntegrations into useEmbeds

* fix: use translations for toasts

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/Editor.tsx

@@ -1,12 +1,12 @@
 import { formatDistanceToNow } from "date-fns";
 import { deburr, sortBy } from "lodash";
+import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
-import embeds from "@shared/editor/embeds";
 import { Heading } from "@shared/editor/lib/getHeadings";
 import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
@@ -18,6 +18,7 @@ import ErrorBoundary from "~/components/ErrorBoundary";
 import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
+import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import { NotFoundError } from "~/utils/errors";
@@ -58,6 +59,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const { documents } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
+  const embeds = useEmbeds();
   const [
     activeLinkEvent,
     setActiveLinkEvent,
@@ -310,4 +312,4 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   );
 }
 
-export default React.forwardRef(Editor);
+export default observer(React.forwardRef(Editor));

app/editor/components/CommandMenu.tsx

@@ -7,9 +7,10 @@ import { Portal } from "react-portal";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import insertFiles from "@shared/editor/commands/insertFiles";
+import { EmbedDescriptor } from "@shared/editor/embeds";
 import { CommandFactory } from "@shared/editor/lib/Extension";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
-import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
+import { MenuItem } from "@shared/editor/types";
 import { depths } from "@shared/styles";
 import { getEventFiles } from "@shared/utils/files";
 import { AttachmentValidation } from "@shared/validations";
@@ -427,10 +428,12 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
 
     for (const embed of embeds) {
       if (embed.title) {
-        embedItems.push({
-          ...embed,
-          name: "embed",
-        });
+        embedItems.push(
+          new EmbedDescriptor({
+            ...embed,
+            name: "embed",
+          })
+        );
       }
     }
 

app/editor/index.tsx

@@ -16,6 +16,7 @@ import { EditorState, Selection, Plugin, Transaction } from "prosemirror-state";
 import { Decoration, EditorView } from "prosemirror-view";
 import * as React from "react";
 import { DefaultTheme, ThemeProps } from "styled-components";
+import { EmbedDescriptor } from "@shared/editor/embeds";
 import Extension, { CommandFactory } from "@shared/editor/lib/Extension";
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
 import getHeadings from "@shared/editor/lib/getHeadings";
@@ -25,8 +26,10 @@ import Mark from "@shared/editor/marks/Mark";
 import Node from "@shared/editor/nodes/Node";
 import ReactNode from "@shared/editor/nodes/ReactNode";
 import fullExtensionsPackage from "@shared/editor/packages/full";
-import { EmbedDescriptor, EventType } from "@shared/editor/types";
+import { EventType } from "@shared/editor/types";
+import { IntegrationType } from "@shared/types";
 import EventEmitter from "@shared/utils/events";
+import Integration from "~/models/Integration";
 import Flex from "~/components/Flex";
 import { Dictionary } from "~/hooks/useDictionary";
 import Logger from "~/utils/Logger";
@@ -110,6 +113,8 @@ export type Props = {
   onShowToast: (message: string) => void;
   className?: string;
   style?: React.CSSProperties;
+
+  embedIntegrations?: Integration<IntegrationType.Embed>[];
 };
 
 type State = {

app/hooks/useAuthorizedSettingsConfig.ts

@@ -9,12 +9,14 @@ import {
   LinkIcon,
   TeamIcon,
   BeakerIcon,
+  BuildingBlocksIcon,
   DownloadIcon,
   WebhooksIcon,
 } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import Details from "~/scenes/Settings/Details";
+import Drawio from "~/scenes/Settings/Drawio";
 import Export from "~/scenes/Settings/Export";
 import Features from "~/scenes/Settings/Features";
 import Groups from "~/scenes/Settings/Groups";
@@ -170,6 +172,14 @@ const useAuthorizedSettingsConfig = () => {
         group: t("Integrations"),
         icon: WebhooksIcon,
       },
+      Drawio: {
+        name: t("Draw.io"),
+        path: "/settings/integrations/drawio",
+        component: Drawio,
+        enabled: can.update,
+        group: t("Integrations"),
+        icon: BuildingBlocksIcon,
+      },
       Slack: {
         name: "Slack",
         path: "/settings/integrations/slack",

app/hooks/useEmbeds.ts

@@ -0,0 +1,41 @@
+import { find } from "lodash";
+import * as React from "react";
+import embeds, { EmbedDescriptor } from "@shared/editor/embeds";
+import { IntegrationType } from "@shared/types";
+import Integration from "~/models/Integration";
+import Logger from "~/utils/Logger";
+import useStores from "./useStores";
+
+export default function useEmbedIntegrations() {
+  const { integrations } = useStores();
+
+  React.useEffect(() => {
+    async function fetchEmbedIntegrations() {
+      try {
+        await integrations.fetchPage({
+          limit: 100,
+          type: IntegrationType.Embed,
+        });
+      } catch (err) {
+        Logger.error("Failed to fetch embed integrations", err);
+      }
+    }
+
+    !integrations.isLoaded && fetchEmbedIntegrations();
+  }, [integrations]);
+
+  return React.useMemo(
+    () =>
+      embeds.map((e) => {
+        const em: Integration<IntegrationType.Embed> | undefined = find(
+          integrations.orderedData,
+          (i) => i.service === e.component.name.toLowerCase()
+        );
+        return new EmbedDescriptor({
+          ...e,
+          settings: em?.settings,
+        });
+      }),
+    [integrations.orderedData]
+  );
+}

app/models/Integration.ts

@@ -1,14 +1,9 @@
 import { observable } from "mobx";
+import type { IntegrationSettings } from "@shared/types";
 import BaseModel from "~/models/BaseModel";
 import Field from "./decorators/Field";
 
-type Settings = {
-  url: string;
-  channel: string;
-  channelId: string;
-};
-
-class Integration extends BaseModel {
+class Integration<T = unknown> extends BaseModel {
   id: string;
 
   type: string;
@@ -21,7 +16,7 @@ class Integration extends BaseModel {
   @observable
   events: string[];
 
-  settings: Settings;
+  settings: IntegrationSettings<T>;
 }
 
 export default Integration;

app/scenes/Settings/Drawio.tsx

@@ -0,0 +1,101 @@
+import { head } from "lodash";
+import { observer } from "mobx-react";
+import { BuildingBlocksIcon } from "outline-icons";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation, Trans } from "react-i18next";
+import { IntegrationType } from "@shared/types";
+import Integration from "~/models/Integration";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import { ReactHookWrappedInput as Input } from "~/components/Input";
+import Scene from "~/components/Scene";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type FormData = {
+  url: string;
+};
+
+const SERVICE_NAME = "diagrams";
+
+function Drawio() {
+  const { integrations } = useStores();
+  const { t } = useTranslation();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    integrations.fetchPage({
+      service: SERVICE_NAME,
+      type: IntegrationType.Embed,
+    });
+  }, [integrations]);
+
+  const integration = head(integrations.orderedData) as
+    | Integration<IntegrationType.Embed>
+    | undefined;
+
+  const { register, handleSubmit: formHandleSubmit, formState } = useForm<
+    FormData
+  >({
+    mode: "all",
+    defaultValues: {
+      url: integration?.settings.url,
+    },
+  });
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        await integrations.save({
+          id: integration?.id,
+          type: IntegrationType.Embed,
+          service: SERVICE_NAME,
+          settings: {
+            url: data.url,
+          },
+        });
+
+        showToast(t("Settings saved"), {
+          type: "success",
+        });
+      } catch (err) {
+        showToast(err.message, {
+          type: "error",
+        });
+      }
+    },
+    [integrations, integration, t, showToast]
+  );
+
+  return (
+    <Scene title="Draw.io" icon={<BuildingBlocksIcon color="currentColor" />}>
+      <Heading>Draw.io</Heading>
+
+      <Text type="secondary">
+        <Trans>
+          Add your self-hosted draw.io installation url here to enable automatic
+          embedding of diagrams within documents.
+        </Trans>
+        <form onSubmit={formHandleSubmit(handleSubmit)}>
+          <p>
+            <Input
+              label={t("Draw.io deployment")}
+              placeholder={"https://app.diagrams.net/"}
+              pattern="https?://.*"
+              {...register("url", {
+                required: true,
+              })}
+            />
+            <Button type="submit" disabled={formState.isSubmitting}>
+              {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
+            </Button>
+          </p>
+        </form>
+      </Text>
+    </Scene>
+  );
+}
+
+export default observer(Drawio);

app/scenes/Settings/Slack.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import styled from "styled-components";
+import { IntegrationType } from "@shared/types";
 import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
@@ -124,7 +125,9 @@ function Slack() {
                   <SlackListItem
                     key={integration.id}
                     collection={collection}
-                    integration={integration}
+                    integration={
+                      integration as Integration<IntegrationType.Post>
+                    }
                   />
                 );
               }

app/scenes/Settings/components/SlackListItem.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import styled from "styled-components";
+import { IntegrationType } from "@shared/types";
 import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
@@ -17,7 +18,7 @@ import Text from "~/components/Text";
 import useToasts from "~/hooks/useToasts";
 
 type Props = {
-  integration: Integration;
+  integration: Integration<IntegrationType.Post>;
   collection: Collection;
 };