binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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