dev: instance admin routes and initial set of screens

apiserver/bin/instance_registration.py

@@ -84,7 +84,9 @@ def instance_registration():
                     role=20,
                 )
 
-                print(f"Instance succesfully registered with owner: {instance.primary_owner.email}")
+                print(
+                    f"Instance succesfully registered with owner: {instance.primary_owner.email}"
+                )
                 return
 
             print("Instance could not be registered")

apiserver/plane/license/api/views/instance.py

@@ -40,11 +40,8 @@ class InstanceEndpoint(BaseAPIView):
             return Response({"activated": False}, status=status.HTTP_400_BAD_REQUEST)
         # Return instance
         serializer = InstanceSerializer(instance)
-        data = {
-            "data": serializer.data,
-            "activated": True,
-        }
-        return Response(data, status=status.HTTP_200_OK)
+        serializer.data["activated"] = True
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
     def patch(self, request):
         # Get the instance

web/components/instance/general-form.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+// ui
+import { Input } from "@plane/ui";
+// types
+import { IInstance } from "types/instance";
+
+export interface IInstanceGeneralForm {
+  data: IInstance;
+}
+
+export interface GeneralFormValues {
+  instance_name: string;
+  namespace: string | null;
+  is_telemetry_enabled: boolean;
+}
+
+export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
+  const { data } = props;
+
+  const {} = useForm<GeneralFormValues>({
+    defaultValues: {
+      instance_name: data.instance_name,
+      namespace: data.namespace,
+      is_telemetry_enabled: data.is_telemetry_enabled,
+    },
+  });
+
+  return (
+    <div className="p-5">
+      <div className="my-2 ">
+        <label>Instance Name</label>
+        <Input name="instance_name" />
+      </div>
+      <div className="my-2">
+        <label>Instance ID</label>
+        <Input name="instance_id" value={data.instance_id} disabled={true} />
+      </div>
+      <div className="my-2">
+        <label>Namespace</label>
+        <Input name="namespace" />
+      </div>
+    </div>
+  );
+};

web/components/instance/help-section.tsx

@@ -0,0 +1,134 @@
+import { FC, useState, useRef } from "react";
+import { Transition } from "@headlessui/react";
+import Link from "next/link";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { FileText, HelpCircle, MessagesSquare, MoveLeft } from "lucide-react";
+import { DiscordIcon, GithubIcon } from "@plane/ui";
+// assets
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: FileText,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+  {
+    name: "Chat with us",
+    href: null,
+    onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
+    Icon: MessagesSquare,
+  },
+];
+
+export const InstanceHelpSection: FC = () => {
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // store
+  const {
+    theme: { sidebarCollapsed, toggleSidebar },
+  } = useMobxStore();
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <div
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
+        sidebarCollapsed ? "flex-col" : ""
+      }`}
+    >
+      <div className={`flex items-center gap-1 ${sidebarCollapsed ? "flex-col justify-center" : "justify-end w-full"}`}>
+        <button
+          type="button"
+          className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
+            sidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+        >
+          <HelpCircle className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
+          onClick={() => toggleSidebar()}
+        >
+          <MoveLeft className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
+            sidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => toggleSidebar()}
+        >
+          <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
+        </button>
+      </div>
+
+      <div className="relative">
+        <Transition
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 min-w-[10rem] ${
+              sidebarCollapsed ? "left-full" : "-left-[75px]"
+            } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
+            ref={helpOptionsRef}
+          >
+            <div className="space-y-1 pb-2">
+              {helpOptions.map(({ name, Icon, href, onClick }) => {
+                if (href)
+                  return (
+                    <Link href={href} key={name}>
+                      <a
+                        target="_blank"
+                        className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                      >
+                        <div className="grid place-items-center flex-shrink-0">
+                          <Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </a>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      onClick={onClick ?? undefined}
+                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                    >
+                      <div className="grid place-items-center flex-shrink-0">
+                        <Icon className="text-custom-text-200 h-3.5 w-3.5" />
+                      </div>
+                      <span className="text-xs">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+            <div className="px-2 pt-2 pb-1 text-[10px]">Version: v{packageJson.version}</div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};

web/components/instance/index.ts

@@ -0,0 +1,3 @@
+export * from "./help-section";
+export * from "./sidebar-menu";
+export * from "./general-form";

web/components/instance/sidebar-menu.tsx

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { Tooltip } from "@plane/ui";
+
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: LayoutGrid,
+    name: "General",
+    href: `/admin`,
+  },
+  {
+    Icon: BarChart2,
+    name: "OAuth",
+    href: `/admin/oauth`,
+  },
+  {
+    Icon: Briefcase,
+    name: "Email",
+    href: `/admin/email`,
+  },
+  {
+    Icon: CheckCircle,
+    name: "AI",
+    href: `/admin/ai`,
+  },
+];
+
+export const InstanceAdminSidebarMenu = () => {
+  const {
+    theme: { sidebarCollapsed },
+  } = useMobxStore();
+  // router
+  const router = useRouter();
+
+  return (
+    <div>
+      {INSTANCE_ADMIN_LINKS.map((item, index) => {
+        const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;
+
+        return (
+          <Link key={index} href={item.href}>
+            <a className="block w-full">
+              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
+                <div
+                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                    isActive
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  } ${sidebarCollapsed ? "justify-center" : ""}`}
+                >
+                  {<item.Icon className="h-4 w-4" />}
+                  {!sidebarCollapsed && item.name}
+                </div>
+              </Tooltip>
+            </a>
+          </Link>
+        );
+      })}
+    </div>
+  );
+};

web/layouts/admin-layout/sidebar.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
-import { WorkspaceHelpSection } from "components/workspace";
+import { InstanceAdminSidebarMenu, InstanceHelpSection } from "components/instance";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export interface IAppSidebar {}
+export interface IInstanceAdminSidebar {}
 
-export const InstanceAdminSidebar: FC<IAppSidebar> = observer(() => {
+export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
   // store
   const { theme: themStore } = useMobxStore();
 
@@ -19,7 +19,8 @@ export const InstanceAdminSidebar: FC<IAppSidebar> = observer(() => {
       } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="flex h-full w-full flex-1 flex-col">
-        <WorkspaceHelpSection />
+        <InstanceAdminSidebarMenu />
+        <InstanceHelpSection />
       </div>
     </div>
   );

web/pages/admin/ai.tsx

@@ -0,0 +1,16 @@
+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/email.tsx

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

web/pages/admin/index.tsx

@@ -1,13 +1,25 @@
 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 "types/app";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { InstanceGeneralForm } from "components/instance";
 
-const InstanceAdminPage: NextPageWithLayout = () => {
-  console.log("admin page");
-  return <div>Admin Page</div>;
-};
+const InstanceAdminPage: NextPageWithLayout = observer(() => {
+  // store
+  const {
+    instance: { fetchInstanceInfo, instance },
+  } = useMobxStore();
+
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+
+  return <div>{instance && <InstanceGeneralForm data={instance} />}</div>;
+});
 
 InstanceAdminPage.getLayout = function getLayout(page: ReactElement) {
   return <InstanceAdminLayout>{page}</InstanceAdminLayout>;

web/pages/admin/oauth.tsx

@@ -0,0 +1,16 @@
+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/services/instance.service.ts

@@ -0,0 +1,27 @@
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+// types
+import type { IInstance } from "types/instance";
+
+export class InstanceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getInstanceInfo(): Promise<IInstance> {
+    return this.get("/api/licenses/instances/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async getInstanceConfigurations() {
+    return this.get("/api/licenses/instances/configurations/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+}

web/services/workspace.service.ts

@@ -96,7 +96,7 @@ export class WorkspaceService extends APIService {
   }
 
   async joinWorkspace(workspaceSlug: string, invitationId: string, data: any, user: IUser | undefined): Promise<any> {
-    return this.post(`/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`, data, {
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/join/`, data, {
       headers: {},
     })
       .then((response) => {
@@ -109,7 +109,7 @@ export class WorkspaceService extends APIService {
   }
 
   async joinWorkspaces(data: any): Promise<any> {
-    return this.post("/api/users/me/invitations/workspaces/", data)
+    return this.post("/api/users/me/workspaces/invitations/", data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -125,7 +125,7 @@ export class WorkspaceService extends APIService {
   }
 
   async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
-    return this.get("/api/users/me/invitations/workspaces/")
+    return this.get("/api/users/me/workspaces/invitations/")
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

web/store/instance/index.ts

@@ -0,0 +1 @@
+export * from "./instance.store";

web/store/instance/instance.store.ts

@@ -0,0 +1,73 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IInstance } from "types/instance";
+// services
+import { InstanceService } from "services/instance.service";
+
+export interface IInstanceStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  instance: IInstance | null;
+  configurations: any | null;
+  // computed
+  // action
+  fetchInstanceInfo: () => Promise<IInstance>;
+  fetchInstanceConfigurations: () => Promise<any>;
+}
+
+export class InstanceStore implements IInstanceStore {
+  loader: boolean = false;
+  error: any | null = null;
+  instance: IInstance | null = null;
+  configurations: any | null = null;
+  // service
+  instanceService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      instance: observable.ref,
+      configurations: observable.ref,
+      // computed
+      //   getIssueType: computed,
+      // actions
+      fetchInstanceInfo: action,
+      fetchInstanceConfigurations: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.instanceService = new InstanceService();
+  }
+
+  fetchInstanceInfo = async () => {
+    try {
+      const instance = await this.instanceService.getInstanceInfo();
+      runInAction(() => {
+        this.instance = instance;
+      });
+      return instance;
+    } catch (error) {
+      console.log("Error while fetching the instance");
+      throw error;
+    }
+  };
+
+  fetchInstanceConfigurations = async () => {
+    try {
+      const configurations = await this.instanceService.getInstanceConfigurations();
+      runInAction(() => {
+        this.configurations = configurations;
+      });
+      return configurations;
+    } catch (error) {
+      console.log("Error while fetching the instance");
+      throw error;
+    }
+  };
+}

web/store/root.ts

@@ -1,5 +1,6 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
+import { InstanceStore, IInstanceStore } from "./instance";
 import AppConfigStore, { IAppConfigStore } from "./app-config.store";
 import CommandPaletteStore, { ICommandPaletteStore } from "./command-palette.store";
 import UserStore, { IUserStore } from "store/user.store";
@@ -116,6 +117,8 @@ import { IMentionsStore, MentionsStore } from "store/editor";
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
+  instance: IInstanceStore;
+
   user: IUserStore;
   theme: IThemeStore;
   appConfig: IAppConfigStore;
@@ -184,6 +187,8 @@ export class RootStore {
   mentionsStore: IMentionsStore;
 
   constructor() {
+    this.instance = new InstanceStore(this);
+
     this.appConfig = new AppConfigStore(this);
     this.commandPalette = new CommandPaletteStore(this);
     this.user = new UserStore(this);

web/types/instance.d.ts

@@ -0,0 +1,22 @@
+import { IUserLite } from "./users";
+
+export interface IInstance {
+  id: string;
+  primary_owner_details: IUserLite;
+  created_at: string;
+  updated_at: string;
+  instance_name: string;
+  whitelist_emails: string | null;
+  instance_id: string;
+  license_key: string | null;
+  api_key: string;
+  version: string;
+  primary_email: string;
+  last_checked_at: string;
+  namespace: string | null;
+  is_telemetry_enabled: boolean;
+  is_support_required: boolean;
+  created_by: string | null;
+  updated_by: string | null;
+  primary_owner: string;
+}