diff --git a/space/components/issues/peek-overview/add-comment.tsx b/space/components/issues/peek-overview/comment/add-comment.tsx
similarity index 100%
rename from space/components/issues/peek-overview/add-comment.tsx
rename to space/components/issues/peek-overview/comment/add-comment.tsx
diff --git a/space/components/issues/peek-overview/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
similarity index 91%
rename from space/components/issues/peek-overview/comment-detail-card.tsx
rename to space/components/issues/peek-overview/comment/comment-detail-card.tsx
index a43942f4c..0b4d2d5b0 100644
--- a/space/components/issues/peek-overview/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,17 +1,22 @@
-import React, { useEffect, useState, useRef } from "react";
-import { useForm, Controller } from "react-hook-form";
+import React, { useState } from "react";
+
+// mobx
import { observer } from "mobx-react-lite";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
import { Menu, Transition } from "@headlessui/react";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { TipTapEditor } from "components/tiptap";
+import { CommentReactions } from "components/issues/peek-overview";
// icons
import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import { Comment } from "types/issue";
-// components
-import { TipTapEditor } from "components/tiptap";
type Props = {
workspaceSlug: string;
@@ -25,10 +30,13 @@ export const CommentCard: React.FC = observer((props) => {
// states
const [isEditing, setIsEditing] = useState(false);
+ const editorRef = React.useRef(null);
+
+ const showEditorRef = React.useRef(null);
const {
+ control,
formState: { isSubmitting },
handleSubmit,
- control,
} = useForm({
defaultValues: { comment_html: comment.comment_html },
});
@@ -42,6 +50,9 @@ export const CommentCard: React.FC = observer((props) => {
if (!workspaceSlug || !issueDetailStore.peekId) return;
issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
setIsEditing(false);
+
+ editorRef.current?.setEditorValue(formData.comment_html);
+ showEditorRef.current?.setEditorValue(formData.comment_html);
};
return (
@@ -76,7 +87,7 @@ export const CommentCard: React.FC = observer((props) => {
{comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
- <>Commented {timeAgo(comment.created_at)} + <>commented {timeAgo(comment.created_at)}
@@ -91,6 +102,7 @@ export const CommentCard: React.FC = observer((props) => {
render={({ field: { onChange, value } }) => (
= observer((props) => {
diff --git a/space/components/issues/peek-overview/comment/comment-reactions.tsx b/space/components/issues/peek-overview/comment/comment-reactions.tsx
new file mode 100644
index 000000000..4045d3edf
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { ReactionSelector, Tooltip } from "components/ui";
+// helpers
+import { groupReactions, renderEmoji } from "helpers/emoji.helper";
+
+type Props = {
+ commentId: string;
+ projectId: string;
+};
+
+export const CommentReactions: React.FC
+ {
+ userStore.requiredLogin(() => {
+ handleReactionClick(value);
+ });
+ }}
+ position="top"
+ selected={userReactions?.map((r) => r.reaction)}
+ size="md"
+ />
+
+ {Object.keys(groupedReactions || {}).map((reaction) => {
+ const reactions = groupedReactions?.[reaction] ?? [];
+ const REACTIONS_LIMIT = 1000;
+
+ if (reactions.length > 0)
+ return (
+
+ {reactions
+ .map((r) => r.actor_detail.display_name)
+ .splice(0, REACTIONS_LIMIT)
+ .join(", ")}
+ {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+
+ }
+ >
+
+
+ );
+ })}
+
+ );
+});
diff --git a/space/components/issues/peek-overview/comment/index.ts b/space/components/issues/peek-overview/comment/index.ts
new file mode 100644
index 000000000..d217c0ddf
--- /dev/null
+++ b/space/components/issues/peek-overview/comment/index.ts
@@ -0,0 +1,3 @@
+export * from "./add-comment";
+export * from "./comment-detail-card";
+export * from "./comment-reactions";
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 2aa43ff47..7a0b43b98 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -1,5 +1,7 @@
import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
@@ -41,7 +43,7 @@ const peekModes: {
},
];
-export const PeekOverviewHeader: React.FC
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index 6b3394b56..f7ccab18f 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/space/components/issues/peek-overview/issue-properties.tsx
@@ -2,9 +2,10 @@
import useToast from "hooks/use-toast";
// icons
import { Icon } from "components/ui";
-import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
-import { renderDateFormat } from "constants/helpers";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "helpers/string.helper";
+import { renderFullDate } from "helpers/date-time.helper";
+import { dueDateIconDetails } from "../board-views/block-due-date";
// types
import { IIssue } from "types/issue";
import { IPeekMode } from "store/issue_details";
@@ -16,35 +17,16 @@ type Props = {
mode?: IPeekMode;
};
-const validDate = (date: any, state: string): string => {
- if (date === null || ["backlog", "unstarted", "cancelled"].includes(state))
- return `bg-gray-500/10 text-gray-500 border-gray-500/50`;
- else {
- const today = new Date();
- const dueDate = new Date(date);
-
- if (dueDate < today) return `bg-red-500/10 text-red-500 border-red-500/50`;
- else return `bg-green-500/10 text-green-500 border-green-500/50`;
- }
-};
-
export const PeekOverviewIssueProperties: React.FC = ({ issueDetails, mode }) => {
const { setToastAlert } = useToast();
- const startDate = issueDetails.start_date;
- const targetDate = issueDetails.target_date;
-
- const minDate = startDate ? new Date(startDate) : null;
- minDate?.setDate(minDate.getDate());
-
- const maxDate = targetDate ? new Date(targetDate) : null;
- maxDate?.setDate(maxDate.getDate());
-
const state = issueDetails.state_detail;
const stateGroup = issueGroupFilter(state.group);
const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
+ const dueDateIcon = dueDateIconDetails(issueDetails.target_date, state.group);
+
const handleCopyLink = () => {
const urlToCopy = window.location.href;
@@ -62,7 +44,6 @@ export const PeekOverviewIssueProperties: React.FC = ({ issueDetails, mod
{mode === "full" && (
- {/* {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)} */} {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
@@ -125,11 +106,11 @@ export const PeekOverviewIssueProperties: React.FC = ({ issueDetails, mod
{issueDetails.target_date ? (
- {
+ try {
+ const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+ const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+ if (resStatus === 204) {
+ console.log("Image deleted successfully");
+ }
+ } catch (error) {
+ console.error("Error deleting image: ", error);
}
}
diff --git a/space/components/tiptap/plugins/upload-image.tsx b/space/components/tiptap/plugins/upload-image.tsx
index 8b14793b1..bc0acdc54 100644
--- a/space/components/tiptap/plugins/upload-image.tsx
+++ b/space/components/tiptap/plugins/upload-image.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
import fileService from "services/file.service";
@@ -46,7 +45,11 @@ export default UploadImagesPlugin;
function findPlaceholder(state: EditorState, id: {}) {
const decos = uploadKey.getState(state);
- const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id);
+ const found = decos.find(
+ undefined,
+ undefined,
+ (spec: { id: number | undefined }) => spec.id == id
+ );
return found.length ? found[0].from : null;
}
@@ -59,8 +62,6 @@ export async function startImageUpload(
) {
if (!file.type.includes("image/")) {
return;
- } else if (file.size / 1024 / 1024 > 20) {
- return;
}
const id = {};
@@ -93,7 +94,9 @@ export async function startImageUpload(
const imageSrc = typeof src === "object" ? reader.result : src;
const node = schema.nodes.image.create({ src: imageSrc });
- const transaction = view.state.tr.replaceWith(pos, pos, node).setMeta(uploadKey, { remove: { id } });
+ const transaction = view.state.tr
+ .replaceWith(pos, pos, node)
+ .setMeta(uploadKey, { remove: { id } });
view.dispatch(transaction);
}
@@ -107,7 +110,9 @@ const UploadImageHandler = (file: File, workspaceSlug: string): Promise
formData.append("attributes", JSON.stringify({}));
return new Promise(async (resolve, reject) => {
- const imageUrl = await fileService.uploadFile(workspaceSlug, formData).then((response) => response.asset);
+ const imageUrl = await fileService
+ .uploadFile(workspaceSlug, formData)
+ .then((response) => response.asset);
const image = new Image();
image.src = imageUrl;
diff --git a/space/components/tiptap/props.tsx b/space/components/tiptap/props.tsx
index 1af40d623..8233e3ab4 100644
--- a/space/components/tiptap/props.tsx
+++ b/space/components/tiptap/props.tsx
@@ -1,5 +1,6 @@
import { EditorProps } from "@tiptap/pm/view";
import { startImageUpload } from "./plugins/upload-image";
+import { findTableAncestor } from "./table-menu";
export function TiptapEditorProps(
workspaceSlug: string,
@@ -21,6 +22,15 @@ export function TiptapEditorProps(
},
},
handlePaste: (view, event) => {
+ if (typeof window !== "undefined") {
+ const selection: any = window?.getSelection();
+ if (selection.rangeCount !== 0) {
+ const range = selection.getRangeAt(0);
+ if (findTableAncestor(range.startContainer)) {
+ return;
+ }
+ }
+ }
if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
event.preventDefault();
const file = event.clipboardData.files[0];
@@ -31,6 +41,15 @@ export function TiptapEditorProps(
return false;
},
handleDrop: (view, event, _slice, moved) => {
+ if (typeof window !== "undefined") {
+ const selection: any = window?.getSelection();
+ if (selection.rangeCount !== 0) {
+ const range = selection.getRangeAt(0);
+ if (findTableAncestor(range.startContainer)) {
+ return;
+ }
+ }
+ }
if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
event.preventDefault();
const file = event.dataTransfer.files[0];
diff --git a/space/components/tiptap/slash-command/index.tsx b/space/components/tiptap/slash-command/index.tsx
index 90287404f..46bf5ea5a 100644
--- a/space/components/tiptap/slash-command/index.tsx
+++ b/space/components/tiptap/slash-command/index.tsx
@@ -15,6 +15,7 @@ import {
MinusSquare,
CheckSquare,
ImageIcon,
+ Table,
} from "lucide-react";
import { startImageUpload } from "../plugins/upload-image";
import { cn } from "../utils";
@@ -46,6 +47,9 @@ const Command = Extension.create({
return [
Suggestion({
editor: this.editor,
+ allow({ editor }) {
+ return !editor.isActive("table");
+ },
...this.options.suggestion,
}),
];
@@ -53,7 +57,10 @@ const Command = Extension.create({
});
const getSuggestionItems =
- (workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void) =>
+ (
+ workspaceSlug: string,
+ setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+ ) =>
({ query }: { query: string }) =>
[
{
@@ -119,6 +126,20 @@ const getSuggestionItems =
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
},
},
+ {
+ title: "Table",
+ description: "Create a Table",
+ searchTerms: ["table", "cell", "db", "data", "tabular"],
+ icon:
,
+ command: ({ editor, range }: CommandProps) => {
+ editor
+ .chain()
+ .focus()
+ .deleteRange(range)
+ .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+ .run();
+ },
+ },
{
title: "Numbered List",
description: "Create a list with numbering.",
@@ -134,14 +155,21 @@ const getSuggestionItems =
searchTerms: ["blockquote"],
icon:
+ {items.map((item, index) => (
+
+
+
+ ))}
+
+ );
+};
diff --git a/space/components/ui/reaction-selector.tsx b/space/components/ui/reaction-selector.tsx
index 70994460c..a7b67afa6 100644
--- a/space/components/ui/reaction-selector.tsx
+++ b/space/components/ui/reaction-selector.tsx
@@ -12,13 +12,14 @@ import { Icon } from "components/ui";
const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
interface Props {
- size?: "sm" | "md" | "lg";
- position?: "top" | "bottom";
onSelect: (emoji: string) => void;
+ position?: "top" | "bottom";
+ selected?: string[];
+ size?: "sm" | "md" | "lg";
}
export const ReactionSelector: React.FC = (props) => {
- const { onSelect, position, size } = props;
+ const { onSelect, position, selected = [], size } = props;
return (
@@ -51,7 +52,7 @@ export const ReactionSelector: React.FC = (props) => {
position === "top" ? "-top-12" : "-bottom-12"
}`}
>
-
- {renderDateFormat(issueDetails.target_date)}
+ = (props: any) => {
{...bubbleMenuProps}
className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
>
- {
- setIsNodeSelectorOpen(!isNodeSelectorOpen);
- setIsLinkSelectorOpen(false);
- }}
- />
+ {!props.editor.isActive("table") && (
+ {
+ setIsNodeSelectorOpen(!isNodeSelectorOpen);
+ setIsLinkSelectorOpen(false);
+ }}
+ />
+ )}
= ({ editor, isOpen, setIsOpen
name: "Text",
icon: TextIcon,
command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
- isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList"),
+ isActive: () =>
+ editor.isActive("paragraph") &&
+ !editor.isActive("bulletList") &&
+ !editor.isActive("orderedList"),
},
{
name: "H1",
@@ -69,7 +72,8 @@ export const NodeSelector: FC = ({ editor, isOpen, setIsOpen
{
name: "Quote",
icon: TextQuote,
- command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+ command: () =>
+ editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
isActive: () => editor.isActive("blockquote"),
},
{
diff --git a/space/components/tiptap/extensions/index.tsx b/space/components/tiptap/extensions/index.tsx
index 1aa0e2685..f5dc11384 100644
--- a/space/components/tiptap/extensions/index.tsx
+++ b/space/components/tiptap/extensions/index.tsx
@@ -13,6 +13,7 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import { lowlight } from "lowlight/lib/core";
import SlashCommand from "../slash-command";
import { InputRule } from "@tiptap/core";
+import Gapcursor from "@tiptap/extension-gapcursor";
import ts from "highlight.js/lib/languages/typescript";
@@ -20,6 +21,10 @@ import "highlight.js/styles/github-dark.css";
import UniqueID from "@tiptap-pro/extension-unique-id";
import UpdatedImage from "./updated-image";
import isValidHttpUrl from "../bubble-menu/utils/link-validator";
+import { CustomTableCell } from "./table/table-cell";
+import { Table } from "./table/table";
+import { TableHeader } from "./table/table-header";
+import { TableRow } from "@tiptap/extension-table-row";
lowlight.registerLanguage("ts", ts);
@@ -27,113 +32,122 @@ export const TiptapExtensions = (
workspaceSlug: string,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
) => [
- StarterKit.configure({
- bulletList: {
- HTMLAttributes: {
- class: "list-disc list-outside leading-3 -mt-2",
+ StarterKit.configure({
+ bulletList: {
+ HTMLAttributes: {
+ class: "list-disc list-outside leading-3 -mt-2",
+ },
},
- },
- orderedList: {
- HTMLAttributes: {
- class: "list-decimal list-outside leading-3 -mt-2",
+ orderedList: {
+ HTMLAttributes: {
+ class: "list-decimal list-outside leading-3 -mt-2",
+ },
},
- },
- listItem: {
- HTMLAttributes: {
- class: "leading-normal -mb-2",
+ listItem: {
+ HTMLAttributes: {
+ class: "leading-normal -mb-2",
+ },
},
- },
- blockquote: {
- HTMLAttributes: {
- class: "border-l-4 border-custom-border-300",
+ blockquote: {
+ HTMLAttributes: {
+ class: "border-l-4 border-custom-border-300",
+ },
},
- },
- code: {
- HTMLAttributes: {
- class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
- spellcheck: "false",
+ code: {
+ HTMLAttributes: {
+ class:
+ "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+ spellcheck: "false",
+ },
},
- },
- codeBlock: false,
- horizontalRule: false,
- dropcursor: {
- color: "#DBEAFE",
- width: 2,
- },
- gapcursor: false,
- }),
- CodeBlockLowlight.configure({
- lowlight,
- }),
- HorizontalRule.extend({
- addInputRules() {
- return [
- new InputRule({
- find: /^(?:---|—-|___\s|\*\*\*\s)$/,
- handler: ({ state, range, commands }) => {
- commands.splitBlock();
+ codeBlock: false,
+ horizontalRule: false,
+ dropcursor: {
+ color: "rgba(var(--color-text-100))",
+ width: 2,
+ },
+ gapcursor: false,
+ }),
+ CodeBlockLowlight.configure({
+ lowlight,
+ }),
+ HorizontalRule.extend({
+ addInputRules() {
+ return [
+ new InputRule({
+ find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+ handler: ({ state, range, commands }) => {
+ commands.splitBlock();
- const attributes = {};
- const { tr } = state;
- const start = range.from;
- const end = range.to;
- // @ts-ignore
- tr.replaceWith(start - 1, end, this.type.create(attributes));
- },
- }),
- ];
- },
- }).configure({
- HTMLAttributes: {
- class: "mb-6 border-t border-custom-border-300",
- },
- }),
- TiptapLink.configure({
- protocols: ["http", "https"],
- validate: (url) => isValidHttpUrl(url),
- HTMLAttributes: {
- class:
- "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
- },
- }),
- UpdatedImage.configure({
- HTMLAttributes: {
- class: "rounded-lg border border-custom-border-300",
- },
- }),
- Placeholder.configure({
- placeholder: ({ node }) => {
- if (node.type.name === "heading") {
- return `Heading ${node.attrs.level}`;
- }
+ const attributes = {};
+ const { tr } = state;
+ const start = range.from;
+ const end = range.to;
+ // @ts-ignore
+ tr.replaceWith(start - 1, end, this.type.create(attributes));
+ },
+ }),
+ ];
+ },
+ }).configure({
+ HTMLAttributes: {
+ class: "mb-6 border-t border-custom-border-300",
+ },
+ }),
+ Gapcursor,
+ TiptapLink.configure({
+ protocols: ["http", "https"],
+ validate: (url) => isValidHttpUrl(url),
+ HTMLAttributes: {
+ class:
+ "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+ },
+ }),
+ UpdatedImage.configure({
+ HTMLAttributes: {
+ class: "rounded-lg border border-custom-border-300",
+ },
+ }),
+ Placeholder.configure({
+ placeholder: ({ node }) => {
+ if (node.type.name === "heading") {
+ return `Heading ${node.attrs.level}`;
+ }
+ if (node.type.name === "image" || node.type.name === "table") {
+ return "";
+ }
- return "Press '/' for commands...";
- },
- includeChildren: true,
- }),
- UniqueID.configure({
- types: ["image"],
- }),
- SlashCommand(workspaceSlug, setIsSubmitting),
- TiptapUnderline,
- TextStyle,
- Color,
- Highlight.configure({
- multicolor: true,
- }),
- TaskList.configure({
- HTMLAttributes: {
- class: "not-prose pl-2",
- },
- }),
- TaskItem.configure({
- HTMLAttributes: {
- class: "flex items-start my-4",
- },
- nested: true,
- }),
- Markdown.configure({
- html: true,
- transformCopiedText: true,
- }),
-];
+ return "Press '/' for commands...";
+ },
+ includeChildren: true,
+ }),
+ UniqueID.configure({
+ types: ["image"],
+ }),
+ SlashCommand(workspaceSlug, setIsSubmitting),
+ TiptapUnderline,
+ TextStyle,
+ Color,
+ Highlight.configure({
+ multicolor: true,
+ }),
+ TaskList.configure({
+ HTMLAttributes: {
+ class: "not-prose pl-2",
+ },
+ }),
+ TaskItem.configure({
+ HTMLAttributes: {
+ class: "flex items-start my-4",
+ },
+ nested: true,
+ }),
+ Markdown.configure({
+ html: true,
+ transformCopiedText: true,
+ }),
+ Table,
+ TableHeader,
+ CustomTableCell,
+ TableRow,
+ ];
diff --git a/space/components/tiptap/extensions/table/table-cell.ts b/space/components/tiptap/extensions/table/table-cell.ts
new file mode 100644
index 000000000..643cb8c64
--- /dev/null
+++ b/space/components/tiptap/extensions/table/table-cell.ts
@@ -0,0 +1,32 @@
+import { TableCell } from "@tiptap/extension-table-cell";
+
+export const CustomTableCell = TableCell.extend({
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ isHeader: {
+ default: false,
+ parseHTML: (element) => {
+ isHeader: element.tagName === "TD";
+ },
+ renderHTML: (attributes) => {
+ tag: attributes.isHeader ? "th" : "td";
+ },
+ },
+ };
+ },
+ renderHTML({ HTMLAttributes }) {
+ if (HTMLAttributes.isHeader) {
+ return [
+ "th",
+ {
+ ...HTMLAttributes,
+ class: `relative ${HTMLAttributes.class}`,
+ },
+ ["span", { class: "absolute top-0 right-0" }],
+ 0,
+ ];
+ }
+ return ["td", HTMLAttributes, 0];
+ },
+});
diff --git a/space/components/tiptap/extensions/table/table-header.ts b/space/components/tiptap/extensions/table/table-header.ts
new file mode 100644
index 000000000..f23aa93ef
--- /dev/null
+++ b/space/components/tiptap/extensions/table/table-header.ts
@@ -0,0 +1,7 @@
+import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
+
+const TableHeader = BaseTableHeader.extend({
+ content: "paragraph",
+});
+
+export { TableHeader };
diff --git a/space/components/tiptap/extensions/table/table.ts b/space/components/tiptap/extensions/table/table.ts
new file mode 100644
index 000000000..9b727bb51
--- /dev/null
+++ b/space/components/tiptap/extensions/table/table.ts
@@ -0,0 +1,9 @@
+import { Table as BaseTable } from "@tiptap/extension-table";
+
+const Table = BaseTable.configure({
+ resizable: true,
+ cellMinWidth: 100,
+ allowTableNodeSelection: true,
+});
+
+export { Table };
diff --git a/space/components/tiptap/index.tsx b/space/components/tiptap/index.tsx
index 3fb44fbf7..84f691c35 100644
--- a/space/components/tiptap/index.tsx
+++ b/space/components/tiptap/index.tsx
@@ -6,6 +6,7 @@ import { EditorBubbleMenu } from "./bubble-menu";
import { TiptapExtensions } from "./extensions";
import { TiptapEditorProps } from "./props";
import { ImageResizer } from "./extensions/image-resize";
+import { TableMenu } from "./table-menu";
export interface ITipTapRichTextEditor {
value: string;
@@ -37,6 +38,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
borderOnFocus,
customClassName,
} = props;
+
const editor = useEditor({
editable: editable ?? true,
editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),
@@ -54,12 +56,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
},
});
- useEffect(() => {
- if (editor) {
- editor.commands.setContent(value);
- }
- }, [value]);
-
const editorRef: React.MutableRefObject = useRef(null);
useImperativeHandle(forwardedRef, () => ({
@@ -81,8 +77,8 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
${noBorder ? "" : "border border-custom-border-200"} ${
- borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
- } ${customClassName}`;
+ borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+ } ${customClassName}`;
if (!editor) return null;
editorRef.current = editor;
@@ -98,6 +94,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
{editor &&
diff --git a/space/components/tiptap/plugins/delete-image.tsx b/space/components/tiptap/plugins/delete-image.tsx
index a1b90fe57..fdf515ccc 100644
--- a/space/components/tiptap/plugins/delete-image.tsx
+++ b/space/components/tiptap/plugins/delete-image.tsx
@@ -1,43 +1,51 @@
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
import { Node as ProseMirrorNode } from "@tiptap/pm/model";
import fileService from "services/file.service";
const deleteKey = new PluginKey("delete-image");
+const IMAGE_NODE_TYPE = "image";
-const TrackImageDeletionPlugin = () =>
+interface ImageNode extends ProseMirrorNode {
+ attrs: {
+ src: string;
+ id: string;
+ };
+}
+
+const TrackImageDeletionPlugin = (): Plugin =>
new Plugin({
key: deleteKey,
- appendTransaction: (transactions, oldState, newState) => {
+ appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+ const newImageSources = new Set();
+ newState.doc.descendants((node) => {
+ if (node.type.name === IMAGE_NODE_TYPE) {
+ newImageSources.add(node.attrs.src);
+ }
+ });
+
transactions.forEach((transaction) => {
if (!transaction.docChanged) return;
- const removedImages: ProseMirrorNode[] = [];
+ const removedImages: ImageNode[] = [];
oldState.doc.descendants((oldNode, oldPos) => {
- if (oldNode.type.name !== "image") return;
-
+ if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
+ if (oldPos < 0 || oldPos > newState.doc.content.size) return;
if (!newState.doc.resolve(oldPos).parent) return;
+
const newNode = newState.doc.nodeAt(oldPos);
// Check if the node has been deleted or replaced
- if (!newNode || newNode.type.name !== "image") {
- // Check if the node still exists elsewhere in the document
- let nodeExists = false;
- newState.doc.descendants((node) => {
- if (node.attrs.id === oldNode.attrs.id) {
- nodeExists = true;
- }
- });
-
- if (!nodeExists) {
- removedImages.push(oldNode as ProseMirrorNode);
+ if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
+ if (!newImageSources.has(oldNode.attrs.src)) {
+ removedImages.push(oldNode as ImageNode);
}
}
});
- removedImages.forEach((node) => {
+ removedImages.forEach(async (node) => {
const src = node.attrs.src;
- onNodeDeleted(src);
+ await onNodeDeleted(src);
});
});
@@ -47,10 +55,14 @@ const TrackImageDeletionPlugin = () =>
export default TrackImageDeletionPlugin;
-async function onNodeDeleted(src: string) {
- const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
- const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
- if (resStatus === 204) {
- console.log("Image deleted successfully");
+async function onNodeDeleted(src: string): Promise
+
+ {dueDateIcon.iconName}
+
+ {renderFullDate(issueDetails.target_date)}
) : (
Empty
diff --git a/space/components/tiptap/bubble-menu/index.tsx b/space/components/tiptap/bubble-menu/index.tsx
index e68900782..217317ea1 100644
--- a/space/components/tiptap/bubble-menu/index.tsx
+++ b/space/components/tiptap/bubble-menu/index.tsx
@@ -77,14 +77,16 @@ export const EditorBubbleMenu: FC
+
diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
index 16728b148..d001634fc 100644
--- a/web/components/issues/peek-overview/issue-properties.tsx
+++ b/web/components/issues/peek-overview/issue-properties.tsx
@@ -2,7 +2,7 @@
import { observer } from "mobx-react-lite";
// headless ui
import { Disclosure } from "@headlessui/react";
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// hooks
import useToast from "hooks/use-toast";
import useUser from "hooks/use-user";
@@ -19,7 +19,7 @@ import { CustomDatePicker, Icon } from "components/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
-import { IIssue } from "types";
+import { IIssue, TIssuePriorities } from "types";
type Props = {
handleDeleteIssue: () => void;
@@ -66,7 +66,10 @@ export const PeekOverviewIssueProperties: React.FC = ({
{mode === "full" && (
- {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)}
+
{reactionEmojis.map((emoji) => (
diff --git a/space/constants/helpers.ts b/space/constants/helpers.ts
deleted file mode 100644
index 0cf142353..000000000
--- a/space/constants/helpers.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export const renderDateFormat = (date: string | Date | null) => {
- if (!date) return "N/A";
-
- var d = new Date(date),
- month = "" + (d.getMonth() + 1),
- day = "" + d.getDate(),
- year = d.getFullYear();
-
- if (month.length < 2) month = "0" + month;
- if (day.length < 2) day = "0" + day;
-
- return [year, month, day].join("-");
-};
-
-/**
- * @description Returns date and month, if date is of the current year
- * @description Returns date, month adn year, if date is of a different year than current
- * @param {string} date
- * @example renderFullDate("2023-01-01") // 1 Jan
- * @example renderFullDate("2021-01-01") // 1 Jan, 2021
- */
-
-export const renderFullDate = (date: string): string => {
- if (!date) return "";
-
- const months: string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-
- const currentDate: Date = new Date();
- const [year, month, day]: number[] = date.split("-").map(Number);
-
- const formattedMonth: string = months[month - 1];
- const formattedDay: string = day < 10 ? `0${day}` : day.toString();
-
- if (currentDate.getFullYear() === year) return `${formattedDay} ${formattedMonth}`;
- else return `${formattedDay} ${formattedMonth}, ${year}`;
-};
diff --git a/space/helpers/date-time.helper.ts b/space/helpers/date-time.helper.ts
index 625871625..f19a5358b 100644
--- a/space/helpers/date-time.helper.ts
+++ b/space/helpers/date-time.helper.ts
@@ -12,3 +12,26 @@ export const timeAgo = (time: any) => {
time = +new Date();
}
};
+
+/**
+ * @description Returns date and month, if date is of the current year
+ * @description Returns date, month adn year, if date is of a different year than current
+ * @param {string} date
+ * @example renderFullDate("2023-01-01") // 1 Jan
+ * @example renderFullDate("2021-01-01") // 1 Jan, 2021
+ */
+
+export const renderFullDate = (date: string): string => {
+ if (!date) return "";
+
+ const months: string[] = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+ const currentDate: Date = new Date();
+ const [year, month, day]: number[] = date.split("-").map(Number);
+
+ const formattedMonth: string = months[month - 1];
+ const formattedDay: string = day < 10 ? `0${day}` : day.toString();
+
+ if (currentDate.getFullYear() === year) return `${formattedDay} ${formattedMonth}`;
+ else return `${formattedDay} ${formattedMonth}, ${year}`;
+};
diff --git a/space/pages/[workspace_slug]/[project_slug]/index.tsx b/space/pages/[workspace_slug]/[project_slug]/index.tsx
index 220a5b8c7..e50c01c18 100644
--- a/space/pages/[workspace_slug]/[project_slug]/index.tsx
+++ b/space/pages/[workspace_slug]/[project_slug]/index.tsx
@@ -1,7 +1,8 @@
-import useSWR from "swr";
-import type { GetServerSideProps } from "next";
-import { useRouter } from "next/router";
import Head from "next/head";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
/// layouts
import ProjectLayout from "layouts/project-layout";
// components
@@ -39,12 +40,4 @@ const WorkspaceProjectPage = (props: any) => {
);
};
-// export const getServerSideProps: GetServerSideProps = async ({ query: { workspace_slug, project_slug } }) => {
-// const res = await fetch(
-// `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`
-// );
-// const project_settings = await res.json();
-// return { props: { project_settings } };
-// };
-
export default WorkspaceProjectPage;
diff --git a/space/pages/onboarding/index.tsx b/space/pages/onboarding/index.tsx
index 1d2f19519..2f08ee648 100644
--- a/space/pages/onboarding/index.tsx
+++ b/space/pages/onboarding/index.tsx
@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import Image from "next/image";
// assets
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg";
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
diff --git a/space/public/plane-logos/blue-without-text.png b/space/public/plane-logos/blue-without-text.png
new file mode 100644
index 000000000..ea94aec79
Binary files /dev/null and b/space/public/plane-logos/blue-without-text.png differ
diff --git a/space/public/plane-logos/blue-without-text.svg b/space/public/plane-logos/blue-without-text.svg
deleted file mode 100644
index 715aee503..000000000
--- a/space/public/plane-logos/blue-without-text.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
diff --git a/space/services/issue.service.ts b/space/services/issue.service.ts
index 03a94654b..835778fb2 100644
--- a/space/services/issue.service.ts
+++ b/space/services/issue.service.ts
@@ -93,16 +93,6 @@ class IssueService extends APIService {
});
}
- async getCommentsReactions(workspaceSlug: string, projectId: string, commentId: string): Promise {
- return this.get(
- `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`
- )
- .then((response) => response?.data)
- .catch((error) => {
- throw error?.response;
- });
- }
-
async createIssueComment(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise {
return this.post(
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`,
@@ -140,6 +130,39 @@ class IssueService extends APIService {
throw error?.response;
});
}
+
+ async createCommentReaction(
+ workspaceSlug: string,
+ projectId: string,
+ commentId: string,
+ data: {
+ reaction: string;
+ }
+ ): Promise {
+ return this.post(
+ `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`,
+ data
+ )
+ .then((response) => response?.data)
+ .catch((error) => {
+ throw error?.response;
+ });
+ }
+
+ async deleteCommentReaction(
+ workspaceSlug: string,
+ projectId: string,
+ commentId: string,
+ reactionHex: string
+ ): Promise {
+ return this.delete(
+ `/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/${reactionHex}/`
+ )
+ .then((response) => response?.data)
+ .catch((error) => {
+ throw error?.response;
+ });
+ }
}
export default IssueService;
diff --git a/space/store/issue_details.ts b/space/store/issue_details.ts
index 10679cf17..346206e94 100644
--- a/space/store/issue_details.ts
+++ b/space/store/issue_details.ts
@@ -32,6 +32,20 @@ export interface IIssueDetailStore {
data: any
) => Promise;
deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void;
+ addCommentReaction: (
+ workspaceId: string,
+ projectId: string,
+ issueId: string,
+ commentId: string,
+ reactionHex: string
+ ) => void;
+ removeCommentReaction: (
+ workspaceId: string,
+ projectId: string,
+ issueId: string,
+ commentId: string,
+ reactionHex: string
+ ) => void;
// issue reactions
addIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
@@ -61,8 +75,17 @@ class IssueDetailStore implements IssueDetailStore {
details: observable.ref,
// actions
setPeekId: action,
- fetchIssueDetails: action,
setPeekMode: action,
+ fetchIssueDetails: action,
+ addIssueComment: action,
+ updateIssueComment: action,
+ deleteIssueComment: action,
+ addCommentReaction: action,
+ removeCommentReaction: action,
+ addIssueReaction: action,
+ removeIssueReaction: action,
+ addIssueVote: action,
+ removeIssueVote: action,
});
this.issueService = new IssueService();
this.rootStore = _rootStore;
@@ -131,29 +154,32 @@ class IssueDetailStore implements IssueDetailStore {
data: any
) => {
try {
- const issueCommentUpdateResponse = await this.issueService.updateIssueComment(
- workspaceSlug,
- projectId,
- issueId,
- commentId,
- data
- );
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: this.details[issueId].comments.map((c) => ({
+ ...c,
+ ...(c.id === commentId ? data : {}),
+ })),
+ },
+ };
+ });
- if (issueCommentUpdateResponse) {
- const remainingComments = this.details[issueId].comments.filter((com) => com.id != commentId);
- runInAction(() => {
- this.details = {
- ...this.details,
- [issueId]: {
- ...this.details[issueId],
- comments: [...remainingComments, issueCommentUpdateResponse],
- },
- };
- });
- }
- return issueCommentUpdateResponse;
+ await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, commentId, data);
} catch (error) {
- console.log("Failed to add issue comment");
+ const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: issueComments,
+ },
+ };
+ });
}
};
@@ -175,6 +201,94 @@ class IssueDetailStore implements IssueDetailStore {
}
};
+ addCommentReaction = async (
+ workspaceSlug: string,
+ projectId: string,
+ issueId: string,
+ commentId: string,
+ reactionHex: string
+ ) => {
+ const newReaction = {
+ id: uuidv4(),
+ comment: commentId,
+ reaction: reactionHex,
+ actor_detail: this.rootStore.user.currentActor,
+ };
+ const newComments = this.details[issueId].comments.map((comment) => ({
+ ...comment,
+ comment_reactions:
+ comment.id === commentId ? [...comment.comment_reactions, newReaction] : comment.comment_reactions,
+ }));
+
+ try {
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: [...newComments],
+ },
+ };
+ });
+
+ await this.issueService.createCommentReaction(workspaceSlug, projectId, commentId, {
+ reaction: reactionHex,
+ });
+ } catch (error) {
+ const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: issueComments,
+ },
+ };
+ });
+ }
+ };
+
+ removeCommentReaction = async (
+ workspaceSlug: string,
+ projectId: string,
+ issueId: string,
+ commentId: string,
+ reactionHex: string
+ ) => {
+ try {
+ const comment = this.details[issueId].comments.find((c) => c.id === commentId);
+ const newCommentReactions = comment?.comment_reactions.filter((r) => r.reaction !== reactionHex) ?? [];
+
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: this.details[issueId].comments.map((c) => ({
+ ...c,
+ comment_reactions: c.id === commentId ? newCommentReactions : c.comment_reactions,
+ })),
+ },
+ };
+ });
+
+ await this.issueService.deleteCommentReaction(workspaceSlug, projectId, commentId, reactionHex);
+ } catch (error) {
+ const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
+
+ runInAction(() => {
+ this.details = {
+ ...this.details,
+ [issueId]: {
+ ...this.details[issueId],
+ comments: issueComments,
+ },
+ };
+ });
+ }
+ };
+
addIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
try {
runInAction(() => {
diff --git a/space/store/user.ts b/space/store/user.ts
index 8d34b0bdc..3a76c2111 100644
--- a/space/store/user.ts
+++ b/space/store/user.ts
@@ -62,17 +62,13 @@ class UserStore implements IUserStore {
return;
}
+ const currentPath = window.location.pathname + window.location.search;
this.fetchCurrentUser()
.then(() => {
- if (!this.currentUser) {
- const currentPath = window.location.pathname;
- window.location.href = `/?next_path=${currentPath}`;
- } else callback();
+ if (!this.currentUser) window.location.href = `/?next_path=${currentPath}`;
+ else callback();
})
- .catch(() => {
- const currentPath = window.location.pathname;
- window.location.href = `/?next_path=${currentPath}`;
- });
+ .catch(() => (window.location.href = `/?next_path=${currentPath}`));
};
fetchCurrentUser = async () => {
diff --git a/space/types/issue.ts b/space/types/issue.ts
index 754da6ae3..206327fcd 100644
--- a/space/types/issue.ts
+++ b/space/types/issue.ts
@@ -68,25 +68,30 @@ export interface IVote {
}
export interface Comment {
- id: string;
actor_detail: ActorDetail;
- issue_detail: IssueDetail;
- project_detail: ProjectDetail;
- workspace_detail: WorkspaceDetail;
- comment_reactions: any[];
- is_member: boolean;
- created_at: Date;
- updated_at: Date;
- comment_stripped: string;
- comment_html: string;
- attachments: any[];
access: string;
- created_by: string;
- updated_by: string;
- project: string;
- workspace: string;
- issue: string;
actor: string;
+ attachments: any[];
+ comment_html: string;
+ comment_reactions: {
+ actor_detail: ActorDetail;
+ comment: string;
+ id: string;
+ reaction: string;
+ }[];
+ comment_stripped: string;
+ created_at: Date;
+ created_by: string;
+ id: string;
+ is_member: boolean;
+ issue: string;
+ issue_detail: IssueDetail;
+ project: string;
+ project_detail: ProjectDetail;
+ updated_at: Date;
+ updated_by: string;
+ workspace: string;
+ workspace_detail: WorkspaceDetail;
}
export interface IIssueReaction {
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index 75d1d7d40..5993bb63c 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -1,13 +1,13 @@
// nivo
import { BarDatum } from "@nivo/bar";
// icons
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
// helpers
import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
// types
-import { IAnalyticsParams, IAnalyticsResponse } from "types";
+import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
// constants
import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
@@ -53,7 +53,7 @@ export const AnalyticsTable: React.FC = ({ analytics, barGraphData, param
>
= ({ projectDetails, handleCha
query: state.name,
content: (
= ({ projectDetails, handleCha
label={
= (props) => {
position === "top" ? "-top-12" : "-bottom-12"
}`}
>
- = ({ workspaceSlug, issu
const { setToastAlert } = useToast();
const { user } = useUser();
+ const { projectDetails } = useProjectDetails();
const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
@@ -30,18 +32,11 @@ export const PeekOverviewIssueActivity: React.FC = ({ workspaceSlug, issu
: null
);
- const handleCommentUpdate = async (comment: IIssueComment) => {
+ const handleCommentUpdate = async (commentId: string, data: Partial) => {
if (!workspaceSlug || !issue) return;
await issuesService
- .patchIssueComment(
- workspaceSlug as string,
- issue.project,
- issue.id,
- comment.id,
- comment,
- user
- )
+ .patchIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, data, user)
.then(() => mutateIssueActivity());
};
@@ -80,9 +75,13 @@ export const PeekOverviewIssueActivity: React.FC = ({ workspaceSlug, issu
activity={issueActivity}
handleCommentUpdate={handleCommentUpdate}
handleCommentDelete={handleCommentDelete}
+ showAccessSpecifier={projectDetails && projectDetails.is_deployed}
/>
{params.segment === "priority" ? (
- getPriorityIcon(key)
+ = ({ defaultAnalytics }) => (
className="absolute top-0 left-0 h-1 rounded duration-300"
style={{
width: `${percentage}%`,
- backgroundColor: STATE_GROUP_COLORS[group.state_group],
+ backgroundColor: STATE_GROUP_COLORS[group.state_group as TStateGroups],
}}
/>
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 3e71b8329..ad65714aa 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -9,7 +9,7 @@ import { CustomSearchSelect, CustomSelect, ToggleSwitch } from "components/ui";
import { SelectMonthModal } from "components/automation";
// icons
import { ChevronDownIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// services
import stateService from "services/state.service";
// constants
@@ -46,7 +46,7 @@ export const AutoCloseAutomation: React.FC{group.state_group}
@@ -42,7 +42,7 @@ export const AnalyticsDemand: React.FC
- {getStateGroupIcon(state.group, "16", "16", state.color)}
+
),
@@ -140,14 +140,19 @@ export const AutoCloseAutomation: React.FC
{selectedOption ? (
- getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
+ >;
@@ -54,7 +56,7 @@ export const ChangeIssuePriority: React.FC = ({ setIsPaletteOpen, issue,
[workspaceSlug, issueId, projectId, user]
);
- const handleIssueState = (priority: string | null) => {
+ const handleIssueState = (priority: TIssuePriorities) => {
submitChanges({ priority });
setIsPaletteOpen(false);
};
@@ -68,7 +70,7 @@ export const ChangeIssuePriority: React.FC = ({ setIsPaletteOpen, issue,
className="focus:outline-none"
>
>;
@@ -82,7 +84,12 @@ export const ChangeIssueState: React.FC = ({ setIsPaletteOpen, issue, use
className="focus:outline-none"
>
= ({ title, field, isOpen, handleClose }) => {
- const { filters, setFilters } = useIssuesView();
-
- const router = useRouter();
- const { viewId } = router.query;
-
+export const DateFilterModal: React.FC = ({
+ title,
+ field,
+ filters,
+ handleClose,
+ isOpen,
+ onSelect,
+}) => {
const { handleSubmit, watch, control } = useForm({
defaultValues,
});
@@ -53,10 +53,10 @@ export const DateFilterModal: React.FC = ({ title, field, isOpen, handleC
const { filterType, date1, date2 } = formData;
if (filterType === "range") {
- setFilters(
- { [field]: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
- !Boolean(viewId)
- );
+ onSelect({
+ key: field,
+ value: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`],
+ });
} else {
const filteredArray = (filters?.[field] as string[])?.filter((item) => {
if (item?.includes(filterType)) return false;
@@ -66,17 +66,12 @@ export const DateFilterModal: React.FC = ({ title, field, isOpen, handleC
const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
if (filterOne)
- setFilters(
- { [field]: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
- !Boolean(viewId)
- );
+ onSelect({ key: field, value: [filterOne, `${renderDateFormat(date1)};${filterType}`] });
else
- setFilters(
- {
- [field]: [`${renderDateFormat(date1)};${filterType}`],
- },
- !Boolean(viewId)
- );
+ onSelect({
+ key: field,
+ value: [`${renderDateFormat(date1)};${filterType}`],
+ });
}
handleClose();
};
diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx
index 8192bdf7d..81a12bd86 100644
--- a/web/components/core/filters/filters-list.tsx
+++ b/web/components/core/filters/filters-list.tsx
@@ -2,7 +2,7 @@ import React from "react";
// icons
import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
// ui
import { Avatar } from "components/ui";
// helpers
@@ -71,12 +71,10 @@ export const FiltersList: React.FC = ({
}}
>
- {getStateGroupIcon(
- state?.group ?? "backlog",
- "12",
- "12",
- state?.color
- )}
+
diff --git a/web/components/core/reaction-selector.tsx b/web/components/core/reaction-selector.tsx
index 06b410785..43d77de9e 100644
--- a/web/components/core/reaction-selector.tsx
+++ b/web/components/core/reaction-selector.tsx
@@ -61,7 +61,7 @@ export const ReactionSelector: React.FC
- {getPriorityIcon(priority)}
+
{priority === issue.priority &&
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 30e2cdb77..6bfc2874c 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -1,22 +1,24 @@
-import { useRouter } from "next/router";
import React, { Dispatch, SetStateAction, useCallback } from "react";
+
+import { useRouter } from "next/router";
+
import useSWR, { mutate } from "swr";
// cmdk
import { Command } from "cmdk";
-// ui
-import { Spinner } from "components/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
// services
import issuesService from "services/issues.service";
import stateService from "services/state.service";
+// ui
+import { Spinner } from "components/ui";
+// icons
+import { CheckIcon, StateGroupIcon } from "components/icons";
+// helpers
+import { getStatesList } from "helpers/state.helper";
// types
import { ICurrentUserResponse, IIssue } from "types";
// fetch keys
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys";
-// icons
-import { CheckIcon, getStateGroupIcon } from "components/icons";
type Props = {
setIsPaletteOpen: Dispatch
- {getStateGroupIcon(state.group, "16", "16", state.color)}
+
{state.name}
{state.id === issue.state &&
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index abc2cc7c4..eb285fd6f 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -1,15 +1,11 @@
import { Fragment } from "react";
-import { useRouter } from "next/router";
-
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// react-datepicker
import DatePicker from "react-datepicker";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
// components
import { DateFilterSelect } from "./date-filter-select";
// ui
@@ -23,8 +19,10 @@ import { IIssueFilterOptions } from "types";
type Props = {
title: string;
field: keyof IIssueFilterOptions;
- isOpen: boolean;
+ filters: IIssueFilterOptions;
handleClose: () => void;
+ isOpen: boolean;
+ onSelect: (option: any) => void;
};
type TFormValues = {
@@ -39,12 +37,14 @@ const defaultValues: TFormValues = {
date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
};
-export const DateFilterModal: React.FC
+
= {
name: "",
description_html: "",
estimate_point: null,
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
index 5a82907f2..fe322afe9 100644
--- a/web/components/issues/activity.tsx
+++ b/web/components/issues/activity.tsx
@@ -15,14 +15,16 @@ import { IIssueActivity, IIssueComment } from "types";
type Props = {
activity: IIssueActivity[] | undefined;
- handleCommentUpdate: (comment: IIssueComment) => Promise;
+ handleCommentUpdate: (commentId: string, data: Partial) => Promise;
handleCommentDelete: (commentId: string) => Promise;
+ showAccessSpecifier?: boolean;
};
export const IssueActivitySection: React.FC = ({
activity,
handleCommentUpdate,
handleCommentDelete,
+ showAccessSpecifier = false,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@@ -131,10 +133,11 @@ export const IssueActivitySection: React.FC = ({
return (
) => void;
+ showAccessSpecifier?: boolean;
+ workspaceSlug: string;
};
export const CommentCard: React.FC = ({
comment,
- workspaceSlug,
- onSubmit,
handleCommentDeletion,
+ onSubmit,
+ showAccessSpecifier = false,
+ workspaceSlug,
}) => {
const { user } = useUser();
@@ -45,11 +47,11 @@ export const CommentCard: React.FC = ({
defaultValues: comment,
});
- const onEnter = (formData: IIssueComment) => {
+ const onEnter = (formData: Partial) => {
if (isSubmitting) return;
setIsEditing(false);
- onSubmit(formData);
+ onSubmit(comment.id, formData);
editorRef.current?.setEditorValue(formData.comment_html);
showEditorRef.current?.setEditorValue(formData.comment_html);
@@ -99,7 +101,7 @@ export const CommentCard: React.FC = ({
: comment.actor_detail.display_name}
{reactionEmojis.map((emoji) => (
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 9614ea447..41e7a5444 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -63,7 +63,9 @@ export const CyclesListGanttChartView: FC = ({ cycles, mutateCycles }) =>
const blockFormat = (blocks: ICycle[]) =>
blocks && blocks.length > 0
? blocks
- .filter((b) => b.start_date && b.end_date)
+ .filter(
+ (b) => b.start_date && b.end_date && new Date(b.start_date) <= new Date(b.end_date)
+ )
.map((block) => ({
data: block,
id: block.id,
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index dd6fab9dc..67b7c6d4d 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -41,7 +41,7 @@ const IntegrationGuide = () => {
);
const handleCsvClose = () => {
- router.replace(`/plane/settings/exports`);
+ router.replace(`/${workspaceSlug?.toString()}/settings/exports`);
};
return (
diff --git a/web/components/gantt-chart/helpers/block-structure.tsx b/web/components/gantt-chart/helpers/block-structure.tsx
index ab2475bdd..ea51c3b12 100644
--- a/web/components/gantt-chart/helpers/block-structure.tsx
+++ b/web/components/gantt-chart/helpers/block-structure.tsx
@@ -4,11 +4,13 @@ import { IGanttBlock } from "components/gantt-chart";
export const renderIssueBlocksStructure = (blocks: IIssue[]): IGanttBlock[] =>
blocks && blocks.length > 0
- ? blocks.map((block) => ({
- data: block,
- id: block.id,
- sort_order: block.sort_order,
- start_date: new Date(block.start_date ?? ""),
- target_date: new Date(block.target_date ?? ""),
- }))
+ ? blocks
+ .filter((b) => new Date(b?.start_date ?? "") <= new Date(b?.target_date ?? ""))
+ .map((block) => ({
+ data: block,
+ id: block.id,
+ sort_order: block.sort_order,
+ start_date: new Date(block.start_date ?? ""),
+ target_date: new Date(block.target_date ?? ""),
+ }))
: [];
diff --git a/web/components/icons/backlog-state-icon.tsx b/web/components/icons/backlog-state-icon.tsx
deleted file mode 100644
index 2c140a112..000000000
--- a/web/components/icons/backlog-state-icon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const BacklogStateIcon: React.FC = ({
- width = "20",
- height = "20",
- className,
- color = "rgb(var(--color-text-200))",
-}) => (
-
-);
diff --git a/web/components/icons/cancelled-state-icon.tsx b/web/components/icons/cancelled-state-icon.tsx
deleted file mode 100644
index 5829146ff..000000000
--- a/web/components/icons/cancelled-state-icon.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CancelledStateIcon: React.FC = ({
- width = "20",
- height = "20",
- className,
- color = "#f2655a",
-}) => (
-
-);
diff --git a/web/components/icons/completed-state-icon.tsx b/web/components/icons/completed-state-icon.tsx
deleted file mode 100644
index 584245d58..000000000
--- a/web/components/icons/completed-state-icon.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const CompletedStateIcon: React.FC = ({
- width = "20",
- height = "20",
- className,
- color = "#438af3",
-}) => (
-
-);
diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts
index d3b311e40..d3be7f2a8 100644
--- a/web/components/icons/index.ts
+++ b/web/components/icons/index.ts
@@ -1,6 +1,7 @@
+export * from "./module";
+export * from "./state";
export * from "./alarm-clock-icon";
export * from "./attachment-icon";
-export * from "./backlog-state-icon";
export * from "./blocked-icon";
export * from "./blocker-icon";
export * from "./bolt-icon";
@@ -8,12 +9,10 @@ export * from "./calendar-before-icon";
export * from "./calendar-after-icon";
export * from "./calendar-month-icon";
export * from "./cancel-icon";
-export * from "./cancelled-state-icon";
export * from "./clipboard-icon";
export * from "./color-pallette-icon";
export * from "./comment-icon";
export * from "./completed-cycle-icon";
-export * from "./completed-state-icon";
export * from "./current-cycle-icon";
export * from "./cycle-icon";
export * from "./discord-icon";
@@ -23,11 +22,9 @@ export * from "./ellipsis-horizontal-icon";
export * from "./external-link-icon";
export * from "./github-icon";
export * from "./heartbeat-icon";
-export * from "./started-state-icon";
export * from "./layer-diagonal-icon";
export * from "./lock-icon";
export * from "./menu-icon";
-export * from "./module";
export * from "./pencil-scribble-icon";
export * from "./plus-icon";
export * from "./person-running-icon";
@@ -36,11 +33,8 @@ export * from "./question-mark-circle-icon";
export * from "./setting-icon";
export * from "./signal-cellular-icon";
export * from "./stacked-layers-icon";
-export * from "./started-state-icon";
-export * from "./state-group-icon";
export * from "./tag-icon";
export * from "./tune-icon";
-export * from "./unstarted-state-icon";
export * from "./upcoming-cycle-icon";
export * from "./user-group-icon";
export * from "./user-icon-circle";
diff --git a/web/components/icons/priority-icon.tsx b/web/components/icons/priority-icon.tsx
index 58212ca5a..8473e264b 100644
--- a/web/components/icons/priority-icon.tsx
+++ b/web/components/icons/priority-icon.tsx
@@ -1,22 +1,25 @@
-export const getPriorityIcon = (priority: string | null, className?: string) => {
+// types
+import { TIssuePriorities } from "types";
+
+type Props = {
+ priority: TIssuePriorities | null;
+ className?: string;
+};
+
+export const PriorityIcon: React.FC = ({ priority, className = "" }) => {
if (!className || className === "") className = "text-xs flex items-center";
- priority = priority?.toLowerCase() ?? null;
-
- switch (priority) {
- case "urgent":
- return error;
- case "high":
- return signal_cellular_alt;
- case "medium":
- return (
- signal_cellular_alt_2_bar
- );
- case "low":
- return (
- signal_cellular_alt_1_bar
- );
- default:
- return block;
- }
+ return (
+
+ {priority === "urgent"
+ ? "error"
+ : priority === "high"
+ ? "signal_cellular_alt"
+ : priority === "medium"
+ ? "signal_cellular_alt_2_bar"
+ : priority === "low"
+ ? "signal_cellular_alt_1_bar"
+ : "block"}
+
+ );
};
diff --git a/web/components/icons/started-state-icon.tsx b/web/components/icons/started-state-icon.tsx
deleted file mode 100644
index 20de01537..000000000
--- a/web/components/icons/started-state-icon.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const StartedStateIcon: React.FC = ({
- width = "20",
- height = "20",
- className,
- color = "#fbb040",
-}) => (
-
-);
diff --git a/web/components/icons/state-group-icon.tsx b/web/components/icons/state-group-icon.tsx
deleted file mode 100644
index 522e0b9dc..000000000
--- a/web/components/icons/state-group-icon.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
- BacklogStateIcon,
- CancelledStateIcon,
- CompletedStateIcon,
- StartedStateIcon,
- UnstartedStateIcon,
-} from "components/icons";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-export const getStateGroupIcon = (
- stateGroup: "backlog" | "unstarted" | "started" | "completed" | "cancelled",
- width = "20",
- height = "20",
- color?: string
-) => {
- switch (stateGroup) {
- case "backlog":
- return (
- = ({
+ width = "20",
+ height = "20",
+ className,
+ color = "#a3a3a3",
+}) => (
+
+);
diff --git a/web/components/icons/state/cancelled.tsx b/web/components/icons/state/cancelled.tsx
new file mode 100644
index 000000000..1c3c4e3d2
--- /dev/null
+++ b/web/components/icons/state/cancelled.tsx
@@ -0,0 +1,34 @@
+type Props = {
+ width?: string;
+ height?: string;
+ className?: string;
+ color?: string;
+};
+
+export const StateGroupCancelledIcon: React.FC = ({
+ width = "20",
+ height = "20",
+ className,
+ color = "#ef4444",
+}) => (
+
+);
diff --git a/web/components/icons/state/completed.tsx b/web/components/icons/state/completed.tsx
new file mode 100644
index 000000000..b22cc8c81
--- /dev/null
+++ b/web/components/icons/state/completed.tsx
@@ -0,0 +1,27 @@
+type Props = {
+ width?: string;
+ height?: string;
+ className?: string;
+ color?: string;
+};
+
+export const StateGroupCompletedIcon: React.FC = ({
+ width = "20",
+ height = "20",
+ className,
+ color = "#16a34a",
+}) => (
+
+);
diff --git a/web/components/icons/state/index.ts b/web/components/icons/state/index.ts
new file mode 100644
index 000000000..7fee13d8b
--- /dev/null
+++ b/web/components/icons/state/index.ts
@@ -0,0 +1,6 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./started";
+export * from "./state-group-icon";
+export * from "./unstarted";
diff --git a/web/components/icons/state/started.tsx b/web/components/icons/state/started.tsx
new file mode 100644
index 000000000..bf0892732
--- /dev/null
+++ b/web/components/icons/state/started.tsx
@@ -0,0 +1,25 @@
+type Props = {
+ width?: string;
+ height?: string;
+ className?: string;
+ color?: string;
+};
+
+export const StateGroupStartedIcon: React.FC = ({
+ width = "20",
+ height = "20",
+ className,
+ color = "#f59e0b",
+}) => (
+
+);
diff --git a/web/components/icons/state/state-group-icon.tsx b/web/components/icons/state/state-group-icon.tsx
new file mode 100644
index 000000000..df3b57dd8
--- /dev/null
+++ b/web/components/icons/state/state-group-icon.tsx
@@ -0,0 +1,74 @@
+// icons
+import {
+ StateGroupBacklogIcon,
+ StateGroupCancelledIcon,
+ StateGroupCompletedIcon,
+ StateGroupStartedIcon,
+ StateGroupUnstartedIcon,
+} from "components/icons";
+// types
+import { TStateGroups } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+ className?: string;
+ color?: string;
+ height?: string;
+ stateGroup: TStateGroups;
+ width?: string;
+};
+
+export const StateGroupIcon: React.FC = ({
+ className = "",
+ color,
+ height = "12px",
+ width = "12px",
+ stateGroup,
+}) => {
+ if (stateGroup === "backlog")
+ return (
+ = ({
+ width = "20",
+ height = "20",
+ className,
+ color = "#3a3a3a",
+}) => (
+
+);
diff --git a/web/components/icons/unstarted-state-icon.tsx b/web/components/icons/unstarted-state-icon.tsx
deleted file mode 100644
index 161a0ab2a..000000000
--- a/web/components/icons/unstarted-state-icon.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-
-import type { Props } from "./types";
-
-export const UnstartedStateIcon: React.FC = ({
- width = "20",
- height = "20",
- className,
- color = "rgb(var(--color-text-200))",
-}) => (
-
-);
diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx
index 7bb601949..9220db899 100644
--- a/web/components/inbox/filters-dropdown.tsx
+++ b/web/components/inbox/filters-dropdown.tsx
@@ -3,7 +3,7 @@ import useInboxView from "hooks/use-inbox-view";
// ui
import { MultiLevelDropdown } from "components/ui";
// icons
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
// constants
import { PRIORITIES } from "constants/project";
import { INBOX_STATUS } from "constants/inbox";
@@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC = () => {
id: priority === null ? "null" : priority,
label: (
- {getPriorityIcon(priority)} {priority ?? "None"}
+
),
value: {
diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx
index 503c4ab04..7d07fb8d4 100644
--- a/web/components/inbox/filters-list.tsx
+++ b/web/components/inbox/filters-list.tsx
@@ -2,9 +2,11 @@
import useInboxView from "hooks/use-inbox-view";
// icons
import { XMarkIcon } from "@heroicons/react/24/outline";
-import { getPriorityIcon } from "components/icons";
+import { PriorityIcon } from "components/icons";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TIssuePriorities } from "types";
// constants
import { INBOX_STATUS } from "constants/inbox";
@@ -48,7 +50,9 @@ export const InboxFiltersList = () => {
: "bg-custom-background-90 text-custom-text-200"
}`}
>
- {getPriorityIcon(priority)}
+
+ - Commented {timeAgo(comment.created_at)} + commented {timeAgo(comment.created_at)}
@@ -137,7 +139,15 @@ export const CommentCard: React.FC = ({
-
+
- setIsEditing(true)}>Edit
+ setIsEditing(true)}
+ className="flex items-center gap-1"
+ >
+
+ {showAccessSpecifier && (
+ <>
+ {comment.access === "INTERNAL" ? (
+ onSubmit(comment.id, { access: "EXTERNAL" })}
+ className="flex items-center gap-1"
+ >
+
+ ) : (
+ onSubmit(comment.id, { access: "INTERNAL" })}
+ className="flex items-center gap-1"
+ >
+
+ )}
+
+ )}
{
handleCommentDeletion(comment.id);
}}
+ className="flex items-center gap-1"
>
- Delete
+
)}
diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/gantt-chart/blocks.tsx
index 3ab7ea90b..0834e3e79 100644
--- a/web/components/issues/gantt-chart/blocks.tsx
+++ b/web/components/issues/gantt-chart/blocks.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
// ui
import { Tooltip } from "components/ui";
// icons
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// helpers
import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper";
// types
@@ -52,7 +52,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
className="relative w-full flex items-center gap-2 h-full cursor-pointer"
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
>
- {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
+ = ({
: null
);
- const handleCommentUpdate = async (comment: IIssueComment) => {
+ const handleCommentUpdate = async (commentId: string, data: Partial) => {
if (!workspaceSlug || !projectId || !issueId) return;
await issuesService
@@ -85,8 +85,8 @@ export const IssueMainContent: React.FC = ({
workspaceSlug as string,
projectId as string,
issueId as string,
- comment.id,
- comment,
+ commentId,
+ data,
user
)
.then(() => mutateIssueActivity());
@@ -222,6 +222,7 @@ export const IssueMainContent: React.FC = ({
activity={issueActivity}
handleCommentUpdate={handleCommentUpdate}
handleCommentDelete={handleCommentDelete}
+ showAccessSpecifier={projectDetails && projectDetails.is_deployed}
/>
= ({
setIsDateFilterModalOpen(false)}
+ isOpen={isDateFilterModalOpen}
+ onSelect={onSelect}
/>
)}
= ({
id: priority === null ? "null" : priority,
label: (
= ({
id: key,
label: (
= ({
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
- draggedItem[groupBy] = destinationGroup;
+ draggedItem[groupBy] = destinationGroup as TIssuePriorities;
mutate<{
[key: string]: IIssue[];
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index 62091511a..a29fa6521 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -136,7 +136,7 @@ export const ParentIssuesListModal: React.FC = ({
onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
className="flex-shrink-0"
>
- workspace level
+ Workspace Level
diff --git a/web/components/issues/peek-overview/issue-activity.tsx b/web/components/issues/peek-overview/issue-activity.tsx
index 975b01fb0..68e608dba 100644
--- a/web/components/issues/peek-overview/issue-activity.tsx
+++ b/web/components/issues/peek-overview/issue-activity.tsx
@@ -5,6 +5,7 @@ import issuesService from "services/issues.service";
// hooks
import useUser from "hooks/use-user";
import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
// components
import { AddComment, IssueActivitySection } from "components/issues";
// types
@@ -22,6 +23,7 @@ export const PeekOverviewIssueActivity: React.FC
+ {showAccessSpecifier && (
+ = ({
{user?.id === comment.actor && (
+
+ )}
{data?.project_detail?.identifier} {data?.sequence_id}
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index bab384523..b7b154ce2 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -77,7 +77,7 @@ export const IssueMainContent: React.FC
- {getPriorityIcon(priority)} {priority ?? "None"}
+
),
value: {
@@ -102,7 +104,7 @@ export const MyIssuesSelectFilters: React.FC
- {getStateGroupIcon(key as any, "16", "16")}{" "}
+
),
diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx
index 3500e69e7..a66f4618b 100644
--- a/web/components/issues/my-issues/my-issues-view.tsx
+++ b/web/components/issues/my-issues/my-issues-view.tsx
@@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
-import { IIssue, IIssueFilterOptions } from "types";
+import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
// fetch-keys
import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
import { PlusIcon } from "@heroicons/react/24/outline";
@@ -96,7 +96,7 @@ export const MyIssuesView: React.FC
-
- {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)}
+
@@ -114,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC = ({
handleUpdateIssue({ priority: val })}
+ onChange={(val) => handleUpdateIssue({ priority: val })}
disabled={readOnly}
/>
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
index b734e6a90..6a2a07cbd 100644
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@@ -3,12 +3,14 @@ import React from "react";
// ui
import { CustomSelect } from "components/ui";
// icons
-import { getPriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "components/icons/priority-icon";
+// types
+import { TIssuePriorities } from "types";
// constants
import { PRIORITIES } from "constants/project";
type Props = {
- value: string | null;
+ value: TIssuePriorities;
onChange: (value: string) => void;
};
@@ -18,7 +20,10 @@ export const IssuePrioritySelect: React.FC = ({ value, onChange }) => (
label={
- {getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
+ = ({ value, onChange }) => (
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index d62daba76..22a4e6532 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -10,7 +10,7 @@ import stateService from "services/state.service";
import { CustomSearchSelect } from "components/ui";
// icons
import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
// fetch keys
@@ -41,7 +41,7 @@ export const IssueStateSelect: React.FC = ({ setIsOpen, value, onChange,
query: state.name,
content: (
= ({ setIsOpen, value, onChange,
label={
- {getPriorityIcon(priority)}
+
+
- {getStateGroupIcon(state.group, "16", "16", state.color)}
+
),
@@ -58,9 +58,12 @@ export const IssueStateSelect: React.FC
{selectedOption ? (
- getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
+ = ({ value, onChange, disabl
}`}
>
- {getPriorityIcon(value ?? "None", "!text-sm")}
+ = ({ value, onChange, disabl
{PRIORITIES.map((option) => (
<>
- {getPriorityIcon(option, "text-sm")}
+
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index 5084c61bd..cf2cfe3b2 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -9,7 +9,7 @@ import stateService from "services/state.service";
// ui
import { Spinner, CustomSelect } from "components/ui";
// icons
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -42,17 +42,12 @@ export const SidebarStateSelect: React.FC = ({ value, onChange, disabled
@@ -108,7 +104,7 @@ export const ViewPrioritySelect: React.FC = ({
{PRIORITIES?.map((priority) => (
<>
- {getPriorityIcon(priority, "text-sm")}
+
diff --git a/web/components/issues/view-select/state.tsx b/web/components/issues/view-select/state.tsx
index 460a11272..08ca77d80 100644
--- a/web/components/issues/view-select/state.tsx
+++ b/web/components/issues/view-select/state.tsx
@@ -10,7 +10,7 @@ import trackEventServices from "services/track-event.service";
// ui
import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
@@ -59,7 +59,7 @@ export const ViewStateSelect: React.FC = ({
query: state.name,
content: (
= ({
>
= ({ modules, mutateModules })
const blockFormat = (blocks: IModule[]) =>
blocks && blocks.length > 0
? blocks
- .filter((b) => b.start_date && b.target_date)
+ .filter(
+ (b) =>
+ b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date)
+ )
.map((block) => ({
data: block,
id: block.id,
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index 353b55ae2..f4d75974e 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
-import { IIssue, IIssueFilterOptions } from "types";
+import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
// fetch-keys
import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys";
@@ -108,7 +108,7 @@ export const ProfileIssuesView = () => {
const sourceGroup = source.droppableId;
const destinationGroup = destination.droppableId;
- draggedItem[groupByProperty] = destinationGroup;
+ draggedItem[groupByProperty] = destinationGroup as TIssuePriorities;
mutateProfileIssues((prevData: any) => {
if (!prevData) return prevData;
diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index 813afdc79..e5c1bf8dd 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -15,7 +15,7 @@ import {
PencilSquareIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
-import { getStateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "components/icons";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { groupBy, orderArrayBy } from "helpers/array.helper";
@@ -162,7 +162,7 @@ export const SingleState: React.FC = ({
return (
- {getStateGroupIcon(state.group, "16", "16", state.color)}
+
),
@@ -75,8 +75,9 @@ export const ViewStateSelect: React.FC
- {selectedOption &&
- getStateGroupIcon(selectedOption.group, "14", "14", selectedOption.color)}
+ {selectedOption && (
+
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index 08465ffa9..b8ebd0185 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -69,7 +69,10 @@ export const ModulesListGanttChartView: FC
- {getStateGroupIcon(state.group, "20", "20", state.color)}
+ {
+ try {
+ const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+ const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId);
+ if (resStatus === 204) {
+ console.log("Image deleted successfully");
+ }
+ } catch (error) {
+ console.error("Error deleting image: ", error);
}
}
diff --git a/web/components/tiptap/plugins/upload-image.tsx b/web/components/tiptap/plugins/upload-image.tsx
index 499a00455..bc0acdc54 100644
--- a/web/components/tiptap/plugins/upload-image.tsx
+++ b/web/components/tiptap/plugins/upload-image.tsx
@@ -1,4 +1,3 @@
-// @ts-nocheck
import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
import fileService from "services/file.service";
diff --git a/web/components/views/select-filters.tsx b/web/components/views/select-filters.tsx
index 7016afc00..52671f41f 100644
--- a/web/components/views/select-filters.tsx
+++ b/web/components/views/select-filters.tsx
@@ -13,7 +13,7 @@ import { DateFilterModal } from "components/core";
// ui
import { Avatar, MultiLevelDropdown } from "components/ui";
// icons
-import { getPriorityIcon, getStateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "components/icons";
// helpers
import { getStatesList } from "helpers/state.helper";
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@@ -78,8 +78,10 @@ export const SelectFilters: React.FC = ({
setIsDateFilterModalOpen(false)}
+ isOpen={isDateFilterModalOpen}
+ onSelect={onSelect}
/>
)}
= ({
id: priority === null ? "null" : priority,
label: (
= ({
id: state.id,
label: (
+
+
+);
+
+const UserLink = ({ activity }: { activity: IIssueActivity }) => (
+
+);
+
+const activityDetails: {
+ [key: string]: {
+ message: (
+ activity: IIssueActivity,
+ showIssue: boolean,
+ workspaceSlug: string
+ ) => React.ReactNode;
+ icon: React.ReactNode;
+ };
+} = {
+ assignees: {
+ message: (activity, showIssue) => (
+ <>
+ {activity.old_value === "" ? "added a new assignee " : "removed the assignee "}
+ = {
+ access: "INTERNAL",
+ comment_html: "",
+};
+
+type Props = {
+ disabled?: boolean;
+ onSubmit: (data: IIssueComment) => Promise;
+};
+
+const commentAccess = [
+ {
+ icon: "lock",
+ key: "INTERNAL",
+ label: "Private",
+ },
+ {
+ icon: "public",
+ key: "EXTERNAL",
+ label: "Public",
+ },
+];
+
+export const AddComment: React.FC = ({ disabled = false, onSubmit }) => {
+ const editorRef = React.useRef(null);
+
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
+
+ const { projectDetails } = useProjectDetails();
+
+ const showAccessSpecifier = projectDetails?.is_deployed;
+
+ const {
+ control,
+ formState: { isSubmitting },
+ handleSubmit,
+ reset,
+ } = useForm({ defaultValues });
+
+ const handleAddComment = async (formData: IIssueComment) => {
+ if (!formData.comment_html || isSubmitting) return;
+
+ await onSubmit(formData).then(() => {
+ reset(defaultValues);
+ editorRef.current?.clearEditor();
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
new file mode 100644
index 000000000..fa1a33939
--- /dev/null
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -0,0 +1,186 @@
+// react
+import React, { useEffect } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// swr
+import { mutate } from "swr";
+
+// react hooks form
+import { useForm } from "react-hook-form";
+
+// services
+import issuesService from "services/issues.service";
+
+// fetch keys
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+
+// hooks
+import useToast from "hooks/use-toast";
+
+// ui
+import { PrimaryButton, Input } from "components/ui";
+
+// types
+import type { linkDetails, IIssueLink } from "types";
+
+type Props = {
+ isOpen: boolean;
+ data?: linkDetails;
+ links?: linkDetails[];
+ onSuccess: () => void;
+};
+
+export const CreateUpdateLinkForm: React.FC = (props) => {
+ const { isOpen, data, links, onSuccess } = props;
+
+ const router = useRouter();
+ const { workspaceSlug, projectId, issueId } = router.query;
+
+ const { setToastAlert } = useToast();
+
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ defaultValues: {
+ title: "",
+ url: "",
+ },
+ });
+
+ useEffect(() => {
+ if (!data) return;
+ reset({
+ title: data.title,
+ url: data.url,
+ });
+ }, [data, reset]);
+
+ useEffect(() => {
+ if (!isOpen)
+ reset({
+ title: "",
+ url: "",
+ });
+ }, [isOpen, reset]);
+
+ const onSubmit = async (formData: IIssueLink) => {
+ if (!workspaceSlug || !projectId || !issueId) return;
+
+ const payload = { metadata: {}, ...formData };
+
+ if (!data)
+ await issuesService
+ .createIssueLink(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ issueId.toString(),
+ payload
+ )
+ .then(() => {
+ onSuccess();
+ mutate(ISSUE_DETAILS(issueId.toString()));
+ })
+ .catch((err) => {
+ if (err?.status === 400)
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "This URL already exists for this issue.",
+ });
+ else
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Something went wrong. Please try again.",
+ });
+ });
+ else {
+ const updatedLinks = links?.map((l) =>
+ l.id === data.id
+ ? {
+ ...l,
+ title: formData.title,
+ url: formData.url,
+ }
+ : l
+ );
+
+ mutate(
+ ISSUE_DETAILS(issueId.toString()),
+ (prevData) => ({ ...prevData, issue_link: updatedLinks }),
+ false
+ );
+
+ await issuesService
+ .updateIssueLink(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ issueId.toString(),
+ data!.id,
+ payload
+ )
+ .then(() => {
+ onSuccess();
+ mutate(ISSUE_DETAILS(issueId.toString()));
+ });
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/web/components/web-view/index.ts b/web/components/web-view/index.ts
new file mode 100644
index 000000000..915c891a9
--- /dev/null
+++ b/web/components/web-view/index.ts
@@ -0,0 +1,18 @@
+export * from "./web-view-modal";
+export * from "./select-state";
+export * from "./select-priority";
+export * from "./issue-web-view-form";
+export * from "./label";
+export * from "./sub-issues";
+export * from "./issue-attachments";
+export * from "./issue-properties-detail";
+export * from "./issue-link-list";
+export * from "./create-update-link-form";
+export * from "./issue-activity";
+export * from "./select-assignee";
+export * from "./select-estimate";
+export * from "./add-comment";
+export * from "./select-parent";
+export * from "./select-blocker";
+export * from "./select-blocked";
+export * from "./activity-message";
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
new file mode 100644
index 000000000..4bd13eb5c
--- /dev/null
+++ b/web/components/web-view/issue-activity.tsx
@@ -0,0 +1,232 @@
+// react
+import React from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// swr
+import useSWR, { mutate } from "swr";
+
+// fetch key
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+// services
+import issuesService from "services/issues.service";
+
+// hooks
+import useUser from "hooks/use-user";
+
+// components
+import { CommentCard } from "components/issues/comment";
+import { Label, AddComment, ActivityMessage, ActivityIcon } from "components/web-view";
+
+// helpers
+import { timeAgo } from "helpers/date-time.helper";
+
+// ui
+import { Icon } from "components/ui";
+
+// types
+import type { IIssue, IIssueComment } from "types";
+
+type Props = {
+ allowed: boolean;
+ issueDetails: IIssue;
+};
+
+export const IssueActivity: React.FC = (props) => {
+ const { issueDetails, allowed } = props;
+
+ const router = useRouter();
+ const { workspaceSlug, projectId, issueId } = router.query;
+
+ const { user } = useUser();
+
+ const { data: issueActivities, mutate: mutateIssueActivity } = useSWR(
+ workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
+ workspaceSlug && projectId && issueId
+ ? () =>
+ issuesService.getIssueActivities(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ issueId.toString()
+ )
+ : null
+ );
+
+ const handleCommentUpdate = async (comment: any) => {
+ if (!workspaceSlug || !projectId || !issueId) return;
+
+ await issuesService
+ .patchIssueComment(
+ workspaceSlug as string,
+ projectId as string,
+ issueId as string,
+ comment.id,
+ comment,
+ user
+ )
+ .then(() => mutateIssueActivity());
+ };
+
+ const handleCommentDelete = async (commentId: string) => {
+ if (!workspaceSlug || !projectId || !issueId) return;
+
+ mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
+
+ await issuesService
+ .deleteIssueComment(
+ workspaceSlug as string,
+ projectId as string,
+ issueId as string,
+ commentId,
+ user
+ )
+ .then(() => mutateIssueActivity());
+ };
+
+ const handleAddComment = async (formData: IIssueComment) => {
+ if (!workspaceSlug || !issueDetails) return;
+
+ await issuesService
+ .createIssueComment(
+ workspaceSlug.toString(),
+ issueDetails.project,
+ issueDetails.id,
+ formData,
+ user
+ )
+ .then(() => {
+ mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
+ })
+ .catch(() =>
+ console.log(
+ "toast",
+ JSON.stringify({
+ type: "error",
+ title: "Error!",
+ message: "Comment could not be posted. Please try again.",
+ })
+ )
+ );
+ };
+
+ return (
+ = (props) => {
+ const { allowed } = props;
+
+ const router = useRouter();
+ const { workspaceSlug, projectId, issueId } = router.query;
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [deleteAttachment, setDeleteAttachment] = useState(null);
+ const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false);
+
+ const onDrop = useCallback(
+ (acceptedFiles: File[]) => {
+ if (!acceptedFiles[0] || !workspaceSlug) return;
+
+ const formData = new FormData();
+ formData.append("asset", acceptedFiles[0]);
+ formData.append(
+ "attributes",
+ JSON.stringify({
+ name: acceptedFiles[0].name,
+ size: acceptedFiles[0].size,
+ })
+ );
+ setIsLoading(true);
+
+ issuesService
+ .uploadIssueAttachment(
+ workspaceSlug as string,
+ projectId as string,
+ issueId as string,
+ formData
+ )
+ .then((res) => {
+ mutate(
+ ISSUE_ATTACHMENTS(issueId as string),
+ (prevData) => [res, ...(prevData ?? [])],
+ false
+ );
+ mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+ console.log(
+ "toast",
+ JSON.stringify({
+ type: "success",
+ title: "Success!",
+ message: "File added successfully.",
+ })
+ );
+ setIsOpen(false);
+ setIsLoading(false);
+ })
+ .catch((err) => {
+ setIsLoading(false);
+ console.log(
+ "toast",
+ JSON.stringify({
+ type: "error",
+ title: "error!",
+ message: "Something went wrong. please check file type & size (max 5 MB)",
+ })
+ );
+ });
+ },
+ [issueId, projectId, workspaceSlug]
+ );
+
+ const { getRootProps, getInputProps } = useDropzone({
+ onDrop,
+ maxSize: 5 * 1024 * 1024,
+ disabled: !allowed || isLoading,
+ });
+
+ const { data: attachments } = useSWR(
+ workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
+ workspaceSlug && projectId && issueId
+ ? () =>
+ issuesService.getIssueAttachment(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ issueId.toString()
+ )
+ : null
+ );
+
+ return (
+ = (props) => {
+ const { issueDetails, allowed } = props;
+
+ const links = issueDetails?.issue_link;
+
+ const [isOpen, setIsOpen] = useState(false);
+ const [selectedLink, setSelectedLink] = useState(null);
+
+ const router = useRouter();
+ const { workspaceSlug, projectId } = router.query;
+
+ const handleDeleteLink = async (linkId: string) => {
+ if (!workspaceSlug || !projectId || !issueDetails) return;
+
+ const updatedLinks = issueDetails.issue_link.filter((l) => l.id !== linkId);
+
+ mutate(
+ ISSUE_DETAILS(issueDetails.id),
+ (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+ false
+ );
+
+ await issuesService
+ .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId)
+ .then((res) => {
+ mutate(ISSUE_DETAILS(issueDetails.id));
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
+
+ return (
+ ;
+ submitChanges: (data: Partial) => Promise;
+};
+
+export const IssuePropertiesDetail: React.FC = (props) => {
+ const { control, submitChanges } = props;
+
+ const blockerIssue = useWatch({
+ control,
+ name: "blocker_issues",
+ });
+
+ const blockedIssue = useWatch({
+ control,
+ name: "blocked_issues",
+ });
+
+ const startDate = useWatch({
+ control,
+ name: "start_date",
+ });
+
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
+
+ const [isViewAllOpen, setIsViewAllOpen] = useState(false);
+
+ const { isEstimateActive } = useEstimateOption();
+
+ return (
+ ) => Promise;
+ register: any;
+ control: any;
+ watch: any;
+ handleSubmit: any;
+};
+
+export const IssueWebViewForm: React.FC = (props) => {
+ const { isAllowed, issueDetails, submitChanges, register, control, watch, handleSubmit } = props;
+
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
+
+ const [characterLimit, setCharacterLimit] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+
+ const { setShowAlert } = useReloadConfirmations();
+
+ useEffect(() => {
+ if (isSubmitting === "submitted") {
+ setShowAlert(false);
+ setTimeout(async () => {
+ setIsSubmitting("saved");
+ }, 2000);
+ } else if (isSubmitting === "submitting") {
+ setShowAlert(true);
+ }
+ }, [isSubmitting, setShowAlert]);
+
+ const debouncedTitleSave = useDebouncedCallback(async () => {
+ setTimeout(async () => {
+ handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+ }, 500);
+ }, 1000);
+
+ const handleDescriptionFormSubmit = useCallback(
+ async (formData: Partial) => {
+ if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
+
+ await submitChanges({
+ name: formData.name ?? "",
+ description_html: formData.description_html ?? "",
+ });
+ },
+ [submitChanges]
+ );
+
+ return (
+ <>
+
{addSpaceIfCamelCase(state.name)}
{state.description}
diff --git a/web/components/tiptap/extensions/index.tsx b/web/components/tiptap/extensions/index.tsx index ea5d421a6..f5dc11384 100644 --- a/web/components/tiptap/extensions/index.tsx +++ b/web/components/tiptap/extensions/index.tsx @@ -32,122 +32,122 @@ export const TiptapExtensions = ( workspaceSlug: string, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ) => [ - StarterKit.configure({ - bulletList: { - HTMLAttributes: { - class: "list-disc list-outside leading-3 -mt-2", + StarterKit.configure({ + bulletList: { + HTMLAttributes: { + class: "list-disc list-outside leading-3 -mt-2", + }, }, - }, - orderedList: { - HTMLAttributes: { - class: "list-decimal list-outside leading-3 -mt-2", + orderedList: { + HTMLAttributes: { + class: "list-decimal list-outside leading-3 -mt-2", + }, }, - }, - listItem: { - HTMLAttributes: { - class: "leading-normal -mb-2", + listItem: { + HTMLAttributes: { + class: "leading-normal -mb-2", + }, }, - }, - blockquote: { - HTMLAttributes: { - class: "border-l-4 border-custom-border-300", + blockquote: { + HTMLAttributes: { + class: "border-l-4 border-custom-border-300", + }, }, - }, - code: { + code: { + HTMLAttributes: { + class: + "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000", + spellcheck: "false", + }, + }, + codeBlock: false, + horizontalRule: false, + dropcursor: { + color: "rgba(var(--color-text-100))", + width: 2, + }, + gapcursor: false, + }), + CodeBlockLowlight.configure({ + lowlight, + }), + HorizontalRule.extend({ + addInputRules() { + return [ + new InputRule({ + find: /^(?:---|—-|___\s|\*\*\*\s)$/, + handler: ({ state, range, commands }) => { + commands.splitBlock(); + + const attributes = {}; + const { tr } = state; + const start = range.from; + const end = range.to; + // @ts-ignore + tr.replaceWith(start - 1, end, this.type.create(attributes)); + }, + }), + ]; + }, + }).configure({ + HTMLAttributes: { + class: "mb-6 border-t border-custom-border-300", + }, + }), + Gapcursor, + TiptapLink.configure({ + protocols: ["http", "https"], + validate: (url) => isValidHttpUrl(url), HTMLAttributes: { class: - "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000", - spellcheck: "false", + "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", }, - }, - codeBlock: false, - horizontalRule: false, - dropcursor: { - color: "rgba(var(--color-text-100))", - width: 2, - }, - gapcursor: false, - }), - CodeBlockLowlight.configure({ - lowlight, - }), - HorizontalRule.extend({ - addInputRules() { - return [ - new InputRule({ - find: /^(?:---|—-|___\s|\*\*\*\s)$/, - handler: ({ state, range, commands }) => { - commands.splitBlock(); + }), + UpdatedImage.configure({ + HTMLAttributes: { + class: "rounded-lg border border-custom-border-300", + }, + }), + Placeholder.configure({ + placeholder: ({ node }) => { + if (node.type.name === "heading") { + return `Heading ${node.attrs.level}`; + } + if (node.type.name === "image" || node.type.name === "table") { + return ""; + } - const attributes = {}; - const { tr } = state; - const start = range.from; - const end = range.to; - // @ts-ignore - tr.replaceWith(start - 1, end, this.type.create(attributes)); - }, - }), - ]; - }, - }).configure({ - HTMLAttributes: { - class: "mb-6 border-t border-custom-border-300", - }, - }), - Gapcursor, - TiptapLink.configure({ - protocols: ["http", "https"], - validate: (url) => isValidHttpUrl(url), - HTMLAttributes: { - class: - "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", - }, - }), - UpdatedImage.configure({ - HTMLAttributes: { - class: "rounded-lg border border-custom-border-300", - }, - }), - Placeholder.configure({ - placeholder: ({ node }) => { - if (node.type.name === "heading") { - return `Heading ${node.attrs.level}`; - } - if (node.type.name === "image" || node.type.name === "table") { - return ""; - } - - return "Press '/' for commands..."; - }, - includeChildren: true, - }), - UniqueID.configure({ - types: ["image"], - }), - SlashCommand(workspaceSlug, setIsSubmitting), - TiptapUnderline, - TextStyle, - Color, - Highlight.configure({ - multicolor: true, - }), - TaskList.configure({ - HTMLAttributes: { - class: "not-prose pl-2", - }, - }), - TaskItem.configure({ - HTMLAttributes: { - class: "flex items-start my-4", - }, - nested: true, - }), - Markdown.configure({ - html: true, - transformCopiedText: true, - }), - Table, - TableHeader, - CustomTableCell, - TableRow, -]; + return "Press '/' for commands..."; + }, + includeChildren: true, + }), + UniqueID.configure({ + types: ["image"], + }), + SlashCommand(workspaceSlug, setIsSubmitting), + TiptapUnderline, + TextStyle, + Color, + Highlight.configure({ + multicolor: true, + }), + TaskList.configure({ + HTMLAttributes: { + class: "not-prose pl-2", + }, + }), + TaskItem.configure({ + HTMLAttributes: { + class: "flex items-start my-4", + }, + nested: true, + }), + Markdown.configure({ + html: true, + transformCopiedText: true, + }), + Table, + TableHeader, + CustomTableCell, + TableRow, + ]; diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx index 82304bfb0..84f691c35 100644 --- a/web/components/tiptap/index.tsx +++ b/web/components/tiptap/index.tsx @@ -1,9 +1,10 @@ +import { useImperativeHandle, useRef, forwardRef, useEffect } from "react"; import { useEditor, EditorContent, Editor } from "@tiptap/react"; import { useDebouncedCallback } from "use-debounce"; +// components import { EditorBubbleMenu } from "./bubble-menu"; import { TiptapExtensions } from "./extensions"; import { TiptapEditorProps } from "./props"; -import { useImperativeHandle, useRef, forwardRef } from "react"; import { ImageResizer } from "./extensions/image-resize"; import { TableMenu } from "./table-menu"; @@ -76,8 +77,8 @@ const Tiptap = (props: ITipTapRichTextEditor) => { const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md ${noBorder ? "" : "border border-custom-border-200"} ${ - borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0" - } ${customClassName}`; + borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0" + } ${customClassName}`; if (!editor) return null; editorRef.current = editor; diff --git a/web/components/tiptap/plugins/delete-image.tsx b/web/components/tiptap/plugins/delete-image.tsx index 568e4b748..fdf515ccc 100644 --- a/web/components/tiptap/plugins/delete-image.tsx +++ b/web/components/tiptap/plugins/delete-image.tsx @@ -1,43 +1,51 @@ -import { Plugin, PluginKey } from "@tiptap/pm/state"; +import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state"; import { Node as ProseMirrorNode } from "@tiptap/pm/model"; import fileService from "services/file.service"; const deleteKey = new PluginKey("delete-image"); +const IMAGE_NODE_TYPE = "image"; -const TrackImageDeletionPlugin = () => +interface ImageNode extends ProseMirrorNode { + attrs: { + src: string; + id: string; + }; +} + +const TrackImageDeletionPlugin = (): Plugin => new Plugin({ key: deleteKey, - appendTransaction: (transactions, oldState, newState) => { + appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { + const newImageSources = new Set(); + newState.doc.descendants((node) => { + if (node.type.name === IMAGE_NODE_TYPE) { + newImageSources.add(node.attrs.src); + } + }); + transactions.forEach((transaction) => { if (!transaction.docChanged) return; - const removedImages: ProseMirrorNode[] = []; + const removedImages: ImageNode[] = []; oldState.doc.descendants((oldNode, oldPos) => { - if (oldNode.type.name !== "image") return; - + if (oldNode.type.name !== IMAGE_NODE_TYPE) return; if (oldPos < 0 || oldPos > newState.doc.content.size) return; if (!newState.doc.resolve(oldPos).parent) return; + const newNode = newState.doc.nodeAt(oldPos); // Check if the node has been deleted or replaced - if (!newNode || newNode.type.name !== "image") { - // Check if the node still exists elsewhere in the document - let nodeExists = false; - newState.doc.descendants((node) => { - if (node.attrs.id === oldNode.attrs.id) { - nodeExists = true; - } - }); - if (!nodeExists) { - removedImages.push(oldNode as ProseMirrorNode); + if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) { + if (!newImageSources.has(oldNode.attrs.src)) { + removedImages.push(oldNode as ImageNode); } } }); - removedImages.forEach((node) => { + removedImages.forEach(async (node) => { const src = node.attrs.src; - onNodeDeleted(src); + await onNodeDeleted(src); }); }); @@ -47,10 +55,14 @@ const TrackImageDeletionPlugin = () => export default TrackImageDeletionPlugin; -async function onNodeDeleted(src: string) { - const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); - const resStatus = await fileService.deleteImage(assetUrlWithWorkspaceId); - if (resStatus === 204) { - console.log("Image deleted successfully"); +async function onNodeDeleted(src: string): Promise
- {getPriorityIcon(priority)} {priority ?? "None"}
+
),
value: {
@@ -116,7 +119,8 @@ export const SelectFilters: React.FC
- {getStateGroupIcon(state.group, "16", "16", state.color)} {state.name}
+
),
value: {
diff --git a/web/components/web-view/activity-message.tsx b/web/components/web-view/activity-message.tsx
new file mode 100644
index 000000000..956dfb904
--- /dev/null
+++ b/web/components/web-view/activity-message.tsx
@@ -0,0 +1,419 @@
+import { useRouter } from "next/router";
+
+// icons
+import { Icon, Tooltip } from "components/ui";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon } from "components/icons";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// types
+import { IIssueActivity } from "types";
+
+const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
+
+
+
+ );
+};
diff --git a/web/components/web-view/issue-attachments.tsx b/web/components/web-view/issue-attachments.tsx
new file mode 100644
index 000000000..ba4540318
--- /dev/null
+++ b/web/components/web-view/issue-attachments.tsx
@@ -0,0 +1,190 @@
+// react
+import React, { useState, useCallback } from "react";
+
+// next
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// swr
+import useSWR, { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+
+// react dropzone
+import { useDropzone } from "react-dropzone";
+
+// fetch key
+import { ISSUE_ATTACHMENTS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+
+// icons
+import { FileText, ChevronRight, X, Image as ImageIcon } from "lucide-react";
+
+// components
+import { Label, WebViewModal } from "components/web-view";
+import { DeleteAttachmentModal } from "components/issues";
+
+// types
+import type { IIssueAttachment } from "types";
+
+type Props = {
+ allowed: boolean;
+};
+
+const isImage = (fileName: string) => /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(fileName);
+
+export const IssueAttachments: React.FC
+
+ -
+ {issueActivities?.map((activityItem, index) => {
+ // determines what type of action is performed
+ const message = activityItem.field ? (
+
-
+ + {issueActivities.length > 1 && index !== issueActivities.length - 1 ? ( + + ) : null} +++++++++++ {activityItem.field ? ( + activityItem.new_value === "restore" ? ( ++
+ ) : ( + + ) + ) : activityItem.actor_detail.avatar && + activityItem.actor_detail.avatar !== "" ? ( + + ) : ( +
+ {activityItem.actor_detail.is_bot + ? activityItem.actor_detail.first_name.charAt(0) + : activityItem.actor_detail.display_name.charAt(0)} ++ )} ++++ {activityItem.field === "archived_at" && + activityItem.new_value !== "restore" ? ( + Plane + ) : activityItem.actor_detail.is_bot ? ( + + {activityItem.actor_detail.first_name} Bot + + ) : ( + + )}{" "} + {message}{" "} + + {timeAgo(activityItem.created_at)} + ++
+ );
+ } else if ("comment_json" in activityItem)
+ return (
+ -
+ ++
+
+
+
+ );
+ })}
+
+ setIsOpen(false)} modalTitle="Insert file">
+
+
+
+
+ );
+};
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
new file mode 100644
index 000000000..5f1da6a62
--- /dev/null
+++ b/web/components/web-view/issue-link-list.tsx
@@ -0,0 +1,138 @@
+// react
+import React, { useState } from "react";
+
+// next
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// swr
+import { mutate } from "swr";
+
+// services
+import issuesService from "services/issues.service";
+
+// icons
+// import { LinkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
+
+// components
+import { Label, WebViewModal, CreateUpdateLinkForm } from "components/web-view";
+
+// ui
+import { SecondaryButton } from "components/ui";
+
+// fetch keys
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+
+// types
+import type { IIssue } from "types";
+
+type Props = {
+ allowed: boolean;
+ issueDetails: IIssue;
+};
+
+export const IssueLinks: React.FC
+
+
+
+ {isLoading ? (
+
+ Uploading...
+ ) : ( + <> +Upload
+
+ {attachments?.map((attachment) => (
+
+
+
+
+ {isImage(attachment.attributes.name) ? (
+
+ ))}
+
+
+ {
+ setIsOpen(false);
+ setSelectedLink(null);
+ }}
+ modalTitle={selectedLink ? "Update Link" : "Add Link"}
+ >
+ {
+ setIsOpen(false);
+ setSelectedLink(null);
+ }}
+ data={links?.find((link) => link.id === selectedLink)}
+ />
+
+
+
+
+ );
+};
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
new file mode 100644
index 000000000..2fe0356f5
--- /dev/null
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -0,0 +1,355 @@
+// react
+import React, { useState } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// react hook forms
+import { Control, Controller, useWatch } from "react-hook-form";
+
+// icons
+import { BlockedIcon, BlockerIcon } from "components/icons";
+import { ChevronDown, PlayIcon, User, X, CalendarDays, LayoutGrid, Users } from "lucide-react";
+
+// hooks
+import useEstimateOption from "hooks/use-estimate-option";
+
+// ui
+import { SecondaryButton, CustomDatePicker } from "components/ui";
+
+// components
+import {
+ Label,
+ StateSelect,
+ PrioritySelect,
+ AssigneeSelect,
+ EstimateSelect,
+ ParentSelect,
+ BlockerSelect,
+} from "components/web-view";
+
+// types
+import type { IIssue } from "types";
+
+type Props = {
+ control: Control
+ {links?.map((link) => (
+ setIsOpen(true)}
+ className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
+ >
+
+
+
+
+
+
+
+ ))}
+
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/web/components/web-view/issue-web-view-form.tsx b/web/components/web-view/issue-web-view-form.tsx
new file mode 100644
index 000000000..ff9383fd0
--- /dev/null
+++ b/web/components/web-view/issue-web-view-form.tsx
@@ -0,0 +1,164 @@
+// react
+import React, { useCallback, useEffect, useState } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// react hook forms
+import { Controller } from "react-hook-form";
+
+// hooks
+
+import { useDebouncedCallback } from "use-debounce";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
+
+// ui
+import { TextArea } from "components/ui";
+
+// components
+import { TipTapEditor } from "components/tiptap";
+import { Label } from "components/web-view";
+
+// types
+import type { IIssue } from "types";
+
+type Props = {
+ isAllowed: boolean;
+ issueDetails: IIssue;
+ submitChanges: (data: Partial
+
+
+
+
+
+
+ (
+ submitChanges({ state: val })}
+ />
+ )}
+ />
+
+
+
+
+
+
+
+
+ Priority
+
+
+ (
+ submitChanges({ priority: val })}
+ />
+ )}
+ />
+
+
+
+ {isViewAllOpen && (
+ <>
+ {isEstimateActive && (
+
+
+
+
+
+ (
+ submitChanges({ assignees_list: [val] })}
+ />
+ )}
+ />
+
+
+
+ )}
+
+
+
+
+
+ (
+ submitChanges({ estimate_point: val })}
+ />
+ )}
+ />
+
+
+
+
+
+
+
+
+ (
+ submitChanges({ parent: val })}
+ />
+ )}
+ />
+
+
+
+
+
+
+
+ {blockerIssue &&
+ blockerIssue.map((issue) => (
+
+ ))}
+
+
+
+ (
+
+ submitChanges({
+ blocker_issues: val,
+ blockers_list: val?.map((i: any) => i.blocker_issue_detail?.id ?? ""),
+ })
+ }
+ />
+ )}
+ />
+
+
+
+
+
+
+
+
+ {blockedIssue &&
+ blockedIssue.map((issue) => (
+
+ ))}
+
+
+
+ (
+
+ submitChanges({
+ blocked_issues: val,
+ blocks_list: val?.map((i: any) => i.blocker_issue_detail?.id ?? ""),
+ })
+ }
+ />
+ )}
+ />
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ (
+
+ submitChanges({
+ target_date: val,
+ })
+ }
+ className="border-transparent !shadow-none !w-[6.75rem]"
+ minDate={startDate ? new Date(startDate) : undefined}
+ />
+ )}
+ />
+
+
+ setIsViewAllOpen((prev) => !prev)}
+ className="w-full flex justify-center items-center gap-1 !py-2"
+ >
+
+ {isViewAllOpen ? "View less" : "View all"}
+
+
+
+
+
+
+ {isAllowed ? (
+