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

[WEB-2431] chore: profile settings page UI improvement (#5838)

Browse source 
* [WEB-2431] chore: timezone and language management.

* chore: remove project level timezone changes.

* chore: minor UI improvement.

* chore: minor improvements
This commit is contained in:
Prateek Shourya 2024-10-17 17:06:22 +05:30 • committed by GitHub
parent e581ac890e
commit 173b49b4cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 1466 additions and 803 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/types/src/project/projects.d.ts vendored
View file

@ -54,6 +54,7 @@ export interface IProject {
updated_by: string; updated_by: string;
workspace: IWorkspace | string; workspace: IWorkspace | string;
workspace_detail: IWorkspaceLite; workspace_detail: IWorkspaceLite;
timezone: string;
} }
export interface IProjectLite { export interface IProjectLite {

416
web/app/profile/page.tsx
View file

@ -6,14 +6,23 @@ import { Controller, useForm } from "react-hook-form";
import { ChevronDown, CircleUserRound } from "lucide-react"; import { ChevronDown, CircleUserRound } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import type { IUser } from "@plane/types"; import type { IUser } from "@plane/types";
import { Button, CustomSelect, CustomSearchSelect, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui"; import {
Button,
CustomSelect,
CustomSearchSelect,
Input,
TOAST_TYPE,
setPromiseToast,
setToast,
Tooltip,
} from "@plane/ui";
// components // components
import { DeactivateAccountModal } from "@/components/account"; import { DeactivateAccountModal } from "@/components/account";
import { LogoSpinner } from "@/components/common"; import { LogoSpinner } from "@/components/common";
import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core"; import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
import { ProfileSettingContentWrapper } from "@/components/profile"; import { ProfileSettingContentWrapper } from "@/components/profile";
// constants // constants
import { TIME_ZONES } from "@/constants/timezones"; import { TIME_ZONES, TTimezone } from "@/constants/timezones";
import { USER_ROLES } from "@/constants/workspace"; import { USER_ROLES } from "@/constants/workspace";
// helpers // helpers
import { getFileURL } from "@/helpers/file.helper"; import { getFileURL } from "@/helpers/file.helper";
@ -107,10 +116,20 @@ const ProfileSettingsPage = observer(() => {
}); });
}; };
const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
if (!timezone) return undefined;
return (
<div className="flex gap-1.5">
<span className="text-custom-text-400">{timezone.gmtOffset}</span>
<span className="text-custom-text-200">{timezone.name}</span>
</div>
);
};
const timeZoneOptions = TIME_ZONES.map((timeZone) => ({ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
value: timeZone.value, value: timeZone.value,
query: timeZone.label + " " + timeZone.value, query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
content: timeZone.label, content: getTimeZoneLabel(timeZone),
})); }));
if (!currentUser) if (!currentUser)
@ -143,14 +162,14 @@ const ProfileSettingsPage = observer(() => {
/> />
<DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} /> <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full flex-col gap-8"> <div className="flex w-full flex-col gap-6">
<div className="relative h-44 w-full"> <div className="relative h-44 w-full">
<img <img
src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"} src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
className="h-44 w-full rounded-lg object-cover" className="h-44 w-full rounded-lg object-cover"
alt={currentUser?.first_name ?? "Cover image"} alt={currentUser?.first_name ?? "Cover image"}
/> />
<div className="absolute -bottom-6 left-8 flex items-end justify-between"> <div className="absolute -bottom-6 left-6 flex items-end justify-between">
<div className="flex gap-3"> <div className="flex gap-3">
<div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90"> <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-custom-background-90">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}> <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
@ -173,7 +192,6 @@ const ProfileSettingsPage = observer(() => {
</div> </div>
</div> </div>
</div> </div>
<div className="absolute bottom-3 right-3 flex"> <div className="absolute bottom-3 right-3 flex">
<Controller <Controller
control={control} control={control}
@ -190,201 +208,207 @@ const ProfileSettingsPage = observer(() => {
/> />
</div> </div>
</div> </div>
<div className="item-center mt-6 flex justify-between">
<div className="item-center mt-4 flex justify-between md:px-8">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="item-center flex text-lg font-semibold text-custom-text-100"> <div className="item-center flex text-lg font-medium text-custom-text-200">
<span>{`${watch("first_name")} ${watch("last_name")}`}</span> <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
</div> </div>
<span className="text-sm tracking-tight">{watch("email")}</span> <span className="text-sm text-custom-text-300 tracking-tight">{watch("email")}</span>
</div> </div>
{/* <Link href={`/profile/${currentUser.id}`}>
<span className="flex item-center gap-1 text-sm text-custom-primary-100 underline font-medium">
<ExternalLink className="h-4 w-4" />
Activity Overview
</span>
</Link> */}
</div> </div>
<div className="flex flex-col gap-2">
<div className="grid grid-cols-1 gap-6 md:px-8 lg:grid-cols-2 2xl:grid-cols-3 pb-8"> <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm"> <h4 className="text-sm font-medium text-custom-text-200">
First name<span className="text-red-500">*</span> First name<span className="text-red-500">*</span>
</h4> </h4>
<Controller <Controller
control={control} control={control}
name="first_name" name="first_name"
rules={{ rules={{
required: "First name is required.", required: "Please enter first name",
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<Input <Input
id="first_name" id="first_name"
name="first_name" name="first_name"
type="text" type="text"
value={value} value={value}
onChange={onChange} onChange={onChange}
ref={ref} ref={ref}
hasError={Boolean(errors.first_name)} hasError={Boolean(errors.first_name)}
placeholder="Enter your first name" placeholder="Enter your first name"
className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`} className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
maxLength={24} maxLength={24}
autoComplete="on" autoComplete="on"
/> />
)}
/>
{errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">Last name</h4>
<Controller
control={control}
name="last_name"
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name"
className="w-full rounded-md"
maxLength={24}
autoComplete="on"
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Display name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 character long.";
if (value.replace(/\s/g, "").length > 20)
return "Display name must be less than 20 characters long.";
return true;
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors?.display_name)}
placeholder="Enter your display name"
className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
maxLength={24}
/>
)}
/>
{errors?.display_name && (
<span className="text-xs text-red-500">{errors?.display_name?.message}</span>
)} )}
/> </div>
{errors.first_name && <span className="text-xs text-red-500">Please enter first name</span>} <div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Email<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="email"
rules={{
required: "Email is required.",
}}
render={({ field: { value, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email"
className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
errors.email ? "border-red-500" : ""
}`}
autoComplete="on"
disabled
/>
)}
/>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm font-medium text-custom-text-200">
Role<span className="text-red-500">*</span>
</h4>
<Controller
name="role"
control={control}
rules={{ required: "Role is required." }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
</div> </div>
</div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-2 pt-4">
<h4 className="text-sm">Last name</h4> <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
<div className="flex flex-col gap-1">
<Controller <h4 className="text-sm font-medium text-custom-text-200">
control={control} Timezone<span className="text-red-500">*</span>
name="last_name" </h4>
render={({ field: { value, onChange, ref } }) => ( <Controller
<Input name="user_timezone"
id="last_name" control={control}
name="last_name" rules={{ required: "Please select a timezone" }}
type="text" render={({ field: { value, onChange } }) => (
value={value} <CustomSearchSelect
onChange={onChange} value={value}
ref={ref} label={
hasError={Boolean(errors.last_name)} value
placeholder="Enter your last name" ? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
className="w-full rounded-md" : "Select a timezone"
maxLength={24} }
autoComplete="on" options={timeZoneOptions}
/> onChange={onChange}
)} buttonClassName={errors.user_timezone ? "border-red-500" : ""}
/> className="rounded-md border-[0.5px] !border-custom-border-200"
</div> optionsClassName="w-72"
input
<div className="flex flex-col gap-1"> />
<h4 className="text-sm"> )}
Email<span className="text-red-500">*</span> />
</h4> {errors.user_timezone && <span className="text-xs text-red-500">{errors.user_timezone.message}</span>}
<Controller </div>
control={control} <Tooltip tooltipContent="Coming soon" position="bottom">
name="email" <div className="flex flex-col gap-1">
rules={{ <h4 className="text-sm font-medium text-custom-text-200">Language</h4>
required: "Email is required.", <CustomSearchSelect
}} value="English (US)"
render={({ field: { value, ref } }) => ( label="English (US)"
<Input options={[]}
id="email" onChange={() => {}}
name="email" className="rounded-md bg-custom-background-90"
type="email" input
value={value}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email"
className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
errors.email ? "border-red-500" : ""
}`}
autoComplete="on"
disabled disabled
/> />
)} </div>
/> </Tooltip>
</div> </div>
<div className="flex items-center justify-between pt-6 pb-8">
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Role<span className="text-red-500">*</span>
</h4>
<Controller
name="role"
control={control}
rules={{ required: "Role is required." }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-full"
input
>
{USER_ROLES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>
{item.label}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a role</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Display name<span className="text-red-500">*</span>
</h4>
<Controller
control={control}
name="display_name"
rules={{
required: "Display name is required.",
validate: (value) => {
if (value.trim().length < 1) return "Display name can't be empty.";
if (value.split(" ").length > 1) return "Display name can't have two consecutive spaces.";
if (value.replace(/\s/g, "").length < 1)
return "Display name must be at least 1 characters long.";
if (value.replace(/\s/g, "").length > 20)
return "Display name must be less than 20 characters long.";
return true;
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="display_name"
name="display_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors?.display_name)}
placeholder="Enter your display name"
className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
maxLength={24}
/>
)}
/>
{errors?.display_name && <span className="text-xs text-red-500">{errors?.display_name?.message}</span>}
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">
Timezone<span className="text-red-500">*</span>
</h4>
<Controller
name="user_timezone"
control={control}
rules={{ required: "Time zone is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? (TIME_ZONES.find((t) => t.value === value)?.label ?? value) : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
buttonClassName={errors.user_timezone ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
input
/>
)}
/>
{errors.role && <span className="text-xs text-red-500">Please select a time zone</span>}
</div>
<div className="flex items-center justify-between py-2">
<Button variant="primary" type="submit" loading={isLoading}> <Button variant="primary" type="submit" loading={isLoading}>
{isLoading ? "Saving..." : "Save changes"} {isLoading ? "Saving..." : "Save changes"}
</Button> </Button>
@ -392,11 +416,11 @@ const ProfileSettingsPage = observer(() => {
</div> </div>
</div> </div>
</form> </form>
<Disclosure as="div" className="border-t border-custom-border-100 md:px-8"> <Disclosure as="div" className="border-t border-custom-border-100">
{({ open }) => ( {({ open }) => (
<> <>
<Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4"> <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
<span className="text-lg tracking-tight">Deactivate account</span> <span className="text-lg font-medium tracking-tight">Deactivate account</span>
<ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} /> <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
</Disclosure.Button> </Disclosure.Button>
<Transition <Transition
@ -430,8 +454,4 @@ const ProfileSettingsPage = observer(() => {
); );
}); });
// ProfileSettingsPage.getLayout = function getLayout(page: ReactElement) {
// return <ProfileSettingsLayout>{page}</ProfileSettingsLayout>;
// };
export default ProfileSettingsPage; export default ProfileSettingsPage;

55
web/core/components/project/form.tsx
View file

@ -16,6 +16,7 @@ import {
CustomEmojiIconPicker, CustomEmojiIconPicker,
EmojiIconPickerTypes, EmojiIconPickerTypes,
Tooltip, Tooltip,
// CustomSearchSelect,
} from "@plane/ui"; } from "@plane/ui";
// components // components
import { Logo } from "@/components/common"; import { Logo } from "@/components/common";
@ -24,6 +25,7 @@ import { ImagePickerPopover } from "@/components/core";
import { PROJECT_UPDATED } from "@/constants/event-tracker"; import { PROJECT_UPDATED } from "@/constants/event-tracker";
import { NETWORK_CHOICES } from "@/constants/project"; import { NETWORK_CHOICES } from "@/constants/project";
// helpers // helpers
// import { TTimezone, TIME_ZONES } from "@/constants/timezones";
import { renderFormattedDate } from "@/helpers/date-time.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper";
import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper"; import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
import { getFileURL } from "@/helpers/file.helper"; import { getFileURL } from "@/helpers/file.helper";
@ -65,6 +67,21 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
}, },
}); });
// derived values // derived values
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
// const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
// if (!timezone) return undefined;
// return (
// <div className="flex gap-1.5">
// <span className="text-custom-text-400">{timezone.gmtOffset}</span>
// <span className="text-custom-text-200">{timezone.name}</span>
// </div>
// );
// };
// const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
// value: timeZone.value,
// query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
// content: getTimeZoneLabel(timeZone),
// }));
const coverImage = watch("cover_image_url"); const coverImage = watch("cover_image_url");
useEffect(() => { useEffect(() => {
@ -76,12 +93,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [project, projectId]); }, [project, projectId]);
// handlers
const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target; const { value } = event.target;
const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, ""); const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
const formattedValue = alphanumericValue.toUpperCase(); const formattedValue = alphanumericValue.toUpperCase();
setValue("identifier", formattedValue); setValue("identifier", formattedValue);
}; };
const handleUpdateChange = async (payload: Partial<IProject>) => { const handleUpdateChange = async (payload: Partial<IProject>) => {
if (!workspaceSlug || !project) return; if (!workspaceSlug || !project) return;
return updateProject(workspaceSlug.toString(), project.id, payload) return updateProject(workspaceSlug.toString(), project.id, payload)
@ -115,6 +135,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
}); });
}); });
}; };
const onSubmit = async (formData: IProject) => { const onSubmit = async (formData: IProject) => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
setIsLoading(true); setIsLoading(true);
@ -125,6 +146,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
description: formData.description, description: formData.description,
cover_image_url: formData.cover_image_url, cover_image_url: formData.cover_image_url,
logo_props: formData.logo_props, logo_props: formData.logo_props,
// timezone: formData.timezone,
}; };
if (project.identifier !== formData.identifier) if (project.identifier !== formData.identifier)
@ -139,7 +161,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
setIsLoading(false); setIsLoading(false);
}, 300); }, 300);
}; };
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
@ -267,8 +288,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
)} )}
/> />
</div> </div>
<div className="flex w-full justify-between gap-10"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="flex w-1/2 flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Project ID</h4> <h4 className="text-sm">Project ID</h4>
<div className="relative"> <div className="relative">
<Controller <Controller
@ -316,14 +337,13 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
<>{errors?.identifier?.message}</> <>{errors?.identifier?.message}</>
</span> </span>
</div> </div>
<div className="flex w-1/2 flex-col gap-1"> <div className="flex flex-col gap-1">
<h4 className="text-sm">Network</h4> <h4 className="text-sm">Network</h4>
<Controller <Controller
name="network" name="network"
control={control} control={control}
render={({ field: { value, onChange } }) => { render={({ field: { value, onChange } }) => {
const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value); const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value);
return ( return (
<CustomSelect <CustomSelect
value={value} value={value}
@ -361,6 +381,31 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
}} }}
/> />
</div> </div>
{/* <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
<h4 className="text-sm">Project Timezone</h4>
<Controller
name="timezone"
control={control}
rules={{ required: "Please select a timezone" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={
value
? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
: "Select a timezone"
}
options={timeZoneOptions}
onChange={onChange}
buttonClassName={errors.timezone ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
optionsClassName="w-72"
input
/>
)}
/>
{errors.timezone && <span className="text-xs text-red-500">{errors.timezone.message}</span>}
</div> */}
</div> </div>
<div className="flex items-center justify-between py-2"> <div className="flex items-center justify-between py-2">
<> <>

1797
web/core/constants/timezones.ts
View file

File diff suppressed because it is too large Load diff