feat: Integrate Outline

web/components/instance/pages-config-form.tsx

@@ -0,0 +1,122 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import { useApplication } from "hooks/store";
+import useToast from "hooks/use-toast";
+
+export interface IInstancePagesConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface PagesConfigFormValues {
+  OUTLINE_API_TOKEN: string;
+}
+
+export const InstancePagesConfigForm: FC<IInstancePagesConfigForm> = (props) => {
+  const { config } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { instance: instanceStore } = useApplication();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<PagesConfigFormValues>({
+    defaultValues: {
+      OUTLINE_API_TOKEN: config["OUTLINE_API_TOKEN"],
+    },
+  });
+
+  const onSubmit = async (formData: PagesConfigFormValues) => {
+    const payload: Partial<PagesConfigFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Pages Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <>
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <div className="flex max-w-md flex-col gap-1">
+          <h4 className="text-sm">API Token from your Outline instance</h4>
+          <div className="relative">
+            <Controller
+              control={control}
+              name="OUTLINE_API_TOKEN"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="OUTLINE_API_TOKEN"
+                  name="OUTLINE_API_TOKEN"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.OUTLINE_API_TOKEN)}
+                  placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+                  className="w-full rounded-md !pr-10 font-medium"
+                />
+              )}
+            />
+            {showPassword ? (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(false)}
+              >
+                <EyeOff className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <p className="text-xs text-custom-text-400">
+            Visit the Outline docs to learn how to create an API token.{" "}
+            <a
+              href="https://unsplash.com/documentation#creating-a-developer-account"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              Learn more.
+            </a>
+          </p>
+          <p className="text-xs text-custom-text-400">
+          In the Webhooks section of Outline (https://docs.getoutline.com/s/guide/doc/webhooks-gB7HYhS6yq), add the following webhook:
+            <pre
+              className="text-custom-primary-100 hover:underline"
+            >
+              {"<your-plane-domain>/api/webhooks/outline"}
+            </pre>
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </>
+  );
+};

web/components/instance/sidebar-menu.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+import { Image, BrainCog, Cog, Lock, Mail, FileText } from "lucide-react";
 // hooks
 import { useApplication } from "hooks/store";
 // ui
@@ -37,6 +37,12 @@ const INSTANCE_ADMIN_LINKS = [
     description: "Allow third-party image libraries",
     href: `/god-mode/image`,
   },
+  {
+    Icon: FileText,
+    name: "Pages",
+    description: "Configure your documents",
+    href: `/god-mode/pages`,
+  },
 ];
 
 export const InstanceAdminSidebarMenu = () => {

web/pages/god-mode/pages.tsx

@@ -0,0 +1,50 @@
+import { ReactElement } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { InstanceAdminLayout } from "layouts/admin-layout";
+// types
+import { NextPageWithLayout } from "lib/types";
+// hooks
+import { useApplication } from "hooks/store";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstancePagesConfigForm } from "components/instance/pages-config-form";
+
+const InstanceAdminPagesPage: NextPageWithLayout = observer(() => {
+  // store
+  const {
+    instance: { fetchInstanceConfigurations, formattedConfig },
+  } = useApplication();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">Pages</div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Configure how your pages are stored.
+        </div>
+      </div>
+      {formattedConfig ? (
+        <InstancePagesConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+InstanceAdminPagesPage.getLayout = function getLayout(page: ReactElement) {
+  return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
+};
+
+export default InstanceAdminPagesPage;