chore: Move Zapier settings page to plugin (#9166)

app/hooks/useSettingsConfig.ts

@@ -20,10 +20,8 @@ import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import { integrationSettingsPath } from "@shared/utils/routeHelpers";
 import { Integrations } from "~/scenes/Settings/Integrations";
-import ZapierIcon from "~/components/Icons/ZapierIcon";
 import { createLazyComponent as lazy } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
-import isCloudHosted from "~/utils/isCloudHosted";
 import { settingsPath } from "~/utils/routeHelpers";
 import { useComputed } from "./useComputed";
 import useCurrentTeam from "./useCurrentTeam";
@@ -46,7 +44,6 @@ const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
-const Zapier = lazy(() => import("~/scenes/Settings/Zapier"));
 
 export type ConfigItem = {
   name: string;
@@ -211,15 +208,6 @@ const useSettingsConfig = () => {
         icon: ExportIcon,
       },
       // Integrations
-      {
-        name: "Zapier",
-        path: integrationSettingsPath("zapier"),
-        component: Zapier.Component,
-        preload: Zapier.preload,
-        enabled: can.update && isCloudHosted,
-        group: t("Integrations"),
-        icon: ZapierIcon,
-      },
       {
         name: `${t("Install")}…`,
         path: settingsPath("integrations"),

plugins/zapier/client/Settings.tsx

@@ -1,20 +1,22 @@
 import * as React from "react";
 import { Helmet } from "react-helmet-async";
 import { Trans } from "react-i18next";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import Heading from "~/components/Heading";
-import ZapierIcon from "~/components/Icons/ZapierIcon";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import env from "~/env";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
+import ZapierIcon from "./Icon";
 
 function Zapier() {
   const { ui } = useStores();
+  const user = useCurrentUser();
   const { resolvedTheme } = ui;
   const appName = env.APP_NAME;
 
   return (
-    <Scene title="Zapier" icon={<ZapierIcon />}>
+    <IntegrationScene title="Zapier" icon={<ZapierIcon />}>
       <Heading>Zapier</Heading>
       <Helmet>
         <script
@@ -39,14 +41,15 @@ function Zapier() {
       <zapier-app-directory
         app="outline"
         link-target="new-tab"
-        theme={resolvedTheme}
+        sign-up-email={user.email}
+        theme={resolvedTheme === "system" ? undefined : resolvedTheme}
         hide="notion,confluence-cloud,confluence,google-docs,slack"
         applimit={6}
         introcopy="hide"
         create-without-template="show"
         use-this-zap="show"
       />
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/zapier/client/index.tsx

@@ -0,0 +1,18 @@
+import { createLazyComponent } from "~/components/LazyLoad";
+import { Hook, PluginManager } from "~/utils/PluginManager";
+import config from "../plugin.json";
+import Icon from "./Icon";
+
+PluginManager.add([
+  {
+    ...config,
+    type: Hook.Settings,
+    value: {
+      group: "Integrations",
+      icon: Icon,
+      description:
+        "Connect your Outline workspace to Zapier to automate workflows and integrate with thousands of other tools.",
+      component: createLazyComponent(() => import("./Settings")),
+    },
+  },
+]);

plugins/zapier/plugin.json

@@ -0,0 +1,6 @@
+{
+  "id": "zapier",
+  "name": "Zapier",
+  "description": "Adds a settings screen for connecting to Zapier.",
+  "deployments": ["cloud"]
+}

shared/i18n/locales/en_US/translation.json

@@ -528,8 +528,8 @@
   "Applications": "Applications",
   "Shared Links": "Shared Links",
   "Import": "Import",
-  "Integrations": "Integrations",
   "Install": "Install",
+  "Integrations": "Integrations",
   "Revoke token": "Revoke token",
   "Revoke": "Revoke",
   "Show path to document": "Show path to document",
@@ -1122,7 +1122,6 @@
   "You can create templates to help your team create consistent and accurate documentation.": "You can create templates to help your team create consistent and accurate documentation.",
   "Alphabetical": "Alphabetical",
   "There are no templates just yet.": "There are no templates just yet.",
-  "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.": "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.",
   "A confirmation code has been sent to your email address, please enter the code below to permanently destroy this workspace.": "A confirmation code has been sent to your email address, please enter the code below to permanently destroy this workspace.",
   "Confirmation code": "Confirmation code",
   "Deleting the <1>{{workspaceName}}</1> workspace will destroy all collections, documents, users, and associated data. You will be immediately logged out of {{appName}}.": "Deleting the <1>{{workspaceName}}</1> workspace will destroy all collections, documents, users, and associated data. You will be immediately logged out of {{appName}}.",
@@ -1218,6 +1217,7 @@
   "Webhooks can be used to notify your application when events happen in {{appName}}. Events are sent as a https request with a JSON payload in near real-time.": "Webhooks can be used to notify your application when events happen in {{appName}}. Events are sent as a https request with a JSON payload in near real-time.",
   "Inactive": "Inactive",
   "Create a webhook": "Create a webhook",
+  "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.": "Zapier is a platform that allows {{appName}} to easily integrate with thousands of other business tools. Automate your workflows, sync data, and more.",
   "Never logged in": "Never logged in",
   "Online now": "Online now",
   "Online {{ timeAgo }}": "Online {{ timeAgo }}",