thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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 GitHub
parent 2bf7e63625
commit 2d04917951
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 140 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
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,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>

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;

35
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;
})
.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;
});
}
}

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

17
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 {
@ -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;
}