From 487e961df18a8697e4b61b42f4316e9dd8e3db4e Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 21 Feb 2024 18:26:41 +0530 Subject: [PATCH] [WEB-394]: Added a description to project network options (#3717) * chore: project access specifier description added * chore: project access specifier description added to the project settings form * chore: remove fullstop * fix: dropdown width --- packages/ui/src/dropdowns/custom-select.tsx | 8 +-- .../core/filters/date-filter-select.tsx | 4 +- .../modules/sidebar-select/select-status.tsx | 4 +- .../project/create-project-modal.tsx | 20 +++---- web/components/project/form.tsx | 57 +++++++++++++------ web/constants/project.ts | 9 ++- 6 files changed, 65 insertions(+), 37 deletions(-) diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx index 0fa183cb2..37608ea8d 100644 --- a/packages/ui/src/dropdowns/custom-select.tsx +++ b/packages/ui/src/dropdowns/custom-select.tsx @@ -122,7 +122,7 @@ const Option = (props: ICustomSelectItemProps) => { value={value} className={({ active }) => cn( - "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200", + "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200 flex items-center justify-between gap-2", { "bg-custom-background-80": active, }, @@ -131,10 +131,10 @@ const Option = (props: ICustomSelectItemProps) => { } > {({ selected }) => ( -
-
{children}
+ <> + {children} {selected && } -
+ )} ); diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx index 2585e2f95..9bb10f800 100644 --- a/web/components/core/filters/date-filter-select.tsx +++ b/web/components/core/filters/date-filter-select.tsx @@ -51,10 +51,10 @@ export const DateFilterSelect: React.FC = ({ title, value, onChange }) => > {dueDateRange.map((option, index) => ( - <> +
{option.icon} {title} {option.name} - +
))} diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx index 0eb60ebb2..b8c337fd4 100644 --- a/web/components/modules/sidebar-select/select-status.tsx +++ b/web/components/modules/sidebar-select/select-status.tsx @@ -46,10 +46,10 @@ export const SidebarStatusSelect: React.FC = ({ control, submitChanges, w > {MODULE_STATUS.map((option) => ( - <> +
{option.label} - +
))} diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx index db0c284f2..83589795e 100644 --- a/web/components/project/create-project-modal.tsx +++ b/web/components/project/create-project-modal.tsx @@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; import { X } from "lucide-react"; // hooks -import { useEventTracker, useProject, useUser, useWorkspace } from "hooks/store"; +import { useEventTracker, useProject, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Button, CustomSelect, Input, TextArea } from "@plane/ui"; @@ -66,7 +66,6 @@ export const CreateProjectModal: FC = observer((props) => { const { membership: { currentWorkspaceRole }, } = useUser(); - const { currentWorkspace } = useWorkspace(); const { addProjectToFavorites, createProject } = useProject(); // states const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true); @@ -160,7 +159,7 @@ export const CreateProjectModal: FC = observer((props) => { payload: { ...payload, state: "FAILED", - } + }, }); }); }); @@ -365,13 +364,14 @@ export const CreateProjectModal: FC = observer((props) => { tabIndex={4} > {NETWORK_CHOICES.map((network) => ( - - - {network.label} + +
+ +
+

{network.label}

+

{network.description}

+
+
))} diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx index 58515d030..267103dc8 100644 --- a/web/components/project/form.tsx +++ b/web/components/project/form.tsx @@ -132,7 +132,7 @@ export const ProjectDetailsForm: FC = (props) => { }, 300); }; const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network); - const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network")); + return (
@@ -269,23 +269,44 @@ export const ProjectDetailsForm: FC = (props) => { ( - - {NETWORK_CHOICES.map((network) => ( - - {network.label} - - ))} - - )} + render={({ field: { value, onChange } }) => { + const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value); + + return ( + + {selectedNetwork ? ( + <> + + {selectedNetwork.label} + + ) : ( + Select network + )} +
+ } + buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md" + input + disabled={!isAdmin} + // optionsClassName="w-full" + > + {NETWORK_CHOICES.map((network) => ( + +
+ +
+

{network.label}

+

{network.description}

+
+
+ + ))} + + ); + }} /> diff --git a/web/constants/project.ts b/web/constants/project.ts index f9819c780..9e7bdee9e 100644 --- a/web/constants/project.ts +++ b/web/constants/project.ts @@ -11,15 +11,22 @@ export enum EUserProjectRoles { ADMIN = 20, } -export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: LucideIcon }[] = [ +export const NETWORK_CHOICES: { + key: 0 | 2; + label: string; + description: string; + icon: LucideIcon; +}[] = [ { key: 0, label: "Private", + description: "Accessible only by invite", icon: Lock, }, { key: 2, label: "Public", + description: "Anyone in the workspace can join", icon: Globe2, }, ];