feat: Instance Admin Panel: Configuration Settings (#2800)

* feat: Instance Admin Panel: Configuration Settings

* refactor: seprate Google and Github form into independent components.

* feat: add admin auth wrapper and access denied page.

* style: design updates.

web/pages/admin/ai.tsx

@@ -1,16 +0,0 @@
-import { ReactElement } from "react";
-// layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
-// types
-import { NextPageWithLayout } from "types/app";
-
-const InstanceAdminAIPage: NextPageWithLayout = () => {
-  console.log("admin page");
-  return <div>Admin AI Page</div>;
-};
-
-InstanceAdminAIPage.getLayout = function getLayout(page: ReactElement) {
-  return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
-};
-
-export default InstanceAdminAIPage;

web/pages/admin/authorization.tsx

@@ -0,0 +1,166 @@
+import { ReactElement, useState } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { InstanceAdminHeader, InstanceAdminLayout } from "layouts/admin-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { ChevronDown, ChevronRight } from "lucide-react";
+// ui
+import { Loader, ToggleSwitch } from "@plane/ui";
+import { Disclosure, Transition } from "@headlessui/react";
+// components
+import { InstanceGoogleConfigForm } from "components/instance/google-config-form";
+import { InstanceGithubConfigForm } from "components/instance/github-config-form";
+
+const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
+  // store
+  const {
+    instance: { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations },
+  } = useMobxStore();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  // toast
+  const { setToastAlert } = useToast();
+
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const enableSignup = formattedConfig?.ENABLE_SIGNUP ?? "0";
+
+  const updateConfig = async (value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      ENABLE_SIGNUP: value,
+    };
+
+    await updateInstanceConfigurations(payload)
+      .then(() => {
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Authorization Settings updated successfully",
+        });
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: "Failed to update Authorization Settings",
+        });
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <div>
+      {formattedConfig ? (
+        <div className="flex flex-col gap-8 m-8 w-4/5">
+          <div className="pb-2 mb-2 border-b border-custom-border-100">
+            <div className="text-custom-text-100 font-medium text-lg">Authorization</div>
+            <div className="text-custom-text-300 font-normal text-sm">
+              Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
+              settings.
+            </div>
+          </div>
+          <div className="flex items-center gap-8 pb-4 border-b border-custom-border-100">
+            <div>
+              <div className="text-custom-text-100 font-medium text-sm">Enable sign-up</div>
+              <div className="text-custom-text-300 font-normal text-xs">
+                Keep the doors open so people can join your workspaces.
+              </div>
+            </div>
+            <div className={isSubmitting ? "opacity-70" : ""}>
+              <ToggleSwitch
+                value={Boolean(parseInt(enableSignup))}
+                onChange={() => {
+                  Boolean(parseInt(enableSignup)) === true ? updateConfig("0") : updateConfig("1");
+                }}
+                size="sm"
+                disabled={isSubmitting}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-6 py-2">
+            <Disclosure as="div">
+              {({ open }) => (
+                <div className="w-full">
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className="flex items-center justify-between w-full py-2 border-b border-custom-border-100"
+                  >
+                    <span className="text-lg font-medium tracking-tight">Google</span>
+                    {open ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                  </Disclosure.Button>
+                  <Transition
+                    show={open}
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform opacity-0"
+                    enterTo="transform opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform opacity-100"
+                    leaveTo="transform opacity-0"
+                  >
+                    <Disclosure.Panel className="flex flex-col gap-8 px-2 py-8">
+                      <InstanceGoogleConfigForm config={formattedConfig} />
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+            <Disclosure as="div">
+              {({ open }) => (
+                <div className="w-full">
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className="flex items-center justify-between w-full py-2 border-b border-custom-border-100"
+                  >
+                    <span className="text-lg font-medium tracking-tight">Github</span>
+                    {open ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+                  </Disclosure.Button>
+                  <Transition
+                    show={open}
+                    enter="transition duration-100 ease-out"
+                    enterFrom="transform opacity-0"
+                    enterTo="transform opacity-100"
+                    leave="transition duration-75 ease-out"
+                    leaveFrom="transform opacity-100"
+                    leaveTo="transform opacity-0"
+                  >
+                    <Disclosure.Panel className="flex flex-col gap-8 px-2 py-8">
+                      <InstanceGithubConfigForm config={formattedConfig} />
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          </div>
+        </div>
+      ) : (
+        <Loader className="space-y-4 m-8">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="25%" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+InstanceAdminAuthorizationPage.getLayout = function getLayout(page: ReactElement) {
+  return <InstanceAdminLayout header={<InstanceAdminHeader title="Authorization" />}>{page}</InstanceAdminLayout>;
+};
+
+export default InstanceAdminAuthorizationPage;

web/pages/admin/email.tsx

@@ -1,16 +1,44 @@
 import { ReactElement } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { InstanceAdminHeader, InstanceAdminLayout } from "layouts/admin-layout";
 // types
 import { NextPageWithLayout } from "types/app";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstanceEmailForm } from "components/instance/email-form";
 
-const InstanceAdminEmailPage: NextPageWithLayout = () => {
-  console.log("admin page");
-  return <div>Admin Email Page</div>;
-};
+const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
+  // store
+  const {
+    instance: { fetchInstanceConfigurations, formattedConfig },
+  } = useMobxStore();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div>
+      {formattedConfig ? (
+        <InstanceEmailForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-4 m-8">
+        <Loader.Item height="50px" />
+        <Loader.Item height="50px" />
+        <Loader.Item height="50px" width="25%" />
+        <Loader.Item height="50px" width="25%" />
+        <Loader.Item height="50px" width="25%" />
+      </Loader>
+      )}
+    </div>
+  )
+});
 
 InstanceAdminEmailPage.getLayout = function getLayout(page: ReactElement) {
-  return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
+  return <InstanceAdminLayout header={<InstanceAdminHeader title="Email" />}>{page}</InstanceAdminLayout>;
 };
 
 export default InstanceAdminEmailPage;

web/pages/admin/index.tsx

@@ -2,11 +2,13 @@ import { ReactElement } from "react";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
+import { InstanceAdminHeader, InstanceAdminLayout } from "layouts/admin-layout";
 // types
 import { NextPageWithLayout } from "types/app";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
 // components
 import { InstanceGeneralForm } from "components/instance";
 
@@ -18,11 +20,23 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
 
   useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
 
-  return <div>{instance && <InstanceGeneralForm instance={instance} />}</div>;
+  return (
+    <div>
+      {instance ? (
+        <InstanceGeneralForm instance={instance} />
+      ) : (
+        <Loader className="space-y-4 m-8">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+          <Loader.Item height="50px" width="25%" />
+        </Loader>
+      )}
+    </div>
+  );
 });
 
 InstanceAdminPage.getLayout = function getLayout(page: ReactElement) {
-  return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
+  return <InstanceAdminLayout header={<InstanceAdminHeader title="General" />}>{page}</InstanceAdminLayout>;
 };
 
 export default InstanceAdminPage;

web/pages/admin/oauth.tsx

@@ -1,16 +0,0 @@
-import { ReactElement } from "react";
-// layouts
-import { InstanceAdminLayout } from "layouts/admin-layout";
-// types
-import { NextPageWithLayout } from "types/app";
-
-const InstanceAdminOAuthPage: NextPageWithLayout = () => {
-  console.log("admin page");
-  return <div>Admin oauth Page</div>;
-};
-
-InstanceAdminOAuthPage.getLayout = function getLayout(page: ReactElement) {
-  return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
-};
-
-export default InstanceAdminOAuthPage;

web/pages/admin/openai.tsx

@@ -0,0 +1,42 @@
+import { ReactElement } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// layouts
+import { InstanceAdminHeader, InstanceAdminLayout } from "layouts/admin-layout";
+// types
+import { NextPageWithLayout } from "types/app";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstanceOpenAIForm } from "components/instance/openai-form";
+
+const InstanceAdminOpenAIPage: NextPageWithLayout = observer(() => {
+  // store
+  const {
+    instance: { fetchInstanceConfigurations, formattedConfig },
+  } = useMobxStore();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div>
+      {formattedConfig ? (
+        <InstanceOpenAIForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-4 m-8">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" width="50%" />
+          <Loader.Item height="50px" width="25%" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+InstanceAdminOpenAIPage.getLayout = function getLayout(page: ReactElement) {
+  return <InstanceAdminLayout header={<InstanceAdminHeader title="OpenAI" />}>{page}</InstanceAdminLayout>;
+};
+
+export default InstanceAdminOpenAIPage;