fix: Non-integration plugins missing in settings

Other minor refactors

app/components/Collection/CollectionForm.tsx

@@ -15,6 +15,7 @@ import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
+import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
@@ -22,7 +23,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";
 
-const IconPicker = React.lazy(() => import("~/components/IconPicker"));
+const IconPicker = createLazyComponent(() => import("~/components/IconPicker"));
 
 export interface FormData {
   name: string;
@@ -88,6 +89,11 @@ export const CollectionForm = observer(function CollectionForm_({
 
   const values = watch();
 
+  // Preload the IconPicker component on mount
+  React.useEffect(() => {
+    void IconPicker.preload();
+  }, []);
+
   React.useEffect(() => {
     // If the user hasn't picked an icon yet, go ahead and suggest one based on
     // the name of the collection. It's the little things sometimes.
@@ -202,7 +208,7 @@ export const CollectionForm = observer(function CollectionForm_({
   );
 });
 
-const StyledIconPicker = styled(IconPicker)`
+const StyledIconPicker = styled(IconPicker.Component)`
   margin-left: 4px;
   margin-right: 4px;
 `;

app/components/LazyLoad.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+
+export interface LazyComponent<T extends React.ComponentType<any>> {
+  Component: React.LazyExoticComponent<T>;
+  preload: () => Promise<{ default: T }>;
+}
+
+interface LazyLoadOptions {
+  retries?: number;
+  interval?: number;
+}
+
+/**
+ * Creates a lazy-loaded component with preloading capability and automatic retries on failure.
+ *
+ * @param factory A function that returns a promise of a component (eg: () => import('./MyComponent'))
+ * @param options Optional configuration for retry behavior
+ * @returns An object containing the lazy Component and a preload function
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = createLazyComponent(() => import('./MyComponent'));
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <MyComponent.Component />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * // Preload when needed:
+ * MyComponent.preload();
+ * ```
+ */
+export function createLazyComponent<T extends React.ComponentType<any>>(
+  factory: () => Promise<{ default: T }>,
+  options: LazyLoadOptions = {}
+): LazyComponent<T> {
+  const { retries, interval } = options;
+
+  return {
+    Component: lazyWithRetry(factory, retries, interval),
+    preload: factory,
+  };
+}

app/components/Reactions/ReactionPicker.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { PopoverDisclosure, usePopoverState } from "reakit";
 import EventBoundary from "@shared/components/EventBoundary";
 import Flex from "~/components/Flex";
+import { createLazyComponent } from "~/components/LazyLoad";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
 import Popover from "~/components/Popover";
@@ -12,7 +13,7 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useWindowSize from "~/hooks/useWindowSize";
 import Tooltip from "../Tooltip";
 
-const EmojiPanel = React.lazy(
+const EmojiPanel = createLazyComponent(
   () => import("~/components/IconPicker/components/EmojiPanel")
 );
 
@@ -104,6 +105,7 @@ const ReactionPicker: React.FC<Props> = ({
               aria-label={t("Reaction picker")}
               className={className}
               onClick={handlePopoverButtonClick}
+              onMouseEnter={() => EmojiPanel.preload()}
               size={size}
             >
               <ReactionIcon size={22} />
@@ -123,7 +125,7 @@ const ReactionPicker: React.FC<Props> = ({
         {popover.visible && (
           <React.Suspense fallback={<Placeholder />}>
             <EventBoundary>
-              <EmojiPanel
+              <EmojiPanel.Component
                 height={300}
                 panelWidth={panelWidth}
                 query={query}

app/components/Sharing/components/Suggestions.tsx

@@ -93,11 +93,13 @@ export const Suggestions = observer(
     const suggestions = React.useMemo(() => {
       const filtered: Suggestion[] = (
         document
-          ? users.notInDocument(document.id, query)
+          ? users
+              .notInDocument(document.id, query)
+              .filter((u) => u.id !== user.id)
           : collection
           ? users.notInCollection(collection.id, query)
           : users.activeOrInvited
-      ).filter((u) => !u.isSuspended && u.id !== user.id);
+      ).filter((u) => !u.isSuspended);
 
       if (isEmail(query)) {
         filtered.push(getSuggestionForEmail(query));

app/components/Sidebar/Settings.tsx

@@ -23,12 +23,20 @@ import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";
 
 function SettingsSidebar() {
-  const { ui } = useStores();
+  const { ui, integrations } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
   const configs = useSettingsConfig();
-  const groupedConfig = groupBy(configs, "group");
+
+  const groupedConfig = groupBy(
+    configs.filter((item) =>
+      item.group === "Integrations" && item.pluginId
+        ? integrations.findByService(item.pluginId)
+        : true
+    ),
+    "group"
+  );
 
   const returnToApp = React.useCallback(() => {
     history.push("/home");
@@ -63,8 +71,9 @@ function SettingsSidebar() {
                   <SidebarLink
                     key={item.path}
                     to={item.path}
+                    onClickIntent={item.preload}
                     active={
-                      item.path !== settingsPath()
+                      item.path.startsWith(settingsPath("templates"))
                         ? location.pathname.startsWith(item.path)
                         : undefined
                     }

app/editor/components/FindAndReplace.tsx

@@ -41,6 +41,7 @@ function useKeyboardShortcuts({
   useKeyDown(
     (ev) =>
       isModKey(ev) &&
+      !popover.visible &&
       ev.code === "KeyF" &&
       // Keyboard handler is through the AppMenu on Desktop v1.2.0+
       !(Desktop.bridge && "onFindInPage" in Desktop.bridge),

app/hooks/useEmbeds.ts

@@ -18,8 +18,7 @@ export default function useEmbeds(loadIfMissing = false) {
   React.useEffect(() => {
     async function fetchEmbedIntegrations() {
       try {
-        await integrations.fetchPage({
-          limit: 100,
+        await integrations.fetchAll({
           type: IntegrationType.Embed,
         });
       } catch (err) {

app/hooks/useSettingsConfig.ts

@@ -13,20 +13,21 @@ import {
   ImportIcon,
   ShapesIcon,
   Icon,
+  PlusIcon,
   InternetIcon,
 } from "outline-icons";
 import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import { integrationSettingsPath } from "@shared/utils/routeHelpers";
-import ZapierIcon from "~/components/Icons/ZapierIcon";
+import { Integrations } from "~/scenes/Settings/Integrations";
+import { createLazyComponent as lazy } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
-import isCloudHosted from "~/utils/isCloudHosted";
-import lazy from "~/utils/lazyWithRetry";
 import { settingsPath } from "~/utils/routeHelpers";
 import { useComputed } from "./useComputed";
 import useCurrentTeam from "./useCurrentTeam";
 import useCurrentUser from "./useCurrentUser";
 import usePolicy from "./usePolicy";
+import useStores from "./useStores";
 
 const ApiKeys = lazy(() => import("~/scenes/Settings/ApiKeys"));
 const Applications = lazy(() => import("~/scenes/Settings/Applications"));
@@ -43,30 +44,38 @@ 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;
   path: string;
   icon: React.FC<ComponentProps<typeof Icon>>;
   component: React.ComponentType;
+  description?: string;
+  preload?: () => void;
   enabled: boolean;
   group: string;
+  pluginId?: string;
 };
 
 const useSettingsConfig = () => {
+  const { integrations } = useStores();
   const user = useCurrentUser();
   const team = useCurrentTeam();
   const can = usePolicy(team);
   const { t } = useTranslation();
 
+  React.useEffect(() => {
+    void integrations.fetchAll();
+  }, [integrations]);
+
   const config = useComputed(() => {
     const items: ConfigItem[] = [
       // Account
       {
         name: t("Profile"),
         path: settingsPath(),
-        component: Profile,
+        component: Profile.Component,
+        preload: Profile.preload,
         enabled: true,
         group: t("Account"),
         icon: ProfileIcon,
@@ -74,7 +83,8 @@ const useSettingsConfig = () => {
       {
         name: t("Preferences"),
         path: settingsPath("preferences"),
-        component: Preferences,
+        component: Preferences.Component,
+        preload: Preferences.preload,
         enabled: true,
         group: t("Account"),
         icon: SettingsIcon,
@@ -82,7 +92,8 @@ const useSettingsConfig = () => {
       {
         name: t("Notifications"),
         path: settingsPath("notifications"),
-        component: Notifications,
+        component: Notifications.Component,
+        preload: Notifications.preload,
         enabled: true,
         group: t("Account"),
         icon: EmailIcon,
@@ -90,7 +101,8 @@ const useSettingsConfig = () => {
       {
         name: t("API & Apps"),
         path: settingsPath("api-and-apps"),
-        component: APIAndApps,
+        component: APIAndApps.Component,
+        preload: APIAndApps.preload,
         enabled: true,
         group: t("Account"),
         icon: PadlockIcon,
@@ -99,7 +111,8 @@ const useSettingsConfig = () => {
       {
         name: t("Details"),
         path: settingsPath("details"),
-        component: Details,
+        component: Details.Component,
+        preload: Details.preload,
         enabled: can.update,
         group: t("Workspace"),
         icon: TeamIcon,
@@ -107,7 +120,8 @@ const useSettingsConfig = () => {
       {
         name: t("Security"),
         path: settingsPath("security"),
-        component: Security,
+        component: Security.Component,
+        preload: Security.preload,
         enabled: can.update,
         group: t("Workspace"),
         icon: PadlockIcon,
@@ -115,7 +129,8 @@ const useSettingsConfig = () => {
       {
         name: t("Features"),
         path: settingsPath("features"),
-        component: Features,
+        component: Features.Component,
+        preload: Features.preload,
         enabled: can.update,
         group: t("Workspace"),
         icon: BeakerIcon,
@@ -123,7 +138,8 @@ const useSettingsConfig = () => {
       {
         name: t("Members"),
         path: settingsPath("members"),
-        component: Members,
+        component: Members.Component,
+        preload: Members.preload,
         enabled: can.listUsers,
         group: t("Workspace"),
         icon: UserIcon,
@@ -131,7 +147,8 @@ const useSettingsConfig = () => {
       {
         name: t("Groups"),
         path: settingsPath("groups"),
-        component: Groups,
+        component: Groups.Component,
+        preload: Groups.preload,
         enabled: can.listGroups,
         group: t("Workspace"),
         icon: GroupIcon,
@@ -139,7 +156,8 @@ const useSettingsConfig = () => {
       {
         name: t("Templates"),
         path: settingsPath("templates"),
-        component: Templates,
+        component: Templates.Component,
+        preload: Templates.preload,
         enabled: can.readTemplate,
         group: t("Workspace"),
         icon: ShapesIcon,
@@ -147,7 +165,8 @@ const useSettingsConfig = () => {
       {
         name: t("API Keys"),
         path: settingsPath("api-keys"),
-        component: ApiKeys,
+        component: ApiKeys.Component,
+        preload: ApiKeys.preload,
         enabled: can.listApiKeys,
         group: t("Workspace"),
         icon: CodeIcon,
@@ -155,7 +174,8 @@ const useSettingsConfig = () => {
       {
         name: t("Applications"),
         path: settingsPath("applications"),
-        component: Applications,
+        component: Applications.Component,
+        preload: Applications.preload,
         enabled: can.listOAuthClients,
         group: t("Workspace"),
         icon: InternetIcon,
@@ -163,7 +183,8 @@ const useSettingsConfig = () => {
       {
         name: t("Shared Links"),
         path: settingsPath("shares"),
-        component: Shares,
+        component: Shares.Component,
+        preload: Shares.preload,
         enabled: can.listShares,
         group: t("Workspace"),
         icon: GlobeIcon,
@@ -171,7 +192,8 @@ const useSettingsConfig = () => {
       {
         name: t("Import"),
         path: settingsPath("import"),
-        component: Import,
+        component: Import.Component,
+        preload: Import.preload,
         enabled: can.createImport,
         group: t("Workspace"),
         icon: ImportIcon,
@@ -179,19 +201,20 @@ const useSettingsConfig = () => {
       {
         name: t("Export"),
         path: settingsPath("export"),
-        component: Export,
+        component: Export.Component,
+        preload: Export.preload,
         enabled: can.createExport,
         group: t("Workspace"),
         icon: ExportIcon,
       },
       // Integrations
       {
-        name: "Zapier",
-        path: integrationSettingsPath("zapier"),
-        component: Zapier,
-        enabled: can.update && isCloudHosted,
+        name: `${t("Install")}…`,
+        path: settingsPath("integrations"),
+        component: Integrations,
+        enabled: true,
         group: t("Integrations"),
-        icon: ZapierIcon,
+        icon: PlusIcon,
       },
     ];
 
@@ -208,7 +231,10 @@ const useSettingsConfig = () => {
             ? integrationSettingsPath(plugin.id)
             : settingsPath(plugin.id),
         group: t(group),
-        component: plugin.value.component,
+        pluginId: plugin.id,
+        description: plugin.value.description,
+        component: plugin.value.component.Component,
+        preload: plugin.value.component.preload,
         enabled: plugin.value.enabled
           ? plugin.value.enabled(team, user)
           : can.update,

app/scenes/Settings/Integrations.tsx

@@ -0,0 +1,72 @@
+import groupBy from "lodash/groupBy";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Flex from "@shared/components/Flex";
+import Heading from "~/components/Heading";
+import InputSearch from "~/components/InputSearch";
+import Scene from "~/components/Scene";
+import Text from "~/components/Text";
+import useSettingsConfig from "~/hooks/useSettingsConfig";
+import useStores from "~/hooks/useStores";
+import { settingsPath } from "~/utils/routeHelpers";
+import IntegrationCard from "./components/IntegrationCard";
+import { StickyFilters } from "./components/StickyFilters";
+
+export function Integrations() {
+  const { t } = useTranslation();
+  const { integrations } = useStores();
+  const items = useSettingsConfig();
+  const [query, setQuery] = React.useState("");
+
+  const handleQuery = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  const groupedItems = groupBy(
+    items.filter(
+      (item) =>
+        item.group === "Integrations" &&
+        item.enabled &&
+        item.path !== settingsPath("integrations") &&
+        item.name.toLowerCase().includes(query.toLowerCase())
+    ),
+    (item) =>
+      item.pluginId && integrations.findByService(item.pluginId)
+        ? "connected"
+        : "available"
+  );
+
+  return (
+    <Scene title={t("Integrations")}>
+      <Heading>{t("Integrations")}</Heading>
+      <Text as="p" type="secondary">
+        <Trans>
+          Configure a variety of integrations with third-party services.
+        </Trans>
+      </Text>
+      <StickyFilters gap={8}>
+        <InputSearch
+          short
+          value={query}
+          placeholder={`${t("Filter")}…`}
+          onChange={handleQuery}
+        />
+      </StickyFilters>
+
+      <Cards gap={30} wrap>
+        {groupedItems.connected.map((item) => (
+          <IntegrationCard key={item.path} integration={item} isConnected />
+        ))}
+        {groupedItems.available.map((item) => (
+          <IntegrationCard key={item.path} integration={item} />
+        ))}
+      </Cards>
+    </Scene>
+  );
+}
+
+const Cards = styled(Flex)`
+  margin-top: 20px;
+  width: "100%";
+`;

app/scenes/Settings/components/IntegrationCard.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
+import { ConfigItem } from "~/hooks/useSettingsConfig";
+import Button from "../../../components/Button";
+import Flex from "../../../components/Flex";
+import Text from "../../../components/Text";
+
+type Props = {
+  integration: ConfigItem;
+  isConnected?: boolean;
+};
+
+function IntegrationCard({ integration, isConnected }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Card as={Link} to={integration.path}>
+      <Flex align="center" gap={8}>
+        <integration.icon size={48} />
+        <Flex auto column>
+          <Name>{integration.name}</Name>
+          {isConnected && <Status>{t("Connected")}</Status>}
+        </Flex>
+        <Button as="span" neutral>
+          {isConnected ? t("Configure") : t("Connect")}
+        </Button>
+      </Flex>
+
+      <Description>{integration.description}</Description>
+    </Card>
+  );
+}
+
+export default IntegrationCard;
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 20px;
+  width: 300px;
+  background: ${s("background")};
+  border: 1px solid ${s("inputBorder")};
+  color: ${s("text")};
+  border-radius: 8px;
+  transition: box-shadow 200ms ease;
+  cursor: var(--pointer);
+
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px, rgba(0, 0, 0, 0.06) 0px 4px 8px;
+  }
+`;
+
+const Name = styled(Text)`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${s("text")};
+  ${ellipsis()}
+`;
+
+const Description = styled(Text)`
+  margin: 8px 0 0;
+  font-size: 15px;
+  max-width: 100%;
+  color: ${s("textTertiary")};
+`;
+
+const Status = styled(Text).attrs({
+  type: "secondary",
+  size: "small",
+  as: "span",
+})`
+  display: inline-flex;
+  align-items: center;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    width: 17px;
+    height: 17px;
+
+    background: radial-gradient(
+      circle at center,
+      ${s("accent")} 0 33%,
+      transparent 33%
+    );
+    border-radius: 50%;
+  }
+`;

app/scenes/Settings/components/IntegrationScene.tsx

@@ -0,0 +1,33 @@
+import { SettingsIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Breadcrumb from "~/components/Breadcrumb";
+import Scene from "~/components/Scene";
+import { settingsPath } from "~/utils/routeHelpers";
+
+export function IntegrationScene({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Scene>) {
+  const { t } = useTranslation();
+
+  return (
+    <Scene
+      left={
+        <Breadcrumb
+          items={[
+            {
+              type: "route",
+              title: t("Integrations"),
+              icon: <SettingsIcon />,
+              to: settingsPath("integrations"),
+            },
+          ]}
+        />
+      }
+      {...rest}
+    >
+      {children}
+    </Scene>
+  );
+}

app/stores/DocumentsStore.ts

@@ -279,19 +279,14 @@ export default class DocumentsStore extends Store<Document> {
 
   @action
   fetchBacklinks = async (documentId: string): Promise<void> => {
-    const res = await client.post(`/documents.list`, {
+    const documents = await this.fetchAll({
       backlinkDocumentId: documentId,
     });
-    invariant(res?.data, "Document list not available");
-    const { data } = res;
 
     runInAction("DocumentsStore#fetchBacklinks", () => {
-      data.forEach(this.add);
-      this.addPolicies(res.policies);
-
       this.backlinks.set(
         documentId,
-        data.map((doc: Partial<Document>) => doc.id)
+        documents.map((doc) => doc.id)
       );
     });
   };

app/stores/IntegrationsStore.ts

@@ -10,6 +10,12 @@ class IntegrationsStore extends Store<Integration> {
     super(rootStore, Integration);
   }
 
+  findByService(service: string) {
+    return this.orderedData.find(
+      (integration) => integration.service === service
+    );
+  }
+
   @computed
   get orderedData(): Integration[] {
     return naturalSort(Array.from(this.data.values()), "name");

app/utils/PluginManager.ts

@@ -3,6 +3,7 @@ import sortBy from "lodash/sortBy";
 import { action, observable } from "mobx";
 import Team from "~/models/Team";
 import User from "~/models/User";
+import { LazyComponent } from "~/components/LazyLoad";
 import { useComputed } from "~/hooks/useComputed";
 import Logger from "./Logger";
 import isCloudHosted from "./isCloudHosted";
@@ -27,8 +28,10 @@ type PluginValueMap = {
     after?: string;
     /** The displayed icon of the plugin. */
     icon: React.ElementType;
-    /** The settings screen somponent, should be lazy loaded. */
-    component: React.LazyExoticComponent<React.ComponentType>;
+    /** The lazy loaded settings screen component. */
+    component: LazyComponent<React.ComponentType>;
+    /** The description that will show on the plugins card. */
+    description?: string;
     /** Whether the plugin is enabled in the current context. */
     enabled?: (team: Team, user: User) => boolean;
   };

package.json

@@ -48,18 +48,18 @@
     "> 0.25%, not dead"
   ],
   "dependencies": {
-    "@aws-sdk/client-s3": "3.797.0",
-    "@aws-sdk/lib-storage": "3.797.0",
-    "@aws-sdk/s3-presigned-post": "3.797.0",
-    "@aws-sdk/s3-request-presigner": "3.797.0",
-    "@aws-sdk/signature-v4-crt": "^3.796.0",
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@babel/plugin-transform-class-properties": "^7.25.9",
-    "@babel/plugin-transform-destructuring": "^7.25.9",
-    "@babel/plugin-transform-regenerator": "^7.27.0",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
+    "@aws-sdk/client-s3": "3.803.0",
+    "@aws-sdk/lib-storage": "3.803.0",
+    "@aws-sdk/s3-presigned-post": "3.803.0",
+    "@aws-sdk/s3-request-presigner": "3.803.0",
+    "@aws-sdk/signature-v4-crt": "^3.803.0",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-destructuring": "^7.27.1",
+    "@babel/plugin-transform-regenerator": "^7.27.1",
+    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
     "@benrbray/prosemirror-math": "^0.2.2",
     "@bull-board/api": "^6.7.10",
     "@bull-board/koa": "^6.7.10",
@@ -141,7 +141,7 @@
     "jsdom": "^22.1.0",
     "jsonwebtoken": "^9.0.0",
     "jszip": "^3.10.1",
-    "katex": "^0.16.21",
+    "katex": "^0.16.22",
     "kbar": "0.1.0-beta.41",
     "koa": "^2.16.1",
     "koa-body": "^6.0.1",
@@ -208,7 +208,7 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^12.3.1",
-    "react-medium-image-zoom": "5.2.13",
+    "react-medium-image-zoom": "5.2.14",
     "react-merge-refs": "^2.1.1",
     "react-portal": "^4.3.0",
     "react-router-dom": "^5.3.4",
@@ -228,6 +228,7 @@
     "sequelize": "^6.37.3",
     "sequelize-cli": "^6.6.2",
     "sequelize-encrypted": "^1.0.0",
+    "sequelize-strict-attributes": "^1.0.2",
     "sequelize-typescript": "^2.1.6",
     "slug": "^5.3.0",
     "slugify": "^1.6.6",
@@ -248,7 +249,7 @@
     "umzug": "^3.8.2",
     "utility-types": "^3.11.0",
     "uuid": "^8.3.2",
-    "validator": "13.12.0",
+    "validator": "13.15.0",
     "vaul": "^1.1.2",
     "vite": "^6.3.4",
     "vite-plugin-pwa": "^0.21.2",
@@ -262,8 +263,8 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.0",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/cli": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@faker-js/faker": "^8.4.1",
     "@relative-ci/agent": "^4.3.0",
     "@testing-library/react": "^12.0.0",
@@ -328,7 +329,7 @@
     "@types/tmp": "^0.2.6",
     "@types/turndown": "^5.0.5",
     "@types/utf8": "^3.0.3",
-    "@types/validator": "^13.12.1",
+    "@types/validator": "^13.15.0",
     "@types/yauzl": "^2.10.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",

plugins/github/client/Settings.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { IntegrationService } from "@shared/types";
 import { ConnectedButton } from "~/scenes/Settings/components/ConnectedButton";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import { AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
@@ -11,7 +12,6 @@ import List from "~/components/List";
 import ListItem from "~/components/List/Item";
 import Notice from "~/components/Notice";
 import PlaceholderText from "~/components/PlaceholderText";
-import Scene from "~/components/Scene";
 import TeamLogo from "~/components/TeamLogo";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
@@ -38,7 +38,7 @@ function GitHub() {
   }, [integrations]);
 
   return (
-    <Scene title="GitHub" icon={<GitHubIcon />}>
+    <IntegrationScene title="GitHub" icon={<GitHubIcon />}>
       <Heading>GitHub</Heading>
 
       {error === "access_denied" && (
@@ -146,7 +146,7 @@ function GitHub() {
           </Trans>
         </Notice>
       )}
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/github/client/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Connect your GitHub account to Outline to enable rich, realtime, issue and pull request previews inside documents.",
+      component: createLazyComponent(() => import("./Settings")),
     },
   },
 ]);

plugins/googleanalytics/client/Settings.tsx

@@ -6,12 +6,12 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import GoogleIcon from "~/components/Icons/GoogleIcon";
 import Input from "~/components/Input";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 
@@ -40,12 +40,6 @@ function GoogleAnalytics() {
     },
   });
 
-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Analytics,
-    });
-  }, [integrations]);
-
   React.useEffect(() => {
     reset({ measurementId: integration?.settings.measurementId });
   }, [integration, reset]);
@@ -75,7 +69,7 @@ function GoogleAnalytics() {
   );
 
   return (
-    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
+    <IntegrationScene title={t("Google Analytics")} icon={<GoogleIcon />}>
       <Heading>{t("Google Analytics")}</Heading>
 
       <Text as="p" type="secondary">
@@ -100,7 +94,7 @@ function GoogleAnalytics() {
           {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
         </Button>
       </form>
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/googleanalytics/client/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Measure adoption and engagement by sending view and event analytics directly to your GA4 dashboard.",
+      component: createLazyComponent(() => import("./Settings")),
     },
   },
 ]);

plugins/googleanalytics/plugin.json

@@ -1,5 +1,5 @@
 {
-  "id": "googleanalytics",
+  "id": "google-analytics",
   "name": "Google Analytics",
   "priority": 30,
   "description": "Adds support for reporting analytics to a Google."

plugins/linear/client/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Connect your Linear account to Outline to enable rich, realtime, issue previews inside documents.",
+      component: createLazyComponent(() => import("./Settings")),
     },
   },
 ]);

plugins/matomo/client/Settings.tsx

@@ -6,11 +6,11 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import Icon from "./Icon";
@@ -42,12 +42,6 @@ function Matomo() {
     },
   });
 
-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Analytics,
-    });
-  }, [integrations]);
-
   React.useEffect(() => {
     reset({
       measurementId: integration?.settings.measurementId,
@@ -82,7 +76,7 @@ function Matomo() {
   );
 
   return (
-    <Scene title="Matomo" icon={<Icon />}>
+    <IntegrationScene title="Matomo" icon={<Icon />}>
       <Heading>Matomo</Heading>
 
       <Text as="p" type="secondary">
@@ -121,7 +115,7 @@ function Matomo() {
           {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
         </Button>
       </form>
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/matomo/client/index.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { UserRole } from "@shared/types";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -11,7 +11,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Track your docs with a self-hosted, open-source analytics platform, link Outline to Matomo for 100% data ownership, GDPR compliance, and deep usage insights on your own servers.",
+      component: createLazyComponent(() => import("./Settings")),
       enabled: (_, user) => user.role === UserRole.Admin,
     },
   },

plugins/slack/client/Settings.tsx

@@ -6,6 +6,7 @@ import { IntegrationService, IntegrationType } from "@shared/types";
 import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import { ConnectedButton } from "~/scenes/Settings/components/ConnectedButton";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
@@ -13,7 +14,6 @@ import CollectionIcon from "~/components/Icons/CollectionIcon";
 import List from "~/components/List";
 import ListItem from "~/components/List/Item";
 import Notice from "~/components/Notice";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -34,13 +34,7 @@ function Slack() {
   const error = query.get("error");
 
   React.useEffect(() => {
-    void collections.fetchPage({
-      limit: 100,
-    });
-    void integrations.fetchPage({
-      service: IntegrationService.Slack,
-      limit: 100,
-    });
+    void collections.fetchAll();
   }, [collections, integrations]);
 
   const commandIntegration = integrations.find({
@@ -67,7 +61,7 @@ function Slack() {
   const appName = env.APP_NAME;
 
   return (
-    <Scene title="Slack" icon={<SlackIcon />}>
+    <IntegrationScene title="Slack" icon={<SlackIcon />}>
       <Heading>Slack</Heading>
 
       {error === "access_denied" && (
@@ -205,7 +199,7 @@ function Slack() {
           </List>
         </>
       )}
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/slack/client/index.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { UserRole } from "@shared/types";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -11,7 +11,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Search your knowledge base directly in Slack, get /outline search, rich link previews, and notifications on new or updated docs.",
+      component: createLazyComponent(() => import("./Settings")),
       enabled: (_, user) =>
         [UserRole.Member, UserRole.Admin].includes(user.role),
     },

plugins/umami/client/Settings.tsx

@@ -6,11 +6,11 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import Icon from "./Icon";
@@ -44,12 +44,6 @@ function Umami() {
     },
   });
 
-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Analytics,
-    });
-  }, [integrations]);
-
   React.useEffect(() => {
     reset({
       umamiWebsiteId: integration?.settings.measurementId,
@@ -85,7 +79,7 @@ function Umami() {
   );
 
   return (
-    <Scene title="Umami" icon={<Icon />}>
+    <IntegrationScene title="Umami" icon={<Icon />}>
       <Heading>Umami</Heading>
 
       <Text as="p" type="secondary">
@@ -145,7 +139,7 @@ function Umami() {
           {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
         </Button>
       </form>
-    </Scene>
+    </IntegrationScene>
   );
 }
 

plugins/umami/client/index.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { UserRole } from "@shared/types";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -11,7 +11,9 @@ PluginManager.add([
     value: {
       group: "Integrations",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Gain privacy-first insights into how your team consumes docs, inject your self-hosted Umami script across Outline pages to track views and engagement while retaining full control of your data.",
+      component: createLazyComponent(() => import("./Settings")),
       enabled: (_, user) => user.role === UserRole.Admin,
     },
   },

plugins/webhooks/client/index.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -8,9 +8,12 @@ PluginManager.add([
     ...config,
     type: Hook.Settings,
     value: {
-      group: "Integrations",
+      group: "Workspace",
+      after: "Shared Links",
       icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Automate downstream workflows with real-time JSON POSTs, subscribe to events in Outline so external systems can react instantly.",
+      component: createLazyComponent(() => import("./Settings")),
     },
   },
 ]);

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"]
+}

server/commands/documentLoader.ts

@@ -1,4 +1,3 @@
-import invariant from "invariant";
 import { Op, WhereOptions } from "sequelize";
 import isUUID from "validator/lib/isUUID";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -22,8 +21,8 @@ type Props = {
 
 type Result = {
   document: Document;
-  share?: Share;
-  collection?: Collection | null;
+  share: Share | null;
+  collection: Collection | null;
 };
 
 export default async function loadDocument({
@@ -33,9 +32,9 @@ export default async function loadDocument({
   user,
   includeState,
 }: Props): Promise<Result> {
-  let document;
-  let collection;
-  let share;
+  let document: Document | null = null;
+  let collection: Collection | null = null;
+  let share: Share | null = null;
 
   if (!shareId && !(id && user)) {
     throw AuthenticationError(`Authentication or shareId required`);
@@ -72,20 +71,7 @@ export default async function loadDocument({
       where: whereClause,
       include: [
         {
-          // unscoping here allows us to return unpublished documents
-          model: Document.unscoped(),
-          include: [
-            {
-              model: User,
-              as: "createdBy",
-              paranoid: false,
-            },
-            {
-              model: User,
-              as: "updatedBy",
-              paranoid: false,
-            },
-          ],
+          model: Document.scope("withDrafts"),
           required: true,
           as: "document",
         },
@@ -129,14 +115,13 @@ export default async function loadDocument({
     const canReadDocument = user && can(user, "read", document);
 
     if (canReadDocument) {
-      // Cannot use document.collection here as it does not include the
-      // documentStructure by default through the relationship.
       if (document.collectionId) {
-        collection = await Collection.findByPk(document.collectionId);
-
-        if (!collection) {
-          throw NotFoundError("Collection could not be found for document");
-        }
+        collection = await Collection.scope("withDocumentStructure").findByPk(
+          document.collectionId,
+          {
+            rejectOnEmpty: true,
+          }
+        );
       }
 
       return {
@@ -155,11 +140,15 @@ export default async function loadDocument({
 
     // It is possible to disable sharing at the collection so we must check
     if (document.collectionId) {
-      collection = await Collection.findByPk(document.collectionId);
+      collection = await Collection.scope("withDocumentStructure").findByPk(
+        document.collectionId,
+        {
+          rejectOnEmpty: true,
+        }
+      );
     }
-    invariant(collection, "collection not found");
 
-    if (!collection.sharing) {
+    if (!collection?.sharing) {
       throw AuthorizationError();
     }
 

server/commands/documentMover.ts

@@ -1,4 +1,3 @@
-import invariant from "invariant";
 import { Transaction } from "sequelize";
 import { createContext } from "@server/context";
 import { traceFunction } from "@server/logging/tracing";
@@ -66,16 +65,21 @@ async function documentMover({
     result.documents.push(document);
   } else {
     // Load the current and the next collection upfront and lock them
-    const collection = await Collection.findByPk(document.collectionId!, {
-      transaction,
-      lock: Transaction.LOCK.UPDATE,
-      paranoid: false,
-    });
+    const collection = await Collection.scope("withDocumentStructure").findByPk(
+      document.collectionId!,
+      {
+        transaction,
+        lock: Transaction.LOCK.UPDATE,
+        paranoid: false,
+      }
+    );
 
     let newCollection = collection;
     if (collectionChanged) {
       if (collectionId) {
-        newCollection = await Collection.findByPk(collectionId, {
+        newCollection = await Collection.scope(
+          "withDocumentStructure"
+        ).findByPk(collectionId, {
           transaction,
           lock: Transaction.LOCK.UPDATE,
         });
@@ -144,12 +148,14 @@ async function documentMover({
 
       if (collectionId) {
         // Reload the collection to get relationship data
-        newCollection = await Collection.scope({
-          method: ["withMembership", user.id],
-        }).findByPk(collectionId, {
+        newCollection = await Collection.scope([
+          {
+            method: ["withMembership", user.id],
+          },
+        ]).findByPk(collectionId, {
           transaction,
+          rejectOnEmpty: true,
         });
-        invariant(newCollection, "Collection not found");
 
         result.collections.push(newCollection);
 

server/models/Collection.test.ts

@@ -16,7 +16,7 @@ beforeEach(() => {
 });
 
 describe("#url", () => {
-  test("should return correct url for the collection", () => {
+  it("should return correct url for the collection", () => {
     const collection = new Collection({
       id: "1234",
     });
@@ -25,7 +25,7 @@ describe("#url", () => {
 });
 
 describe("getDocumentParents", () => {
-  test("should return array of parent document ids", async () => {
+  it("should return array of parent document ids", async () => {
     const parent = await buildDocument();
     const document = await buildDocument();
     const collection = await buildCollection({
@@ -41,7 +41,7 @@ describe("getDocumentParents", () => {
     expect(result ? result[0] : undefined).toBe(parent.id);
   });
 
-  test("should return array of parent document ids", async () => {
+  it("should return array of parent document ids", async () => {
     const parent = await buildDocument();
     const document = await buildDocument();
     const collection = await buildCollection({
@@ -56,7 +56,7 @@ describe("getDocumentParents", () => {
     expect(result?.length).toBe(0);
   });
 
-  test("should not error if documentStructure is empty", async () => {
+  it("should not error if documentStructure is empty", async () => {
     const parent = await buildDocument();
     await buildDocument();
     const collection = await buildCollection();
@@ -66,7 +66,7 @@ describe("getDocumentParents", () => {
 });
 
 describe("getDocumentTree", () => {
-  test("should return document tree", async () => {
+  it("should return document tree", async () => {
     const document = await buildDocument();
     const collection = await buildCollection({
       documentStructure: [await document.toNavigationNode()],
@@ -76,7 +76,7 @@ describe("getDocumentTree", () => {
     );
   });
 
-  test("should return nested documents in tree", async () => {
+  it("should return nested documents in tree", async () => {
     const parent = await buildDocument();
     const document = await buildDocument();
     const collection = await buildCollection({
@@ -99,7 +99,7 @@ describe("getDocumentTree", () => {
 });
 
 describe("#addDocumentToStructure", () => {
-  test("should add as last element without index", async () => {
+  it("should add as last element without index", async () => {
     const collection = await buildCollection();
     const id = uuidv4();
     const newDocument = await buildDocument({
@@ -117,7 +117,7 @@ describe("#addDocumentToStructure", () => {
     expect(collection.documentStructure!.length).toBe(1);
   });
 
-  test("should add with an index", async () => {
+  it("should add with an index", async () => {
     const collection = await buildCollection();
     const id = uuidv4();
     const newDocument = await buildDocument({
@@ -131,7 +131,7 @@ describe("#addDocumentToStructure", () => {
     expect(collection.documentStructure![0].id).toBe(id);
   });
 
-  test("should add as a child if with parent", async () => {
+  it("should add as a child if with parent", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -150,7 +150,7 @@ describe("#addDocumentToStructure", () => {
     expect(collection.documentStructure![0].children[0].id).toBe(id);
   });
 
-  test("should add as a child if with parent with index", async () => {
+  it("should add as a child if with parent with index", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -176,7 +176,7 @@ describe("#addDocumentToStructure", () => {
     expect(collection.documentStructure![0].children[0].id).toBe(id);
   });
 
-  test("should add the document along with its nested document(s)", async () => {
+  it("should add the document along with its nested document(s)", async () => {
     const collection = await buildCollection();
 
     const document = await buildDocument({
@@ -204,7 +204,7 @@ describe("#addDocumentToStructure", () => {
     );
   });
 
-  test("should add the document along with its archived nested document(s)", async () => {
+  it("should add the document along with its archived nested document(s)", async () => {
     const collection = await buildCollection();
 
     const document = await buildDocument({
@@ -237,7 +237,7 @@ describe("#addDocumentToStructure", () => {
     );
   });
   describe("options: documentJson", () => {
-    test("should append supplied json over document's own", async () => {
+    it("should append supplied json over document's own", async () => {
       const collection = await buildCollection();
       const id = uuidv4();
       const newDocument = await buildDocument({
@@ -268,7 +268,7 @@ describe("#addDocumentToStructure", () => {
 });
 
 describe("#updateDocument", () => {
-  test("should update root document's data", async () => {
+  it("should update root document's data", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -279,7 +279,7 @@ describe("#updateDocument", () => {
     expect(collection.documentStructure![0].title).toBe("Updated title");
   });
 
-  test("should update child document's data", async () => {
+  it("should update child document's data", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -297,7 +297,7 @@ describe("#updateDocument", () => {
     newDocument.title = "Updated title";
     await newDocument.save();
     await collection.updateDocument(newDocument);
-    const reloaded = await Collection.findByPk(collection.id);
+    const reloaded = await collection.reload();
     expect(reloaded!.documentStructure![0].children[0].title).toBe(
       "Updated title"
     );
@@ -305,7 +305,7 @@ describe("#updateDocument", () => {
 });
 
 describe("#removeDocument", () => {
-  test("should save if removing", async () => {
+  it("should save if removing", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -315,7 +315,7 @@ describe("#removeDocument", () => {
     expect(collection.save).toBeCalled();
   });
 
-  test("should remove documents from root", async () => {
+  it("should remove documents from root", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -331,7 +331,7 @@ describe("#removeDocument", () => {
     expect(collectionDocuments.count).toBe(0);
   });
 
-  test("should remove a document with child documents", async () => {
+  it("should remove a document with child documents", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -359,7 +359,7 @@ describe("#removeDocument", () => {
     expect(collectionDocuments.count).toBe(0);
   });
 
-  test("should remove a child document", async () => {
+  it("should remove a child document", async () => {
     const collection = await buildCollection();
     const document = await buildDocument({ collectionId: collection.id });
     await collection.reload();
@@ -380,7 +380,7 @@ describe("#removeDocument", () => {
     expect(collection.documentStructure![0].children.length).toBe(1);
     // Remove the document
     await collection.deleteDocument(newDocument);
-    const reloaded = await Collection.findByPk(collection.id);
+    const reloaded = await collection.reload();
     expect(reloaded!.documentStructure!.length).toBe(1);
     expect(reloaded!.documentStructure![0].children.length).toBe(0);
     const collectionDocuments = await Document.findAndCountAll({
@@ -393,7 +393,7 @@ describe("#removeDocument", () => {
 });
 
 describe("#membershipUserIds", () => {
-  test("should return collection and group memberships", async () => {
+  it("should return collection and group memberships", async () => {
     const team = await buildTeam();
     const teamId = team.id;
     // Make 6 users
@@ -464,47 +464,53 @@ describe("#membershipUserIds", () => {
 });
 
 describe("#findByPk", () => {
-  test("should return collection with collection Id", async () => {
+  it("should return collection with collection Id", async () => {
     const collection = await buildCollection();
     const response = await Collection.findByPk(collection.id);
     expect(response!.id).toBe(collection.id);
   });
 
-  test("should return collection when urlId is present", async () => {
+  it("should not return documentStructure by default", async () => {
+    const collection = await buildCollection();
+    const response = await Collection.findByPk(collection.id);
+    expect(() => response!.documentStructure).toThrow();
+  });
+
+  it("should return collection when urlId is present", async () => {
     const collection = await buildCollection();
     const id = `${slugify(collection.name)}-${collection.urlId}`;
     const response = await Collection.findByPk(id);
     expect(response!.id).toBe(collection.id);
   });
 
-  test("should return collection when urlId is present, but missing slug", async () => {
+  it("should return collection when urlId is present, but missing slug", async () => {
     const collection = await buildCollection();
     const id = collection.urlId;
     const response = await Collection.findByPk(id);
     expect(response!.id).toBe(collection.id);
   });
 
-  test("should return null when incorrect uuid type", async () => {
+  it("should return null when incorrect uuid type", async () => {
     const collection = await buildCollection();
     const response = await Collection.findByPk(collection.id + "-incorrect");
     expect(response).toBe(null);
   });
 
-  test("should return null when incorrect urlId length", async () => {
+  it("should return null when incorrect urlId length", async () => {
     const collection = await buildCollection();
     const id = `${slugify(collection.name)}-${collection.urlId}incorrect`;
     const response = await Collection.findByPk(id);
     expect(response).toBe(null);
   });
 
-  test("should return null when no collection is found with uuid", async () => {
+  it("should return null when no collection is found with uuid", async () => {
     const response = await Collection.findByPk(
       "a9e71a81-7342-4ea3-9889-9b9cc8f667da"
     );
     expect(response).toBe(null);
   });
 
-  test("should return null when no collection is found with urlId", async () => {
+  it("should return null when no collection is found with urlId", async () => {
     const id = `${slugify("test collection")}-${randomstring.generate(15)}`;
     const response = await Collection.findByPk(id);
     expect(response).toBe(null);

server/models/Collection.ts

@@ -37,6 +37,7 @@ import {
   AllowNull,
   BeforeCreate,
   BeforeUpdate,
+  DefaultScope,
 } from "sequelize-typescript";
 import isUUID from "validator/lib/isUUID";
 import type { CollectionSort, ProsemirrorData } from "@shared/types";
@@ -69,6 +70,11 @@ type AdditionalFindOptions = {
   rejectOnEmpty?: boolean | Error;
 };
 
+@DefaultScope(() => ({
+  attributes: {
+    exclude: ["documentStructure"],
+  },
+}))
 @Scopes(() => ({
   withAllMemberships: {
     include: [
@@ -121,6 +127,12 @@ type AdditionalFindOptions = {
       },
     ],
   }),
+  withDocumentStructure: () => ({
+    attributes: {
+      // resets to include the documentStructure column
+      exclude: [],
+    },
+  }),
   withMembership: (userId: string) => {
     if (!userId) {
       return {};
@@ -238,6 +250,7 @@ class Collection extends ParanoidModel<
   @Column
   maintainerApprovalRequired: boolean;
 
+  @Default(null)
   @Column(DataType.JSONB)
   documentStructure: NavigationNode[] | null;
 

server/models/Document.test.ts

@@ -11,7 +11,6 @@ import {
   buildUser,
   buildGuestUser,
 } from "@server/test/factories";
-import Collection from "./Collection";
 import UserMembership from "./UserMembership";
 
 beforeEach(() => {
@@ -96,10 +95,8 @@ describe("#delete", () => {
 
     await document.delete(user);
     const [newDocument, newCollection] = await Promise.all([
-      Document.findByPk(document.id, {
-        paranoid: false,
-      }),
-      Collection.findByPk(collection.id),
+      document.reload({ paranoid: false }),
+      collection.reload(),
     ]);
 
     expect(newDocument?.lastModifiedById).toEqual(user.id);

server/models/Document.ts

@@ -15,6 +15,7 @@ import {
   FindOptions,
   WhereOptions,
   EmptyResultError,
+  Sequelize,
 } from "sequelize";
 import {
   ForeignKey,
@@ -71,12 +72,20 @@ import Length from "./validators/Length";
 
 export const DOCUMENT_VERSION = 2;
 
+// If content (JSON) is null then we still need to return the state column (BINARY)
+// as it's used as a fallback for content deserialization for older documents.
+// This can be removed if content is 100% backfilled.
+const stateIfContentEmpty = Sequelize.literal(
+  `CASE WHEN document.content IS NULL THEN document.state ELSE NULL END AS state`
+);
+
 type AdditionalFindOptions = {
   userId?: string;
   includeState?: boolean;
   rejectOnEmpty?: boolean | Error;
 };
 
+// @ts-expect-error Type 'Literal' is not assignable to type 'string | ProjectionAlias'.
 @DefaultScope(() => ({
   include: [
     {
@@ -101,13 +110,14 @@ type AdditionalFindOptions = {
     },
   },
   attributes: {
-    exclude: ["state"],
+    include: [stateIfContentEmpty],
   },
 }))
+// @ts-expect-error Type 'Literal' is not assignable to type 'string | ProjectionAlias'.
 @Scopes(() => ({
   withoutState: {
     attributes: {
-      exclude: ["state"],
+      include: [stateIfContentEmpty],
     },
   },
   withCollection: {
@@ -121,7 +131,7 @@ type AdditionalFindOptions = {
   withState: {
     attributes: {
       // resets to include the state column
-      exclude: [],
+      include: [],
     },
   },
   withDrafts: {
@@ -162,11 +172,13 @@ type AdditionalFindOptions = {
     return {
       include: [
         {
-          attributes: ["id", "permission", "sharing", "teamId", "deletedAt"],
           model: userId
-            ? Collection.scope({
-                method: ["withMembership", userId],
-              })
+            ? Collection.scope([
+                "defaultScope",
+                {
+                  method: ["withMembership", userId],
+                },
+              ])
             : Collection,
           as: "collection",
           paranoid,
@@ -414,10 +426,13 @@ class Document extends ArchivableModel<
       return;
     }
 
-    const collection = await Collection.findByPk(model.collectionId, {
-      transaction,
-      lock: Transaction.LOCK.UPDATE,
-    });
+    const collection = await Collection.scope("withDocumentStructure").findByPk(
+      model.collectionId,
+      {
+        transaction,
+        lock: Transaction.LOCK.UPDATE,
+      }
+    );
     if (!collection) {
       return;
     }
@@ -438,7 +453,9 @@ class Document extends ArchivableModel<
     }
 
     return this.sequelize!.transaction(async (transaction: Transaction) => {
-      const collection = await Collection.findByPk(model.collectionId!, {
+      const collection = await Collection.scope(
+        "withDocumentStructure"
+      ).findByPk(model.collectionId!, {
         transaction,
         lock: transaction.LOCK.UPDATE,
       });
@@ -634,21 +651,17 @@ class Document extends ArchivableModel<
 
   static withMembershipScope(
     userId: string,
-    scopeOrOptions?: string[] | FindOptions<Document>,
-    opts?: FindOptions<Document>
+    options?: FindOptions<Document> & { includeDrafts?: boolean }
   ) {
-    const scopes = Array.isArray(scopeOrOptions) ? scopeOrOptions : [];
-    const options = Array.isArray(scopeOrOptions) ? opts : scopeOrOptions;
-
     return this.scope([
-      "defaultScope",
+      options?.includeDrafts ? "withDrafts" : "defaultScope",
+      "withoutState",
       {
         method: ["withViews", userId],
       },
       {
         method: ["withMembership", userId, options?.paranoid],
       },
-      ...scopes,
     ]);
   }
 
@@ -930,7 +943,9 @@ class Document extends ArchivableModel<
     }
 
     if (!this.template && this.collectionId) {
-      const collection = await Collection.findByPk(this.collectionId, {
+      const collection = await Collection.scope(
+        "withDocumentStructure"
+      ).findByPk(this.collectionId, {
         transaction,
         lock: Transaction.LOCK.UPDATE,
       });
@@ -997,10 +1012,13 @@ class Document extends ArchivableModel<
 
     await this.sequelize.transaction(async (transaction: Transaction) => {
       const collection = this.collectionId
-        ? await Collection.findByPk(this.collectionId, {
-            transaction,
-            lock: transaction.LOCK.UPDATE,
-          })
+        ? await Collection.scope("withDocumentStructure").findByPk(
+            this.collectionId,
+            {
+              transaction,
+              lock: transaction.LOCK.UPDATE,
+            }
+          )
         : undefined;
 
       if (collection) {
@@ -1031,10 +1049,13 @@ class Document extends ArchivableModel<
   archive = async (user: User, options?: FindOptions) => {
     const { transaction } = { ...options };
     const collection = this.collectionId
-      ? await Collection.findByPk(this.collectionId, {
-          transaction,
-          lock: transaction?.LOCK.UPDATE,
-        })
+      ? await Collection.scope("withDocumentStructure").findByPk(
+          this.collectionId,
+          {
+            transaction,
+            lock: transaction?.LOCK.UPDATE,
+          }
+        )
       : undefined;
 
     if (collection) {
@@ -1055,7 +1076,7 @@ class Document extends ArchivableModel<
   ) => {
     const { transaction } = { ...options };
     const collection = collectionId
-      ? await Collection.findByPk(collectionId, {
+      ? await Collection.scope("withDocumentStructure").findByPk(collectionId, {
           transaction,
           lock: transaction?.LOCK.UPDATE,
         })
@@ -1107,7 +1128,9 @@ class Document extends ArchivableModel<
       let deleted = false;
 
       if (!this.template && this.collectionId) {
-        const collection = await Collection.findByPk(this.collectionId!, {
+        const collection = await Collection.scope(
+          "withDocumentStructure"
+        ).findByPk(this.collectionId!, {
           transaction,
           lock: transaction.LOCK.UPDATE,
           paranoid: false,

server/models/helpers/SearchHelper.ts

@@ -182,7 +182,9 @@ export default class SearchHelper {
       },
     ];
 
-    return Document.withMembershipScope(user.id, ["withDrafts"]).findAll({
+    return Document.withMembershipScope(user.id, {
+      includeDrafts: true,
+    }).findAll({
       where,
       subQuery: false,
       order: [["updatedAt", "DESC"]],
@@ -262,7 +264,7 @@ export default class SearchHelper {
 
       // Final query to get associated document data
       const [documents, count] = await Promise.all([
-        Document.withMembershipScope(user.id, ["withDrafts"]).findAll({
+        Document.withMembershipScope(user.id, { includeDrafts: true }).findAll({
           where: {
             teamId: user.teamId,
             id: map(results, "id"),

server/queues/tasks/ExportDocumentTreeTask.ts

@@ -171,7 +171,8 @@ export default abstract class ExportDocumentTreeTask extends ExportTask {
   /**
    * Generates a map of document urls to their path in the zip file.
    *
-   * @param collections
+   * @param collections The collections to generate the path map for.
+   * @param format The format of the exported documents.
    */
   private createPathMap(
     collections: Collection[],

server/queues/tasks/ExportTask.ts

@@ -44,11 +44,13 @@ export default abstract class ExportTask extends BaseTask<Props> {
       ? [fileOperation.collectionId]
       : await user.collectionIds();
 
-    const collections = await Collection.findAll({
-      where: {
-        id: collectionIds,
-      },
-    });
+    const collections = await Collection.scope("withDocumentStructure").findAll(
+      {
+        where: {
+          id: collectionIds,
+        },
+      }
+    );
 
     let filePath: string | undefined;
 

server/routes/api/collections/collections.ts

@@ -140,9 +140,11 @@ router.post(
   async (ctx: APIContext<T.CollectionsDocumentsReq>) => {
     const { id } = ctx.input.body;
     const { user } = ctx.state.auth;
-    const collection = await Collection.scope({
-      method: ["withMembership", user.id],
-    }).findByPk(id);
+    const collection = await Collection.scope([
+      {
+        method: ["withMembership", user.id],
+      },
+    ]).findByPk(id);
 
     authorize(user, "readDocument", collection);
 

server/routes/api/documents/documents.test.ts

@@ -977,7 +977,7 @@ describe("#documents.list", () => {
     const res = await server.post("/api/documents.list", {
       body: {
         token: user.getJwtToken(),
-        collection: document.collectionId,
+        collectionId: document.collectionId,
       },
     });
     const body = await res.json();
@@ -1013,7 +1013,7 @@ describe("#documents.list", () => {
     const res = await server.post("/api/documents.list", {
       body: {
         token: user.getJwtToken(),
-        collection: collection.id,
+        collectionId: collection.id,
       },
     });
     const body = await res.json();

server/routes/api/documents/documents.ts

@@ -133,15 +133,19 @@ router.post(
     // if a specific collection is passed then we need to check auth to view it
     if (collectionId) {
       where[Op.and].push({ collectionId: [collectionId] });
-      const collection = await Collection.scope({
-        method: ["withMembership", user.id],
-      }).findByPk(collectionId);
+      const collection = await Collection.scope([
+        sort === "index" ? "withDocumentStructure" : "defaultScope",
+        {
+          method: ["withMembership", user.id],
+        },
+      ]).findByPk(collectionId);
+
       authorize(user, "readDocument", collection);
 
       // index sort is special because it uses the order of the documents in the
       // collection.documentStructure rather than a database column
       if (sort === "index") {
-        documentIds = (collection?.documentStructure || [])
+        documentIds = (collection.documentStructure || [])
           .map((node) => node.id)
           .slice(ctx.state.pagination.offset, ctx.state.pagination.limit);
         where[Op.and].push({ id: documentIds });
@@ -535,9 +539,9 @@ router.post(
       delete where.updatedAt;
     }
 
-    const documents = await Document.withMembershipScope(user.id, [
-      "withDrafts",
-    ]).findAll({
+    const documents = await Document.withMembershipScope(user.id, {
+      includeDrafts: true,
+    }).findAll({
       where,
       order: [[sort, direction]],
       offset: ctx.state.pagination.offset,

server/routes/api/groupMemberships/groupMemberships.ts

@@ -58,9 +58,9 @@ router.post(
     const documentIds = memberships
       .map((p) => p.documentId)
       .filter(Boolean) as string[];
-    const documents = await Document.withMembershipScope(userId, [
-      "withDrafts",
-    ]).findAll({
+    const documents = await Document.withMembershipScope(userId, {
+      includeDrafts: true,
+    }).findAll({
       where: {
         id: documentIds,
       },

server/routes/api/shares/shares.ts

@@ -54,7 +54,11 @@ router.post(
       });
       authorize(user, "read", document);
 
-      const collection = await document.$get("collection");
+      const collection = document.collectionId
+        ? await Collection.scope("withDocumentStructure").findByPk(
+            document.collectionId
+          )
+        : undefined;
       const parentIds = collection?.getDocumentParents(documentId);
       const parentShare = parentIds
         ? await Share.scope({

server/storage/database.ts

@@ -1,5 +1,6 @@
 import path from "path";
 import { InferAttributes, InferCreationAttributes } from "sequelize";
+import sequelizeStrictAttributes from "sequelize-strict-attributes";
 import { Sequelize } from "sequelize-typescript";
 import { Umzug, SequelizeStorage, MigrationError } from "umzug";
 import env from "@server/env";
@@ -23,7 +24,7 @@ export function createDatabaseInstance(
   }
 ): Sequelize {
   try {
-    return new Sequelize(databaseUrl, {
+    const instance = new Sequelize(databaseUrl, {
       logging: (msg) =>
         process.env.DEBUG?.includes("database") &&
         Logger.debug("database", msg),
@@ -47,6 +48,8 @@ export function createDatabaseInstance(
       },
       schema,
     });
+    sequelizeStrictAttributes(instance);
+    return instance;
   } catch (error) {
     Logger.fatal(
       "Could not connect to database",

server/test/factories.ts

@@ -310,7 +310,7 @@ export async function buildCollection(
     overrides.permission = CollectionPermission.ReadWrite;
   }
 
-  return Collection.create({
+  return Collection.scope("withDocumentStructure").create({
     name: faker.lorem.words(2),
     description: faker.lorem.words(4),
     createdById: overrides.userId,
@@ -416,7 +416,9 @@ export async function buildDocument(
 
   if (overrides.collectionId && overrides.publishedAt !== null) {
     collection = collection
-      ? await Collection.findByPk(overrides.collectionId)
+      ? await Collection.scope("withDocumentStructure").findByPk(
+          overrides.collectionId
+        )
       : undefined;
 
     await collection?.addDocumentToStructure(document, 0);

server/utils/indexing.ts

@@ -11,7 +11,6 @@ export async function collectionIndexing(
     where: {
       teamId,
     },
-    attributes: ["id", "index", "name", "teamId"],
     transaction,
   });
 

shared/editor/components/Styles.ts

@@ -55,7 +55,7 @@ const mathStyle = (props: Props) => css`
     cursor: auto;
     white-space: pre-wrap;
     overflow-x: auto;
-    overflow-y: none;
+    overflow-y: hidden;
   }
 
   .math-node.empty-math .math-render::before {

shared/editor/lib/code.ts

@@ -198,6 +198,12 @@ export const codeLanguages: Record<string, CodeLanguage> = {
     label: "Powershell",
     loader: () => import("refractor/lang/powershell").then((m) => m.default),
   },
+  promql: {
+    lang: "promql",
+    label: "PromQL",
+    // @ts-expect-error PromQL is not in types but exists
+    loader: () => import("refractor/lang/promql").then((m) => m.default),
+  },
   protobuf: {
     lang: "protobuf",
     label: "Protobuf",

shared/i18n/locales/en_US/translation.json

@@ -528,6 +528,7 @@
   "Applications": "Applications",
   "Shared Links": "Shared Links",
   "Import": "Import",
+  "Install": "Install",
   "Integrations": "Integrations",
   "Revoke token": "Revoke token",
   "Revoke": "Revoke",
@@ -974,6 +975,8 @@
   "{{ count }} document imported_plural": "{{ count }} documents imported",
   "You can import a zip file that was previously exported from an Outline installation – collections, documents, and images will be imported. In Outline, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>.": "You can import a zip file that was previously exported from an Outline installation – collections, documents, and images will be imported. In Outline, open <em>Export</em> in the Settings sidebar and click on <em>Export Data</em>.",
   "Drag and drop the zip file from the Markdown export option in {{appName}}, or click to upload": "Drag and drop the zip file from the Markdown export option in {{appName}}, or click to upload",
+  "Configure": "Configure",
+  "Connect": "Connect",
   "Last active": "Last active",
   "Guest": "Guest",
   "Never used": "Never used",
@@ -1034,6 +1037,7 @@
   "Enterprise": "Enterprise",
   "Quickly transfer your existing documents, pages, and files from other tools and services into {{appName}}. You can also drag and drop any HTML, Markdown, and text documents directly into Collections in the app.": "Quickly transfer your existing documents, pages, and files from other tools and services into {{appName}}. You can also drag and drop any HTML, Markdown, and text documents directly into Collections in the app.",
   "Recent imports": "Recent imports",
+  "Configure a variety of integrations with third-party services.": "Configure a variety of integrations with third-party services.",
   "Could not load members": "Could not load members",
   "Everyone that has signed into {{appName}} is listed here. It’s possible that there are other users who have access through {{signinMethods}} but haven’t signed in yet.": "Everyone that has signed into {{appName}} is listed here. It’s possible that there are other users who have access through {{signinMethods}} but haven’t signed in yet.",
   "Receive a notification whenever a new document is published": "Receive a notification whenever a new document is published",
@@ -1118,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}}.",
@@ -1144,7 +1147,6 @@
   "Expires today": "Expires today",
   "Expires tomorrow": "Expires tomorrow",
   "Expires {{ date }}": "Expires {{ date }}",
-  "Connect": "Connect",
   "Whoops, you need to accept the permissions in GitHub to connect {{appName}} to your workspace. Try again?": "Whoops, you need to accept the permissions in GitHub to connect {{appName}} to your workspace. Try again?",
   "Something went wrong while authenticating your request. Please try logging in again.": "Something went wrong while authenticating your request. Please try logging in again.",
   "The owner of GitHub account has been requested to install the {{githubAppName}} GitHub app. Once approved, previews will be shown for respective links.": "The owner of GitHub account has been requested to install the {{githubAppName}} GitHub app. Once approved, previews will be shown for respective links.",
@@ -1215,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 }}",