From 2898765454c9ae39e7a5f4315fe2ab5c178b73ce Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Wed, 27 Dec 2023 13:30:20 +0530 Subject: [PATCH 1/9] chore: remove `Save View` option for guest/ viewer from project issues header. --- .../applied-filters/roots/project-root.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx index 6d7369bb9a2..31317366c25 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx @@ -1,29 +1,32 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; - // types import { IIssueFilterOptions } from "types"; import { EFilterType } from "store/issues/types"; +// constants +import { EUserWorkspaceRoles } from "constants/workspace"; export const ProjectAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string; }; - + // mobx stores const { projectLabel: { projectLabels }, projectState: projectStateStore, projectMember: { projectMembers }, projectIssuesFilter: { issueFilters, updateFilters }, + user: { currentProjectRole }, } = useMobxStore(); - + // derived values + const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; const userFilters = issueFilters?.filters; // filters whose value not null or empty array @@ -73,8 +76,9 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => { members={projectMembers?.map((m) => m.member)} states={projectStateStore.states?.[projectId?.toString() ?? ""]} /> - - <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} /> + {isEditingAllowed && ( + <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} /> + )} </div> ); }); From 3dae871d23424d55abac95e16522696ad3c2a5c4 Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Wed, 27 Dec 2023 13:31:33 +0530 Subject: [PATCH 2/9] chore: allow guest/ viewer to clear applied filters in project issues. --- .../filters/applied-filters/filters-list.tsx | 50 ++++++------------- .../filters/applied-filters/label.tsx | 19 +++---- .../filters/applied-filters/members.tsx | 19 +++---- .../filters/applied-filters/priority.tsx | 19 +++---- .../filters/applied-filters/project.tsx | 19 +++---- .../filters/applied-filters/state.tsx | 19 +++---- 6 files changed, 56 insertions(+), 89 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx index 7ff8056b9e1..5d1868a8ae6 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx @@ -1,5 +1,4 @@ import { observer } from "mobx-react-lite"; -import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedDateFilters, @@ -16,8 +15,6 @@ import { X } from "lucide-react"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types"; -// constants -import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { appliedFilters: IIssueFilterOptions; @@ -35,16 +32,10 @@ const dateFilters = ["start_date", "target_date"]; export const AppliedFiltersList: React.FC<Props> = observer((props) => { const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props; - const { - user: { currentProjectRole }, - } = useMobxStore(); - if (!appliedFilters) return null; if (Object.keys(appliedFilters).length === 0) return null; - const isEditingAllowed = currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; - return ( <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100"> {Object.entries(appliedFilters).map(([key, value]) => { @@ -61,7 +52,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { <div className="flex flex-wrap items-center gap-1"> {membersFilters.includes(filterKey) && ( <AppliedMembersFilters - editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter(filterKey, val)} members={members} values={value} @@ -72,7 +62,6 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "labels" && ( <AppliedLabelsFilters - editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("labels", val)} labels={labels} values={value} @@ -80,14 +69,12 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "priority" && ( <AppliedPriorityFilters - editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} /> )} {filterKey === "state" && states && ( <AppliedStateFilters - editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("state", val)} states={states} values={value} @@ -101,35 +88,30 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "project" && ( <AppliedProjectFilters - editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("project", val)} projects={projects} values={value} /> )} - {isEditingAllowed && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemoveFilter(filterKey, null)} - > - <X size={12} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemoveFilter(filterKey, null)} + > + <X size={12} strokeWidth={2} /> + </button> </div> </div> ); })} - {isEditingAllowed && ( - <button - type="button" - onClick={handleClearAllFilters} - className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" - > - Clear all - <X size={12} strokeWidth={2} /> - </button> - )} - </div> + <button + type="button" + onClick={handleClearAllFilters} + className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" + > + Clear all + <X size={12} strokeWidth={2} /> + </button> + </div> ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx index 08e7aee4458..9cec9b2f724 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx @@ -9,11 +9,10 @@ type Props = { handleRemove: (val: string) => void; labels: IIssueLabel[] | undefined; values: string[]; - editable: boolean | undefined; }; export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { - const { handleRemove, labels, values, editable } = props; + const { handleRemove, labels, values } = props; return ( <> @@ -31,15 +30,13 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { }} /> <span className="normal-case">{labelDetails.name}</span> - {editable && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(labelId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(labelId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx index 1dd61d3390b..bfa7e9a29da 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx @@ -9,11 +9,10 @@ type Props = { handleRemove: (val: string) => void; members: IUserLite[] | undefined; values: string[]; - editable: boolean | undefined; }; export const AppliedMembersFilters: React.FC<Props> = observer((props) => { - const { handleRemove, members, values, editable } = props; + const { handleRemove, members, values } = props; return ( <> @@ -26,15 +25,13 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => { <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} /> <span className="normal-case">{memberDetails.display_name}</span> - {editable && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(memberId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(memberId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx index 88b39dc0033..e00d0d829e4 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx @@ -9,11 +9,10 @@ import { TIssuePriorities } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; - editable: boolean | undefined; }; export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values, editable } = props; + const { handleRemove, values } = props; return ( <> @@ -21,15 +20,13 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} /> {priority} - {editable && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(priority)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(priority)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx index b1e17cfe3dc..01830986162 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx @@ -10,11 +10,10 @@ type Props = { handleRemove: (val: string) => void; projects: IProject[] | undefined; values: string[]; - editable: boolean | undefined; }; export const AppliedProjectFilters: React.FC<Props> = observer((props) => { - const { handleRemove, projects, values, editable } = props; + const { handleRemove, projects, values } = props; return ( <> @@ -35,15 +34,13 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => { </span> )} <span className="normal-case">{projectDetails.name}</span> - {editable && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(projectId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(projectId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx index 9cff84d9b7a..8e759250557 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx @@ -10,11 +10,10 @@ type Props = { handleRemove: (val: string) => void; states: IState[]; values: string[]; - editable: boolean | undefined; }; export const AppliedStateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, states, values, editable } = props; + const { handleRemove, states, values } = props; return ( <> @@ -27,15 +26,13 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => { <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" /> {stateDetails.name} - {editable && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} From 1023a7d9ba95050ec94632d89bd2fd28cecb4bfc Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Wed, 27 Dec 2023 17:36:26 +0530 Subject: [PATCH 3/9] chore: disable `date`, `label` property access for guests/ viewer in all project issue views. --- .../issues/issue-layouts/kanban/properties.tsx | 18 +++++++++++++++--- .../issues/issue-layouts/list/properties.tsx | 18 +++++++++++++++--- .../issues/issue-layouts/properties/date.tsx | 3 ++- .../issues/issue-layouts/properties/labels.tsx | 8 ++++++-- web/components/issues/sidebar-select/label.tsx | 4 +++- web/components/issues/view-select/due-date.tsx | 4 ++-- .../issues/view-select/start-date.tsx | 4 ++-- 7 files changed, 45 insertions(+), 14 deletions(-) diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx index 9590c90682f..e6288d62c75 100644 --- a/web/components/issues/issue-layouts/kanban/properties.tsx +++ b/web/components/issues/issue-layouts/kanban/properties.tsx @@ -166,7 +166,11 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* sub-issues */} {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && ( <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadOnly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.sub_issues_count}</div> </div> @@ -176,7 +180,11 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* attachments */} {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && ( <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadOnly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.attachment_count}</div> </div> @@ -186,7 +194,11 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* link */} {displayProperties && displayProperties?.link && !!issue?.link_count && ( <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadOnly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.link_count}</div> </div> diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx index eeff3b27393..ba8a8142f94 100644 --- a/web/components/issues/issue-layouts/list/properties.tsx +++ b/web/components/issues/issue-layouts/list/properties.tsx @@ -137,7 +137,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* sub-issues */} {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && ( <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadonly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.sub_issues_count}</div> </div> @@ -147,7 +151,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* attachments */} {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && ( <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadonly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.attachment_count}</div> </div> @@ -157,7 +165,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* link */} {displayProperties && displayProperties?.link && !!issue?.link_count && ( <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> - <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> + <div + className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ + isReadonly ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.link_count}</div> </div> diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx index cfe3481e31e..d0bb297114a 100644 --- a/web/components/issues/issue-layouts/properties/date.tsx +++ b/web/components/issues/issue-layouts/properties/date.tsx @@ -61,6 +61,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) ref={dropdownBtn} className="border-none outline-none" onClick={(e) => e.stopPropagation()} + disabled={disabled} > <Tooltip tooltipHeading={dateOptionDetails.placeholder} @@ -69,7 +70,7 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) <div className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${ disabled - ? "pointer-events-none cursor-not-allowed text-custom-text-200" + ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" }`} > diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx index 282268d7b1c..d0045c3d447 100644 --- a/web/components/issues/issue-layouts/properties/labels.tsx +++ b/web/components/issues/issue-layouts/properties/labels.tsx @@ -128,7 +128,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro ))} </> ) : ( - <div className="flex h-full flex-shrink-0 cursor-pointer items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs"> + <div + className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${ + disabled ? "cursor-not-allowed" : "cursor-pointer" + }`} + > <Tooltip position="top" tooltipHeading="Labels" @@ -147,7 +151,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro ) : ( <Tooltip position="top" tooltipHeading="Labels" tooltipContent="None"> <div - className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${ + className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${ noLabelBorder ? "" : "border-[0.5px] border-custom-border-300" }`} > diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx index ca7abd8be22..6340383e975 100644 --- a/web/components/issues/sidebar-select/label.tsx +++ b/web/components/issues/sidebar-select/label.tsx @@ -92,7 +92,9 @@ export const SidebarLabelSelect: React.FC<Props> = observer((props) => { return ( <button key={label.id} - className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs hover:border-red-500/20 hover:bg-red-500/20" + className={`group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-100 px-1 py-0.5 text-xs ${ + isNotAllowed || uneditable ? "!cursor-not-allowed" : "hover:border-red-500/20 hover:bg-red-500/20" + }`} onClick={() => { const updatedLabels = labelList?.filter((l) => l !== labelId); submitChanges({ diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx index d7e00148ecd..5b2bfb0ec53 100644 --- a/web/components/issues/view-select/due-date.tsx +++ b/web/components/issues/view-select/due-date.tsx @@ -61,9 +61,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({ className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`} customInput={ <div - className={`flex cursor-pointer items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${ + className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${ issue.target_date ? "pr-6 text-custom-text-300" : "text-custom-text-400" - }`} + } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`} > {issue.target_date ? ( <> diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx index c1408f015cd..8cfac4a6434 100644 --- a/web/components/issues/view-select/start-date.tsx +++ b/web/components/issues/view-select/start-date.tsx @@ -49,9 +49,9 @@ export const ViewStartDateSelect: React.FC<Props> = ({ handleOnOpen={handleOnOpen} customInput={ <div - className={`flex cursor-pointer items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${ + className={`flex items-center justify-center gap-2 rounded border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-200 hover:bg-custom-background-80 ${ issue?.start_date ? "pr-6 text-custom-text-300" : "text-custom-text-400" - }`} + } ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`} > {issue?.start_date ? ( <> From 03f90be188bc6b2f98a780ae22e0a29d9c59268d Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Wed, 27 Dec 2023 17:38:35 +0530 Subject: [PATCH 4/9] chore: update `Workspace Issues` -> `All Issues` header. --- web/components/headers/global-issues.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx index ef4c2b3f570..0b27bdd816d 100644 --- a/web/components/headers/global-issues.tsx +++ b/web/components/headers/global-issues.tsx @@ -95,7 +95,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => { <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" /> ) } - label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`} + label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`} /> </Breadcrumbs> </div> From 024822d54f4061eb2686d811a2b87cd0789b6b90 Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Wed, 27 Dec 2023 17:40:36 +0530 Subject: [PATCH 5/9] chore: refactor apply/ clear filter implementation in All Issues. --- .../filters/applied-filters/date.tsx | 19 +++--- .../filters/applied-filters/filters-list.tsx | 60 +++++++++++++------ .../filters/applied-filters/label.tsx | 19 +++--- .../filters/applied-filters/members.tsx | 19 +++--- .../filters/applied-filters/priority.tsx | 19 +++--- .../filters/applied-filters/project.tsx | 19 +++--- .../roots/global-view-root.tsx | 12 +++- .../filters/applied-filters/state-group.tsx | 19 +++--- .../filters/applied-filters/state.tsx | 19 +++--- .../roots/all-issue-layout-root.tsx | 12 +++- 10 files changed, 140 insertions(+), 77 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx index c1e7b8cec2c..722579e9bf3 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx @@ -11,10 +11,11 @@ import { DATE_FILTER_OPTIONS } from "constants/filters"; type Props = { handleRemove: (val: string) => void; values: string[]; + disableClearOption?: boolean; }; export const AppliedDateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values } = props; + const { handleRemove, values, disableClearOption } = props; const getDateLabel = (value: string): string => { let dateLabel = ""; @@ -40,13 +41,15 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => { {values.map((date) => ( <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <span className="normal-case">{getDateLabel(date)}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(date)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(date)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx index 5d1868a8ae6..9b7e3bab34d 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx @@ -24,13 +24,23 @@ type Props = { members?: IUserLite[] | undefined; projects?: IProject[] | undefined; states?: IState[] | undefined; + disableClearFilterOptions?: (keyof IIssueFilterOptions)[]; }; const membersFilters = ["assignees", "mentions", "created_by", "subscriber"]; const dateFilters = ["start_date", "target_date"]; export const AppliedFiltersList: React.FC<Props> = observer((props) => { - const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props; + const { + appliedFilters, + handleClearAllFilters, + handleRemoveFilter, + labels, + members, + projects, + states, + disableClearFilterOptions, + } = props; if (!appliedFilters) return null; @@ -52,16 +62,22 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { <div className="flex flex-wrap items-center gap-1"> {membersFilters.includes(filterKey) && ( <AppliedMembersFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter(filterKey, val)} members={members} values={value} /> )} {dateFilters.includes(filterKey) && ( - <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} /> + <AppliedDateFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} + handleRemove={(val) => handleRemoveFilter(filterKey, val)} + values={value} + /> )} {filterKey === "labels" && ( <AppliedLabelsFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("labels", val)} labels={labels} values={value} @@ -69,12 +85,14 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "priority" && ( <AppliedPriorityFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} /> )} {filterKey === "state" && states && ( <AppliedStateFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("state", val)} states={states} values={value} @@ -82,36 +100,42 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "state_group" && ( <AppliedStateGroupFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} /> )} {filterKey === "project" && ( <AppliedProjectFilters + disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("project", val)} projects={projects} values={value} /> )} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemoveFilter(filterKey, null)} - > - <X size={12} strokeWidth={2} /> - </button> + {!disableClearFilterOptions?.includes(filterKey) && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemoveFilter(filterKey, null)} + > + <X size={12} strokeWidth={2} /> + </button> + )} </div> </div> ); })} - <button - type="button" - onClick={handleClearAllFilters} - className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" - > - Clear all - <X size={12} strokeWidth={2} /> - </button> - </div> + {(!disableClearFilterOptions || disableClearFilterOptions.length === 0) && ( + <button + type="button" + onClick={handleClearAllFilters} + className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" + > + Clear all + <X size={12} strokeWidth={2} /> + </button> + )} + </div> ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx index 9cec9b2f724..5d300a32fce 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx @@ -9,10 +9,11 @@ type Props = { handleRemove: (val: string) => void; labels: IIssueLabel[] | undefined; values: string[]; + disableClearOption?: boolean; }; export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { - const { handleRemove, labels, values } = props; + const { handleRemove, labels, values, disableClearOption } = props; return ( <> @@ -30,13 +31,15 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { }} /> <span className="normal-case">{labelDetails.name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(labelId)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(labelId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx index bfa7e9a29da..de24d0361b2 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx @@ -9,10 +9,11 @@ type Props = { handleRemove: (val: string) => void; members: IUserLite[] | undefined; values: string[]; + disableClearOption?: boolean; }; export const AppliedMembersFilters: React.FC<Props> = observer((props) => { - const { handleRemove, members, values } = props; + const { handleRemove, members, values, disableClearOption } = props; return ( <> @@ -25,13 +26,15 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => { <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} /> <span className="normal-case">{memberDetails.display_name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(memberId)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(memberId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx index e00d0d829e4..b5f8e60fbf8 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx @@ -9,10 +9,11 @@ import { TIssuePriorities } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; + disableClearOption?: boolean; }; export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values } = props; + const { handleRemove, values, disableClearOption } = props; return ( <> @@ -20,13 +21,15 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} /> {priority} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(priority)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(priority)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx index 01830986162..3e967cb23b9 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx @@ -10,10 +10,11 @@ type Props = { handleRemove: (val: string) => void; projects: IProject[] | undefined; values: string[]; + disableClearOption?: boolean; }; export const AppliedProjectFilters: React.FC<Props> = observer((props) => { - const { handleRemove, projects, values } = props; + const { handleRemove, projects, values, disableClearOption } = props; return ( <> @@ -34,13 +35,15 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => { </span> )} <span className="normal-case">{projectDetails.name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(projectId)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(projectId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx index 543d186451d..bf76a7f5e9e 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; @@ -9,10 +10,16 @@ import { AppliedFiltersList } from "components/issues"; import { IIssueFilterOptions } from "types"; import { EFilterType } from "store/issues/types"; -export const GlobalViewsAppliedFiltersRoot = observer(() => { +type Props = { + disableClearFilterOptions?: (keyof IIssueFilterOptions)[]; +}; + +export const GlobalViewsAppliedFiltersRoot: React.FC<Props> = observer((props) => { + const { disableClearFilterOptions } = props; + // router const router = useRouter(); const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string }; - + // mobx store const { project: { workspaceProjects }, workspace: { workspaceLabels }, @@ -83,6 +90,7 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => { appliedFilters={appliedFilters ?? {}} handleClearAllFilters={handleClearAllFilters} handleRemoveFilter={handleRemoveFilter} + disableClearFilterOptions={disableClearFilterOptions} /> {/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && ( diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx index 64f95983e46..ac4ceaa0d6d 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx @@ -8,10 +8,11 @@ import { TStateGroups } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; + disableClearOption?: boolean; }; export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values } = props; + const { handleRemove, values, disableClearOption } = props; return ( <> @@ -19,13 +20,15 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => { <div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" /> {stateGroup} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateGroup)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateGroup)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx index 8e759250557..1f43613ace1 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx @@ -10,10 +10,11 @@ type Props = { handleRemove: (val: string) => void; states: IState[]; values: string[]; + disableClearOption: boolean | undefined; }; export const AppliedStateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, states, values } = props; + const { handleRemove, states, values, disableClearOption } = props; return ( <> @@ -26,13 +27,15 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => { <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" /> {stateDetails.name} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateId)} - > - <X size={10} strokeWidth={2} /> - </button> + {!disableClearOption && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx index 7ab5621b8e4..8aa75c91135 100644 --- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx @@ -110,7 +110,17 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => { </div> ) : ( <> - <GlobalViewsAppliedFiltersRoot /> + <GlobalViewsAppliedFiltersRoot + disableClearFilterOptions={ + type === "assigned" + ? ["assignees"] + : type === "created" + ? ["created_by"] + : type === "subscribed" + ? ["subscriber"] + : undefined + } + /> {Object.keys(getIssues ?? {}).length == 0 ? ( <>{/* <GlobalViewEmptyState /> */}</> From cc4722f15f8061c82fd175328ce401bc85422c22 Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Thu, 28 Dec 2023 14:14:43 +0530 Subject: [PATCH 6/9] Revert "chore: refactor apply/ clear filter implementation in All Issues." This reverts commit 024822d54f4061eb2686d811a2b87cd0789b6b90. --- .../filters/applied-filters/date.tsx | 19 +++--- .../filters/applied-filters/filters-list.tsx | 60 ++++++------------- .../filters/applied-filters/label.tsx | 19 +++--- .../filters/applied-filters/members.tsx | 19 +++--- .../filters/applied-filters/priority.tsx | 19 +++--- .../filters/applied-filters/project.tsx | 19 +++--- .../roots/global-view-root.tsx | 12 +--- .../filters/applied-filters/state-group.tsx | 19 +++--- .../filters/applied-filters/state.tsx | 19 +++--- .../roots/all-issue-layout-root.tsx | 12 +--- 10 files changed, 77 insertions(+), 140 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx index 722579e9bf3..c1e7b8cec2c 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx @@ -11,11 +11,10 @@ import { DATE_FILTER_OPTIONS } from "constants/filters"; type Props = { handleRemove: (val: string) => void; values: string[]; - disableClearOption?: boolean; }; export const AppliedDateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values, disableClearOption } = props; + const { handleRemove, values } = props; const getDateLabel = (value: string): string => { let dateLabel = ""; @@ -41,15 +40,13 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => { {values.map((date) => ( <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <span className="normal-case">{getDateLabel(date)}</span> - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(date)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(date)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx index 9b7e3bab34d..5d1868a8ae6 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx @@ -24,23 +24,13 @@ type Props = { members?: IUserLite[] | undefined; projects?: IProject[] | undefined; states?: IState[] | undefined; - disableClearFilterOptions?: (keyof IIssueFilterOptions)[]; }; const membersFilters = ["assignees", "mentions", "created_by", "subscriber"]; const dateFilters = ["start_date", "target_date"]; export const AppliedFiltersList: React.FC<Props> = observer((props) => { - const { - appliedFilters, - handleClearAllFilters, - handleRemoveFilter, - labels, - members, - projects, - states, - disableClearFilterOptions, - } = props; + const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props; if (!appliedFilters) return null; @@ -62,22 +52,16 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { <div className="flex flex-wrap items-center gap-1"> {membersFilters.includes(filterKey) && ( <AppliedMembersFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter(filterKey, val)} members={members} values={value} /> )} {dateFilters.includes(filterKey) && ( - <AppliedDateFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} - handleRemove={(val) => handleRemoveFilter(filterKey, val)} - values={value} - /> + <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} /> )} {filterKey === "labels" && ( <AppliedLabelsFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("labels", val)} labels={labels} values={value} @@ -85,14 +69,12 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "priority" && ( <AppliedPriorityFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} /> )} {filterKey === "state" && states && ( <AppliedStateFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("state", val)} states={states} values={value} @@ -100,42 +82,36 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "state_group" && ( <AppliedStateGroupFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} /> )} {filterKey === "project" && ( <AppliedProjectFilters - disableClearOption={disableClearFilterOptions?.includes(filterKey)} handleRemove={(val) => handleRemoveFilter("project", val)} projects={projects} values={value} /> )} - {!disableClearFilterOptions?.includes(filterKey) && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemoveFilter(filterKey, null)} - > - <X size={12} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemoveFilter(filterKey, null)} + > + <X size={12} strokeWidth={2} /> + </button> </div> </div> ); })} - {(!disableClearFilterOptions || disableClearFilterOptions.length === 0) && ( - <button - type="button" - onClick={handleClearAllFilters} - className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" - > - Clear all - <X size={12} strokeWidth={2} /> - </button> - )} - </div> + <button + type="button" + onClick={handleClearAllFilters} + className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" + > + Clear all + <X size={12} strokeWidth={2} /> + </button> + </div> ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx index 5d300a32fce..9cec9b2f724 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx @@ -9,11 +9,10 @@ type Props = { handleRemove: (val: string) => void; labels: IIssueLabel[] | undefined; values: string[]; - disableClearOption?: boolean; }; export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { - const { handleRemove, labels, values, disableClearOption } = props; + const { handleRemove, labels, values } = props; return ( <> @@ -31,15 +30,13 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { }} /> <span className="normal-case">{labelDetails.name}</span> - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(labelId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(labelId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx index de24d0361b2..bfa7e9a29da 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx @@ -9,11 +9,10 @@ type Props = { handleRemove: (val: string) => void; members: IUserLite[] | undefined; values: string[]; - disableClearOption?: boolean; }; export const AppliedMembersFilters: React.FC<Props> = observer((props) => { - const { handleRemove, members, values, disableClearOption } = props; + const { handleRemove, members, values } = props; return ( <> @@ -26,15 +25,13 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => { <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} /> <span className="normal-case">{memberDetails.display_name}</span> - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(memberId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(memberId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx index b5f8e60fbf8..e00d0d829e4 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx @@ -9,11 +9,10 @@ import { TIssuePriorities } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; - disableClearOption?: boolean; }; export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values, disableClearOption } = props; + const { handleRemove, values } = props; return ( <> @@ -21,15 +20,13 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} /> {priority} - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(priority)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(priority)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx index 3e967cb23b9..01830986162 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx @@ -10,11 +10,10 @@ type Props = { handleRemove: (val: string) => void; projects: IProject[] | undefined; values: string[]; - disableClearOption?: boolean; }; export const AppliedProjectFilters: React.FC<Props> = observer((props) => { - const { handleRemove, projects, values, disableClearOption } = props; + const { handleRemove, projects, values } = props; return ( <> @@ -35,15 +34,13 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => { </span> )} <span className="normal-case">{projectDetails.name}</span> - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(projectId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(projectId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx index bf76a7f5e9e..543d186451d 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; @@ -10,16 +9,10 @@ import { AppliedFiltersList } from "components/issues"; import { IIssueFilterOptions } from "types"; import { EFilterType } from "store/issues/types"; -type Props = { - disableClearFilterOptions?: (keyof IIssueFilterOptions)[]; -}; - -export const GlobalViewsAppliedFiltersRoot: React.FC<Props> = observer((props) => { - const { disableClearFilterOptions } = props; - // router +export const GlobalViewsAppliedFiltersRoot = observer(() => { const router = useRouter(); const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string }; - // mobx store + const { project: { workspaceProjects }, workspace: { workspaceLabels }, @@ -90,7 +83,6 @@ export const GlobalViewsAppliedFiltersRoot: React.FC<Props> = observer((props) = appliedFilters={appliedFilters ?? {}} handleClearAllFilters={handleClearAllFilters} handleRemoveFilter={handleRemoveFilter} - disableClearFilterOptions={disableClearFilterOptions} /> {/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && ( diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx index ac4ceaa0d6d..64f95983e46 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx @@ -8,11 +8,10 @@ import { TStateGroups } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; - disableClearOption?: boolean; }; export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values, disableClearOption } = props; + const { handleRemove, values } = props; return ( <> @@ -20,15 +19,13 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => { <div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" /> {stateGroup} - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateGroup)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateGroup)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx index 1f43613ace1..8e759250557 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx @@ -10,11 +10,10 @@ type Props = { handleRemove: (val: string) => void; states: IState[]; values: string[]; - disableClearOption: boolean | undefined; }; export const AppliedStateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, states, values, disableClearOption } = props; + const { handleRemove, states, values } = props; return ( <> @@ -27,15 +26,13 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => { <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" /> {stateDetails.name} - {!disableClearOption && ( - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateId)} - > - <X size={10} strokeWidth={2} /> - </button> - )} + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateId)} + > + <X size={10} strokeWidth={2} /> + </button> </div> ); })} diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx index 8aa75c91135..7ab5621b8e4 100644 --- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx @@ -110,17 +110,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => { </div> ) : ( <> - <GlobalViewsAppliedFiltersRoot - disableClearFilterOptions={ - type === "assigned" - ? ["assignees"] - : type === "created" - ? ["created_by"] - : type === "subscribed" - ? ["subscriber"] - : undefined - } - /> + <GlobalViewsAppliedFiltersRoot /> {Object.keys(getIssues ?? {}).length == 0 ? ( <>{/* <GlobalViewEmptyState /> */}</> From cbdc8e31f8f7e9be11c3b60803473c4956470c59 Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Thu, 28 Dec 2023 14:14:59 +0530 Subject: [PATCH 7/9] Revert "chore: allow guest/ viewer to clear applied filters in project issues." This reverts commit 3dae871d23424d55abac95e16522696ad3c2a5c4. --- .../filters/applied-filters/filters-list.tsx | 50 +++++++++++++------ .../filters/applied-filters/label.tsx | 19 ++++--- .../filters/applied-filters/members.tsx | 19 ++++--- .../filters/applied-filters/priority.tsx | 19 ++++--- .../filters/applied-filters/project.tsx | 19 ++++--- .../filters/applied-filters/state.tsx | 19 ++++--- 6 files changed, 89 insertions(+), 56 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx index 5d1868a8ae6..7ff8056b9e1 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx @@ -1,4 +1,5 @@ import { observer } from "mobx-react-lite"; +import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedDateFilters, @@ -15,6 +16,8 @@ import { X } from "lucide-react"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types"; +// constants +import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { appliedFilters: IIssueFilterOptions; @@ -32,10 +35,16 @@ const dateFilters = ["start_date", "target_date"]; export const AppliedFiltersList: React.FC<Props> = observer((props) => { const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props; + const { + user: { currentProjectRole }, + } = useMobxStore(); + if (!appliedFilters) return null; if (Object.keys(appliedFilters).length === 0) return null; + const isEditingAllowed = currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; + return ( <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100"> {Object.entries(appliedFilters).map(([key, value]) => { @@ -52,6 +61,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { <div className="flex flex-wrap items-center gap-1"> {membersFilters.includes(filterKey) && ( <AppliedMembersFilters + editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter(filterKey, val)} members={members} values={value} @@ -62,6 +72,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "labels" && ( <AppliedLabelsFilters + editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("labels", val)} labels={labels} values={value} @@ -69,12 +80,14 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "priority" && ( <AppliedPriorityFilters + editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} /> )} {filterKey === "state" && states && ( <AppliedStateFilters + editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("state", val)} states={states} values={value} @@ -88,30 +101,35 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => { )} {filterKey === "project" && ( <AppliedProjectFilters + editable={isEditingAllowed} handleRemove={(val) => handleRemoveFilter("project", val)} projects={projects} values={value} /> )} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemoveFilter(filterKey, null)} - > - <X size={12} strokeWidth={2} /> - </button> + {isEditingAllowed && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemoveFilter(filterKey, null)} + > + <X size={12} strokeWidth={2} /> + </button> + )} </div> </div> ); })} - <button - type="button" - onClick={handleClearAllFilters} - className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" - > - Clear all - <X size={12} strokeWidth={2} /> - </button> - </div> + {isEditingAllowed && ( + <button + type="button" + onClick={handleClearAllFilters} + className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200" + > + Clear all + <X size={12} strokeWidth={2} /> + </button> + )} + </div> ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx index 9cec9b2f724..08e7aee4458 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx @@ -9,10 +9,11 @@ type Props = { handleRemove: (val: string) => void; labels: IIssueLabel[] | undefined; values: string[]; + editable: boolean | undefined; }; export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { - const { handleRemove, labels, values } = props; + const { handleRemove, labels, values, editable } = props; return ( <> @@ -30,13 +31,15 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => { }} /> <span className="normal-case">{labelDetails.name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(labelId)} - > - <X size={10} strokeWidth={2} /> - </button> + {editable && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(labelId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx index bfa7e9a29da..1dd61d3390b 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx @@ -9,10 +9,11 @@ type Props = { handleRemove: (val: string) => void; members: IUserLite[] | undefined; values: string[]; + editable: boolean | undefined; }; export const AppliedMembersFilters: React.FC<Props> = observer((props) => { - const { handleRemove, members, values } = props; + const { handleRemove, members, values, editable } = props; return ( <> @@ -25,13 +26,15 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => { <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} /> <span className="normal-case">{memberDetails.display_name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(memberId)} - > - <X size={10} strokeWidth={2} /> - </button> + {editable && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(memberId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx index e00d0d829e4..88b39dc0033 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx @@ -9,10 +9,11 @@ import { TIssuePriorities } from "types"; type Props = { handleRemove: (val: string) => void; values: string[]; + editable: boolean | undefined; }; export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { - const { handleRemove, values } = props; + const { handleRemove, values, editable } = props; return ( <> @@ -20,13 +21,15 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => { <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} /> {priority} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(priority)} - > - <X size={10} strokeWidth={2} /> - </button> + {editable && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(priority)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ))} </> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx index 01830986162..b1e17cfe3dc 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx @@ -10,10 +10,11 @@ type Props = { handleRemove: (val: string) => void; projects: IProject[] | undefined; values: string[]; + editable: boolean | undefined; }; export const AppliedProjectFilters: React.FC<Props> = observer((props) => { - const { handleRemove, projects, values } = props; + const { handleRemove, projects, values, editable } = props; return ( <> @@ -34,13 +35,15 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => { </span> )} <span className="normal-case">{projectDetails.name}</span> - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(projectId)} - > - <X size={10} strokeWidth={2} /> - </button> + {editable && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(projectId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx index 8e759250557..9cff84d9b7a 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx @@ -10,10 +10,11 @@ type Props = { handleRemove: (val: string) => void; states: IState[]; values: string[]; + editable: boolean | undefined; }; export const AppliedStateFilters: React.FC<Props> = observer((props) => { - const { handleRemove, states, values } = props; + const { handleRemove, states, values, editable } = props; return ( <> @@ -26,13 +27,15 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => { <div key={stateId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs"> <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" /> {stateDetails.name} - <button - type="button" - className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" - onClick={() => handleRemove(stateId)} - > - <X size={10} strokeWidth={2} /> - </button> + {editable && ( + <button + type="button" + className="grid place-items-center text-custom-text-300 hover:text-custom-text-200" + onClick={() => handleRemove(stateId)} + > + <X size={10} strokeWidth={2} /> + </button> + )} </div> ); })} From db8bbd6740ffcc15efcef06d0a34a0a7e7dbbbe0 Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Thu, 28 Dec 2023 14:15:25 +0530 Subject: [PATCH 8/9] Revert "chore: update `Workspace Issues` -> `All Issues` header." This reverts commit 03f90be188bc6b2f98a780ae22e0a29d9c59268d. --- web/components/headers/global-issues.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx index 0b27bdd816d..ef4c2b3f570 100644 --- a/web/components/headers/global-issues.tsx +++ b/web/components/headers/global-issues.tsx @@ -95,7 +95,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => { <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" /> ) } - label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`} + label={`Workspace ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`} /> </Breadcrumbs> </div> From 092b9adaf5e8aaa339c5518777278cf2b77e5aaf Mon Sep 17 00:00:00 2001 From: Prateek Shourya <prateekshourya29@gmail.com> Date: Thu, 28 Dec 2023 15:57:23 +0530 Subject: [PATCH 9/9] chore: remove `cursor-pointer` style from non actionable issue properties. --- .../issues/issue-layouts/kanban/properties.tsx | 18 +++--------------- .../issues/issue-layouts/list/properties.tsx | 18 +++--------------- 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx index e6288d62c75..5be5a12c5b3 100644 --- a/web/components/issues/issue-layouts/kanban/properties.tsx +++ b/web/components/issues/issue-layouts/kanban/properties.tsx @@ -166,11 +166,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* sub-issues */} {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && ( <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadOnly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default"> <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.sub_issues_count}</div> </div> @@ -180,11 +176,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* attachments */} {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && ( <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadOnly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default"> <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.attachment_count}</div> </div> @@ -194,11 +186,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {/* link */} {displayProperties && displayProperties?.link && !!issue?.link_count && ( <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadOnly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 cursor-default"> <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.link_count}</div> </div> diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx index ba8a8142f94..07129910fe7 100644 --- a/web/components/issues/issue-layouts/list/properties.tsx +++ b/web/components/issues/issue-layouts/list/properties.tsx @@ -137,11 +137,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* sub-issues */} {displayProperties && displayProperties?.sub_issue_count && !!issue?.sub_issues_count && ( <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadonly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.sub_issues_count}</div> </div> @@ -151,11 +147,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* attachments */} {displayProperties && displayProperties?.attachment_count && !!issue?.attachment_count && ( <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadonly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.attachment_count}</div> </div> @@ -165,11 +157,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => { {/* link */} {displayProperties && displayProperties?.link && !!issue?.link_count && ( <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}> - <div - className={`flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 ${ - isReadonly ? "cursor-not-allowed" : "cursor-pointer" - }`} - > + <div className="flex h-5 flex-shrink-0 cursor-default items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"> <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} /> <div className="text-xs">{issue.link_count}</div> </div>