From 2d04917951abbaa4019ac467060485c98ed04e4b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 27 Nov 2023 17:15:11 +0530
Subject: [PATCH] chore: instance admins endpoint added and ui/ux improvement
 (#2895)

* style: sidebar improvement

* style: header height consistency

* chore: layout consistency and general page improvement

* chore: layout, email form and image form improvement

* chore: instance admins endpoint intergrated and code refactor

* chore: code refactor

* chore: google client secret section removed
---
 web/components/instance/email-form.tsx        | 65 ++++++++++++-------
 web/components/instance/general-form.tsx      | 29 +++++----
 .../instance/google-config-form.tsx           | 31 ---------
 web/components/instance/image-config-form.tsx |  2 +-
 web/components/instance/sidebar-dropdown.tsx  | 10 +--
 web/components/instance/sidebar-menu.tsx      | 10 +--
 web/layouts/admin-layout/header.tsx           |  2 +-
 web/layouts/admin-layout/layout.tsx           |  2 +-
 web/pages/god-mode/ai.tsx                     |  2 +-
 web/pages/god-mode/authorization.tsx          |  2 +-
 web/pages/god-mode/image.tsx                  |  2 +-
 web/pages/god-mode/index.tsx                  |  9 +--
 web/pages/god-mode/{email.tsx => mail.tsx}    |  8 +--
 web/services/instance.service.ts              | 35 ++++++----
 web/store/instance/instance.store.ts          | 23 ++++++-
 web/types/instance.d.ts                       | 17 +++--
 16 files changed, 140 insertions(+), 109 deletions(-)
 rename web/pages/god-mode/{email.tsx => mail.tsx} (87%)

diff --git a/web/components/instance/email-form.tsx b/web/components/instance/email-form.tsx
index 870512106..794592ba1 100644
--- a/web/components/instance/email-form.tsx
+++ b/web/components/instance/email-form.tsx
@@ -1,7 +1,8 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input, ToggleSwitch } from "@plane/ui";
+import { Eye, EyeOff } from "lucide-react";
 // types
 import { IFormattedInstanceConfiguration } from "types/instance";
 // hooks
@@ -24,6 +25,7 @@ export interface EmailFormValues {
 
 export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const { config } = props;
+  const [showPassword, setShowPassword] = useState(false);
   // store
   const { instance: instanceStore } = useMobxStore();
   // toast
@@ -62,7 +64,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
 
   return (
     <>
-      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full max-w-4xl">
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Host</h4>
           <Controller
@@ -105,7 +107,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
           />
         </div>
       </div>
-      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full max-w-4xl">
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Username</h4>
           <Controller
@@ -129,28 +131,45 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
 
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Password</h4>
-          <Controller
-            control={control}
-            name="EMAIL_HOST_PASSWORD"
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="EMAIL_HOST_PASSWORD"
-                name="EMAIL_HOST_PASSWORD"
-                type="password"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.EMAIL_HOST_PASSWORD)}
-                placeholder="Password"
-                className="rounded-md font-medium w-full"
-              />
+          <div className="relative">
+            <Controller
+              control={control}
+              name="EMAIL_HOST_PASSWORD"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="EMAIL_HOST_PASSWORD"
+                  name="EMAIL_HOST_PASSWORD"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.EMAIL_HOST_PASSWORD)}
+                  placeholder="Password"
+                  className="rounded-md font-medium w-full"
+                />
+              )}
+            />
+            {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>
         </div>
       </div>
 
-      <div className="w-full lg:w-1/2 flex flex-col px-1 gap-y-8">
-        <div className="flex items-center gap-8 pt-4 mr-8">
+      <div className="w-full flex flex-col px-1 gap-y-8 max-w-md">
+        <div className="flex items-center gap-10 pt-4 mr-8">
           <div className="grow">
             <div className="text-custom-text-100 font-medium text-sm">
               Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
@@ -174,7 +193,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
           </div>
         </div>
 
-        <div className="flex items-center gap-8 pt-4 mr-8">
+        <div className="flex items-center gap-10 pt-4 mr-8">
           <div className="grow">
             <div className="text-custom-text-100 font-medium text-sm">
               Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
@@ -201,7 +220,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
         </div>
       </div>
 
-      <div className="flex items-center py-1">
+      <div className="flex items-center py-1 max-w-4xl">
         <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save Changes"}
         </Button>
diff --git a/web/components/instance/general-form.tsx b/web/components/instance/general-form.tsx
index d8b533f73..9ee7c2f64 100644
--- a/web/components/instance/general-form.tsx
+++ b/web/components/instance/general-form.tsx
@@ -3,22 +3,23 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input, ToggleSwitch } from "@plane/ui";
 // types
-import { IInstance } from "types/instance";
+import { IInstance, IInstanceAdmin } from "types/instance";
 // hooks
 import useToast from "hooks/use-toast";
 import { useMobxStore } from "lib/mobx/store-provider";
 
 export interface IInstanceGeneralForm {
   instance: IInstance;
+  instanceAdmins: IInstanceAdmin[];
 }
 
 export interface GeneralFormValues {
   instance_name: string;
-  // is_telemetry_enabled: boolean;
+  is_telemetry_enabled: boolean;
 }
 
 export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
-  const { instance } = props;
+  const { instance, instanceAdmins } = props;
   // store
   const { instance: instanceStore } = useMobxStore();
   // toast
@@ -31,7 +32,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
   } = useForm<GeneralFormValues>({
     defaultValues: {
       instance_name: instance.instance_name,
-      // is_telemetry_enabled: instance.is_telemetry_enabled,
+      is_telemetry_enabled: instance.is_telemetry_enabled,
     },
   });
 
@@ -52,7 +53,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
 
   return (
     <>
-      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-8 w-full">
+      <div className="grid grid-col grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-center justify-between gap-8 w-full">
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Name of instance</h4>
           <Controller
@@ -75,20 +76,20 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
         </div>
 
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Admin Email</h4>
+          <h4 className="text-sm">Admin email</h4>
           <Input
-            id="primary_email"
-            name="primary_email"
+            id="email"
+            name="email"
             type="email"
-            value={instance.primary_email}
-            placeholder="Admin Email"
+            value={instanceAdmins[0].user_detail.email ?? ""}
+            placeholder="Admin email"
             className="w-full cursor-not-allowed !text-custom-text-400"
             disabled
           />
         </div>
 
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Instance Id</h4>
+          <h4 className="text-sm">Instance ID</h4>
           <Input
             id="instance_id"
             name="instance_id"
@@ -100,7 +101,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
         </div>
       </div>
 
-      {/* <div className="flex items-center gap-12 pt-4">
+      <div className="flex items-center gap-12 pt-4">
         <div>
           <div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</div>
           <div className="text-custom-text-300 font-normal text-xs">
@@ -114,10 +115,10 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
             render={({ field: { value, onChange } }) => <ToggleSwitch value={value} onChange={onChange} size="sm" />}
           />
         </div>
-      </div> */}
+      </div>
 
       <div className="flex items-center py-1">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button variant="primary" size="md" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save Changes"}
         </Button>
       </div>
diff --git a/web/components/instance/google-config-form.tsx b/web/components/instance/google-config-form.tsx
index 5637b76fc..0e0f80316 100644
--- a/web/components/instance/google-config-form.tsx
+++ b/web/components/instance/google-config-form.tsx
@@ -89,37 +89,6 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
             </a>
           </p>
         </div>
-        <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Client Secret</h4>
-          <Controller
-            control={control}
-            name="GOOGLE_CLIENT_SECRET"
-            render={({ field: { value, onChange, ref } }) => (
-              <Input
-                id="GOOGLE_CLIENT_SECRET"
-                name="GOOGLE_CLIENT_SECRET"
-                type="text"
-                value={value}
-                onChange={onChange}
-                ref={ref}
-                hasError={Boolean(errors.GOOGLE_CLIENT_SECRET)}
-                placeholder="GOCShX-ADp4cI0kPqav1gGCBg5bE02E"
-                className="rounded-md font-medium w-full"
-              />
-            )}
-          />
-          <p className="text-xs text-custom-text-400">
-            Your client secret should also be in your Google API Console.{" "}
-            <a
-              href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
-              target="_blank"
-              className="text-custom-primary-100 hover:underline"
-              rel="noreferrer"
-            >
-              Learn more
-            </a>
-          </p>
-        </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Origin URL</h4>
           <Button
diff --git a/web/components/instance/image-config-form.tsx b/web/components/instance/image-config-form.tsx
index b8a111cf9..c7a875d68 100644
--- a/web/components/instance/image-config-form.tsx
+++ b/web/components/instance/image-config-form.tsx
@@ -52,7 +52,7 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
   return (
     <>
       <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-1 max-w-md">
           <h4 className="text-sm">Access key from your Unsplash account</h4>
           <Controller
             control={control}
diff --git a/web/components/instance/sidebar-dropdown.tsx b/web/components/instance/sidebar-dropdown.tsx
index 83ab60e7c..9bbdd2a12 100644
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // components
 import { Menu, Transition } from "@headlessui/react";
 // icons
-import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react";
+import { Cog, LogIn, LogOut, Settings } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -61,20 +61,20 @@ export const InstanceSidebarDropdown = observer(() => {
   };
 
   return (
-    <div className="flex items-center gap-x-2 gap-y-2 px-4 pt-3 pb-2 mb-2 border border-custom-sidebar-border-200">
+    <div className="flex items-center gap-x-5 gap-y-2 px-4 py-3.5 max-h-[3.75rem] border-b border-custom-sidebar-border-200">
       <div className="w-full h-full truncate">
         <div
           className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${
             sidebarCollapsed ? "justify-center" : ""
           }`}
         >
-          <div className={`flex-shrink-0 flex items-center justify-center h-7 w-7 rounded bg-custom-sidebar-background-80`}>
-            <UserCog2 className="h-6 w-6 text-custom-text-200" />
+          <div className="flex-shrink-0 flex items-center justify-center h-7 w-7  rounded bg-custom-sidebar-background-80">
+            <Cog className="h-5 w-5 text-custom-text-200" />
           </div>
 
           {!sidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow text-custom-text-200 font-medium text-base truncate">God Mode</h4>
+              <h4 className="grow text-custom-text-200 font-medium text-base truncate">Instance admin</h4>
               <Tooltip position="bottom-left" tooltipContent="Exit God Mode">
                 <div className="flex-shrink-0">
                   <Link href={`/${redirectWorkspaceSlug}`}>
diff --git a/web/components/instance/sidebar-menu.tsx b/web/components/instance/sidebar-menu.tsx
index 07389a1c5..141555193 100644
--- a/web/components/instance/sidebar-menu.tsx
+++ b/web/components/instance/sidebar-menu.tsx
@@ -16,9 +16,9 @@ const INSTANCE_ADMIN_LINKS = [
   },
   {
     Icon: Mail,
-    name: "Email",
+    name: "Mail",
     description: "Set up emails to your users",
-    href: `/god-mode/email`,
+    href: `/god-mode/mail`,
   },
   {
     Icon: Lock,
@@ -28,7 +28,7 @@ const INSTANCE_ADMIN_LINKS = [
   },
   {
     Icon: BrainCog,
-    name: "Artificial intelligence",
+    name: "OpenAI",
     description: "Configure your OpenAI creds",
     href: `/god-mode/ai`,
   },
@@ -48,7 +48,7 @@ export const InstanceAdminSidebarMenu = () => {
   const router = useRouter();
 
   return (
-    <div className="h-full overflow-y-auto w-full cursor-pointer space-y-3 p-4">
+    <div className="flex flex-col gap-2.5 py-6 px-4 h-full w-full overflow-y-auto">
       {INSTANCE_ADMIN_LINKS.map((item, index) => {
         const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;
 
@@ -75,7 +75,7 @@ export const InstanceAdminSidebarMenu = () => {
                       </span>
                       <span
                         className={`text-[10px] ${
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-300"
+                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
                         }`}
                       >
                         {item.description}
diff --git a/web/layouts/admin-layout/header.tsx b/web/layouts/admin-layout/header.tsx
index 1a0b8241a..a88756cb7 100644
--- a/web/layouts/admin-layout/header.tsx
+++ b/web/layouts/admin-layout/header.tsx
@@ -14,7 +14,7 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
   const { title } = props;
 
   return (
-    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.4rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         {title && (
           <div>
diff --git a/web/layouts/admin-layout/layout.tsx b/web/layouts/admin-layout/layout.tsx
index 4943bdabc..cfe178e97 100644
--- a/web/layouts/admin-layout/layout.tsx
+++ b/web/layouts/admin-layout/layout.tsx
@@ -20,7 +20,7 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
             <InstanceAdminSidebar />
             <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
               <InstanceAdminHeader />
-              <div className="h-full w-full overflow-hidden">
+              <div className="h-full w-full overflow-hidden px-10 py-12">
                 <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
                   <>{children}</>
                 </div>
diff --git a/web/pages/god-mode/ai.tsx b/web/pages/god-mode/ai.tsx
index 0cd0df47f..b7807fc37 100644
--- a/web/pages/god-mode/ai.tsx
+++ b/web/pages/god-mode/ai.tsx
@@ -23,7 +23,7 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <div className="flex flex-col gap-8 my-8 mx-12">
+    <div className="flex flex-col gap-8">
       <div className="pb-3 mb-2 border-b border-custom-border-100">
         <div className="text-custom-text-100 font-medium text-xl pb-1">AI features for all your workspaces</div>
         <div className="text-custom-text-300 font-normal text-sm">
diff --git a/web/pages/god-mode/authorization.tsx b/web/pages/god-mode/authorization.tsx
index 1e3f4f4f6..c36c96140 100644
--- a/web/pages/god-mode/authorization.tsx
+++ b/web/pages/god-mode/authorization.tsx
@@ -65,7 +65,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
   };
 
   return (
-    <div className="flex flex-col gap-8 my-8 mx-12">
+    <div className="flex flex-col gap-8">
       <div className="pb-3 mb-2 border-b border-custom-border-100">
         <div className="text-custom-text-100 font-medium text-xl pb-1">Single sign-on and OAuth</div>
         <div className="text-custom-text-300 font-normal text-sm">
diff --git a/web/pages/god-mode/image.tsx b/web/pages/god-mode/image.tsx
index 57223e81d..dbcfe20e8 100644
--- a/web/pages/god-mode/image.tsx
+++ b/web/pages/god-mode/image.tsx
@@ -21,7 +21,7 @@ const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <div className="flex flex-col gap-8 my-8 mx-12 w-4/5">
+    <div className="flex flex-col gap-8">
       <div className="pb-3 mb-2 border-b border-custom-border-100">
         <div className="text-custom-text-100 font-medium text-xl pb-1">Third-party image libraries</div>
         <div className="text-custom-text-300 font-normal text-sm">
diff --git a/web/pages/god-mode/index.tsx b/web/pages/god-mode/index.tsx
index 7c203d9ad..a42b56c54 100644
--- a/web/pages/god-mode/index.tsx
+++ b/web/pages/god-mode/index.tsx
@@ -15,13 +15,14 @@ import { InstanceGeneralForm } from "components/instance";
 const InstanceAdminPage: NextPageWithLayout = observer(() => {
   // store
   const {
-    instance: { fetchInstanceInfo, instance },
+    instance: { fetchInstanceInfo, instance, fetchInstanceAdmins, instanceAdmins },
   } = useMobxStore();
 
   useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
 
   return (
-    <div className="flex flex-col gap-8 my-8 mx-12">
+    <div className="flex flex-col gap-8 h-full w-full">
       <div className="pb-3 mb-2 border-b border-custom-border-100">
         <div className="text-custom-text-100 font-medium text-xl pb-1">ID your instance easily</div>
         <div className="text-custom-text-300 font-normal text-sm">
@@ -29,8 +30,8 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
           will find your license key here.
         </div>
       </div>
-      {instance ? (
-        <InstanceGeneralForm instance={instance} />
+      {instance && instanceAdmins ? (
+        <InstanceGeneralForm instance={instance} instanceAdmins={instanceAdmins} />
       ) : (
         <Loader className="space-y-4">
           <Loader.Item height="50px" />
diff --git a/web/pages/god-mode/email.tsx b/web/pages/god-mode/mail.tsx
similarity index 87%
rename from web/pages/god-mode/email.tsx
rename to web/pages/god-mode/mail.tsx
index 989cffe66..0c28f2294 100644
--- a/web/pages/god-mode/email.tsx
+++ b/web/pages/god-mode/mail.tsx
@@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
 // components
 import { InstanceEmailForm } from "components/instance/email-form";
 
-const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
+const InstanceAdminMailPage: NextPageWithLayout = observer(() => {
   // store
   const {
     instance: { fetchInstanceConfigurations, formattedConfig },
@@ -21,7 +21,7 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <div className="flex flex-col gap-8 my-8 mx-12 w-4/5">
+    <div className="flex flex-col gap-8">
       <div className="pb-3 mb-2 border-b border-custom-border-100">
         <div className="text-custom-text-100 font-medium text-xl pb-1">Secure emails from your own instance</div>
         <div className="text-custom-text-300 font-normal text-sm">
@@ -47,8 +47,8 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
   );
 });
 
-InstanceAdminEmailPage.getLayout = function getLayout(page: ReactElement) {
+InstanceAdminMailPage.getLayout = function getLayout(page: ReactElement) {
   return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
 };
 
-export default InstanceAdminEmailPage;
+export default InstanceAdminMailPage;
diff --git a/web/services/instance.service.ts b/web/services/instance.service.ts
index b9937f2bf..6c1eb3556 100644
--- a/web/services/instance.service.ts
+++ b/web/services/instance.service.ts
@@ -2,7 +2,12 @@ import { APIService } from "services/api.service";
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // types
-import type { IFormattedInstanceConfiguration, IInstance, IInstanceConfiguration } from "types/instance";
+import type {
+  IFormattedInstanceConfiguration,
+  IInstance,
+  IInstanceAdmin,
+  IInstanceConfiguration,
+} from "types/instance";
 
 export class InstanceService extends APIService {
   constructor() {
@@ -17,14 +22,20 @@ export class InstanceService extends APIService {
       });
   }
 
-  async updateInstanceInfo(
-    data: Partial<IInstance>
-  ): Promise<IInstance> {
+  async getInstanceAdmins(): Promise<IInstanceAdmin[]> {
+    return this.get("/api/licenses/instances/admins/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
     return this.patch("/api/licenses/instances/", data)
-    .then((response) => response?.data)
-    .catch((error) => {
-      throw error?.response?.data;
-    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
   }
 
   async getInstanceConfigurations() {
@@ -39,9 +50,9 @@ export class InstanceService extends APIService {
     data: Partial<IFormattedInstanceConfiguration>
   ): Promise<IInstanceConfiguration[]> {
     return this.patch("/api/licenses/instances/configurations/", data)
-    .then((response) => response?.data)
-    .catch((error) => {
-      throw error?.response?.data;
-    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
   }
 }
diff --git a/web/store/instance/instance.store.ts b/web/store/instance/instance.store.ts
index a2cf0c185..644128e68 100644
--- a/web/store/instance/instance.store.ts
+++ b/web/store/instance/instance.store.ts
@@ -2,7 +2,7 @@ import { observable, action, computed, makeObservable, runInAction } from "mobx"
 // store
 import { RootStore } from "../root";
 // types
-import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration } from "types/instance";
+import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "types/instance";
 // services
 import { InstanceService } from "services/instance.service";
 
@@ -11,11 +11,13 @@ export interface IInstanceStore {
   error: any | null;
   // issues
   instance: IInstance | null;
+  instanceAdmins: IInstanceAdmin[] | null;
   configurations: IInstanceConfiguration[] | null;
   // computed
   formattedConfig: IFormattedInstanceConfiguration | null;
   // action
   fetchInstanceInfo: () => Promise<IInstance>;
+  fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
   updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
   fetchInstanceConfigurations: () => Promise<any>;
   updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
@@ -25,6 +27,7 @@ export class InstanceStore implements IInstanceStore {
   loader: boolean = false;
   error: any | null = null;
   instance: IInstance | null = null;
+  instanceAdmins: IInstanceAdmin[] | null = null;
   configurations: IInstanceConfiguration[] | null = null;
   // service
   instanceService;
@@ -36,11 +39,13 @@ export class InstanceStore implements IInstanceStore {
       loader: observable.ref,
       error: observable.ref,
       instance: observable.ref,
+      instanceAdmins: observable.ref,
       configurations: observable.ref,
       // computed
       formattedConfig: computed,
       // actions
       fetchInstanceInfo: action,
+      fetchInstanceAdmins: action,
       updateInstanceInfo: action,
       fetchInstanceConfigurations: action,
       updateInstanceConfigurations: action,
@@ -79,6 +84,22 @@ export class InstanceStore implements IInstanceStore {
     }
   };
 
+  /**
+   * fetch instance admins from API
+   */
+  fetchInstanceAdmins = async () => {
+    try {
+      const instanceAdmins = await this.instanceService.getInstanceAdmins();
+      runInAction(() => {
+        this.instanceAdmins = instanceAdmins;
+      });
+      return instanceAdmins;
+    } catch (error) {
+      console.log("Error while fetching the instance admins");
+      throw error;
+    }
+  };
+
   /**
    * update instance info
    * @param data
diff --git a/web/types/instance.d.ts b/web/types/instance.d.ts
index 0b9852797..b97f9cd7e 100644
--- a/web/types/instance.d.ts
+++ b/web/types/instance.d.ts
@@ -2,7 +2,6 @@ import { IUserLite } from "./users";
 
 export interface IInstance {
   id: string;
-  primary_owner_details: IUserLite;
   created_at: string;
   updated_at: string;
   instance_name: string;
@@ -11,14 +10,12 @@ export interface IInstance {
   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;
 }
 
 export interface IInstanceConfiguration {
@@ -31,6 +28,18 @@ export interface IInstanceConfiguration {
   updated_by: string | null;
 }
 
-export interface IFormattedInstanceConfiguration{
+export interface IFormattedInstanceConfiguration {
   [key: string]: string;
 }
+
+export interface IInstanceAdmin {
+  created_at: string;
+  created_by: string;
+  id: string;
+  instance: string;
+  role: string;
+  updated_at: string;
+  updated_by: string;
+  user: string;
+  user_detail: IUserLite;
+}