thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: peek overview authorization (#2632)

Browse Source 
* chore: peek overview authorization

* chore: comment access specifier validation
This commit is contained in:
Aaryan Khandelwal 2023-11-03 19:13:10 +05:30 committed by GitHub
parent d48f13416f
commit 992cf79031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 270 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
packages/editor/core/src/ui/menus/menu-items/index.tsx
View File

@ -1,7 +1,37 @@
import { BoldIcon, Heading1, CheckSquare, Heading2, Heading3, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
import {
BoldIcon,
Heading1,
CheckSquare,
Heading2,
Heading3,
QuoteIcon,
ImageIcon,
TableIcon,
ListIcon,
ListOrderedIcon,
ItalicIcon,
UnderlineIcon,
StrikethroughIcon,
CodeIcon,
} from "lucide-react";
import { Editor } from "@tiptap/react";
import { UploadImage } from "../../../types/upload-image";
import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleHeadingOne, toggleHeadingThree, toggleHeadingTwo, toggleItalic, toggleOrderedList, toggleStrike, toggleTaskList, toggleUnderline, } from "../../../lib/editor-commands";
import {
insertImageCommand,
insertTableCommand,
toggleBlockquote,
toggleBold,
toggleBulletList,
toggleCode,
toggleHeadingOne,
toggleHeadingThree,
toggleHeadingTwo,
toggleItalic,
toggleOrderedList,
toggleStrike,
toggleTaskList,
toggleUnderline,
} from "../../../lib/editor-commands";
export interface EditorMenuItem {
name: string;
@ -15,95 +45,101 @@ export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
isActive: () => editor.isActive("heading", { level: 1 }),
command: () => toggleHeadingOne(editor),
icon: Heading1,
})
});
export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
name: "H2",
isActive: () => editor.isActive("heading", { level: 2 }),
command: () => toggleHeadingTwo(editor),
icon: Heading2,
})
});
export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
name: "H3",
isActive: () => editor.isActive("heading", { level: 3 }),
command: () => toggleHeadingThree(editor),
icon: Heading3,
})
});
export const BoldItem = (editor: Editor): EditorMenuItem => ({
name: "bold",
isActive: () => editor?.isActive("bold"),
command: () => toggleBold(editor),
icon: BoldIcon,
})
});
export const ItalicItem = (editor: Editor): EditorMenuItem => ({
name: "italic",
isActive: () => editor?.isActive("italic"),
command: () => toggleItalic(editor),
icon: ItalicIcon,
})
});
export const UnderLineItem = (editor: Editor): EditorMenuItem => ({
name: "underline",
isActive: () => editor?.isActive("underline"),
command: () => toggleUnderline(editor),
icon: UnderlineIcon,
})
});
export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
name: "strike",
isActive: () => editor?.isActive("strike"),
command: () => toggleStrike(editor),
icon: StrikethroughIcon,
})
});
export const CodeItem = (editor: Editor): EditorMenuItem => ({
name: "code",
isActive: () => editor?.isActive("code"),
command: () => toggleCode(editor),
icon: CodeIcon,
})
});
export const BulletListItem = (editor: Editor): EditorMenuItem => ({
name: "bullet-list",
isActive: () => editor?.isActive("bulletList"),
command: () => toggleBulletList(editor),
icon: ListIcon,
})
});
export const TodoListItem = (editor: Editor): EditorMenuItem => ({
name: "To-do List",
isActive: () => editor.isActive("taskItem"),
command: () => toggleTaskList(editor),
icon: CheckSquare,
})
});
export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
name: "ordered-list",
isActive: () => editor?.isActive("orderedList"),
command: () => toggleOrderedList(editor),
icon: ListOrderedIcon
})
icon: ListOrderedIcon,
});
export const QuoteItem = (editor: Editor): EditorMenuItem => ({
name: "quote",
isActive: () => editor?.isActive("quote"),
command: () => toggleBlockquote(editor),
icon: QuoteIcon
})
icon: QuoteIcon,
});
export const TableItem = (editor: Editor): EditorMenuItem => ({
name: "quote",
name: "table",
isActive: () => editor?.isActive("table"),
command: () => insertTableCommand(editor),
icon: TableIcon
})
icon: TableIcon,
});
export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({
export const ImageItem = (
editor: Editor,
uploadFile: UploadImage,
setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void,
): EditorMenuItem => ({
name: "image",
isActive: () => editor?.isActive("image"),
command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
icon: ImageIcon,
})
});

162
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View File

@ -72,12 +72,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
props.commentAccessSpecifier?.onAccessChange(accessKey);
};
console.log(complexItems);
return (
<div className="flex items-stretch gap-1.5 w-full h-9">
<div className="flex items-stretch gap-1.5 w-full h-9 overflow-x-scroll">
{props.commentAccessSpecifier && (
<div className="flex-shrink-0 flex items-stretch gap-0.5 border border-custom-border-200 rounded p-1">
<div className="flex-shrink-0 flex items-stretch gap-0.5 border-[0.5px] border-custom-border-200 rounded p-1">
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
<Tooltip key={access.key} tooltipContent={access.label}>
<button
@ -102,102 +100,118 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
))}
</div>
)}
<div className="flex items-stretch justify-between gap-2 w-full border border-custom-border-200 bg-custom-background-90 rounded p-1">
<div className="flex items-stretch justify-between gap-2 w-full border-[0.5px] border-custom-border-200 bg-custom-background-90 rounded p-1">
<div className="flex items-stretch">
<div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
{basicMarkItems.map((item, index) => (
<button
<Tooltip
key={index}
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
tooltipContent={<span className="capitalize">{item.name}</span>}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
<button
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
</Tooltip>
))}
</div>
<div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
{listItems.map((item, index) => (
<button
<Tooltip
key={index}
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
tooltipContent={<span className="capitalize">{item.name}</span>}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
<button
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
</Tooltip>
))}
</div>
<div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
{userActionItems.map((item, index) => (
<button
<Tooltip
key={index}
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
tooltipContent={<span className="capitalize">{item.name}</span>}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
<button
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
</Tooltip>
))}
</div>
<div className="flex items-stretch gap-0.5 pl-2.5">
{complexItems.map((item, index) => (
<button
<Tooltip
key={index}
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
tooltipContent={<span className="capitalize">{item.name}</span>}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
<button
type="button"
onClick={item.command}
className={cn(
"p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
{
"text-custom-text-100 bg-custom-background-80":
item.isActive(),
},
)}
>
<item.icon
className={cn("h-3.5 w-3.5", {
"text-custom-text-100": item.isActive(),
})}
strokeWidth={2.5}
/>
</button>
</Tooltip>
))}
</div>
</div>
{props.submitButton}
<div className="sticky right-1">{props.submitButton}</div>
</div>
</div>
);

58
web/components/issues/comment/add-comment.tsx
View File

@ -52,7 +52,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId as string | undefined)
const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId as string | undefined);
const {
control,
@ -74,33 +74,35 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
<div>
<form onSubmit={handleSubmit(handleAddComment)}>
<div>
<div className="relative">
<Controller
name="access"
control={control}
render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
<Controller
name="comment_html"
control={control}
render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
<LiteTextEditorWithRef
onEnterKeyPress={handleSubmit(handleAddComment)}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
ref={editorRef}
value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
customClassName="p-3 min-h-[100px] shadow-sm"
debouncedUpdatesEnabled={false}
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }}
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
/>
)}
/>
)}
/>
</div>
<Controller
name="access"
control={control}
render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
<Controller
name="comment_html"
control={control}
render={({ field: { onChange: onCommentChange, value: commentValue } }) => (
<LiteTextEditorWithRef
onEnterKeyPress={handleSubmit(handleAddComment)}
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
ref={editorRef}
value={!commentValue || commentValue === "" ? "<p></p>" : commentValue}
customClassName="p-3 min-h-[100px] shadow-sm"
debouncedUpdatesEnabled={false}
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={
showAccessSpecifier
? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
: undefined
}
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
/>
)}
/>
)}
/>
<Button variant="neutral-primary" type="submit" disabled={isSubmitting || disabled}>
{isSubmitting ? "Adding..." : "Comment"}

1
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -96,6 +96,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
hideDropdownArrow
onChange={handleAssignee}
disabled={false}
multiple
/>
)}

46
web/components/issues/issue-peek-overview/activity/comment-editor.tsx
View File

@ -1,18 +1,17 @@
import React from "react";
import { useRouter } from "next/router";
import { useForm, Controller } from "react-hook-form";
import { Globe2, Lock } from "lucide-react";
// services
import { FileService } from "services/file.service";
// hooks
import useEditorSuggestions from "hooks/use-editor-suggestions";
// components
import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
// ui
import { Button, Tooltip } from "@plane/ui";
import { Globe2, Lock } from "lucide-react";
import { Button } from "@plane/ui";
// types
import type { IIssueComment } from "types";
import useEditorSuggestions from "hooks/use-editor-suggestions";
const defaultValues: Partial<IIssueComment> = {
access: "INTERNAL",
@ -75,36 +74,7 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
return (
<form onSubmit={handleSubmit(handleAddComment)}>
<div className="space-y-2">
<div className="relative h-full">
{showAccessSpecifier && (
<div className="absolute bottom-2 left-3 z-[1]">
<Controller
control={control}
name="access"
render={({ field: { onChange, value } }) => (
<div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
{commentAccess.map((access) => (
<Tooltip key={access.key} tooltipContent={access.label}>
<button
type="button"
onClick={() => onChange(access.key)}
className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
value === access.key ? "bg-custom-background-80" : ""
}`}
>
<access.icon
className={`w-4 h-4 -mt-1 ${
value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
}`}
/>
</button>
</Tooltip>
))}
</div>
)}
/>
</div>
)}
<div className="h-full">
<Controller
name="access"
control={control}
@ -124,7 +94,11 @@ export const IssueCommentEditor: React.FC<IIssueCommentEditor> = (props) => {
mentionSuggestions={editorSuggestions.mentionSuggestions}
mentionHighlights={editorSuggestions.mentionHighlights}
onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }}
commentAccessSpecifier={
showAccessSpecifier
? { accessValue, onAccessChange, showAccessSpecifier, commentAccess }
: undefined
}
submitButton={
<Button
variant="primary"

7
web/components/issues/issue-peek-overview/activity/view.tsx
View File

@ -14,6 +14,7 @@ interface IIssueComment {
issueCommentRemove: (commentId: string) => void;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
showCommentAccessSpecifier: boolean;
}
export const IssueComment: FC<IIssueComment> = (props) => {
@ -28,6 +29,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
issueCommentRemove,
issueCommentReactionCreate,
issueCommentReactionRemove,
showCommentAccessSpecifier,
} = props;
const handleAddComment = async (formData: any) => {
@ -40,10 +42,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
<div className="font-medium text-lg">Activity</div>
<div className="space-y-2">
<IssueCommentEditor
onSubmit={handleAddComment}
// showAccessSpecifier={projectDetails && projectDetails.is_deployed}
/>
<IssueCommentEditor onSubmit={handleAddComment} showAccessSpecifier={showCommentAccessSpecifier} />
<IssueActivityCard
workspaceSlug={workspaceSlug}

53
web/components/issues/issue-peek-overview/properties.tsx
View File

@ -32,13 +32,14 @@ import { IssueService } from "services/issue";
interface IPeekOverviewProperties {
issue: IIssue;
issueUpdate: (issue: Partial<IIssue>) => void;
user: any;
disableUserActions: boolean;
}
const issueService = new IssueService();
export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
const { issue, issueUpdate, user } = props;
const { issue, issueUpdate, disableUserActions } = props;
// states
const [linkModal, setLinkModal] = useState(false);
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
@ -172,8 +173,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const maxDate = issue.target_date ? new Date(issue.target_date) : null;
maxDate?.setDate(maxDate.getDate());
const isNotAllowed = user?.memberRole?.isGuest || user?.memberRole?.isViewer;
return (
<>
<LinkModal
@ -196,7 +195,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>State</p>
</div>
<div>
<SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={isNotAllowed} />
<SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={disableUserActions} />
</div>
</div>
@ -207,7 +206,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Assignees</p>
</div>
<div>
<SidebarAssigneeSelect value={issue.assignees || []} onChange={handleAssignee} disabled={isNotAllowed} />
<SidebarAssigneeSelect
value={issue.assignees || []}
onChange={handleAssignee}
disabled={disableUserActions}
/>
</div>
</div>
@ -218,7 +221,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Priority</p>
</div>
<div>
<SidebarPrioritySelect value={issue.priority || ""} onChange={handlePriority} disabled={isNotAllowed} />
<SidebarPrioritySelect
value={issue.priority || ""}
onChange={handlePriority}
disabled={disableUserActions}
/>
</div>
</div>
@ -229,7 +236,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Estimate</p>
</div>
<div>
<SidebarEstimateSelect value={issue.estimate_point} onChange={handleEstimate} disabled={isNotAllowed} />
<SidebarEstimateSelect
value={issue.estimate_point}
onChange={handleEstimate}
disabled={disableUserActions}
/>
</div>
</div>
@ -246,7 +257,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
onChange={handleStartDate}
className="bg-custom-background-80 border-none !px-2.5 !py-0.5"
maxDate={maxDate ?? undefined}
disabled={isNotAllowed}
disabled={disableUserActions}
/>
</div>
</div>
@ -264,7 +275,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
onChange={handleTargetDate}
className="bg-custom-background-80 border-none !px-2.5 !py-0.5"
minDate={minDate ?? undefined}
disabled={isNotAllowed}
disabled={disableUserActions}
/>
</div>
</div>
@ -276,7 +287,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Parent</p>
</div>
<div>
<SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={isNotAllowed} />
<SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={disableUserActions} />
</div>
</div>
</div>
@ -290,7 +301,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Cycle</p>
</div>
<div>
<SidebarCycleSelect issueDetail={issue} handleCycleChange={addIssueToCycle} disabled={isNotAllowed} />
<SidebarCycleSelect
issueDetail={issue}
handleCycleChange={addIssueToCycle}
disabled={disableUserActions}
/>
</div>
</div>
@ -300,7 +315,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Module</p>
</div>
<div>
<SidebarModuleSelect issueDetail={issue} handleModuleChange={addIssueToModule} disabled={isNotAllowed} />
<SidebarModuleSelect
issueDetail={issue}
handleModuleChange={addIssueToModule}
disabled={disableUserActions}
/>
</div>
</div>
<div className="flex items-start gap-2 w-full">
@ -313,8 +332,8 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
issueDetails={issue}
labelList={issue.labels}
submitChanges={handleLabels}
isNotAllowed={isNotAllowed}
uneditable={isNotAllowed}
isNotAllowed={disableUserActions}
uneditable={disableUserActions}
/>
</div>
</div>
@ -330,11 +349,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Links</p>
</div>
<div>
{!isNotAllowed && (
{!disableUserActions && (
<button
type="button"
className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
disableUserActions ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
} items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs hover:text-custom-text-200 text-custom-text-300`}
onClick={() => setLinkModal(true)}
disabled={false}

7
web/components/issues/issue-peek-overview/root.tsx
View File

@ -6,7 +6,6 @@ import { IssueView } from "./view";
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IIssue } from "types";
import { RootStore } from "store/root";
interface IIssuePeekOverview {
workspaceSlug: string;
@ -19,7 +18,7 @@ interface IIssuePeekOverview {
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const { workspaceSlug, projectId, issueId, handleIssue, children } = props;
const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
const { issueDetail: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
const issueUpdate = (_data: Partial<IIssue>) => {
handleIssue(_data);
@ -52,6 +51,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const handleDeleteIssue = () => issueDetailStore.deleteIssue(workspaceSlug, projectId, issueId);
const userRole = userStore.currentProjectRole ?? 5;
return (
<IssueView
workspaceSlug={workspaceSlug}
@ -68,6 +69,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
issueSubscriptionCreate={issueSubscriptionCreate}
issueSubscriptionRemove={issueSubscriptionRemove}
handleDeleteIssue={handleDeleteIssue}
disableUserActions={[5, 10].includes(userRole)}
showCommentAccessSpecifier={projectStore.currentProjectDetails?.is_deployed}
>
{children}
</IssueView>

31
web/components/issues/issue-peek-overview/view.tsx
View File

@ -1,8 +1,10 @@
import { FC, ReactNode, useState } from "react";
import { useRouter } from "next/router";
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { PeekOverviewIssueDetails } from "./issue-detail";
import { PeekOverviewProperties } from "./properties";
@ -13,7 +15,6 @@ import { DeleteIssueModal } from "../delete-issue-modal";
import { IIssue } from "types";
import { RootStore } from "store/root";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
@ -34,6 +35,8 @@ interface IIssueView {
issueSubscriptionRemove: () => void;
handleDeleteIssue: () => Promise<void>;
children: ReactNode;
disableUserActions?: boolean;
showCommentAccessSpecifier?: boolean;
}
type TPeekModes = "side-peek" | "modal" | "full-screen";
@ -73,6 +76,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueSubscriptionRemove,
handleDeleteIssue,
children,
disableUserActions = false,
showCommentAccessSpecifier = false,
} = props;
const router = useRouter();
@ -239,9 +244,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<button onClick={handleCopyText}>
<Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
</button>
<button onClick={() => setDeleteIssueModal(true)}>
<Trash2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
</button>
{!disableUserActions && (
<button onClick={() => setDeleteIssueModal(true)}>
<Trash2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
</button>
)}
</div>
</div>
@ -264,7 +271,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueReactionRemove={issueReactionRemove}
/>
<PeekOverviewProperties issue={issue} issueUpdate={issueUpdate} user={user} />
<PeekOverviewProperties
issue={issue}
issueUpdate={issueUpdate}
disableUserActions={disableUserActions}
/>
<IssueComment
workspaceSlug={workspaceSlug}
@ -277,6 +288,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueCommentRemove={issueCommentRemove}
issueCommentReactionCreate={issueCommentReactionCreate}
issueCommentReactionRemove={issueCommentReactionRemove}
showCommentAccessSpecifier={showCommentAccessSpecifier}
/>
</div>
) : (
@ -305,10 +317,15 @@ export const IssueView: FC<IIssueView> = observer((props) => {
issueCommentRemove={issueCommentRemove}
issueCommentReactionCreate={issueCommentReactionCreate}
issueCommentReactionRemove={issueCommentReactionRemove}
showCommentAccessSpecifier={showCommentAccessSpecifier}
/>
</div>
<div className="flex-shrink-0 !w-[400px] h-full border-l border-custom-border-200 p-4 py-5">
<PeekOverviewProperties issue={issue} issueUpdate={issueUpdate} user={user} />
<PeekOverviewProperties
issue={issue}
issueUpdate={issueUpdate}
disableUserActions={disableUserActions}
/>
</div>
</div>
)}

9
web/components/project/join-project-modal.tsx
View File

@ -1,4 +1,5 @@
import { useState, Fragment } from "react";
import { useRouter } from "next/router";
import { Transition, Dialog } from "@headlessui/react";
// ui
import { Button } from "@plane/ui";
@ -17,10 +18,12 @@ type TJoinProjectModalProps = {
export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
const { handleClose, isOpen, project, workspaceSlug } = props;
// store
const { project: projectStore } = useMobxStore();
// states
const [isJoiningLoading, setIsJoiningLoading] = useState(false);
// store
const { project: projectStore } = useMobxStore();
// router
const router = useRouter();
const handleJoin = () => {
setIsJoiningLoading(true);
@ -29,6 +32,8 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
.joinProject(workspaceSlug, [project.id])
.then(() => {
setIsJoiningLoading(false);
router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
handleClose();
})
.catch(() => {

12
web/layouts/auth-layout/user-wrapper.tsx
View File

@ -17,11 +17,17 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
// router
const router = useRouter();
// fetching user information
const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => userStore.fetchCurrentUser());
const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => userStore.fetchCurrentUser(), {
shouldRetryOnError: false,
});
// fetching user settings
useSWR("CURRENT_USER_SETTINGS", () => userStore.fetchCurrentUserSettings());
useSWR("CURRENT_USER_SETTINGS", () => userStore.fetchCurrentUserSettings(), {
shouldRetryOnError: false,
});
// fetching all workspaces
useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces());
useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces(), {
shouldRetryOnError: false,
});
if (!currentUser && !error) {
return (

1
web/types/projects.d.ts vendored
View File

@ -43,7 +43,6 @@ export interface IProject {
page_view: boolean;
project_lead: IUserLite | string | null;
sort_order: number | null;
slug: string;
total_cycles: number;
total_members: number;
total_modules: number;