[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

@@ -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 }) => (
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">{children}</div>
+        <>
+          {children}
           {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-        </div>
+        </>
       )}
     </Listbox.Option>
   );

web/components/core/filters/date-filter-select.tsx

@@ -51,10 +51,10 @@ export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) =>
   >
     {dueDateRange.map((option, index) => (
       <CustomSelect.Option key={index} value={option.value}>
-        <>
+        <div className="flex items-center gap-2">
           <span>{option.icon}</span>
           {title} {option.name}
-        </>
+        </div>
       </CustomSelect.Option>
     ))}
   </CustomSelect>

web/components/modules/sidebar-select/select-status.tsx

@@ -46,10 +46,10 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
           >
             {MODULE_STATUS.map((option) => (
               <CustomSelect.Option key={option.value} value={option.value}>
-                <>
+                <div className="flex items-center gap-2">
                   <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
                   {option.label}
-                </>
+                </div>
               </CustomSelect.Option>
             ))}
           </CustomSelect>

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<Props> = 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<Props> = observer((props) => {
             payload: {
               ...payload,
               state: "FAILED",
-            }
+            },
           });
         });
       });
@@ -365,13 +364,14 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
                               tabIndex={4}
                             >
                               {NETWORK_CHOICES.map((network) => (
-                                <CustomSelect.Option
-                                  key={network.key}
-                                  value={network.key}
-                                  className="flex items-center gap-1"
-                                >
-                                  <network.icon className="h-4 w-4" />
-                                  {network.label}
+                                <CustomSelect.Option key={network.key} value={network.key}>
+                                  <div className="flex items-start gap-2">
+                                    <network.icon className="h-3.5 w-3.5" />
+                                    <div className="-mt-1">
+                                      <p>{network.label}</p>
+                                      <p className="text-xs text-custom-text-400">{network.description}</p>
+                                    </div>
+                                  </div>
                                 </CustomSelect.Option>
                               ))}
                             </CustomSelect>

web/components/project/form.tsx

@@ -132,7 +132,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     }, 300);
   };
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
-  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="relative mt-6 h-44 w-full">
@@ -269,23 +269,44 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             <Controller
               name="network"
               control={control}
-              render={({ field: { value, onChange } }) => (
-                <CustomSelect
-                  value={value}
-                  onChange={onChange}
-                  label={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) => (
-                    <CustomSelect.Option key={network.key} value={network.key}>
-                      {network.label}
-                    </CustomSelect.Option>
-                  ))}
-                </CustomSelect>
-              )}
+              render={({ field: { value, onChange } }) => {
+                const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+                return (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={
+                      <div className="flex items-center gap-1">
+                        {selectedNetwork ? (
+                          <>
+                            <selectedNetwork.icon className="h-3.5 w-3.5" />
+                            {selectedNetwork.label}
+                          </>
+                        ) : (
+                          <span className="text-custom-text-400">Select network</span>
+                        )}
+                      </div>
+                    }
+                    buttonClassName="!border-custom-border-200 !shadow-none font-medium rounded-md"
+                    input
+                    disabled={!isAdmin}
+                    // optionsClassName="w-full"
+                  >
+                    {NETWORK_CHOICES.map((network) => (
+                      <CustomSelect.Option key={network.key} value={network.key}>
+                        <div className="flex items-start gap-2">
+                          <network.icon className="h-3.5 w-3.5" />
+                          <div className="-mt-1">
+                            <p>{network.label}</p>
+                            <p className="text-xs text-custom-text-400">{network.description}</p>
+                          </div>
+                        </div>
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                );
+              }}
             />
           </div>
         </div>

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,
   },
 ];