From e1793dda74468778faaa428572203da4d6c90e1d Mon Sep 17 00:00:00 2001 From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com> Date: Sun, 17 Dec 2023 00:38:05 +0530 Subject: [PATCH] chore: role restriction to issue detail & peek-overview (#3146) * chore: disabled interaction with title & description in peekview & issue detail * chore: restriction to attachments delete for lower roles * chore: kanban & calendar block drag restriction for lower roles * fix: module/issue sidebar links access for lower roles * fix: issue detail role validation * fix: user role validation condition --- web/components/core/sidebar/links-list.tsx | 26 +++++++++-------- .../issues/attachment/attachments.tsx | 29 ++++++++++++------- web/components/issues/description-form.tsx | 8 +++-- .../issue-layouts/calendar/issue-blocks.tsx | 12 +++++++- .../issues/issue-layouts/kanban/block.tsx | 4 +-- web/components/issues/main-content.tsx | 14 +++++---- .../issues/peek-overview/issue-detail.tsx | 10 +++++-- 7 files changed, 67 insertions(+), 36 deletions(-) diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx index b57d6e61b..037d9175b 100644 --- a/web/components/core/sidebar/links-list.tsx +++ b/web/components/core/sidebar/links-list.tsx @@ -50,8 +50,8 @@ export const LinksList: React.FC = ({ links, handleDeleteLink, handleEdit - {!isNotAllowed && ( -
+
+ {!isNotAllowed && ( - - - + )} + + + + {!isNotAllowed && ( -
- )} + )} +

diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx index 86cafd7a9..1b4915579 100644 --- a/web/components/issues/attachment/attachments.tsx +++ b/web/components/issues/attachment/attachments.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import React, { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import useSWR from "swr"; @@ -24,7 +24,14 @@ import { IIssueAttachment } from "types"; const issueAttachmentService = new IssueAttachmentService(); const projectMemberService = new ProjectMemberService(); -export const IssueAttachments = () => { +type Props = { + editable: boolean; +}; + +export const IssueAttachments: React.FC = (props) => { + const { editable } = props; + + // states const [deleteAttachment, setDeleteAttachment] = useState(null); const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false); @@ -86,14 +93,16 @@ export const IssueAttachments = () => {

- + {editable && ( + + )} ))} diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx index b1e455173..677ab5e22 100644 --- a/web/components/issues/description-form.tsx +++ b/web/components/issues/description-form.tsx @@ -135,7 +135,9 @@ export const IssueDescriptionForm: FC = (props) => { debouncedFormSave(); }} required - className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary" + className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${ + !isAllowed ? "hover:cursor-not-allowed" : "" + }`} hasError={Boolean(errors?.description)} role="textbox" disabled={!isAllowed} @@ -170,7 +172,9 @@ export const IssueDescriptionForm: FC = (props) => { setShouldShowAlert={setShowAlert} setIsSubmitting={setIsSubmitting} dragDropEnabled - customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"} + customClassName={ + isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none" + } noBorder={!isAllowed} onChange={(description: Object, description_html: string) => { setShowAlert(true); diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx index 98327edab..c2532b802 100644 --- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx @@ -10,6 +10,9 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector"; // types import { IIssue } from "types"; import { IIssueResponse } from "store/issues/types"; +import { useMobxStore } from "lib/mobx/store-provider"; +// constants +import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { issues: IIssueResponse | undefined; @@ -26,6 +29,11 @@ export const CalendarIssueBlocks: React.FC = observer((props) => { // states const [isMenuActive, setIsMenuActive] = useState(false); + // mobx store + const { + user: { currentProjectRole }, + } = useMobxStore(); + const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: IIssue) => { @@ -51,6 +59,8 @@ export const CalendarIssueBlocks: React.FC = observer((props) => { ); + const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; + return ( <> {issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => { @@ -58,7 +68,7 @@ export const CalendarIssueBlocks: React.FC = observer((props) => { const issue = issues?.[issueId]; return ( - + {(provided, snapshot) => (
= (props) => { return ( <> - + {(provided, snapshot) => (
= observer((props) => { - const { issueDetails, submitChanges, uneditable = false } = props; + const { issueDetails, submitChanges, uneditable } = props; // states const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); // router @@ -152,7 +152,9 @@ export const IssueMainContent: React.FC = observer((props) => { ); }; - const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; + const isAllowed = + (!!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER) || + (uneditable !== undefined && !uneditable); return ( <> @@ -232,7 +234,7 @@ export const IssueMainContent: React.FC = observer((props) => { workspaceSlug={workspaceSlug as string} issue={issueDetails} handleFormSubmit={submitChanges} - isAllowed={isAllowed || !uneditable} + isAllowed={isAllowed} /> {workspaceSlug && projectId && ( @@ -250,8 +252,8 @@ export const IssueMainContent: React.FC = observer((props) => {

Attachments

- - + +
@@ -264,7 +266,7 @@ export const IssueMainContent: React.FC = observer((props) => { />
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx index 610d0348d..d8a88cff7 100644 --- a/web/components/issues/peek-overview/issue-detail.tsx +++ b/web/components/issues/peek-overview/issue-detail.tsx @@ -153,10 +153,12 @@ export const PeekOverviewIssueDetails: FC = (props) = debouncedFormSave(); }} required={true} - className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary" + className={`min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary ${ + !isAllowed ? "hover:cursor-not-allowed" : "" + }`} hasError={Boolean(errors?.description)} role="textbox" - disabled={!true} + disabled={!isAllowed} /> )} /> @@ -188,7 +190,9 @@ export const PeekOverviewIssueDetails: FC = (props) = setShouldShowAlert={setShowAlert} setIsSubmitting={setIsSubmitting} dragDropEnabled - customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"} + customClassName={ + isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none" + } noBorder={!isAllowed} onChange={(description: Object, description_html: string) => { setShowAlert(true);