diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx index 24f14a661..2cc087eda 100644 --- a/web/components/cycles/form.tsx +++ b/web/components/cycles/form.tsx @@ -97,7 +97,7 @@ export const CycleForm: React.FC = (props) => { id="cycle_description" name="description" placeholder="Description..." - className="h-24 w-full resize-none text-sm" + className="!h-24 w-full resize-none text-sm" hasError={Boolean(errors?.description)} value={value} onChange={onChange} @@ -135,18 +135,12 @@ export const CycleForm: React.FC = (props) => { -
+
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx index aca1b1dcf..bc325d95e 100644 --- a/web/components/issues/form.tsx +++ b/web/components/issues/form.tsx @@ -226,10 +226,9 @@ export const IssueForm: FC = observer((props) => { reset({ ...defaultValues, - project: projectId, ...initialData, }); - }, [setFocus, initialData, projectId, reset]); + }, [setFocus, initialData, reset]); // update projectId in form when projectId changes useEffect(() => { @@ -629,8 +628,8 @@ export const IssueForm: FC = observer((props) => { ? "Updating Issue..." : "Update Issue" : isSubmitting - ? "Adding Issue..." - : "Add Issue"} + ? "Adding Issue..." + : "Add Issue"}
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx index f1a7d19d7..788607690 100644 --- a/web/components/issues/issue-layouts/kanban/properties.tsx +++ b/web/components/issues/issue-layouts/kanban/properties.tsx @@ -124,7 +124,7 @@ export const KanBanProperties: React.FC = observer((props) => value={issue?.start_date || null} onChange={(date: string) => handleStartDate(date)} disabled={isReadOnly} - placeHolder="Start date" + type="start_date" /> )} @@ -134,7 +134,7 @@ export const KanBanProperties: React.FC = observer((props) => value={issue?.target_date || null} onChange={(date: string) => handleTargetDate(date)} disabled={isReadOnly} - placeHolder="Target date" + type="target_date" /> )} diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx index 92835c5ab..8b6f54010 100644 --- a/web/components/issues/issue-layouts/list/properties.tsx +++ b/web/components/issues/issue-layouts/list/properties.tsx @@ -108,7 +108,7 @@ export const ListProperties: FC = observer((props) => { value={issue?.start_date || null} onChange={(date: string) => handleStartDate(date)} disabled={isReadonly} - placeHolder="Start date" + type="start_date" /> )} @@ -118,7 +118,7 @@ export const ListProperties: FC = observer((props) => { value={issue?.target_date || null} onChange={(date: string) => handleTargetDate(date)} disabled={isReadonly} - placeHolder="Target date" + type="target_date" /> )} diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx index e1623ed5d..b53f1c215 100644 --- a/web/components/issues/issue-layouts/properties/assignee.tsx +++ b/web/components/issues/issue-layouts/properties/assignee.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; import { usePopper } from "react-popper"; import { Combobox } from "@headlessui/react"; -import { Check, ChevronDown, Search, User2 } from "lucide-react"; +import { Check, ChevronDown, CircleUser, Search } from "lucide-react"; // ui import { Avatar, AvatarGroup, Tooltip } from "@plane/ui"; // types @@ -110,8 +110,8 @@ export const IssuePropertyAssignee: React.FC = observer( })} ) : ( - - + + )} @@ -140,7 +140,7 @@ export const IssuePropertyAssignee: React.FC = observer( ref={setReferenceElement} type="button" className={`flex w-full items-center justify-between gap-1 text-xs ${ - disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" + disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer" } ${buttonClassName}`} onClick={() => !projectMembers && getWorkspaceMembers()} > diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx index 10a8d14bf..43e4ae5eb 100644 --- a/web/components/issues/issue-layouts/properties/date.tsx +++ b/web/components/issues/issue-layouts/properties/date.tsx @@ -2,7 +2,7 @@ import React from "react"; // headless ui import { Popover } from "@headlessui/react"; // lucide icons -import { Calendar, X } from "lucide-react"; +import { CalendarCheck2, CalendarClock, X } from "lucide-react"; // react date picker import DatePicker from "react-datepicker"; // mobx @@ -18,11 +18,24 @@ export interface IIssuePropertyDate { value: any; onChange: (date: any) => void; disabled?: boolean; - placeHolder?: string; + type: "start_date" | "target_date"; } +const DATE_OPTIONS = { + start_date: { + key: "start_date", + placeholder: "Start date", + icon: CalendarClock, + }, + target_date: { + key: "target_date", + placeholder: "Target date", + icon: CalendarCheck2, + }, +}; + export const IssuePropertyDate: React.FC = observer((props) => { - const { value, onChange, disabled, placeHolder } = props; + const { value, onChange, disabled, type } = props; const dropdownBtn = React.useRef(null); const dropdownOptions = React.useRef(null); @@ -31,6 +44,8 @@ export const IssuePropertyDate: React.FC = observer((props) useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions); + const dateOptionDetails = DATE_OPTIONS[type]; + return ( {({ open }) => { @@ -49,10 +64,10 @@ export const IssuePropertyDate: React.FC = observer((props) }`} >
- + {value && ( <> - +
{value}
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx index f1b27e1cf..54236846d 100644 --- a/web/components/issues/issue-layouts/properties/labels.tsx +++ b/web/components/issues/issue-layouts/properties/labels.tsx @@ -6,7 +6,7 @@ import { usePopper } from "react-popper"; // components import { Combobox } from "@headlessui/react"; import { Tooltip } from "@plane/ui"; -import { Check, ChevronDown, Search } from "lucide-react"; +import { Check, ChevronDown, Search, Tags } from "lucide-react"; // types import { Placement } from "@popperjs/core"; import { RootStore } from "store/root"; @@ -25,6 +25,7 @@ export interface IIssuePropertyLabels { placement?: Placement; maxRender?: number; noLabelBorder?: boolean; + placeholderText?: string; } export const IssuePropertyLabels: React.FC = observer((props) => { @@ -41,6 +42,7 @@ export const IssuePropertyLabels: React.FC = observer((pro placement, maxRender = 2, noLabelBorder = false, + placeholderText, } = props; const { @@ -144,11 +146,12 @@ export const IssuePropertyLabels: React.FC = observer((pro ) ) : (
- Select labels + + {placeholderText}
)}
@@ -171,8 +174,8 @@ export const IssuePropertyLabels: React.FC = observer((pro disabled ? "cursor-not-allowed text-custom-text-200" : value.length <= maxRender - ? "cursor-pointer" - : "cursor-pointer hover:bg-custom-background-80" + ? "cursor-pointer" + : "cursor-pointer hover:bg-custom-background-80" } ${buttonClassName}`} onClick={() => !storeLabels && fetchLabels()} > diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx index e2fda3c48..14c89022a 100644 --- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx @@ -31,10 +31,10 @@ export const SpreadsheetLabelColumn: React.FC = (props) => { onChange={(data) => onChange({ labels: data })} className="h-full w-full" buttonClassName="px-2.5 h-full" - noLabelBorder hideDropdownArrow maxRender={1} disabled={disabled} + placeholderText="Select labels" /> {isExpanded && diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx index 1cd8bf56e..6aed0aac5 100644 --- a/web/components/issues/select/project.tsx +++ b/web/components/issues/select/project.tsx @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import type { FieldError } from "react-hook-form"; // mobx store @@ -23,9 +22,6 @@ export const IssueProjectSelect: React.FC = observer((p const { value, onChange } = props; const [query, setQuery] = useState(""); - const router = useRouter(); - const { workspaceSlug } = router.query; - const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); @@ -33,13 +29,13 @@ export const IssueProjectSelect: React.FC = observer((p placement: "bottom-start", }); - const { project: projectStore } = useMobxStore(); + const { + project: { joinedProjects }, + } = useMobxStore(); - const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined; + const selectedProject = joinedProjects?.find((i) => i.id === value); - const selectedProject = projects?.find((i) => i.id === value); - - const options = projects?.map((project) => ({ + const options = joinedProjects?.map((project) => ({ value: project.id, query: project.name, content: ( @@ -61,8 +57,8 @@ export const IssueProjectSelect: React.FC = observer((p {selectedProject.emoji ? renderEmoji(selectedProject.emoji) : selectedProject.icon_prop - ? renderEmoji(selectedProject.icon_prop) - : null} + ? renderEmoji(selectedProject.icon_prop) + : null}
{selectedProject.identifier}
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx index 3b7b3e833..d7e00148e 100644 --- a/web/components/issues/view-select/due-date.tsx +++ b/web/components/issues/view-select/due-date.tsx @@ -1,7 +1,7 @@ // ui import { CustomDatePicker } from "components/ui"; import { Tooltip } from "@plane/ui"; -import { CalendarDays } from "lucide-react"; +import { CalendarCheck } from "lucide-react"; // helpers import { findHowManyDaysLeft, @@ -51,8 +51,8 @@ export const ViewDueDateSelect: React.FC = ({ issue.target_date === null ? "" : issue.target_date < new Date().toISOString() - ? "text-red-600" - : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400" + ? "text-red-600" + : findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400" }`} > = ({ > {issue.target_date ? ( <> - + {areYearsEqual ? renderShortDate(issue.target_date ?? "", "_ _") @@ -76,7 +76,7 @@ export const ViewDueDateSelect: React.FC = ({ ) : ( <> - + Due Date )} diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx index b39b54b5b..c1408f015 100644 --- a/web/components/issues/view-select/start-date.tsx +++ b/web/components/issues/view-select/start-date.tsx @@ -1,7 +1,7 @@ // ui import { CustomDatePicker } from "components/ui"; import { Tooltip } from "@plane/ui"; -import { CalendarDays } from "lucide-react"; +import { CalendarClock } from "lucide-react"; // helpers import { renderShortDate, renderShortDateWithYearFormat, renderShortMonthDate } from "helpers/date-time.helper"; // types @@ -55,7 +55,7 @@ export const ViewStartDateSelect: React.FC = ({ > {issue?.start_date ? ( <> - + {areYearsEqual ? renderShortDate(issue?.start_date, "_ _") @@ -64,7 +64,7 @@ export const ViewStartDateSelect: React.FC = ({ ) : ( <> - + Start Date )} diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts index 00a59eddb..07e7547db 100644 --- a/web/constants/spreadsheet.ts +++ b/web/constants/spreadsheet.ts @@ -1,6 +1,6 @@ import { TIssueOrderByOptions } from "types"; import { LayersIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui"; -import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip } from "lucide-react"; +import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarClock, CalendarCheck } from "lucide-react"; import { FC } from "react"; import { ISvgIcons } from "@plane/ui/src/icons/type"; @@ -36,7 +36,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: { ascendingOrderTitle: "New", descendingOrderKey: "target_date", descendingOrderTitle: "Old", - icon: CalendarDays, + icon: CalendarCheck, }, estimate: { title: "Estimate", @@ -68,7 +68,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: { ascendingOrderTitle: "New", descendingOrderKey: "start_date", descendingOrderTitle: "Old", - icon: CalendarDays, + icon: CalendarClock, }, state: { title: "State",