fix: instance admin layout

admin/app/ai/layout.tsx

@@ -1,9 +1,11 @@
-"use client";
-
 import { ReactNode } from "react";
-// layouts
+import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
+export const metadata: Metadata = {
+  title: "AI Settings - God Mode",
+};
+
 export default function AILayout({ children }: { children: ReactNode }) {
   return <AdminLayout>{children}</AdminLayout>;
 }

admin/app/authentication/layout.tsx

@@ -1,9 +1,11 @@
-"use client";
-
 import { ReactNode } from "react";
-// layouts
+import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
+export const metadata: Metadata = {
+  title: "Authentication Settings - God Mode",
+};
+
 export default function AuthenticationLayout({ children }: { children: ReactNode }) {
   return <AdminLayout>{children}</AdminLayout>;
 }

admin/app/email/layout.tsx

@@ -1,13 +1,15 @@
-"use client";
-
 import { ReactNode } from "react";
-// layouts
+import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 interface EmailLayoutProps {
   children: ReactNode;
 }
 
+export const metadata: Metadata = {
+  title: "Email Settings - God Mode",
+};
+
 const EmailLayout = ({ children }: EmailLayoutProps) => <AdminLayout>{children}</AdminLayout>;
 
 export default EmailLayout;

admin/app/general/form.tsx

@@ -13,7 +13,7 @@ import { ControllerInput } from "@/components/common";
 import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
-  instance: IInstance["instance"];
+  instance: IInstance;
   instanceAdmins: IInstanceAdmin[];
 }
 
@@ -26,15 +26,15 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
     handleSubmit,
     control,
     formState: { errors, isSubmitting },
-  } = useForm<Partial<IInstance["instance"]>>({
+  } = useForm<Partial<IInstance>>({
     defaultValues: {
       instance_name: instance?.instance_name,
       is_telemetry_enabled: instance?.is_telemetry_enabled,
     },
   });
 
-  const onSubmit = async (formData: Partial<IInstance["instance"]>) => {
-    const payload: Partial<IInstance["instance"]> = { ...formData };
+  const onSubmit = async (formData: Partial<IInstance>) => {
+    const payload: Partial<IInstance> = { ...formData };
 
     console.log("payload", payload);
 

admin/app/general/layout.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-// components
 import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {

admin/app/general/page.tsx

@@ -7,7 +7,7 @@ import { GeneralConfigurationForm } from "./form";
 
 function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
-  console.log("instance", instanceAdmins);
+  console.log("instance", instance);
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
@@ -19,8 +19,8 @@ function GeneralPage() {
           </div>
         </div>
         <div className="flex-grow overflow-hidden overflow-y-auto">
-          {instance?.instance && instanceAdmins && (
-            <GeneralConfigurationForm instance={instance.instance} instanceAdmins={instanceAdmins} />
+          {instance && instanceAdmins && (
+            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
           )}
         </div>
       </div>

admin/app/image/layout.tsx

@@ -1,11 +1,15 @@
 import { ReactNode } from "react";
-// layouts
+import { Metadata } from "next";
 import { AdminLayout } from "@/layouts/admin-layout";
 
 interface ImageLayoutProps {
   children: ReactNode;
 }
 
+export const metadata: Metadata = {
+  title: "Images Settings - God Mode",
+};
+
 const ImageLayout = ({ children }: ImageLayoutProps) => <AdminLayout>{children}</AdminLayout>;
 
 export default ImageLayout;

admin/app/layout.tsx

@@ -1,40 +1,20 @@
+"use client";
+
 import { ReactNode } from "react";
-import { Metadata } from "next";
-// components
-import { InstanceFailureView, InstanceSetupForm } from "@/components/instance";
+import { ThemeProvider } from "next-themes";
+import { SWRConfig } from "swr";
+// constants
+import { SWR_CONFIG } from "@/constants/swr-config";
 // helpers
 import { ASSET_PREFIX } from "@/helpers/common.helper";
-// layout
-import { DefaultLayout } from "@/layouts/default-layout";
 // lib
-import { AppProvider } from "@/lib/app-providers";
+import { InstanceProvider } from "@/lib/instance-provider";
+import { StoreProvider } from "@/lib/store-provider";
+import { UserProvider } from "@/lib/user-provider";
 // styles
 import "./globals.css";
-// services
-import { InstanceService } from "@/services/instance.service";
-
-const instanceService = new InstanceService();
-
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
-
-export default async function RootLayout({ children }: { children: ReactNode }) {
-  const instanceDetails = await instanceService.getInstanceInfo().catch(() => null);
 
+function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -45,28 +25,18 @@ export default async function RootLayout({ children }: { children: ReactNode })
         <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
       </head>
       <body className={`antialiased`}>
-        <AppProvider initialState={{ instance: instanceDetails }}>
-          {instanceDetails ? (
-            <>
-              {instanceDetails?.instance?.is_setup_done ? (
-                <>{children}</>
-              ) : (
-                <DefaultLayout>
-                  <div className="relative w-screen min-h-screen overflow-y-auto px-5 py-10 mx-auto flex justify-center items-center">
-                    <InstanceSetupForm />
-                  </div>
-                </DefaultLayout>
-              )}
-            </>
-          ) : (
-            <DefaultLayout>
-              <div className="relative w-screen min-h-[500px] overflow-y-auto px-5 mx-auto flex justify-center items-center">
-                <InstanceFailureView />
-              </div>
-            </DefaultLayout>
-          )}
-        </AppProvider>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+          <SWRConfig value={SWR_CONFIG}>
+            <StoreProvider>
+              <InstanceProvider>
+                <UserProvider>{children}</UserProvider>
+              </InstanceProvider>
+            </StoreProvider>
+          </SWRConfig>
+        </ThemeProvider>
       </body>
     </html>
   );
 }
+
+export default RootLayout;

admin/app/page.tsx

@@ -1,7 +1,26 @@
+import { Metadata } from "next";
+// components
 import { InstanceSignInForm } from "@/components/login";
 // layouts
 import { DefaultLayout } from "@/layouts/default-layout";
 
+export const metadata: Metadata = {
+  title: "Plane | Simple, extensible, open-source project management tool.",
+  description:
+    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
+  openGraph: {
+    title: "Plane | Simple, extensible, open-source project management tool.",
+    description:
+      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
+    url: "https://plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
 export default async function LoginPage() {
   return (
     <DefaultLayout>

admin/components/common/index.ts

@@ -6,3 +6,4 @@ export * from "./password-strength-meter";
 export * from "./banner";
 export * from "./empty-state";
 export * from "./logo-spinner";
+export * from "./toast";

admin/components/common/logo-spinner.tsx

@@ -11,7 +11,7 @@ export const LogoSpinner = () => {
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
+      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
     </div>
   );
 };

admin/components/common/password-strength-meter.tsx

@@ -43,7 +43,7 @@ export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
   ];
 
   return (
-    <div className="w-full p-1">
+    <div className="w-full">
       <div className="flex w-full gap-1.5">
         {bars.map((color, index) => (
           <div key={index} className={cn("w-full h-1 rounded-full", color)} />

admin/components/common/toast.tsx

@@ -0,0 +1,11 @@
+import { useTheme } from "next-themes";
+// ui
+import { Toast as ToastComponent } from "@plane/ui";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
+
+export const Toast = () => {
+  const { theme } = useTheme();
+
+  return <ToastComponent theme={resolveGeneralTheme(theme)} />;
+};

admin/components/new-user-popup.tsx

@@ -17,11 +17,11 @@ import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
 export const NewUserPopup: React.FC = observer(() => {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
-  const { instance } = useInstance();
+  const { config } = useInstance();
   // theme
   const { resolvedTheme } = nextUseTheme();
 
-  const redirectionLink = `${instance?.config?.app_base_url ? `${instance?.config?.app_base_url}/create-workspace` : `/god-mode/`}`;
+  const redirectionLink = `${config?.app_base_url ? `${config?.app_base_url}/create-workspace` : `/god-mode/`}`;
 
   if (!isNewUserPopup) return <></>;
   return (

admin/hooks/store/use-instance.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/app-providers";
+import { StoreContext } from "@/lib/store-provider";
 import { IInstanceStore } from "@/store/instance.store";
 
 export const useInstance = (): IInstanceStore => {

admin/hooks/store/use-theme.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/app-providers";
+import { StoreContext } from "@/lib/store-provider";
 import { IThemeStore } from "@/store/theme.store";
 
 export const useTheme = (): IThemeStore => {

admin/hooks/store/use-user.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 // store
-import { StoreContext } from "@/lib/app-providers";
+import { StoreContext } from "@/lib/store-provider";
 import { IUserStore } from "@/store/user.store";
 
 export const useUser = (): IUserStore => {

admin/layouts/admin-layout.tsx

@@ -2,14 +2,13 @@
 import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/navigation";
-import useSWR from "swr";
 // components
 import { InstanceSidebar } from "@/components/admin-sidebar";
 import { InstanceHeader } from "@/components/auth-header";
 import { LogoSpinner } from "@/components/common";
 import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
-import { useInstance, useUser } from "@/hooks/store";
+import { useUser } from "@/hooks/store";
 
 type TAdminLayout = {
   children: ReactNode;
@@ -19,15 +18,7 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
   const { children } = props;
   // router
   const router = useRouter();
-  // hooks
-  const { fetchInstanceAdmins } = useInstance();
-  const { fetchCurrentUser, isUserLoggedIn } = useUser();
-
-  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
-
-  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
-    shouldRetryOnError: false,
-  });
+  const { isUserLoggedIn } = useUser();
 
   useEffect(() => {
     if (isUserLoggedIn === false) {
@@ -48,8 +39,8 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
       <InstanceSidebar />
       <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
         <InstanceHeader />
-        <div className="h-full w-full overflow-hidden">{children}</div>
       </main>
+      <div className="h-full w-full overflow-hidden">{children}</div>
       <NewUserPopup />
     </div>
   );

admin/lib/app-wrapper.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { FC, ReactNode, useEffect, Suspense } from "react";
-import { observer } from "mobx-react-lite";
-import { SWRConfig } from "swr";
-// ui
-import { Toast } from "@plane/ui";
-// constants
-import { SWR_CONFIG } from "@/constants/swr-config";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-// hooks
-import { useTheme, useUser } from "@/hooks/store";
-
-interface IAppWrapper {
-  children: ReactNode;
-}
-
-export const AppWrapper: FC<IAppWrapper> = observer(({ children }) => {
-  // hooks
-  const { theme, isSidebarCollapsed, toggleSidebar } = useTheme();
-  const { currentUser } = useUser();
-
-  useEffect(() => {
-    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
-    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
-    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
-  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
-
-  return (
-    <Suspense>
-      <Toast theme={resolveGeneralTheme(theme)} />
-      <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
-    </Suspense>
-  );
-});

admin/lib/instance-provider.tsx

@@ -0,0 +1,55 @@
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common";
+import { InstanceSetupForm, InstanceFailureView } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks/store";
+// layout
+import { DefaultLayout } from "@/layouts/default-layout";
+
+type InstanceProviderProps = {
+  children: ReactNode;
+};
+
+export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { instance, error, fetchInstanceInfo } = useInstance();
+  // fetching instance details
+  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+
+  if (!instance && !error)
+    return (
+      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (error) {
+    return (
+      <DefaultLayout>
+        <div className="relative w-screen min-h-[500px] overflow-y-auto px-5 mx-auto flex justify-center items-center">
+          <InstanceFailureView />
+        </div>
+      </DefaultLayout>
+    );
+  }
+
+  if (!instance?.is_setup_done) {
+    return (
+      <DefaultLayout>
+        <div className="relative w-screen min-h-screen overflow-y-auto px-5 py-10 mx-auto flex justify-center items-center">
+          <InstanceSetupForm />
+        </div>
+      </DefaultLayout>
+    );
+  }
+
+  return <>{children}</>;
+});

admin/lib/store-provider.tsx

@@ -1,11 +1,8 @@
 "use client";
 
 import { ReactNode, createContext } from "react";
-import { ThemeProvider } from "next-themes";
 // store
 import { RootStore } from "@/store/root.store";
-// store initialization
-import { AppWrapper } from "./app-wrapper";
 
 let rootStore = new RootStore();
 
@@ -25,19 +22,13 @@ function initializeStore(initialData = {}) {
   return singletonRootStore;
 }
 
-export type AppProviderProps = {
+export type StoreProviderProps = {
   children: ReactNode;
-  initialState: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialState?: any;
 };
 
-export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
+export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
   const store = initializeStore(initialState);
-
-  return (
-    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-      <StoreContext.Provider value={store}>
-        <AppWrapper>{children}</AppWrapper>
-      </StoreContext.Provider>
-    </ThemeProvider>
-  );
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
 };

admin/lib/user-provider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// hooks
+import { useInstance, useTheme, useUser } from "@/hooks/store";
+
+interface IUserProvider {
+  children: ReactNode;
+}
+
+export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
+  // hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  const { currentUser, fetchCurrentUser } = useUser();
+  const { fetchInstanceAdmins } = useInstance();
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
+  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
+
+  return <>{children}</>;
+});

admin/services/instance.service.ts

@@ -1,5 +1,11 @@
 // types
-import type { IFormattedInstanceConfiguration, IInstance, IInstanceAdmin, IInstanceConfiguration } from "@plane/types";
+import type {
+  IFormattedInstanceConfiguration,
+  IInstance,
+  IInstanceAdmin,
+  IInstanceConfiguration,
+  IInstanceInfo,
+} from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
@@ -9,8 +15,8 @@ export class InstanceService extends APIService {
     super(API_BASE_URL);
   }
 
-  async getInstanceInfo(): Promise<IInstance> {
-    return this.get<IInstance>("/api/instances/")
+  async getInstanceInfo(): Promise<IInstanceInfo> {
+    return this.get<IInstanceInfo>("/api/instances/")
       .then((response) => response.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -25,8 +31,8 @@ export class InstanceService extends APIService {
       });
   }
 
-  async updateInstanceInfo(data: Partial<IInstance["instance"]>): Promise<IInstance["instance"]> {
-    return this.patch<Partial<IInstance["instance"]>, IInstance["instance"]>("/api/instances/", data)
+  async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
+    return this.patch<Partial<IInstance>, IInstance>("/api/instances/", data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

admin/store/instance.store.ts

@@ -1,6 +1,13 @@
 import set from "lodash/set";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
-import { IInstance, IInstanceAdmin, IInstanceConfiguration, IFormattedInstanceConfiguration } from "@plane/types";
+import {
+  IInstance,
+  IInstanceAdmin,
+  IInstanceConfiguration,
+  IFormattedInstanceConfiguration,
+  IInstanceInfo,
+  IInstanceConfig,
+} from "@plane/types";
 // helpers
 import { EInstanceStatus, TInstanceStatus } from "@/helpers";
 // services
@@ -11,16 +18,18 @@ import { RootStore } from "@/store/root.store";
 export interface IInstanceStore {
   // issues
   isLoading: boolean;
+  error: any;
   instanceStatus: TInstanceStatus | undefined;
   instance: IInstance | undefined;
+  config: IInstanceConfig | undefined;
   instanceAdmins: IInstanceAdmin[] | undefined;
   instanceConfigurations: IInstanceConfiguration[] | undefined;
   // computed
   formattedConfig: IFormattedInstanceConfiguration | undefined;
   // action
-  hydrate: (data: any) => void;
-  fetchInstanceInfo: () => Promise<IInstance | undefined>;
-  updateInstanceInfo: (data: Partial<IInstance["instance"]>) => Promise<IInstance["instance"] | undefined>;
+  hydrate: (data: IInstanceInfo) => void;
+  fetchInstanceInfo: () => Promise<IInstanceInfo | undefined>;
+  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance | undefined>;
   fetchInstanceAdmins: () => Promise<IInstanceAdmin[] | undefined>;
   fetchInstanceConfigurations: () => Promise<IInstanceConfiguration[] | undefined>;
   updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
@@ -28,8 +37,10 @@ export interface IInstanceStore {
 
 export class InstanceStore implements IInstanceStore {
   isLoading: boolean = true;
+  error: any = undefined;
   instanceStatus: TInstanceStatus | undefined = undefined;
   instance: IInstance | undefined = undefined;
+  config: IInstanceConfig | undefined = undefined;
   instanceAdmins: IInstanceAdmin[] | undefined = undefined;
   instanceConfigurations: IInstanceConfiguration[] | undefined = undefined;
   // service
@@ -39,6 +50,7 @@ export class InstanceStore implements IInstanceStore {
     makeObservable(this, {
       // observable
       isLoading: observable.ref,
+      error: observable.ref,
       instanceStatus: observable,
       instance: observable,
       instanceAdmins: observable,
@@ -57,8 +69,11 @@ export class InstanceStore implements IInstanceStore {
     this.instanceService = new InstanceService();
   }
 
-  hydrate = (data: any) => {
-    if (data) this.instance = data;
+  hydrate = (data: IInstanceInfo) => {
+    if (data) {
+      this.instance = data.instance;
+      this.config = data.config;
+    }
   };
 
   /**
@@ -80,17 +95,22 @@ export class InstanceStore implements IInstanceStore {
   fetchInstanceInfo = async () => {
     try {
       if (this.instance === undefined) this.isLoading = true;
-      const instance = await this.instanceService.getInstanceInfo();
+      this.error = undefined;
+      const instanceInfo = await this.instanceService.getInstanceInfo();
       // handling the new user popup toggle
-      if (this.instance === undefined && !instance?.instance?.workspaces_exist) this.store.theme.toggleNewUserPopup();
+      if (this.instance === undefined && !instanceInfo?.instance?.workspaces_exist)
+        this.store.theme.toggleNewUserPopup();
       runInAction(() => {
+        console.log("instanceInfo: ", instanceInfo);
         this.isLoading = false;
-        this.instance = instance;
+        this.instance = instanceInfo.instance;
+        this.config = instanceInfo.config;
       });
-      return instance;
+      return instanceInfo;
     } catch (error) {
       console.error("Error fetching the instance info");
       this.isLoading = false;
+      this.error = { message: "Failed to fetch the instance info" };
       this.instanceStatus = {
         status: EInstanceStatus.ERROR,
       };
@@ -100,10 +120,10 @@ export class InstanceStore implements IInstanceStore {
 
   /**
    * @description updating instance information
-   * @param {Partial<IInstance["instance"]>} data
+   * @param {Partial<IInstance>} data
    * @returns void
    */
-  updateInstanceInfo = async (data: Partial<IInstance["instance"]>) => {
+  updateInstanceInfo = async (data: Partial<IInstance>) => {
     try {
       const instanceResponse = await this.instanceService.updateInstanceInfo(data);
       if (instanceResponse) {

packages/types/src/instance/base.d.ts

@@ -6,47 +6,51 @@ import {
   TInstanceAuthenticationKeys,
 } from "./";
 
+export interface IInstanceInfo {
+  instance: IInstance;
+  config: IInstanceConfig;
+}
+
 export interface IInstance {
-  instance: {
-    id: string;
-    created_at: string;
-    updated_at: string;
-    instance_name: string | undefined;
-    whitelist_emails: string | undefined;
-    instance_id: string | undefined;
-    license_key: string | undefined;
-    api_key: string | undefined;
-    version: string | undefined;
-    last_checked_at: string | undefined;
-    namespace: string | undefined;
-    is_telemetry_enabled: boolean;
-    is_support_required: boolean;
-    is_activated: boolean;
-    is_setup_done: boolean;
-    is_signup_screen_visited: boolean;
-    user_count: number | undefined;
-    is_verified: boolean;
-    created_by: string | undefined;
-    updated_by: string | undefined;
-    workspaces_exist: boolean;
-  };
-  config: {
-    is_google_enabled: boolean;
-    is_github_enabled: boolean;
-    is_magic_login_enabled: boolean;
-    is_email_password_enabled: boolean;
-    github_app_name: string | undefined;
-    slack_client_id: string | undefined;
-    posthog_api_key: string | undefined;
-    posthog_host: string | undefined;
-    has_unsplash_configured: boolean;
-    has_openai_configured: boolean;
-    file_size_limit: number | undefined;
-    is_smtp_configured: boolean;
-    app_base_url: string | undefined;
-    space_base_url: string | undefined;
-    admin_base_url: string | undefined;
-  };
+  id: string;
+  created_at: string;
+  updated_at: string;
+  instance_name: string | undefined;
+  whitelist_emails: string | undefined;
+  instance_id: string | undefined;
+  license_key: string | undefined;
+  api_key: string | undefined;
+  version: string | undefined;
+  last_checked_at: string | undefined;
+  namespace: string | undefined;
+  is_telemetry_enabled: boolean;
+  is_support_required: boolean;
+  is_activated: boolean;
+  is_setup_done: boolean;
+  is_signup_screen_visited: boolean;
+  user_count: number | undefined;
+  is_verified: boolean;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+  workspaces_exist: boolean;
+}
+
+export interface IInstanceConfig {
+  is_google_enabled: boolean;
+  is_github_enabled: boolean;
+  is_magic_login_enabled: boolean;
+  is_email_password_enabled: boolean;
+  github_app_name: string | undefined;
+  slack_client_id: string | undefined;
+  posthog_api_key: string | undefined;
+  posthog_host: string | undefined;
+  has_unsplash_configured: boolean;
+  has_openai_configured: boolean;
+  file_size_limit: number | undefined;
+  is_smtp_configured: boolean;
+  app_base_url: string | undefined;
+  space_base_url: string | undefined;
+  admin_base_url: string | undefined;
 }
 
 export interface IInstanceAdmin {