style: project select dropdown & modals ui improvement (#2491)

* style: project select dropdown ui improvement

* style: create/update cycle modal ui improvement

* style: create/update module modal ui improvement

* fix: build error

* style: input and textarea border improvement

* cycle and module modal ui improvement

* style: cycle and module modal ui improvement

packages/ui/src/form-fields/input.tsx

@@ -28,7 +28,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       name={name}
       className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
         mode === "primary"
-          ? "rounded-md border border-custom-border-200"
+          ? "rounded-md border-[0.5px] border-custom-border-200"
           : mode === "transparent"
           ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
           : mode === "true-transparent"

packages/ui/src/form-fields/textarea.tsx

@@ -53,7 +53,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         cols={cols}
         className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
           mode === "primary"
-            ? "rounded-md border border-custom-border-200"
+            ? "rounded-md border-[0.5px] border-custom-border-200"
             : mode === "transparent"
             ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
             : ""

web/components/cycles/cycle-create-edit-modal.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // components
@@ -20,8 +20,10 @@ interface ICycleCreateEdit {
 
 export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props) => {
   const { modal, modalClose, cycle = null, onSubmit, workspaceSlug, projectId } = props;
+  const [activeProject, setActiveProject] = useState<string | null>(null);
 
-  const { cycle: cycleStore } = useMobxStore();
+  const { project: projectStore, cycle: cycleStore } = useMobxStore();
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setToastAlert } = useToast();
 
@@ -96,6 +98,27 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
       });
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!modal) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (cycle && cycle.project) {
+      setActiveProject(cycle.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, cycle, projectId, projects, modal]);
+
   return (
     <Transition.Root show={modal} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={modalClose}>
@@ -123,7 +146,13 @@ export const CycleCreateEditModal: React.FC<ICycleCreateEdit> = observer((props)
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-5">
-                <CycleForm handleFormSubmit={formSubmit} handleClose={modalClose} data={cycle} />
+                <CycleForm
+                  handleFormSubmit={formSubmit}
+                  handleClose={modalClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  data={cycle}
+                />
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/components/cycles/form.tsx

@@ -2,17 +2,20 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 import { DateSelect } from "components/ui";
+import { IssueProjectSelect } from "components/issues/select";
 // types
 import { ICycle } from "types";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
   handleClose: () => void;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
   data?: ICycle | null;
 };
 
 export const CycleForm: React.FC<Props> = (props) => {
-  const { handleFormSubmit, handleClose, data } = props;
+  const { handleFormSubmit, handleClose, projectId, setActiveProject, data } = props;
   // form data
   const {
     formState: { errors, isSubmitting },
@@ -21,6 +24,7 @@ export const CycleForm: React.FC<Props> = (props) => {
     watch,
   } = useForm<ICycle>({
     defaultValues: {
+      project: projectId,
       name: data?.name || "",
       description: data?.description || "",
       start_date: data?.start_date || null,
@@ -40,80 +44,98 @@ export const CycleForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Cycle</h3>
+        <div className="flex items-center gap-x-3">
+          <Controller
+            control={control}
+            name="project"
+            render={({ field: { value, onChange } }) => (
+              <IssueProjectSelect
+                value={value}
+                onChange={(val: string) => {
+                  onChange(val);
+                  setActiveProject(val);
+                }}
+              />
+            )}
+          />
+          <h3 className="text-xl font-medium leading-6 text-custom-text-200">{status ? "Update" : "New"} Cycle</h3>
+        </div>
         <div className="space-y-3">
-          <div>
-            <Controller
-              name="name"
-              control={control}
-              rules={{
-                required: "Name is required",
-                maxLength: {
-                  value: 255,
-                  message: "Name should be less than 255 characters",
-                },
-              }}
-              render={({ field: { value, onChange } }) => (
-                <Input
-                  id="cycle_name"
-                  name="name"
-                  type="text"
-                  placeholder="Cycle Name"
-                  className="resize-none text-xl w-full p-2"
-                  value={value}
-                  onChange={onChange}
-                  hasError={Boolean(errors?.name)}
-                />
-              )}
-            />
-          </div>
-          <div>
-            <Controller
-              name="description"
-              control={control}
-              render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="cycle_description"
-                  name="description"
-                  placeholder="Description"
-                  className="h-32 resize-none text-sm"
-                  hasError={Boolean(errors?.description)}
-                  value={value}
-                  onChange={onChange}
-                />
-              )}
-            />
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2">
+          <div className="mt-2 space-y-3">
             <div>
               <Controller
+                name="name"
                 control={control}
-                name="start_date"
+                rules={{
+                  required: "Name is required",
+                  maxLength: {
+                    value: 255,
+                    message: "Name should be less than 255 characters",
+                  },
+                }}
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="Start date"
+                  <Input
+                    id="cycle_name"
+                    name="name"
+                    type="text"
+                    placeholder="Cycle Title"
+                    className="resize-none w-full placeholder:text-sm placeholder:font-medium focus:border-blue-400"
                     value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={new Date()}
-                    maxDate={maxDate ?? undefined}
+                    inputSize="md"
+                    onChange={onChange}
+                    hasError={Boolean(errors?.name)}
                   />
                 )}
               />
             </div>
             <div>
               <Controller
+                name="description"
                 control={control}
-                name="end_date"
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
+                  <TextArea
+                    id="cycle_description"
+                    name="description"
+                    placeholder="Description..."
+                    className="h-24 w-full resize-none text-sm"
+                    hasError={Boolean(errors?.description)}
+                    value={value}
+                    onChange={onChange}
+                  />
                 )}
               />
             </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <div>
+                <Controller
+                  control={control}
+                  name="start_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect
+                      label="Start date"
+                      value={value}
+                      onChange={(val) => onChange(val)}
+                      minDate={new Date()}
+                      maxDate={maxDate ?? undefined}
+                    />
+                  )}
+                />
+              </div>
+              <div>
+                <Controller
+                  control={control}
+                  name="end_date"
+                  render={({ field: { value, onChange } }) => (
+                    <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
+                  )}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
+      <div className="flex items-center justify-end gap-2 pt-5 mt-5 border-t-[0.5px] border-custom-border-200 ">
         <Button variant="neutral-primary" onClick={handleClose}>
           Cancel
         </Button>

web/components/cycles/modal.tsx

@@ -1,10 +1,11 @@
-import { Fragment } from "react";
+import React, { useEffect, useState } from "react";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CycleForm } from "components/cycles";
 // helper
@@ -35,6 +36,10 @@ const cycleService = new CycleService();
 
 export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
   const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+
+  const { project: projectStore } = useMobxStore();
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
 
   const { setToastAlert } = useToast();
 
@@ -181,11 +186,32 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
       });
   };
 
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project) {
+      setActiveProject(data.project);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (projects && projects.length > 0 && !activeProject)
+      setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
+  }, [activeProject, data, projectId, projects, isOpen]);
+
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -195,19 +221,26 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = (props) => {
         >
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={Fragment}
+              as={React.Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
               leave="ease-in duration-200"
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <CycleForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} data={data} />
+              <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+                <CycleForm
+                  handleFormSubmit={handleFormSubmit}
+                  handleClose={handleClose}
+                  projectId={activeProject ?? ""}
+                  setActiveProject={setActiveProject}
+                  data={data}
+                />
               </Dialog.Panel>
             </Transition.Child>
           </div>