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
This commit is contained in:
Anmol Singh Bhatia 2023-11-27 17:15:11 +05:30 committed by sriram veeraghanta
parent f79bd9df60
commit 6e940399cb
16 changed files with 140 additions and 109 deletions

View File

@ -1,7 +1,8 @@
import { FC } from "react"; import { FC, useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// ui // ui
import { Button, Input, ToggleSwitch } from "@plane/ui"; import { Button, Input, ToggleSwitch } from "@plane/ui";
import { Eye, EyeOff } from "lucide-react";
// types // types
import { IFormattedInstanceConfiguration } from "types/instance"; import { IFormattedInstanceConfiguration } from "types/instance";
// hooks // hooks
@ -24,6 +25,7 @@ export interface EmailFormValues {
export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => { export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
const { config } = props; const { config } = props;
const [showPassword, setShowPassword] = useState(false);
// store // store
const { instance: instanceStore } = useMobxStore(); const { instance: instanceStore } = useMobxStore();
// toast // toast
@ -62,7 +64,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
return ( 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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Host</h4> <h4 className="text-sm">Host</h4>
<Controller <Controller
@ -105,7 +107,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
/> />
</div> </div>
</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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Username</h4> <h4 className="text-sm">Username</h4>
<Controller <Controller
@ -129,28 +131,45 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Password</h4> <h4 className="text-sm">Password</h4>
<Controller <div className="relative">
control={control} <Controller
name="EMAIL_HOST_PASSWORD" control={control}
render={({ field: { value, onChange, ref } }) => ( name="EMAIL_HOST_PASSWORD"
<Input render={({ field: { value, onChange, ref } }) => (
id="EMAIL_HOST_PASSWORD" <Input
name="EMAIL_HOST_PASSWORD" id="EMAIL_HOST_PASSWORD"
type="password" name="EMAIL_HOST_PASSWORD"
value={value} type={showPassword ? "text" : "password"}
onChange={onChange} value={value}
ref={ref} onChange={onChange}
hasError={Boolean(errors.EMAIL_HOST_PASSWORD)} ref={ref}
placeholder="Password" hasError={Boolean(errors.EMAIL_HOST_PASSWORD)}
className="rounded-md font-medium w-full" 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> </div>
<div className="w-full lg:w-1/2 flex flex-col px-1 gap-y-8"> <div className="w-full flex flex-col px-1 gap-y-8 max-w-md">
<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="grow">
<div className="text-custom-text-100 font-medium text-sm"> <div className="text-custom-text-100 font-medium text-sm">
Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"} Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
@ -174,7 +193,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
</div> </div>
</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="grow">
<div className="text-custom-text-100 font-medium text-sm"> <div className="text-custom-text-100 font-medium text-sm">
Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"} Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
@ -201,7 +220,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
</div> </div>
</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}> <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
{isSubmitting ? "Saving..." : "Save Changes"} {isSubmitting ? "Saving..." : "Save Changes"}
</Button> </Button>

View File

@ -3,22 +3,23 @@ import { Controller, useForm } from "react-hook-form";
// ui // ui
import { Button, Input, ToggleSwitch } from "@plane/ui"; import { Button, Input, ToggleSwitch } from "@plane/ui";
// types // types
import { IInstance } from "types/instance"; import { IInstance, IInstanceAdmin } from "types/instance";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
export interface IInstanceGeneralForm { export interface IInstanceGeneralForm {
instance: IInstance; instance: IInstance;
instanceAdmins: IInstanceAdmin[];
} }
export interface GeneralFormValues { export interface GeneralFormValues {
instance_name: string; instance_name: string;
// is_telemetry_enabled: boolean; is_telemetry_enabled: boolean;
} }
export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => { export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
const { instance } = props; const { instance, instanceAdmins } = props;
// store // store
const { instance: instanceStore } = useMobxStore(); const { instance: instanceStore } = useMobxStore();
// toast // toast
@ -31,7 +32,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
} = useForm<GeneralFormValues>({ } = useForm<GeneralFormValues>({
defaultValues: { defaultValues: {
instance_name: instance.instance_name, 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 ( 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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Name of instance</h4> <h4 className="text-sm">Name of instance</h4>
<Controller <Controller
@ -75,20 +76,20 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Admin Email</h4> <h4 className="text-sm">Admin email</h4>
<Input <Input
id="primary_email" id="email"
name="primary_email" name="email"
type="email" type="email"
value={instance.primary_email} value={instanceAdmins[0].user_detail.email ?? ""}
placeholder="Admin Email" placeholder="Admin email"
className="w-full cursor-not-allowed !text-custom-text-400" className="w-full cursor-not-allowed !text-custom-text-400"
disabled disabled
/> />
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Instance Id</h4> <h4 className="text-sm">Instance ID</h4>
<Input <Input
id="instance_id" id="instance_id"
name="instance_id" name="instance_id"
@ -100,7 +101,7 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
</div> </div>
</div> </div>
{/* <div className="flex items-center gap-12 pt-4"> <div className="flex items-center gap-12 pt-4">
<div> <div>
<div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</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"> <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" />} render={({ field: { value, onChange } }) => <ToggleSwitch value={value} onChange={onChange} size="sm" />}
/> />
</div> </div>
</div> */} </div>
<div className="flex items-center py-1"> <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"} {isSubmitting ? "Saving..." : "Save Changes"}
</Button> </Button>
</div> </div>

View File

@ -89,37 +89,6 @@ export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) =
</a> </a>
</p> </p>
</div> </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"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Origin URL</h4> <h4 className="text-sm">Origin URL</h4>
<Button <Button

View File

@ -52,7 +52,7 @@ export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) =>
return ( 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">
<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> <h4 className="text-sm">Access key from your Unsplash account</h4>
<Controller <Controller
control={control} control={control}

View File

@ -7,7 +7,7 @@ import { mutate } from "swr";
// components // components
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
// icons // icons
import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react"; import { Cog, LogIn, LogOut, Settings } from "lucide-react";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
@ -61,20 +61,20 @@ export const InstanceSidebarDropdown = observer(() => {
}; };
return ( 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="w-full h-full truncate">
<div <div
className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${ className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${
sidebarCollapsed ? "justify-center" : "" sidebarCollapsed ? "justify-center" : ""
}`} }`}
> >
<div className={`flex-shrink-0 flex items-center justify-center h-7 w-7 rounded bg-custom-sidebar-background-80`}> <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" /> <Cog className="h-5 w-5 text-custom-text-200" />
</div> </div>
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<div className="flex w-full gap-2"> <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"> <Tooltip position="bottom-left" tooltipContent="Exit God Mode">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Link href={`/${redirectWorkspaceSlug}`}> <Link href={`/${redirectWorkspaceSlug}`}>

View File

@ -16,9 +16,9 @@ const INSTANCE_ADMIN_LINKS = [
}, },
{ {
Icon: Mail, Icon: Mail,
name: "Email", name: "Mail",
description: "Set up emails to your users", description: "Set up emails to your users",
href: `/god-mode/email`, href: `/god-mode/mail`,
}, },
{ {
Icon: Lock, Icon: Lock,
@ -28,7 +28,7 @@ const INSTANCE_ADMIN_LINKS = [
}, },
{ {
Icon: BrainCog, Icon: BrainCog,
name: "Artificial intelligence", name: "OpenAI",
description: "Configure your OpenAI creds", description: "Configure your OpenAI creds",
href: `/god-mode/ai`, href: `/god-mode/ai`,
}, },
@ -48,7 +48,7 @@ export const InstanceAdminSidebarMenu = () => {
const router = useRouter(); const router = useRouter();
return ( 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) => { {INSTANCE_ADMIN_LINKS.map((item, index) => {
const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href; const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;
@ -75,7 +75,7 @@ export const InstanceAdminSidebarMenu = () => {
</span> </span>
<span <span
className={`text-[10px] ${ 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} {item.description}

View File

@ -14,7 +14,7 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
const { title } = props; const { title } = props;
return ( 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"> <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
{title && ( {title && (
<div> <div>

View File

@ -20,7 +20,7 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
<InstanceAdminSidebar /> <InstanceAdminSidebar />
<main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100"> <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
<InstanceAdminHeader /> <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"> <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
<>{children}</> <>{children}</>
</div> </div>

View File

@ -23,7 +23,7 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations()); useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return ( 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="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-100 font-medium text-xl pb-1">AI features for all your workspaces</div>
<div className="text-custom-text-300 font-normal text-sm"> <div className="text-custom-text-300 font-normal text-sm">

View File

@ -65,7 +65,7 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
}; };
return ( 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="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-100 font-medium text-xl pb-1">Single sign-on and OAuth</div>
<div className="text-custom-text-300 font-normal text-sm"> <div className="text-custom-text-300 font-normal text-sm">

View File

@ -21,7 +21,7 @@ const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations()); useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return ( 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="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-100 font-medium text-xl pb-1">Third-party image libraries</div>
<div className="text-custom-text-300 font-normal text-sm"> <div className="text-custom-text-300 font-normal text-sm">

View File

@ -15,13 +15,14 @@ import { InstanceGeneralForm } from "components/instance";
const InstanceAdminPage: NextPageWithLayout = observer(() => { const InstanceAdminPage: NextPageWithLayout = observer(() => {
// store // store
const { const {
instance: { fetchInstanceInfo, instance }, instance: { fetchInstanceInfo, instance, fetchInstanceAdmins, instanceAdmins },
} = useMobxStore(); } = useMobxStore();
useSWR("INSTANCE_INFO", () => fetchInstanceInfo()); useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
return ( 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="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-100 font-medium text-xl pb-1">ID your instance easily</div>
<div className="text-custom-text-300 font-normal text-sm"> <div className="text-custom-text-300 font-normal text-sm">
@ -29,8 +30,8 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
will find your license key here. will find your license key here.
</div> </div>
</div> </div>
{instance ? ( {instance && instanceAdmins ? (
<InstanceGeneralForm instance={instance} /> <InstanceGeneralForm instance={instance} instanceAdmins={instanceAdmins} />
) : ( ) : (
<Loader className="space-y-4"> <Loader className="space-y-4">
<Loader.Item height="50px" /> <Loader.Item height="50px" />

View File

@ -12,7 +12,7 @@ import { Loader } from "@plane/ui";
// components // components
import { InstanceEmailForm } from "components/instance/email-form"; import { InstanceEmailForm } from "components/instance/email-form";
const InstanceAdminEmailPage: NextPageWithLayout = observer(() => { const InstanceAdminMailPage: NextPageWithLayout = observer(() => {
// store // store
const { const {
instance: { fetchInstanceConfigurations, formattedConfig }, instance: { fetchInstanceConfigurations, formattedConfig },
@ -21,7 +21,7 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations()); useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
return ( 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="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-100 font-medium text-xl pb-1">Secure emails from your own instance</div>
<div className="text-custom-text-300 font-normal text-sm"> <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>; return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
}; };
export default InstanceAdminEmailPage; export default InstanceAdminMailPage;

View File

@ -2,7 +2,12 @@ import { APIService } from "services/api.service";
// helpers // helpers
import { API_BASE_URL } from "helpers/common.helper"; import { API_BASE_URL } from "helpers/common.helper";
// types // types
import type { IFormattedInstanceConfiguration, IInstance, IInstanceConfiguration } from "types/instance"; import type {
IFormattedInstanceConfiguration,
IInstance,
IInstanceAdmin,
IInstanceConfiguration,
} from "types/instance";
export class InstanceService extends APIService { export class InstanceService extends APIService {
constructor() { constructor() {
@ -17,14 +22,20 @@ export class InstanceService extends APIService {
}); });
} }
async updateInstanceInfo( async getInstanceAdmins(): Promise<IInstanceAdmin[]> {
data: Partial<IInstance> return this.get("/api/licenses/instances/admins/")
): Promise<IInstance> { .then((response) => response.data)
.catch((error) => {
throw error;
});
}
async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
return this.patch("/api/licenses/instances/", data) return this.patch("/api/licenses/instances/", data)
.then((response) => response?.data) .then((response) => response?.data)
.catch((error) => { .catch((error) => {
throw error?.response?.data; throw error?.response?.data;
}) });
} }
async getInstanceConfigurations() { async getInstanceConfigurations() {
@ -39,9 +50,9 @@ export class InstanceService extends APIService {
data: Partial<IFormattedInstanceConfiguration> data: Partial<IFormattedInstanceConfiguration>
): Promise<IInstanceConfiguration[]> { ): Promise<IInstanceConfiguration[]> {
return this.patch("/api/licenses/instances/configurations/", data) return this.patch("/api/licenses/instances/configurations/", data)
.then((response) => response?.data) .then((response) => response?.data)
.catch((error) => { .catch((error) => {
throw error?.response?.data; throw error?.response?.data;
}) });
} }
} }

View File

@ -2,7 +2,7 @@ import { observable, action, computed, makeObservable, runInAction } from "mobx"
// store // store
import { RootStore } from "../root"; import { RootStore } from "../root";
// types // types
import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration } from "types/instance"; import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration, IInstanceAdmin } from "types/instance";
// services // services
import { InstanceService } from "services/instance.service"; import { InstanceService } from "services/instance.service";
@ -11,11 +11,13 @@ export interface IInstanceStore {
error: any | null; error: any | null;
// issues // issues
instance: IInstance | null; instance: IInstance | null;
instanceAdmins: IInstanceAdmin[] | null;
configurations: IInstanceConfiguration[] | null; configurations: IInstanceConfiguration[] | null;
// computed // computed
formattedConfig: IFormattedInstanceConfiguration | null; formattedConfig: IFormattedInstanceConfiguration | null;
// action // action
fetchInstanceInfo: () => Promise<IInstance>; fetchInstanceInfo: () => Promise<IInstance>;
fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>; updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
fetchInstanceConfigurations: () => Promise<any>; fetchInstanceConfigurations: () => Promise<any>;
updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>; updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
@ -25,6 +27,7 @@ export class InstanceStore implements IInstanceStore {
loader: boolean = false; loader: boolean = false;
error: any | null = null; error: any | null = null;
instance: IInstance | null = null; instance: IInstance | null = null;
instanceAdmins: IInstanceAdmin[] | null = null;
configurations: IInstanceConfiguration[] | null = null; configurations: IInstanceConfiguration[] | null = null;
// service // service
instanceService; instanceService;
@ -36,11 +39,13 @@ export class InstanceStore implements IInstanceStore {
loader: observable.ref, loader: observable.ref,
error: observable.ref, error: observable.ref,
instance: observable.ref, instance: observable.ref,
instanceAdmins: observable.ref,
configurations: observable.ref, configurations: observable.ref,
// computed // computed
formattedConfig: computed, formattedConfig: computed,
// actions // actions
fetchInstanceInfo: action, fetchInstanceInfo: action,
fetchInstanceAdmins: action,
updateInstanceInfo: action, updateInstanceInfo: action,
fetchInstanceConfigurations: action, fetchInstanceConfigurations: action,
updateInstanceConfigurations: 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 * update instance info
* @param data * @param data

View File

@ -2,7 +2,6 @@ import { IUserLite } from "./users";
export interface IInstance { export interface IInstance {
id: string; id: string;
primary_owner_details: IUserLite;
created_at: string; created_at: string;
updated_at: string; updated_at: string;
instance_name: string; instance_name: string;
@ -11,14 +10,12 @@ export interface IInstance {
license_key: string | null; license_key: string | null;
api_key: string; api_key: string;
version: string; version: string;
primary_email: string;
last_checked_at: string; last_checked_at: string;
namespace: string | null; namespace: string | null;
is_telemetry_enabled: boolean; is_telemetry_enabled: boolean;
is_support_required: boolean; is_support_required: boolean;
created_by: string | null; created_by: string | null;
updated_by: string | null; updated_by: string | null;
primary_owner: string;
} }
export interface IInstanceConfiguration { export interface IInstanceConfiguration {
@ -31,6 +28,18 @@ export interface IInstanceConfiguration {
updated_by: string | null; updated_by: string | null;
} }
export interface IFormattedInstanceConfiguration{ export interface IFormattedInstanceConfiguration {
[key: string]: string; [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;
}