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 96%
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..7c785d988 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 { useForm, Controller } 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;
@@ -76,7 +81,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)}
@@ -125,6 +130,7 @@ export const CommentCard: React.FC = observer((props) => {
editable={false}
customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
/>
+
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..c7a08faed 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;
@@ -125,11 +107,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..28c8b1691 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),
@@ -81,8 +83,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 +100,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
+
= (props) => {
position === "top" ? "-top-12" : "-bottom-12"
}`}
>
- = ({ 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 fa5df1227..353b55ae2 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -223,6 +223,15 @@ export const ProfileIssuesView = () => {
Object.keys(filtersToDisplay).length > 0 &&
nullFilters.length !== Object.keys(filtersToDisplay).length;
+ const isSubscribedIssuesRoute = router.pathname.includes("subscribed");
+ const isMySubscribedIssues =
+ (filters.subscriber &&
+ filters.subscriber.length > 0 &&
+ router.pathname.includes("my-issues")) ??
+ false;
+
+ const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
+
return (
<>
{
handleIssueAction={handleIssueAction}
openIssuesListModal={null}
removeIssue={null}
+ disableAddIssueOption={disableAddIssueOption}
trashBox={trashBox}
setTrashBox={setTrashBox}
viewProps={{
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index a1236b397..59cc5528b 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -14,7 +14,7 @@ import { Icon, Loader, Tooltip } from "components/ui";
// icons
import { EditOutlined } from "@mui/icons-material";
// helpers
-import { render12HourFormatTime, renderLongDetailDateFormat } from "helpers/date-time.helper";
+import { renderLongDetailDateFormat } from "helpers/date-time.helper";
import { renderEmoji } from "helpers/emoji.helper";
// fetch-keys
import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
@@ -35,6 +35,16 @@ export const ProfileSidebar = () => {
: null
);
+ // Create a date object for the current time in the specified timezone
+ const currentTime = new Date();
+ const formatter = new Intl.DateTimeFormat("en-US", {
+ timeZone: userProjectsData?.user_data.user_timezone,
+ hour12: false, // Use 24-hour format
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ const timeString = formatter.format(currentTime);
+
const userDetails = [
{
label: "Joined on",
@@ -44,7 +54,7 @@ export const ProfileSidebar = () => {
label: "Timezone",
value: (
- {render12HourFormatTime(new Date())}{" "}
+ {timeString}{" "}
{userProjectsData?.user_data.user_timezone}
),
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..28c8b1691 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";
@@ -55,6 +56,12 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
},
});
+ useEffect(() => {
+ if (editor) {
+ editor.commands.setContent(value);
+ }
+ }, [value]);
+
const editorRef: React.MutableRefObject = useRef(null);
useImperativeHandle(forwardedRef, () => ({
@@ -76,8 +83,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 {
+ 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/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx
new file mode 100644
index 000000000..b4f49d7be
--- /dev/null
+++ b/web/components/web-view/add-comment.tsx
@@ -0,0 +1,133 @@
+import React from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { useForm, Controller } from "react-hook-form";
+
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+
+// components
+import { TipTapEditor } from "components/tiptap";
+
+// icons
+import { Send } from "lucide-react";
+
+// ui
+import { Icon, SecondaryButton, Tooltip, PrimaryButton } from "components/ui";
+
+// types
+import type { IIssueComment } from "types";
+
+const defaultValues: Partial = {
+ 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..342bc4838
--- /dev/null
+++ b/web/components/web-view/index.ts
@@ -0,0 +1,17 @@
+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";
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
new file mode 100644
index 000000000..55089d60d
--- /dev/null
+++ b/web/components/web-view/issue-activity.tsx
@@ -0,0 +1,235 @@
+// react
+import React from "react";
+
+// next
+import Link from "next/link";
+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";
+import useToast from "hooks/use-toast";
+
+// components
+import { Label, AddComment } from "components/web-view";
+import { CommentCard } from "components/issues/comment";
+import { ActivityIcon, ActivityMessage } from "components/core";
+
+// 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 (
+ <>
+
{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/package.json b/space/package.json
index 1c9153567..768abb8ff 100644
--- a/space/package.json
+++ b/space/package.json
@@ -9,8 +9,15 @@
"lint": "next lint"
},
"dependencies": {
+ "@blueprintjs/core": "^4.16.3",
+ "@blueprintjs/popover2": "^1.13.3",
+ "@emotion/react": "^11.11.1",
+ "@emotion/styled": "^11.11.0",
"@headlessui/react": "^1.7.13",
- "@mui/icons-material": "^5.14.7",
+ "@heroicons/react": "^2.0.12",
+ "@mui/icons-material": "^5.14.1",
+ "@mui/material": "^5.14.1",
+ "@tailwindcss/typography": "^0.5.9",
"@tiptap-pro/extension-unique-id": "^2.1.0",
"@tiptap/extension-code-block-lowlight": "^2.0.4",
"@tiptap/extension-color": "^2.0.4",
@@ -33,17 +40,25 @@
"@tiptap/starter-kit": "^2.0.4",
"@tiptap/suggestion": "^2.0.4",
"axios": "^1.3.4",
+ "clsx": "^2.0.0",
"js-cookie": "^3.0.1",
+ "lowlight": "^2.9.0",
+ "lucide-react": "^0.263.1",
"mobx": "^6.10.0",
"mobx-react-lite": "^4.0.3",
"next": "12.3.2",
"next-images": "^1.8.5",
- "next-theme": "^0.1.5",
+ "next-themes": "^0.2.1",
"nprogress": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-hook-form": "^7.38.0",
+ "react-moveable": "^0.54.1",
"swr": "^2.2.2",
+ "tailwind-merge": "^1.14.0",
+ "tiptap-markdown": "^0.8.2",
"typescript": "4.9.5",
+ "use-debounce": "^9.0.4",
"uuid": "^9.0.0"
},
"devDependencies": {
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/Dockerfile.web b/web/Dockerfile.web
index 6fac46c2d..40946fa2d 100644
--- a/web/Dockerfile.web
+++ b/web/Dockerfile.web
@@ -15,6 +15,7 @@ FROM node:18-alpine AS installer
RUN apk add --no-cache libc6-compat
WORKDIR /app
ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ARG NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
@@ -29,11 +30,12 @@ COPY replace-env-vars.sh /usr/local/bin/
USER root
RUN chmod +x /usr/local/bin/replace-env-vars.sh
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+ BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+ NEXT_PUBLIC_DEPLOY_URL=$NEXT_PUBLIC_DEPLOY_URL
+
RUN yarn turbo run build --filter=web
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
- BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-ENV NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL}
RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL} web
FROM node:18-alpine AS runner
@@ -54,8 +56,11 @@ COPY --from=installer --chown=captain:plane /app/web/.next/standalone ./
COPY --from=installer --chown=captain:plane /app/web/.next ./web/.next
ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
+ARG NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
+
ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
- BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \
+ NEXT_PUBLIC_DEPLOY_URL=$NEXT_PUBLIC_DEPLOY_URL
USER root
COPY replace-env-vars.sh /usr/local/bin/
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 5a9f68d8b..ed3902a4a 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -212,7 +212,7 @@ export const ExistingIssuesListModal: React.FC = ({
onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
className="flex-shrink-0"
>
- workspace level
+ Workspace Level
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
+
= ({ 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}
/>
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
{reactionEmojis.map((emoji) => (
@@ -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/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 = ({
: 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}
/>
= ({
Object.keys(filtersToDisplay).length > 0 &&
nullFilters.length !== Object.keys(filtersToDisplay).length;
+ const isSubscribedIssuesRoute = router.pathname.includes("subscribed");
+ const isMySubscribedIssues =
+ (filters.subscriber &&
+ filters.subscriber.length > 0 &&
+ router.pathname.includes("my-issues")) ??
+ false;
+
+ const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
+
return (
<>
= ({
handleIssueAction={handleIssueAction}
openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
removeIssue={null}
+ disableAddIssueOption={disableAddIssueOption}
trashBox={trashBox}
setTrashBox={setTrashBox}
viewProps={{
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 && (
+
+ )}
-
+
+
+ );
+};
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 + + ) : ( + + + {activityItem.actor_detail.is_bot + ? activityItem.actor_detail.first_name + : activityItem.actor_detail.display_name} + + + )}{" "} + {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..6a247365b
--- /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..863464764
--- /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 ? (
+