{
editor?.chain().focus().run();
}}
+ onMouseLeave={() => {
+ hideDragHandle?.();
+ }}
className={`cursor-text ${editorClassNames}`}
>
{children}
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index fab0d5b74..19d8ce894 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -56,6 +56,7 @@ export const CoreEditorExtensions = (
code: false,
codeBlock: false,
horizontalRule: false,
+ blockquote: false,
dropcursor: {
color: "rgba(var(--color-text-100))",
width: 2,
diff --git a/packages/editor/core/src/ui/extensions/quote/index.tsx b/packages/editor/core/src/ui/extensions/quote/index.tsx
index de8e85eca..8fed1ced2 100644
--- a/packages/editor/core/src/ui/extensions/quote/index.tsx
+++ b/packages/editor/core/src/ui/extensions/quote/index.tsx
@@ -1,10 +1,9 @@
-import { isAtStartOfNode } from "@tiptap/core";
import Blockquote from "@tiptap/extension-blockquote";
export const CustomQuoteExtension = Blockquote.extend({
addKeyboardShortcuts() {
return {
- Enter: ({ editor }) => {
+ Enter: () => {
const { $from, $to, $head } = this.editor.state.selection;
const parent = $head.node(-1);
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index 72dfab954..21d610751 100644
--- a/packages/editor/document-editor/package.json
+++ b/packages/editor/document-editor/package.json
@@ -28,6 +28,7 @@
"react-dom": "18.2.0"
},
"dependencies": {
+ "@floating-ui/react": "^0.26.4",
"@plane/editor-core": "*",
"@plane/editor-extensions": "*",
"@plane/ui": "*",
@@ -36,6 +37,7 @@
"@tiptap/pm": "^2.1.13",
"@tiptap/suggestion": "^2.1.13",
"eslint-config-next": "13.2.4",
+ "lucide-react": "^0.309.0",
"react-popper": "^2.3.0",
"tippy.js": "^6.3.7",
"uuid": "^9.0.1"
diff --git a/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
new file mode 100644
index 000000000..136d04e01
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
@@ -0,0 +1,148 @@
+import { isValidHttpUrl } from "@plane/editor-core";
+import { Node } from "@tiptap/pm/model";
+import { Link2Off } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { LinkViewProps } from "./link-view";
+
+const InputView = ({
+ label,
+ defaultValue,
+ placeholder,
+ onChange,
+}: {
+ label: string;
+ defaultValue: string;
+ placeholder: string;
+ onChange: (e: React.ChangeEvent) => void;
+}) => (
+ ();
+
+ const getText = (from: number, to: number) => {
+ const text = editor.state.doc.textBetween(from, to, "\n");
+ return text;
+ };
+
+ const isValidUrl = (urlString: string) => {
+ var urlPattern = new RegExp(
+ "^(https?:\\/\\/)?" + // validate protocol
+ "([\\w-]+\\.)+[\\w-]{2,}" + // validate domain name
+ "|((\\d{1,3}\\.){3}\\d{1,3})" + // validate IP (v4) address
+ "(\\:\\d+)?(\\/[-\\w.%]+)*" + // validate port and path
+ "(\\?[;&\\w.%=-]*)?" + // validate query string
+ "(\\#[-\\w]*)?$", // validate fragment locator
+ "i"
+ );
+ const regexTest = urlPattern.test(urlString);
+ const urlTest = isValidHttpUrl(urlString); // Ensure you have defined isValidHttpUrl
+ return regexTest && urlTest;
+ };
+
+ const handleUpdateLink = (url: string) => {
+ setLocalUrl(url);
+ };
+
+ useEffect(
+ () => () => {
+ if (linkRemoved.current) return;
+
+ const url = isValidUrl(localUrl) ? localUrl : viewProps.url;
+
+ editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+ editor.view.dispatch(editor.state.tr.addMark(from, to, editor.schema.marks.link.create({ href: url })));
+ },
+ [localUrl]
+ );
+
+ const handleUpdateText = (text: string) => {
+ if (text === "") {
+ return;
+ }
+
+ const node = editor.view.state.doc.nodeAt(from) as Node;
+ if (!node) return;
+ const marks = node.marks;
+ if (!marks) return;
+
+ editor.chain().setTextSelection(from).run();
+
+ editor.chain().deleteRange({ from: positionRef.from, to: positionRef.to }).run();
+ editor.chain().insertContent(text).run();
+
+ editor
+ .chain()
+ .setTextSelection({
+ from: from,
+ to: from + text.length,
+ })
+ .run();
+
+ setPositionRef({ from: from, to: from + text.length });
+
+ marks.forEach((mark) => {
+ editor.chain().setMark(mark.type.name, mark.attrs).run();
+ });
+ };
+
+ const removeLink = () => {
+ editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+ linkRemoved.current = true;
+ viewProps.onActionCompleteHandler({
+ title: "Link successfully removed",
+ message: "The link was removed from the text.",
+ type: "success",
+ });
+ viewProps.closeLinkView();
+ };
+
+ return (
+ ;
editor: Editor;
+ onActionCompleteHandler: (action: {
+ title: string;
+ message: string;
+ type: "success" | "error" | "warning" | "info";
+ }) => void;
editorClassNames: string;
editorContentCustomClassNames?: string;
readonly: boolean;
@@ -29,6 +47,23 @@ export const PageRenderer = (props: IPageRenderer) => {
const [pageTitle, setPagetitle] = useState(documentDetails.title);
+ const [linkViewProps, setLinkViewProps] = useState();
+ const [isOpen, setIsOpen] = useState(false);
+ const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ middleware: [flip(), shift(), hide({ strategy: "referenceHidden" })],
+ whileElementsMounted: autoUpdate,
+ });
+
+ const dismiss = useDismiss(context, {
+ ancestorScroll: true,
+ });
+
+ const { getFloatingProps } = useInteractions([dismiss]);
+
const debouncedUpdatePageTitle = debounce(updatePageTitle, 300);
const handlePageTitleChange = (title: string) => {
@@ -36,8 +71,101 @@ export const PageRenderer = (props: IPageRenderer) => {
debouncedUpdatePageTitle(title);
};
+ const [cleanup, setcleanup] = useState(() => () => {});
+
+ const floatingElementRef = useRef(null);
+
+ const closeLinkView = () => {
+ setIsOpen(false);
+ };
+
+ const switchLinkView = (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => {
+ if (!linkViewProps) return;
+ setLinkViewProps({
+ ...linkViewProps,
+ view: view,
+ });
+ };
+
+ const handleLinkHover = useCallback(
+ (event: React.MouseEvent) => {
+ if (!editor) return;
+ const target = event.target as HTMLElement;
+ const view = editor.view as EditorView;
+
+ if (!target || !view) return;
+ const pos = view.posAtDOM(target, 0);
+ if (!pos || pos < 0) return;
+
+ if (target.nodeName !== "A") return;
+
+ const node = view.state.doc.nodeAt(pos) as Node;
+ if (!node || !node.isAtom) return;
+
+ // we need to check if any of the marks are links
+ const marks = node.marks;
+
+ if (!marks) return;
+
+ const linkMark = marks.find((mark) => mark.type.name === "link");
+
+ if (!linkMark) return;
+
+ if (floatingElementRef.current) {
+ floatingElementRef.current?.remove();
+ }
+
+ if (cleanup) cleanup();
+
+ const href = linkMark.attrs.href;
+ const componentLink = new ReactRenderer(LinkView, {
+ props: {
+ view: "LinkPreview",
+ url: href,
+ editor: editor,
+ from: pos,
+ to: pos + node.nodeSize,
+ },
+ editor,
+ });
+
+ const referenceElement = target as HTMLElement;
+ const floatingElement = componentLink.element as HTMLElement;
+
+ floatingElementRef.current = floatingElement;
+
+ const cleanupFunc = autoUpdate(referenceElement, floatingElement, () => {
+ computePosition(referenceElement, floatingElement, {
+ placement: "bottom",
+ middleware: [
+ flip(),
+ shift(),
+ hide({
+ strategy: "referenceHidden",
+ }),
+ ],
+ }).then(({ x, y }) => {
+ setCoordinates({ x: x - 300, y: y - 50 });
+ setIsOpen(true);
+ setLinkViewProps({
+ onActionCompleteHandler: props.onActionCompleteHandler,
+ closeLinkView: closeLinkView,
+ view: "LinkPreview",
+ url: href,
+ editor: editor,
+ from: pos,
+ to: pos + node.nodeSize,
+ });
+ });
+ });
+
+ setcleanup(cleanupFunc);
+ },
+ [editor, cleanup]
+ );
+
return (
-
+
+ {
+ e.stopPropagation();
+ }}
+ className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm"
+ defaultValue={defaultValue}
+ onChange={onChange}
+ />
+
+);
+
+export const LinkEditView = ({
+ viewProps,
+}: {
+ viewProps: LinkViewProps;
+ switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void;
+}) => {
+ const { editor, from, to } = viewProps;
+
+ const [positionRef, setPositionRef] = useState({ from: from, to: to });
+ const [localUrl, setLocalUrl] = useState(viewProps.url);
+
+ const linkRemoved = useRef e.key === "Enter" && viewProps.closeLinkView()}
+ className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2"
+ >
+ handleUpdateLink(e.target.value)}
+ />
+ handleUpdateText(e.target.value)}
+ />
+
+
+ );
+};
diff --git a/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx
new file mode 100644
index 000000000..fa73adbe1
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx
@@ -0,0 +1,9 @@
+import { LinkViewProps } from "./link-view";
+
+export const LinkInputView = ({
+ viewProps,
+ switchView,
+}: {
+ viewProps: LinkViewProps;
+ switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void;
+}) =>
+
+ LinkInputView
; diff --git a/packages/editor/document-editor/src/ui/components/links/link-preview.tsx b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx new file mode 100644 index 000000000..ff3fd0263 --- /dev/null +++ b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx @@ -0,0 +1,52 @@ +import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react"; +import { LinkViewProps } from "./link-view"; + +export const LinkPreview = ({ + viewProps, + switchView, +}: { + viewProps: LinkViewProps; + switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void; +}) => { + const { editor, from, to, url } = viewProps; + + const removeLink = () => { + editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link)); + viewProps.onActionCompleteHandler({ + title: "Link successfully removed", + message: "The link was removed from the text.", + type: "success", + }); + viewProps.closeLinkView(); + }; + + const copyLinkToClipboard = () => { + navigator.clipboard.writeText(url); + viewProps.onActionCompleteHandler({ + title: "Link successfully copied", + message: "The link was copied to the clipboard.", + type: "success", + }); + viewProps.closeLinkView(); + }; + + return ( +
+
+ );
+};
diff --git a/packages/editor/document-editor/src/ui/components/links/link-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-view.tsx
new file mode 100644
index 000000000..f1d22a68e
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-view.tsx
@@ -0,0 +1,48 @@
+import { Editor } from "@tiptap/react";
+import { CSSProperties, useEffect, useState } from "react";
+import { LinkEditView } from "./link-edit-view";
+import { LinkInputView } from "./link-input-view";
+import { LinkPreview } from "./link-preview";
+
+export interface LinkViewProps {
+ view?: "LinkPreview" | "LinkEditView" | "LinkInputView";
+ editor: Editor;
+ from: number;
+ to: number;
+ url: string;
+ closeLinkView: () => void;
+ onActionCompleteHandler: (action: {
+ title: string;
+ message: string;
+ type: "success" | "error" | "warning" | "info";
+ }) => void;
+}
+
+export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
+ const [currentView, setCurrentView] = useState(props.view ?? "LinkInputView");
+ const [prevFrom, setPrevFrom] = useState(props.from);
+
+ const switchView = (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => {
+ setCurrentView(view);
+ };
+
+ useEffect(() => {
+ if (props.from !== prevFrom) {
+ setCurrentView("LinkPreview");
+ setPrevFrom(props.from);
+ }
+ }, []);
+
+ const renderView = () => {
+ switch (currentView) {
+ case "LinkPreview":
+ return
+
+ {url.length > 40 ? url.slice(0, 40) + "..." : url}
+
+
+
+
+
+
+
-
{!readonly ? (
handlePageTitleChange(e.target.value)}
@@ -52,11 +180,20 @@ export const PageRenderer = (props: IPageRenderer) => {
disabled
/>
)}
-
+
+ {isOpen && linkViewProps && coordinates && (
+
);
};
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index df3554024..34aa54c50 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -151,6 +151,7 @@ const DocumentEditor = ({
+
+ )}
+
Promise.resolve()}
readonly={true}
editor={editor}
diff --git a/packages/editor/extensions/src/extensions/drag-drop.tsx b/packages/editor/extensions/src/extensions/drag-drop.tsx
index 269caad93..af99fec61 100644
--- a/packages/editor/extensions/src/extensions/drag-drop.tsx
+++ b/packages/editor/extensions/src/extensions/drag-drop.tsx
@@ -3,6 +3,7 @@ import { Extension } from "@tiptap/core";
import { PluginKey, NodeSelection, Plugin } from "@tiptap/pm/state";
// @ts-ignore
import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
+import React from "react";
function createDragHandleElement(): HTMLElement {
const dragHandleElement = document.createElement("div");
@@ -30,6 +31,7 @@ function createDragHandleElement(): HTMLElement {
export interface DragHandleOptions {
dragHandleWidth: number;
+ setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
}
function absoluteRect(node: Element) {
@@ -43,22 +45,23 @@ function absoluteRect(node: Element) {
}
function nodeDOMAtCoords(coords: { x: number; y: number }) {
- return document.elementsFromPoint(coords.x, coords.y).find((elem: Element) => {
- return (
- elem.parentElement?.matches?.(".ProseMirror") ||
- elem.matches(
- [
- "li",
- "p:not(:first-child)",
- "pre",
- "blockquote",
- "h1, h2, h3",
- "[data-type=horizontalRule]",
- ".tableWrapper",
- ].join(", ")
- )
+ return document
+ .elementsFromPoint(coords.x, coords.y)
+ .find(
+ (elem: Element) =>
+ elem.parentElement?.matches?.(".ProseMirror") ||
+ elem.matches(
+ [
+ "li",
+ "p:not(:first-child)",
+ "pre",
+ "blockquote",
+ "h1, h2, h3",
+ "[data-type=horizontalRule]",
+ ".tableWrapper",
+ ].join(", ")
+ )
);
- });
}
function nodePosAtDOM(node: Element, view: EditorView) {
@@ -150,6 +153,8 @@ function DragHandle(options: DragHandleOptions) {
}
}
+ options.setHideDragHandle?.(hideDragHandle);
+
return new Plugin({
key: new PluginKey("dragHandle"),
view: (view) => {
@@ -237,14 +242,16 @@ function DragHandle(options: DragHandleOptions) {
});
}
-export const DragAndDrop = Extension.create({
- name: "dragAndDrop",
+export const DragAndDrop = (setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void) =>
+ Extension.create({
+ name: "dragAndDrop",
- addProseMirrorPlugins() {
- return [
- DragHandle({
- dragHandleWidth: 24,
- }),
- ];
- },
-});
+ addProseMirrorPlugins() {
+ return [
+ DragHandle({
+ dragHandleWidth: 24,
+ setHideDragHandle,
+ }),
+ ];
+ },
+ });
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
index 1e81c8173..3d1da6cda 100644
--- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@@ -1,14 +1,15 @@
-import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
-import Placeholder from "@tiptap/extension-placeholder";
import { UploadImage } from "@plane/editor-core";
+import { DragAndDrop, SlashCommand } from "@plane/editor-extensions";
+import Placeholder from "@tiptap/extension-placeholder";
export const RichTextEditorExtensions = (
uploadFile: UploadImage,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
- dragDropEnabled?: boolean
+ dragDropEnabled?: boolean,
+ setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
) => [
SlashCommand(uploadFile, setIsSubmitting),
- dragDropEnabled === true && DragAndDrop,
+ dragDropEnabled === true && DragAndDrop(setHideDragHandle),
Placeholder.configure({
placeholder: ({ node }) => {
if (node.type.name === "heading") {
diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
index 17d701600..43c3f8f34 100644
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -1,5 +1,4 @@
"use client";
-import * as React from "react";
import {
DeleteImage,
EditorContainer,
@@ -10,8 +9,9 @@ import {
UploadImage,
useEditor,
} from "@plane/editor-core";
-import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
+import * as React from "react";
import { RichTextEditorExtensions } from "src/ui/extensions";
+import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
export type IRichTextEditor = {
value: string;
@@ -66,6 +66,14 @@ const RichTextEditor = ({
rerenderOnPropsChange,
mentionSuggestions,
}: RichTextEditorProps) => {
+ const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
+
+ // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
+ // loads such that we can invoke it from react when the cursor leaves the container
+ const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
+ setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
+ };
+
const editor = useEditor({
onChange,
debouncedUpdatesEnabled,
@@ -78,7 +86,7 @@ const RichTextEditor = ({
restoreFile,
forwardedRef,
rerenderOnPropsChange,
- extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting, dragDropEnabled),
+ extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting, dragDropEnabled, setHideDragHandleFunction),
mentionHighlights,
mentionSuggestions,
});
@@ -92,7 +100,7 @@ const RichTextEditor = ({
if (!editor) return null;
return (
-
+
{editor && ;
+ }
+ | {
+ widgetKey: "created_issues";
+ filters: Partial;
+ }
+ | {
+ widgetKey: "issues_by_state_groups";
+ filters: Partial;
+ }
+ | {
+ widgetKey: "issues_by_priority";
+ filters: Partial;
+ };
+
+export type TWidget = {
+ id: string;
+ is_visible: boolean;
+ key: TWidgetKeys;
+ readonly widget_filters: // only for read
+ TAssignedIssuesWidgetFilters &
+ TCreatedIssuesWidgetFilters &
+ TIssuesByStateGroupsWidgetFilters &
+ TIssuesByPriorityWidgetFilters;
+ filters: // only for write
+ TAssignedIssuesWidgetFilters &
+ TCreatedIssuesWidgetFilters &
+ TIssuesByStateGroupsWidgetFilters &
+ TIssuesByPriorityWidgetFilters;
+};
+
+export type TWidgetStatsRequestParams =
+ | {
+ widget_key: TWidgetKeys;
+ }
+ | {
+ target_date: string;
+ issue_type: TIssuesListTypes;
+ widget_key: "assigned_issues";
+ expand?: "issue_relation";
+ }
+ | {
+ target_date: string;
+ issue_type: TIssuesListTypes;
+ widget_key: "created_issues";
+ }
+ | {
+ target_date: string;
+ widget_key: "issues_by_state_groups";
+ }
+ | {
+ target_date: string;
+ widget_key: "issues_by_priority";
+ };
+
+export type TWidgetIssue = TIssue & {
+ issue_relation: {
+ id: string;
+ project_id: string;
+ relation_type: TIssueRelationTypes;
+ sequence_id: number;
+ }[];
+};
+
+// widget stats responses
+export type TOverviewStatsWidgetResponse = {
+ assigned_issues_count: number;
+ completed_issues_count: number;
+ created_issues_count: number;
+ pending_issues_count: number;
+};
+
+export type TAssignedIssuesWidgetResponse = {
+ issues: TWidgetIssue[];
+ count: number;
+};
+
+export type TCreatedIssuesWidgetResponse = {
+ issues: TWidgetIssue[];
+ count: number;
+};
+
+export type TIssuesByStateGroupsWidgetResponse = {
+ count: number;
+ state: TStateGroups;
+};
+
+export type TIssuesByPriorityWidgetResponse = {
+ count: number;
+ priority: TIssuePriorities;
+};
+
+export type TRecentActivityWidgetResponse = IIssueActivity;
+
+export type TRecentProjectsWidgetResponse = string[];
+
+export type TRecentCollaboratorsWidgetResponse = {
+ active_issue_count: number;
+ user_id: string;
+};
+
+export type TWidgetStatsResponse =
+ | TOverviewStatsWidgetResponse
+ | TIssuesByStateGroupsWidgetResponse[]
+ | TIssuesByPriorityWidgetResponse[]
+ | TAssignedIssuesWidgetResponse
+ | TCreatedIssuesWidgetResponse
+ | TRecentActivityWidgetResponse[]
+ | TRecentProjectsWidgetResponse
+ | TRecentCollaboratorsWidgetResponse[];
+
+// dashboard
+export type TDashboard = {
+ created_at: string;
+ created_by: string | null;
+ description_html: string;
+ id: string;
+ identifier: string | null;
+ is_default: boolean;
+ name: string;
+ owned_by: string;
+ type: string;
+ updated_at: string;
+ updated_by: string | null;
+};
+
+export type THomeDashboardResponse = {
+ dashboard: TDashboard;
+ widgets: TWidget[];
+};
diff --git a/packages/types/src/inbox.d.ts b/packages/types/src/inbox.d.ts
index 1b474c3ab..4d666ae83 100644
--- a/packages/types/src/inbox.d.ts
+++ b/packages/types/src/inbox.d.ts
@@ -1,7 +1,13 @@
-import { TIssue } from "./issues";
+import { TIssue } from "./issues/base";
import type { IProjectLite } from "./projects";
-export interface IInboxIssue extends TIssue {
+export type TInboxIssueExtended = {
+ completed_at: string | null;
+ start_date: string | null;
+ target_date: string | null;
+};
+
+export interface IInboxIssue extends TIssue, TInboxIssueExtended {
issue_inbox: {
duplicate_to: string | null;
id: string;
@@ -48,7 +54,12 @@ interface StatusDuplicate {
duplicate_to: string;
}
-export type TInboxStatus = StatusReject | StatusSnoozed | StatusAccepted | StatusDuplicate | StatePending;
+export type TInboxStatus =
+ | StatusReject
+ | StatusSnoozed
+ | StatusAccepted
+ | StatusDuplicate
+ | StatePending;
export interface IInboxFilterOptions {
priority?: string[] | null;
diff --git a/packages/types/src/index.d.ts b/packages/types/src/index.d.ts
index 4bbed28d3..209aa6794 100644
--- a/packages/types/src/index.d.ts
+++ b/packages/types/src/index.d.ts
@@ -1,6 +1,7 @@
export * from "./users";
export * from "./workspace";
export * from "./cycles";
+export * from "./dashboard";
export * from "./projects";
export * from "./state";
export * from "./invitation";
diff --git a/packages/types/src/issues.d.ts b/packages/types/src/issues.d.ts
index c0ad7bc7f..da6db8062 100644
--- a/packages/types/src/issues.d.ts
+++ b/packages/types/src/issues.d.ts
@@ -1,8 +1,6 @@
import { ReactElement } from "react";
import { KeyedMutator } from "swr";
import type {
- IState,
- IUser,
ICycle,
IModule,
IUserLite,
@@ -11,7 +9,7 @@ import type {
IStateLite,
Properties,
IIssueDisplayFilterOptions,
- IIssueReaction,
+ TIssue,
} from "@plane/types";
export interface IIssueCycle {
@@ -78,59 +76,6 @@ export interface IssueRelation {
relation: "blocking" | null;
}
-export interface IIssue {
- archived_at: string;
- assignees: string[];
- assignee_details: IUser[];
- attachment_count: number;
- attachments: any[];
- issue_relations: IssueRelation[];
- issue_reactions: IIssueReaction[];
- related_issues: IssueRelation[];
- bridge_id?: string | null;
- completed_at: Date;
- created_at: string;
- created_by: string;
- cycle: string | null;
- cycle_id: string | null;
- cycle_detail: ICycle | null;
- description: any;
- description_html: any;
- description_stripped: any;
- estimate_point: number | null;
- id: string;
- // tempId is used for optimistic updates. It is not a part of the API response.
- tempId?: string;
- issue_cycle: IIssueCycle | null;
- issue_link: ILinkDetails[];
- issue_module: IIssueModule | null;
- labels: string[];
- label_details: any[];
- is_draft: boolean;
- links_list: IIssueLink[];
- link_count: number;
- module: string | null;
- module_id: string | null;
- name: string;
- parent: string | null;
- parent_detail: IIssueParent | null;
- priority: TIssuePriorities;
- project: string;
- project_detail: IProjectLite;
- sequence_id: number;
- sort_order: number;
- sprints: string | null;
- start_date: string | null;
- state: string;
- state_detail: IState;
- sub_issues_count: number;
- target_date: string | null;
- updated_at: string;
- updated_by: string;
- workspace: string;
- workspace_detail: IWorkspaceLite;
-}
-
export interface ISubIssuesState {
backlog: number;
unstarted: number;
@@ -276,69 +221,10 @@ export type GroupByColumnTypes =
export interface IGroupByColumn {
id: string;
name: string;
- Icon: ReactElement | undefined;
+ icon: ReactElement | undefined;
payload: Partial;
}
export interface IIssueMap {
[key: string]: TIssue;
}
-
-// new issue structure types
-export type TIssue = {
- id: string;
- name: string;
- state_id: string;
- description_html: string;
- sort_order: number;
- completed_at: string | null;
- estimate_point: number | null;
- priority: TIssuePriorities;
- start_date: string | null;
- target_date: string | null;
- sequence_id: number;
- project_id: string;
- parent_id: string | null;
- cycle_id: string | null;
- module_id: string | null;
- label_ids: string[];
- assignee_ids: string[];
- sub_issues_count: number;
- created_at: string;
- updated_at: string;
- created_by: string;
- updated_by: string;
- attachment_count: number;
- link_count: number;
- is_subscribed: boolean;
- archived_at: boolean;
- is_draft: boolean;
- // tempId is used for optimistic updates. It is not a part of the API response.
- tempId?: string;
- // issue details
- related_issues: any;
- issue_reactions: any;
- issue_relations: any;
- issue_cycle: any;
- issue_module: any;
- parent_detail: any;
- issue_link: any;
-};
-
-export type TIssueMap = {
- [issue_id: string]: TIssue;
-};
-
-export type TLoader = "init-loader" | "mutation" | undefined;
-
-export type TGroupedIssues = {
- [group_id: string]: string[];
-};
-
-export type TSubGroupedIssues = {
- [sub_grouped_id: string]: {
- [group_id: string]: string[];
- };
-};
-
-export type TUnGroupedIssues = string[];
diff --git a/packages/types/src/issues/issue.d.ts b/packages/types/src/issues/issue.d.ts
index e9ec14528..9734f85c2 100644
--- a/packages/types/src/issues/issue.d.ts
+++ b/packages/types/src/issues/issue.d.ts
@@ -1,32 +1,41 @@
+import { TIssuePriorities } from "../issues";
+
// new issue structure types
export type TIssue = {
id: string;
+ sequence_id: number;
name: string;
- state_id: string;
description_html: string;
sort_order: number;
- completed_at: string | null;
- estimate_point: number | null;
+
+ state_id: string;
priority: TIssuePriorities;
- start_date: string;
- target_date: string;
- sequence_id: number;
+ label_ids: string[];
+ assignee_ids: string[];
+ estimate_point: number | null;
+
+ sub_issues_count: number;
+ attachment_count: number;
+ link_count: number;
+
project_id: string;
parent_id: string | null;
cycle_id: string | null;
module_id: string | null;
- label_ids: string[];
- assignee_ids: string[];
- sub_issues_count: number;
+
created_at: string;
updated_at: string;
+ start_date: string | null;
+ target_date: string | null;
+ completed_at: string | null;
+ archived_at: string | null;
+
created_by: string;
updated_by: string;
- attachment_count: number;
- link_count: number;
- is_subscribed: boolean;
- archived_at: boolean;
+
is_draft: boolean;
+ is_subscribed: boolean;
+
// tempId is used for optimistic updates. It is not a part of the API response.
tempId?: string;
};
diff --git a/packages/types/src/issues/issue_reaction.d.ts b/packages/types/src/issues/issue_reaction.d.ts
index 2fe646246..6fc071a9f 100644
--- a/packages/types/src/issues/issue_reaction.d.ts
+++ b/packages/types/src/issues/issue_reaction.d.ts
@@ -17,5 +17,5 @@ export type TIssueReactionMap = {
};
export type TIssueReactionIdMap = {
- [issue_id: string]: string[];
+ [issue_id: string]: { [reaction: string]: string[] };
};
diff --git a/packages/types/src/issues/issue_relation.d.ts b/packages/types/src/issues/issue_relation.d.ts
index 0d959ff6b..0b1c5f7cd 100644
--- a/packages/types/src/issues/issue_relation.d.ts
+++ b/packages/types/src/issues/issue_relation.d.ts
@@ -6,12 +6,7 @@ export type TIssueRelationTypes =
| "duplicate"
| "relates_to";
-export type TIssueRelationObject = { issue_detail: TIssue };
-
-export type TIssueRelation = Record<
- TIssueRelationTypes,
- TIssueRelationObject[]
->;
+export type TIssueRelation = Record;
export type TIssueRelationMap = {
[issue_id: string]: Record;
diff --git a/packages/types/src/issues/issue_sub_issues.d.ts b/packages/types/src/issues/issue_sub_issues.d.ts
index 76dcf1288..e604761ed 100644
--- a/packages/types/src/issues/issue_sub_issues.d.ts
+++ b/packages/types/src/issues/issue_sub_issues.d.ts
@@ -1,11 +1,11 @@
import { TIssue } from "./issue";
export type TSubIssuesStateDistribution = {
- backlog: number;
- unstarted: number;
- started: number;
- completed: number;
- cancelled: number;
+ backlog: string[];
+ unstarted: string[];
+ started: string[];
+ completed: string[];
+ cancelled: string[];
};
export type TIssueSubIssues = {
diff --git a/packages/types/src/projects.d.ts b/packages/types/src/projects.d.ts
index a412180b8..9c963258b 100644
--- a/packages/types/src/projects.d.ts
+++ b/packages/types/src/projects.d.ts
@@ -1,5 +1,11 @@
import { EUserProjectRoles } from "constants/project";
-import type { IUser, IUserLite, IWorkspace, IWorkspaceLite, TStateGroups } from ".";
+import type {
+ IUser,
+ IUserLite,
+ IWorkspace,
+ IWorkspaceLite,
+ TStateGroups,
+} from ".";
export interface IProject {
archive_in: number;
@@ -52,6 +58,11 @@ export interface IProjectLite {
id: string;
name: string;
identifier: string;
+ emoji: string | null;
+ icon_prop: {
+ name: string;
+ color: string;
+ } | null;
}
type ProjectPreferences = {
diff --git a/packages/types/src/view-props.d.ts b/packages/types/src/view-props.d.ts
index 282fc5a9c..7f1d49632 100644
--- a/packages/types/src/view-props.d.ts
+++ b/packages/types/src/view-props.d.ts
@@ -1,4 +1,9 @@
-export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+export type TIssueLayouts =
+ | "list"
+ | "kanban"
+ | "calendar"
+ | "spreadsheet"
+ | "gantt_chart";
export type TIssueGroupByOptions =
| "state"
@@ -108,10 +113,16 @@ export interface IIssueDisplayProperties {
updated_on?: boolean;
}
+export type TIssueKanbanFilters = {
+ group_by: string[];
+ sub_group_by: string[];
+};
+
export interface IIssueFilters {
filters: IIssueFilterOptions | undefined;
displayFilters: IIssueDisplayFilterOptions | undefined;
displayProperties: IIssueDisplayProperties | undefined;
+ kanbanFilters: TIssueKanbanFilters | undefined;
}
export interface IIssueFiltersResponse {
diff --git a/packages/types/src/workspace-views.d.ts b/packages/types/src/workspace-views.d.ts
index 29aa56742..e270f4f69 100644
--- a/packages/types/src/workspace-views.d.ts
+++ b/packages/types/src/workspace-views.d.ts
@@ -29,4 +29,8 @@ export interface IWorkspaceView {
};
}
-export type TStaticViewTypes = "all-issues" | "assigned" | "created" | "subscribed";
+export type TStaticViewTypes =
+ | "all-issues"
+ | "assigned"
+ | "created"
+ | "subscribed";
diff --git a/packages/types/src/workspace.d.ts b/packages/types/src/workspace.d.ts
index 2fc8d6912..2d7e94d95 100644
--- a/packages/types/src/workspace.d.ts
+++ b/packages/types/src/workspace.d.ts
@@ -1,5 +1,10 @@
import { EUserWorkspaceRoles } from "constants/workspace";
-import type { IProjectMember, IUser, IUserLite, IWorkspaceViewProps } from "@plane/types";
+import type {
+ IProjectMember,
+ IUser,
+ IUserLite,
+ IWorkspaceViewProps,
+} from "@plane/types";
export interface IWorkspace {
readonly id: string;
@@ -32,8 +37,7 @@ export interface IWorkspaceMemberInvitation {
responded_at: Date;
role: EUserWorkspaceRoles;
token: string;
- workspace: string;
- workspace_detail: {
+ workspace: {
id: string;
logo: string;
name: string;
diff --git a/packages/ui/helpers.ts b/packages/ui/helpers.ts
new file mode 100644
index 000000000..a500a7385
--- /dev/null
+++ b/packages/ui/helpers.ts
@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b643d47d4..b8a669631 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -17,6 +17,17 @@
"lint": "eslint src/",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
},
+ "dependencies": {
+ "@blueprintjs/core": "^4.16.3",
+ "@blueprintjs/popover2": "^1.13.3",
+ "@headlessui/react": "^1.7.17",
+ "@popperjs/core": "^2.11.8",
+ "clsx": "^2.0.0",
+ "react-color": "^2.19.3",
+ "react-dom": "^18.2.0",
+ "react-popper": "^2.3.0",
+ "tailwind-merge": "^2.0.0"
+ },
"devDependencies": {
"@types/node": "^20.5.2",
"@types/react": "^18.2.42",
@@ -29,13 +40,5 @@
"tsconfig": "*",
"tsup": "^5.10.1",
"typescript": "4.7.4"
- },
- "dependencies": {
- "@blueprintjs/core": "^4.16.3",
- "@blueprintjs/popover2": "^1.13.3",
- "@headlessui/react": "^1.7.17",
- "@popperjs/core": "^2.11.8",
- "react-color": "^2.19.3",
- "react-popper": "^2.3.0"
}
}
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
index 4be345961..6344dce83 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -141,6 +141,7 @@ export const Avatar: React.FC = (props) => {
}
: {}
}
+ tabIndex={-1}
>
{src ? (
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index d63d89eb2..10ee815f6 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
+import { cn } from "../../helpers";
export interface ButtonProps extends React.ButtonHTMLAttributes {
variant?: TButtonVariant;
@@ -31,7 +32,7 @@ const Button = React.forwardRef((props, ref) =>
const buttonIconStyle = getIconStyling(size);
return (
-
@@ -65,6 +85,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
} ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
+ onClick={openDropdown}
>
{label}
{!noChevron && !disabled && }
@@ -72,26 +93,28 @@ const CustomSelect = (props: ICustomSelectProps) => {
)}
-
-
+ {isOpen && (
+
+
+ )}
);
};
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
index eac53b6e6..9c0ae0566 100644
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -15,6 +15,7 @@ export interface IDropdownProps {
optionsClassName?: string;
width?: "auto" | string;
placement?: Placement;
+ tabIndex?: number;
}
export interface ICustomMenuDropdownProps extends IDropdownProps {
@@ -23,6 +24,8 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
noBorder?: boolean;
verticalEllipsis?: boolean;
menuButtonOnClick?: (...args: any) => void;
+ closeOnSelect?: boolean;
+ portalElement?: Element | null;
}
export interface ICustomSelectProps extends IDropdownProps {
diff --git a/packages/ui/src/hooks/use-dropdown-key-down.tsx b/packages/ui/src/hooks/use-dropdown-key-down.tsx
new file mode 100644
index 000000000..1bb861477
--- /dev/null
+++ b/packages/ui/src/hooks/use-dropdown-key-down.tsx
@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+
+type TUseDropdownKeyDown = {
+ (onOpen: () => void, onClose: () => void, isOpen: boolean): (event: React.KeyboardEvent) => void;
+};
+
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen) => {
+ const handleKeyDown = useCallback(
+ (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") {
+ event.stopPropagation();
+ if (!isOpen) {
+ onOpen();
+ }
+ } else if (event.key === "Escape" && isOpen) {
+ event.stopPropagation();
+ onClose();
+ }
+ },
+ [isOpen, onOpen, onClose]
+ );
+
+ return handleKeyDown;
+};
diff --git a/packages/ui/src/hooks/use-outside-click-detector.tsx b/packages/ui/src/hooks/use-outside-click-detector.tsx
new file mode 100644
index 000000000..5331d11c8
--- /dev/null
+++ b/packages/ui/src/hooks/use-outside-click-detector.tsx
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject, callback: () => void) => {
+ const handleClick = (event: MouseEvent) => {
+ if (ref.current && !ref.current.contains(event.target as Node)) {
+ callback();
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener("mousedown", handleClick);
+
+ return () => {
+ document.removeEventListener("mousedown", handleClick);
+ };
+ });
+};
+
+export default useOutsideClickDetector;
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
index e814233d7..0b98b3e6b 100644
--- a/packages/ui/src/icons/priority-icon.tsx
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -1,35 +1,79 @@
import * as React from "react";
import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
+import { cn } from "../../helpers";
type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
interface IPriorityIcon {
className?: string;
+ containerClassName?: string;
priority: TIssuePriorities;
size?: number;
+ withContainer?: boolean;
}
export const PriorityIcon: React.FC = (props) => {
- const { priority, className = "", size = 14 } = props;
+ const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
- // Convert to lowercase for string comparison
- const lowercasePriority = priority?.toLowerCase();
-
- //get priority icon
- const getPriorityIcon = (): React.ReactNode => {
- switch (lowercasePriority) {
- case "urgent":
- return = (
width="45.2227"
height="45.2227"
filterUnits="userSpaceOnUse"
- color-interpolation-filters="sRGB"
+ colorInterpolationFilters="sRGB"
>
- = ({ defaultAnalytics }) => (
= ({ defaultAnalytics }) => (
className="absolute left-0 top-0 h-1 rounded duration-300"
style={{
width: `${percentage}%`,
- backgroundColor: STATE_GROUP_COLORS[group.state_group as TStateGroups],
+ backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
}}
/>
diff --git a/web/components/command-palette/actions/workspace-settings-actions.tsx b/web/components/command-palette/actions/workspace-settings-actions.tsx
index 84e62593a..7503343ee 100644
--- a/web/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/components/command-palette/actions/workspace-settings-actions.tsx
@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
import { Command } from "cmdk";
// icons
import { SettingIcon } from "components/icons";
+import Link from "next/link";
type Props = {
closePalette: () => void;
@@ -13,48 +14,55 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC = (props) =
const router = useRouter();
const { workspaceSlug } = router.query;
- const redirect = (path: string) => {
- closePalette();
- router.push(path);
- };
-
return (
<>
- redirect(`/${workspaceSlug}/settings`)} className="focus:outline-none">
-
+
+
- redirect(`/${workspaceSlug}/settings/members`)} className="focus:outline-none">
-
+
+
- redirect(`/${workspaceSlug}/settings/billing`)} className="focus:outline-none">
-
+
+
- redirect(`/${workspaceSlug}/settings/integrations`)} className="focus:outline-none">
-
+
+
- redirect(`/${workspaceSlug}/settings/imports`)} className="focus:outline-none">
-
+
+
- redirect(`/${workspaceSlug}/settings/exports`)} className="focus:outline-none">
-
+
+
);
diff --git a/web/components/command-palette/command-palette.tsx b/web/components/command-palette/command-palette.tsx
index 04b2fb714..6a550e0ad 100644
--- a/web/components/command-palette/command-palette.tsx
+++ b/web/components/command-palette/command-palette.tsx
@@ -60,6 +60,7 @@ export const CommandPalette: FC = observer(() => {
isDeleteIssueModalOpen,
toggleDeleteIssueModal,
isAnyModalOpen,
+ createIssueStoreType,
} = commandPalette;
const { setToastAlert } = useToast();
@@ -216,6 +217,7 @@ export const CommandPalette: FC = observer(() => {
isOpen={isCreateIssueModalOpen}
onClose={() => toggleCreateIssueModal(false)}
data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_id: moduleId.toString() } : undefined}
+ storeType={createIssueStoreType}
/>
{workspaceSlug && projectId && issueId && issueDetails && (
diff --git a/web/components/common/new-empty-state.tsx b/web/components/common/new-empty-state.tsx
index dbe654e11..efbab8249 100644
--- a/web/components/common/new-empty-state.tsx
+++ b/web/components/common/new-empty-state.tsx
@@ -43,7 +43,7 @@ export const NewEmptyState: React.FC = ({
return (
= observer((props) => {
; fullWidth: boolean };
+} = {
+ overview_stats: { component: OverviewStatsWidget, fullWidth: true },
+ assigned_issues: { component: AssignedIssuesWidget, fullWidth: false },
+ created_issues: { component: CreatedIssuesWidget, fullWidth: false },
+ issues_by_state_groups: { component: IssuesByStateGroupWidget, fullWidth: false },
+ issues_by_priority: { component: IssuesByPriorityWidget, fullWidth: false },
+ recent_activity: { component: RecentActivityWidget, fullWidth: false },
+ recent_projects: { component: RecentProjectsWidget, fullWidth: false },
+ recent_collaborators: { component: RecentCollaboratorsWidget, fullWidth: true },
+};
+
+export const DashboardWidgets = observer(() => {
+ // store hooks
+ const {
+ router: { workspaceSlug },
+ } = useApplication();
+ const { homeDashboardId, homeDashboardWidgets } = useDashboard();
+
+ const doesWidgetExist = (widgetKey: TWidgetKeys) =>
+ Boolean(homeDashboardWidgets?.find((widget) => widget.key === widgetKey));
+
+ if (!workspaceSlug || !homeDashboardId) return null;
+
+ return (
+ = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // states
+ const [fetching, setFetching] = useState(false);
+ // store hooks
+ const {
+ fetchWidgetStats,
+ widgetDetails: allWidgetDetails,
+ widgetStats: allWidgetStats,
+ updateDashboardWidgetFilters,
+ } = useDashboard();
+ // derived values
+ const widgetDetails = allWidgetDetails?.[workspaceSlug]?.[dashboardId]?.find((w) => w.key === WIDGET_KEY);
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TAssignedIssuesWidgetResponse;
+
+ const handleUpdateFilters = async (filters: Partial) => {
+ if (!widgetDetails) return;
+
+ setFetching(true);
+
+ await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, {
+ widgetKey: WIDGET_KEY,
+ filters,
+ });
+
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ issue_type: widgetDetails.widget_filters.tab ?? "upcoming",
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ expand: "issue_relation",
+ }).finally(() => setFetching(false));
+ };
+
+ useEffect(() => {
+ if (!widgetDetails) return;
+
+ const filterDates = getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week");
+
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ issue_type: widgetDetails.widget_filters.tab ?? "upcoming",
+ target_date: filterDates,
+ expand: "issue_relation",
+ });
+ }, [dashboardId, fetchWidgetStats, widgetDetails, widgetStats, workspaceSlug]);
+
+ const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+ const redirectionLink = `/${workspaceSlug}/workspace-views/assigned/${filterParams}`;
+
+ if (!widgetDetails || !widgetStats) return = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // states
+ const [fetching, setFetching] = useState(false);
+ // store hooks
+ const {
+ fetchWidgetStats,
+ widgetDetails: allWidgetDetails,
+ widgetStats: allWidgetStats,
+ updateDashboardWidgetFilters,
+ } = useDashboard();
+ // derived values
+ const widgetDetails = allWidgetDetails?.[workspaceSlug]?.[dashboardId]?.find((w) => w.key === WIDGET_KEY);
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TCreatedIssuesWidgetResponse;
+
+ const handleUpdateFilters = async (filters: Partial) => {
+ if (!widgetDetails) return;
+
+ setFetching(true);
+
+ await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, {
+ widgetKey: WIDGET_KEY,
+ filters,
+ });
+
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ issue_type: widgetDetails.widget_filters.tab ?? "upcoming",
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ }).finally(() => setFetching(false));
+ };
+
+ useEffect(() => {
+ if (!widgetDetails) return;
+
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ issue_type: widgetDetails.widget_filters.tab ?? "upcoming",
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ });
+ }, [dashboardId, fetchWidgetStats, widgetDetails, widgetStats, workspaceSlug]);
+
+ const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+ const redirectionLink = `/${workspaceSlug}/workspace-views/created/${filterParams}`;
+
+ if (!widgetDetails || !widgetStats) return = (props) => {
+ const { onChange, value } = props;
+
+ return (
+
+ {DURATION_FILTER_OPTIONS.find((option) => option.key === value)?.label}
+
+ }
+ placement="bottom-end"
+ >
+ {DURATION_FILTER_OPTIONS.map((option) => (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ onChange(option.key);
+ }}
+ >
+ {option.label}
+
+ ))}
+
+ );
+};
diff --git a/web/components/dashboard/widgets/dropdowns/index.ts b/web/components/dashboard/widgets/dropdowns/index.ts
new file mode 100644
index 000000000..cff4cdb44
--- /dev/null
+++ b/web/components/dashboard/widgets/dropdowns/index.ts
@@ -0,0 +1 @@
+export * from "./duration-filter";
diff --git a/web/components/dashboard/widgets/empty-states/assigned-issues.tsx b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
new file mode 100644
index 000000000..ef85ff611
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/assigned-issues.tsx
@@ -0,0 +1,42 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
+// constants
+import { ASSIGNED_ISSUES_EMPTY_STATES } from "constants/dashboard";
+
+type Props = {
+ filter: TDurationFilterOptions;
+ type: TIssuesListTypes;
+};
+
+export const AssignedIssuesEmptyState: React.FC = (props) => {
+ const { filter, type } = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ const typeDetails = ASSIGNED_ISSUES_EMPTY_STATES[type];
+
+ const image = resolvedTheme === "dark" ? typeDetails.darkImage : typeDetails.lightImage;
+
+ return (
+ = (props) => {
+ const { filter, type } = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ const typeDetails = CREATED_ISSUES_EMPTY_STATES[type];
+
+ const image = resolvedTheme === "dark" ? typeDetails.darkImage : typeDetails.lightImage;
+
+ return (
+ = (props) => {
+ const { filter } = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ return (
+ = (props) => {
+ const { filter } = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ return (
+ = (props) => {
+ const {} = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ return (
+ = (props) => {
+ const {} = props;
+ // next-themes
+ const { resolvedTheme } = useTheme();
+
+ return (
+ = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const { getProjectById } = useProject();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // derived values
+ const issueDetails = getIssueById(issueId) as TWidgetIssue | undefined;
+
+ if (!issueDetails) return null;
+
+ const projectDetails = getProjectById(issueDetails.project_id);
+
+ const blockedByIssues = issueDetails.issue_relation?.filter((issue) => issue.relation_type === "blocked_by") ?? [];
+
+ const blockedByIssueProjectDetails =
+ blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
+
+ return (
+ onClick(issueDetails)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
+
+export const AssignedOverdueIssueListItem: React.FC = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const { getProjectById } = useProject();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // derived values
+ const issueDetails = getIssueById(issueId) as TWidgetIssue | undefined;
+
+ if (!issueDetails) return null;
+
+ const projectDetails = getProjectById(issueDetails.project_id);
+ const blockedByIssues = issueDetails.issue_relation?.filter((issue) => issue.relation_type === "blocked_by") ?? [];
+
+ const blockedByIssueProjectDetails =
+ blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
+
+ const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false);
+
+ return (
+ onClick(issueDetails)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
+
+export const AssignedCompletedIssueListItem: React.FC = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const { getProjectById } = useProject();
+ // derived values
+ const issueDetails = getIssueById(issueId);
+
+ if (!issueDetails) return null;
+
+ const projectDetails = getProjectById(issueDetails.project_id);
+
+ return (
+ onClick(issueDetails)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
+
+export const CreatedUpcomingIssueListItem: React.FC = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const { getUserDetails } = useMember();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const { getProjectById } = useProject();
+ // derived values
+ const issue = getIssueById(issueId);
+
+ if (!issue) return null;
+
+ const projectDetails = getProjectById(issue.project_id);
+
+ return (
+ onClick(issue)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
+
+export const CreatedOverdueIssueListItem: React.FC = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const { getUserDetails } = useMember();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const { getProjectById } = useProject();
+ // derived values
+ const issue = getIssueById(issueId);
+
+ if (!issue) return null;
+
+ const projectDetails = getProjectById(issue.project_id);
+
+ const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false);
+
+ return (
+ onClick(issue)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
+
+export const CreatedCompletedIssueListItem: React.FC = observer((props) => {
+ const { issueId, onClick, workspaceSlug } = props;
+ // store hooks
+ const { getUserDetails } = useMember();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const { getProjectById } = useProject();
+ // derived values
+ const issue = getIssueById(issueId);
+
+ if (!issue) return null;
+
+ const projectDetails = getProjectById(issue.project_id);
+
+ return (
+ onClick(issue)}
+ className="py-2 px-3 hover:bg-custom-background-80 rounded grid grid-cols-6 gap-1"
+ >
+
+ );
+});
diff --git a/web/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
new file mode 100644
index 000000000..d104bbd05
--- /dev/null
+++ b/web/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -0,0 +1,124 @@
+import Link from "next/link";
+// hooks
+import { useIssueDetail } from "hooks/store";
+// components
+import {
+ AssignedCompletedIssueListItem,
+ AssignedIssuesEmptyState,
+ AssignedOverdueIssueListItem,
+ AssignedUpcomingIssueListItem,
+ CreatedCompletedIssueListItem,
+ CreatedIssuesEmptyState,
+ CreatedOverdueIssueListItem,
+ CreatedUpcomingIssueListItem,
+ IssueListItemProps,
+} from "components/dashboard/widgets";
+// ui
+import { Loader, getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "helpers/common.helper";
+import { getRedirectionFilters } from "helpers/dashboard.helper";
+// types
+import { TDurationFilterOptions, TIssue, TIssuesListTypes } from "@plane/types";
+
+export type WidgetIssuesListProps = {
+ filter: TDurationFilterOptions | undefined;
+ isLoading: boolean;
+ issues: TIssue[];
+ tab: TIssuesListTypes;
+ totalIssues: number;
+ type: "assigned" | "created";
+ workspaceSlug: string;
+};
+
+export const WidgetIssuesList: React.FC = (props) => {
+ const { filter, isLoading, issues, tab, totalIssues, type, workspaceSlug } = props;
+ // store hooks
+ const { setPeekIssue } = useIssueDetail();
+
+ const handleIssuePeekOverview = (issue: TIssue) =>
+ setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+
+ const filterParams = getRedirectionFilters(tab);
+
+ const ISSUE_LIST_ITEM: {
+ [key in string]: {
+ [key in TIssuesListTypes]: React.FC;
+ };
+ } = {
+ assigned: {
+ upcoming: AssignedUpcomingIssueListItem,
+ overdue: AssignedOverdueIssueListItem,
+ completed: AssignedCompletedIssueListItem,
+ },
+ created: {
+ upcoming: CreatedUpcomingIssueListItem,
+ overdue: CreatedOverdueIssueListItem,
+ completed: CreatedCompletedIssueListItem,
+ },
+ };
+
+ return (
+ <>
+
+ {ISSUES_TABS_LIST.map((tab) => (
+
+ cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
+ "bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
+ "text-custom-text-400": !selected,
+ })
+ }
+ >
+ {tab.label}
+
+ ))}
+
+);
diff --git a/web/components/dashboard/widgets/issues-by-priority.tsx b/web/components/dashboard/widgets/issues-by-priority.tsx
new file mode 100644
index 000000000..1e0cd30da
--- /dev/null
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@@ -0,0 +1,208 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useDashboard } from "hooks/store";
+// components
+import { MarimekkoGraph } from "components/ui";
+import {
+ DurationFilterDropdown,
+ IssuesByPriorityEmptyState,
+ WidgetLoader,
+ WidgetProps,
+} from "components/dashboard/widgets";
+// ui
+import { PriorityIcon } from "@plane/ui";
+// helpers
+import { getCustomDates } from "helpers/dashboard.helper";
+// types
+import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
+// constants
+import { PRIORITY_GRAPH_GRADIENTS } from "constants/dashboard";
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+const TEXT_COLORS = {
+ urgent: "#F4A9AA",
+ high: "#AB4800",
+ medium: "#AB6400",
+ low: "#1F2D5C",
+ none: "#60646C",
+};
+
+const CustomBar = (props: any) => {
+ const { bar, workspaceSlug } = props;
+ // states
+ const [isMouseOver, setIsMouseOver] = useState(false);
+
+ return (
+
+ setIsMouseOver(true)}
+ onMouseLeave={() => setIsMouseOver(false)}
+ >
+
+ {bar?.id}
+
+
+
+ );
+};
+
+const WIDGET_KEY = "issues_by_priority";
+
+export const IssuesByPriorityWidget: React.FC = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // store hooks
+ const {
+ fetchWidgetStats,
+ widgetDetails: allWidgetDetails,
+ widgetStats: allWidgetStats,
+ updateDashboardWidgetFilters,
+ } = useDashboard();
+ const widgetDetails = allWidgetDetails?.[workspaceSlug]?.[dashboardId]?.find((w) => w.key === WIDGET_KEY);
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TIssuesByPriorityWidgetResponse[];
+
+ const handleUpdateFilters = async (filters: Partial) => {
+ if (!widgetDetails) return;
+
+ await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, {
+ widgetKey: WIDGET_KEY,
+ filters,
+ });
+
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ });
+ };
+
+ useEffect(() => {
+ if (!widgetDetails) return;
+
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ });
+ }, [dashboardId, fetchWidgetStats, widgetDetails, widgetStats, workspaceSlug]);
+
+ if (!widgetDetails || !widgetStats) return
+ {bars
+ ?.filter((b: any) => b?.value === 1) // render only bars with value 1
+ .map((bar: any) => (
+
+ );
+ };
+
+ return (
+
+ = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // states
+ const [activeStateGroup, setActiveStateGroup] = useState("started");
+ // router
+ const router = useRouter();
+ // store hooks
+ const {
+ fetchWidgetStats,
+ widgetDetails: allWidgetDetails,
+ widgetStats: allWidgetStats,
+ updateDashboardWidgetFilters,
+ } = useDashboard();
+ // derived values
+ const widgetDetails = allWidgetDetails?.[workspaceSlug]?.[dashboardId]?.find((w) => w.key === WIDGET_KEY);
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[
+ WIDGET_KEY
+ ] as TIssuesByStateGroupsWidgetResponse[];
+
+ const handleUpdateFilters = async (filters: Partial) => {
+ if (!widgetDetails) return;
+
+ await updateDashboardWidgetFilters(workspaceSlug, dashboardId, widgetDetails.id, {
+ widgetKey: WIDGET_KEY,
+ filters,
+ });
+
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ });
+ };
+
+ useEffect(() => {
+ if (!widgetDetails) return;
+
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ target_date: getCustomDates(widgetDetails.widget_filters.target_date ?? "this_week"),
+ });
+ }, [dashboardId, fetchWidgetStats, widgetDetails, widgetStats, workspaceSlug]);
+
+ if (!widgetDetails || !widgetStats) return
+
+ {percentage}%
+
+
+ {data?.id}
+
+
+ );
+ };
+
+ return (
+
+
+
+);
diff --git a/web/components/dashboard/widgets/loaders/index.ts b/web/components/dashboard/widgets/loaders/index.ts
new file mode 100644
index 000000000..ee5286f0f
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/index.ts
@@ -0,0 +1 @@
+export * from "./loader";
diff --git a/web/components/dashboard/widgets/loaders/issues-by-priority.tsx b/web/components/dashboard/widgets/loaders/issues-by-priority.tsx
new file mode 100644
index 000000000..4051a2908
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/issues-by-priority.tsx
@@ -0,0 +1,15 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const IssuesByPriorityWidgetLoader = () => (
+
+
+);
diff --git a/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx b/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx
new file mode 100644
index 000000000..d2316802d
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/issues-by-state-group.tsx
@@ -0,0 +1,21 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const IssuesByStateGroupWidgetLoader = () => (
+
+
+);
diff --git a/web/components/dashboard/widgets/loaders/loader.tsx b/web/components/dashboard/widgets/loaders/loader.tsx
new file mode 100644
index 000000000..141bb5533
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/loader.tsx
@@ -0,0 +1,31 @@
+// components
+import { AssignedIssuesWidgetLoader } from "./assigned-issues";
+import { IssuesByPriorityWidgetLoader } from "./issues-by-priority";
+import { IssuesByStateGroupWidgetLoader } from "./issues-by-state-group";
+import { OverviewStatsWidgetLoader } from "./overview-stats";
+import { RecentActivityWidgetLoader } from "./recent-activity";
+import { RecentProjectsWidgetLoader } from "./recent-projects";
+import { RecentCollaboratorsWidgetLoader } from "./recent-collaborators";
+// types
+import { TWidgetKeys } from "@plane/types";
+
+type Props = {
+ widgetKey: TWidgetKeys;
+};
+
+export const WidgetLoader: React.FC = (props) => {
+ const { widgetKey } = props;
+
+ const loaders = {
+ overview_stats:
+ {Array.from({ length: 4 }).map((_, index) => (
+
+);
diff --git a/web/components/dashboard/widgets/loaders/recent-activity.tsx b/web/components/dashboard/widgets/loaders/recent-activity.tsx
new file mode 100644
index 000000000..47e895a6e
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/recent-activity.tsx
@@ -0,0 +1,19 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const RecentActivityWidgetLoader = () => (
+
+
+);
diff --git a/web/components/dashboard/widgets/loaders/recent-collaborators.tsx b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
new file mode 100644
index 000000000..d838967af
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/recent-collaborators.tsx
@@ -0,0 +1,18 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const RecentCollaboratorsWidgetLoader = () => (
+
+
+);
diff --git a/web/components/dashboard/widgets/loaders/recent-projects.tsx b/web/components/dashboard/widgets/loaders/recent-projects.tsx
new file mode 100644
index 000000000..fc181ffab
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/recent-projects.tsx
@@ -0,0 +1,19 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const RecentProjectsWidgetLoader = () => (
+
+
+);
diff --git a/web/components/dashboard/widgets/overview-stats.tsx b/web/components/dashboard/widgets/overview-stats.tsx
new file mode 100644
index 000000000..74630e1f8
--- /dev/null
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@@ -0,0 +1,93 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+// hooks
+import { useDashboard } from "hooks/store";
+// components
+import { WidgetLoader } from "components/dashboard/widgets";
+// helpers
+import { renderFormattedPayloadDate } from "helpers/date-time.helper";
+import { cn } from "helpers/common.helper";
+// types
+import { TOverviewStatsWidgetResponse } from "@plane/types";
+
+export type WidgetProps = {
+ dashboardId: string;
+ workspaceSlug: string;
+};
+
+const WIDGET_KEY = "overview_stats";
+
+export const OverviewStatsWidget: React.FC = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // store hooks
+ const { fetchWidgetStats, widgetStats: allWidgetStats } = useDashboard();
+ // derived values
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TOverviewStatsWidgetResponse;
+
+ const today = renderFormattedPayloadDate(new Date());
+ const STATS_LIST = [
+ {
+ key: "assigned",
+ title: "Issues assigned",
+ count: widgetStats?.assigned_issues_count,
+ link: `/${workspaceSlug}/workspace-views/assigned`,
+ },
+ {
+ key: "overdue",
+ title: "Issues overdue",
+ count: widgetStats?.pending_issues_count,
+ link: `/${workspaceSlug}/workspace-views/assigned/?target_date=${today};before`,
+ },
+ {
+ key: "created",
+ title: "Issues created",
+ count: widgetStats?.created_issues_count,
+ link: `/${workspaceSlug}/workspace-views/created`,
+ },
+ {
+ key: "completed",
+ title: "Issues completed",
+ count: widgetStats?.completed_issues_count,
+ link: `/${workspaceSlug}/workspace-views/assigned?state_group=completed`,
+ },
+ ];
+
+ useEffect(() => {
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ });
+ }, [dashboardId, fetchWidgetStats, widgetStats, workspaceSlug]);
+
+ if (!widgetStats) return = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // store hooks
+ const { currentUser } = useUser();
+ // derived values
+ const { fetchWidgetStats, widgetStats: allWidgetStats } = useDashboard();
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TRecentActivityWidgetResponse[];
+
+ useEffect(() => {
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ });
+ }, [dashboardId, fetchWidgetStats, widgetStats, workspaceSlug]);
+
+ if (!widgetStats) return = observer((props) => {
+ const { issueCount, userId, workspaceSlug } = props;
+ // store hooks
+ const { currentUser } = useUser();
+ const { getUserDetails } = useMember();
+ // derived values
+ const userDetails = getUserDetails(userId);
+ const isCurrentUser = userId === currentUser?.id;
+
+ if (!userDetails) return null;
+
+ return (
+
+ = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // store hooks
+ const { fetchWidgetStats, widgetStats: allWidgetStats } = useDashboard();
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[
+ WIDGET_KEY
+ ] as TRecentCollaboratorsWidgetResponse[];
+
+ useEffect(() => {
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ });
+ }, [dashboardId, fetchWidgetStats, widgetStats, workspaceSlug]);
+
+ if (!widgetStats) return = observer((props) => {
+ const { projectId, workspaceSlug } = props;
+ // store hooks
+ const { getProjectById } = useProject();
+ const projectDetails = getProjectById(projectId);
+
+ const randomBgColor = PROJECT_BACKGROUND_COLORS[Math.floor(Math.random() * PROJECT_BACKGROUND_COLORS.length)];
+
+ if (!projectDetails) return null;
+
+ return (
+
+ = observer((props) => {
+ const { dashboardId, workspaceSlug } = props;
+ // store hooks
+ const {
+ commandPalette: { toggleCreateProjectModal },
+ } = useApplication();
+ const {
+ membership: { currentWorkspaceRole },
+ } = useUser();
+ const { fetchWidgetStats, widgetStats: allWidgetStats } = useDashboard();
+ // derived values
+ const widgetStats = allWidgetStats?.[workspaceSlug]?.[dashboardId]?.[WIDGET_KEY] as TRecentProjectsWidgetResponse;
+ const canCreateProject = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+ useEffect(() => {
+ if (!widgetStats)
+ fetchWidgetStats(workspaceSlug, dashboardId, {
+ widget_key: WIDGET_KEY,
+ });
+ }, [dashboardId, fetchWidgetStats, widgetStats, workspaceSlug]);
+
+ if (!widgetStats) return = observer((props) => {
placement,
projectId,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -166,15 +173,26 @@ export const CycleDropdown: React.FC = observer((props) => {
const selectedCycle = value ? getCycleById(value) : null;
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -182,6 +200,7 @@ export const CycleDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -197,6 +216,7 @@ export const CycleDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
-
-
- {children}
-
+
+ {children}
+
+
+ ) : (
+ {group.state_group}
@@ -42,7 +42,7 @@ export const AnalyticsDemand: React.FC
-
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
-
+
= (props) => {
if (!cycleDetails) return null;
// computed
- const cycleStatus = cycleDetails.status.toLocaleLowerCase() as TCycleGroups;
+ // TODO: change this logic once backend fix the response
+ const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
const isCompleted = cycleStatus === "completed";
const endDate = new Date(cycleDetails.end_date ?? "");
const startDate = new Date(cycleDetails.start_date ?? "");
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
index 686937b71..87796340e 100644
--- a/web/components/cycles/cycles-list.tsx
+++ b/web/components/cycles/cycles-list.tsx
@@ -31,7 +31,12 @@ export const CyclesList: FC = observer((props) => {
= (props) => {
setActiveProject(val);
}}
buttonVariant="background-with-text"
+ tabIndex={7}
/>
)}
/>
@@ -89,6 +90,7 @@ export const CycleForm: React.FC = (props) => {
inputSize="md"
onChange={onChange}
hasError={Boolean(errors?.name)}
+ tabIndex={1}
/>
)}
/>
@@ -106,6 +108,7 @@ export const CycleForm: React.FC = (props) => {
hasError={Boolean(errors?.description)}
value={value}
onChange={onChange}
+ tabIndex={2}
/>
)}
/>
@@ -124,6 +127,7 @@ export const CycleForm: React.FC = (props) => {
buttonVariant="border-with-text"
placeholder="Start date"
maxDate={maxDate ?? undefined}
+ tabIndex={3}
/>
)}
@@ -140,6 +144,7 @@ export const CycleForm: React.FC = (props) => {
buttonVariant="border-with-text"
placeholder="End date"
minDate={minDate}
+ tabIndex={4}
/>
)}
@@ -149,10 +154,10 @@ export const CycleForm: React.FC = (props) => {
{title}
{description &&{description}
}
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index 9f8023833..a5ffd807a 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -4,10 +4,11 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { useDropzone } from "react-dropzone";
-import { Tab, Transition, Popover } from "@headlessui/react";
+import { Tab, Popover } from "@headlessui/react";
import { Control, Controller } from "react-hook-form";
// hooks
import { useApplication, useWorkspace } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
// services
import { FileService } from "services/file.service";
// hooks
@@ -38,13 +39,14 @@ type Props = {
control: Control;
onChange: (data: string) => void;
disabled?: boolean;
+ tabIndex?: number;
};
// services
const fileService = new FileService();
export const ImagePickerPopover: React.FC = observer((props) => {
- const { label, value, control, onChange, disabled = false } = props;
+ const { label, value, control, onChange, disabled = false, tabIndex } = props;
// states
const [image, setImage] = useState(null);
const [isImageUploading, setIsImageUploading] = useState(false);
@@ -128,27 +130,27 @@ export const ImagePickerPopover: React.FC = observer((props) => {
onChange(unsplashImages[0].urls.regular);
}, [value, onChange, unsplashImages]);
- useOutsideClickDetector(imagePickerRef, () => setIsOpen(false));
+ const openDropdown = () => setIsOpen(true);
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+
+ useOutsideClickDetector(ref, closeDropdown);
return (
-
+
setIsOpen((prev) => !prev)}
+ onClick={openDropdown}
disabled={disabled}
>
{label}
-
-
+
+ {isOpen && (
+
-
+ )}
);
});
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
index ff0fabc4e..4f99f3606 100644
--- a/web/components/core/index.ts
+++ b/web/components/core/index.ts
@@ -3,5 +3,4 @@ export * from "./modals";
export * from "./sidebar";
export * from "./theme";
export * from "./activity";
-export * from "./reaction-selector";
export * from "./image-picker-popover";
diff --git a/web/components/core/sidebar/progress-chart.tsx b/web/components/core/sidebar/progress-chart.tsx
index 9e9a4bac8..3d47d8eca 100644
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { eachDayOfInterval } from "date-fns";
+import { eachDayOfInterval, isValid } from "date-fns";
// ui
import { LineGraph } from "components/ui";
// helpers
@@ -41,13 +41,19 @@ const DashedLine = ({ series, lineGenerator, xScale, yScale }: any) =>
));
const ProgressChart: React.FC = ({ distribution, startDate, endDate, totalIssues }) => {
- const chartData = Object.keys(distribution).map((key) => ({
+ const chartData = Object.keys(distribution ?? []).map((key) => ({
currentDate: renderFormattedDateWithoutYear(key),
pending: distribution[key],
}));
const generateXAxisTickValues = () => {
- const dates = eachDayOfInterval({ start: new Date(startDate), end: new Date(endDate) });
+ const start = new Date(startDate);
+ const end = new Date(endDate);
+
+ let dates: Date[] = [];
+ if (isValid(start) && isValid(end)) {
+ dates = eachDayOfInterval({ start, end });
+ }
const maxDates = 4;
const totalDates = dates.length;
diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx
index 6d89981cd..c37cdf4b9 100644
--- a/web/components/core/sidebar/sidebar-progress-stats.tsx
+++ b/web/components/core/sidebar/sidebar-progress-stats.tsx
@@ -126,7 +126,7 @@ export const SidebarProgressStats: React.FC = ({
- {distribution.assignees.length > 0 ? (
+ {distribution?.assignees.length > 0 ? (
distribution.assignees.map((assignee, index) => {
if (assignee.assignee_id)
return (
@@ -183,7 +183,7 @@ export const SidebarProgressStats: React.FC = ({
)}
- {distribution.labels.length > 0 ? (
+ {distribution?.labels.length > 0 ? (
distribution.labels.map((label, index) => (
= observer((props) => {
- // router
- const router = useRouter();
+ // props
const { workspaceSlug, projectId } = props;
-
+ // store hooks
const {
- issues: { issues },
+ issues: { issues, fetchActiveCycleIssues },
issueMap,
} = useIssues(EIssuesStoreType.CYCLE);
- // store hooks
const {
commandPalette: { toggleCreateCycleModal },
} = useApplication();
@@ -99,13 +97,14 @@ export const ActiveCycleDetails: React.FC = observer((props
const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
const issueIds = issues?.[ACTIVE_CYCLE_ISSUES];
- // useSWR(
- // workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId, { priority: "urgent,high" }) : null,
- // workspaceSlug && projectId && cycleId
- // ? () =>
- // fetchActiveCycleIssues(workspaceSlug, projectId, )
- // : null
- // );
+ useSWR(
+ workspaceSlug && projectId && currentProjectActiveCycleId
+ ? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
+ : null,
+ workspaceSlug && projectId && currentProjectActiveCycleId
+ ? () => fetchActiveCycleIssues(workspaceSlug, projectId, currentProjectActiveCycleId)
+ : null
+ );
if (!activeCycle && isLoading)
return (
@@ -382,9 +381,9 @@ export const ActiveCycleDetails: React.FC = observer((props
{issueIds ? (
issueIds.length > 0 ? (
issueIds.map((issue: any) => (
-
+
))
) : (
= observer((props) => {
router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
+ href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
>
-
@@ -427,7 +426,7 @@ export const ActiveCycleDetails: React.FC = observer((props
)}
@@ -465,7 +464,7 @@ export const ActiveCycleDetails: React.FC = observer((props
{
issueIds?.filter(
(issueId) =>
- getProjectStates(issueMap[issueId]?.project_id).find(
+ getProjectStates(issueMap[issueId]?.project_id)?.find(
(issue) => issue.id === issueMap[issueId]?.state_id
)?.group === "completed"
)?.length
diff --git a/web/components/cycles/active-cycle-info.tsx b/web/components/cycles/active-cycle-info.tsx
new file mode 100644
index 000000000..6c64f7c6b
--- /dev/null
+++ b/web/components/cycles/active-cycle-info.tsx
@@ -0,0 +1,254 @@
+import { FC, MouseEvent, useCallback } from "react";
+import Link from "next/link";
+// ui
+import {
+ AvatarGroup,
+ Tooltip,
+ LinearProgressIndicator,
+ ContrastIcon,
+ RunningIcon,
+ LayersIcon,
+ StateGroupIcon,
+ Avatar,
+} from "@plane/ui";
+// components
+import { SingleProgressStats } from "components/core";
+import { ActiveCycleProgressStats } from "./active-cycle-stats";
+// hooks
+import { useCycle } from "hooks/store";
+import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
+// icons
+import { ArrowRight, CalendarDays, Star, Target } from "lucide-react";
+// types
+import { ICycle, TCycleLayout, TCycleView } from "@plane/types";
+// helpers
+import { renderFormattedDate, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// constants
+import { STATE_GROUPS_DETAILS } from "constants/cycle";
+
+export type ActiveCycleInfoProps = {
+ cycle: ICycle;
+ workspaceSlug: string;
+ projectId: string;
+};
+
+export const ActiveCycleInfo: FC = (props) => {
+ const { cycle, workspaceSlug, projectId } = props;
+
+ // store
+ const { addCycleToFavorites, removeCycleFromFavorites } = useCycle();
+ // local storage
+ const { setValue: setCycleTab } = useLocalStorage("cycle_tab", "active");
+ const { setValue: setCycleLayout } = useLocalStorage("cycle_layout", "list");
+ // toast alert
+ const { setToastAlert } = useToast();
+
+ const groupedIssues: any = {
+ backlog: cycle.backlog_issues,
+ unstarted: cycle.unstarted_issues,
+ started: cycle.started_issues,
+ completed: cycle.completed_issues,
+ cancelled: cycle.cancelled_issues,
+ };
+
+ const progressIndicatorData = STATE_GROUPS_DETAILS.map((group, index) => ({
+ id: index,
+ name: group.title,
+ value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+ color: group.color,
+ }));
+
+ const handleCurrentLayout = useCallback(
+ (_layout: TCycleLayout) => {
+ setCycleLayout(_layout);
+ },
+ [setCycleLayout]
+ );
+
+ const handleCurrentView = useCallback(
+ (_view: TCycleView) => {
+ setCycleTab(_view);
+ if (_view === "draft") handleCurrentLayout("list");
+ },
+ [handleCurrentLayout, setCycleTab]
+ );
+
+ const handleAddToFavorites = (e: MouseEvent) => {
+ e.preventDefault();
+ if (!workspaceSlug || !projectId) return;
+
+ addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't add the cycle to favorites. Please try again.",
+ });
+ });
+ };
+
+ const handleRemoveFromFavorites = (e: MouseEvent) => {
+ e.preventDefault();
+ if (!workspaceSlug || !projectId) return;
+
+ removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't add the cycle to favorites. Please try again.",
+ });
+ });
+ };
+
+ return (
+
+ );
+};
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index bbb30bc7a..d25364bcd 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -116,7 +116,8 @@ export const CyclesListItem: FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {truncateText(cycle.name, 70)}
+
+
+
+
+
+
+
+
+
+
+
+ {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+ 
+ ) : (
+
+ {cycle.owned_by.display_name.charAt(0)}
+
+ )}
+ {cycle.owned_by.display_name}
+
+
+ {cycle.assignees.length > 0 && (
+
+
+ {cycle.assignees.map((assignee: any) => (
+
+
+ )}
+
+
+
+
+
+
+
+ {
+ handleCurrentView("active");
+ }}
+ >
+
+ View Cycle
+
+
+
+
+
+ View Cycle Issues
+
+
+
+
+
+
+
+
+
+
+ Progress
+
+
+ {Object.keys(groupedIssues).map((group, index) => (
+
+
+ {group}
+
+ }
+ completed={groupedIssues[group]}
+ total={cycle.total_issues}
+ />
+ ))}
+
+
+
{cycleIds.map((cycleId) => (
-
-
diff --git a/web/components/cycles/index.ts b/web/components/cycles/index.ts
index db5e9de9e..975a03188 100644
--- a/web/components/cycles/index.ts
+++ b/web/components/cycles/index.ts
@@ -15,3 +15,4 @@ export * from "./cycles-board-card";
export * from "./delete-modal";
export * from "./cycle-peek-overview";
export * from "./cycles-list-item";
+export * from "./active-cycle-info";
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index f2f7792f6..81cefac50 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -539,7 +539,9 @@ export const CycleDetailsSidebar: React.FC
+ {Object.entries(WIDGETS_LIST).map(([key, widget]) => {
+ const WidgetComponent = widget.component;
+ // if the widget doesn't exist, return null
+ if (!doesWidgetExist(key as TWidgetKeys)) return null;
+ // if the widget is full width, return it in a 2 column grid
+ if (widget.fullWidth)
+ return (
+
+ );
+});
diff --git a/web/components/dashboard/index.ts b/web/components/dashboard/index.ts
new file mode 100644
index 000000000..129cdb69e
--- /dev/null
+++ b/web/components/dashboard/index.ts
@@ -0,0 +1,3 @@
+export * from "./widgets";
+export * from "./home-dashboard-widgets";
+export * from "./project-empty-state";
diff --git a/web/components/dashboard/project-empty-state.tsx b/web/components/dashboard/project-empty-state.tsx
new file mode 100644
index 000000000..c0ac90f34
--- /dev/null
+++ b/web/components/dashboard/project-empty-state.tsx
@@ -0,0 +1,41 @@
+import Image from "next/image";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useApplication, useUser } from "hooks/store";
+// ui
+import { Button } from "@plane/ui";
+// assets
+import ProjectEmptyStateImage from "public/empty-state/dashboard/project.svg";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
+
+export const DashboardProjectEmptyState = observer(() => {
+ // store hooks
+ const {
+ commandPalette: { toggleCreateProjectModal },
+ } = useApplication();
+ const {
+ membership: { currentWorkspaceRole },
+ } = useUser();
+ // derived values
+ const canCreateProject = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
+
+ return (
+
+
+ );
+ else return
+
+ );
+});
diff --git a/web/components/dashboard/widgets/assigned-issues.tsx b/web/components/dashboard/widgets/assigned-issues.tsx
new file mode 100644
index 000000000..5ad24ee0f
--- /dev/null
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { Tab } from "@headlessui/react";
+// hooks
+import { useDashboard } from "hooks/store";
+// components
+import {
+ DurationFilterDropdown,
+ TabsList,
+ WidgetIssuesList,
+ WidgetLoader,
+ WidgetProps,
+} from "components/dashboard/widgets";
+// helpers
+import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+// types
+import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
+// constants
+import { ISSUES_TABS_LIST } from "constants/dashboard";
+
+const WIDGET_KEY = "assigned_issues";
+
+export const AssignedIssuesWidget: React.FCOverview of your projects, activity, and metrics
++ Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this + page will transform into a space that helps you progress. Admins will also see items which help their team + progress. +
+
+
+
+ )}
+
+
+
+ handleUpdateFilters({
+ target_date: val,
+ })
+ }
+ />
+
+ t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+ onChange={(i) => {
+ const selectedTab = ISSUES_TABS_LIST[i];
+ handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+ }}
+ className="h-full flex flex-col"
+ >
+
+ {ISSUES_TABS_LIST.map((tab) => (
+
+
+ ))}
+
+
+
+ );
+});
diff --git a/web/components/dashboard/widgets/created-issues.tsx b/web/components/dashboard/widgets/created-issues.tsx
new file mode 100644
index 000000000..c25623070
--- /dev/null
+++ b/web/components/dashboard/widgets/created-issues.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { Tab } from "@headlessui/react";
+// hooks
+import { useDashboard } from "hooks/store";
+// components
+import {
+ DurationFilterDropdown,
+ TabsList,
+ WidgetIssuesList,
+ WidgetLoader,
+ WidgetProps,
+} from "components/dashboard/widgets";
+// helpers
+import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+// types
+import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
+// constants
+import { ISSUES_TABS_LIST } from "constants/dashboard";
+
+const WIDGET_KEY = "created_issues";
+
+export const CreatedIssuesWidget: React.FCAll issues assigned
+
+
+
+
+
+ handleUpdateFilters({
+ target_date: val,
+ })
+ }
+ />
+
+ t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+ onChange={(i) => {
+ const selectedTab = ISSUES_TABS_LIST[i];
+ handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+ }}
+ className="h-full flex flex-col"
+ >
+
+ {ISSUES_TABS_LIST.map((tab) => (
+
+
+ ))}
+
+
+
+ );
+});
diff --git a/web/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
new file mode 100644
index 000000000..fedc92cbe
--- /dev/null
+++ b/web/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -0,0 +1,41 @@
+import { ChevronDown } from "lucide-react";
+// ui
+import { CustomMenu } from "@plane/ui";
+// types
+import { TDurationFilterOptions } from "@plane/types";
+// constants
+import { DURATION_FILTER_OPTIONS } from "constants/dashboard";
+
+type Props = {
+ onChange: (value: TDurationFilterOptions) => void;
+ value: TDurationFilterOptions;
+};
+
+export const DurationFilterDropdown: React.FCAll issues created
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/empty-states/created-issues.tsx b/web/components/dashboard/widgets/empty-states/created-issues.tsx
new file mode 100644
index 000000000..3b5a646bb
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/created-issues.tsx
@@ -0,0 +1,42 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
+// constants
+import { CREATED_ISSUES_EMPTY_STATES } from "constants/dashboard";
+
+type Props = {
+ filter: TDurationFilterOptions;
+ type: TIssuesListTypes;
+};
+
+export const CreatedIssuesEmptyState: React.FC{typeDetails.title(filter)}
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/empty-states/index.ts b/web/components/dashboard/widgets/empty-states/index.ts
new file mode 100644
index 000000000..72ca1dbb2
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/index.ts
@@ -0,0 +1,6 @@
+export * from "./assigned-issues";
+export * from "./created-issues";
+export * from "./issues-by-priority";
+export * from "./issues-by-state-group";
+export * from "./recent-activity";
+export * from "./recent-collaborators";
diff --git a/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx b/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx
new file mode 100644
index 000000000..41e2754d5
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/issues-by-priority.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import DarkImage from "public/empty-state/dashboard/dark/issues-by-priority.svg";
+import LightImage from "public/empty-state/dashboard/light/issues-by-priority.svg";
+// helpers
+import { cn } from "helpers/common.helper";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TDurationFilterOptions } from "@plane/types";
+
+type Props = {
+ filter: TDurationFilterOptions;
+};
+
+export const IssuesByPriorityEmptyState: React.FC{typeDetails.title(filter)}
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx b/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
new file mode 100644
index 000000000..166dbb36f
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import DarkImage from "public/empty-state/dashboard/dark/issues-by-state-group.svg";
+import LightImage from "public/empty-state/dashboard/light/issues-by-state-group.svg";
+// helpers
+import { cn } from "helpers/common.helper";
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TDurationFilterOptions } from "@plane/types";
+
+type Props = {
+ filter: TDurationFilterOptions;
+};
+
+export const IssuesByStateGroupEmptyState: React.FC+ No assigned issues {replaceUnderscoreIfSnakeCase(filter)}. +
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/empty-states/recent-activity.tsx b/web/components/dashboard/widgets/empty-states/recent-activity.tsx
new file mode 100644
index 000000000..ea62fbf08
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/recent-activity.tsx
@@ -0,0 +1,42 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import DarkImage from "public/empty-state/dashboard/dark/recent-activity.svg";
+import LightImage from "public/empty-state/dashboard/light/recent-activity.svg";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {};
+
+export const RecentActivityEmptyState: React.FC+ No assigned issues {replaceUnderscoreIfSnakeCase(filter)}. +
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx b/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
new file mode 100644
index 000000000..0ab0db1f9
--- /dev/null
+++ b/web/components/dashboard/widgets/empty-states/recent-collaborators.tsx
@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import DarkImage from "public/empty-state/dashboard/dark/recent-collaborators.svg";
+import LightImage from "public/empty-state/dashboard/light/recent-collaborators.svg";
+// helpers
+import { cn } from "helpers/common.helper";
+
+type Props = {};
+
+export const RecentCollaboratorsEmptyState: React.FC
+ Feels new, go and explore our tool in depth and come back
+
+ to see your activity.
+
+
+
+
+ );
+};
diff --git a/web/components/dashboard/widgets/index.ts b/web/components/dashboard/widgets/index.ts
new file mode 100644
index 000000000..a481a8881
--- /dev/null
+++ b/web/components/dashboard/widgets/index.ts
@@ -0,0 +1,12 @@
+export * from "./dropdowns";
+export * from "./empty-states";
+export * from "./issue-panels";
+export * from "./loaders";
+export * from "./assigned-issues";
+export * from "./created-issues";
+export * from "./issues-by-priority";
+export * from "./issues-by-state-group";
+export * from "./overview-stats";
+export * from "./recent-activity";
+export * from "./recent-collaborators";
+export * from "./recent-projects";
diff --git a/web/components/dashboard/widgets/issue-panels/index.ts b/web/components/dashboard/widgets/issue-panels/index.ts
new file mode 100644
index 000000000..f5b7d53d4
--- /dev/null
+++ b/web/components/dashboard/widgets/issue-panels/index.ts
@@ -0,0 +1,3 @@
+export * from "./issue-list-item";
+export * from "./issues-list";
+export * from "./tabs-list";
diff --git a/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
new file mode 100644
index 000000000..3da862d91
--- /dev/null
+++ b/web/components/dashboard/widgets/issue-panels/issue-list-item.tsx
@@ -0,0 +1,297 @@
+import { observer } from "mobx-react-lite";
+import isToday from "date-fns/isToday";
+// hooks
+import { useIssueDetail, useMember, useProject } from "hooks/store";
+// ui
+import { Avatar, AvatarGroup, ControlLink, PriorityIcon } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange, renderFormattedDate } from "helpers/date-time.helper";
+// types
+import { TIssue, TWidgetIssue } from "@plane/types";
+
+export type IssueListItemProps = {
+ issueId: string;
+ onClick: (issue: TIssue) => void;
+ workspaceSlug: string;
+};
+
+export const AssignedUpcomingIssueListItem: React.FC+ People are excited to work with you, once they do you will find your frequent collaborators here. +
+
+
+
+
+ {issueDetails.name}
+
+ {issueDetails.target_date
+ ? isToday(new Date(issueDetails.target_date))
+ ? "Today"
+ : renderFormattedDate(issueDetails.target_date)
+ : "-"}
+
+
+ {blockedByIssues.length > 0
+ ? blockedByIssues.length > 1
+ ? `${blockedByIssues.length} blockers`
+ : `${blockedByIssueProjectDetails?.identifier} ${blockedByIssues[0]?.sequence_id}`
+ : "-"}
+
+
+
+ {issueDetails.name}
+
+ {dueBy} {`day${dueBy > 1 ? "s" : ""}`}
+
+
+ {blockedByIssues.length > 0
+ ? blockedByIssues.length > 1
+ ? `${blockedByIssues.length} blockers`
+ : `${blockedByIssueProjectDetails?.identifier} ${blockedByIssues[0]?.sequence_id}`
+ : "-"}
+
+
+
+ {issueDetails.name}
+
+
+ {issue.name}
+
+ {issue.target_date
+ ? isToday(new Date(issue.target_date))
+ ? "Today"
+ : renderFormattedDate(issue.target_date)
+ : "-"}
+
+
+ {issue.assignee_ids.length > 0 ? (
+
+ {issue.assignee_ids?.map((assigneeId) => {
+ const userDetails = getUserDetails(assigneeId);
+
+ if (!userDetails) return null;
+
+ return
+ ) : (
+ "-"
+ )}
+
+
+
+ {issue.name}
+
+ {dueBy} {`day${dueBy > 1 ? "s" : ""}`}
+
+
+ {issue.assignee_ids.length > 0 ? (
+
+ {issue.assignee_ids?.map((assigneeId) => {
+ const userDetails = getUserDetails(assigneeId);
+
+ if (!userDetails) return null;
+
+ return
+ ) : (
+ "-"
+ )}
+
+
+
+ {issue.name}
+
+ {issue.assignee_ids.length > 0 ? (
+
+ {issue.assignee_ids?.map((assigneeId) => {
+ const userDetails = getUserDetails(assigneeId);
+
+ if (!userDetails) return null;
+
+ return
+ ) : (
+ "-"
+ )}
+
+
+ {isLoading ? (
+
+
+ ) : issues.length > 0 ? (
+ <>
+
+ {totalIssues > issues.length && (
+
+ View all issues
+
+ )}
+
+ );
+};
diff --git a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
new file mode 100644
index 000000000..6ef6ec0ee
--- /dev/null
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -0,0 +1,26 @@
+import { Tab } from "@headlessui/react";
+// helpers
+import { cn } from "helpers/common.helper";
+// constants
+import { ISSUES_TABS_LIST } from "constants/dashboard";
+
+export const TabsList = () => (
+
+
+ + Issues + + {totalIssues} + +
+ {tab === "upcoming" &&Due date
} + {tab === "overdue" &&Due by
} + {type === "assigned" && tab !== "completed" &&Blocked by
} + {type === "created" &&Assigned to
} +
+ {issues.map((issue) => {
+ const IssueListItem = ISSUE_LIST_ITEM[type][tab];
+
+ if (!IssueListItem) return null;
+
+ return (
+
+
+ ) : (
+
+ {type === "assigned" &&
+ )}
+
+
+ handleUpdateFilters({
+ target_date: val,
+ })
+ }
+ />
+
+ {totalCount > 0 ? (
+ Priority of assigned issues
+
+
+ ) : (
+
+ ({
+ id: p.key,
+ value: p.key,
+ }))}
+ axisBottom={null}
+ axisLeft={null}
+ height="119px"
+ margin={{
+ top: 11,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ }}
+ defs={PRIORITY_GRAPH_GRADIENTS}
+ fill={ISSUE_PRIORITIES.map((p) => ({
+ match: {
+ id: p.key,
+ },
+ id: `gradient${p.title}`,
+ }))}
+ tooltip={() => <>}
+ enableGridX={false}
+ enableGridY={false}
+ layers={[CustomBarsLayer]}
+ />
+
+
+ {chartData.map((item) => (
+
+
+
+
+ )}
+
+ );
+});
diff --git a/web/components/dashboard/widgets/issues-by-state-group.tsx b/web/components/dashboard/widgets/issues-by-state-group.tsx
new file mode 100644
index 000000000..d4478040a
--- /dev/null
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useDashboard } from "hooks/store";
+// components
+import { PieGraph } from "components/ui";
+import {
+ DurationFilterDropdown,
+ IssuesByStateGroupEmptyState,
+ WidgetLoader,
+ WidgetProps,
+} from "components/dashboard/widgets";
+// helpers
+import { getCustomDates } from "helpers/dashboard.helper";
+// types
+import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
+// constants
+import { STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "constants/dashboard";
+import { STATE_GROUPS } from "constants/state";
+
+const WIDGET_KEY = "issues_by_state_groups";
+
+export const IssuesByStateGroupWidget: React.FC
+
+ handleUpdateFilters({
+ target_date: val,
+ })
+ }
+ />
+
+ {totalCount > 0 ? (
+ State of assigned issues
+
+
+ ) : (
+
+
+
+ datum.data.color}
+ padAngle={1}
+ enableArcLinkLabels={false}
+ enableArcLabels={false}
+ activeOuterRadiusOffset={5}
+ tooltip={() => <>}
+ margin={{
+ top: 0,
+ right: 5,
+ bottom: 0,
+ left: 5,
+ }}
+ defs={STATE_GROUP_GRAPH_GRADIENTS}
+ fill={Object.values(STATE_GROUPS).map((p) => ({
+ match: {
+ id: p.key,
+ },
+ id: `gradient${p.label}`,
+ }))}
+ onClick={(datum, e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ router.push(`/${workspaceSlug}/workspace-views/assigned/?state_group=${datum.id}`);
+ }}
+ onMouseEnter={(datum) => setActiveStateGroup(datum.id as TStateGroups)}
+ layers={["arcs", CenteredMetric]}
+ />
+
+
+ {chartData.map((item) => (
+
+
+
+ ))}
+
+
+ {item.label}
+
+ {item.value.toFixed(0)}%
+
+
+ )}
+
+ );
+});
diff --git a/web/components/dashboard/widgets/loaders/assigned-issues.tsx b/web/components/dashboard/widgets/loaders/assigned-issues.tsx
new file mode 100644
index 000000000..4de381b29
--- /dev/null
+++ b/web/components/dashboard/widgets/loaders/assigned-issues.tsx
@@ -0,0 +1,22 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const AssignedIssuesWidgetLoader = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: 8 }).map((_, index) => (
+
+
+
+ ))}
+
+
+
+
+ ))}
+
+
+
+
+
+ {STATS_LIST.map((stat, index) => {
+ const isFirst = index === 0;
+ const isLast = index === STATS_LIST.length - 1;
+ const isMiddle = !isFirst && !isLast;
+
+ return (
+
+ );
+});
diff --git a/web/components/dashboard/widgets/recent-activity.tsx b/web/components/dashboard/widgets/recent-activity.tsx
new file mode 100644
index 000000000..52fca4600
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-activity.tsx
@@ -0,0 +1,105 @@
+import { useEffect } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { History } from "lucide-react";
+// hooks
+import { useDashboard, useUser } from "hooks/store";
+// components
+import { ActivityIcon, ActivityMessage } from "components/core";
+import { RecentActivityEmptyState, WidgetLoader, WidgetProps } from "components/dashboard/widgets";
+// ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { calculateTimeAgo } from "helpers/date-time.helper";
+// types
+import { TRecentActivityWidgetResponse } from "@plane/types";
+
+const WIDGET_KEY = "recent_activity";
+
+export const RecentActivityWidget: React.FC
+ {!isLast && (
+
+ )}
+
+
+ );
+ })}
+ {stat.count}
+{stat.title}
+ +
+
+ {widgetStats.length > 0 ? (
+ My activity
+
+ {widgetStats.map((activity) => (
+
+ ) : (
+
+
+ ))}
+
+ {activity.field ? (
+ activity.new_value === "restore" ? (
+
+
+
+ )
+ ) : activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
+
+ {activity.actor_detail.is_bot
+ ? activity.actor_detail.first_name.charAt(0)
+ : activity.actor_detail.display_name.charAt(0)}
+
+ )}
+
+
+
+
+ {currentUser?.id === activity.actor_detail.id ? "You" : activity.actor_detail.display_name}{" "}
+
+ {activity.field ? (
+
{calculateTimeAgo(activity.created_at)}
+
+
+ )}
+
+ );
+});
diff --git a/web/components/dashboard/widgets/recent-collaborators.tsx b/web/components/dashboard/widgets/recent-collaborators.tsx
new file mode 100644
index 000000000..693f9808d
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-collaborators.tsx
@@ -0,0 +1,93 @@
+import { useEffect } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useDashboard, useMember, useUser } from "hooks/store";
+// components
+import { RecentCollaboratorsEmptyState, WidgetLoader, WidgetProps } from "components/dashboard/widgets";
+// ui
+import { Avatar } from "@plane/ui";
+// types
+import { TRecentCollaboratorsWidgetResponse } from "@plane/types";
+
+type CollaboratorListItemProps = {
+ issueCount: number;
+ userId: string;
+ workspaceSlug: string;
+};
+
+const WIDGET_KEY = "recent_collaborators";
+
+const CollaboratorListItem: React.FC
+
+ + {isCurrentUser ? "You" : userDetails?.display_name} +
++ {issueCount} active issue{issueCount > 1 ? "s" : ""} +
+ + ); +}); + +export const RecentCollaboratorsWidget: React.FC
+
+ );
+});
diff --git a/web/components/dashboard/widgets/recent-projects.tsx b/web/components/dashboard/widgets/recent-projects.tsx
new file mode 100644
index 000000000..d85cf52c8
--- /dev/null
+++ b/web/components/dashboard/widgets/recent-projects.tsx
@@ -0,0 +1,125 @@
+import { useEffect } from "react";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { Plus } from "lucide-react";
+// hooks
+import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
+// components
+import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
+// ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { TRecentProjectsWidgetResponse } from "@plane/types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
+import { PROJECT_BACKGROUND_COLORS } from "constants/dashboard";
+
+const WIDGET_KEY = "recent_projects";
+
+type ProjectListItemProps = {
+ projectId: string;
+ workspaceSlug: string;
+};
+
+const ProjectListItem: React.FC
+
+ {widgetStats.length > 1 ? (
+ Collaborators
+
+ {widgetStats.map((user) => (
+
+ ) : (
+
+
+ )}
+
+ {projectDetails.emoji ? (
+
+ {renderEmoji(projectDetails.emoji)}
+
+ ) : projectDetails.icon_prop ? (
+
+ {renderEmoji(projectDetails.icon_prop)}
+ ) : (
+
+ {projectDetails.name.charAt(0)}
+
+ )}
+
+
+
+ );
+});
+
+export const RecentProjectsWidget: React.FC+ {projectDetails.name} +
+
+
+ {projectDetails.members?.map((member) => (
+
+
+
+
+ My projects
+
+ {canCreateProject && (
+
+ )}
+ {widgetStats.map((projectId) => (
+
+
+ );
+});
diff --git a/web/components/dropdowns/cycle.tsx b/web/components/dropdowns/cycle.tsx
index 4d5c60acd..5a861a8f9 100644
--- a/web/components/dropdowns/cycle.tsx
+++ b/web/components/dropdowns/cycle.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@@ -6,6 +6,8 @@ import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useCycle } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { ContrastIcon } from "@plane/ui";
// helpers
@@ -26,6 +28,7 @@ type Props = {
placement?: Placement;
projectId: string;
value: string | null;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -104,9 +107,13 @@ export const CycleDropdown: React.FC
- = (props) => {
placement,
value,
closeOnSelect = true,
+ tabIndex,
} = props;
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -143,8 +151,16 @@ export const DateDropdown: React.FC = (props) => {
const isDateSelected = value !== null && value !== undefined && value.toString().trim() !== "";
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
-
+
{({ close }) => (
<>
@@ -159,6 +175,7 @@ export const DateDropdown: React.FC = (props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= (props) => {
) : null}
-
-
+ {isOpen && (
+
+
+ )}
)}
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 8d538f53f..9138b2bea 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@@ -7,6 +7,8 @@ import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import sortBy from "lodash/sortBy";
// hooks
import { useApplication, useEstimate } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// helpers
import { cn } from "helpers/common.helper";
// types
@@ -24,6 +26,7 @@ type Props = {
placement?: Placement;
projectId: string;
value: number | null;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -102,9 +105,13 @@ export const EstimateDropdown: React.FC = observer((props) => {
placement,
projectId,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -160,15 +167,26 @@ export const EstimateDropdown: React.FC = observer((props) => {
const selectedEstimate = value !== null ? getEstimatePointValue(value) : null;
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -176,6 +194,7 @@ export const EstimateDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -191,6 +210,7 @@ export const EstimateDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
- = observer((props) => {
}
placement="bottom-start"
+ tabIndex={15}
>
{watch("parent_id") ? (
<>
@@ -577,18 +620,22 @@ export const IssueFormRoot: FC = observer((props) => {
;
isOpen: boolean;
onClose: () => void;
- onSubmit?: (res: Partial) => Promise;
+ onSubmit?: (res: TIssue) => Promise;
withDraftIssueWrapper?: boolean;
+ storeType?: TCreateModalStoreTypes;
}
export const CreateUpdateIssueModal: React.FC = observer((props) => {
- const { data, isOpen, onClose, onSubmit, withDraftIssueWrapper = true } = props;
+ const {
+ data,
+ isOpen,
+ onClose,
+ onSubmit,
+ withDraftIssueWrapper = true,
+ storeType = EIssuesStoreType.PROJECT,
+ } = props;
// states
const [changesMade, setChangesMade] = useState | null>(null);
- // router
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+ const [createMore, setCreateMore] = useState(false);
+ const [activeProjectId, setActiveProjectId] = useState(null);
// store hooks
+ const {
+ eventTracker: { postHogEventTracker },
+ } = useApplication();
+ const { currentUser } = useUser();
+ const {
+ router: { workspaceSlug, projectId, cycleId, moduleId, viewId: projectViewId },
+ } = useApplication();
+ const { currentWorkspace } = useWorkspace();
const { workspaceProjectIds } = useProject();
- const {
- issues: { createIssue, updateIssue },
- } = useIssues(EIssuesStoreType.PROJECT);
- const {
- issues: { addIssueToCycle },
- } = useIssues(EIssuesStoreType.CYCLE);
- const {
- issues: { addIssueToModule },
- } = useIssues(EIssuesStoreType.MODULE);
+ const { fetchCycleDetails } = useCycle();
+ const { fetchModuleDetails } = useModule();
+ const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
+ const { issues: moduleIssues } = useIssues(EIssuesStoreType.MODULE);
+ const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
+ const { issues: viewIssues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+ const { issues: profileIssues } = useIssues(EIssuesStoreType.PROFILE);
+ // store mapping based on current store
+ const issueStores = {
+ [EIssuesStoreType.PROJECT]: {
+ store: projectIssues,
+ dataIdToUpdate: activeProjectId,
+ viewId: undefined,
+ },
+ [EIssuesStoreType.PROJECT_VIEW]: {
+ store: viewIssues,
+ dataIdToUpdate: activeProjectId,
+ viewId: projectViewId,
+ },
+ [EIssuesStoreType.PROFILE]: {
+ store: profileIssues,
+ dataIdToUpdate: currentUser?.id || undefined,
+ viewId: undefined,
+ },
+ [EIssuesStoreType.CYCLE]: {
+ store: cycleIssues,
+ dataIdToUpdate: activeProjectId,
+ viewId: cycleId,
+ },
+ [EIssuesStoreType.MODULE]: {
+ store: moduleIssues,
+ dataIdToUpdate: activeProjectId,
+ viewId: moduleId,
+ },
+ };
// toast alert
const { setToastAlert } = useToast();
// local storage
const { setValue: setLocalStorageDraftIssue } = useLocalStorage("draftedIssue", {});
+ // current store details
+ const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[storeType];
+
+ useEffect(() => {
+ // if modal is closed, reset active project to null
+ // and return to avoid activeProjectId being set to some other project
+ if (!isOpen) {
+ setActiveProjectId(null);
+ return;
+ }
+
+ // if data is present, set active project to the project of the
+ // issue. This has more priority than the project in the url.
+ if (data && data.project_id) {
+ setActiveProjectId(data.project_id);
+ return;
+ }
+
+ // if data is not present, set active project to the project
+ // in the url. This has the least priority.
+ if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProjectId)
+ setActiveProjectId(projectId ?? workspaceProjectIds?.[0]);
+ }, [data, projectId, workspaceProjectIds, isOpen, activeProjectId]);
+
+ const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
+ if (!workspaceSlug || !activeProjectId) return;
+
+ await cycleIssues.addIssueToCycle(workspaceSlug, issue.project_id, cycleId, [issue.id]);
+ fetchCycleDetails(workspaceSlug, activeProjectId, cycleId);
+ };
+
+ const addIssueToModule = async (issue: TIssue, moduleId: string) => {
+ if (!workspaceSlug || !activeProjectId) return;
+
+ await moduleIssues.addIssueToModule(workspaceSlug, activeProjectId, moduleId, [issue.id]);
+ fetchModuleDetails(workspaceSlug, activeProjectId, moduleId);
+ };
+
+ const handleCreateMoreToggleChange = (value: boolean) => {
+ setCreateMore(value);
+ };
const handleClose = (saveDraftIssueInLocalStorage?: boolean) => {
if (changesMade && saveDraftIssueInLocalStorage) {
const draftIssue = JSON.stringify(changesMade);
-
setLocalStorageDraftIssue(draftIssue);
}
-
+ setActiveProjectId(null);
onClose();
};
- const handleCreateIssue = async (payload: Partial): Promise => {
- if (!workspaceSlug || !payload.project_id) return null;
+ const handleCreateIssue = async (payload: Partial): Promise => {
+ if (!workspaceSlug || !dataIdToUpdate) return;
- await createIssue(workspaceSlug.toString(), payload.project_id, payload)
- .then(async (res) => {
- setToastAlert({
- type: "success",
- title: "Success!",
- message: "Issue created successfully.",
- });
- handleClose();
- return res;
- })
- .catch(() => {
- setToastAlert({
- type: "error",
- title: "Error!",
- message: "Issue could not be created. Please try again.",
- });
+ try {
+ const response = await currentIssueStore.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId);
+ if (!response) throw new Error();
+
+ currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
+
+ if (payload.cycle_id && payload.cycle_id !== "" && storeType !== EIssuesStoreType.CYCLE)
+ await addIssueToCycle(response, payload.cycle_id);
+ if (payload.module_id && payload.module_id !== "" && storeType !== EIssuesStoreType.MODULE)
+ await addIssueToModule(response, payload.module_id);
+
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Issue created successfully.",
});
-
- return null;
+ postHogEventTracker(
+ "ISSUE_CREATED",
+ {
+ ...response,
+ state: "SUCCESS",
+ },
+ {
+ isGrouping: true,
+ groupType: "Workspace_metrics",
+ groupId: currentWorkspace?.id!,
+ }
+ );
+ !createMore && handleClose();
+ return response;
+ } catch (error) {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Issue could not be created. Please try again.",
+ });
+ postHogEventTracker(
+ "ISSUE_CREATED",
+ {
+ state: "FAILED",
+ },
+ {
+ isGrouping: true,
+ groupType: "Workspace_metrics",
+ groupId: currentWorkspace?.id!,
+ }
+ );
+ }
};
- const handleUpdateIssue = async (payload: Partial): Promise => {
- if (!workspaceSlug || !payload.project_id || !data?.id) return null;
+ const handleUpdateIssue = async (payload: Partial): Promise => {
+ if (!workspaceSlug || !dataIdToUpdate || !data?.id) return;
- await updateIssue(workspaceSlug.toString(), payload.project_id, data.id, payload)
- .then((res) => {
- setToastAlert({
- type: "success",
- title: "Success!",
- message: "Issue updated successfully.",
- });
- handleClose();
- return { ...payload, ...res };
- })
- .catch(() => {
- setToastAlert({
- type: "error",
- title: "Error!",
- message: "Issue could not be updated. Please try again.",
- });
+ try {
+ const response = await currentIssueStore.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId);
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Issue updated successfully.",
});
-
- return null;
+ postHogEventTracker(
+ "ISSUE_UPDATED",
+ {
+ ...response,
+ state: "SUCCESS",
+ },
+ {
+ isGrouping: true,
+ groupType: "Workspace_metrics",
+ groupId: currentWorkspace?.id!,
+ }
+ );
+ handleClose();
+ return response;
+ } catch (error) {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Issue could not be created. Please try again.",
+ });
+ postHogEventTracker(
+ "ISSUE_UPDATED",
+ {
+ state: "FAILED",
+ },
+ {
+ isGrouping: true,
+ groupType: "Workspace_metrics",
+ groupId: currentWorkspace?.id!,
+ }
+ );
+ }
};
const handleFormSubmit = async (formData: Partial) => {
- if (!workspaceSlug || !formData.project_id) return;
+ if (!workspaceSlug || !dataIdToUpdate || !storeType) return;
const payload: Partial = {
...formData,
description_html: formData.description_html ?? "",
};
- let res: TIssue | null = null;
- if (!data?.id) res = await handleCreateIssue(payload);
- else res = await handleUpdateIssue(payload);
+ let response: TIssue | undefined = undefined;
+ if (!data?.id) response = await handleCreateIssue(payload);
+ else response = await handleUpdateIssue(payload);
- // add issue to cycle if cycle is selected, and cycle is different from current cycle
- if (formData.cycle_id && res && (!data?.id || formData.cycle_id !== data?.cycle_id))
- await addIssueToCycle(workspaceSlug.toString(), formData.project_id, formData.cycle_id, [res.id]);
-
- // add issue to module if module is selected, and module is different from current module
- if (formData.module_id && res && (!data?.id || formData.module_id !== data?.module_id))
- await addIssueToModule(workspaceSlug.toString(), formData.project_id, formData.module_id, [res.id]);
-
- if (res && onSubmit) await onSubmit(res);
+ if (response != undefined && onSubmit) await onSubmit(response);
};
const handleFormChange = (formData: Partial | null) => setChangesMade(formData);
// don't open the modal if there are no projects
- if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
-
- // if project id is present in the router query, use that as the selected project id, otherwise use the first project id
- const selectedProjectId = projectId ? projectId.toString() : workspaceProjectIds[0];
+ if (!workspaceProjectIds || workspaceProjectIds.length === 0 || !activeProjectId) return null;
return (
@@ -164,18 +282,30 @@ export const CreateUpdateIssueModal: React.FC = observer((prop
{withDraftIssueWrapper ? (
handleClose(false)}
+ isCreateMoreToggleEnabled={createMore}
+ onCreateMoreToggleChange={handleCreateMoreToggleChange}
onSubmit={handleFormSubmit}
- projectId={selectedProjectId}
+ projectId={activeProjectId}
/>
)}
diff --git a/web/components/issues/issue-reaction.tsx b/web/components/issues/issue-reaction.tsx
deleted file mode 100644
index 37d0599e4..000000000
--- a/web/components/issues/issue-reaction.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { observer } from "mobx-react-lite";
-// hooks
-import { useUser } from "hooks/store";
-import useIssueReaction from "hooks/use-issue-reaction";
-// components
-import { ReactionSelector } from "components/core";
-// string helpers
-import { renderEmoji } from "helpers/emoji.helper";
-
-// types
-type Props = {
- workspaceSlug: string;
- projectId: string;
- issueId: string;
-};
-
-export const IssueReaction: React.FC = observer((props) => {
- const { workspaceSlug, projectId, issueId } = props;
-
- const { currentUser } = useUser();
-
- const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
- workspaceSlug,
- projectId,
- issueId
- );
-
- const handleReactionClick = (reaction: string) => {
- if (!workspaceSlug || !projectId || !issueId) return;
-
- const isSelected = reactions?.some((r) => r.actor === currentUser?.id && r.reaction === reaction);
-
- if (isSelected) {
- handleReactionDelete(reaction);
- } else {
- handleReactionCreate(reaction);
- }
- };
-
- return (
- = ({ labelDetails, maxRender = 1 }) => (
<>
- {labelDetails.length > 0 ? (
+ {labelDetails?.length > 0 ? (
labelDetails.length <= maxRender ? (
<>
{labelDetails.map((label) => (
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
deleted file mode 100644
index 2863cb3b9..000000000
--- a/web/components/issues/main-content.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import useSWR, { mutate } from "swr";
-import { MinusCircle } from "lucide-react";
-// hooks
-import { useApplication, useIssues, useProject, useProjectState, useUser, useWorkspace } from "hooks/store";
-import useToast from "hooks/use-toast";
-// services
-import { IssueService, IssueCommentService } from "services/issue";
-// components
-import {
- IssueAttachmentRoot,
- AddComment,
- IssueActivitySection,
- IssueDescriptionForm,
- IssueReaction,
- IssueUpdateStatus,
-} from "components/issues";
-import { useState } from "react";
-import { SubIssuesRoot } from "./sub-issues";
-// ui
-import { CustomMenu, LayersIcon, StateGroupIcon } from "@plane/ui";
-// types
-import { TIssue, IIssueActivity } from "@plane/types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
-// constants
-import { EUserProjectRoles } from "constants/project";
-
-type Props = {
- issueDetails: TIssue;
- submitChanges: (formData: Partial) => Promise;
- uneditable?: boolean;
-};
-
-// services
-const issueService = new IssueService();
-const issueCommentService = new IssueCommentService();
-
-export const IssueMainContent: React.FC = observer((props) => {
- const { issueDetails, submitChanges, uneditable = false } = props;
- // states
- const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
- // router
- const router = useRouter();
- const { workspaceSlug, projectId, issueId } = router.query;
- // toast alert
- const { setToastAlert } = useToast();
- const {
- eventTracker: { postHogEventTracker },
- } = useApplication();
- const {
- currentUser,
- membership: { currentProjectRole },
- } = useUser();
- const { currentWorkspace } = useWorkspace();
- const { getProjectById } = useProject();
- const { projectStates, getProjectStates } = useProjectState();
- const { issueMap } = useIssues();
-
- const projectDetails = projectId ? getProjectById(projectId.toString()) : null;
- const currentIssueState = projectStates?.find((s) => s.id === issueDetails.state_id);
-
- const { data: siblingIssues } = useSWR(
- workspaceSlug && projectId && issueDetails?.parent_id ? SUB_ISSUES(issueDetails.parent_id) : null,
- workspaceSlug && projectId && issueDetails?.parent_id
- ? () => issueService.subIssues(workspaceSlug.toString(), projectId.toString(), issueDetails.parent_id ?? "")
- : null
- );
- const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
-
- const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
- workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
- workspaceSlug && projectId && issueId
- ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
- : null
- );
-
- const handleCommentUpdate = async (commentId: string, data: Partial) => {
- if (!workspaceSlug || !projectId || !issueId) return;
-
- await issueCommentService
- .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, data)
- .then((res) => {
- mutateIssueActivity();
- postHogEventTracker(
- "COMMENT_UPDATED",
- {
- ...res,
- state: "SUCCESS",
- },
- {
- isGrouping: true,
- groupType: "Workspace_metrics",
- groupId: currentWorkspace?.id!,
- }
- );
- });
- };
-
- const handleCommentDelete = async (commentId: string) => {
- if (!workspaceSlug || !projectId || !issueId || !currentUser) return;
-
- mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
- await issueCommentService
- .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId)
- .then(() => {
- mutateIssueActivity();
- postHogEventTracker(
- "COMMENT_DELETED",
- {
- state: "SUCCESS",
- },
- {
- isGrouping: true,
- groupType: "Workspace_metrics",
- groupId: currentWorkspace?.id!,
- }
- );
- });
- };
-
- const handleAddComment = async (formData: IIssueActivity) => {
- if (!workspaceSlug || !issueDetails || !currentUser) return;
-
- await issueCommentService
- .createIssueComment(workspaceSlug.toString(), issueDetails.project_id, issueDetails.id, formData)
- .then((res) => {
- mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
- postHogEventTracker(
- "COMMENT_ADDED",
- {
- ...res,
- state: "SUCCESS",
- },
- {
- isGrouping: true,
- groupType: "Workspace_metrics",
- groupId: currentWorkspace?.id!,
- }
- );
- })
- .catch(() =>
- setToastAlert({
- type: "error",
- title: "Error!",
- message: "Comment could not be posted. Please try again.",
- })
- );
- };
-
- const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
-
- const parentDetail = issueMap?.[issueDetails.parent_id || ""] || undefined;
-
- return (
- <>
- ) => void;
- issueReactionCreate: (reaction: string) => void;
- issueReactionRemove: (reaction: string) => void;
+ projectId: string;
+ issueId: string;
+ issueOperations: TIssueOperations;
+ is_archived: boolean;
+ disabled: boolean;
isSubmitting: "submitting" | "submitted" | "saved";
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
}
export const PeekOverviewIssueDetails: FC = (props) => {
- const {
- workspaceSlug,
- issue,
- issueReactions,
- user,
- issueUpdate,
- issueReactionCreate,
- issueReactionRemove,
- isSubmitting,
- setIsSubmitting,
- } = props;
- // states
- const [characterLimit, setCharacterLimit] = useState(false);
+ const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
// store hooks
- const {
- membership: { currentProjectRole },
- } = useUser();
- const { mentionHighlights, mentionSuggestions } = useMention();
const { getProjectById } = useProject();
- // derived values
- const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
- // toast alert
- const { setShowAlert } = useReloadConfirmations();
- // form info
+ const { currentUser } = useUser();
const {
- handleSubmit,
- watch,
- reset,
- control,
- formState: { errors },
- } = useForm({
- defaultValues: {
- name: issue.name,
- description_html: issue.description_html,
- },
- });
-
- const handleDescriptionFormSubmit = useCallback(
- async (formData: Partial) => {
- if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
-
- await issueUpdate({
- ...issue,
- name: formData.name ?? "",
- description_html: formData.description_html ?? "",
- });
- },
- [issue, issueUpdate]
- );
-
- const [localTitleValue, setLocalTitleValue] = useState("");
- const [localIssueDescription, setLocalIssueDescription] = useState({
- id: issue.id,
- description_html: issue.description_html,
- });
-
- // adding issue.description_html or issue.name to dependency array causes
- // editor rerendering on every save
- useEffect(() => {
- if (issue.id) {
- setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
- setLocalTitleValue(issue.name);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [issue.id]); // TODO: Verify the exhaustive-deps warning
-
- // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
- // TODO: Verify the exhaustive-deps warning
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const debouncedFormSave = useCallback(
- debounce(async () => {
- handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
- }, 1500),
- [handleSubmit]
- );
-
- useEffect(() => {
- if (isSubmitting === "submitted") {
- setShowAlert(false);
- setTimeout(async () => {
- setIsSubmitting("saved");
- }, 2000);
- } else if (isSubmitting === "submitting") {
- setShowAlert(true);
- }
- }, [isSubmitting, setShowAlert, setIsSubmitting]);
-
- // reset form values
- useEffect(() => {
- if (!issue) return;
-
- reset({
- ...issue,
- });
- }, [issue, reset]);
-
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // derived values
+ const issue = getIssueById(issueId);
+ if (!issue) return <>;
const projectDetails = getProjectById(issue?.project_id);
return (
@@ -135,82 +34,24 @@ export const PeekOverviewIssueDetails: FC = (props) =
{projectDetails?.identifier}-{issue?.sequence_id}
-
-
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index e791413b4..92f35b910 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -1,9 +1,12 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
import { Popover } from "@headlessui/react";
import DatePicker from "react-datepicker";
import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react";
// import "react-datepicker/dist/react-datepicker.css";
+// hooks
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// helpers
import { renderFormattedDate } from "helpers/date-time.helper";
import { cn } from "helpers/common.helper";
@@ -25,6 +28,7 @@ type Props = {
placement?: Placement;
value: Date | string | null;
closeOnSelect?: boolean;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -124,7 +128,11 @@ export const DateDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matches found
+ ) ) : ( -No matches found
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
- {
- onChange(val);
- if (closeOnSelect) close();
- }}
- dateFormat="dd-MM-yyyy"
- minDate={minDate}
- maxDate={maxDate}
- calendarClassName="shadow-custom-shadow-rg rounded"
- inline
- />
-
-
+ {
+ onChange(val);
+ if (closeOnSelect) close();
+ }}
+ dateFormat="dd-MM-yyyy"
+ minDate={minDate}
+ maxDate={maxDate}
+ calendarClassName="shadow-custom-shadow-rg rounded"
+ inline
+ />
+
+
- = observer((props) => {
placement,
projectId,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -93,12 +99,23 @@ export const ProjectMemberDropdown: React.FC = observer((props) => {
if (!projectMemberIds) fetchProjectMembers(workspaceSlug, projectId);
}, [fetchProjectMembers, projectId, projectMemberIds, workspaceSlug]);
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
@@ -107,6 +124,7 @@ export const ProjectMemberDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -122,6 +140,7 @@ export const ProjectMemberDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
- = observer((props) => {
}}
projectId={projectId}
buttonVariant="border-with-text"
+ tabIndex={14}
/>
)}
@@ -532,6 +574,7 @@ export const IssueFormRoot: FC
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/dropdowns/member/project-member.tsx b/web/components/dropdowns/member/project-member.tsx
index 18d317a56..1e6856274 100644
--- a/web/components/dropdowns/member/project-member.tsx
+++ b/web/components/dropdowns/member/project-member.tsx
@@ -1,10 +1,12 @@
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Check, Search } from "lucide-react";
// hooks
import { useApplication, useMember, useUser } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// components
import { BackgroundButton, BorderButton, TransparentButton } from "components/dropdowns";
// icons
@@ -33,9 +35,13 @@ export const ProjectMemberDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matching results
+ ) ) : ( -No matching results
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
- = observer((props) => {
placement,
projectId,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -166,15 +173,26 @@ export const ModuleDropdown: React.FC = observer((props) => {
const selectedModule = value ? getModuleById(value) : null;
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -182,6 +200,7 @@ export const ModuleDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -197,6 +216,7 @@ export const ModuleDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
- ;
type Props = {
+ workspaceSlug: string;
disabled?: boolean;
handleAttachmentOperations: TAttachmentOperationsModal;
};
export const IssueAttachmentUpload: React.FC = observer((props) => {
- const { disabled = false, handleAttachmentOperations } = props;
+ const { workspaceSlug, disabled = false, handleAttachmentOperations } = props;
// store hooks
const {
- router: { workspaceSlug },
config: { envConfig },
} = useApplication();
// states
diff --git a/web/components/issues/attachment/attachments-list.tsx b/web/components/issues/attachment/attachments-list.tsx
index 6644d7e8c..2129a4f61 100644
--- a/web/components/issues/attachment/attachments-list.tsx
+++ b/web/components/issues/attachment/attachments-list.tsx
@@ -7,25 +7,35 @@ import { IssueAttachmentsDetail } from "./attachment-detail";
// types
import { TAttachmentOperations } from "./root";
-export type TAttachmentOperationsRemoveModal = Exclude;
+type TAttachmentOperationsRemoveModal = Exclude;
-export type TIssueAttachmentsList = {
+type TIssueAttachmentsList = {
+ issueId: string;
handleAttachmentOperations: TAttachmentOperationsRemoveModal;
+ disabled?: boolean;
};
export const IssueAttachmentsList: FC = observer((props) => {
- const { handleAttachmentOperations } = props;
+ const { issueId, handleAttachmentOperations, disabled } = props;
// store hooks
const {
- attachment: { issueAttachments },
+ attachment: { getAttachmentsByIssueId },
} = useIssueDetail();
+ const issueAttachments = getAttachmentsByIssueId(issueId);
+
+ if (!issueAttachments) return <>;
+
return (
<>
{issueAttachments &&
issueAttachments.length > 0 &&
issueAttachments.map((attachmentId) => (
- ;
+
+type Props = {
isOpen: boolean;
setIsOpen: Dispatch>;
data: TIssueAttachment;
+ handleAttachmentOperations: TAttachmentOperationsRemoveModal;
};
export const IssueAttachmentDeleteModal: FC = (props) => {
diff --git a/web/components/issues/attachment/root.tsx b/web/components/issues/attachment/root.tsx
index 9d8a31b05..79a6dc840 100644
--- a/web/components/issues/attachment/root.tsx
+++ b/web/components/issues/attachment/root.tsx
@@ -1,13 +1,16 @@
import { FC, useMemo } from "react";
// hooks
-import { useApplication, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { IssueAttachmentUpload } from "./attachment-upload";
import { IssueAttachmentsList } from "./attachments-list";
export type TIssueAttachmentRoot = {
- isEditable: boolean;
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ disabled?: boolean;
};
export type TAttachmentOperations = {
@@ -17,12 +20,9 @@ export type TAttachmentOperations = {
export const IssueAttachmentRoot: FC = (props) => {
// props
- const { isEditable } = props;
+ const { workspaceSlug, projectId, issueId, disabled = false } = props;
// hooks
- const {
- router: { workspaceSlug, projectId },
- } = useApplication();
- const { issueId, createAttachment, removeAttachment } = useIssueDetail();
+ const { createAttachment, removeAttachment } = useIssueDetail();
const { setToastAlert } = useToast();
const handleAttachmentOperations: TAttachmentOperations = useMemo(
@@ -69,8 +69,16 @@ export const IssueAttachmentRoot: FC = (props) => {
);
diff --git a/web/components/issues/comment/comment-reaction.tsx b/web/components/issues/comment/comment-reaction.tsx
index eb80b0323..a59337575 100644
--- a/web/components/issues/comment/comment-reaction.tsx
+++ b/web/components/issues/comment/comment-reaction.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
import { useUser } from "hooks/store";
import useCommentReaction from "hooks/use-comment-reaction";
// ui
-import { ReactionSelector } from "components/core";
+// import { ReactionSelector } from "components/core";
// helper
import { renderEmoji } from "helpers/emoji.helper";
// types
@@ -47,7 +47,8 @@ export const CommentReaction: FC = observer((props) => {
return (
= observer((props) => {
handleFormChange();
}}
buttonVariant="border-with-text"
+ tabIndex={13}
/>
)}
@@ -503,6 +544,7 @@ export const IssueFormRoot: FC
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/dropdowns/member/types.d.ts b/web/components/dropdowns/member/types.d.ts
index 4c0bff67b..f5f81a5c6 100644
--- a/web/components/dropdowns/member/types.d.ts
+++ b/web/components/dropdowns/member/types.d.ts
@@ -11,6 +11,7 @@ export type MemberDropdownProps = {
dropdownArrow?: boolean;
placeholder?: string;
placement?: Placement;
+ tabIndex?: number;
} & (
| {
multiple: false;
diff --git a/web/components/dropdowns/module.tsx b/web/components/dropdowns/module.tsx
index ff35c26b6..e0d6b52f7 100644
--- a/web/components/dropdowns/module.tsx
+++ b/web/components/dropdowns/module.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@@ -6,6 +6,8 @@ import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useModule } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { DiceIcon } from "@plane/ui";
// helpers
@@ -26,6 +28,7 @@ type Props = {
placement?: Placement;
projectId: string;
value: string | null;
+ tabIndex?: number;
};
type DropdownOptions =
@@ -104,9 +107,13 @@ export const ModuleDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matching results
+ ) ) : ( -No matching results
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
- = (props) => {
onChange,
placement,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -250,7 +258,7 @@ export const PriorityDropdown: React.FC = (props) => {
>
= (props) => {
const filteredOptions =
query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -285,6 +304,7 @@ export const PriorityDropdown: React.FC = (props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -300,6 +320,7 @@ export const PriorityDropdown: React.FC = (props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= (props) => {
)}
-
-
);
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index c53574cb4..264f0c643 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -11,15 +11,15 @@ import { TAttachmentOperations } from "./root";
type TAttachmentOperationsModal = Exclude
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index 5c467a7b6..bd20c7965 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -1,8 +1,11 @@
-import { Fragment, ReactNode, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
+// hooks
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { PriorityIcon } from "@plane/ui";
// helpers
@@ -25,6 +28,7 @@ type Props = {
onChange: (val: TIssuePriorities) => void;
placement?: Placement;
value: TIssuePriorities;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -210,9 +214,13 @@ export const PriorityDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matching results
+ ) ) : ( -No matching results
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
- = observer((props) => {
onChange,
placement,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -146,15 +153,26 @@ export const ProjectDropdown: React.FC = observer((props) => {
const selectedProject = value ? getProjectById(value) : null;
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -162,6 +180,7 @@ export const ProjectDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -177,6 +196,7 @@ export const ProjectDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
- = (props) => {
= observer(({ integration })
variant="danger"
onClick={() => {
if (!isUserAdmin) return;
- handleRemoveIntegration;
+ handleRemoveIntegration();
}}
disabled={!isUserAdmin}
loading={deletingIntegration}
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 35ba358c8..57fb82319 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -66,8 +66,9 @@ export const SelectChannel: React.FC = observer(({ integration }) => {
}, [projectIntegration, projectId]);
const handleDelete = async () => {
+ if (!workspaceSlug || !projectId) return;
if (projectIntegration.length === 0) return;
- mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
+ mutate(SLACK_CHANNEL_INFO(workspaceSlug?.toString(), projectId?.toString()), (prevData: any) => {
if (!prevData) return;
return prevData.id !== integration.id;
}).then(() => {
diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx
index 58ded14e1..bd07f6a44 100644
--- a/web/components/issues/attachment/attachment-detail.tsx
+++ b/web/components/issues/attachment/attachment-detail.tsx
@@ -13,16 +13,20 @@ import { getFileIcon } from "components/icons";
import { truncateText } from "helpers/string.helper";
import { renderFormattedDate } from "helpers/date-time.helper";
import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper";
-// type
-import { TIssueAttachmentsList } from "./attachments-list";
+// types
+import { TAttachmentOperations } from "./root";
-export type TIssueAttachmentsDetail = TIssueAttachmentsList & {
+type TAttachmentOperationsRemoveModal = Exclude;
+
+type TIssueAttachmentsDetail = {
attachmentId: string;
+ handleAttachmentOperations: TAttachmentOperationsRemoveModal;
+ disabled?: boolean;
};
export const IssueAttachmentsDetail: FC = (props) => {
// props
- const { attachmentId, handleAttachmentOperations } = props;
+ const { attachmentId, handleAttachmentOperations, disabled } = props;
// store hooks
const { getUserDetails } = useMember();
const {
@@ -75,13 +79,15 @@ export const IssueAttachmentsDetail: FC = (props) => {
-
+ {!disabled && (
+
+ )}
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
+ {isOpen && (
+
+
-
+
+ )}
);
};
diff --git a/web/components/dropdowns/project.tsx b/web/components/dropdowns/project.tsx
index 65169dd88..7649e1d75 100644
--- a/web/components/dropdowns/project.tsx
+++ b/web/components/dropdowns/project.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useState } from "react";
+import { Fragment, ReactNode, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@@ -6,6 +6,8 @@ import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useProject } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// helpers
import { cn } from "helpers/common.helper";
import { renderEmoji } from "helpers/emoji.helper";
@@ -24,6 +26,7 @@ type Props = {
onChange: (val: string) => void;
placement?: Placement;
value: string | null;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -99,9 +102,13 @@ export const ProjectDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matching results
+ )} +
- {filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
- ) : (
-
- No matching results
- )} -
- = observer((props) => {
placement,
projectId,
value,
+ tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
+ const [isOpen, setIsOpen] = useState(false);
+ // refs
+ const dropdownRef = useRef(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -144,15 +151,26 @@ export const StateDropdown: React.FC = observer((props) => {
const selectedState = getStateById(value);
+ const openDropdown = () => {
+ setIsOpen(true);
+ if (referenceElement) referenceElement.focus();
+ };
+ const closeDropdown = () => setIsOpen(false);
+ const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+ useOutsideClickDetector(dropdownRef, closeDropdown);
+
return (
{button ? (
@@ -160,6 +178,7 @@ export const StateDropdown: React.FC = observer((props) => {
ref={setReferenceElement}
type="button"
className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+ onClick={openDropdown}
>
{button}
@@ -175,6 +194,7 @@ export const StateDropdown: React.FC = observer((props) => {
},
buttonContainerClassName
)}
+ onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
= observer((props) => {
)}
-
-
) : (
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index 415882daa..e4acca626 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -129,34 +129,37 @@ export const SelectDuplicateInboxIssueModal: React.FC
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index c7ba9eced..ba48af4bd 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@@ -6,6 +6,8 @@ import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useProjectState } from "hooks/store";
+import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// icons
import { StateGroupIcon } from "@plane/ui";
// helpers
@@ -26,6 +28,7 @@ type Props = {
placement?: Placement;
projectId: string;
value: string;
+ tabIndex?: number;
};
type ButtonProps = {
@@ -96,9 +99,13 @@ export const StateDropdown: React.FC
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matching results
+ ) ) : ( -No matching results
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
-
- setQuery(e.target.value)}
- placeholder="Search"
- displayValue={(assigned: any) => assigned?.name}
- />
-
-
- {filteredOptions ? (
- filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
-
- `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
- active ? "bg-custom-background-80" : ""
- } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected &&
- ))
+ {isOpen && (
+
+
-
+
+ )}
);
});
diff --git a/web/components/emoji-icon-picker/types.d.ts b/web/components/emoji-icon-picker/types.d.ts
index 01220ed44..8a0b54342 100644
--- a/web/components/emoji-icon-picker/types.d.ts
+++ b/web/components/emoji-icon-picker/types.d.ts
@@ -11,4 +11,5 @@ export type Props = {
) => void;
onIconColorChange?: (data: any) => void;
disabled?: boolean;
+ tabIndex?: number;
};
diff --git a/web/components/estimates/estimates-list.tsx b/web/components/estimates/estimates-list.tsx
index 323cbe888..e226e17e0 100644
--- a/web/components/estimates/estimates-list.tsx
+++ b/web/components/estimates/estimates-list.tsx
@@ -14,6 +14,8 @@ import { EmptyState } from "components/common";
import emptyEstimate from "public/empty-state/estimate.svg";
// types
import { IEstimate } from "@plane/types";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
export const EstimatesList: React.FC = observer(() => {
// states
@@ -31,7 +33,11 @@ export const EstimatesList: React.FC = observer(() => {
const editEstimate = (estimate: IEstimate) => {
setEstimateFormOpen(true);
- setEstimateToUpdate(estimate);
+ // Order the points array by key before updating the estimate to update state
+ setEstimateToUpdate({
+ ...estimate,
+ points: orderArrayBy(estimate.points, "key"),
+ });
};
const disableEstimates = () => {
@@ -102,7 +108,7 @@ export const EstimatesList: React.FC = observer(() => {
))}
) : (
-
+
-
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {filteredOptions ? (
+ filteredOptions.length > 0 ? (
+ filteredOptions.map((option) => (
+
+ `w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none ${
+ active ? "bg-custom-background-80" : ""
+ } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected &&
+ ))
+ ) : (
+
No matches found
+ ) ) : ( -No matches found
- ) - ) : ( -Loading...
- )} +Loading...
+ )} +
+
= (props) => {
{droppableProvided.placeholder}
{enableQuickIssueCreate && !disableIssueCreation && (
-
)}
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 7873ea691..a616e4470 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -1,6 +1,7 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
+import Link from "next/link";
// hooks
import {
useApplication,
@@ -41,14 +42,11 @@ const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
if (!cycle) return null;
return (
- router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
- >
-
);
};
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index e7d4c12d2..aa9a32bc9 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -12,7 +12,12 @@ import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plan
// icons
import { List, PlusIcon, Sheet } from "lucide-react";
// types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+import {
+ IIssueDisplayFilterOptions,
+ IIssueDisplayProperties,
+ IIssueFilterOptions,
+ TStaticViewTypes,
+} from "@plane/types";
// constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EUserWorkspaceRoles } from "constants/workspace";
@@ -35,7 +40,7 @@ export const GlobalIssuesHeader: React.FC = observer((props) => {
const { workspaceSlug, globalViewId } = router.query;
// store hooks
const {
- issuesFilter: { issueFilters, updateFilters },
+ issuesFilter: { filters, updateFilters },
} = useIssues(EIssuesStoreType.GLOBAL);
const {
membership: { currentWorkspaceRole },
@@ -47,6 +52,8 @@ export const GlobalIssuesHeader: React.FC = observer((props) => {
workspace: { workspaceMemberIds },
} = useMember();
+ const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
+
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !globalViewId) return;
diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts
index 298658a2a..46ce8c066 100644
--- a/web/components/headers/index.ts
+++ b/web/components/headers/index.ts
@@ -20,3 +20,4 @@ export * from "./project-archived-issue-details";
export * from "./project-archived-issues";
export * from "./project-issue-details";
export * from "./user-profile";
+export * from "./workspace-active-cycle";
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 3a607a4df..9cfc9c1b3 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -1,6 +1,7 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
+import Link from "next/link";
// hooks
import {
useApplication,
@@ -41,14 +42,14 @@ const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
if (!moduleDetail) return null;
return (
- router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`)}
- >
-
);
};
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index d53880a53..48e38491b 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -2,6 +2,7 @@ import { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
+import Link from "next/link";
// hooks
import {
useApplication,
@@ -154,14 +155,14 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
if (!view) return;
return (
- router.push(`/${workspaceSlug}/projects/${projectId}/views/${viewId}`)}
- >
-
);
})}
diff --git a/web/components/headers/workspace-active-cycle.tsx b/web/components/headers/workspace-active-cycle.tsx
new file mode 100644
index 000000000..cf989b2d2
--- /dev/null
+++ b/web/components/headers/workspace-active-cycle.tsx
@@ -0,0 +1,46 @@
+import { observer } from "mobx-react-lite";
+import { Search, SendToBack } from "lucide-react";
+// hooks
+import { useWorkspace } from "hooks/store";
+// ui
+import { Breadcrumbs } from "@plane/ui";
+
+export const WorkspaceActiveCycleHeader = observer(() => {
+ // store hooks
+ const { workspaceActiveCyclesSearchQuery, setWorkspaceActiveCyclesSearchQuery } = useWorkspace();
+ return (
+ = ({
= ({
= ({
= ({
-
+
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 3d3efb7d1..6c212a021 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -37,7 +37,7 @@ export const WorkspaceDashboardHeader = () => {
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
>
+
+
+
+
+
+ Beta
+
+
+
+
+
+
+
+
+ {/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */}
+ {/*
setIsSubmitting(value)}
isSubmitting={isSubmitting}
@@ -239,26 +247,28 @@ export const InboxMainContent: React.FC = observer(() => {
handleFormSubmit={submitChanges}
isAllowed={isAllowed || currentUser?.id === issueDetails.created_by}
/>
-
+
*/}
- {workspaceSlug && projectId && (
+ {/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */}
+ {/* {workspaceSlug && projectId && (
-
Select issue
)}-
- {filteredIssues.map((issue) => (
-
- state?.id == issue?.state_id
- )?.color || "",
- }}
- />
-
- {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
-
- {issue.name}
-
-
+
+
+ {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+
+ {issue.name}
+
+ Attachments
-
- {!readonly && (
+ {/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */}
+ {/* {!readonly && (
= observer((props) => {
}
onSelect={handleReactionClick}
/>
- )}
+ )} */}
{Object.keys(groupedReactions || {}).map(
(reaction) =>
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 3f463496e..f020672d2 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -5,9 +5,10 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
import debounce from "lodash/debounce";
// components
import { TextArea } from "@plane/ui";
-import { RichTextEditor } from "@plane/rich-text-editor";
+import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
// types
import { TIssue } from "@plane/types";
+import { TIssueOperations } from "./issue-detail";
// services
import { FileService } from "services/file.service";
import { useMention } from "hooks/store";
@@ -18,15 +19,17 @@ export interface IssueDescriptionFormValues {
}
export interface IssueDetailsProps {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
issue: {
name: string;
description_html: string;
id: string;
project_id?: string;
};
- workspaceSlug: string;
- handleFormSubmit: (value: IssueDescriptionFormValues) => Promise;
- isAllowed: boolean;
+ issueOperations: TIssueOperations;
+ disabled: boolean;
isSubmitting: "submitting" | "submitted" | "saved";
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
}
@@ -34,7 +37,7 @@ export interface IssueDetailsProps {
const fileService = new FileService();
export const IssueDescriptionForm: FC = (props) => {
- const { issue, handleFormSubmit, workspaceSlug, isAllowed, isSubmitting, setIsSubmitting } = props;
+ const { workspaceSlug, projectId, issueId, issue, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
// states
const [characterLimit, setCharacterLimit] = useState(false);
@@ -75,12 +78,18 @@ export const IssueDescriptionForm: FC = (props) => {
async (formData: Partial) => {
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
- await handleFormSubmit({
- name: formData.name ?? "",
- description_html: formData.description_html ?? "",
- });
+ await issueOperations.update(
+ workspaceSlug,
+ projectId,
+ issueId,
+ {
+ name: formData.name ?? "",
+ description_html: formData.description_html ?? "",
+ },
+ false
+ );
},
- [handleFormSubmit]
+ [workspaceSlug, projectId, issueId, issueOperations]
);
useEffect(() => {
@@ -116,7 +125,7 @@ export const IssueDescriptionForm: FC = (props) => {
return (
= observer((props) => {
+ const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+ // hooks
+ const { getCycleById, currentProjectIncompleteCycleIds, fetchAllCycles } = useCycle();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // state
+ const [isUpdating, setIsUpdating] = useState(false);
+
+ useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_CYCLES` : null, async () => {
+ if (workspaceSlug && projectId) await fetchAllCycles(workspaceSlug, projectId);
+ });
+
+ const issue = getIssueById(issueId);
+ const projectCycleIds = currentProjectIncompleteCycleIds;
+ const issueCycle = (issue && issue.cycle_id && getCycleById(issue.cycle_id)) || undefined;
+ const disableSelect = disabled || isUpdating;
+
+ const handleIssueCycleChange = async (cycleId: string) => {
+ if (!cycleId) return;
+ setIsUpdating(true);
+ if (issue && issue.cycle_id === cycleId)
+ await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+ else await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
+ setIsUpdating(false);
+ };
+
+ type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
+ const options: TDropdownOptions | undefined = projectCycleIds
+ ? (projectCycleIds
+ .map((cycleId) => {
+ const cycle = getCycleById(cycleId) || undefined;
+ if (!cycle) return undefined;
+ return {
+ value: cycle.id,
+ query: cycle.name,
+ content: (
+ = {
+ name: "",
+ color: "#ff0000",
+};
+
+export const LabelCreate: FC = (props) => {
+ const { workspaceSlug, projectId, issueId, labelOperations, disabled = false } = props;
+ // hooks
+ const { setToastAlert } = useToast();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // state
+ const [isCreateToggle, setIsCreateToggle] = useState(false);
+ const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle);
+ // react hook form
+ const {
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ reset,
+ control,
+ setFocus,
+ } = useForm>({
+ defaultValues,
+ });
+
+ useEffect(() => {
+ if (!isCreateToggle) return;
+
+ setFocus("name");
+ reset();
+ }, [isCreateToggle, reset, setFocus]);
+
+ const handleLabel = async (formData: Partial) => {
+ if (!workspaceSlug || !projectId || isSubmitting) return;
+
+ try {
+ const issue = getIssueById(issueId);
+ const labelResponse = await labelOperations.createLabel(workspaceSlug, projectId, formData);
+ const currentLabels = [...(issue?.label_ids || []), labelResponse.id];
+ await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
+ reset(defaultValues);
+ } catch (error) {
+ setToastAlert({
+ title: "Label creation failed",
+ type: "error",
+ message: "Label creation failed. Please try again sometime later.",
+ });
+ }
+ };
+
+ return (
+ <>
+ = (props) => {
+ const { workspaceSlug, projectId, issueId, labelId, labelOperations, disabled } = props;
+ // hooks
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const { getLabelById } = useLabel();
+
+ const issue = getIssueById(issueId);
+ const label = getLabelById(labelId);
+
+ const handleLabel = async () => {
+ if (issue && !disabled) {
+ const currentLabels = issue.label_ids.filter((_labelId) => _labelId !== labelId);
+ await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
+ }
+ };
+
+ if (!label) return <>;
+ return (
+ = (props) => {
+ const { workspaceSlug, projectId, issueId, labelOperations, disabled } = props;
+ // hooks
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+
+ const issue = getIssueById(issueId);
+ const issueLabels = issue?.label_ids || undefined;
+
+ if (!issue || !issueLabels) return <>;
+ return (
+ <>
+ {issueLabels.map((labelId) => (
+ ) => Promise;
+ createLabel: (workspaceSlug: string, projectId: string, data: Partial) => Promise;
+};
+
+export const IssueLabel: FC = observer((props) => {
+ const { workspaceSlug, projectId, issueId, disabled = false } = props;
+ // hooks
+ const { updateIssue } = useIssueDetail();
+ const {
+ project: { createLabel },
+ } = useLabel();
+ const { setToastAlert } = useToast();
+
+ const labelOperations: TLabelOperations = useMemo(
+ () => ({
+ updateIssue: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial) => {
+ try {
+ await updateIssue(workspaceSlug, projectId, issueId, data);
+ setToastAlert({
+ title: "Issue updated successfully",
+ type: "success",
+ message: "Issue updated successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Issue update failed",
+ type: "error",
+ message: "Issue update failed",
+ });
+ }
+ },
+ createLabel: async (workspaceSlug: string, projectId: string, data: Partial) => {
+ try {
+ const labelResponse = await createLabel(workspaceSlug, projectId, data);
+ setToastAlert({
+ title: "Label created successfully",
+ type: "success",
+ message: "Label created successfully",
+ });
+ return labelResponse;
+ } catch (error) {
+ setToastAlert({
+ title: "Label creation failed",
+ type: "error",
+ message: "Label creation failed",
+ });
+ return error;
+ }
+ },
+ }),
+ [updateIssue, createLabel, setToastAlert]
+ );
+
+ return (
+ = observer((props) => {
+ const { workspaceSlug, projectId, issueId, onSelect } = props;
+ // store hooks
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ const {
+ project: { fetchProjectLabels, projectLabels },
+ } = useLabel();
+ // states
+ const [referenceElement, setReferenceElement] = useState(null);
+ const [popperElement, setPopperElement] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [query, setQuery] = useState("");
+
+ const issue = getIssueById(issueId);
+
+ const fetchLabels = () => {
+ setIsLoading(true);
+ if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+ };
+
+ const options = (projectLabels ?? []).map((label) => ({
+ value: label.id,
+ query: label.name,
+ content: (
+ onSelect(value)}
+ multiple
+ >
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/web/components/issues/issue-detail/label/select/root.tsx b/web/components/issues/issue-detail/label/select/root.tsx
new file mode 100644
index 000000000..c31e1bc61
--- /dev/null
+++ b/web/components/issues/issue-detail/label/select/root.tsx
@@ -0,0 +1,24 @@
+import { FC } from "react";
+// components
+import { IssueLabelSelect } from "./label-select";
+// types
+import { TLabelOperations } from "../root";
+
+type TIssueLabelSelectRoot = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ labelOperations: TLabelOperations;
+};
+
+export const IssueLabelSelectRoot: FC = (props) => {
+ const { workspaceSlug, projectId, issueId, labelOperations } = props;
+
+ const handleLabel = async (_labelIds: string[]) => {
+ await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: _labelIds });
+ };
+
+ return (
+ = (props)
const onClose = () => {
handleModal(false);
const timeout = setTimeout(() => {
- reset(defaultValues);
+ reset(preloadedData ? preloadedData : defaultValues);
clearTimeout(timeout);
}, 500);
};
diff --git a/web/components/issues/issue-detail/links/index.ts b/web/components/issues/issue-detail/links/index.ts
new file mode 100644
index 000000000..4a06c89af
--- /dev/null
+++ b/web/components/issues/issue-detail/links/index.ts
@@ -0,0 +1,4 @@
+export * from "./root";
+
+export * from "./links";
+export * from "./link-detail";
diff --git a/web/components/issues/issue-links/link-detail.tsx b/web/components/issues/issue-detail/links/link-detail.tsx
similarity index 81%
rename from web/components/issues/issue-links/link-detail.tsx
rename to web/components/issues/issue-detail/links/link-detail.tsx
index d00e43597..c92c13977 100644
--- a/web/components/issues/issue-links/link-detail.tsx
+++ b/web/components/issues/issue-detail/links/link-detail.tsx
@@ -1,5 +1,6 @@
import { FC, useState } from "react";
// hooks
+import useToast from "hooks/use-toast";
import { useIssueDetail } from "hooks/store";
// ui
import { ExternalLinkIcon, Tooltip } from "@plane/ui";
@@ -9,6 +10,7 @@ import { Pencil, Trash2, LinkIcon } from "lucide-react";
import { IssueLinkCreateUpdateModal, TLinkOperationsModal } from "./create-update-link-modal";
// helpers
import { calculateTimeAgo } from "helpers/date-time.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
export type TIssueLinkDetail = {
linkId: string;
@@ -21,11 +23,17 @@ export const IssueLinkDetail: FC = (props) => {
const { linkId, linkOperations, isNotAllowed } = props;
// hooks
const {
+ toggleIssueLinkModal: toggleIssueLinkModalStore,
link: { getLinkById },
} = useIssueDetail();
+ const { setToastAlert } = useToast();
+
// state
const [isIssueLinkModalOpen, setIsIssueLinkModalOpen] = useState(false);
- const toggleIssueLinkModal = (modalToggle: boolean) => setIsIssueLinkModalOpen(modalToggle);
+ const toggleIssueLinkModal = (modalToggle: boolean) => {
+ toggleIssueLinkModalStore(modalToggle);
+ setIsIssueLinkModalOpen(modalToggle);
+ };
const linkDetail = getLinkById(linkId);
if (!linkDetail) return <>;
@@ -40,18 +48,23 @@ export const IssueLinkDetail: FC = (props) => {
/>
= observer((props) => {
buttonVariant="border-with-text"
placeholder="Due date"
minDate={minDate ?? undefined}
+ tabIndex={11}
/>
)}
@@ -465,6 +504,7 @@ export const IssueFormRoot: FC = observer((props) => {
}}
value={value}
buttonVariant="border-with-text"
+ tabIndex={12}
/>
)}
@@ -484,6 +524,7 @@ export const IssueFormRoot: FC
- {isAllowed ? (
+ {!disabled ? (
= (props) => {
className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
hasError={Boolean(errors?.name)}
role="textbox"
- disabled={!isAllowed}
/>
)}
/>
) : (
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index b8af27d40..f1c6636cd 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -1,21 +1,22 @@
export * from "./attachment";
export * from "./comment";
export * from "./issue-modal";
-export * from "./sidebar-select";
export * from "./view-select";
export * from "./activity";
export * from "./delete-issue-modal";
export * from "./description-form";
export * from "./issue-layouts";
-export * from "./peek-overview";
-export * from "./main-content";
+
export * from "./parent-issues-list-modal";
-export * from "./sidebar";
export * from "./label";
-export * from "./issue-reaction";
export * from "./confirm-issue-discard";
export * from "./issue-update-status";
+// issue details
+export * from "./issue-detail";
+
+export * from "./peek-overview";
+
// draft issue
export * from "./draft-issue-form";
export * from "./draft-issue-modal";
@@ -23,6 +24,3 @@ export * from "./delete-draft-issue-modal";
// archived issue
export * from "./delete-archived-issue-modal";
-
-// issue links
-export * from "./issue-links";
diff --git a/web/components/issues/issue-detail/cycle-select.tsx b/web/components/issues/issue-detail/cycle-select.tsx
new file mode 100644
index 000000000..24ed1c963
--- /dev/null
+++ b/web/components/issues/issue-detail/cycle-select.tsx
@@ -0,0 +1,103 @@
+import React, { ReactNode, useState } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// hooks
+import { useCycle, useIssueDetail } from "hooks/store";
+// ui
+import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
+// types
+import type { TIssueOperations } from "./root";
+
+type TIssueCycleSelect = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ issueOperations: TIssueOperations;
+ disabled?: boolean;
+};
+
+export const IssueCycleSelect: React.FC{issue.name}
)} - {characterLimit && isAllowed && ( + {characterLimit && !disabled && (
255 ? "text-red-500" : ""}`}>
{watch("name").length}
@@ -159,29 +167,37 @@ export const IssueDescriptionForm: FC = (props) => {
(
- {
- setShowAlert(true);
- setIsSubmitting("submitting");
- onChange(description_html);
- debouncedFormSave();
- }}
- mentionSuggestions={mentionSuggestions}
- mentionHighlights={mentionHighlights}
- />
- )}
+ render={({ field: { onChange } }) =>
+ !disabled ? (
+ {
+ setShowAlert(true);
+ setIsSubmitting("submitting");
+ onChange(description_html);
+ debouncedFormSave();
+ }}
+ mentionSuggestions={mentionSuggestions}
+ mentionHighlights={mentionHighlights}
+ />
+ ) : (
+
+
+
+ ) as ReactNode,
+ };
+ })
+ .filter((cycle) => cycle !== undefined) as TDropdownOptions)
+ : undefined;
+
+ return (
+
+ handleIssueCycleChange(value)}
+ options={options}
+ customButton={
+
+ );
+});
diff --git a/web/components/issues/issue-detail/index.ts b/web/components/issues/issue-detail/index.ts
new file mode 100644
index 000000000..63ef560a1
--- /dev/null
+++ b/web/components/issues/issue-detail/index.ts
@@ -0,0 +1,14 @@
+export * from "./root";
+
+export * from "./main-content";
+export * from "./sidebar";
+
+// select
+export * from "./cycle-select";
+export * from "./module-select";
+export * from "./parent-select";
+export * from "./relation-select";
+export * from "./parent";
+export * from "./label";
+export * from "./subscription";
+export * from "./links";
diff --git a/web/components/issues/issue-detail/label/create-label.tsx b/web/components/issues/issue-detail/label/create-label.tsx
new file mode 100644
index 000000000..7babaee00
--- /dev/null
+++ b/web/components/issues/issue-detail/label/create-label.tsx
@@ -0,0 +1,159 @@
+import { FC, useState, Fragment, useEffect } from "react";
+import { Plus, X } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { TwitterPicker } from "react-color";
+import { Popover, Transition } from "@headlessui/react";
+// hooks
+import { useIssueDetail } from "hooks/store";
+import useToast from "hooks/use-toast";
+// ui
+import { Input } from "@plane/ui";
+// types
+import { TLabelOperations } from "./root";
+import { IIssueLabel } from "@plane/types";
+
+type ILabelCreate = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ labelOperations: TLabelOperations;
+ disabled?: boolean;
+};
+
+const defaultValues: Partial
+
+
+
+
+ }
+ width="max-w-[10rem]"
+ noChevron
+ disabled={disableSelect}
+ />
+ {isUpdating &&
+
+
+ {isCreateToggle && (
+
+ )}
+
+ );
+};
diff --git a/web/components/issues/issue-detail/label/index.ts b/web/components/issues/issue-detail/label/index.ts
new file mode 100644
index 000000000..83f1e73bc
--- /dev/null
+++ b/web/components/issues/issue-detail/label/index.ts
@@ -0,0 +1,7 @@
+export * from "./root";
+
+export * from "./label-list";
+export * from "./label-list-item";
+export * from "./create-label";
+export * from "./select/root";
+export * from "./select/label-select";
diff --git a/web/components/issues/issue-detail/label/label-list-item.tsx b/web/components/issues/issue-detail/label/label-list-item.tsx
new file mode 100644
index 000000000..3c3164c5a
--- /dev/null
+++ b/web/components/issues/issue-detail/label/label-list-item.tsx
@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { X } from "lucide-react";
+// types
+import { TLabelOperations } from "./root";
+import { useIssueDetail, useLabel } from "hooks/store";
+
+type TLabelListItem = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ labelId: string;
+ labelOperations: TLabelOperations;
+ disabled: boolean;
+};
+
+export const LabelListItem: FC
+ {isCreateToggle ?
+ {isCreateToggle ? "Cancel" : "New"}
+
+
+
+ );
+};
diff --git a/web/components/issues/issue-detail/label/label-list.tsx b/web/components/issues/issue-detail/label/label-list.tsx
new file mode 100644
index 000000000..fd714e002
--- /dev/null
+++ b/web/components/issues/issue-detail/label/label-list.tsx
@@ -0,0 +1,42 @@
+import { FC } from "react";
+// components
+import { LabelListItem } from "./label-list-item";
+// hooks
+import { useIssueDetail } from "hooks/store";
+// types
+import { TLabelOperations } from "./root";
+
+type TLabelList = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ labelOperations: TLabelOperations;
+ disabled: boolean;
+};
+
+export const LabelList: FC{label.name}
+ {!disabled && (
+
+
+ )}
+
+
+ );
+});
diff --git a/web/components/issues/issue-detail/label/select/label-select.tsx b/web/components/issues/issue-detail/label/select/label-select.tsx
new file mode 100644
index 000000000..c553ef333
--- /dev/null
+++ b/web/components/issues/issue-detail/label/select/label-select.tsx
@@ -0,0 +1,159 @@
+import { Fragment, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { usePopper } from "react-popper";
+import { Check, Search, Tag } from "lucide-react";
+// hooks
+import { useIssueDetail, useLabel } from "hooks/store";
+// components
+import { Combobox } from "@headlessui/react";
+
+export interface IIssueLabelSelect {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ onSelect: (_labelIds: string[]) => void;
+}
+
+export const IssueLabelSelect: React.FC
+
+
+ ),
+ }));
+
+ const filteredOptions =
+ query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement: "bottom-start",
+ modifiers: [
+ {
+ name: "preventOverflow",
+ options: {
+ padding: 12,
+ },
+ },
+ ],
+ });
+
+ const issueLabels = issue?.label_ids ?? [];
+
+ const label = (
+ {label.name}
+
+
+ );
+
+ if (!issue) return <>;
+
+ return (
+ <>
+
+
+ Select Label
+
+
+
+ setQuery(e.target.value)}
+ placeholder="Search"
+ displayValue={(assigned: any) => assigned?.name}
+ />
+
+
+ {isLoading ? (
+
+ `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+ selected ? "text-custom-text-100" : "text-custom-text-200"
+ }`
+ }
+ >
+ {({ selected }) => (
+ <>
+ {option.content}
+ {selected && (
+
+ ))
+ ) : (
+
+
+ Loading...
+ ) : filteredOptions.length > 0 ? ( + filteredOptions.map((option) => ( +
+
+ )}
+
+ )}
+ No matching results
+ + )} +
- {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setDeleteIssueModal(true);
}}
>
diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index 0b4e334c7..b87bec2d0 100644
--- a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
-import { useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
+import { useGlobalView, useIssues, useUser } from "hooks/store";
// components
import { GlobalViewsAppliedFiltersRoot } from "components/issues";
import { SpreadsheetView } from "components/issues/issue-layouts";
@@ -16,46 +16,43 @@ import { EIssueActions } from "../types";
import { EUserProjectRoles } from "constants/project";
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
-type Props = {
- type?: TStaticViewTypes | null;
-};
-export const AllIssueLayoutRoot: React.FC = observer((props) => {
- const { type = null } = props;
+
+export const AllIssueLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
- const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
+ const { workspaceSlug, globalViewId } = router.query;
// store
const {
- issuesFilter: { issueFilters, fetchFilters, updateFilters },
+ issuesFilter: { filters, fetchFilters, updateFilters },
issues: { loader, groupedIssueIds, fetchIssues, updateIssue, removeIssue },
- issueMap,
} = useIssues(EIssuesStoreType.GLOBAL);
+ const { dataViewId, issueIds } = groupedIssueIds;
const {
membership: { currentWorkspaceAllProjectsRole },
} = useUser();
const { fetchAllGlobalViews } = useGlobalView();
- const {
- workspace: { workspaceLabels },
- } = useLabel();
// derived values
- const currentIssueView = type ?? globalViewId;
useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
if (workspaceSlug) {
- await fetchAllGlobalViews(workspaceSlug);
+ await fetchAllGlobalViews(workspaceSlug.toString());
}
});
useSWR(
- workspaceSlug && currentIssueView ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${currentIssueView}` : null,
+ workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null,
async () => {
- if (workspaceSlug && currentIssueView) {
- await fetchAllGlobalViews(workspaceSlug);
- await fetchFilters(workspaceSlug, currentIssueView);
- await fetchIssues(workspaceSlug, currentIssueView, groupedIssueIds ? "mutation" : "init-loader");
+ if (workspaceSlug && globalViewId) {
+ await fetchAllGlobalViews(workspaceSlug.toString());
+ await fetchFilters(workspaceSlug.toString(), globalViewId.toString());
+ await fetchIssues(
+ workspaceSlug.toString(),
+ globalViewId.toString(),
+ groupedIssueIds ? "mutation" : "init-loader"
+ );
}
}
);
@@ -68,22 +65,21 @@ export const AllIssueLayoutRoot: React.FC = observer((props) => {
return !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
};
- const issueIds = (groupedIssueIds ?? []) as TUnGroupedIssues;
- const issuesArray = issueIds?.filter((id) => id && issueMap?.[id]).map((id) => issueMap?.[id]);
+ const issueFilters = globalViewId ? filters?.[globalViewId.toString()] : undefined;
const issueActions = useMemo(
() => ({
[EIssueActions.UPDATE]: async (issue: TIssue) => {
const projectId = issue.project_id;
- if (!workspaceSlug || !projectId) return;
+ if (!workspaceSlug || !projectId || !globalViewId) return;
- await updateIssue(workspaceSlug, projectId, issue.id, issue, currentIssueView);
+ await updateIssue(workspaceSlug.toString(), projectId, issue.id, issue, globalViewId.toString());
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
const projectId = issue.project_id;
- if (!workspaceSlug || !projectId) return;
+ if (!workspaceSlug || !projectId || !globalViewId) return;
- await removeIssue(workspaceSlug, projectId, issue.id, currentIssueView);
+ await removeIssue(workspaceSlug.toString(), projectId, issue.id, globalViewId.toString());
},
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -103,22 +99,22 @@ export const AllIssueLayoutRoot: React.FC = observer((props) => {
(updatedDisplayFilter: Partial) => {
if (!workspaceSlug) return;
- updateFilters(workspaceSlug, undefined, EIssueFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
+ updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, { ...updatedDisplayFilter });
},
[updateFilters, workspaceSlug]
);
return (
= observer((props) => {
buttonVariant="border-with-text"
placeholder="Start date"
maxDate={maxDate ?? undefined}
+ tabIndex={10}
/>
)}
@@ -447,6 +485,7 @@ export const IssueFormRoot: FC
+ {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setCreateUpdateIssueModal(true);
}}
>
@@ -109,9 +111,7 @@ export const ProjectIssueQuickActions: React.FC = (props) =>
{
+ copyTextToClipboard(linkDetail.url);
+ setToastAlert({
+ type: "success",
+ title: "Link copied!",
+ message: "Link copied to clipboard",
+ });
+ }}
+ >
-
- // copyToClipboard(linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url)
- // }
- >
+
{linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
@@ -65,7 +78,7 @@ export const IssueLinkDetail: FC = (props) => {
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
- setIsIssueLinkModalOpen(true);
+ toggleIssueLinkModal(true);
}}
>
;
export type TIssueLinkList = {
+ issueId: string;
linkOperations: TLinkOperationsModal;
};
export const IssueLinkList: FC = observer((props) => {
// props
- const { linkOperations } = props;
+ const { issueId, linkOperations } = props;
// hooks
const {
- link: { issueLinks },
+ link: { getLinksByIssueId },
} = useIssueDetail();
const {
membership: { currentProjectRole },
} = useUser();
+ const issueLinks = getLinksByIssueId(issueId);
+
+ if (!issueLinks) return <>;
+
return (
- await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as TIssue, EIssueActions.UPDATE)
- }
- />
- )}
);
});
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 6bc3052a9..5b4885bf3 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -97,7 +97,7 @@ export const CalendarDayTile: React.FC = observer((props) => {
formKey="target_date"
groupId={formattedDatePayload}
prePopulatedData={{
- target_date: renderFormattedPayloadDate(date.date),
+ target_date: renderFormattedPayloadDate(date.date) ?? undefined,
}}
quickAddCallback={quickAddCallback}
viewId={viewId}
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
index be30560fb..5711c89f6 100644
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -1,15 +1,15 @@
import { useState, useRef } from "react";
-import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Draggable } from "@hello-pangea/dnd";
import { MoreHorizontal } from "lucide-react";
// components
-import { Tooltip } from "@plane/ui";
+import { Tooltip, ControlLink } from "@plane/ui";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// ui
// types
import { TIssue, TIssueMap } from "@plane/types";
-import { useProject, useProjectState } from "hooks/store";
+import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
type Props = {
issues: TIssueMap | undefined;
@@ -20,24 +20,24 @@ type Props = {
export const CalendarIssueBlocks: React.FC = observer((props) => {
const { issues, issueIdList, quickActions, showAllIssues = false } = props;
- // router
- const router = useRouter();
// hooks
+ const {
+ router: { workspaceSlug, projectId },
+ } = useApplication();
const { getProjectById } = useProject();
const { getProjectStates } = useProjectState();
+ const { setPeekIssue } = useIssueDetail();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
const menuActionRef = useRef(null);
- const handleIssuePeekOverview = (issue: TIssue) => {
- const { query } = router;
-
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
- });
- };
+ const handleIssuePeekOverview = (issue: TIssue) =>
+ workspaceSlug &&
+ issue &&
+ issue.project_id &&
+ issue.id &&
+ setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@@ -59,6 +59,10 @@ export const CalendarIssueBlocks: React.FC = observer((props) => {
if (!issues?.[issueId]) return null;
const issue = issues?.[issueId];
+
+ const stateColor =
+ getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
+
return (
{(provided, snapshot) => (
@@ -67,45 +71,51 @@ export const CalendarIssueBlocks: React.FC = observer((props) => {
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
- onClick={() => handleIssuePeekOverview(issue)}
>
- {issue?.tempId !== undefined && (
-
- )}
-
-
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index 7a3c01417..0f81d79a6 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -110,11 +110,11 @@ export const CalendarQuickAddIssueForm: React.FC = observer((props) => {
}, [errors, setToastAlert]);
const onSubmitHandler = async (formData: TIssue) => {
- if (isSubmitting || !groupId || !workspaceDetail || !projectDetail || !workspaceSlug || !projectId) return;
+ if (isSubmitting || !workspaceSlug || !projectId) return;
reset({ ...defaultValues });
- const payload = createIssuePayload(workspaceDetail, projectDetail, {
+ const payload = createIssuePayload(projectId.toString(), {
...(prePopulatedData ?? {}),
...formData,
});
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
index 43e59dc76..573a9cf20 100644
--- a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -4,33 +4,28 @@ import { observer } from "mobx-react-lite";
import { useIssues } from "hooks/store";
// components
import { ProjectIssueQuickActions } from "components/issues";
+import { BaseCalendarRoot } from "../base-calendar-root";
// types
import { TIssue } from "@plane/types";
import { EIssueActions } from "../../types";
-import { BaseCalendarRoot } from "../base-calendar-root";
+// constants
import { EIssuesStoreType } from "constants/issue";
-import { useMemo } from "react";
-export const ProjectViewCalendarLayout: React.FC = observer(() => {
+export interface IViewCalendarLayout {
+ issueActions: {
+ [EIssueActions.DELETE]: (issue: TIssue) => Promise;
+ [EIssueActions.UPDATE]?: (issue: TIssue) => Promise;
+ [EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
+ };
+}
+
+export const ProjectViewCalendarLayout: React.FC = observer((props) => {
+ const { issueActions } = props;
+ // store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+ // router
const router = useRouter();
- const { workspaceSlug, projectId, viewId } = router.query;
-
- const issueActions = useMemo(
- () => ({
- [EIssueActions.UPDATE]: async (issue: TIssue) => {
- if (!workspaceSlug || !projectId) return;
-
- await issues.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
- },
- [EIssueActions.DELETE]: async (issue: TIssue) => {
- if (!workspaceSlug || !projectId) return;
-
- await issues.removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
- },
- }),
- [issues, workspaceSlug, projectId]
- );
+ const { viewId } = router.query;
return (
= observer((props) => {
icon: = observer((props) => {
- const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states } = props;
+ const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states, alwaysAllowEditing } = props;
// store hooks
const {
membership: { currentProjectRole },
@@ -41,7 +42,7 @@ export const AppliedFiltersList: React.FC = observer((props) => {
if (Object.keys(appliedFilters).length === 0) return null;
- const isEditingAllowed = currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+ const isEditingAllowed = alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER);
return (
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
@@ -98,9 +101,7 @@ export const ModuleIssueQuickActions: React.FC = (props) => {
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setCreateUpdateIssueModal(true);
}}
>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 083a22e35..044030184 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -14,9 +14,10 @@ import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
// constant
import { EUserProjectRoles } from "constants/project";
+import { EIssuesStoreType } from "constants/issue";
export const ProjectIssueQuickActions: React.FC = (props) => {
- const { issue, handleDelete, handleUpdate, customActionButton } = props;
+ const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@@ -67,12 +68,17 @@ export const ProjectIssueQuickActions: React.FC = (props) =>
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
+ storeType={EIssuesStoreType.PROJECT}
/>
-
+
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleCopyIssueLink();
}}
>
@@ -84,9 +90,7 @@ export const ProjectIssueQuickActions: React.FC = (props) =>
{isEditingAllowed && (
<>
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
@@ -97,9 +101,7 @@ export const ProjectIssueQuickActions: React.FC = (props) =>
{issueLinks &&
diff --git a/web/components/issues/issue-links/root.tsx b/web/components/issues/issue-detail/links/root.tsx
similarity index 76%
rename from web/components/issues/issue-links/root.tsx
rename to web/components/issues/issue-detail/links/root.tsx
index bd2db3d39..94124085a 100644
--- a/web/components/issues/issue-links/root.tsx
+++ b/web/components/issues/issue-detail/links/root.tsx
@@ -1,7 +1,7 @@
-import { FC, useMemo, useState } from "react";
+import { FC, useCallback, useMemo, useState } from "react";
import { Plus } from "lucide-react";
// hooks
-import { useApplication, useIssueDetail } from "hooks/store";
+import { useIssueDetail } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { IssueLinkCreateUpdateModal } from "./create-update-link-modal";
@@ -16,21 +16,26 @@ export type TLinkOperations = {
};
export type TIssueLinkRoot = {
- uneditable: boolean;
- isAllowed: boolean;
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ disabled?: boolean;
};
export const IssueLinkRoot: FC = (props) => {
// props
- const { uneditable, isAllowed } = props;
+ const { workspaceSlug, projectId, issueId, disabled = false } = props;
// hooks
- const {
- router: { workspaceSlug, projectId },
- } = useApplication();
- const { issueId, createLink, updateLink, removeLink } = useIssueDetail();
+ const { toggleIssueLinkModal: toggleIssueLinkModalStore, createLink, updateLink, removeLink } = useIssueDetail();
// state
- const [isIssueLinkModalOpen, setIsIssueLinkModalOpen] = useState(false);
- const toggleIssueLinkModal = (modalToggle: boolean) => setIsIssueLinkModalOpen(modalToggle);
+ const [isIssueLinkModal, setIsIssueLinkModal] = useState(false);
+ const toggleIssueLinkModal = useCallback(
+ (modalToggle: boolean) => {
+ toggleIssueLinkModalStore(modalToggle);
+ setIsIssueLinkModal(modalToggle);
+ },
+ [toggleIssueLinkModalStore]
+ );
const { setToastAlert } = useToast();
@@ -91,28 +96,28 @@ export const IssueLinkRoot: FC = (props) => {
}
},
}),
- [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, setToastAlert]
+ [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, setToastAlert, toggleIssueLinkModal]
);
return (
<>
;
+ update: (
+ workspaceSlug: string,
+ projectId: string,
+ issueId: string,
+ data: Partial,
+ showToast?: boolean
+ ) => Promise;
+ remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise;
+ addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise;
+ removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise;
+ addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise;
+ removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => Promise;
+};
+
+export type TIssueDetailRoot = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ is_archived?: boolean;
+};
+
+export const IssueDetailRoot: FC = (props) => {
+ const { workspaceSlug, projectId, issueId, is_archived = false } = props;
+ // router
+ const router = useRouter();
+ // hooks
+ const {
+ issue: { getIssueById },
+ fetchIssue,
+ updateIssue,
+ removeIssue,
+ addIssueToCycle,
+ removeIssueFromCycle,
+ addIssueToModule,
+ removeIssueFromModule,
+ } = useIssueDetail();
+ const {
+ issues: { removeIssue: removeArchivedIssue },
+ } = useIssues(EIssuesStoreType.ARCHIVED);
+ const { setToastAlert } = useToast();
+ const {
+ membership: { currentProjectRole },
+ } = useUser();
+
+ const issueOperations: TIssueOperations = useMemo(
+ () => ({
+ fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
+ try {
+ await fetchIssue(workspaceSlug, projectId, issueId);
+ } catch (error) {
+ console.error("Error fetching the parent issue");
+ }
+ },
+ update: async (
+ workspaceSlug: string,
+ projectId: string,
+ issueId: string,
+ data: Partial,
+ showToast: boolean = true
+ ) => {
+ try {
+ await updateIssue(workspaceSlug, projectId, issueId, data);
+ if (showToast) {
+ setToastAlert({
+ title: "Issue updated successfully",
+ type: "success",
+ message: "Issue updated successfully",
+ });
+ }
+ } catch (error) {
+ setToastAlert({
+ title: "Issue update failed",
+ type: "error",
+ message: "Issue update failed",
+ });
+ }
+ },
+ remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
+ try {
+ if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+ else await removeIssue(workspaceSlug, projectId, issueId);
+ setToastAlert({
+ title: "Issue deleted successfully",
+ type: "success",
+ message: "Issue deleted successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Issue delete failed",
+ type: "error",
+ message: "Issue delete failed",
+ });
+ }
+ },
+ addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+ try {
+ await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+ setToastAlert({
+ title: "Cycle added to issue successfully",
+ type: "success",
+ message: "Issue added to issue successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Cycle add to issue failed",
+ type: "error",
+ message: "Cycle add to issue failed",
+ });
+ }
+ },
+ removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+ try {
+ await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+ setToastAlert({
+ title: "Cycle removed from issue successfully",
+ type: "success",
+ message: "Cycle removed from issue successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Cycle remove from issue failed",
+ type: "error",
+ message: "Cycle remove from issue failed",
+ });
+ }
+ },
+ addIssueToModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => {
+ try {
+ await addIssueToModule(workspaceSlug, projectId, moduleId, issueIds);
+ setToastAlert({
+ title: "Module added to issue successfully",
+ type: "success",
+ message: "Module added to issue successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Module add to issue failed",
+ type: "error",
+ message: "Module add to issue failed",
+ });
+ }
+ },
+ removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
+ try {
+ await removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+ setToastAlert({
+ title: "Module removed from issue successfully",
+ type: "success",
+ message: "Module removed from issue successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Module remove from issue failed",
+ type: "error",
+ message: "Module remove from issue failed",
+ });
+ }
+ },
+ }),
+ [
+ is_archived,
+ fetchIssue,
+ updateIssue,
+ removeIssue,
+ removeArchivedIssue,
+ addIssueToCycle,
+ removeIssueFromCycle,
+ addIssueToModule,
+ removeIssueFromModule,
+ setToastAlert,
+ ]
+ );
+
+ // issue details
+ const issue = getIssueById(issueId);
+ // checking if issue is editable, based on user role
+ const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+ return (
+ <>
+ {!issue ? (
+ router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+ }}
+ />
+ ) : (
+ = observer((props) => {
+ const {
+ workspaceSlug,
+ projectId,
+ issueId,
+ issueOperations,
+ is_archived,
+ is_editable,
+ fieldsToShow = ["all"],
+ } = props;
+ // router
+ const router = useRouter();
+ const { inboxIssueId } = router.query;
+ // store hooks
+ const { getProjectById } = useProject();
+ const { currentUser } = useUser();
+ const { projectStates } = useProjectState();
+ const { areEstimatesEnabledForCurrentProject } = useEstimate();
+ const { setToastAlert } = useToast();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // states
+ const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+ const issue = getIssueById(issueId);
+ if (!issue) return <>;
+
+ const handleCopyText = () => {
+ const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+ copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
+ setToastAlert({
+ type: "success",
+ title: "Link Copied!",
+ message: "Issue link copied to clipboard.",
+ });
+ });
+ };
+
+ const projectDetails = issue ? getProjectById(issue.project_id) : null;
+
+ const showFirstSection =
+ fieldsToShow.includes("all") ||
+ fieldsToShow.includes("state") ||
+ fieldsToShow.includes("assignee") ||
+ fieldsToShow.includes("priority") ||
+ fieldsToShow.includes("estimate");
+
+ const showSecondSection =
+ fieldsToShow.includes("all") ||
+ fieldsToShow.includes("parent") ||
+ fieldsToShow.includes("blocker") ||
+ fieldsToShow.includes("blocked") ||
+ fieldsToShow.includes("dueDate");
+
+ const showThirdSection =
+ fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
+
+ const minDate = issue.start_date ? new Date(issue.start_date) : null;
+ minDate?.setDate(minDate.getDate());
+
+ const maxDate = issue.target_date ? new Date(issue.target_date) : null;
+ maxDate?.setDate(maxDate.getDate());
+
+ const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
+
+ return (
+ <>
+ {workspaceSlug && projectId && issue && (
+ setDeleteIssueModal(false)}
+ isOpen={deleteIssueModal}
+ data={issue}
+ onSubmit={async () => {
+ await issueOperations.remove(workspaceSlug, projectId, issueId);
+ router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+ }}
+ />
+ )}
+
+ = observer((props) => {
+ const { workspaceSlug, projectId, issueId, currentUserId } = props;
+ // hooks
+ const {
+ issue: { getIssueById },
+ subscription: { getSubscriptionByIssueId },
+ createSubscription,
+ removeSubscription,
+ } = useIssueDetail();
+ const { setToastAlert } = useToast();
+ // state
+ const [loading, setLoading] = useState(false);
+
+ const issue = getIssueById(issueId);
+ const subscription = getSubscriptionByIssueId(issueId);
+
+ const handleSubscription = async () => {
+ setLoading(true);
+ try {
+ if (subscription?.subscribed) await removeSubscription(workspaceSlug, projectId, issueId);
+ else await createSubscription(workspaceSlug, projectId, issueId);
+ setToastAlert({
+ type: "success",
+ title: `Issue ${subscription?.subscribed ? `unsubscribed` : `subscribed`} successfully.!`,
+ message: `Issue ${subscription?.subscribed ? `unsubscribed` : `subscribed`} successfully.!`,
+ });
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ setToastAlert({
+ type: "error",
+ title: "Error",
+ message: "Something went wrong. Please try again later.",
+ });
+ }
+ };
+
+ if (issue?.created_by === currentUserId || issue?.assignee_ids?.includes(currentUserId)) return <>;
+
+ return (
+
- {workspaceSlug && peekIssueId && peekProjectId && (
-
+
= (props) => {
diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx
new file mode 100644
index 000000000..fcbe54a1c
--- /dev/null
+++ b/web/components/issues/issue-detail/main-content.tsx
@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
+// components
+import { IssueDescriptionForm, IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
+import { IssueParentDetail } from "./parent";
+import { IssueReaction } from "./reactions";
+import { SubIssuesRoot } from "../sub-issues";
+// ui
+import { StateGroupIcon } from "@plane/ui";
+// types
+import { TIssueOperations } from "./root";
+
+type Props = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ issueOperations: TIssueOperations;
+ is_archived: boolean;
+ is_editable: boolean;
+};
+
+export const IssueMainContent: React.FC = observer((props) => {
+ const { workspaceSlug, projectId, issueId, issueOperations, is_archived, is_editable } = props;
+ // states
+ const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+ // hooks
+ const { currentUser } = useUser();
+ const { getProjectById } = useProject();
+ const { projectStates } = useProjectState();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+
+ const issue = getIssueById(issueId);
+ if (!issue) return <>;
+
+ const projectDetails = projectId ? getProjectById(projectId) : null;
+ const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
+
+ return (
+ <>
+ = observer((props) => {
+ const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+ // hooks
+ const { getModuleById, projectModuleIds, fetchModules } = useModule();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // state
+ const [isUpdating, setIsUpdating] = useState(false);
+
+ useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => {
+ if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId);
+ });
+
+ const issue = getIssueById(issueId);
+ const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined;
+ const disableSelect = disabled || isUpdating;
+
+ const handleIssueModuleChange = async (moduleId: string) => {
+ if (!moduleId) return;
+ setIsUpdating(true);
+ if (issue && issue.module_id === moduleId)
+ await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+ else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
+ setIsUpdating(false);
+ };
+
+ type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
+ const options: TDropdownOptions | undefined = projectModuleIds
+ ? (projectModuleIds
+ .map((moduleId) => {
+ const _module = getModuleById(moduleId);
+ if (!_module) return undefined;
+
+ return {
+ value: _module.id,
+ query: _module.name,
+ content: (
+ = observer(
+ ({ workspaceSlug, projectId, issueId, issueOperations, disabled = false }) => {
+ // hooks
+ const { getProjectById } = useProject();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
+ // state
+ const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
+ const [updating, setUpdating] = useState(false);
+
+ const issue = getIssueById(issueId);
+
+ const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+ const parentIssueProjectDetails =
+ parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
+
+ const handleParentIssue = async (_issueId: string | null = null) => {
+ setUpdating(true);
+ try {
+ await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
+ await issueOperations.fetch(workspaceSlug, projectId, issueId);
+ toggleParentIssueModal(false);
+ setUpdating(false);
+ } catch (error) {
+ console.error("something went wrong while fetching the issue");
+ }
+ };
+
+ if (!issue) return <>;
+
+ return (
+ = (props) => {
+ const { workspaceSlug, projectId, issueId, issue, issueOperations } = props;
+ // hooks
+ const { issueMap } = useIssues();
+ const { peekIssue } = useIssueDetail();
+ const { getProjectById } = useProject();
+ const { getProjectStates } = useProjectState();
+
+ const parentIssue = issueMap?.[issue.parent_id || ""] || undefined;
+
+ const issueParentState = getProjectStates(parentIssue?.project_id)?.find(
+ (state) => state?.id === parentIssue?.state_id
+ );
+ const stateColor = issueParentState?.color || undefined;
+
+ if (!parentIssue) return <>;
+
+ return (
+ <>
+ = (props) => {
+ const { issueId } = props;
+ // hooks
+ const { getProjectById } = useProject();
+ const {
+ peekIssue,
+ issue: { getIssueById },
+ } = useIssueDetail();
+
+ const issueDetail = (issueId && getIssueById(issueId)) || undefined;
+ if (!issueDetail) return <>;
+
+ const projectDetails = (issueDetail.project_id && getProjectById(issueDetail.project_id)) || undefined;
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/web/components/issues/issue-detail/parent/siblings.tsx b/web/components/issues/issue-detail/parent/siblings.tsx
new file mode 100644
index 000000000..bc93ff138
--- /dev/null
+++ b/web/components/issues/issue-detail/parent/siblings.tsx
@@ -0,0 +1,51 @@
+import { FC } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// components
+import { IssueParentSiblingItem } from "./sibling-item";
+// hooks
+import { useIssueDetail } from "hooks/store";
+// types
+import { TIssue } from "@plane/types";
+
+export type TIssueParentSiblings = {
+ currentIssue: TIssue;
+ parentIssue: TIssue;
+};
+
+export const IssueParentSiblings: FC = (props) => {
+ const { currentIssue, parentIssue } = props;
+ // hooks
+ const {
+ peekIssue,
+ fetchSubIssues,
+ subIssues: { subIssuesByIssueId },
+ } = useIssueDetail();
+
+ const { isLoading } = useSWR(
+ peekIssue && parentIssue && parentIssue.project_id
+ ? `ISSUE_PARENT_CHILD_ISSUES_${peekIssue?.workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
+ : null,
+ peekIssue && parentIssue && parentIssue.project_id
+ ? () => fetchSubIssues(peekIssue?.workspaceSlug, parentIssue.project_id, parentIssue.id)
+ : null
+ );
+
+ const subIssueIds = (parentIssue && subIssuesByIssueId(parentIssue.id)) || undefined;
+
+ return (
+ = observer((props) => {
+ const { workspaceSlug, projectId, issueId, currentUser } = props;
+ // hooks
+ const {
+ reaction: { getReactionsByIssueId, reactionsByUser },
+ createReaction,
+ removeReaction,
+ } = useIssueDetail();
+ const { setToastAlert } = useToast();
+
+ const reactionIds = getReactionsByIssueId(issueId);
+ const userReactions = reactionsByUser(issueId, currentUser.id).map((r) => r.reaction);
+
+ const issueReactionOperations = useMemo(
+ () => ({
+ create: async (reaction: string) => {
+ try {
+ if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+ await createReaction(workspaceSlug, projectId, issueId, reaction);
+ setToastAlert({
+ title: "Reaction created successfully",
+ type: "success",
+ message: "Reaction created successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Reaction creation failed",
+ type: "error",
+ message: "Reaction creation failed",
+ });
+ }
+ },
+ remove: async (reaction: string) => {
+ try {
+ if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+ await removeReaction(workspaceSlug, projectId, issueId, reaction, currentUser.id);
+ setToastAlert({
+ title: "Reaction removed successfully",
+ type: "success",
+ message: "Reaction removed successfully",
+ });
+ } catch (error) {
+ setToastAlert({
+ title: "Reaction remove failed",
+ type: "error",
+ message: "Reaction remove failed",
+ });
+ }
+ },
+ react: async (reaction: string) => {
+ if (userReactions.includes(reaction)) await issueReactionOperations.remove(reaction);
+ else await issueReactionOperations.create(reaction);
+ },
+ }),
+ [workspaceSlug, projectId, issueId, currentUser, createReaction, removeReaction, setToastAlert, userReactions]
+ );
+
+ return (
+ = {
},
};
-type Props = {
+type TIssueRelationSelect = {
+ workspaceSlug: string;
+ projectId: string;
issueId: string;
relationKey: TIssueRelationTypes;
disabled?: boolean;
};
-export const SidebarIssueRelationSelect: React.FC = observer((props) => {
- const { issueId, relationKey, disabled = false } = props;
- // router
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
+export const IssueRelationSelect: React.FC = observer((props) => {
+ const { workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
// hooks
const { currentUser } = useUser();
const { getProjectById } = useProject();
@@ -128,22 +126,24 @@ export const SidebarIssueRelationSelect: React.FC = observer((props) => {
{issueRelationObject[relationKey].icon(10)}
{`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
-
+ {!disabled && (
+
+ )}
);
})
diff --git a/web/components/issues/issue-detail/root.tsx b/web/components/issues/issue-detail/root.tsx
new file mode 100644
index 000000000..4243ba03e
--- /dev/null
+++ b/web/components/issues/issue-detail/root.tsx
@@ -0,0 +1,241 @@
+import { FC, useMemo } from "react";
+import { useRouter } from "next/router";
+// components
+import { IssuePeekOverview } from "components/issues";
+import { IssueMainContent } from "./main-content";
+import { IssueDetailsSidebar } from "./sidebar";
+// ui
+import { EmptyState } from "components/common";
+// images
+import emptyIssue from "public/empty-state/issue.svg";
+// hooks
+import { useIssueDetail, useIssues, useUser } from "hooks/store";
+import useToast from "hooks/use-toast";
+// types
+import { TIssue } from "@plane/types";
+// constants
+import { EUserProjectRoles } from "constants/project";
+import { EIssuesStoreType } from "constants/issue";
+
+export type TIssueOperations = {
+ fetch: (workspaceSlug: string, projectId: string, issueId: string) => PromiseLinks
- {isAllowed && ( + {!disabled && ( @@ -120,7 +125,7 @@ export const IssueLinkRoot: FC
-
+ {issue.parent_id && (
+ setIsSubmitting(value)}
+ isSubmitting={isSubmitting}
+ issue={issue}
+ issueOperations={issueOperations}
+ disabled={!is_editable}
+ />
+
+ {currentUser && (
+
+
+ {/* issue attachments */}
+
+ {currentIssueState && (
+
+
+
+
*/}
+
+ );
+});
diff --git a/web/components/issues/issue-detail/module-select.tsx b/web/components/issues/issue-detail/module-select.tsx
new file mode 100644
index 000000000..4ac5f1fa5
--- /dev/null
+++ b/web/components/issues/issue-detail/module-select.tsx
@@ -0,0 +1,103 @@
+import React, { ReactNode, useState } from "react";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+// hooks
+import { useModule, useIssueDetail } from "hooks/store";
+// ui
+import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
+// types
+import type { TIssueOperations } from "./root";
+
+type TIssueModuleSelect = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ issueOperations: TIssueOperations;
+ disabled?: boolean;
+};
+
+export const IssueModuleSelect: React.FCComments/Activity
+
+
+
+ ) as ReactNode,
+ };
+ })
+ .filter((_module) => _module !== undefined) as TDropdownOptions)
+ : undefined;
+
+ return (
+
+ handleIssueModuleChange(value)}
+ options={options}
+ customButton={
+
+ );
+});
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
new file mode 100644
index 000000000..2a7fb3d83
--- /dev/null
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { X } from "lucide-react";
+// hooks
+import { useIssueDetail, useProject } from "hooks/store";
+import { Spinner } from "@plane/ui";
+// components
+import { ParentIssuesListModal } from "components/issues";
+import { TIssueOperations } from "./root";
+
+type TIssueParentSelect = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ issueOperations: TIssueOperations;
+
+ disabled?: boolean;
+};
+
+export const IssueParentSelect: React.FC
+
+
+
+
+ }
+ width="max-w-[10rem]"
+ noChevron
+ disabled={disableSelect}
+ />
+ {isUpdating &&
+ toggleParentIssueModal(false)}
+ onChange={(issue: any) => handleParentIssue(issue?.id)}
+ />
+
+
+
+ {updating &&
+ );
+ }
+);
diff --git a/web/components/issues/issue-detail/parent/index.ts b/web/components/issues/issue-detail/parent/index.ts
new file mode 100644
index 000000000..1b5a96749
--- /dev/null
+++ b/web/components/issues/issue-detail/parent/index.ts
@@ -0,0 +1,4 @@
+export * from "./root";
+
+export * from "./siblings";
+export * from "./sibling-item";
diff --git a/web/components/issues/issue-detail/parent/root.tsx b/web/components/issues/issue-detail/parent/root.tsx
new file mode 100644
index 000000000..2176ccecc
--- /dev/null
+++ b/web/components/issues/issue-detail/parent/root.tsx
@@ -0,0 +1,72 @@
+import { FC } from "react";
+import Link from "next/link";
+import { MinusCircle } from "lucide-react";
+// component
+import { IssueParentSiblings } from "./siblings";
+// ui
+import { CustomMenu } from "@plane/ui";
+// hooks
+import { useIssueDetail, useIssues, useProject, useProjectState } from "hooks/store";
+// types
+import { TIssueOperations } from "../root";
+import { TIssue } from "@plane/types";
+
+export type TIssueParentDetail = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ issue: TIssue;
+ issueOperations: TIssueOperations;
+};
+
+export const IssueParentDetail: FC
+
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
+ className="flex items-center gap-2 py-2 text-red-500"
+ >
+
+
+
+
+ );
+};
diff --git a/web/components/issues/issue-detail/parent/sibling-item.tsx b/web/components/issues/issue-detail/parent/sibling-item.tsx
new file mode 100644
index 000000000..cbcf4741b
--- /dev/null
+++ b/web/components/issues/issue-detail/parent/sibling-item.tsx
@@ -0,0 +1,39 @@
+import { FC } from "react";
+import Link from "next/link";
+// ui
+import { CustomMenu, LayersIcon } from "@plane/ui";
+// hooks
+import { useIssueDetail, useProject } from "hooks/store";
+
+type TIssueParentSiblingItem = {
+ issueId: string;
+};
+
+export const IssueParentSiblingItem: FC
+
+
+
+
+
+
+ {getProjectById(parentIssue.project_id)?.identifier}-{parentIssue?.sequence_id}
+
+
+ {(parentIssue?.name ?? "").substring(0, 50)}
+
+ Sibling issues
+
+
+
+ {isLoading ? (
+
+ );
+};
diff --git a/web/components/issues/issue-detail/reactions/index.ts b/web/components/issues/issue-detail/reactions/index.ts
new file mode 100644
index 000000000..8dc6f05bd
--- /dev/null
+++ b/web/components/issues/issue-detail/reactions/index.ts
@@ -0,0 +1,4 @@
+export * from "./reaction-selector";
+
+export * from "./issue";
+// export * from "./issue-comment";
diff --git a/web/components/issues/issue-detail/reactions/issue.tsx b/web/components/issues/issue-detail/reactions/issue.tsx
new file mode 100644
index 000000000..1627a6730
--- /dev/null
+++ b/web/components/issues/issue-detail/reactions/issue.tsx
@@ -0,0 +1,103 @@
+import { FC, useMemo } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { ReactionSelector } from "./reaction-selector";
+// hooks
+import { useIssueDetail } from "hooks/store";
+import useToast from "hooks/use-toast";
+// types
+import { IUser } from "@plane/types";
+import { renderEmoji } from "helpers/emoji.helper";
+
+export type TIssueReaction = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ currentUser: IUser;
+};
+
+export const IssueReaction: FC
+ Loading
+
+ ) : subIssueIds && subIssueIds.length > 0 ? (
+ subIssueIds.map((issueId) => currentIssue.id != issueId &&
+ No sibling issues
+
+ )}
+
+
+ );
+});
diff --git a/web/components/core/reaction-selector.tsx b/web/components/issues/issue-detail/reactions/reaction-selector.tsx
similarity index 100%
rename from web/components/core/reaction-selector.tsx
rename to web/components/issues/issue-detail/reactions/reaction-selector.tsx
diff --git a/web/components/issues/sidebar-select/relation.tsx b/web/components/issues/issue-detail/relation-select.tsx
similarity index 82%
rename from web/components/issues/sidebar-select/relation.tsx
rename to web/components/issues/issue-detail/relation-select.tsx
index 58e0d720b..30a81f2dd 100644
--- a/web/components/issues/sidebar-select/relation.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -1,5 +1,4 @@
import React, { useState } from "react";
-import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { X, CopyPlus } from "lucide-react";
// hooks
@@ -37,17 +36,16 @@ const issueRelationObject: Record
+
+ )}
+
+ {/* peek overview */}
+
+
+
+
+
+
+
+ );
+});
diff --git a/web/components/issues/issue-detail/subscription.tsx b/web/components/issues/issue-detail/subscription.tsx
new file mode 100644
index 000000000..d20bc53cf
--- /dev/null
+++ b/web/components/issues/issue-detail/subscription.tsx
@@ -0,0 +1,69 @@
+import { FC, useState } from "react";
+import { Bell } from "lucide-react";
+import { observer } from "mobx-react-lite";
+// UI
+import { Button } from "@plane/ui";
+// hooks
+import { useIssueDetail } from "hooks/store";
+import useToast from "hooks/use-toast";
+
+export type TIssueSubscription = {
+ workspaceSlug: string;
+ projectId: string;
+ issueId: string;
+ currentUserId: string;
+};
+
+export const IssueSubscription: FC
+
+
+
+ {currentIssueState ? (
+
+
+ + {projectDetails?.identifier}-{issue?.sequence_id} +
+
+ {currentUser && !is_archived && (fieldsToShow.includes("all") || fieldsToShow.includes("subscribe")) && (
+
+
+
+
+ {showFirstSection && (
+
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
+
+ )}
+
+ {showSecondSection && (
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
+
+
+
+ State
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+ projectId={projectId?.toString() ?? ""}
+ disabled={!is_editable}
+ buttonVariant="background-with-text"
+ />
+
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
+
+
+
+ Assignees
+
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })
+ }
+ disabled={!is_editable}
+ projectId={projectId?.toString() ?? ""}
+ placeholder="Assignees"
+ multiple
+ buttonVariant={
+ issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"
+ }
+ buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
+ />
+
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
+ areEstimatesEnabledForCurrentProject && (
+
+
+
+ Priority
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+ disabled={!is_editable}
+ buttonVariant="background-with-text"
+ />
+
+
+
+ )}
+
+
+
+ Estimate
+
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
+ }
+ projectId={projectId}
+ disabled={!is_editable}
+ buttonVariant="background-with-text"
+ />
+
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
+
+ )}
+
+ {showThirdSection && (
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
+
+
+ Parent
+
+
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
+
+
+ Start date
+
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })
+ }
+ className="border-none bg-custom-background-80"
+ maxDate={maxDate ?? undefined}
+ disabled={!is_editable}
+ />
+
+
+
+ )}
+
+
+ Due date
+
+
+ issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })
+ }
+ className="border-none bg-custom-background-80"
+ minDate={minDate ?? undefined}
+ disabled={!is_editable}
+ />
+
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
+
+ )}
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
+
+
+ Cycle
+
+
+
+
+ )}
+
+
+ Module
+
+
+
+
+ )}
+
+ {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
+
+
+ Label
+
+
+
+ }
+ variant="outline-primary"
+ className="hover:!bg-custom-primary-100/20"
+ onClick={handleSubscription}
+ >
+ {loading ? "Loading..." : subscription?.subscribed ? "Unsubscribe" : "Subscribe"}
+
+
+ );
+});
diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 2d7f5005a..3b3ef887e 100644
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { DragDropContext, DropResult } from "@hello-pangea/dnd";
// components
-import { CalendarChart, IssuePeekOverview } from "components/issues";
+import { CalendarChart } from "components/issues";
// hooks
import useToast from "hooks/use-toast";
// types
@@ -34,7 +34,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
// router
const router = useRouter();
- const { workspaceSlug, projectId, peekIssueId, peekProjectId } = router.query;
+ const { workspaceSlug, projectId } = router.query;
// hooks
const { setToastAlert } = useToast();
@@ -113,16 +113,6 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
/>
handleIssuePeekOverview(issue)}
+ className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
>
-
)}
- state?.id == issue?.state_id
- )?.color,
- }}
- />
-
+
+
- {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+ <>
+ {issue?.tempId !== undefined && (
+
+ )}
+
+
-
-
-
+
-
+
+
+
+
+
+ {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+
+ {issue.name}
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+ {quickActions(issue, customActionButton)}
+
{issue.name}
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- {quickActions(issue, customActionButton)}
-
-
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
index 94ea9221e..ff5034c97 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -15,13 +15,13 @@ export const AppliedMembersFilters: React.FC = observer((props) => {
const { handleRemove, values, editable } = props;
const {
- project: { getProjectMemberDetails },
+ workspace: { getWorkspaceMemberDetails },
} = useMember();
return (
<>
{values.map((memberId) => {
- const memberDetails = getProjectMemberDetails(memberId)?.member;
+ const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
if (!memberDetails) return null;
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index 87bb719c4..4d8ad5196 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -1,32 +1,48 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
+import isEqual from "lodash/isEqual";
// hooks
-import { useIssues, useLabel } from "hooks/store";
+import { useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
+//ui
+import { Button } from "@plane/ui";
// components
import { AppliedFiltersList } from "components/issues";
// types
-import { IIssueFilterOptions } from "@plane/types";
+import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
-export const GlobalViewsAppliedFiltersRoot = observer(() => {
+type Props = {
+ globalViewId: string;
+};
+
+export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
+ const { globalViewId } = props;
// router
const router = useRouter();
- const { workspaceSlug, globalViewId } = router.query;
+ const { workspaceSlug } = router.query;
// store hooks
const {
- issuesFilter: { issueFilters, updateFilters },
+ issuesFilter: { filters, updateFilters },
} = useIssues(EIssuesStoreType.GLOBAL);
const {
workspace: { workspaceLabels },
} = useLabel();
+ const { globalViewMap, updateGlobalView } = useGlobalView();
+ const {
+ membership: { currentWorkspaceRole },
+ } = useUser();
+
// derived values
- const userFilters = issueFilters?.filters;
+ const userFilters = filters?.[globalViewId]?.filters;
+ const viewDetails = globalViewMap[globalViewId];
// filters whose value not null or empty array
- const appliedFilters: IIssueFilterOptions = {};
+ let appliedFilters: IIssueFilterOptions | undefined = undefined;
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
+ if (!appliedFilters) appliedFilters = {};
appliedFilters[key as keyof IIssueFilterOptions] = value;
});
@@ -70,29 +86,24 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
);
};
- // const handleUpdateView = () => {
- // if (!workspaceSlug || !globalViewId || !viewDetails) return;
+ const handleUpdateView = () => {
+ if (!workspaceSlug || !globalViewId) return;
- // globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
- // query_data: {
- // ...viewDetails.query_data,
- // filters: {
- // ...(storedFilters ?? {}),
- // },
- // },
- // });
- // };
+ updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
+ filters: {
+ ...(appliedFilters ?? {}),
+ },
+ });
+ };
- // update stored filters when view details are fetched
- // useEffect(() => {
- // if (!globalViewId || !viewDetails) return;
+ const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters);
- // if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
- // globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
- // }, [globalViewId, globalViewFiltersStore, viewDetails]);
+ const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
+
+ const isDefaultView = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => view.key).includes(globalViewId as TStaticViewTypes);
// return if no filters are applied
- if (Object.keys(appliedFilters).length === 0) return null;
+ if (!appliedFilters && areFiltersEqual) return null;
return (
= observer((props) => {
const appliedFiltersCount = appliedFilters?.length ?? 0;
- const filteredOptions = ISSUE_STATE_GROUPS.filter((s) => s.key.includes(searchQuery.toLowerCase()));
+ const filteredOptions = Object.values(STATE_GROUPS).filter((s) => s.key.includes(searchQuery.toLowerCase()));
const handleViewToggle = () => {
if (!filteredOptions) return;
@@ -48,7 +48,7 @@ export const FilterStateGroup: React.FC = observer((props) => {
isChecked={appliedFilters?.includes(stateGroup.key) ? true : false}
onClick={() => handleUpdate(stateGroup.key)}
icon={ = (props) => {
- const { children, title = "Dropdown", placement, disabled = false } = props;
+ const { children, title = "Dropdown", placement, disabled = false, tabIndex } = props;
const [referenceElement, setReferenceElement] = useState(null);
const [popperElement, setPopperElement] = useState(null);
@@ -40,6 +41,7 @@ export const FiltersDropdown: React.FC = (props) => {
appendIcon={
{
- await handleIssues(issueToUpdate as TIssue, action);
- }}
- />
- )}
);
});
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index fd79cdde1..fefee880d 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,31 +1,34 @@
import { useRouter } from "next/router";
// ui
-import { Tooltip, StateGroupIcon } from "@plane/ui";
+import { Tooltip, StateGroupIcon, ControlLink } from "@plane/ui";
// helpers
import { renderFormattedDate } from "helpers/date-time.helper";
// types
import { TIssue } from "@plane/types";
-import { useProject, useProjectState } from "hooks/store";
+import { useApplication, useIssueDetail, useProject, useProjectState } from "hooks/store";
export const IssueGanttBlock = ({ data }: { data: TIssue }) => {
- const router = useRouter();
// hooks
+ const {
+ router: { workspaceSlug },
+ } = useApplication();
const { getProjectStates } = useProjectState();
+ const { setPeekIssue } = useIssueDetail();
- const handleIssuePeekOverview = () => {
- const { query } = router;
+ const handleIssuePeekOverview = () =>
+ workspaceSlug &&
+ data &&
+ data.project_id &&
+ data.id &&
+ setPeekIssue({ workspaceSlug, projectId: data.project_id, issueId: data.id });
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project_id },
- });
- };
+ const stateColor = getProjectStates(data?.project_id)?.find((state) => state?.id == data?.state_id)?.color || "";
return (
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
setCreateUpdateIssueModal(true);
}}
@@ -86,9 +91,7 @@ export const ModuleIssueQuickActions: React.FC = (props) => {
@@ -101,13 +112,17 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
appliedFilters={appliedFilters ?? {}}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
+ alwaysAllowEditing
/>
- {/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
-
- )} */}
+ {!isDefaultView && !areFiltersEqual && isAuthorizedUser && (
+ <>
+
+
+
+ )}
);
});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
index ffbae9ac8..c10de461a 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -1,13 +1,12 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
+import isEqual from "lodash/isEqual";
// hooks
import { useIssues, useLabel, useProjectState, useProjectView } from "hooks/store";
// components
import { AppliedFiltersList } from "components/issues";
// ui
import { Button } from "@plane/ui";
-// helpers
-import { areFiltersDifferent } from "helpers/filter.helper";
// types
import { IIssueFilterOptions } from "@plane/types";
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
@@ -28,33 +27,46 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
project: { projectLabels },
} = useLabel();
const { projectStates } = useProjectState();
- const { getViewById, updateView } = useProjectView();
+ const { viewMap, updateView } = useProjectView();
// derived values
- const viewDetails = viewId ? getViewById(viewId.toString()) : null;
+ const viewDetails = viewId ? viewMap[viewId.toString()] : null;
const userFilters = issueFilters?.filters;
// filters whose value not null or empty array
- const appliedFilters: IIssueFilterOptions = {};
+ let appliedFilters: IIssueFilterOptions | undefined = undefined;
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
+ if (!appliedFilters) appliedFilters = {};
appliedFilters[key as keyof IIssueFilterOptions] = value;
});
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!workspaceSlug || !projectId) return;
if (!value) {
- updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
- [key]: null,
- });
+ updateFilters(
+ workspaceSlug,
+ projectId,
+ EIssueFilterType.FILTERS,
+ {
+ [key]: null,
+ },
+ viewId
+ );
return;
}
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
- updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, {
- [key]: newValues,
- });
+ updateFilters(
+ workspaceSlug,
+ projectId,
+ EIssueFilterType.FILTERS,
+ {
+ [key]: newValues,
+ },
+ viewId
+ );
};
const handleClearAllFilters = () => {
@@ -66,15 +78,15 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { ...newFilters }, viewId);
};
+ const areFiltersEqual = isEqual(appliedFilters, viewDetails?.filters);
// return if no filters are applied
- if (Object.keys(appliedFilters).length === 0) return null;
+ if (!appliedFilters && areFiltersEqual) return null;
const handleUpdateView = () => {
if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), {
- query_data: {
- ...viewDetails.query_data,
+ filters: {
...(appliedFilters ?? {}),
},
});
@@ -83,22 +95,24 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
return (
{title}
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 13b324282..73802886e 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -1,10 +1,10 @@
-import React, { useCallback } from "react";
+import React from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useIssues, useUser } from "hooks/store";
// components
-import { IssueGanttBlock, IssuePeekOverview } from "components/issues";
+import { IssueGanttBlock } from "components/issues";
import {
GanttChartRoot,
IBlockUpdateData,
@@ -32,10 +32,10 @@ interface IBaseGanttRoot {
}
export const BaseGanttRoot: React.FC = observer((props: IBaseGanttRoot) => {
- const { issueFiltersStore, issueStore, viewId, issueActions } = props;
+ const { issueFiltersStore, issueStore, viewId } = props;
// router
const router = useRouter();
- const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
+ const { workspaceSlug } = router.query;
// store hooks
const {
membership: { currentProjectRole },
@@ -57,14 +57,6 @@ export const BaseGanttRoot: React.FC = observer((props: IBaseGan
await issueStore.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, payload, viewId);
};
- const handleIssues = useCallback(
- async (issue: TIssue, action: EIssueActions) => {
- if (issueActions[action]) {
- await issueActions[action]!(issue);
- }
- },
- [issueActions]
- );
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
return (
@@ -92,16 +84,6 @@ export const BaseGanttRoot: React.FC = observer((props: IBaseGan
enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
/>
- {workspaceSlug && peekIssueId && peekProjectId && (
- state?.id == data?.state_id)?.color,
+ backgroundColor: stateColor,
}}
onClick={handleIssuePeekOverview}
>
@@ -49,34 +52,42 @@ export const IssueGanttBlock = ({ data }: { data: TIssue }) => {
// rendering issues on gantt sidebar
export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
- const router = useRouter();
// hooks
const { getProjectStates } = useProjectState();
const { getProjectById } = useProject();
+ const {
+ router: { workspaceSlug },
+ } = useApplication();
+ const { setPeekIssue } = useIssueDetail();
- const handleIssuePeekOverview = () => {
- const { query } = router;
-
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project_id },
- });
- };
+ const handleIssuePeekOverview = () =>
+ workspaceSlug &&
+ data &&
+ data.project_id &&
+ data.id &&
+ setPeekIssue({ workspaceSlug, projectId: data.project_id, issueId: data.id });
const currentStateDetails =
getProjectStates(data?.project_id)?.find((state) => state?.id == data?.state_id) || undefined;
return (
- {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setDeleteIssueModal(true);
}}
>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index 27d16c781..0decd5555 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -11,9 +11,11 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
export const ModuleIssueQuickActions: React.FC = (props) => {
- const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
+ const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState(undefined);
@@ -58,12 +60,17 @@ export const ModuleIssueQuickActions: React.FC = (props) => {
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
+ storeType={EIssuesStoreType.MODULE}
/>
-
+
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleCopyIssueLink();
}}
>
@@ -73,9 +80,7 @@ export const ModuleIssueQuickActions: React.FC = (props) => {
- {currentStateDetails != undefined && (
- ;
+ [EIssueActions.UPDATE]?: (issue: TIssue) => Promise;
+ [EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
+ };
+}
+
+export const ProjectViewGanttLayout: React.FC = observer((props) => {
+ const { issueActions } = props;
+ // store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
// router
const router = useRouter();
- const { workspaceSlug } = router.query;
+ const { viewId } = router.query;
- const issueActions = {
- [EIssueActions.UPDATE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
- },
- [EIssueActions.DELETE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
- },
- };
-
- return = (props) => {
+ const { formKey, register, setFocus, projectDetail } = props;
+
+ useEffect(() => {
+ setFocus(formKey);
+ }, [formKey, setFocus]);
+
+ return (
+ ;
onSuccess?: (data: TIssue) => Promise | void;
quickAddCallback?: (
@@ -30,34 +59,25 @@ const defaultValues: Partial = {
name: "",
};
-const Inputs = (props: any) => {
- const { register, setFocus } = props;
-
- useEffect(() => {
- setFocus("name");
- }, [setFocus]);
-
- return (
-
- );
-};
-
-export const GanttInlineCreateIssueForm: React.FC = observer((props) => {
+export const GanttQuickAddIssueForm: React.FC = observer((props) => {
const { prePopulatedData, quickAddCallback, viewId } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
- // store hooks
- const { getWorkspaceBySlug } = useWorkspace();
- const { currentProjectDetails } = useProject();
+ // hooks
+ const { getProjectById } = useProject();
+ const { setToastAlert } = useToast();
+
+ const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
+
+ const ref = useRef(null);
+
+ const [isOpen, setIsOpen] = useState(false);
+ const handleClose = () => setIsOpen(false);
+
+ useKeypress("Escape", handleClose);
+ useOutsideClickDetector(ref, handleClose);
+
// form info
const {
reset,
@@ -67,106 +87,67 @@ export const GanttInlineCreateIssueForm: React.FC = observer((props) => {
formState: { errors, isSubmitting },
} = useForm({ defaultValues });
- // ref
- const ref = useRef(null);
-
- // states
- const [isOpen, setIsOpen] = useState(false);
-
- const handleClose = () => setIsOpen(false);
-
- // hooks
- useKeypress("Escape", handleClose);
- useOutsideClickDetector(ref, handleClose);
- const { setToastAlert } = useToast();
-
- // derived values
- const workspaceDetail = getWorkspaceBySlug(workspaceSlug?.toString()!);
-
useEffect(() => {
if (!isOpen) reset({ ...defaultValues });
}, [isOpen, reset]);
- useEffect(() => {
- if (!errors) return;
-
- Object.keys(errors).forEach((key) => {
- const error = errors[key as keyof TIssue];
-
- setToastAlert({
- type: "error",
- title: "Error!",
- message: error?.message?.toString() || "Some error occurred. Please try again.",
- });
- });
- }, [errors, setToastAlert]);
-
const onSubmitHandler = async (formData: TIssue) => {
if (isSubmitting || !workspaceSlug || !projectId) return;
- // resetting the form so that user can add another issue quickly
- reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+ reset({ ...defaultValues });
- const payload = createIssuePayload(workspaceDetail!, currentProjectDetails!, {
+ const targetDate = new Date();
+ targetDate.setDate(targetDate.getDate() + 1);
+
+ const payload = createIssuePayload(projectId.toString(), {
...(prePopulatedData ?? {}),
...formData,
start_date: renderFormattedPayloadDate(new Date()),
- target_date: renderFormattedPayloadDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+ target_date: renderFormattedPayloadDate(targetDate),
});
try {
- if (quickAddCallback) {
- await quickAddCallback(workspaceSlug.toString(), projectId.toString(), payload, viewId);
- }
+ quickAddCallback &&
+ (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
} catch (err: any) {
- Object.keys(err || {}).forEach((key) => {
- const error = err?.[key];
- const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
-
- setToastAlert({
- type: "error",
- title: "Error!",
- message: errorTitle || "Some error occurred. Please try again.",
- });
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: err?.message || "Some error occurred. Please try again.",
});
}
};
-
return (
<>
- {isOpen && (
-
- )}
-
- {isOpen && (
- ;
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
}
@@ -63,13 +62,13 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas
issueActions,
showLoader,
viewId,
- currentStore,
+ storeType,
addIssuesToView,
canEditPropertiesBasedOnProject,
} = props;
// router
const router = useRouter();
- const { workspaceSlug, projectId, peekIssueId, peekProjectId } = router.query;
+ const { workspaceSlug, projectId } = router.query;
// store hooks
const {
membership: { currentProjectRole },
@@ -78,9 +77,6 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas
// toast alert
const { setToastAlert } = useToast();
- // FIXME get from filters
- const kanbanViewStore: IssueKanBanViewStore = {} as IssueKanBanViewStore;
-
const issueIds = issues?.groupedIssueIds || [];
const displayFilters = issuesFilter?.issueFilters?.displayFilters;
@@ -206,15 +202,25 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas
issueIds,
viewId
).finally(() => {
+ handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
setDeleteIssueModal(false);
setDragState({});
});
};
- const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
- kanbanViewStore.handleKanBanToggle(toggle, value);
+ const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => {
+ if (workspaceSlug && projectId) {
+ let _kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
+ if (_kanbanFilters.includes(value)) _kanbanFilters = _kanbanFilters.filter((_value) => _value != value);
+ else _kanbanFilters.push(value);
+ issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.KANBAN_FILTERS, {
+ [toggle]: _kanbanFilters,
+ });
+ }
};
+ const kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] };
+
return (
<>
= observer((props: IBas
)}
-
- {getProjectById(data?.project_id)?.identifier} {data?.sequence_id}
+
+
- {data?.name}
-
-
+
);
};
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
index a5cc57c4e..1ed02c2c9 100644
--- a/web/components/issues/issue-layouts/gantt/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -4,28 +4,34 @@ import { observer } from "mobx-react-lite";
import { useIssues } from "hooks/store";
// components
import { BaseGanttRoot } from "./base-gantt-root";
+// constants
import { EIssuesStoreType } from "constants/issue";
+// types
import { EIssueActions } from "../types";
import { TIssue } from "@plane/types";
-export const ProjectViewGanttLayout: React.FC = observer(() => {
+export interface IViewGanttLayout {
+ issueActions: {
+ [EIssueActions.DELETE]: (issue: TIssue) => Promise
+ {currentStateDetails != undefined && (
+
+ {data?.name}
+
-
+ {getProjectById(data?.project_id)?.identifier} {data?.sequence_id}
+
+
+
+ );
+};
+
+type IGanttQuickAddIssueForm = {
prePopulatedData?: Partial{projectDetail?.identifier ?? "..."}
+
+ - Press {"'"}Enter{"'"} to add another issue -
- )} - - {!isOpen && ( - - )} +
+ {isOpen ? (
+
);
});
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index dcf6e7cc3..4c2e21649 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -15,17 +15,16 @@ import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
//components
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
-import { DeleteIssueModal, IssuePeekOverview } from "components/issues";
+import { DeleteIssueModal } from "components/issues";
import { EUserProjectRoles } from "constants/project";
import { useIssues } from "hooks/store/use-issues";
import { handleDragDrop } from "./utils";
-import { IssueKanBanViewStore } from "store/issue/issue_kanban_view.store";
import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
import { IDraftIssues, IDraftIssuesFilter } from "store/issue/draft";
import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
-import { TCreateModalStoreTypes } from "constants/issue";
+import { EIssueFilterType, TCreateModalStoreTypes } from "constants/issue";
export interface IBaseKanBanLayout {
issues: IProjectIssues | ICycleIssues | IDraftIssues | IModuleIssues | IProjectViewIssues | IProfileIssues;
@@ -44,7 +43,7 @@ export interface IBaseKanBanLayout {
};
showLoader?: boolean;
viewId?: string;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise
+
+
+ ) : (
+ {`Press 'Enter' to add another issue`}
+ setIsOpen(true)}
+ >
+
+ )}
+
+
+ {/* drag and delete component */}
await handleIssues(issueToUpdate as TIssue, EIssueActions.UPDATE)}
- />
- )}
);
});
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 682f3c416..40bd19cf1 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -5,12 +5,11 @@ import { observer } from "mobx-react-lite";
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
import { IssueProperties } from "../properties/all-properties";
// ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip, ControlLink } from "@plane/ui";
// types
import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
import { EIssueActions } from "../types";
-import { useRouter } from "next/router";
-import { useProject } from "hooks/store";
+import { useApplication, useIssueDetail, useProject } from "hooks/store";
interface IssueBlockProps {
issueId: string;
@@ -34,24 +33,23 @@ interface IssueDetailsBlockProps {
const KanbanIssueDetailsBlock: React.FC = observer((props: IssueDetailsBlockProps) => {
const { issue, handleIssues, quickActions, isReadOnly, displayProperties } = props;
-
- const router = useRouter();
-
// hooks
const { getProjectById } = useProject();
+ const {
+ router: { workspaceSlug, projectId },
+ } = useApplication();
+ const { setPeekIssue } = useIssueDetail();
const updateIssue = (issueToUpdate: TIssue) => {
if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
};
- const handleIssuePeekOverview = () => {
- const { query } = router;
-
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
- });
- };
+ const handleIssuePeekOverview = (issue: TIssue) =>
+ workspaceSlug &&
+ issue &&
+ issue.project_id &&
+ issue.id &&
+ setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
return (
<>
@@ -63,11 +61,18 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop
-
-
+
+ handleIssuePeekOverview(issue)}
+ className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+ >
+
+ {issue.name}
+
+
+
void;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- kanBanToggle: any;
- handleKanBanToggle: any;
+ kanbanFilters: TIssueKanbanFilters;
+ handleKanbanFilters: any;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (
workspaceSlug: string,
@@ -41,7 +42,7 @@ export interface IGroupByKanBan {
) => Promise;
viewId?: string;
disableIssueCreation?: boolean;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
canEditProperties: (projectId: string | undefined) => boolean;
}
@@ -57,13 +58,13 @@ const GroupByKanBan: React.FC = observer((props) => {
isDragDisabled,
handleIssues,
quickActions,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
enableQuickIssueCreate,
quickAddCallback,
viewId,
disableIssueCreation,
- currentStore,
+ storeType,
addIssuesToView,
canEditProperties,
} = props;
@@ -77,53 +78,63 @@ const GroupByKanBan: React.FC = observer((props) => {
if (!list) return null;
- const verticalAlignPosition = (_list: IGroupByColumn) => kanBanToggle?.groupByHeaderMinMax.includes(_list.id);
+ const visibilityGroupBy = (_list: IGroupByColumn) =>
+ sub_group_by ? false : kanbanFilters?.group_by.includes(_list.id) ? true : false;
+
+ const isGroupByCreatedBy = group_by === "created_by";
return (
- {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setCreateUpdateIssueModal(true);
}}
>
@@ -113,9 +114,7 @@ export const CycleIssueQuickActions: React.FC = (props) => {
= observer((props: IBas
group_by={group_by}
handleIssues={handleIssues}
quickActions={renderQuickActions}
- kanBanToggle={kanbanViewStore?.kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ handleKanbanFilters={handleKanbanFilters}
+ kanbanFilters={kanbanFilters}
enableQuickIssueCreate={enableQuickAdd}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
quickAddCallback={issues?.quickAddIssue}
viewId={viewId}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
canEditProperties={canEditProperties}
- currentStore={currentStore}
+ storeType={storeType}
addIssuesToView={addIssuesToView}
/>
-
- {workspaceSlug && peekIssueId && peekProjectId && (
- {quickActions(issue)}
- {issue.name}
-
-
+ {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
@@ -101,9 +104,7 @@ export const CycleIssueQuickActions: React.FC = (props) => {
{list &&
list.length > 0 &&
list.map((_list: IGroupByColumn) => {
- const verticalPosition = verticalAlignPosition(_list);
+ const groupByVisibilityToggle = visibilityGroupBy(_list);
return (
- {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setIssueToEdit({
...issue,
cycle: cycleId?.toString() ?? null,
@@ -89,9 +94,7 @@ export const CycleIssueQuickActions: React.FC = (props) => {
+ {
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setDeleteIssueModal(true);
}}
>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 6d7e08152..d21535639 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -11,9 +11,11 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
export const CycleIssueQuickActions: React.FC = (props) => {
- const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton } = props;
+ const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState(undefined);
@@ -58,12 +60,17 @@ export const CycleIssueQuickActions: React.FC = (props) => {
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
+ storeType={EIssuesStoreType.CYCLE}
/>
-
+
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleCopyIssueLink();
}}
>
@@ -73,9 +80,7 @@ export const CycleIssueQuickActions: React.FC = (props) => {
{sub_group_by === null && (
- ;
viewId?: string;
disableIssueCreation?: boolean;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
canEditProperties: (projectId: string | undefined) => boolean;
}
@@ -167,13 +178,13 @@ export const KanBan: React.FC = observer((props) => {
sub_group_id = "null",
handleIssues,
quickActions,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
enableQuickIssueCreate,
quickAddCallback,
viewId,
disableIssueCreation,
- currentStore,
+ storeType,
addIssuesToView,
canEditProperties,
} = props;
@@ -181,27 +192,25 @@ export const KanBan: React.FC = observer((props) => {
const issueKanBanView = useKanbanView();
return (
- ;
disableIssueCreation?: boolean;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
}
@@ -36,14 +36,14 @@ export const HeaderGroupByCard: FC = observer((props) => {
icon,
title,
count,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
issuePayload,
disableIssueCreation,
- currentStore,
+ storeType,
addIssuesToView,
} = props;
- const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
+ const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
const [isOpen, setIsOpen] = React.useState(false);
const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
@@ -84,7 +84,12 @@ export const HeaderGroupByCard: FC = observer((props) => {
fieldsToShow={["all"]}
/>
) : (
- setIsOpen(false)} data={issuePayload} />
+ setIsOpen(false)}
+ data={issuePayload}
+ storeType={storeType}
+ />
)}
{renderExistingIssueModal && (
= observer((props) => {
{sub_group_by === null && (
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setDeleteIssueModal(true);
}}
>
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index 8d6735277..264093778 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -12,7 +12,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
import { IQuickActionProps } from "../list/list-view-types";
export const ArchivedIssueQuickActions: React.FC = (props) => {
- const { issue, handleDelete, customActionButton } = props;
+ const { issue, handleDelete, customActionButton, portalElement } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
@@ -40,11 +40,15 @@ export const ArchivedIssueQuickActions: React.FC = (props) =>
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDelete}
/>
-
+
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleCopyIssueLink();
}}
>
@@ -54,9 +58,7 @@ export const ArchivedIssueQuickActions: React.FC = (props) =>
+
);
})}
@@ -140,8 +151,8 @@ export interface IKanBan {
sub_group_id?: string;
handleIssues: (issue: TIssue, action: EIssueActions) => void;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- kanBanToggle: any;
- handleKanBanToggle: any;
+ kanbanFilters: TIssueKanbanFilters;
+ handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
showEmptyGroup: boolean;
enableQuickIssueCreate?: boolean;
quickAddCallback?: (
@@ -152,7 +163,7 @@ export interface IKanBan {
) => Promise
-
+ handleKanBanToggle("groupByHeaderMinMax", column_id)}
+ onClick={() => handleKanbanFilters("group_by", column_id)}
>
{verticalAlignPosition ? (
await handleIssues(issueToUpdate as TIssue, EIssueActions.UPDATE)}
- />
- )} */}
);
});
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
index 7c49e744c..820f98fdd 100644
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -1,13 +1,13 @@
-import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// components
import { IssueProperties } from "../properties/all-properties";
+// hooks
+import { useApplication, useIssueDetail, useProject } from "hooks/store";
// ui
-import { Spinner, Tooltip } from "@plane/ui";
+import { Spinner, Tooltip, ControlLink } from "@plane/ui";
// types
import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
import { EIssueActions } from "../types";
-import { useProject } from "hooks/store";
interface IssueBlockProps {
issueId: string;
@@ -20,27 +20,29 @@ interface IssueBlockProps {
export const IssueBlock: React.FC = observer((props: IssueBlockProps) => {
const { issuesMap, issueId, handleIssues, quickActions, displayProperties, canEditProperties } = props;
- // router
- const router = useRouter();
+ // hooks
+ const {
+ router: { workspaceSlug, projectId },
+ } = useApplication();
+ const { getProjectById } = useProject();
+ const { setPeekIssue } = useIssueDetail();
+
const updateIssue = (issueToUpdate: TIssue) => {
handleIssues(issueToUpdate, EIssueActions.UPDATE);
};
+ const handleIssuePeekOverview = (issue: TIssue) =>
+ workspaceSlug &&
+ issue &&
+ issue.project_id &&
+ issue.id &&
+ setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
+
const issue = issuesMap[issueId];
if (!issue) return null;
- const handleIssuePeekOverview = () => {
- const { query } = router;
-
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
- });
- };
-
const canEditIssueProperties = canEditProperties(issue.project_id);
- const { getProjectById } = useProject();
const projectDetails = getProjectById(issue.project_id);
return (
@@ -55,14 +57,17 @@ export const IssueBlock: React.FC = observer((props: IssueBlock
{issue?.tempId !== undefined && (
)}
-
-
+
+ handleIssuePeekOverview(issue)}
+ className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+ >
+
+ {issue.name}
+
+
;
+ [EIssueActions.UPDATE]?: (issue: TIssue) => Promise;
+ [EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
+ };
+}
-export const ProjectViewListLayout: React.FC = observer(() => {
+export const ProjectViewListLayout: React.FC = observer((props) => {
+ const { issueActions } = props;
// store
const { issuesFilter, issues } = useIssues(EIssuesStoreType.PROJECT_VIEW);
const router = useRouter();
- const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+ const { workspaceSlug, projectId, viewId } = router.query;
if (!workspaceSlug || !projectId) return null;
- const issueActions = useMemo(
- () => ({
- [EIssueActions.UPDATE]: async (issue: TIssue) => {
- if (!workspaceSlug || !projectId) return;
-
- await issues.updateIssue(workspaceSlug, projectId, issue.id, issue);
- },
- [EIssueActions.DELETE]: async (issue: TIssue) => {
- if (!workspaceSlug || !projectId) return;
-
- await issues.removeIssue(workspaceSlug, projectId, issue.id);
- },
- }),
- [issues, workspaceSlug, projectId]
- );
-
return (
= observer((props) => {
const { issue, handleIssues, displayProperties, isReadOnly, className } = props;
const { labelMap } = useLabel();
+ const { areEstimatesEnabledForCurrentProject } = useEstimate();
const handleState = (stateId: string) => {
handleIssues({ ...issue, state_id: stateId });
@@ -92,7 +93,6 @@ export const IssueProperties: React.FC = observer((props) => {
{/* label */}
-
= observer((props) => {
= observer((props) => {
onChange={handleAssignee}
disabled={isReadOnly}
multiple
- buttonVariant={issue.assignee_ids.length > 0 ? "transparent-without-text" : "border-without-text"}
- buttonClassName={issue.assignee_ids.length > 0 ? "hover:bg-transparent px-0" : ""}
+ buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "border-without-text"}
+ buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
/>
{/* estimates */}
-
-
+ {areEstimatesEnabledForCurrentProject && (
+
+
+ )}
{/* extra render properties */}
{/* sub-issues */}
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index b22083c07..67295af0f 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -62,6 +62,18 @@ export const IssuePropertyLabels: React.FC = observer((pro
if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
};
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement: placement ?? "bottom-start",
+ modifiers: [
+ {
+ name: "preventOverflow",
+ options: {
+ padding: 12,
+ },
+ },
+ ],
+ });
+
if (!value) return null;
let projectLabels: IIssueLabel[] = defaultOptions;
@@ -86,18 +98,6 @@ export const IssuePropertyLabels: React.FC = observer((pro
const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
- const { styles, attributes } = usePopper(referenceElement, popperElement, {
- placement: placement ?? "bottom-start",
- modifiers: [
- {
- name: "preventOverflow",
- options: {
- padding: 12,
- },
- },
- ],
- });
-
const label = (
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
@@ -86,9 +91,7 @@ export const AllIssueQuickActions: React.FC = (props) => {
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
setCreateUpdateIssueModal(true);
}}
>
@@ -98,9 +101,7 @@ export const AllIssueQuickActions: React.FC = (props) => {
handleKanBanToggle("subgroupByIssuesVisibility", column_id)}
+ onClick={() => handleKanbanFilters("sub_group_by", column_id)}
>
- {kanBanToggle?.subgroupByIssuesVisibility.includes(column_id) ? (
+ {kanbanFilters?.sub_group_by.includes(column_id) ? (
= observer((props) => {
sub_group_id={_list.id}
handleIssues={handleIssues}
quickActions={quickActions}
- kanBanToggle={kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ kanbanFilters={kanbanFilters}
+ handleKanbanFilters={handleKanbanFilters}
showEmptyGroup={showEmptyGroup}
enableQuickIssueCreate={enableQuickIssueCreate}
canEditProperties={canEditProperties}
@@ -165,12 +167,12 @@ export interface IKanBanSwimLanes {
group_by: string | null;
handleIssues: (issue: TIssue, action: EIssueActions) => void;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- kanBanToggle: any;
- handleKanBanToggle: any;
+ kanbanFilters: TIssueKanbanFilters;
+ handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
showEmptyGroup: boolean;
isDragStarted?: boolean;
disableIssueCreation?: boolean;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
enableQuickIssueCreate: boolean;
quickAddCallback?: (
@@ -192,8 +194,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => {
group_by,
handleIssues,
quickActions,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
showEmptyGroup,
isDragStarted,
disableIssueCreation,
@@ -227,8 +229,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => {
issueIds={issueIds}
group_by={group_by}
sub_group_by={sub_group_by}
- kanBanToggle={kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ kanbanFilters={kanbanFilters}
+ handleKanbanFilters={handleKanbanFilters}
list={groupByList}
/>
@@ -243,8 +245,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => {
sub_group_by={sub_group_by}
handleIssues={handleIssues}
quickActions={quickActions}
- kanBanToggle={kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ kanbanFilters={kanbanFilters}
+ handleKanbanFilters={handleKanbanFilters}
showEmptyGroup={showEmptyGroup}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
diff --git a/web/components/issues/issue-layouts/kanban/utils.ts b/web/components/issues/issue-layouts/kanban/utils.ts
index e12fc2477..5c5de8c45 100644
--- a/web/components/issues/issue-layouts/kanban/utils.ts
+++ b/web/components/issues/issue-layouts/kanban/utils.ts
@@ -8,6 +8,41 @@ import { IProjectViewIssues } from "store/issue/project-views";
import { IWorkspaceIssues } from "store/issue/workspace";
import { TGroupedIssues, IIssueMap, TSubGroupedIssues, TUnGroupedIssues } from "@plane/types";
+const handleSortOrder = (destinationIssues: string[], destinationIndex: number, issueMap: IIssueMap) => {
+ const sortOrderDefaultValue = 65535;
+ let currentIssueState = {};
+
+ if (destinationIssues && destinationIssues.length > 0) {
+ if (destinationIndex === 0) {
+ const destinationIssueId = destinationIssues[destinationIndex];
+ currentIssueState = {
+ ...currentIssueState,
+ sort_order: issueMap[destinationIssueId].sort_order - sortOrderDefaultValue,
+ };
+ } else if (destinationIndex === destinationIssues.length) {
+ const destinationIssueId = destinationIssues[destinationIndex - 1];
+ currentIssueState = {
+ ...currentIssueState,
+ sort_order: issueMap[destinationIssueId].sort_order + sortOrderDefaultValue,
+ };
+ } else {
+ const destinationTopIssueId = destinationIssues[destinationIndex - 1];
+ const destinationBottomIssueId = destinationIssues[destinationIndex];
+ currentIssueState = {
+ ...currentIssueState,
+ sort_order: (issueMap[destinationTopIssueId].sort_order + issueMap[destinationBottomIssueId].sort_order) / 2,
+ };
+ }
+ } else {
+ currentIssueState = {
+ ...currentIssueState,
+ sort_order: sortOrderDefaultValue,
+ };
+ }
+
+ return currentIssueState;
+};
+
export const handleDragDrop = async (
source: DraggableLocation | null | undefined,
destination: DraggableLocation | null | undefined,
@@ -50,7 +85,7 @@ export const handleDragDrop = async (
!sourceGroupByColumnId ||
!destinationGroupByColumnId ||
!sourceSubGroupByColumnId ||
- !sourceGroupByColumnId
+ !destinationSubGroupByColumnId
)
return;
@@ -76,92 +111,49 @@ export const handleDragDrop = async (
const [removed] = sourceIssues.splice(source.index, 1);
const removedIssueDetail = issueMap[removed];
+ updateIssue = {
+ id: removedIssueDetail?.id,
+ project_id: removedIssueDetail?.project_id,
+ };
+
+ // for both horizontal and vertical dnd
+ updateIssue = {
+ ...updateIssue,
+ ...handleSortOrder(destinationIssues, destination.index, issueMap),
+ };
+
if (subGroupBy && sourceSubGroupByColumnId && destinationSubGroupByColumnId) {
- updateIssue = {
- id: removedIssueDetail?.id,
- };
-
- // for both horizontal and vertical dnd
- updateIssue = {
- ...updateIssue,
- ...handleSortOrder(destinationIssues, destination.index, issueMap),
- };
-
if (sourceSubGroupByColumnId === destinationSubGroupByColumnId) {
if (sourceGroupByColumnId != destinationGroupByColumnId) {
- if (groupBy === "state") updateIssue = { ...updateIssue, state: destinationGroupByColumnId };
+ if (groupBy === "state") updateIssue = { ...updateIssue, state_id: destinationGroupByColumnId };
if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
}
} else {
if (subGroupBy === "state")
updateIssue = {
...updateIssue,
- state: destinationSubGroupByColumnId,
+ state_id: destinationSubGroupByColumnId,
priority: destinationGroupByColumnId,
};
if (subGroupBy === "priority")
updateIssue = {
...updateIssue,
- state: destinationGroupByColumnId,
+ state_id: destinationGroupByColumnId,
priority: destinationSubGroupByColumnId,
};
}
} else {
- updateIssue = {
- id: removedIssueDetail?.id,
- };
-
- // for both horizontal and vertical dnd
- updateIssue = {
- ...updateIssue,
- ...handleSortOrder(destinationIssues, destination.index, issueMap),
- };
-
// for horizontal dnd
if (sourceColumnId != destinationColumnId) {
- if (groupBy === "state") updateIssue = { ...updateIssue, state: destinationGroupByColumnId };
+ if (groupBy === "state") updateIssue = { ...updateIssue, state_id: destinationGroupByColumnId };
if (groupBy === "priority") updateIssue = { ...updateIssue, priority: destinationGroupByColumnId };
}
}
if (updateIssue && updateIssue?.id) {
- if (viewId) return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue); //, viewId);
- else return await store?.updateIssue(workspaceSlug, projectId, updateIssue.id, updateIssue);
+ if (viewId)
+ return await store?.updateIssue(workspaceSlug, updateIssue.project_id, updateIssue.id, updateIssue, viewId);
+ else return await store?.updateIssue(workspaceSlug, updateIssue.project_id, updateIssue.id, updateIssue);
}
}
};
-
-const handleSortOrder = (destinationIssues: string[], destinationIndex: number, issueMap: IIssueMap) => {
- const sortOrderDefaultValue = 65535;
- let currentIssueState = {};
-
- if (destinationIssues && destinationIssues.length > 0) {
- if (destinationIndex === 0) {
- const destinationIssueId = destinationIssues[destinationIndex];
- currentIssueState = {
- ...currentIssueState,
- sort_order: issueMap[destinationIssueId].sort_order - sortOrderDefaultValue,
- };
- } else if (destinationIndex === destinationIssues.length) {
- const destinationIssueId = destinationIssues[destinationIndex - 1];
- currentIssueState = {
- ...currentIssueState,
- sort_order: issueMap[destinationIssueId].sort_order + sortOrderDefaultValue,
- };
- } else {
- const destinationTopIssueId = destinationIssues[destinationIndex - 1];
- const destinationBottomIssueId = destinationIssues[destinationIndex];
- currentIssueState = {
- ...currentIssueState,
- sort_order: (issueMap[destinationTopIssueId].sort_order + issueMap[destinationBottomIssueId].sort_order) / 2,
- };
- }
- } else {
- currentIssueState = {
- ...currentIssueState,
- sort_order: sortOrderDefaultValue,
- };
- }
-
- return currentIssueState;
-};
diff --git a/web/components/issues/issue-layouts/list/base-list-root.tsx b/web/components/issues/issue-layouts/list/base-list-root.tsx
index dc92aa7d2..b718269b6 100644
--- a/web/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/components/issues/issue-layouts/list/base-list-root.tsx
@@ -48,7 +48,7 @@ interface IBaseListRoot {
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
};
viewId?: string;
- currentStore: TCreateModalStoreTypes;
+ storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
}
@@ -60,7 +60,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
QuickActions,
issueActions,
viewId,
- currentStore,
+ storeType,
addIssuesToView,
canEditPropertiesBasedOnProject,
} = props;
@@ -134,19 +134,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
enableIssueQuickAdd={!!enableQuickAdd}
canEditProperties={canEditProperties}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
- currentStore={currentStore}
+ storeType={storeType}
addIssuesToView={addIssuesToView}
/>
-
- {/* {workspaceSlug && peekIssueId && peekProjectId && (
-
+
{(provided: any, snapshot: any) => (
-
-
);
};
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index 07c5fbda6..21aeb3d9d 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
import { observer } from "mobx-react-lite";
import { PlusIcon } from "lucide-react";
// hooks
-import { useProject, useWorkspace } from "hooks/store";
+import { useProject } from "hooks/store";
import useToast from "hooks/use-toast";
import useKeypress from "hooks/use-keypress";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -59,10 +59,8 @@ export const KanBanQuickAddIssueForm: React.FC = obser
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// store hooks
- const { getWorkspaceBySlug } = useWorkspace();
const { getProjectById } = useProject();
- const workspaceDetail = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : null;
const projectDetail = projectId ? getProjectById(projectId.toString()) : null;
const ref = useRef(null);
@@ -87,11 +85,11 @@ export const KanBanQuickAddIssueForm: React.FC = obser
}, [isOpen, reset]);
const onSubmitHandler = async (formData: TIssue) => {
- if (isSubmitting || !groupId || !workspaceDetail || !projectDetail || !workspaceSlug || !projectId) return;
+ if (isSubmitting || !workspaceSlug || !projectId) return;
reset({ ...defaultValues });
- const payload = createIssuePayload(workspaceDetail, projectDetail, {
+ const payload = createIssuePayload(projectId.toString(), {
...(prePopulatedData ?? {}),
...formData,
});
@@ -122,13 +120,13 @@ export const KanBanQuickAddIssueForm: React.FC = obser
};
return (
-
- {!kanBanToggle?.subgroupByIssuesVisibility.includes(_list.id) && (
+
+ {!kanbanFilters?.sub_group_by.includes(_list.id) && (
- {!verticalPosition ? (
-
)}
+
+ )}
- {enableQuickIssueCreate && !disableIssueCreation && (
-
+ <>
{isOpen ? (
- ;
+ [EIssueActions.UPDATE]?: (issue: TIssue) => Promise;
+ [EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
+ };
+}
-export const ProjectViewKanBanLayout: React.FC = observer(() => {
+export const ProjectViewKanBanLayout: React.FC = observer((props) => {
+ const { issueActions } = props;
+ // router
const router = useRouter();
- const { workspaceSlug } = router.query as { workspaceSlug: string; projectId: string };
+ const { viewId } = router.query;
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
- const issueActions = useMemo(
- () => ({
- [EIssueActions.UPDATE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
- },
- [EIssueActions.DELETE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
- },
- }),
- [issues, workspaceSlug]
- );
return (
{
issues={issues}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
- currentStore={EIssuesStoreType.PROJECT_VIEW}
+ storeType={EIssuesStoreType.PROJECT_VIEW}
+ viewId={viewId?.toString()}
/>
);
});
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index d65bbee57..33126d17b 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -13,6 +13,7 @@ import {
IIssueMap,
TSubGroupedIssues,
TUnGroupedIssues,
+ TIssueKanbanFilters,
} from "@plane/types";
// constants
import { EIssueActions } from "../types";
@@ -25,16 +26,16 @@ interface ISubGroupSwimlaneHeader {
sub_group_by: string | null;
group_by: string | null;
list: IGroupByColumn[];
- kanBanToggle: any;
- handleKanBanToggle: any;
+ kanbanFilters: TIssueKanbanFilters;
+ handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
}
const SubGroupSwimlaneHeader: React.FC = ({
issueIds,
sub_group_by,
group_by,
list,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
}) => (
;
@@ -90,8 +91,8 @@ const SubGroupSwimlane: React.FC = observer((props) => {
handleIssues,
quickActions,
displayProperties,
- kanBanToggle,
- handleKanBanToggle,
+ kanbanFilters,
+ handleKanbanFilters,
showEmptyGroup,
enableQuickIssueCreate,
canEditProperties,
@@ -123,13 +124,14 @@ const SubGroupSwimlane: React.FC = observer((props) => {
icon={_list.Icon}
title={_list.name || ""}
count={calculateIssueCount(_list.id)}
- kanBanToggle={kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ kanbanFilters={kanbanFilters}
+ handleKanbanFilters={handleKanbanFilters}
/>
+
+
);
});
diff --git a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index ae0d4a1bb..0903355ce 100644
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -50,7 +50,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
showLoader={true}
QuickActions={CycleIssueQuickActions}
viewId={cycleId?.toString() ?? ""}
- currentStore={EIssuesStoreType.CYCLE}
+ storeType={EIssuesStoreType.CYCLE}
addIssuesToView={(issueIds: string[]) => {
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
diff --git a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
index 4577d56b7..89f4683af 100644
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -50,7 +50,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
showLoader={true}
QuickActions={ModuleIssueQuickActions}
viewId={moduleId?.toString()}
- currentStore={EIssuesStoreType.MODULE}
+ storeType={EIssuesStoreType.MODULE}
addIssuesToView={(issueIds: string[]) => {
if (!workspaceSlug || !projectId || !moduleId) throw new Error();
return issues.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
diff --git a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
index c0bf0a728..4b3f3fe83 100644
--- a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -52,7 +52,7 @@ export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
issues={issues}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
- currentStore={EIssuesStoreType.PROFILE}
+ storeType={EIssuesStoreType.PROFILE}
canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
/>
);
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
index b67ceb460..89e2ee187 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -43,7 +43,7 @@ export const KanBanLayout: React.FC = observer(() => {
issuesFilter={issuesFilter}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
- currentStore={EIssuesStoreType.PROJECT}
+ storeType={EIssuesStoreType.PROJECT}
/>
);
});
diff --git a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
index 86f6a281b..1cdf71d45 100644
--- a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -1,38 +1,32 @@
-import React, { useMemo } from "react";
+import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// hooks
import { useIssues } from "hooks/store";
// constant
+import { EIssuesStoreType } from "constants/issue";
+// types
import { TIssue } from "@plane/types";
import { EIssueActions } from "../../types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
// components
import { BaseKanBanRoot } from "../base-kanban-root";
-import { EIssuesStoreType } from "constants/issue";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-export interface IViewKanBanLayout {}
+export interface IViewKanBanLayout {
+ issueActions: {
+ [EIssueActions.DELETE]: (issue: TIssue) => Promise
@@ -143,33 +141,6 @@ export const KanBanQuickAddIssueForm: React.FC = obser
New Issue
)}
-
- {/* {isOpen && (
-
- )}
-
- {isOpen && (
- - Press {"'"}Enter{"'"} to add another issue -
- )} - - {!isOpen && ( - - )} */} -
{list &&
@@ -45,11 +46,11 @@ const SubGroupSwimlaneHeader: React.FC = ({
sub_group_by={sub_group_by}
group_by={group_by}
column_id={_list.id}
- icon={_list.Icon}
+ icon={_list.icon}
title={_list.name}
count={(issueIds as TGroupedIssues)?.[_list.id]?.length || 0}
- kanBanToggle={kanBanToggle}
- handleKanBanToggle={handleKanBanToggle}
+ kanbanFilters={kanbanFilters}
+ handleKanbanFilters={handleKanbanFilters}
issuePayload={_list.payload}
/>
@@ -64,11 +65,11 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
displayProperties: IIssueDisplayProperties | undefined;
handleIssues: (issue: TIssue, action: EIssueActions) => void;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- kanBanToggle: any;
- handleKanBanToggle: any;
+ kanbanFilters: TIssueKanbanFilters;
+ handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
isDragStarted?: boolean;
disableIssueCreation?: boolean;
- currentStore?: TCreateModalStoreTypes;
+ storeType?: TCreateModalStoreTypes;
enableQuickIssueCreate: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
addIssuesToView?: (issueIds: string[]) => Promise
- {issue.name}
-
-
{!issue?.tempId ? (
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 9bf7cfc78..df9103817 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -21,7 +21,6 @@ export interface IGroupByList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
- is_list?: boolean;
handleIssues: (issue: TIssue, action: EIssueActions) => Promise;
quickActions: (issue: TIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | undefined;
@@ -35,7 +34,7 @@ export interface IGroupByList {
viewId?: string
) => Promise;
disableIssueCreation?: boolean;
- currentStore: TCreateModalStoreTypes;
+ storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
viewId?: string;
}
@@ -45,7 +44,6 @@ const GroupByList: React.FC = (props) => {
issueIds,
issuesMap,
group_by,
- is_list = false,
handleIssues,
quickActions,
displayProperties,
@@ -55,7 +53,7 @@ const GroupByList: React.FC = (props) => {
quickAddCallback,
viewId,
disableIssueCreation,
- currentStore,
+ storeType,
addIssuesToView,
} = props;
// store hooks
@@ -70,11 +68,27 @@ const GroupByList: React.FC = (props) => {
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
- if (groupByKey === null) return { state_id: defaultState?.id };
- else {
- if (groupByKey === "state") return { state: groupByKey === "state" ? value : defaultState?.id };
- else return { state_id: defaultState?.id, [groupByKey]: value };
+ let preloadedData: object = { state_id: defaultState?.id };
+
+ if (groupByKey === null) {
+ preloadedData = { ...preloadedData };
+ } else {
+ if (groupByKey === "state") {
+ preloadedData = { ...preloadedData, state_id: value };
+ } else if (groupByKey === "priority") {
+ preloadedData = { ...preloadedData, priority: value };
+ } else if (groupByKey === "labels" && value != "None") {
+ preloadedData = { ...preloadedData, label_ids: [value] };
+ } else if (groupByKey === "assignees" && value != "None") {
+ preloadedData = { ...preloadedData, assignee_ids: [value] };
+ } else if (groupByKey === "created_by") {
+ preloadedData = { ...preloadedData };
+ } else {
+ preloadedData = { ...preloadedData, [groupByKey]: value };
+ }
}
+
+ return preloadedData;
};
const validateEmptyIssueGroups = (issues: TIssue[]) => {
@@ -83,6 +97,10 @@ const GroupByList: React.FC = (props) => {
return true;
};
+ const is_list = group_by === null ? true : false;
+
+ const isGroupByCreatedBy = group_by === "created_by";
+
return (
= (props) => {
/>
)}
- {enableIssueQuickAdd && !disableIssueCreation && (
+ {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
Promise;
viewId?: string;
disableIssueCreation?: boolean;
- currentStore: TCreateModalStoreTypes;
+ storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
}
@@ -166,7 +184,7 @@ export const List: React.FC = (props) => {
enableIssueQuickAdd,
canEditProperties,
disableIssueCreation,
- currentStore,
+ storeType,
addIssuesToView,
} = props;
@@ -185,7 +203,7 @@ export const List: React.FC = (props) => {
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
- currentStore={currentStore}
+ storeType={storeType}
addIssuesToView={addIssuesToView}
/>
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 4989cb250..8e7b0ace3 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -19,12 +19,12 @@ interface IHeaderGroupByCard {
count: number;
issuePayload: Partial;
disableIssueCreation?: boolean;
- currentStore: TCreateModalStoreTypes;
+ storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise;
}
export const HeaderGroupByCard = observer(
- ({ icon, title, count, issuePayload, disableIssueCreation, currentStore, addIssuesToView }: IHeaderGroupByCard) => {
+ ({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
@@ -101,7 +101,12 @@ export const HeaderGroupByCard = observer(
fieldsToShow={["all"]}
/>
) : (
- setIsOpen(false)} data={issuePayload} />
+ setIsOpen(false)}
+ data={issuePayload}
+ storeType={storeType}
+ />
)}
{renderExistingIssueModal && (
diff --git a/web/components/issues/issue-layouts/list/list-view-types.d.ts b/web/components/issues/issue-layouts/list/list-view-types.d.ts
index 674ae92d1..9e3bb8701 100644
--- a/web/components/issues/issue-layouts/list/list-view-types.d.ts
+++ b/web/components/issues/issue-layouts/list/list-view-types.d.ts
@@ -4,4 +4,5 @@ export interface IQuickActionProps {
handleUpdate?: (data: TIssue) => Promise;
handleRemoveFromView?: () => Promise;
customActionButton?: React.ReactElement;
+ portalElement?: HTMLDivElement | null;
}
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index b6e39606e..540d4d7f6 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
import { observer } from "mobx-react-lite";
// hooks
-import { useProject, useWorkspace } from "hooks/store";
+import { useProject } from "hooks/store";
import useToast from "hooks/use-toast";
import useKeypress from "hooks/use-keypress";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -62,9 +62,10 @@ export const ListQuickAddIssueForm: FC = observer((props
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
- // store hooks
- const { currentWorkspace } = useWorkspace();
- const { currentProjectDetails } = useProject();
+ // hooks
+ const { getProjectById } = useProject();
+
+ const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
const ref = useRef(null);
@@ -88,11 +89,11 @@ export const ListQuickAddIssueForm: FC = observer((props
}, [isOpen, reset]);
const onSubmitHandler = async (formData: TIssue) => {
- if (isSubmitting || !currentWorkspace || !currentProjectDetails || !workspaceSlug || !projectId) return;
+ if (isSubmitting || !workspaceSlug || !projectId) return;
reset({ ...defaultValues });
- const payload = createIssuePayload(currentWorkspace, currentProjectDetails, {
+ const payload = createIssuePayload(projectId.toString(), {
...(prePopulatedData ?? {}),
...formData,
});
@@ -127,12 +128,7 @@ export const ListQuickAddIssueForm: FC = observer((props
onSubmit={handleSubmit(onSubmitHandler)}
className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-custom-border-100 bg-custom-background-100 px-3"
>
-
diff --git a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
index 388699dc7..e29c7dbb0 100644
--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -34,7 +34,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
issues={issues}
QuickActions={ArchivedIssueQuickActions}
issueActions={issueActions}
- currentStore={EIssuesStoreType.PROJECT}
+ storeType={EIssuesStoreType.PROJECT}
/>
);
});
diff --git a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
index c1db51411..89da8dd54 100644
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -48,7 +48,7 @@ export const CycleListLayout: React.FC = observer(() => {
QuickActions={CycleIssueQuickActions}
issueActions={issueActions}
viewId={cycleId?.toString()}
- currentStore={EIssuesStoreType.CYCLE}
+ storeType={EIssuesStoreType.CYCLE}
addIssuesToView={(issueIds: string[]) => {
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
diff --git a/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
index ef1edc831..e11971874 100644
--- a/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
@@ -43,7 +43,7 @@ export const DraftIssueListLayout: FC = observer(() => {
issues={issues}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
- currentStore={EIssuesStoreType.PROJECT}
+ storeType={EIssuesStoreType.PROJECT}
/>
);
});
diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx
index 947cfe55b..fb874b8f6 100644
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -25,12 +25,12 @@ export const ModuleListLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;
- await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue);
+ await issues.updateIssue(workspaceSlug.toString(), issue.project_id, issue.id, issue, moduleId.toString());
},
[EIssueActions.DELETE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;
- await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id);
+ await issues.removeIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleId.toString());
},
[EIssueActions.REMOVE]: async (issue: TIssue) => {
if (!workspaceSlug || !moduleId) return;
@@ -48,7 +48,7 @@ export const ModuleListLayout: React.FC = observer(() => {
QuickActions={ModuleIssueQuickActions}
issueActions={issueActions}
viewId={moduleId?.toString()}
- currentStore={EIssuesStoreType.MODULE}
+ storeType={EIssuesStoreType.MODULE}
addIssuesToView={(issueIds: string[]) => {
if (!workspaceSlug || !projectId || !moduleId) throw new Error();
return issues.addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
diff --git a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
index 55db4cd71..1e7e364d5 100644
--- a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -52,7 +52,7 @@ export const ProfileIssuesListLayout: FC = observer(() => {
issues={issues}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
- currentStore={EIssuesStoreType.PROFILE}
+ storeType={EIssuesStoreType.PROFILE}
canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
/>
);
diff --git a/web/components/issues/issue-layouts/list/roots/project-root.tsx b/web/components/issues/issue-layouts/list/roots/project-root.tsx
index b99b431c8..f0479b71f 100644
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -44,7 +44,7 @@ export const ListLayout: FC = observer(() => {
issues={issues}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
- currentStore={EIssuesStoreType.PROJECT}
+ storeType={EIssuesStoreType.PROJECT}
/>
);
});
diff --git a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
index 8139307e6..dd384ba93 100644
--- a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -1,50 +1,43 @@
-import React, { useMemo } from "react";
+import React from "react";
import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
// store
import { useIssues } from "hooks/store";
// constants
-import { useRouter } from "next/router";
+import { EIssuesStoreType } from "constants/issue";
+// types
import { EIssueActions } from "../../types";
import { TIssue } from "@plane/types";
// components
import { BaseListRoot } from "../base-list-root";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
-import { EIssuesStoreType } from "constants/issue";
-export interface IViewListLayout {}
+export interface IViewListLayout {
+ issueActions: {
+ [EIssueActions.DELETE]: (issue: TIssue) => Promise
{list &&
@@ -97,8 +115,8 @@ const GroupByList: React.FC = (props) => {
title={_list.name || ""}
count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
issuePayload={_list.payload}
- disableIssueCreation={disableIssueCreation}
- currentStore={currentStore}
+ disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
+ storeType={storeType}
addIssuesToView={addIssuesToView}
/>
@@ -114,7 +132,7 @@ const GroupByList: React.FC{`Press 'Enter' to add another issue`}
-
-
+
+
{value.length > 0 ? (
diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index efd9490d7..92964ec97 100644
--- a/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -11,9 +11,11 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
+// constants
+import { EIssuesStoreType } from "constants/issue";
export const AllIssueQuickActions: React.FC = (props) => {
- const { issue, handleDelete, handleUpdate, customActionButton } = props;
+ const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState(undefined);
@@ -58,12 +60,17 @@ export const AllIssueQuickActions: React.FC = (props) => {
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) await handleUpdate({ ...issueToEdit, ...data });
}}
+ storeType={EIssuesStoreType.PROJECT}
/>
-
+
{
- e.preventDefault();
- e.stopPropagation();
+ onClick={() => {
handleCopyIssueLink();
}}
>
@@ -73,9 +80,7 @@ export const AllIssueQuickActions: React.FC = (props) => {
- {globalViewId != currentIssueView && (loader === "init-loader" || !groupedIssueIds) ? (
+ {!globalViewId || globalViewId !== dataViewId || loader === "init-loader" || !issueIds ? (
setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
@@ -59,28 +61,36 @@ export const CycleLayoutRoot: React.FC = observer(() => {
{cycleStatus === "completed" && setTransferIssuesModal(true)} />}
handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
+
+ handleOrderBy(propertyDetails.descendingOrderKey, property)}>
+
+ {selectedMenuItem &&
+ selectedMenuItem !== "" &&
+ displayFilters?.order_by !== "-created_at" &&
+ selectedMenuItem.includes(property) && (
+ handleOrderBy("-created_at", property)}
+ >
+
+ )}
+
+ );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
index a6c4979b3..acfd02fc5 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -1,7 +1,5 @@
-export * from "./issue";
export * from "./assignee-column";
export * from "./attachment-column";
-export * from "./columns-list";
export * from "./created-on-column";
export * from "./due-date-column";
export * from "./estimate-column";
@@ -11,4 +9,4 @@ export * from "./priority-column";
export * from "./start-date-column";
export * from "./state-column";
export * from "./sub-issue-column";
-export * from "./updated-on-column";
+export * from "./updated-on-column";
\ No newline at end of file
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts b/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
deleted file mode 100644
index b8d09d1df..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./spreadsheet-issue-column";
-export * from "./issue-column";
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
deleted file mode 100644
index 612bba9df..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useRef, useState } from "react";
-import { useRouter } from "next/router";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-// components
-import { Tooltip } from "@plane/ui";
-// hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// types
-import { TIssue, IIssueDisplayProperties } from "@plane/types";
-import { useProject } from "hooks/store";
-
-type Props = {
- issue: TIssue;
- expanded: boolean;
- handleToggleExpand: (issueId: string) => void;
- properties: IIssueDisplayProperties;
- quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- canEditProperties: (projectId: string | undefined) => boolean;
- nestingLevel: number;
-};
-
-export const IssueColumn: React.FC = ({
- issue,
- expanded,
- handleToggleExpand,
- properties,
- quickActions,
- canEditProperties,
- nestingLevel,
-}) => {
- // router
- const router = useRouter();
- // hooks
- const { getProjectById } = useProject();
- // states
- const [isMenuActive, setIsMenuActive] = useState(false);
-
- const menuActionRef = useRef(null);
-
- const handleIssuePeekOverview = (issue: TIssue) => {
- const { query } = router;
-
- router.push({
- pathname: router.pathname,
- query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project_id },
- });
- };
-
- const paddingLeft = `${nestingLevel * 54}px`;
-
- useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
-
- const customActionButton = (
- >;
- properties: IIssueDisplayProperties;
- quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
- canEditProperties: (projectId: string | undefined) => boolean;
- nestingLevel?: number;
-};
-
-export const SpreadsheetIssuesColumn: React.FC = ({
- issueId,
- expandedIssues,
- setExpandedIssues,
- properties,
- quickActions,
- canEditProperties,
- nestingLevel = 0,
-}) => {
- const handleToggleExpand = (issueId: string) => {
- setExpandedIssues((prevState) => {
- const newArray = [...prevState];
- const index = newArray.indexOf(issueId);
-
- if (index > -1) newArray.splice(index, 1);
- else newArray.push(issueId);
-
- return newArray;
- });
- };
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading } = useSubIssue(issue.project_id, issue.id, isExpanded);
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
- return (
- <>
- {issueDetail && (
- ) => void;
- labels: IIssueLabel[] | undefined;
- expandedIssues: string[];
+ issue: TIssue;
+ onChange: (issue: TIssue, data: Partial) => void;
disabled: boolean;
};
-export const SpreadsheetLabelColumn: React.FC = (props) => {
- const { issueId, onChange, labels, expandedIssues, disabled } = props;
+export const SpreadsheetLabelColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
// hooks
const { labelMap } = useLabel();
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading, mutateSubIssues } = useSubIssue(issue.project_id, issue.id, isExpanded);
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
- const defaultLabelOptions = issueDetail?.label_ids?.map((id) => labelMap[id]) || [];
+ const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
return (
- <>
- {issueDetail && (
- {
- onChange(issueDetail, { label_ids: data });
- }}
- className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
- buttonClassName="px-2.5 h-full"
- hideDropdownArrow
- maxRender={1}
- disabled={disabled}
- placeholderText="Select labels"
- />
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
- {
+ onChange(issue, { label_ids: data });
+ }}
+ className="h-11 w-full border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80"
+ buttonClassName="px-2.5 h-full"
+ hideDropdownArrow
+ maxRender={1}
+ disabled={disabled}
+ placeholderText="Select labels"
+ />
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index a86dcedd7..2d3e7b670 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -1,39 +1,18 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// types
+import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- expandedIssues: string[];
+ issue: TIssue;
};
-export const SpreadsheetLinkColumn: React.FC = (props) => {
- const { issueId, expandedIssues } = props;
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading } = useSubIssue(issue.project_id, issue.id, isExpanded);
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetLinkColumn: React.FC = observer((props: Props) => {
+ const { issue } = props;
return (
- <>
- ) => void;
- expandedIssues: string[];
disabled: boolean;
};
-export const SpreadsheetPriorityColumn: React.FC = (props) => {
- const { issueId, onChange, expandedIssues, disabled } = props;
- // store hooks
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
- // derived values
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
+export const SpreadsheetPriorityColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- ) => void;
- expandedIssues: string[];
+ issue: TIssue;
+ onChange: (issue: TIssue, data: Partial) => void;
disabled: boolean;
};
-export const SpreadsheetStartDateColumn: React.FC = ({ issueId, onChange, expandedIssues, disabled }) => {
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading, mutateSubIssues } = useSubIssue(issue.project_id, issue.id, isExpanded);
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetStartDateColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- ) => void;
- states: IState[] | undefined;
- expandedIssues: string[];
disabled: boolean;
};
-export const SpreadsheetStateColumn: React.FC = (props) => {
- const { issueId, onChange, states, expandedIssues, disabled } = props;
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading, mutateSubIssues } = useSubIssue(issue.project_id, issue.id, isExpanded);
+export const SpreadsheetStateColumn: React.FC = observer((props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- = (props) => {
- const { issueId, expandedIssues } = props;
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading } = useSubIssue(issue.project_id, issue.id, isExpanded);
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetSubIssueColumn: React.FC = observer((props: Props) => {
+ const { issue } = props;
return (
- <>
- = (props) => {
- const { issueId, expandedIssues } = props;
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading } = useSubIssue(issue.project_id, issue.id, isExpanded);
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
+export const SpreadsheetUpdatedOnColumn: React.FC = observer((props: Props) => {
+ const { issue } = props;
return (
- <>
- {issueDetail && (
- ;
+ portalElement: React.MutableRefObject;
+ nestingLevel: number;
+ issueId: string;
+}
+
+export const SpreadsheetIssueRow = observer((props: Props) => {
+ const {
+ displayProperties,
+ issueId,
+ isEstimateEnabled,
+ nestingLevel,
+ portalElement,
+ handleIssues,
+ quickActions,
+ canEditProperties,
+ } = props;
+
+ // router
+ const router = useRouter();
+ const { workspaceSlug } = router.query;
+ //hooks
+ const { getProjectById } = useProject();
+ const { setPeekIssue } = useIssueDetail();
+ // states
+ const [isMenuActive, setIsMenuActive] = useState(false);
+ const [isExpanded, setExpanded] = useState(false);
+
+ const menuActionRef = useRef(null);
+
+ const handleIssuePeekOverview = (issue: TIssue) => {
+ if (workspaceSlug && issue && issue.project_id && issue.id)
+ setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
+ };
+
+ const { subIssues: subIssuesStore, issue } = useIssueDetail();
+
+ const issueDetail = issue.getIssueById(issueId);
+ const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+
+ const paddingLeft = `${nestingLevel * 54}px`;
+
+ useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+ const handleToggleExpand = () => {
+ setExpanded((prevState) => {
+ if (!prevState && workspaceSlug && issueDetail)
+ subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issueDetail.project_id, issueDetail.id);
+ return !prevState;
+ });
+ };
+
+ const customActionButton = (
+
+ {/* first column/ issue name and key column */}
+
+
+
+ handleIssuePeekOverview(issueDetail)}
+ className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+ >
+
+
+ {/* Rest of the columns */}
+ {SPREADSHEET_PROPERTY_LIST.map((property) => {
+ const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
+
+ const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+ return (
+
+
+ ) =>
+ handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)
+ }
+ disabled={disableUserActions}
+ />
+
+
+ );
+ })}
+
+
+ {isExpanded &&
+ subIssues &&
+ subIssues.length > 0 &&
+ subIssues.map((subIssueId: string) => (
+ = observer((props) =>
reset({ ...defaultValues });
- const payload = createIssuePayload(currentWorkspace, currentProjectDetails, {
+ const payload = createIssuePayload(currentProjectDetails.id, {
...(prePopulatedData ?? {}),
...formData,
});
diff --git a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
index 7420d1e48..28b766cd1 100644
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -1,43 +1,40 @@
-import React, { useMemo } from "react";
+import React from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// mobx store
import { useIssues } from "hooks/store";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// types
import { EIssueActions } from "../../types";
import { TIssue } from "@plane/types";
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// constants
import { EIssuesStoreType } from "constants/issue";
-export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+export interface IViewSpreadsheetLayout {
+ issueActions: {
+ [EIssueActions.DELETE]: (issue: TIssue) => Promise;
+ [EIssueActions.UPDATE]?: (issue: TIssue) => Promise;
+ [EIssueActions.REMOVE]?: (issue: TIssue) => Promise;
+ };
+}
+
+export const ProjectViewSpreadsheetLayout: React.FC = observer((props) => {
+ const { issueActions } = props;
+ // router
const router = useRouter();
- const { workspaceSlug } = router.query as { workspaceSlug: string };
+ const { viewId } = router.query;
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
- const issueActions = useMemo(
- () => ({
- [EIssueActions.UPDATE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.updateIssue(workspaceSlug, issue.project_id, issue.id, issue);
- },
- [EIssueActions.DELETE]: async (issue: TIssue) => {
- if (!workspaceSlug) return;
-
- await issues.removeIssue(workspaceSlug, issue.project_id, issue.id);
- },
- }),
- [issues, workspaceSlug]
- );
-
return (
) => void;
- handleUpdateIssue: (issue: TIssue, data: Partial) => void;
- issues: TIssue[] | undefined;
- property: string;
- labels?: IIssueLabel[] | undefined;
- states?: IState[] | undefined;
-};
-
-export const SpreadsheetColumn: React.FC = (props) => {
- const {
- canEditProperties,
- displayFilters,
- expandedIssues,
- handleDisplayFilterUpdate,
- handleUpdateIssue,
- issues,
- property,
- labels,
- states,
- } = props;
-
- const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
- "spreadsheetViewSorting",
- ""
- );
- const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
- "spreadsheetViewActiveSortingProperty",
- ""
- );
-
- const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
- handleDisplayFilterUpdate({ order_by: order });
-
- setSelectedMenuItem(`${order}_${itemKey}`);
- setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
- };
-
- const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
-
- return (
-
- );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
new file mode 100644
index 000000000..704c9f904
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -0,0 +1,59 @@
+// ui
+import { LayersIcon } from "@plane/ui";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+// constants
+import { SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
+// components
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { SpreadsheetHeaderColumn } from "./columns/header-column";
+
+
+interface Props {
+ displayProperties: IIssueDisplayProperties;
+ displayFilters: IIssueDisplayFilterOptions;
+ handleDisplayFilterUpdate: (data: Partial) => void;
+ isEstimateEnabled: boolean;
+}
+
+export const SpreadsheetHeader = (props: Props) => {
+ const { displayProperties, displayFilters, handleDisplayFilterUpdate, isEstimateEnabled } = props;
+
+ return (
+
+
+
+
+
+ #ID
+
+
+
+
+
+ {SPREADSHEET_PROPERTY_LIST.map((property) => {
+ const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
+
+ return (
+
+
+
+
+ );
+ })}
+
+
+ );
+};
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
new file mode 100644
index 000000000..e287c6d84
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -0,0 +1,63 @@
+import { observer } from "mobx-react-lite";
+//types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
+//components
+import { SpreadsheetIssueRow } from "./issue-row";
+import { SpreadsheetHeader } from "./spreadsheet-header";
+
+type Props = {
+ displayProperties: IIssueDisplayProperties;
+ displayFilters: IIssueDisplayFilterOptions;
+ handleDisplayFilterUpdate: (data: Partial) => void;
+ issueIds: string[];
+ isEstimateEnabled: boolean;
+ quickActions: (
+ issue: TIssue,
+ customActionButton?: React.ReactElement,
+ portalElement?: HTMLDivElement | null
+ ) => React.ReactNode;
+ handleIssues: (issue: TIssue, action: EIssueActions) => Promise;
+ canEditProperties: (projectId: string | undefined) => boolean;
+ portalElement: React.MutableRefObject;
+};
+
+export const SpreadsheetTable = observer((props: Props) => {
+ const {
+ displayProperties,
+ displayFilters,
+ handleDisplayFilterUpdate,
+ issueIds,
+ isEstimateEnabled,
+ portalElement,
+ quickActions,
+ handleIssues,
+ canEditProperties,
+ } = props;
+
+ return (
+
+
+ );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index b86eabf54..e99b17850 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,26 +1,25 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/router";
+import React, { useEffect, useRef } from "react";
import { observer } from "mobx-react-lite";
// components
-import {
- IssuePeekOverview,
- SpreadsheetColumnsList,
- SpreadsheetIssuesColumn,
- SpreadsheetQuickAddIssueForm,
-} from "components/issues";
-import { Spinner, LayersIcon } from "@plane/ui";
+import { Spinner } from "@plane/ui";
+import { SpreadsheetQuickAddIssueForm } from "components/issues";
+import { SpreadsheetTable } from "./spreadsheet-table";
// types
-import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState } from "@plane/types";
+import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
import { EIssueActions } from "../types";
+//hooks
+import { useProject } from "hooks/store";
type Props = {
displayProperties: IIssueDisplayProperties;
displayFilters: IIssueDisplayFilterOptions;
handleDisplayFilterUpdate: (data: Partial) => void;
- issues: TIssue[] | undefined;
- labels?: IIssueLabel[] | undefined;
- states?: IState[] | undefined;
- quickActions: (issue: TIssue, customActionButton: any) => React.ReactNode;
+ issueIds: string[] | undefined;
+ quickActions: (
+ issue: TIssue,
+ customActionButton?: React.ReactElement,
+ portalElement?: HTMLDivElement | null
+ ) => React.ReactNode;
handleIssues: (issue: TIssue, action: EIssueActions) => Promise;
openIssuesListModal?: (() => void) | null;
quickAddCallback?: (
@@ -40,9 +39,7 @@ export const SpreadsheetView: React.FC = observer((props) => {
displayProperties,
displayFilters,
handleDisplayFilterUpdate,
- issues,
- labels,
- states,
+ issueIds,
quickActions,
handleIssues,
quickAddCallback,
@@ -52,19 +49,36 @@ export const SpreadsheetView: React.FC = observer((props) => {
disableIssueCreation,
} = props;
// states
- const [expandedIssues, setExpandedIssues] = useState([]);
- const [isScrolled, setIsScrolled] = useState(false);
+ const isScrolled = useRef(false);
// refs
- const containerRef = useRef(null);
- // router
- const router = useRouter();
- const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
+ const containerRef = useRef(null);
+ const portalRef = useRef(null);
+
+ const { currentProjectDetails } = useProject();
+
+ const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
const handleScroll = () => {
if (!containerRef.current) return;
-
const scrollLeft = containerRef.current.scrollLeft;
- setIsScrolled(scrollLeft > 0);
+
+ const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
+ const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
+
+ //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
+ if (scrollLeft > 0 !== isScrolled.current) {
+ const firtColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
+
+ for (let i = 0; i < firtColumns.length; i++) {
+ const shadow = i === 0 ? headerShadow : columnShadow;
+ if (scrollLeft > 0) {
+ (firtColumns[i] as HTMLElement).style.boxShadow = shadow;
+ } else {
+ (firtColumns[i] as HTMLElement).style.boxShadow = "none";
+ }
+ }
+ isScrolled.current = scrollLeft > 0;
+ }
};
useEffect(() => {
@@ -77,7 +91,7 @@ export const SpreadsheetView: React.FC = observer((props) => {
};
}, []);
- if (!issues || issues.length === 0)
+ if (!issueIds || issueIds.length === 0)
return (
= observer((props) => {
);
return (
- = observer((props) => {
hasError={Boolean(errors.name)}
placeholder="Issue Title"
className="resize-none text-xl w-full"
+ tabIndex={1}
/>
)}
/>
= observer((props) => {
handleFormChange();
}}
buttonVariant="border-with-text"
+ tabIndex={7}
/>
)}
@@ -394,6 +429,7 @@ export const IssueFormRoot: FC = observer((props) => {
buttonClassName={value?.length > 0 ? "hover:bg-transparent px-0" : ""}
placeholder="Assignees"
multiple
+ tabIndex={8}
/>
)}
@@ -411,6 +447,7 @@ export const IssueFormRoot: FC = observer((props) => {
handleFormChange();
}}
projectId={projectId}
+ tabIndex={9}
/>
)}
@@ -429,6 +466,7 @@ export const IssueFormRoot: FC
@@ -126,7 +122,7 @@ export const AllIssueLayoutRoot: React.FC = observer((props) => {
displayProperties={issueFilters?.displayProperties ?? {}}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
- issues={issuesArray}
+ issueIds={issueIds}
quickActions={(issue) => (
= observer((props) => {
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
/>
)}
- labels={workspaceLabels || undefined}
handleIssues={handleIssues}
canEditProperties={canEditProperties}
- viewId={currentIssueView}
+ viewId={globalViewId}
/>
)}
diff --git a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
index 3b23351d9..bcd30555e 100644
--- a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -5,31 +5,53 @@ import useSWR from "swr";
// mobx store
import { useIssues } from "hooks/store";
// components
-import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "components/issues";
+import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot, ProjectEmptyState } from "components/issues";
import { EIssuesStoreType } from "constants/issue";
+// ui
+import { Spinner } from "@plane/ui";
export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
+ // router
const router = useRouter();
- const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+ const { workspaceSlug, projectId } = router.query;
+ // hooks
+ const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
- const {
- issues: { groupedIssueIds, fetchIssues },
- issuesFilter: { fetchFilters },
- } = useIssues(EIssuesStoreType.ARCHIVED);
-
- useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
- if (workspaceSlug && projectId) {
- await fetchFilters(workspaceSlug, projectId);
- await fetchIssues(workspaceSlug, projectId, groupedIssueIds ? "mutation" : "init-loader");
+ useSWR(
+ workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+ async () => {
+ if (workspaceSlug && projectId) {
+ await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+ await issues?.fetchIssues(
+ workspaceSlug.toString(),
+ projectId.toString(),
+ issues?.groupedIssueIds ? "mutation" : "init-loader"
+ );
+ }
}
- });
+ );
+ if (!workspaceSlug || !projectId) return <>;
return (
-
+
+ {issues?.loader === "init-loader" ? (
+
+
+ ) : (
+ <>
+ {!issues?.groupedIssueIds ? (
+ // TODO: Replace this with project view empty state
+
+
+ )}
+
+ )}
- {activeLayout === "list" ? (
-
+ <>
+
+ {activeLayout === "list" ? (
+
+ {/* peek overview */}
+
- {activeLayout === "list" ? (
-
+ {!issues?.groupedIssueIds ? (
+ // TODO: Replace this with project view empty state
+
+ {activeLayout === "list" ? (
+
+ )}
)}
- {activeLayout === "list" ? (
-
+ <>
+
+ {activeLayout === "list" ? (
+
+ {/* peek overview */}
+
- {activeLayout === "list" ? (
- = (props) => {
setViewModal(false)}
/>
diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 543e33aad..3a022d447 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -2,7 +2,7 @@ import { FC, useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
-import { useIssues, useLabel, useProjectState, useUser } from "hooks/store";
+import { useIssues, useUser } from "hooks/store";
// views
import { SpreadsheetView } from "./spreadsheet-view";
// types
@@ -40,26 +40,24 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
const {
membership: { currentProjectRole },
} = useUser();
- const {
- project: { projectLabels },
- } = useLabel();
- const { projectStates } = useProjectState();
// derived values
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
// user role validation
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
- const canEditProperties = (projectId: string | undefined) => {
- const isEditingAllowedBasedOnProject =
- canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+ const canEditProperties = useCallback(
+ (projectId: string | undefined) => {
+ const isEditingAllowedBasedOnProject =
+ canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+ return enableInlineEditing && isEditingAllowedBasedOnProject;
+ },
+ [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+ );
- return enableInlineEditing && isEditingAllowedBasedOnProject;
- };
const issueIds = (issueStore.groupedIssueIds ?? []) as TUnGroupedIssues;
- const issues = issueIds?.filter((id) => id && issueMap?.[id]).map((id) => issueMap?.[id]);
-
const handleIssues = useCallback(
async (issue: TIssue, action: EIssueActions) => {
if (issueActions[action]) {
@@ -86,27 +84,31 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
[issueFiltersStore, projectId, workspaceSlug, viewId]
);
+ const renderQuickActions = useCallback(
+ (issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null) => (
+ handleIssues(issue, EIssueActions.DELETE)}
+ handleUpdate={
+ issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
+ }
+ handleRemoveFromView={
+ issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
+ }
+ portalElement={portalElement}
+ />
+ ),
+ [handleIssues]
+ );
+
return (
(
- handleIssues(issue, EIssueActions.DELETE)}
- handleUpdate={
- issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
- }
- handleRemoveFromView={
- issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
- }
- />
- )}
- labels={projectLabels ?? []}
- states={projectStates}
+ issueIds={issueIds}
+ quickActions={renderQuickActions}
handleIssues={handleIssues}
canEditProperties={canEditProperties}
quickAddCallback={issueStore.quickAddIssue}
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 6dbcecb8d..2656143ac 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -1,56 +1,34 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// components
import { ProjectMemberDropdown } from "components/dropdowns";
// types
import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
+ issue: TIssue;
onChange: (issue: TIssue, data: Partial) => void;
- expandedIssues: string[];
disabled: boolean;
};
-export const SpreadsheetAssigneeColumn: React.FC = ({ issueId, onChange, expandedIssues, disabled }) => {
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetAssigneeColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- = (props) => {
- const { issueId, expandedIssues } = props;
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
- // const { subIssues, isLoading } = useSubIssue(issue.project_id, issue.id, isExpanded);
+export const SpreadsheetAttachmentColumn: React.FC = observer((props) => {
+ const { issue } = props;
return (
- <>
- ) => void;
- handleUpdateIssue: (issue: TIssue, data: Partial) => void;
- issues: TIssue[] | undefined;
- labels?: IIssueLabel[] | undefined;
- states?: IState[] | undefined;
-};
-
-export const SpreadsheetColumnsList: React.FC = observer((props) => {
- const {
- canEditProperties,
- displayFilters,
- displayProperties,
- expandedIssues,
- handleDisplayFilterUpdate,
- handleUpdateIssue,
- issues,
- labels,
- states,
- } = props;
- // store hooks
- const { currentProjectDetails } = useProject();
-
- const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
-
- return (
- <>
- {displayProperties.state && (
- = ({ issueId, expandedIssues }) => {
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
-
+export const SpreadsheetCreatedOnColumn: React.FC = observer((props: Props) => {
+ const { issue } = props;
return (
- <>
- {issueDetail && (
- ) => void;
- expandedIssues: string[];
disabled: boolean;
};
-export const SpreadsheetDueDateColumn: React.FC = ({ issueId, onChange, expandedIssues, disabled }) => {
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading, mutateSubIssues } = useSubIssue(issue.project_id, issue.id, isExpanded);
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetDueDateColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- ) => void;
- expandedIssues: string[];
+ issue: TIssue;
+ onChange: (issue: TIssue, data: Partial) => void;
disabled: boolean;
};
-export const SpreadsheetEstimateColumn: React.FC = (props) => {
- const { issueId, onChange, expandedIssues, disabled } = props;
-
- const isExpanded = expandedIssues.indexOf(issueId) > -1;
-
- // const { subIssues, isLoading, mutateSubIssues } = useSubIssue(issue.project_id, issue.id, isExpanded);
- const { subIssues: subIssuesStore, issue } = useIssueDetail();
-
- const issueDetail = issue.getIssueById(issueId);
- const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+export const SpreadsheetEstimateColumn: React.FC = observer((props: Props) => {
+ const { issue, onChange, disabled } = props;
return (
- <>
- {issueDetail && (
- ) => void;
+}
+
+export const SpreadsheetHeaderColumn = (props: Props) => {
+ const { displayFilters, handleDisplayFilterUpdate, property } = props;
+
+ const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+ "spreadsheetViewSorting",
+ ""
+ );
+ const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
+ "spreadsheetViewActiveSortingProperty",
+ ""
+ );
+ const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
+
+ const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+ handleDisplayFilterUpdate({ order_by: order });
+
+ setSelectedMenuItem(`${order}_${itemKey}`);
+ setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+ };
+
+ return (
+
+
+ }
+ width="xl"
+ placement="bottom-end"
+ >
+
+
+ ) : (
+ <>
+
+ {/* mutation loader */}
+ {issues?.loader === "mutation" && (
+
+
+ {/* peek overview */}
+
+
+ )}
+
+ {activeLayout === "list" ? (
+
- {activeLayout === "list" ? (
-
+ {!issues?.groupedIssueIds ? (
+
+ {activeLayout === "list" ? (
+
+
+ {/* peek overview */}
+
- onChange(issueDetail, { assignee_ids: data })}
- projectId={issueDetail?.project_id}
- disabled={disabled}
- multiple
- placeholder="Assignees"
- buttonVariant={issueDetail.assignee_ids.length > 0 ? "transparent-without-text" : "transparent-with-text"}
- buttonClassName="text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId) => (
-
+ onChange(issue, { assignee_ids: data })}
+ projectId={issue?.project_id}
+ disabled={disabled}
+ multiple
+ placeholder="Assignees"
+ buttonVariant={
+ issue?.assignee_ids && issue.assignee_ids.length > 0 ? "transparent-without-text" : "transparent-with-text"
+ }
+ buttonClassName="text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 4b4bdbb53..c17a433b8 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -1,39 +1,18 @@
import React from "react";
-// hooks
+import { observer } from "mobx-react-lite";
// types
-import { useIssueDetail } from "hooks/store";
+import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- expandedIssues: string[];
+ issue: TIssue;
};
-export const SpreadsheetAttachmentColumn: React.FC
- {issueDetail?.attachment_count} {issueDetail?.attachment_count === 1 ? "attachment" : "attachments"}
-
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
-
- ))}
-
+
+ {issue?.attachment_count} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
deleted file mode 100644
index e7f046796..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { observer } from "mobx-react-lite";
-// hooks
-import { useProject } from "hooks/store";
-// components
-import { SpreadsheetColumn } from "components/issues";
-// types
-import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState } from "@plane/types";
-
-type Props = {
- displayFilters: IIssueDisplayFilterOptions;
- displayProperties: IIssueDisplayProperties;
- canEditProperties: (projectId: string | undefined) => boolean;
- expandedIssues: string[];
- handleDisplayFilterUpdate: (data: Partial
- {renderFormattedDate(issueDetail.created_at)}
-
- )}
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
-
- ))}
-
+
+ {renderFormattedDate(issue.created_at)}
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 32c871b90..dbc27a3db 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,6 +1,5 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// components
import { DateDropdown } from "components/dropdowns";
// helpers
@@ -9,49 +8,25 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
+ issue: TIssue;
onChange: (issue: TIssue, data: Partial
- onChange(issueDetail, { target_date: data ? renderFormattedPayloadDate(data) : null })}
- disabled={disabled}
- placeholder="Due date"
- buttonVariant="transparent-with-text"
- buttonClassName="rounded-none text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId) => (
-
+ onChange(issue, { target_date: data ? renderFormattedPayloadDate(data) : null })}
+ disabled={disabled}
+ placeholder="Due date"
+ buttonVariant="transparent-with-text"
+ buttonClassName="rounded-none text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 041da65c6..50878ccce 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -1,56 +1,29 @@
-// hooks
-import { useIssueDetail } from "hooks/store";
// components
import { EstimateDropdown } from "components/dropdowns";
+import { observer } from "mobx-react-lite";
// types
import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- onChange: (issue: TIssue, formData: Partial
- onChange(issueDetail, { estimate_point: data })}
- projectId={issueDetail.project_id}
- disabled={disabled}
- buttonVariant="transparent-with-text"
- buttonClassName="rounded-none text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId) => (
-
+ onChange(issue, { estimate_point: data })}
+ projectId={issue.project_id}
+ disabled={disabled}
+ buttonVariant="transparent-with-text"
+ buttonClassName="rounded-none text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
new file mode 100644
index 000000000..040000218
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -0,0 +1,123 @@
+//ui
+import { CustomMenu } from "@plane/ui";
+import {
+ ArrowDownWideNarrow,
+ ArrowUpNarrowWide,
+ CheckIcon,
+ ChevronDownIcon,
+ Eraser,
+ ListFilter,
+ MoveRight,
+} from "lucide-react";
+//hooks
+import useLocalStorage from "hooks/use-local-storage";
+//types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
+//constants
+import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
+
+interface Props {
+ property: keyof IIssueDisplayProperties;
+ displayFilters: IIssueDisplayFilterOptions;
+ handleDisplayFilterUpdate: (data: Partial
+ {
+
+ {activeSortingProperty === property && (
+
+
+
+ )}
+
+
+
+
+
+
+ {selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` &&
+
+
+
+
+ {selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && (
+
+
+ setIsMenuActive(!isMenuActive)}
- >
-
- );
-
- return (
- <>
-
- {properties.key && (
-
-
- );
-};
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
deleted file mode 100644
index d906e522a..000000000
--- a/web/components/issues/issue-layouts/spreadsheet/columns/issue/spreadsheet-issue-column.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from "react";
-
-// components
-import { IssueColumn } from "components/issues";
-// hooks
-import { useIssueDetail } from "hooks/store";
-// types
-import { TIssue, IIssueDisplayProperties } from "@plane/types";
-
-type Props = {
- issueId: string;
- expandedIssues: string[];
- setExpandedIssues: React.Dispatch
-
- )}
-
-
- {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
-
-
- {canEditProperties(issue.project_id) && (
-
-
- {issue.sub_issues_count > 0 && (
-
- {quickActions(issue, customActionButton)}
-
- )}
-
-
-
- )}
-
-
-
-
- handleIssuePeekOverview(issue)}
- >
- {issue.name}
-
-
-
- ))}
-
+
- {issueDetail?.link_count} {issueDetail?.link_count === 1 ? "link" : "links"}
-
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
-
- ))}
-
+
+ {issue?.link_count} {issue?.link_count === 1 ? "link" : "links"}
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 5462a9e13..0a8321740 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -1,54 +1,29 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// components
import { PriorityDropdown } from "components/dropdowns";
// types
import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
+ issue: TIssue;
onChange: (issue: TIssue, data: Partial
- onChange(issueDetail, { priority: data })}
- disabled={disabled}
- buttonVariant="transparent-with-text"
- buttonClassName="rounded-none text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
+ onChange(issue, { priority: data })}
+ disabled={disabled}
+ buttonVariant="transparent-with-text"
+ buttonClassName="rounded-none text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 09248e320..778f9cdac 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,6 +1,5 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// components
import { DateDropdown } from "components/dropdowns";
// helpers
@@ -9,50 +8,25 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- onChange: (issue: TIssue, formData: Partial
- onChange(issueDetail, { start_date: data ? renderFormattedPayloadDate(data) : null })}
- disabled={disabled}
- placeholder="Start date"
- buttonVariant="transparent-with-text"
- buttonClassName="rounded-none text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId) => (
-
+ onChange(issue, { start_date: data ? renderFormattedPayloadDate(data) : null })}
+ disabled={disabled}
+ placeholder="Start date"
+ buttonVariant="transparent-with-text"
+ buttonClassName="rounded-none text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index 39508ca37..0050c8acf 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -1,59 +1,30 @@
import React from "react";
-// hooks
-import { useIssueDetail } from "hooks/store";
+import { observer } from "mobx-react-lite";
// components
import { StateDropdown } from "components/dropdowns";
// types
-import { TIssue, IState } from "@plane/types";
+import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
+ issue: TIssue;
onChange: (issue: TIssue, data: Partial
- onChange(issueDetail, { state_id: data })}
- disabled={disabled}
- buttonVariant="transparent-with-text"
- buttonClassName="rounded-none text-left"
- buttonContainerClassName="w-full"
- />
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId) => (
-
+ onChange(issue, { state_id: data })}
+ disabled={disabled}
+ buttonVariant="transparent-with-text"
+ buttonClassName="rounded-none text-left"
+ buttonContainerClassName="w-full"
+ />
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index e641c1e01..c0e41d2c0 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -1,37 +1,18 @@
import React from "react";
+import { observer } from "mobx-react-lite";
// hooks
-import { useIssueDetail } from "hooks/store";
+import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- expandedIssues: string[];
+ issue: TIssue;
};
-export const SpreadsheetSubIssueColumn: React.FC
- {issueDetail?.sub_issues_count} {issueDetail?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
-
- ))}
-
+
+ {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index 3ce036d69..f84989192 100644
--- a/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -1,43 +1,19 @@
import React from "react";
-// hooks
-// import useSubIssue from "hooks/use-sub-issue";
+import { observer } from "mobx-react-lite";
// helpers
import { renderFormattedDate } from "helpers/date-time.helper";
// types
-import { useIssueDetail } from "hooks/store";
+import { TIssue } from "@plane/types";
type Props = {
- issueId: string;
- expandedIssues: string[];
+ issue: TIssue;
};
-export const SpreadsheetUpdatedOnColumn: React.FC
- {renderFormattedDate(issueDetail.updated_at)}
-
- )}
-
- {isExpanded &&
- subIssues &&
- subIssues.length > 0 &&
- subIssues.map((subIssueId: string) => (
-
-
- ))}
-
+
+ {renderFormattedDate(issue.updated_at)}
+
);
-};
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
index 10fc26219..8f7c4a7fd 100644
--- a/web/components/issues/issue-layouts/spreadsheet/index.ts
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -1,5 +1,4 @@
export * from "./columns";
export * from "./roots";
-export * from "./spreadsheet-column";
export * from "./spreadsheet-view";
export * from "./quick-add-issue-form";
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
new file mode 100644
index 000000000..602c1a842
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -0,0 +1,193 @@
+import { useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// icons
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+// constants
+import { SPREADSHEET_PROPERTY_DETAILS, SPREADSHEET_PROPERTY_LIST } from "constants/spreadsheet";
+// components
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+// ui
+import { ControlLink, Tooltip } from "@plane/ui";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { useIssueDetail, useProject } from "hooks/store";
+// types
+import { IIssueDisplayProperties, TIssue } from "@plane/types";
+import { EIssueActions } from "../types";
+
+interface Props {
+ displayProperties: IIssueDisplayProperties;
+ isEstimateEnabled: boolean;
+ quickActions: (
+ issue: TIssue,
+ customActionButton?: React.ReactElement,
+ portalElement?: HTMLDivElement | null
+ ) => React.ReactNode;
+ canEditProperties: (projectId: string | undefined) => boolean;
+ handleIssues: (issue: TIssue, action: EIssueActions) => Promise setIsMenuActive(!isMenuActive)}
+ >
+
+ );
+
+ if (!issueDetail) return null;
+
+ const disableUserActions = !canEditProperties(issueDetail.project_id);
+
+ return (
+ <>
+
+
+
+
+ {getProjectById(issueDetail.project_id)?.identifier}-{issueDetail.sequence_id}
+
+
+ {canEditProperties(issueDetail.project_id) && (
+
+
+ {issueDetail.sub_issues_count > 0 && (
+
+ {quickActions(issueDetail, customActionButton, portalElement.current)}
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+ {issueDetail.name}
+
+
- handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
-
- handleOrderBy(propertyDetails.descendingOrderKey, property)}>
-
- {selectedMenuItem &&
- selectedMenuItem !== "" &&
- displayFilters?.order_by !== "-created_at" &&
- selectedMenuItem.includes(property) && (
- handleOrderBy("-created_at", property)}
- >
-
- )}
-
-
-
-
-
-
- }
- width="xl"
- placement="bottom-end"
- >
-
- {
-
- {activeSortingProperty === property && (
-
-
-
- )}
-
-
-
-
-
-
- {selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` && (
-
-
-
-
-
- {selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && (
-
-
-
- {issues?.map((issue) => {
- const disableUserActions = !canEditProperties(issue.project_id);
- return (
-
-
- {property === "state" ? (
- ) => handleUpdateIssue(issue, data)}
- states={states}
- />
- ) : property === "priority" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "estimate" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "assignee" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "labels" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "start_date" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "due_date" ? (
- ) => handleUpdateIssue(issue, data)}
- />
- ) : property === "created_on" ? (
-
- );
- })}
-
-
@@ -268,12 +297,13 @@ export const IssueFormRoot: FC
- = observer((props) => {
handleFormChange();
setSelectedParentIssue(null);
}}
+ tabIndex={20}
/>
- {issues && issues.length > 0 && (
- <>
- handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)}
- issues={issues}
- labels={labels}
- states={states}
- />
-
+
| null;
data?: Partial;
+ isCreateMoreToggleEnabled: boolean;
+ onCreateMoreToggleChange: (value: boolean) => void;
onChange: (formData: Partial | null) => void;
onClose: (saveDraftIssueInLocalStorage?: boolean) => void;
onSubmit: (formData: Partial) => Promise;
@@ -23,7 +25,16 @@ export interface DraftIssueProps {
const issueDraftService = new IssueDraftService();
export const DraftIssueLayout: React.FC = observer((props) => {
- const { changesMade, data, onChange, onClose, onSubmit, projectId } = props;
+ const {
+ changesMade,
+ data,
+ onChange,
+ onClose,
+ onSubmit,
+ projectId,
+ isCreateMoreToggleEnabled,
+ onCreateMoreToggleChange,
+ } = props;
// states
const [issueDiscardModal, setIssueDiscardModal] = useState(false);
// router
@@ -76,7 +87,15 @@ export const DraftIssueLayout: React.FC = observer((props) => {
onClose(false);
}}
/>
- = {
export interface IssueFormProps {
data?: Partial;
+ isCreateMoreToggleEnabled: boolean;
+ onCreateMoreToggleChange: (value: boolean) => void;
onChange?: (formData: Partial | null) => void;
onClose: () => void;
onSubmit: (values: Partial) => Promise;
@@ -62,14 +64,14 @@ const aiService = new AIService();
const fileService = new FileService();
export const IssueFormRoot: FC = observer((props) => {
- const { data, onChange, onClose, onSubmit, projectId } = props;
+ const { data, onChange, onClose, onSubmit, projectId, isCreateMoreToggleEnabled, onCreateMoreToggleChange } = props;
// states
const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState(null);
const [gptAssistantModal, setGptAssistantModal] = useState(false);
const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
- const [createMore, setCreateMore] = useState(false);
+
// refs
const editorRef = useRef(null);
// router
@@ -82,6 +84,9 @@ export const IssueFormRoot: FC = observer((props) => {
const { getProjectById } = useProject();
const { areEstimatesEnabledForProject } = useEstimate();
const { mentionHighlights, mentionSuggestions } = useMention();
+ const {
+ issue: { getIssueById },
+ } = useIssueDetail();
// toast alert
const { setToastAlert } = useToast();
// form info
@@ -176,6 +181,28 @@ export const IssueFormRoot: FC = observer((props) => {
const projectDetails = getProjectById(projectId);
+ // executing this useEffect when the parent_id coming from the component prop
+ useEffect(() => {
+ const parentId = watch("parent_id") || undefined;
+ if (!parentId) return;
+ if (parentId === selectedParentIssue?.id || selectedParentIssue) return;
+
+ const issue = getIssueById(parentId);
+ if (!issue) return;
+
+ const projectDetails = getProjectById(issue.project_id);
+ if (!projectDetails) return;
+
+ setSelectedParentIssue({
+ id: issue.id,
+ name: issue.name,
+ project_id: issue.project_id,
+ project__identifier: projectDetails.identifier,
+ project__name: projectDetails.name,
+ sequence_id: issue.sequence_id,
+ } as ISearchIssueResponse);
+ }, [watch, getIssueById, getProjectById, selectedParentIssue]);
+
return (
<>
{projectId && (
@@ -209,6 +236,7 @@ export const IssueFormRoot: FC = observer((props) => {
handleFormChange();
}}
buttonVariant="border-with-text"
+ tabIndex={19}
/>
)}
@@ -238,6 +266,7 @@ export const IssueFormRoot: FC
-
-
-
-
-
- {displayProperties.key && (
-
- #ID
-
- )}
-
-
-
- {issues.map((issue, index) =>
- issue ? (
-
+
+ await handleIssues(issueToUpdate, EIssueActions.UPDATE)}
- />
- )}
);
});
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index 866e26e75..91ce10e05 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -1,11 +1,12 @@
import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
-import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
+import { ISSUE_PRIORITIES } from "constants/issue";
import { renderEmoji } from "helpers/emoji.helper";
import { ILabelRootStore } from "store/label";
import { IMemberRootStore } from "store/member";
import { IProjectStore } from "store/project/project.store";
import { IStateStore } from "store/state.store";
import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
+import { STATE_GROUPS } from "constants/state";
export const getGroupByColumns = (
groupBy: GroupByColumnTypes | null,
@@ -31,7 +32,7 @@ export const getGroupByColumns = (
case "created_by":
return getCreatedByColumns(member) as any;
default:
- if (includeNone) return [{ id: `null`, name: `All Issues`, payload: {}, Icon: undefined }];
+ if (includeNone) return [{ id: `null`, name: `All Issues`, payload: {}, icon: undefined }];
}
};
@@ -48,8 +49,8 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
return {
id: project.id,
name: project.name,
- Icon:
+
+
+
- {workspaceSlug && peekIssueId && peekProjectId && (
-
+ {enableQuickCreateIssue && !disableIssueCreation && (
+
-
-
-
- setIsInlineCreateIssueFormOpen(true)}>
- Create new
-
- {openIssuesListModal && (
- Add an existing issue
- )}
-
- ))} */}
- {enableQuickCreateIssue && !disableIssueCreation && (
-
-
- {/* {!disableUserActions &&
- !isInlineCreateIssueFormOpen &&
- (type === "issue" ? (
-
- ) : (
- {renderEmoji(project.emoji || "")}
,
- payload: { project: project.id },
+ icon: {renderEmoji(project.emoji || "")}
,
+ payload: { project_id: project.id },
};
}) as any;
};
@@ -61,22 +62,22 @@ const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefine
return projectStates.map((state) => ({
id: state.id,
name: state.name,
- Icon: (
+ icon: (
- {issueName && issueName.trim() !== "" && (
+ {issueName && issueName.trim() !== "" && envConfig?.has_openai_configured && (
)}
@@ -374,6 +408,7 @@ export const IssueFormRoot: FC setCreateMore((prevData) => !prevData)}
+ onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
+ }}
+ tabIndex={16}
>
- {}} size="sm" />
+ {}} size="sm" />
Create more
-
diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx
index 975d4f09e..99e60eab2 100644
--- a/web/components/issues/issue-modal/modal.tsx
+++ b/web/components/issues/issue-modal/modal.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from "react";
-import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { Dialog, Transition } from "@headlessui/react";
// hooks
-import { useIssues, useProject } from "hooks/store";
+import { useApplication, useCycle, useIssues, useModule, useProject, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
import useLocalStorage from "hooks/use-local-storage";
// components
@@ -12,127 +11,246 @@ import { IssueFormRoot } from "./form";
// types
import type { TIssue } from "@plane/types";
// constants
-import { EIssuesStoreType } from "constants/issue";
+import { EIssuesStoreType, TCreateModalStoreTypes } from "constants/issue";
export interface IssuesModalProps {
data?: Partial
- reaction.actor === currentUser?.id).map((r) => r.reaction) || []}
- onSelect={handleReactionClick}
- />
-
- {Object.keys(groupedReactions || {}).map(
- (reaction) =>
- groupedReactions?.[reaction]?.length &&
- groupedReactions[reaction].length > 0 && (
-
- )
- )}
-
- );
-});
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index c66ded153..1361ff7d1 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -9,7 +9,7 @@ type Props = {
export const ViewIssueLabel: React.FC
- {issueDetails?.parent_id && parentDetail ? (
- setIsSubmitting(value)}
- isSubmitting={isSubmitting}
- workspaceSlug={workspaceSlug as string}
- issue={issueDetails}
- handleFormSubmit={submitChanges}
- isAllowed={isAllowed || !uneditable}
- />
-
- {workspaceSlug && projectId && (
-
-
- {/* issue attachments */}
-
-
-
- {siblingIssuesList ? (
- siblingIssuesList.length > 0 ? (
- <>
-
- router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
- }
- className="flex items-center gap-2 py-2"
- >
-
- ))}
-
- ) : (
- submitChanges({ parent_id: null })}
- className="flex items-center gap-2 py-2 text-red-500"
- >
-
-
-
- ) : null}
-
-
-
-
-
-
- state?.id === parentDetail?.state_id
- )?.color,
- }}
- />
-
- {getProjectById(parentDetail?.project_id)?.identifier}-{parentDetail?.sequence_id}
-
-
- {(parentDetail?.name ?? "").substring(0, 50)}
- - Sibling issues -
- {siblingIssuesList.map((issue) => ( -- No sibling issues -
- ) - ) : null} -
- {currentIssueState && (
-
-
-
-
-
-
-
- );
-});
diff --git a/web/components/issues/peek-overview/issue-detail.tsx b/web/components/issues/peek-overview/issue-detail.tsx
index 3eb7037f2..8a0ab0fe7 100644
--- a/web/components/issues/peek-overview/issue-detail.tsx
+++ b/web/components/issues/peek-overview/issue-detail.tsx
@@ -1,133 +1,32 @@
-import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import debounce from "lodash/debounce";
-// packages
-import { RichTextEditor } from "@plane/rich-text-editor";
+import { FC } from "react";
// hooks
-import { useMention, useProject, useUser } from "hooks/store";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
+import { useIssueDetail, useProject, useUser } from "hooks/store";
// components
-import { IssuePeekOverviewReactions } from "components/issues";
-// ui
-import { TextArea } from "@plane/ui";
-// types
-import { TIssue, IUser } from "@plane/types";
-// services
-import { FileService } from "services/file.service";
-// constants
-import { EUserProjectRoles } from "constants/project";
-
-const fileService = new FileService();
+import { IssueDescriptionForm, TIssueOperations } from "components/issues";
+import { IssueReaction } from "../issue-detail/reactions";
interface IPeekOverviewIssueDetails {
workspaceSlug: string;
- issue: TIssue;
- issueReactions: any;
- user: IUser | null;
- issueUpdate: (issue: PartialComments/Activity
-
- {isAllowed ? (
- (
-