github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: instance admins endpoint added and ui/ux improvement (#2895)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/instance/email-form.tsx
View File

@ -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,6 +131,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
<div className="flex flex-col gap-1">
<h4 className="text-sm">Password</h4>
<div className="relative">
<Controller
control={control}
name="EMAIL_HOST_PASSWORD"
@ -136,7 +139,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
<Input
id="EMAIL_HOST_PASSWORD"
name="EMAIL_HOST_PASSWORD"
type="password"
type={showPassword ? "text" : "password"}
value={value}
onChange={onChange}
ref={ref}
@ -146,11 +149,27 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
/>
)}
/>
{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>

29
web/components/instance/general-form.tsx
View File

@ -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>

31
web/components/instance/google-config-form.tsx
View File

@ -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

2
web/components/instance/image-config-form.tsx
View File

@ -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}

10
web/components/instance/sidebar-dropdown.tsx
View File

@ -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}`}>

10
web/components/instance/sidebar-menu.tsx
View File

@ -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}

2
web/layouts/admin-layout/header.tsx
View File

@ -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>

2
web/layouts/admin-layout/layout.tsx
View File

@ -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>

2
web/pages/god-mode/ai.tsx
View File

@ -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">

2
web/pages/god-mode/authorization.tsx
View File

@ -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">

2
web/pages/god-mode/image.tsx
View File

@ -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">

9
web/pages/god-mode/index.tsx
View File

@ -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" />

8
web/pages/god-mode/email.tsx → web/pages/god-mode/mail.tsx
View File

@ -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;

23
web/services/instance.service.ts
View File

@ -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;
})
});
}
async getInstanceConfigurations() {
@ -42,6 +53,6 @@ export class InstanceService extends APIService {
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
})
});
}
}

23
web/store/instance/instance.store.ts
View File

@ -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

15
web/types/instance.d.ts vendored
View File

@ -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 {
@ -34,3 +31,15 @@ export interface IInstanceConfiguration {
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;
}