Draw.io -> Self-hosted

fix: Existing draw.io setting not appearing on first load

app/hooks/useAuthorizedSettingsConfig.ts

@@ -17,7 +17,6 @@ import {
 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";
@@ -27,6 +26,7 @@ import Notifications from "~/scenes/Settings/Notifications";
 import Preferences from "~/scenes/Settings/Preferences";
 import Profile from "~/scenes/Settings/Profile";
 import Security from "~/scenes/Settings/Security";
+import SelfHosted from "~/scenes/Settings/SelfHosted";
 import Shares from "~/scenes/Settings/Shares";
 import Slack from "~/scenes/Settings/Slack";
 import Tokens from "~/scenes/Settings/Tokens";
@@ -183,10 +183,10 @@ const useAuthorizedSettingsConfig = () => {
         group: t("Integrations"),
         icon: WebhooksIcon,
       },
-      Drawio: {
-        name: t("Draw.io"),
-        path: "/settings/integrations/drawio",
-        component: Drawio,
+      SelfHosted: {
+        name: t("Self Hosted"),
+        path: "/settings/integrations/self-hosted",
+        component: SelfHosted,
         enabled: can.update,
         group: t("Integrations"),
         icon: BuildingBlocksIcon,
@@ -209,12 +209,13 @@ const useAuthorizedSettingsConfig = () => {
       },
     }),
     [
-      can.createApiKey,
-      can.createWebhookSubscription,
-      can.createExport,
-      can.createImport,
-      can.update,
       t,
+      can.createApiKey,
+      can.update,
+      can.createImport,
+      can.createExport,
+      can.createWebhookSubscription,
+      team.collaborativeEditing,
     ]
   );
 

app/scenes/Settings/SelfHosted.tsx

@@ -1,3 +1,4 @@
+import { find } from "lodash";
 import { observer } from "mobx-react";
 import { BuildingBlocksIcon } from "outline-icons";
 import * as React from "react";
@@ -14,37 +15,40 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
 type FormData = {
-  url: string;
+  drawIoUrl: string;
 };
 
-const SERVICE_NAME = "diagrams";
-
-function Drawio() {
+function SelfHosted() {
   const { integrations } = useStores();
   const { t } = useTranslation();
   const { showToast } = useToasts();
 
+  const integration = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: "diagrams",
+  }) as Integration<IntegrationType.Embed> | undefined;
+
+  const {
+    register,
+    reset,
+    handleSubmit: formHandleSubmit,
+    formState,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      drawIoUrl: integration?.settings.url,
+    },
+  });
+
   React.useEffect(() => {
     integrations.fetchPage({
-      service: SERVICE_NAME,
       type: IntegrationType.Embed,
     });
   }, [integrations]);
 
-  const integration = integrations.orderedData.find(
-    (integration) =>
-      integration.type === IntegrationType.Embed &&
-      integration.service === SERVICE_NAME
-  ) as Integration<IntegrationType.Embed> | undefined;
-
-  const { register, handleSubmit: formHandleSubmit, formState } = useForm<
-    FormData
-  >({
-    mode: "all",
-    defaultValues: {
-      url: integration?.settings.url,
-    },
-  });
+  React.useEffect(() => {
+    reset({ drawIoUrl: integration?.settings.url });
+  }, [integration, reset]);
 
   const handleSubmit = React.useCallback(
     async (data: FormData) => {
@@ -52,9 +56,9 @@ function Drawio() {
         await integrations.save({
           id: integration?.id,
           type: IntegrationType.Embed,
-          service: SERVICE_NAME,
+          service: "diagrams",
           settings: {
-            url: data.url,
+            url: data.drawIoUrl,
           },
         });
 
@@ -71,8 +75,11 @@ function Drawio() {
   );
 
   return (
-    <Scene title="Draw.io" icon={<BuildingBlocksIcon color="currentColor" />}>
-      <Heading>Draw.io</Heading>
+    <Scene
+      title={t("Self Hosted")}
+      icon={<BuildingBlocksIcon color="currentColor" />}
+    >
+      <Heading>{t("Self Hosted")}</Heading>
 
       <Text type="secondary">
         <Trans>
@@ -83,9 +90,9 @@ function Drawio() {
           <p>
             <Input
               label={t("Draw.io deployment")}
-              placeholder={"https://app.diagrams.net/"}
+              placeholder="https://app.diagrams.net/"
               pattern="https?://.*"
-              {...register("url", {
+              {...register("drawIoUrl", {
                 required: true,
               })}
             />
@@ -99,4 +106,4 @@ function Drawio() {
   );
 }
 
-export default observer(Drawio);
+export default observer(SelfHosted);

shared/i18n/locales/en_US/translation.json

@@ -214,7 +214,7 @@
   "Export": "Export",
   "Webhooks": "Webhooks",
   "Integrations": "Integrations",
-  "Draw.io": "Draw.io",
+  "Self Hosted": "Self Hosted",
   "Insert column after": "Insert column after",
   "Insert column before": "Insert column before",
   "Insert row after": "Insert row after",
@@ -646,8 +646,6 @@
   "Choose a subdomain to enable a login page just for your team.": "Choose a subdomain to enable a login page just for your team.",
   "Start view": "Start view",
   "This is the screen that team members will first see when they sign in.": "This is the screen that team members will first see when they sign in.",
-  "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.": "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.",
-  "Draw.io deployment": "Draw.io deployment",
   "Export in progress…": "Export in progress…",
   "Export deleted": "Export deleted",
   "A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – if you have notifications enabled, we will email a link to <em>{{ userEmail }}</em> when it’s complete.": "A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – if you have notifications enabled, we will email a link to <em>{{ userEmail }}</em> when it’s complete.",
@@ -725,6 +723,8 @@
   "Remove domain": "Remove domain",
   "Add a domain": "Add a domain",
   "Save changes": "Save changes",
+  "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.": "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents.",
+  "Draw.io deployment": "Draw.io deployment",
   "Sharing is currently disabled.": "Sharing is currently disabled.",
   "You can globally enable and disable public document sharing in the <em>security settings</em>.": "You can globally enable and disable public document sharing in the <em>security settings</em>.",
   "Documents that have been shared are listed below. Anyone that has the public link can access a read-only version of the document until the link has been revoked.": "Documents that have been shared are listed below. Anyone that has the public link can access a read-only version of the document until the link has been revoked.",