diff --git a/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml deleted file mode 100644 index 908f1ea93..000000000 --- a/.github/workflows/auto-merge.yml +++ /dev/null @@ -1,69 +0,0 @@ -name: Create PR on Sync - -on: - workflow_dispatch: - push: - branches: - - "sync/**" - -env: - CURRENT_BRANCH: ${{ github.ref_name }} - SOURCE_BRANCH: ${{ vars.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce" - TARGET_BRANCH: ${{ vars.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop - GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows - REVIEWER: ${{ vars.SYNC_PR_REVIEWER }} - ACCOUNT_USER_NAME: ${{ vars.ACCOUNT_USER_NAME }} - ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }} - -jobs: - Check_Branch: - runs-on: ubuntu-latest - outputs: - BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }} - steps: - - name: Check if current branch matches the secret - id: check-branch - run: | - if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then - echo "MATCH=true" >> $GITHUB_OUTPUT - else - echo "MATCH=false" >> $GITHUB_OUTPUT - fi - Auto_Merge: - if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }} - needs: [Check_Branch] - runs-on: ubuntu-latest - permissions: - pull-requests: write - contents: write - steps: - - name: Checkout code - uses: actions/checkout@v4.1.1 - with: - fetch-depth: 0 # Fetch all history for all branches and tags - - - name: Setup Git - run: | - git config user.name "$ACCOUNT_USER_NAME" - git config user.email "$ACCOUNT_USER_EMAIL" - - - name: Setup GH CLI and Git Config - run: | - type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y) - curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg - sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg - echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null - sudo apt update - sudo apt install gh -y - - - name: Create PR to Target Branch - run: | - # get all pull requests and check if there is already a PR - PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $SOURCE_BRANCH --json number | jq '.[] | .number') - if [ -n "$PR_EXISTS" ]; then - echo "Pull Request already exists: $PR_EXISTS" - else - echo "Creating new pull request" - PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "") - echo "Pull Request created: $PR_URL" - fi diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml index ad1a605b6..a46fd74d2 100644 --- a/.github/workflows/create-sync-pr.yml +++ b/.github/workflows/create-sync-pr.yml @@ -1,28 +1,53 @@ -name: Create Sync Action +name: Create PR on Sync on: workflow_dispatch: push: branches: - - preview + - "sync/**" env: - SOURCE_BRANCH_NAME: ${{ github.ref_name }} + CURRENT_BRANCH: ${{ github.ref_name }} + SOURCE_BRANCH: ${{ vars.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce" + TARGET_BRANCH: ${{ vars.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop + GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows + REVIEWER: ${{ vars.SYNC_PR_REVIEWER }} + ACCOUNT_USER_NAME: ${{ vars.ACCOUNT_USER_NAME }} + ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }} jobs: - sync_changes: - runs-on: ubuntu-20.04 + Check_Branch: + runs-on: ubuntu-latest + outputs: + BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }} + steps: + - name: Check if current branch matches the secret + id: check-branch + run: | + if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then + echo "MATCH=true" >> $GITHUB_OUTPUT + else + echo "MATCH=false" >> $GITHUB_OUTPUT + fi + Auto_Merge: + if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }} + needs: [Check_Branch] + runs-on: ubuntu-latest permissions: pull-requests: write - contents: read + contents: write steps: - - name: Checkout Code + - name: Checkout code uses: actions/checkout@v4.1.1 with: - persist-credentials: false - fetch-depth: 0 + fetch-depth: 0 # Fetch all history for all branches and tags - - name: Setup GH CLI + - name: Setup Git + run: | + git config user.name "$ACCOUNT_USER_NAME" + git config user.email "$ACCOUNT_USER_EMAIL" + + - name: Setup GH CLI and Git Config run: | type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y) curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg @@ -31,25 +56,14 @@ jobs: sudo apt update sudo apt install gh -y - - name: Push Changes to Target Repo A - env: - GH_TOKEN: ${{ secrets.ACCESS_TOKEN }} + - name: Create PR to Target Branch run: | - TARGET_REPO="${{ secrets.TARGET_REPO_A }}" - TARGET_BRANCH="${{ secrets.TARGET_REPO_A_BRANCH_NAME }}" - SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}" - - git checkout $SOURCE_BRANCH - git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git" - git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH - - - name: Push Changes to Target Repo B - env: - GH_TOKEN: ${{ secrets.ACCESS_TOKEN }} - run: | - TARGET_REPO="${{ secrets.TARGET_REPO_B }}" - TARGET_BRANCH="${{ secrets.TARGET_REPO_B_BRANCH_NAME }}" - SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}" - - git remote add target-origin-b "https://$GH_TOKEN@github.com/$TARGET_REPO.git" - git push target-origin-b $SOURCE_BRANCH:$TARGET_BRANCH + # get all pull requests and check if there is already a PR + PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $SOURCE_BRANCH --state open --json number | jq '.[] | .number') + if [ -n "$PR_EXISTS" ]; then + echo "Pull Request already exists: $PR_EXISTS" + else + echo "Creating new pull request" + PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: merge conflicts need to be resolved" --body "") + echo "Pull Request created: $PR_URL" + fi diff --git a/.github/workflows/repo-sync.yml b/.github/workflows/repo-sync.yml new file mode 100644 index 000000000..9ac4771ef --- /dev/null +++ b/.github/workflows/repo-sync.yml @@ -0,0 +1,44 @@ +name: Sync Repositories + +on: + workflow_dispatch: + push: + branches: + - preview + +env: + SOURCE_BRANCH_NAME: ${{ github.ref_name }} + +jobs: + sync_changes: + runs-on: ubuntu-20.04 + permissions: + pull-requests: write + contents: read + steps: + - name: Checkout Code + uses: actions/checkout@v4.1.1 + with: + persist-credentials: false + fetch-depth: 0 + + - name: Setup GH CLI + run: | + type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y) + curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg + sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg + echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null + sudo apt update + sudo apt install gh -y + + - name: Push Changes to Target Repo + env: + GH_TOKEN: ${{ secrets.ACCESS_TOKEN }} + run: | + TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}" + TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}" + SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}" + + git checkout $SOURCE_BRANCH + git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git" + git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH diff --git a/packages/editor/core/src/hooks/use-editor.tsx b/packages/editor/core/src/hooks/use-editor.tsx index 78d252c81..a90be65f1 100644 --- a/packages/editor/core/src/hooks/use-editor.tsx +++ b/packages/editor/core/src/hooks/use-editor.tsx @@ -34,7 +34,7 @@ interface CustomEditorProps { suggestions?: () => Promise; }; handleEditorReady?: (value: boolean) => void; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); tabIndex?: number; } diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index f4dbaee3b..f6afdfbc1 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -43,7 +43,7 @@ type TArguments = { cancelUploadImage?: () => void; uploadFile: UploadImage; }; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); tabIndex?: number; }; @@ -147,7 +147,7 @@ export const CoreEditorExtensions = ({ if (placeholder) { if (typeof placeholder === "string") return placeholder; - else return placeholder(editor.isFocused); + else return placeholder(editor.isFocused, editor.getHTML()); } return "Press '/' for commands..."; diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index 3c36ed11c..1f1c5f706 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -31,7 +31,7 @@ interface IDocumentEditor { suggestions: () => Promise; }; tabIndex?: number; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); } const DocumentEditor = (props: IDocumentEditor) => { diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx index 71846eca7..fe9453110 100644 --- a/packages/editor/lite-text-editor/src/ui/index.tsx +++ b/packages/editor/lite-text-editor/src/ui/index.tsx @@ -32,7 +32,7 @@ export interface ILiteTextEditor { suggestions?: () => Promise; }; tabIndex?: number; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); } const LiteTextEditor = (props: ILiteTextEditor) => { diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx index e82615b95..0cb32e543 100644 --- a/packages/editor/rich-text-editor/src/ui/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/index.tsx @@ -35,7 +35,7 @@ export type IRichTextEditor = { highlights: () => Promise; suggestions: () => Promise; }; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); tabIndex?: number; }; diff --git a/packages/ui/src/dropdowns/context-menu/index.ts b/packages/ui/src/dropdowns/context-menu/index.ts new file mode 100644 index 000000000..9665324ca --- /dev/null +++ b/packages/ui/src/dropdowns/context-menu/index.ts @@ -0,0 +1,2 @@ +export * from "./item"; +export * from "./root"; diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx new file mode 100644 index 000000000..99ef790e3 --- /dev/null +++ b/packages/ui/src/dropdowns/context-menu/item.tsx @@ -0,0 +1,54 @@ +import React from "react"; +// helpers +import { cn } from "../../../helpers"; +// types +import { TContextMenuItem } from "./root"; + +type ContextMenuItemProps = { + handleActiveItem: () => void; + handleClose: () => void; + isActive: boolean; + item: TContextMenuItem; +}; + +export const ContextMenuItem: React.FC = (props) => { + const { handleActiveItem, handleClose, isActive, item } = props; + + if (item.shouldRender === false) return null; + + return ( + + ); +}; diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx new file mode 100644 index 000000000..47a52b8c2 --- /dev/null +++ b/packages/ui/src/dropdowns/context-menu/root.tsx @@ -0,0 +1,157 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom"; +// components +import { ContextMenuItem } from "./item"; +// helpers +import { cn } from "../../../helpers"; +// hooks +import useOutsideClickDetector from "../../hooks/use-outside-click-detector"; + +export type TContextMenuItem = { + key: string; + title: string; + description?: string; + icon?: React.FC; + action: () => void; + shouldRender?: boolean; + closeOnClick?: boolean; + disabled?: boolean; + className?: string; + iconClassName?: string; +}; + +type ContextMenuProps = { + parentRef: React.RefObject; + items: TContextMenuItem[]; +}; + +const ContextMenuWithoutPortal: React.FC = (props) => { + const { parentRef, items } = props; + // states + const [isOpen, setIsOpen] = useState(false); + const [position, setPosition] = useState({ + x: 0, + y: 0, + }); + const [activeItemIndex, setActiveItemIndex] = useState(0); + // refs + const contextMenuRef = useRef(null); + // derived values + const renderedItems = items.filter((item) => item.shouldRender !== false); + + const handleClose = () => { + setIsOpen(false); + setActiveItemIndex(0); + }; + + // calculate position of context menu + useEffect(() => { + const parentElement = parentRef.current; + const contextMenu = contextMenuRef.current; + if (!parentElement || !contextMenu) return; + + const handleContextMenu = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + + const contextMenuWidth = contextMenu.clientWidth; + const contextMenuHeight = contextMenu.clientHeight; + + const clickX = e?.pageX || 0; + const clickY = e?.pageY || 0; + + // check if there's enough space at the bottom, otherwise show at the top + let top = clickY; + if (clickY + contextMenuHeight > window.innerHeight) top = clickY - contextMenuHeight; + + // check if there's enough space on the right, otherwise show on the left + let left = clickX; + if (clickX + contextMenuWidth > window.innerWidth) left = clickX - contextMenuWidth; + + setPosition({ x: left, y: top }); + setIsOpen(true); + }; + + const hideContextMenu = (e: KeyboardEvent) => { + if (isOpen && e.key === "Escape") handleClose(); + }; + + parentElement.addEventListener("contextmenu", handleContextMenu); + window.addEventListener("keydown", hideContextMenu); + + return () => { + parentElement.removeEventListener("contextmenu", handleContextMenu); + window.removeEventListener("keydown", hideContextMenu); + }; + }, [contextMenuRef, isOpen, parentRef, setIsOpen, setPosition]); + + // handle keyboard navigation + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (!isOpen) return; + + if (e.key === "ArrowDown") { + e.preventDefault(); + setActiveItemIndex((prev) => (prev + 1) % renderedItems.length); + } + if (e.key === "ArrowUp") { + e.preventDefault(); + setActiveItemIndex((prev) => (prev - 1 + renderedItems.length) % renderedItems.length); + } + if (e.key === "Enter") { + e.preventDefault(); + const item = renderedItems[activeItemIndex]; + if (!item.disabled) { + renderedItems[activeItemIndex].action(); + if (item.closeOnClick !== false) handleClose(); + } + } + }; + + window.addEventListener("keydown", handleKeyDown); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [activeItemIndex, isOpen, renderedItems, setIsOpen]); + + // close on clicking outside + useOutsideClickDetector(contextMenuRef, handleClose); + + return ( +
+
+ {renderedItems.map((item, index) => ( + setActiveItemIndex(index)} + handleClose={handleClose} + isActive={index === activeItemIndex} + item={item} + /> + ))} +
+
+ ); +}; + +export const ContextMenu: React.FC = (props) => { + let contextMenu = ; + const portal = document.querySelector("#context-menu-portal"); + if (portal) contextMenu = ReactDOM.createPortal(contextMenu, portal); + return contextMenu; +}; diff --git a/packages/ui/src/dropdowns/index.ts b/packages/ui/src/dropdowns/index.ts index 0ad9cbb22..d77eac129 100644 --- a/packages/ui/src/dropdowns/index.ts +++ b/packages/ui/src/dropdowns/index.ts @@ -1,3 +1,4 @@ +export * from "./context-menu"; export * from "./custom-menu"; export * from "./custom-select"; export * from "./custom-search-select"; diff --git a/space/pages/_document.tsx b/space/pages/_document.tsx index bf83a722c..ae4455438 100644 --- a/space/pages/_document.tsx +++ b/space/pages/_document.tsx @@ -6,6 +6,7 @@ class MyDocument extends Document { +
diff --git a/web/components/core/list/index.ts b/web/components/core/list/index.ts new file mode 100644 index 000000000..d5489c45e --- /dev/null +++ b/web/components/core/list/index.ts @@ -0,0 +1,2 @@ +export * from "./list-item"; +export * from "./list-root"; diff --git a/web/components/core/list/list-item.tsx b/web/components/core/list/list-item.tsx new file mode 100644 index 000000000..ae32c9b31 --- /dev/null +++ b/web/components/core/list/list-item.tsx @@ -0,0 +1,56 @@ +import React, { FC } from "react"; +import Link from "next/link"; +// ui +import { Tooltip } from "@plane/ui"; + +interface IListItemProps { + title: string; + itemLink: string; + onItemClick?: (e: React.MouseEvent) => void; + prependTitleElement?: JSX.Element; + appendTitleElement?: JSX.Element; + actionableItems?: JSX.Element; + isMobile?: boolean; + parentRef: React.RefObject; +} + +export const ListItem: FC = (props) => { + const { + title, + prependTitleElement, + appendTitleElement, + actionableItems, + itemLink, + onItemClick, + isMobile = false, + parentRef, + } = props; + + return ( +
+ +
+
+
+
+ {prependTitleElement && {prependTitleElement}} + + {title} + +
+ {appendTitleElement && {appendTitleElement}} +
+
+ +
+ + {actionableItems && ( +
+
+ {actionableItems} +
+
+ )} +
+ ); +}; diff --git a/web/components/core/list/list-root.tsx b/web/components/core/list/list-root.tsx new file mode 100644 index 000000000..c9c465f27 --- /dev/null +++ b/web/components/core/list/list-root.tsx @@ -0,0 +1,10 @@ +import React, { FC } from "react"; + +interface IListContainer { + children: React.ReactNode; +} + +export const ListLayout: FC = (props) => { + const { children } = props; + return
{children}
; +}; diff --git a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx index d928b5fbb..9b63b0f6f 100644 --- a/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx +++ b/web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx @@ -1,3 +1,4 @@ +import { useRef } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -20,6 +21,8 @@ type Props = { export const UpcomingCycleListItem: React.FC = observer((props) => { const { cycleId } = props; + // refs + const parentRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -90,6 +93,7 @@ export const UpcomingCycleListItem: React.FC = observer((props) => { return ( @@ -123,6 +127,7 @@ export const UpcomingCycleListItem: React.FC = observer((props) => { {workspaceSlug && projectId && ( = observer((props) => { const { cycleId, workspaceSlug, projectId } = props; + // refs + const parentRef = useRef(null); // router const router = useRouter(); // store @@ -150,7 +152,7 @@ export const CyclesBoardCard: FC = observer((props) => { return (
- +
@@ -246,7 +248,12 @@ export const CyclesBoardCard: FC = observer((props) => { /> )} - +
); diff --git a/web/components/cycles/cycles-view-header.tsx b/web/components/cycles/cycles-view-header.tsx index 50cf6df97..97cf18cf9 100644 --- a/web/components/cycles/cycles-view-header.tsx +++ b/web/components/cycles/cycles-view-header.tsx @@ -76,7 +76,7 @@ export const CyclesViewHeader: React.FC = observer((props) => { }; return ( -
+
{CYCLE_TABS_LIST.map((tab) => ( ; +}; + +export const CycleListItemAction: FC = observer((props) => { + const { workspaceSlug, projectId, cycleId, cycleDetails, parentRef } = props; + // hooks + const { isMobile } = usePlatformOS(); + // store hooks + const { addCycleToFavorites, removeCycleFromFavorites } = useCycle(); + const { captureEvent } = useEventTracker(); + const { + membership: { currentProjectRole }, + } = useUser(); + const { getUserDetails } = useMember(); + + // derived values + const endDate = getDate(cycleDetails.end_date); + const startDate = getDate(cycleDetails.start_date); + const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft"; + const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; + const renderDate = cycleDetails.start_date || cycleDetails.end_date; + const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); + const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0; + + // handlers + const handleAddToFavorites = (e: MouseEvent) => { + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then( + () => { + captureEvent(CYCLE_FAVORITED, { + cycle_id: cycleId, + element: "List layout", + state: "SUCCESS", + }); + } + ); + + setPromiseToast(addToFavoritePromise, { + loading: "Adding cycle to favorites...", + success: { + title: "Success!", + message: () => "Cycle added to favorites.", + }, + error: { + title: "Error!", + message: () => "Couldn't add the cycle to favorites. Please try again.", + }, + }); + }; + + const handleRemoveFromFavorites = (e: MouseEvent) => { + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + const removeFromFavoritePromise = removeCycleFromFavorites( + workspaceSlug?.toString(), + projectId.toString(), + cycleId + ).then(() => { + captureEvent(CYCLE_UNFAVORITED, { + cycle_id: cycleId, + element: "List layout", + state: "SUCCESS", + }); + }); + + setPromiseToast(removeFromFavoritePromise, { + loading: "Removing cycle from favorites...", + success: { + title: "Success!", + message: () => "Cycle removed from favorites.", + }, + error: { + title: "Error!", + message: () => "Couldn't remove the cycle from favorites. Please try again.", + }, + }); + }; + + return ( + <> +
+ {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`} +
+ + {currentCycle && ( +
+ {currentCycle.value === "current" + ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left` + : `${currentCycle.label}`} +
+ )} + + +
+ {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? ( + + {cycleDetails.assignee_ids?.map((assignee_id) => { + const member = getUserDetails(assignee_id); + return ; + })} + + ) : ( + + + + )} +
+ + + {isEditingAllowed && !cycleDetails.archived_at && ( + { + if (cycleDetails.is_favorite) handleRemoveFromFavorites(e); + else handleAddToFavorites(e); + }} + selected={!!cycleDetails.is_favorite} + /> + )} + + + ); +}); diff --git a/web/components/cycles/list/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx index a6262dfe7..1f70d79c2 100644 --- a/web/components/cycles/list/cycles-list-item.tsx +++ b/web/components/cycles/list/cycles-list-item.tsx @@ -1,24 +1,17 @@ -import { FC, MouseEvent } from "react"; +import { FC, MouseEvent, useRef } from "react"; import { observer } from "mobx-react"; -import Link from "next/link"; import { useRouter } from "next/router"; // icons -import { Check, Info, User2 } from "lucide-react"; +import { Check, Info } from "lucide-react"; // types import type { TCycleGroups } from "@plane/types"; // ui -import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui"; +import { CircularProgressIndicator } from "@plane/ui"; // components -import { FavoriteStar } from "@/components/core"; -import { CycleQuickActions } from "@/components/cycles"; -// constants -import { CYCLE_STATUS } from "@/constants/cycle"; -import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker"; -import { EUserProjectRoles } from "@/constants/project"; -// helpers -import { findHowManyDaysLeft, getDate, renderFormattedDate } from "@/helpers/date-time.helper"; +import { ListItem } from "@/components/core/list"; +import { CycleListItemAction } from "@/components/cycles/list"; // hooks -import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store"; +import { useCycle } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; type TCyclesListItem = { @@ -29,79 +22,41 @@ type TCyclesListItem = { handleRemoveFromFavorites?: () => void; workspaceSlug: string; projectId: string; - isArchived?: boolean; }; export const CyclesListItem: FC = observer((props) => { - const { cycleId, workspaceSlug, projectId, isArchived } = props; + const { cycleId, workspaceSlug, projectId } = props; + // refs + const parentRef = useRef(null); // router const router = useRouter(); // hooks const { isMobile } = usePlatformOS(); // store hooks - const { captureEvent } = useEventTracker(); - const { - membership: { currentProjectRole }, - } = useUser(); - const { getCycleById, addCycleToFavorites, removeCycleFromFavorites } = useCycle(); - const { getUserDetails } = useMember(); + const { getCycleById } = useCycle(); - const handleAddToFavorites = (e: MouseEvent) => { - e.preventDefault(); - if (!workspaceSlug || !projectId) return; + // derived values + const cycleDetails = getCycleById(cycleId); - const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then( - () => { - captureEvent(CYCLE_FAVORITED, { - cycle_id: cycleId, - element: "List layout", - state: "SUCCESS", - }); - } - ); + if (!cycleDetails) return null; - setPromiseToast(addToFavoritePromise, { - loading: "Adding cycle to favorites...", - success: { - title: "Success!", - message: () => "Cycle added to favorites.", - }, - error: { - title: "Error!", - message: () => "Couldn't add the cycle to favorites. Please try again.", - }, - }); - }; + // computed + // TODO: change this logic once backend fix the response + const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft"; + const isCompleted = cycleStatus === "completed"; - const handleRemoveFromFavorites = (e: MouseEvent) => { - e.preventDefault(); - if (!workspaceSlug || !projectId) return; + const cycleTotalIssues = + cycleDetails.backlog_issues + + cycleDetails.unstarted_issues + + cycleDetails.started_issues + + cycleDetails.completed_issues + + cycleDetails.cancelled_issues; - const removeFromFavoritePromise = removeCycleFromFavorites( - workspaceSlug?.toString(), - projectId.toString(), - cycleId - ).then(() => { - captureEvent(CYCLE_UNFAVORITED, { - cycle_id: cycleId, - element: "List layout", - state: "SUCCESS", - }); - }); + const completionPercentage = (cycleDetails.completed_issues / cycleTotalIssues) * 100; - setPromiseToast(removeFromFavoritePromise, { - loading: "Removing cycle from favorites...", - success: { - title: "Success!", - message: () => "Cycle removed from favorites.", - }, - error: { - title: "Error!", - message: () => "Couldn't remove the cycle from favorites. Please try again.", - }, - }); - }; + const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); + // handlers const openCycleOverview = (e: MouseEvent) => { const { query } = router; e.preventDefault(); @@ -121,139 +76,47 @@ export const CyclesListItem: FC = observer((props) => { } }; - const cycleDetails = getCycleById(cycleId); - - if (!cycleDetails) return null; - - // computed - // 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 = getDate(cycleDetails.end_date); - const startDate = getDate(cycleDetails.start_date); - - const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; - - const cycleTotalIssues = - cycleDetails.backlog_issues + - cycleDetails.unstarted_issues + - cycleDetails.started_issues + - cycleDetails.completed_issues + - cycleDetails.cancelled_issues; - - const renderDate = cycleDetails.start_date || cycleDetails.end_date; - - // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); - - const completionPercentage = (cycleDetails.completed_issues / cycleTotalIssues) * 100; - - const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); - - const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); - - const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0; - return ( -
- { - if (isArchived) { - openCycleOverview(e); - } - }} - > -
-
-
-
- - {isCompleted ? ( - progress === 100 ? ( - - ) : ( - {`!`} - ) - ) : progress === 100 ? ( - - ) : ( - {`${progress}%`} - )} - -
- -
- - - - {cycleDetails.name} - - -
- - -
-
- {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`} -
-
- -
- -
-
- {currentCycle && ( -
- {currentCycle.value === "current" - ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left` - : `${currentCycle.label}`} -
+ { + if (cycleDetails.archived_at) openCycleOverview(e); + }} + prependTitleElement={ + + {isCompleted ? ( + progress === 100 ? ( + + ) : ( + {`!`} + ) + ) : progress === 100 ? ( + + ) : ( + {`${progress}%`} )} - -
- -
- {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? ( - - {cycleDetails.assignee_ids?.map((assignee_id) => { - const member = getUserDetails(assignee_id); - return ; - })} - - ) : ( - - - - )} -
- - - {isEditingAllowed && !isArchived && ( - { - if (cycleDetails.is_favorite) handleRemoveFromFavorites(e); - else handleAddToFavorites(e); - }} - selected={!!cycleDetails.is_favorite} - /> - )} - -
-
-
-
+ + } + appendTitleElement={ + + } + actionableItems={ + + } + isMobile={isMobile} + parentRef={parentRef} + /> ); }); diff --git a/web/components/cycles/list/cycles-list-map.tsx b/web/components/cycles/list/cycles-list-map.tsx index 7a99f5ab7..004c66fca 100644 --- a/web/components/cycles/list/cycles-list-map.tsx +++ b/web/components/cycles/list/cycles-list-map.tsx @@ -5,22 +5,15 @@ type Props = { cycleIds: string[]; projectId: string; workspaceSlug: string; - isArchived?: boolean; }; export const CyclesListMap: React.FC = (props) => { - const { cycleIds, projectId, workspaceSlug, isArchived } = props; + const { cycleIds, projectId, workspaceSlug } = props; return ( <> {cycleIds.map((cycleId) => ( - + ))} ); diff --git a/web/components/cycles/list/index.ts b/web/components/cycles/list/index.ts index 46a3557d7..5eda32861 100644 --- a/web/components/cycles/list/index.ts +++ b/web/components/cycles/list/index.ts @@ -1,3 +1,4 @@ export * from "./cycles-list-item"; export * from "./cycles-list-map"; export * from "./root"; +export * from "./cycle-list-item-action"; diff --git a/web/components/cycles/list/root.tsx b/web/components/cycles/list/root.tsx index 622ca1ae0..34e34acf0 100644 --- a/web/components/cycles/list/root.tsx +++ b/web/components/cycles/list/root.tsx @@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite"; import { ChevronRight } from "lucide-react"; import { Disclosure } from "@headlessui/react"; // components +import { ListLayout } from "@/components/core/list"; import { CyclePeekOverview, CyclesListMap } from "@/components/cycles"; // helpers import { cn } from "@/helpers/common.helper"; @@ -21,12 +22,11 @@ export const CyclesList: FC = observer((props) => { return (
-
+ {completedCycleIds.length !== 0 && ( @@ -43,16 +43,11 @@ export const CyclesList: FC = observer((props) => { )} - + )} -
+
diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx index 9ba012cc4..194bdd068 100644 --- a/web/components/cycles/quick-actions.tsx +++ b/web/components/cycles/quick-actions.tsx @@ -2,27 +2,28 @@ import { useState } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; // icons -import { ArchiveRestoreIcon, LinkIcon, Pencil, Trash2 } from "lucide-react"; +import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react"; // ui -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components import { ArchiveCycleModal, CycleCreateUpdateModal, CycleDeleteModal } from "@/components/cycles"; // constants import { EUserProjectRoles } from "@/constants/project"; // helpers +import { cn } from "@/helpers/common.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useCycle, useEventTracker, useUser } from "@/hooks/store"; type Props = { + parentRef: React.RefObject; cycleId: string; projectId: string; workspaceSlug: string; - isArchived?: boolean; }; export const CycleQuickActions: React.FC = observer((props) => { - const { cycleId, projectId, workspaceSlug, isArchived } = props; + const { parentRef, cycleId, projectId, workspaceSlug } = props; // router const router = useRouter(); // states @@ -37,40 +38,31 @@ export const CycleQuickActions: React.FC = observer((props) => { const { getCycleById, restoreCycle } = useCycle(); // derived values const cycleDetails = getCycleById(cycleId); + const isArchived = !!cycleDetails?.archived_at; const isCompleted = cycleDetails?.status?.toLowerCase() === "completed"; // auth const isEditingAllowed = !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER; - const handleCopyText = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`).then(() => { + const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`; + const handleCopyText = () => + copyUrlToClipboard(cycleLink).then(() => { setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "Cycle link copied to clipboard.", }); }); - }; + const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank"); - const handleEditCycle = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleEditCycle = () => { setTrackElement("Cycles page list layout"); setUpdateModal(true); }; - const handleArchiveCycle = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - setArchiveCycleModal(true); - }; + const handleArchiveCycle = () => setArchiveCycleModal(true); - const handleRestoreCycle = async (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleRestoreCycle = async () => await restoreCycle(workspaceSlug, projectId, cycleId) .then(() => { setToast({ @@ -87,15 +79,61 @@ export const CycleQuickActions: React.FC = observer((props) => { message: "Cycle could not be restored. Please try again.", }) ); - }; - const handleDeleteCycle = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleDeleteCycle = () => { setTrackElement("Cycles page list layout"); setDeleteModal(true); }; + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: handleEditCycle, + shouldRender: isEditingAllowed && !isCompleted && !isArchived, + }, + { + key: "open-new-tab", + action: handleOpenInNewTab, + title: "Open in new tab", + icon: ExternalLink, + shouldRender: !isArchived, + }, + { + key: "copy-link", + action: handleCopyText, + title: "Copy link", + icon: LinkIcon, + shouldRender: !isArchived, + }, + { + key: "archive", + action: handleArchiveCycle, + title: "Archive", + description: isCompleted ? undefined : "Only completed cycle can\nbe archived.", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + shouldRender: isEditingAllowed && !isArchived, + disabled: !isCompleted, + }, + { + key: "restore", + action: handleRestoreCycle, + title: "Restore", + icon: ArchiveRestoreIcon, + shouldRender: isEditingAllowed && isArchived, + }, + { + key: "delete", + action: handleDeleteCycle, + title: "Delete", + icon: Trash2, + shouldRender: isEditingAllowed && !isCompleted && !isArchived, + }, + ]; + return ( <> {cycleDetails && ( @@ -123,60 +161,42 @@ export const CycleQuickActions: React.FC = observer((props) => { />
)} - - {!isCompleted && isEditingAllowed && !isArchived && ( - - - - Edit cycle - - - )} - {isEditingAllowed && !isArchived && ( - - {isCompleted ? ( -
- - Archive cycle -
- ) : ( -
- -
-

Archive cycle

-

- Only completed cycle
can be archived. + + + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isEditingAllowed && isArchived && ( - - - - Restore cycle - - - )} - {!isArchived && ( - - - - Copy cycle link - - - )} -
- {!isCompleted && isEditingAllowed && ( - - - - Delete cycle - - - )} + + ); + })} ); diff --git a/web/components/gantt-chart/blocks/block.tsx b/web/components/gantt-chart/blocks/block.tsx index e0e464cf0..0897b6b39 100644 --- a/web/components/gantt-chart/blocks/block.tsx +++ b/web/components/gantt-chart/blocks/block.tsx @@ -36,7 +36,7 @@ export const GanttChartBlock: React.FC = observer((props) => { } = props; // store hooks const { updateActiveBlockId, isBlockActive } = useGanttChart(); - const { peekIssue } = useIssueDetail(); + const { getIsIssuePeeked } = useIssueDetail(); const isBlockVisibleOnChart = block.start_date && block.target_date; @@ -81,8 +81,9 @@ export const GanttChartBlock: React.FC = observer((props) => {
updateActiveBlockId(block.id)} onMouseLeave={() => updateActiveBlockId(null)} diff --git a/web/components/gantt-chart/sidebar/issues/block.tsx b/web/components/gantt-chart/sidebar/issues/block.tsx index ae670941d..bd84af92c 100644 --- a/web/components/gantt-chart/sidebar/issues/block.tsx +++ b/web/components/gantt-chart/sidebar/issues/block.tsx @@ -25,7 +25,7 @@ export const IssuesSidebarBlock: React.FC = observer((props) => { const { block, enableReorder, provided, snapshot } = props; // store hooks const { updateActiveBlockId, isBlockActive } = useGanttChart(); - const { peekIssue } = useIssueDetail(); + const { getIsIssuePeeked } = useIssueDetail(); const duration = findTotalDaysInRange(block.start_date, block.target_date); @@ -33,8 +33,9 @@ export const IssuesSidebarBlock: React.FC = observer((props) => {
updateActiveBlockId(block.id)} onMouseLeave={() => updateActiveBlockId(null)} diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx index 40af27b38..e5c88d3f5 100644 --- a/web/components/headers/cycles.tsx +++ b/web/components/headers/cycles.tsx @@ -1,15 +1,16 @@ import { FC } from "react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; +// icons import { Plus } from "lucide-react"; -// hooks // ui import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui"; -// helpers // components import { BreadcrumbLink } from "@/components/common"; import { ProjectLogo } from "@/components/project"; +// constants import { EUserProjectRoles } from "@/constants/project"; +// hooks import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; export const CyclesHeader: FC = observer(() => { @@ -28,52 +29,48 @@ export const CyclesHeader: FC = observer(() => { currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); return ( -
-
-
-
- - - - - ) - } - /> - } - /> - } /> - } - /> - -
+
+
+
+ + + + + ) + } + /> + } + /> + } />} + /> +
- {canUserCreateCycle && ( -
- -
- )}
+ {canUserCreateCycle && ( +
+ +
+ )}
); }); diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx index 1b76b4e99..bb27f1a90 100644 --- a/web/components/headers/modules-list.tsx +++ b/web/components/headers/modules-list.tsx @@ -1,32 +1,21 @@ -import { useCallback, useRef, useState } from "react"; -import { observer } from "mobx-react"; +import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { ListFilter, Plus, Search, X } from "lucide-react"; -// types -import { TModuleFilters } from "@plane/types"; +// icons +import { Plus } from "lucide-react"; // ui -import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui"; +import { Breadcrumbs, Button, DiceIcon } from "@plane/ui"; // components import { BreadcrumbLink } from "@/components/common"; -import { FiltersDropdown } from "@/components/issues"; -import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules"; import { ProjectLogo } from "@/components/project"; // constants -import { MODULE_VIEW_LAYOUTS } from "@/constants/module"; import { EUserProjectRoles } from "@/constants/project"; -// helpers -import { cn } from "@/helpers/common.helper"; // hooks -import { useEventTracker, useMember, useModuleFilter, useProject, useUser, useCommandPalette } from "@/hooks/store"; -import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; -import { usePlatformOS } from "@/hooks/use-platform-os"; +import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store"; export const ModulesListHeader: React.FC = observer(() => { - // refs - const inputRef = useRef(null); // router const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; // store hooks const { toggleCreateModuleModal } = useCommandPalette(); const { setTrackElement } = useEventTracker(); @@ -34,54 +23,6 @@ export const ModulesListHeader: React.FC = observer(() => { membership: { currentProjectRole }, } = useUser(); const { currentProjectDetails } = useProject(); - const { isMobile } = usePlatformOS(); - const { - workspace: { workspaceMemberIds }, - } = useMember(); - const { - currentProjectDisplayFilters: displayFilters, - currentProjectFilters: filters, - searchQuery, - updateDisplayFilters, - updateFilters, - updateSearchQuery, - } = useModuleFilter(); - // states - const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false); - // outside click detector hook - useOutsideClickDetector(inputRef, () => { - if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false); - }); - - const handleFilters = useCallback( - (key: keyof TModuleFilters, value: string | string[]) => { - if (!projectId) return; - const newValues = filters?.[key] ?? []; - - if (Array.isArray(value)) - value.forEach((val) => { - if (!newValues.includes(val)) newValues.push(val); - else newValues.splice(newValues.indexOf(val), 1); - }); - else { - if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); - else newValues.push(value); - } - - updateFilters(projectId.toString(), { [key]: newValues }); - }, - [filters, projectId, updateFilters] - ); - - const handleInputKeyDown = (e: React.KeyboardEvent) => { - if (e.key === "Escape") { - if (searchQuery && searchQuery.trim() !== "") updateSearchQuery(""); - else { - setIsSearchOpen(false); - inputRef.current?.blur(); - } - } - }; // auth const canUserCreateModule = @@ -116,97 +57,6 @@ export const ModulesListHeader: React.FC = observer(() => {
-
- {!isSearchOpen && ( - - )} -
- - updateSearchQuery(e.target.value)} - onKeyDown={handleInputKeyDown} - /> - {isSearchOpen && ( - - )} -
-
-
- {MODULE_VIEW_LAYOUTS.map((layout) => ( - - - - ))} -
- { - if (!projectId || val === displayFilters?.order_by) return; - updateDisplayFilters(projectId.toString(), { - order_by: val, - }); - }} - /> - } title="Filters" placement="bottom-end"> - { - if (!projectId) return; - updateDisplayFilters(projectId.toString(), val); - }} - handleFiltersUpdate={handleFilters} - memberIds={workspaceMemberIds ?? undefined} - /> - {canUserCreateModule && ( - - + + {issueCount} + + + ) : null} +
+ {currentProjectDetails?.is_deployed && deployUrl && ( + + + Public + + )}
+
+ handleLayoutChange(layout)} + selectedLayout={activeLayout} + /> + + + + + + +
+ + {canUserCreateIssue && ( + <> + + + + )}
); diff --git a/web/components/inbox/content/issue-root.tsx b/web/components/inbox/content/issue-root.tsx index b9d581ee5..ce1625141 100644 --- a/web/components/inbox/content/issue-root.tsx +++ b/web/components/inbox/content/issue-root.tsx @@ -26,13 +26,11 @@ type Props = { isEditable: boolean; isSubmitting: "submitting" | "submitted" | "saved"; setIsSubmitting: Dispatch>; - swrIssueDescription: string | undefined; }; export const InboxIssueMainContent: React.FC = observer((props) => { const router = useRouter(); - const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting, swrIssueDescription } = - props; + const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props; // hooks const { data: currentUser } = useUser(); const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting"); @@ -137,7 +135,7 @@ export const InboxIssueMainContent: React.FC = observer((props) => { workspaceSlug={workspaceSlug} projectId={issue.project_id} issueId={issue.id} - swrIssueDescription={swrIssueDescription} + swrIssueDescription={null} initialValue={issue.description_html ?? "

"} disabled={!isEditable} issueOperations={issueOperations} diff --git a/web/components/inbox/content/root.tsx b/web/components/inbox/content/root.tsx index 1ffe35a46..719b1c19f 100644 --- a/web/components/inbox/content/root.tsx +++ b/web/components/inbox/content/root.tsx @@ -24,14 +24,13 @@ export const InboxContentRoot: FC = observer((props) => { membership: { currentProjectRole }, } = useUser(); - const { data: swrIssueDetails } = useSWR( + useSWR( workspaceSlug && projectId && inboxIssueId ? `PROJECT_INBOX_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${inboxIssueId}` : null, workspaceSlug && projectId && inboxIssueId ? () => fetchInboxIssueById(workspaceSlug, projectId, inboxIssueId) - : null, - { revalidateOnFocus: true } + : null ); const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; @@ -61,7 +60,6 @@ export const InboxContentRoot: FC = observer((props) => { isEditable={isEditable && !isIssueDisabled} isSubmitting={isSubmitting} setIsSubmitting={setIsSubmitting} - swrIssueDescription={swrIssueDetails?.issue.description_html} />
diff --git a/web/components/inbox/modals/create-edit-modal/create-root.tsx b/web/components/inbox/modals/create-edit-modal/create-root.tsx index de8e0d3ce..6c5ee3ce2 100644 --- a/web/components/inbox/modals/create-edit-modal/create-root.tsx +++ b/web/components/inbox/modals/create-edit-modal/create-root.tsx @@ -136,9 +136,12 @@ export const InboxIssueCreateRoot: FC = observer((props) />
-
setCreateMore((prevData) => !prevData)}> +
setCreateMore((prevData) => !prevData)} + > + {}} size="sm" /> Create more - {}} size="md" />
); diff --git a/web/components/inbox/sidebar/inbox-list-item.tsx b/web/components/inbox/sidebar/inbox-list-item.tsx index 21ac42d1e..593d114d1 100644 --- a/web/components/inbox/sidebar/inbox-list-item.tsx +++ b/web/components/inbox/sidebar/inbox-list-item.tsx @@ -50,7 +50,7 @@ export const InboxIssueListItem: FC = observer((props)
diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx index 9521e6571..f33cb3c2f 100644 --- a/web/components/inbox/sidebar/root.tsx +++ b/web/components/inbox/sidebar/root.tsx @@ -65,14 +65,14 @@ export const InboxSidebar: FC = observer((props) => { }); return ( -
+
-
+
{tabNavigationOptions.map((option) => (
{ diff --git a/web/components/issues/description-input.tsx b/web/components/issues/description-input.tsx index aededa28f..b8cfbd582 100644 --- a/web/components/issues/description-input.tsx +++ b/web/components/issues/description-input.tsx @@ -9,6 +9,8 @@ import { Loader } from "@plane/ui"; // components import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor"; import { TIssueOperations } from "@/components/issues/issue-detail"; +// helpers +import { getDescriptionPlaceholder } from "@/helpers/issue.helper"; // hooks import { useWorkspace } from "@/hooks/store"; @@ -19,7 +21,7 @@ export type IssueDescriptionInputProps = { initialValue: string | undefined; disabled?: boolean; issueOperations: TIssueOperations; - placeholder?: string | ((isFocused: boolean) => string); + placeholder?: string | ((isFocused: boolean, value: string) => string); setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void; swrIssueDescription: string | null | undefined; }; @@ -106,12 +108,7 @@ export const IssueDescriptionInput: FC = observer((p debouncedFormSave(); }} placeholder={ - placeholder - ? placeholder - : (isFocused) => { - if (isFocused) return "Press '/' for commands..."; - else return "Click to add description"; - } + placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value) } /> ) : ( 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 29e0512ba..9e003977f 100644 --- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx +++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx @@ -89,8 +89,9 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => { groupedIssueIds={groupedIssueIds} layout={displayFilters?.calendar?.layout} showWeekends={displayFilters?.calendar?.show_weekends ?? false} - quickActions={(issue, customActionButton, placement) => ( + quickActions={({ issue, parentRef, customActionButton, placement }) => ( removeIssue(issue.project_id, issue.id)} diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx index 0805dfb61..c4110bc13 100644 --- a/web/components/issues/issue-layouts/calendar/calendar.tsx +++ b/web/components/issues/issue-layouts/calendar/calendar.tsx @@ -1,5 +1,4 @@ import { useState } from "react"; -import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; // types import type { @@ -31,7 +30,7 @@ import { ICycleIssuesFilter } from "@/store/issue/cycle"; import { IModuleIssuesFilter } from "@/store/issue/module"; import { IProjectIssuesFilter } from "@/store/issue/project"; import { IProjectViewIssuesFilter } from "@/store/issue/project-views"; -// types +import { TRenderQuickActions } from "../list/list-view-types"; import type { ICalendarWeek } from "./types"; type Props = { @@ -40,7 +39,7 @@ type Props = { groupedIssueIds: TGroupedIssues; layout: "month" | "week" | undefined; showWeekends: boolean; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; quickAddCallback?: ( workspaceSlug: string, projectId: string, diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx index 3fd96d00e..8f162869a 100644 --- a/web/components/issues/issue-layouts/calendar/day-tile.tsx +++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx @@ -1,5 +1,4 @@ import { Droppable } from "@hello-pangea/dnd"; -import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; // types import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types"; @@ -15,13 +14,14 @@ import { ICycleIssuesFilter } from "@/store/issue/cycle"; import { IModuleIssuesFilter } from "@/store/issue/module"; import { IProjectIssuesFilter } from "@/store/issue/project"; import { IProjectViewIssuesFilter } from "@/store/issue/project-views"; +import { TRenderQuickActions } from "../list/list-view-types"; type Props = { issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter; date: ICalendarDate; issues: TIssueMap | undefined; groupedIssueIds: TGroupedIssues; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; quickAddCallback?: ( diff --git a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx index f7fd7ab52..efedcf50b 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx @@ -1,14 +1,14 @@ import React from "react"; -import { Placement } from "@popperjs/core"; // components -import { TIssue, TIssueMap } from "@plane/types"; +import { TIssueMap } from "@plane/types"; import { CalendarIssueBlock } from "@/components/issues"; +import { TRenderQuickActions } from "../list/list-view-types"; // types type Props = { issues: TIssueMap | undefined; issueId: string; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; isDragging?: boolean; }; diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx index 26081dadc..01d7615f3 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx @@ -1,5 +1,4 @@ import { useState, useRef } from "react"; -import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; import { MoreHorizontal } from "lucide-react"; import { TIssue } from "@plane/types"; @@ -12,25 +11,27 @@ import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; // helpers // types import { usePlatformOS } from "@/hooks/use-platform-os"; +import { TRenderQuickActions } from "../list/list-view-types"; type Props = { issue: TIssue; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; isDragging?: boolean; }; export const CalendarIssueBlock: React.FC = observer((props) => { const { issue, quickActions, isDragging = false } = props; + // states + const [isMenuActive, setIsMenuActive] = useState(false); + // refs + const blockRef = useRef(null); + const menuActionRef = useRef(null); // hooks const { workspaceSlug, projectId } = useAppRouter(); const { getProjectIdentifierById } = useProject(); const { getProjectStates } = useProjectState(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { isMobile } = usePlatformOS(); - // states - const [isMenuActive, setIsMenuActive] = useState(false); - - const menuActionRef = useRef(null); const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || ""; @@ -39,7 +40,7 @@ export const CalendarIssueBlock: React.FC = observer((props) => { issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false)); @@ -76,14 +77,13 @@ export const CalendarIssueBlock: React.FC = observer((props) => { )}
@@ -110,7 +110,12 @@ export const CalendarIssueBlock: React.FC = observer((props) => { e.stopPropagation(); }} > - {quickActions(issue, customActionButton, placement)} + {quickActions({ + issue, + parentRef: blockRef, + customActionButton, + placement, + })}
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx index ced7991b8..86cecdf20 100644 --- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { Draggable } from "@hello-pangea/dnd"; -import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; // types import { TIssue, TIssueMap } from "@plane/types"; @@ -8,12 +7,14 @@ import { TIssue, TIssueMap } from "@plane/types"; import { CalendarQuickAddIssueForm, CalendarIssueBlockRoot } from "@/components/issues"; // helpers import { renderFormattedPayloadDate } from "@/helpers/date-time.helper"; +import { TRenderQuickActions } from "../list/list-view-types"; +// types type Props = { date: Date; issues: TIssueMap | undefined; issueIdList: string[] | null; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; isDragDisabled?: boolean; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx index 0614df240..0ac4d30b0 100644 --- a/web/components/issues/issue-layouts/calendar/week-days.tsx +++ b/web/components/issues/issue-layouts/calendar/week-days.tsx @@ -1,4 +1,3 @@ -import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types"; // components @@ -10,6 +9,7 @@ import { ICycleIssuesFilter } from "@/store/issue/cycle"; import { IModuleIssuesFilter } from "@/store/issue/module"; import { IProjectIssuesFilter } from "@/store/issue/project"; import { IProjectViewIssuesFilter } from "@/store/issue/project-views"; +import { TRenderQuickActions } from "../list/list-view-types"; import { ICalendarDate, ICalendarWeek } from "./types"; type Props = { @@ -17,7 +17,7 @@ type Props = { issues: TIssueMap | undefined; groupedIssueIds: TGroupedIssues; week: ICalendarWeek | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; + quickActions: TRenderQuickActions; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; quickAddCallback?: ( diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx index daa446032..b4b10d71b 100644 --- a/web/components/issues/issue-layouts/gantt/blocks.tsx +++ b/web/components/issues/issue-layouts/gantt/blocks.tsx @@ -18,7 +18,7 @@ export const IssueGanttBlock: React.FC = observer((props) => { const { getProjectStates } = useProjectState(); const { issue: { getIssueById }, - peekIssue, + getIsIssuePeeked, setPeekIssue, } = useIssueDetail(); // derived values @@ -30,7 +30,7 @@ export const IssueGanttBlock: React.FC = observer((props) => { workspaceSlug && issueDetails && !issueDetails.tempId && - peekIssue?.issueId !== issueDetails.id && + !getIsIssuePeeked(issueDetails.id) && setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id }); const { isMobile } = usePlatformOS(); 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 8c6cf900b..0d394cbaa 100644 --- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx +++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx @@ -4,7 +4,6 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { TIssue } from "@plane/types"; // hooks import { Spinner, TOAST_TYPE, setToast } from "@plane/ui"; import { DeleteIssueModal } from "@/components/issues"; @@ -15,7 +14,7 @@ import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUser } fr import { useIssuesActions } from "@/hooks/use-issues-actions"; // ui // types -import { IQuickActionProps } from "../list/list-view-types"; +import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types"; //components import { KanBan } from "./default"; import { KanBanSwimLanes } from "./swimlanes"; @@ -168,9 +167,10 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas }); }; - const renderQuickActions = useCallback( - (issue: TIssue, customActionButton?: React.ReactElement) => ( + const renderQuickActions: TRenderQuickActions = useCallback( + ({ issue, parentRef, customActionButton }) => ( removeIssue(issue.project_id, issue.id)} diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index 191863e38..5c1e12378 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -1,4 +1,4 @@ -import { MutableRefObject, memo, useEffect, useRef, useState } from "react"; +import { MutableRefObject, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react-lite"; @@ -11,6 +11,7 @@ import { useAppRouter, useIssueDetail, useProject, useKanbanView } from "@/hooks import { usePlatformOS } from "@/hooks/use-platform-os"; // components +import { TRenderQuickActions } from "../list/list-view-types"; import { IssueProperties } from "../properties/all-properties"; import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; // ui @@ -18,29 +19,29 @@ import { WithDisplayPropertiesHOC } from "../properties/with-display-properties- // helper interface IssueBlockProps { - peekIssueId?: string; issueId: string; issuesMap: IIssueMap; displayProperties: IIssueDisplayProperties | undefined; isDragDisabled: boolean; draggableId: string; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; canEditProperties: (projectId: string | undefined) => boolean; scrollableContainerRef?: MutableRefObject; issueIds: string[]; //DO NOT REMOVE< needed to force render for virtualization } interface IssueDetailsBlockProps { + cardRef: React.RefObject; issue: TIssue; displayProperties: IIssueDisplayProperties | undefined; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; isReadOnly: boolean; } -const KanbanIssueDetailsBlock: React.FC = observer((props: IssueDetailsBlockProps) => { - const { issue, updateIssue, quickActions, isReadOnly, displayProperties } = props; +const KanbanIssueDetailsBlock: React.FC = observer((props) => { + const { cardRef, issue, updateIssue, quickActions, isReadOnly, displayProperties } = props; // hooks const { isMobile } = usePlatformOS(); const { getProjectIdentifierById } = useProject(); @@ -61,7 +62,10 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop className="absolute -top-1 right-0 hidden group-hover/kanban-block:block" onClick={handleEventPropagation} > - {quickActions(issue)} + {quickActions({ + issue, + parentRef: cardRef, + })}
@@ -90,9 +94,8 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop ); }); -export const KanbanIssueBlock: React.FC = memo((props) => { +export const KanbanIssueBlock: React.FC = observer((props) => { const { - peekIssueId, issueId, issuesMap, displayProperties, @@ -104,17 +107,17 @@ export const KanbanIssueBlock: React.FC = memo((props) => { issueIds, } = props; + const cardRef = useRef(null); + // hooks const { workspaceSlug } = useAppRouter(); - const { peekIssue, setPeekIssue } = useIssueDetail(); - - const cardRef = useRef(null); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); const issue = issuesMap[issueId]; @@ -184,9 +187,11 @@ export const KanbanIssueBlock: React.FC = memo((props) => { ref={cardRef} className={cn( "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400", - { "hover:cursor-pointer": isDragAllowed }, - { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }, - { "bg-custom-background-80 z-[100]": isCurrentBlockDragging } + { + "hover:cursor-pointer": isDragAllowed, + "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id), + "bg-custom-background-80 z-[100]": isCurrentBlockDragging, + } )} target="_blank" onClick={() => handleIssuePeekOverview(issue)} @@ -200,6 +205,7 @@ export const KanbanIssueBlock: React.FC = memo((props) => { changingReference={issueIds} > ) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; canEditProperties: (projectId: string | undefined) => boolean; scrollableContainerRef?: MutableRefObject; } @@ -23,7 +23,6 @@ const KanbanIssueBlocksListMemo: React.FC = (props) => { sub_group_id, columnId, issuesMap, - peekIssueId, issueIds, displayProperties, isDragDisabled, @@ -47,7 +46,6 @@ const KanbanIssueBlocksListMemo: React.FC = (props) => { return ( ) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: any; enableQuickIssueCreate?: boolean; @@ -95,7 +87,6 @@ const GroupByKanBan: React.FC = observer((props) => { const cycle = useCycle(); const moduleInfo = useModule(); const projectState = useProjectState(); - const { peekIssue } = useIssueDetail(); const list = getGroupByColumns( group_by as GroupByColumnTypes, @@ -176,7 +167,6 @@ const GroupByKanBan: React.FC = observer((props) => { groupId={subList.id} issuesMap={issuesMap} issueIds={issueIds} - peekIssueId={peekIssue?.issueId ?? ""} displayProperties={displayProperties} sub_group_by={sub_group_by} group_by={group_by} @@ -208,7 +198,7 @@ export interface IKanBan { group_by: TIssueGroupByOptions | undefined; sub_group_id?: string; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; showEmptyGroup: boolean; diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx index d1161be2e..85f24d90b 100644 --- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx +++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx @@ -17,13 +17,13 @@ import { cn } from "@/helpers/common.helper"; // hooks import { useProjectState } from "@/hooks/store"; //components +import { TRenderQuickActions } from "../list/list-view-types"; import { KanbanDropLocation, getSourceFromDropPayload, getDestinationFromDropPayload } from "./utils"; import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from "."; interface IKanbanGroup { groupId: string; issuesMap: IIssueMap; - peekIssueId?: string; issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues; displayProperties: IIssueDisplayProperties | undefined; sub_group_by: TIssueGroupByOptions | undefined; @@ -31,7 +31,7 @@ interface IKanbanGroup { sub_group_id: string; isDragDisabled: boolean; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; enableQuickIssueCreate?: boolean; quickAddCallback?: ( workspaceSlug: string, @@ -56,7 +56,6 @@ export const KanbanGroup = (props: IKanbanGroup) => { issuesMap, displayProperties, issueIds, - peekIssueId, isDragDisabled, updateIssue, quickActions, @@ -176,7 +175,6 @@ export const KanbanGroup = (props: IKanbanGroup) => { sub_group_id={sub_group_id} columnId={groupId} issuesMap={issuesMap} - peekIssueId={peekIssueId} issueIds={(issueIds as TGroupedIssues)?.[groupId] || []} displayProperties={displayProperties} isDragDisabled={isDragDisabled} diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx index 99ac692f7..ae881b9ed 100644 --- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx +++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx @@ -14,6 +14,7 @@ import { } from "@plane/types"; // components import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store"; +import { TRenderQuickActions } from "../list/list-view-types"; import { getGroupByColumns, isWorkspaceLevel } from "../utils"; import { KanbanStoreType } from "./base-kanban-root"; import { KanBan } from "./default"; @@ -106,7 +107,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader { showEmptyGroup: boolean; displayProperties: IIssueDisplayProperties | undefined; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; handleOnDrop: (source: KanbanDropLocation, destination: KanbanDropLocation) => Promise; @@ -235,7 +236,7 @@ export interface IKanBanSwimLanes { sub_group_by: TIssueGroupByOptions | undefined; group_by: TIssueGroupByOptions | undefined; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: TRenderQuickActions; kanbanFilters: TIssueKanbanFilters; handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; showEmptyGroup: boolean; 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 ac9427101..8a5fcf849 100644 --- a/web/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/components/issues/issue-layouts/list/base-list-root.tsx @@ -1,6 +1,5 @@ import { FC, useCallback } from "react"; import { observer } from "mobx-react-lite"; -import { TIssue } from "@plane/types"; // types import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; @@ -9,7 +8,7 @@ import { useIssues, useUser } from "@/hooks/store"; import { useIssuesActions } from "@/hooks/use-issues-actions"; // components import { List } from "./default"; -import { IQuickActionProps } from "./list-view-types"; +import { IQuickActionProps, TRenderQuickActions } from "./list-view-types"; // constants // hooks @@ -69,9 +68,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { const group_by = displayFilters?.group_by || null; const showEmptyGroup = displayFilters?.show_empty_groups ?? false; - const renderQuickActions = useCallback( - (issue: TIssue) => ( + const renderQuickActions: TRenderQuickActions = useCallback( + ({ issue, parentRef }) => ( removeIssue(issue.project_id, issue.id)} handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)} diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx index 1d9c3a74c..923f6cac4 100644 --- a/web/components/issues/issue-layouts/list/block.tsx +++ b/web/components/issues/issue-layouts/list/block.tsx @@ -1,38 +1,41 @@ +import { useRef } from "react"; import { observer } from "mobx-react-lite"; import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types"; -// components -// hooks // ui import { Spinner, Tooltip, ControlLink } from "@plane/ui"; -// helper +// helpers import { cn } from "@/helpers/common.helper"; +// hooks import { useAppRouter, useIssueDetail, useProject } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; // types import { IssueProperties } from "../properties/all-properties"; +import { TRenderQuickActions } from "./list-view-types"; interface IssueBlockProps { issueId: string; issuesMap: TIssueMap; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; displayProperties: IIssueDisplayProperties | undefined; canEditProperties: (projectId: string | undefined) => boolean; } export const IssueBlock: React.FC = observer((props: IssueBlockProps) => { const { issuesMap, issueId, updateIssue, quickActions, displayProperties, canEditProperties } = props; + // refs + const parentRef = useRef(null); // hooks const { workspaceSlug } = useAppRouter(); const { getProjectIdentifierById } = useProject(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); const issue = issuesMap[issueId]; @@ -44,11 +47,12 @@ export const IssueBlock: React.FC = observer((props: IssueBlock return (
@@ -86,7 +90,12 @@ export const IssueBlock: React.FC = observer((props: IssueBlock )}
{!issue?.tempId && ( -
{quickActions(issue)}
+
+ {quickActions({ + issue, + parentRef, + })} +
)}
@@ -100,7 +109,12 @@ export const IssueBlock: React.FC = observer((props: IssueBlock displayProperties={displayProperties} activeLayout="List" /> -
{quickActions(issue)}
+
+ {quickActions({ + issue, + parentRef, + })} +
) : (
diff --git a/web/components/issues/issue-layouts/list/blocks-list.tsx b/web/components/issues/issue-layouts/list/blocks-list.tsx index f5ddda6b5..1e1751b76 100644 --- a/web/components/issues/issue-layouts/list/blocks-list.tsx +++ b/web/components/issues/issue-layouts/list/blocks-list.tsx @@ -3,6 +3,7 @@ import { FC, MutableRefObject } from "react"; import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types"; import RenderIfVisible from "@/components/core/render-if-visible-HOC"; import { IssueBlock } from "@/components/issues"; +import { TRenderQuickActions } from "./list-view-types"; // types interface Props { @@ -10,7 +11,7 @@ interface Props { issuesMap: TIssueMap; canEditProperties: (projectId: string | undefined) => boolean; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; displayProperties: IIssueDisplayProperties | undefined; containerRef: MutableRefObject; } diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx index 2fcadaa13..d34908896 100644 --- a/web/components/issues/issue-layouts/list/default.tsx +++ b/web/components/issues/issue-layouts/list/default.tsx @@ -16,13 +16,14 @@ import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } // utils import { getGroupByColumns, isWorkspaceLevel } from "../utils"; import { HeaderGroupByCard } from "./headers/group-by-card"; +import { TRenderQuickActions } from "./list-view-types"; export interface IGroupByList { issueIds: TGroupedIssues | TUnGroupedIssues | any; issuesMap: TIssueMap; group_by: string | null; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; displayProperties: IIssueDisplayProperties | undefined; enableIssueQuickAdd: boolean; showEmptyGroup?: boolean; @@ -177,7 +178,7 @@ export interface IList { issuesMap: TIssueMap; group_by: string | null; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; - quickActions: (issue: TIssue) => React.ReactNode; + quickActions: TRenderQuickActions; displayProperties: IIssueDisplayProperties | undefined; showEmptyGroup: boolean; enableIssueQuickAdd: boolean; 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 f38f52b9c..6597855f6 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 @@ -2,6 +2,7 @@ import { Placement } from "@popperjs/core"; import { TIssue } from "@plane/types"; export interface IQuickActionProps { + parentRef: React.RefObject; issue: TIssue; handleDelete: () => Promise; handleUpdate?: (data: TIssue) => Promise; @@ -13,3 +14,17 @@ export interface IQuickActionProps { readOnly?: boolean; placements?: Placement; } + +export type TRenderQuickActions = ({ + issue, + parentRef, + customActionButton, + placement, + portalElement, +}: { + issue: TIssue; + parentRef: React.RefObject; + customActionButton?: React.ReactElement; + placement?: Placement; + portalElement?: HTMLDivElement | null; +}) => React.ReactNode; 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 86dbe760b..7a73a25f9 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 @@ -3,21 +3,22 @@ import omit from "lodash/omit"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react"; +// types import { TIssue } from "@plane/types"; -// hooks -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; -import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; // ui +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components +import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; +// constants import { EIssuesStoreType } from "@/constants/issue"; import { STATE_GROUPS } from "@/constants/state"; -import { copyUrlToClipboard } from "@/helpers/string.helper"; -import { useEventTracker, useProjectState } from "@/hooks/store"; -// components // helpers +import { cn } from "@/helpers/common.helper"; +import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks +import { useEventTracker, useProjectState } from "@/hooks/store"; // types import { IQuickActionProps } from "../list/list-view-types"; -// constants export const AllIssueQuickActions: React.FC = observer((props) => { const { @@ -28,6 +29,8 @@ export const AllIssueQuickActions: React.FC = observer((props customActionButton, portalElement, readOnly = false, + placements = "bottom-start", + parentRef, } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); @@ -68,6 +71,63 @@ export const AllIssueQuickActions: React.FC = observer((props ["id"] ); + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: () => { + setTrackElement("Global issues"); + setIssueToEdit(issue); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "make-a-copy", + title: "Make a copy", + icon: Copy, + action: () => { + setTrackElement("Global issues"); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "open-in-new-tab", + title: "Open in new tab", + icon: ExternalLink, + action: handleOpenInNewTab, + }, + { + key: "copy-link", + title: "Copy link", + icon: Link, + action: handleCopyIssueLink, + }, + { + key: "archive", + title: "Archive", + description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + action: () => setArchiveIssueModal(true), + disabled: !isInArchivableGroup, + shouldRender: isArchivingAllowed, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement("Global issues"); + setDeleteIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + ]; + return ( <> = observer((props }} storeType={EIssuesStoreType.PROJECT} /> + - {isEditingAllowed && ( - { - setTrackElement("Global issues"); - setIssueToEdit(issue); - setCreateUpdateIssueModal(true); - }} - > -
- - Edit -
- - )} - -
- - Open in new tab -
- - -
- - Copy link -
- - {isEditingAllowed && ( - { - setTrackElement("Global issues"); - setCreateUpdateIssueModal(true); - }} - > -
- - Make a copy -
- - )} - {isArchivingAllowed && ( - setArchiveIssueModal(true)} disabled={!isInArchivableGroup}> - {isInArchivableGroup ? ( -
- - Archive -
- ) : ( -
- -
-

Archive

-

- Only completed or canceled -
- issues can be archived + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isEditingAllowed && ( - { - setTrackElement("Global issues"); - setDeleteIssueModal(true); - }} - > -
- - Delete -
- - )} + + ); + })} ); 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 8a49ec9b4..0327755a9 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 @@ -4,13 +4,14 @@ import { useRouter } from "next/router"; // icons import { ArchiveRestoreIcon, ExternalLink, Link, Trash2 } from "lucide-react"; // ui -import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; +import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components import { DeleteIssueModal } from "@/components/issues"; // constants import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; // helpers +import { cn } from "@/helpers/common.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper"; // hooks import { useEventTracker, useIssues, useUser } from "@/hooks/store"; @@ -18,7 +19,16 @@ import { useEventTracker, useIssues, useUser } from "@/hooks/store"; import { IQuickActionProps } from "../list/list-view-types"; export const ArchivedIssueQuickActions: React.FC = observer((props) => { - const { issue, handleDelete, handleRestore, customActionButton, portalElement, readOnly = false } = props; + const { + issue, + handleDelete, + handleRestore, + customActionButton, + portalElement, + readOnly = false, + placements = "bottom-end", + parentRef, + } = props; // states const [deleteIssueModal, setDeleteIssueModal] = useState(false); // router @@ -66,6 +76,38 @@ export const ArchivedIssueQuickActions: React.FC = observer(( }); }; + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "restore", + title: "Restore", + icon: ArchiveRestoreIcon, + action: handleIssueRestore, + shouldRender: isRestoringAllowed, + }, + { + key: "open-in-new-tab", + title: "Open in new tab", + icon: ExternalLink, + action: handleOpenInNewTab, + }, + { + key: "copy-link", + title: "Copy link", + icon: Link, + action: handleCopyIssueLink, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement(activeLayout); + setDeleteIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + ]; + return ( <> = observer(( handleClose={() => setDeleteIssueModal(false)} onSubmit={handleDelete} /> + - {isRestoringAllowed && ( - -
- - Restore -
- - )} - -
- - Open in new tab -
- - -
- - Copy link -
- - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setDeleteIssueModal(true); - }} - > -
- - Delete issue -
- - )} + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +
+
{item.title}
+ {item.description && ( +

+ {item.description} +

+ )} +
+ + ); + })} ); 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 eed0e0dc6..503d8258e 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 @@ -2,24 +2,24 @@ import { useState } from "react"; import omit from "lodash/omit"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -// hooks -// ui import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react"; +// types import { TIssue } from "@plane/types"; -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; -// icons +// ui +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; +// constants import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; import { STATE_GROUPS } from "@/constants/state"; -import { copyUrlToClipboard } from "@/helpers/string.helper"; -import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store"; -// components // helpers +import { cn } from "@/helpers/common.helper"; +import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks +import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store"; // types import { IQuickActionProps } from "../list/list-view-types"; -// constants export const CycleIssueQuickActions: React.FC = observer((props) => { const { @@ -32,6 +32,7 @@ export const CycleIssueQuickActions: React.FC = observer((pro portalElement, readOnly = false, placements = "bottom-start", + parentRef, } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); @@ -80,6 +81,73 @@ export const CycleIssueQuickActions: React.FC = observer((pro ["id"] ); + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: () => { + setIssueToEdit({ + ...issue, + cycle_id: cycleId?.toString() ?? null, + }); + setTrackElement(activeLayout); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "make-a-copy", + title: "Make a copy", + icon: Copy, + action: () => { + setTrackElement(activeLayout); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "open-in-new-tab", + title: "Open in new tab", + icon: ExternalLink, + action: handleOpenInNewTab, + }, + { + key: "copy-link", + title: "Copy link", + icon: Link, + action: handleCopyIssueLink, + }, + { + key: "remove-from-cycle", + title: "Remove from cycle", + icon: XCircle, + action: () => handleRemoveFromView?.(), + shouldRender: isEditingAllowed, + }, + { + key: "archive", + title: "Archive", + description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + action: () => setArchiveIssueModal(true), + disabled: !isInArchivableGroup, + shouldRender: isArchivingAllowed, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement(activeLayout); + setDeleteIssueModal(true); + }, + shouldRender: isDeletingAllowed, + }, + ]; + return ( <> = observer((pro }} storeType={EIssuesStoreType.CYCLE} /> + - {isEditingAllowed && ( - { - setIssueToEdit({ - ...issue, - cycle_id: cycleId?.toString() ?? null, - }); - setTrackElement(activeLayout); - setCreateUpdateIssueModal(true); - }} - > -
- - Edit -
- - )} - -
- - Open in new tab -
- - -
- - Copy link -
- - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setCreateUpdateIssueModal(true); - }} - > -
- - Make a copy -
- - )} - {isEditingAllowed && ( - { - handleRemoveFromView && handleRemoveFromView(); - }} - > -
- - Remove from cycle -
- - )} - {isArchivingAllowed && ( - setArchiveIssueModal(true)} disabled={!isInArchivableGroup}> - {isInArchivableGroup ? ( -
- - Archive -
- ) : ( -
- -
-

Archive

-

- Only completed or canceled -
- issues can be archived + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isDeletingAllowed && ( - { - setTrackElement(activeLayout); - setDeleteIssueModal(true); - }} - > -
- - Delete -
- - )} + + ); + })} ); diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx index 9502e7623..18c259107 100644 --- a/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx +++ b/web/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx @@ -6,19 +6,30 @@ import { Pencil, Trash2 } from "lucide-react"; // types import { TIssue } from "@plane/types"; // ui -import { CustomMenu } from "@plane/ui"; +import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui"; // components import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; // constant import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; +// helpers +import { cn } from "@/helpers/common.helper"; // hooks import { useEventTracker, useIssues, useUser } from "@/hooks/store"; // types import { IQuickActionProps } from "../list/list-view-types"; export const DraftIssueQuickActions: React.FC = observer((props) => { - const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props; + const { + issue, + handleDelete, + handleUpdate, + customActionButton, + portalElement, + readOnly = false, + placements = "bottom-end", + parentRef, + } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); const [issueToEdit, setIssueToEdit] = useState(undefined); @@ -44,6 +55,30 @@ export const DraftIssueQuickActions: React.FC = observer((pro ["id"] ); + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: () => { + setTrackElement(activeLayout); + setIssueToEdit(issue); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement(activeLayout); + setDeleteIssueModal(true); + }, + shouldRender: isDeletingAllowed, + }, + ]; + return ( <> = observer((pro handleClose={() => setDeleteIssueModal(false)} onSubmit={handleDelete} /> - { @@ -66,43 +100,49 @@ export const DraftIssueQuickActions: React.FC = observer((pro storeType={EIssuesStoreType.PROJECT} isDraft /> - + - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setIssueToEdit(issue); - setCreateUpdateIssueModal(true); - }} - > -
- - Edit -
- - )} - {isDeletingAllowed && ( - { - setTrackElement(activeLayout); - setDeleteIssueModal(true); - }} - > -
- - Delete -
- - )} + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +
+
{item.title}
+ {item.description && ( +

+ {item.description} +

+ )} +
+ + ); + })} ); 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 1f155d066..3cc3343b6 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 @@ -2,23 +2,24 @@ import { useState } from "react"; import omit from "lodash/omit"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -// hooks -// ui import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react"; +// types import { TIssue } from "@plane/types"; -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; +// ui +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; +// constants import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; import { STATE_GROUPS } from "@/constants/state"; -import { copyUrlToClipboard } from "@/helpers/string.helper"; -import { useIssues, useEventTracker, useUser, useProjectState } from "@/hooks/store"; -// components // helpers +import { cn } from "@/helpers/common.helper"; +import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks +import { useIssues, useEventTracker, useUser, useProjectState } from "@/hooks/store"; // types import { IQuickActionProps } from "../list/list-view-types"; -// constants export const ModuleIssueQuickActions: React.FC = observer((props) => { const { @@ -31,6 +32,7 @@ export const ModuleIssueQuickActions: React.FC = observer((pr portalElement, readOnly = false, placements = "bottom-start", + parentRef, } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); @@ -79,6 +81,70 @@ export const ModuleIssueQuickActions: React.FC = observer((pr ["id"] ); + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: () => { + setIssueToEdit({ ...issue, module_ids: moduleId ? [moduleId.toString()] : [] }); + setTrackElement(activeLayout); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "make-a-copy", + title: "Make a copy", + icon: Copy, + action: () => { + setTrackElement(activeLayout); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "open-in-new-tab", + title: "Open in new tab", + icon: ExternalLink, + action: handleOpenInNewTab, + }, + { + key: "copy-link", + title: "Copy link", + icon: Link, + action: handleCopyIssueLink, + }, + { + key: "remove-from-module", + title: "Remove from module", + icon: XCircle, + action: () => handleRemoveFromView?.(), + shouldRender: isEditingAllowed, + }, + { + key: "archive", + title: "Archive", + description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + action: () => setArchiveIssueModal(true), + disabled: !isInArchivableGroup, + shouldRender: isArchivingAllowed, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement(activeLayout); + setDeleteIssueModal(true); + }, + shouldRender: isDeletingAllowed, + }, + ]; + return ( <> = observer((pr }} storeType={EIssuesStoreType.MODULE} /> + - {isEditingAllowed && ( - { - setIssueToEdit({ ...issue, module_ids: moduleId ? [moduleId.toString()] : [] }); - setTrackElement(activeLayout); - setCreateUpdateIssueModal(true); - }} - > -
- - Edit -
- - )} - -
- - Open in new tab -
- - -
- - Copy link -
- - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setCreateUpdateIssueModal(true); - }} - > -
- - Make a copy -
- - )} - {isEditingAllowed && ( - { - handleRemoveFromView && handleRemoveFromView(); - }} - > -
- - Remove from module -
- - )} - {isArchivingAllowed && ( - setArchiveIssueModal(true)} disabled={!isInArchivableGroup}> - {isInArchivableGroup ? ( -
- - Archive -
- ) : ( -
- -
-

Archive

-

- Only completed or canceled -
- issues can be archived + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isDeletingAllowed && ( - { - e.preventDefault(); - e.stopPropagation(); - setTrackElement(activeLayout); - setDeleteIssueModal(true); - }} - > -
- - Delete -
- - )} + + ); + })} ); 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 577a3ce99..0fbe10da9 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 @@ -2,22 +2,24 @@ import { useState } from "react"; import omit from "lodash/omit"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -// hooks import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react"; +// types import { TIssue } from "@plane/types"; -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; +// ui +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; +// components import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues"; +// constants import { EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; import { STATE_GROUPS } from "@/constants/state"; -import { copyUrlToClipboard } from "@/helpers/string.helper"; -import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store"; -// ui -// components // helpers +import { cn } from "@/helpers/common.helper"; +import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks +import { useEventTracker, useIssues, useProjectState, useUser } from "@/hooks/store"; // types import { IQuickActionProps } from "../list/list-view-types"; -// constant export const ProjectIssueQuickActions: React.FC = observer((props) => { const { @@ -28,7 +30,8 @@ export const ProjectIssueQuickActions: React.FC = observer((p customActionButton, portalElement, readOnly = false, - placements = "bottom-start", + placements = "bottom-end", + parentRef, } = props; // router const router = useRouter(); @@ -56,9 +59,6 @@ export const ProjectIssueQuickActions: React.FC = observer((p const isDeletingAllowed = isEditingAllowed; const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`; - - const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank"); - const handleCopyIssueLink = () => copyUrlToClipboard(issueLink).then(() => setToast({ @@ -67,6 +67,7 @@ export const ProjectIssueQuickActions: React.FC = observer((p message: "Issue link copied to clipboard", }) ); + const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank"); const isDraftIssue = router?.asPath?.includes("draft-issues") || false; @@ -79,6 +80,63 @@ export const ProjectIssueQuickActions: React.FC = observer((p ["id"] ); + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: () => { + setTrackElement(activeLayout); + setIssueToEdit(issue); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "make-a-copy", + title: "Make a copy", + icon: Copy, + action: () => { + setTrackElement(activeLayout); + setCreateUpdateIssueModal(true); + }, + shouldRender: isEditingAllowed, + }, + { + key: "open-in-new-tab", + title: "Open in new tab", + icon: ExternalLink, + action: handleOpenInNewTab, + }, + { + key: "copy-link", + title: "Copy link", + icon: Link, + action: handleCopyIssueLink, + }, + { + key: "archive", + title: "Archive", + description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + action: () => setArchiveIssueModal(true), + disabled: !isInArchivableGroup, + shouldRender: isArchivingAllowed, + }, + { + key: "delete", + title: "Delete", + icon: Trash2, + action: () => { + setTrackElement(activeLayout); + setDeleteIssueModal(true); + }, + shouldRender: isDeletingAllowed, + }, + ]; + return ( <> = observer((p storeType={EIssuesStoreType.PROJECT} isDraft={isDraftIssue} /> + - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setIssueToEdit(issue); - setCreateUpdateIssueModal(true); - }} - > -
- - Edit -
- - )} - -
- - Open in new tab -
- - -
- - Copy link -
- - {isEditingAllowed && ( - { - setTrackElement(activeLayout); - setCreateUpdateIssueModal(true); - }} - > -
- - Make a copy -
- - )} - {isArchivingAllowed && ( - setArchiveIssueModal(true)} disabled={!isInArchivableGroup}> - {isInArchivableGroup ? ( -
- - Archive -
- ) : ( -
- -
-

Archive

-

- Only completed or canceled -
- issues can be archived + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isDeletingAllowed && ( - { - setTrackElement(activeLayout); - setDeleteIssueModal(true); - }} - > -
- - Delete -
- - )} + + ); + })} ); 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 abc0e56be..51188fe72 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 isEmpty from "lodash/isEmpty"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import useSWR from "swr"; -import { TIssue, IIssueDisplayFilterOptions } from "@plane/types"; +import { IIssueDisplayFilterOptions } from "@plane/types"; // hooks // components import { EmptyState } from "@/components/empty-state"; @@ -19,6 +19,7 @@ import { EUserProjectRoles } from "@/constants/project"; import { useCommandPalette, useEventTracker, useGlobalView, useIssues, useProject, useUser } from "@/hooks/store"; import { useIssuesActions } from "@/hooks/use-issues-actions"; import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties"; +import { TRenderQuickActions } from "../list/list-view-types"; export const AllIssueLayoutRoot: React.FC = observer(() => { // router @@ -127,9 +128,10 @@ export const AllIssueLayoutRoot: React.FC = observer(() => { [updateFilters, workspaceSlug, globalViewId] ); - const renderQuickActions = useCallback( - (issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null) => ( + const renderQuickActions: TRenderQuickActions = useCallback( + ({ issue, parentRef, customActionButton, placement, portalElement }) => ( removeIssue(issue.project_id, issue.id)} @@ -137,6 +139,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => { handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)} portalElement={portalElement} readOnly={!canEditProperties(issue.project_id)} + placements={placement} /> ), [canEditProperties, removeIssue, updateIssue, archiveIssue] 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 01bc49d29..cf57c7f7e 100644 --- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx @@ -1,7 +1,7 @@ import { FC, useCallback } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; -import { TIssue, IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types"; +import { IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types"; // hooks import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue"; import { EUserProjectRoles } from "@/constants/project"; @@ -10,7 +10,7 @@ import { useIssuesActions } from "@/hooks/use-issues-actions"; // views // types // constants -import { IQuickActionProps } from "../list/list-view-types"; +import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types"; import { SpreadsheetView } from "./spreadsheet-view"; export type SpreadsheetStoreType = @@ -66,9 +66,10 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => { [projectId, updateFilters] ); - const renderQuickActions = useCallback( - (issue: TIssue, customActionButton?: React.ReactElement, portalElement?: HTMLDivElement | null) => ( + const renderQuickActions: TRenderQuickActions = useCallback( + ({ issue, parentRef, customActionButton, placement, portalElement }) => ( removeIssue(issue.project_id, issue.id)} @@ -78,6 +79,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => { handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)} portalElement={portalElement} readOnly={!isEditingAllowed || isCompletedCycle} + placements={placement} /> ), [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue] diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx index d02452155..58f73bf83 100644 --- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx @@ -16,17 +16,14 @@ import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; import { usePlatformOS } from "@/hooks/use-platform-os"; // types // local components +import { TRenderQuickActions } from "../list/list-view-types"; import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; import { IssueColumn } from "./issue-column"; interface Props { displayProperties: IIssueDisplayProperties; isEstimateEnabled: boolean; - quickActions: ( - issue: TIssue, - customActionButton?: React.ReactElement, - portalElement?: HTMLDivElement | null - ) => React.ReactNode; + quickActions: TRenderQuickActions; canEditProperties: (projectId: string | undefined) => boolean; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; portalElement: React.MutableRefObject; @@ -112,11 +109,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => { interface IssueRowDetailsProps { displayProperties: IIssueDisplayProperties; isEstimateEnabled: boolean; - quickActions: ( - issue: TIssue, - customActionButton?: React.ReactElement, - portalElement?: HTMLDivElement | null - ) => React.ReactNode; + quickActions: TRenderQuickActions; canEditProperties: (projectId: string | undefined) => boolean; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; portalElement: React.MutableRefObject; @@ -143,23 +136,25 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => { setExpanded, spreadsheetColumnsList, } = props; + // states + const [isMenuActive, setIsMenuActive] = useState(false); + // refs + const cellRef = useRef(null); + const menuActionRef = useRef(null); // router const router = useRouter(); const { workspaceSlug } = router.query; - //hooks + // hooks const { getProjectIdentifierById } = useProject(); - const { peekIssue, setPeekIssue } = useIssueDetail(); + const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); const { isMobile } = usePlatformOS(); - // states - const [isMenuActive, setIsMenuActive] = useState(false); - const menuActionRef = useRef(null); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id }); const { subIssues: subIssuesStore, issue } = useIssueDetail(); @@ -196,16 +191,13 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => { return ( <> { >
@@ -226,7 +218,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx index 834a65fd7..f548c69a5 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx @@ -4,6 +4,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@pl //types import { useTableKeyboardNavigation } from "@/hooks/use-table-keyboard-navigation"; //components +import { TRenderQuickActions } from "../list/list-view-types"; import { SpreadsheetIssueRow } from "./issue-row"; import { SpreadsheetHeader } from "./spreadsheet-header"; @@ -13,11 +14,7 @@ type Props = { handleDisplayFilterUpdate: (data: Partial) => void; issueIds: string[]; isEstimateEnabled: boolean; - quickActions: ( - issue: TIssue, - customActionButton?: React.ReactElement, - portalElement?: HTMLDivElement | null - ) => React.ReactNode; + quickActions: TRenderQuickActions; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; canEditProperties: (projectId: string | undefined) => boolean; portalElement: React.MutableRefObject; diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index 334a0eb6a..4c688a52b 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx @@ -6,6 +6,7 @@ import { Spinner } from "@plane/ui"; import { SpreadsheetQuickAddIssueForm } from "@/components/issues"; import { SPREADSHEET_PROPERTY_LIST } from "@/constants/spreadsheet"; import { useProject } from "@/hooks/store"; +import { TRenderQuickActions } from "../list/list-view-types"; import { SpreadsheetTable } from "./spreadsheet-table"; // types //hooks @@ -15,11 +16,7 @@ type Props = { displayFilters: IIssueDisplayFilterOptions; handleDisplayFilterUpdate: (data: Partial) => void; issueIds: string[] | undefined; - quickActions: ( - issue: TIssue, - customActionButton?: React.ReactElement, - portalElement?: HTMLDivElement | null - ) => React.ReactNode; + quickActions: TRenderQuickActions; updateIssue: ((projectId: string, issueId: string, data: Partial) => Promise) | undefined; openIssuesListModal?: (() => void) | null; quickAddCallback?: ( diff --git a/web/components/issues/issue-modal/form.tsx b/web/components/issues/issue-modal/form.tsx index 4d0d64ee1..5e36f6ed5 100644 --- a/web/components/issues/issue-modal/form.tsx +++ b/web/components/issues/issue-modal/form.tsx @@ -25,7 +25,7 @@ import { IssueLabelSelect } from "@/components/issues/select"; import { CreateLabelModal } from "@/components/labels"; // helpers import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper"; -import { getChangedIssuefields } from "@/helpers/issue.helper"; +import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper"; import { shouldRenderProject } from "@/helpers/project.helper"; // hooks import { useAppRouter, useEstimate, useInstance, useIssueDetail, useProject, useWorkspace } from "@/hooks/store"; @@ -468,17 +468,13 @@ export const IssueFormRoot: FC = observer((props) => { workspaceSlug={workspaceSlug?.toString() as string} workspaceId={workspaceId} projectId={projectId} - // dragDropEnabled={false} onChange={(_description: object, description_html: string) => { onChange(description_html); handleFormChange(); }} ref={editorRef} tabIndex={getTabIndex("description_html")} - placeholder={(isFocused) => { - if (isFocused) return "Press '/' for commands..."; - else return "Click to add description"; - }} + placeholder={getDescriptionPlaceholder} /> )} /> diff --git a/web/components/issues/issue-modal/modal.tsx b/web/components/issues/issue-modal/modal.tsx index 215ced6c7..2672e8584 100644 --- a/web/components/issues/issue-modal/modal.tsx +++ b/web/components/issues/issue-modal/modal.tsx @@ -109,7 +109,7 @@ export const CreateUpdateIssueModal: React.FC = observer((prop // clearing up the description state when we leave the component return () => setDescription(undefined); - }, [data, projectId, workspaceProjectIds, isOpen, activeProjectId]); + }, [data, projectId, isOpen, activeProjectId]); const addIssueToCycle = async (issue: TIssue, cycleId: string) => { if (!workspaceSlug || !activeProjectId) return; diff --git a/web/components/issues/sub-issues/issue-list-item.tsx b/web/components/issues/sub-issues/issue-list-item.tsx index ffd9f76d7..23ba330a9 100644 --- a/web/components/issues/sub-issues/issue-list-item.tsx +++ b/web/components/issues/sub-issues/issue-list-item.tsx @@ -42,7 +42,7 @@ export const IssueListItem: React.FC = observer((props) => { } = props; const { - peekIssue, + getIsIssuePeeked, setPeekIssue, issue: { getIssueById }, subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers }, @@ -65,7 +65,7 @@ export const IssueListItem: React.FC = observer((props) => { issue && issue.project_id && issue.id && - peekIssue?.issueId !== issue.id && + !getIsIssuePeeked(issue.id) && setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id }); if (!issue) return <>; diff --git a/web/components/labels/label-block/label-item-block.tsx b/web/components/labels/label-block/label-item-block.tsx index e3236c91d..b3d41abcc 100644 --- a/web/components/labels/label-block/label-item-block.tsx +++ b/web/components/labels/label-block/label-item-block.tsx @@ -52,7 +52,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => { : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100" } ${isLabelGroup && "-top-0.5"}`} > - + {customMenuItems.map( ({ isVisible, onClick, CustomIcon, text, key }) => isVisible && ( diff --git a/web/components/modules/archived-modules/view.tsx b/web/components/modules/archived-modules/view.tsx index 56dbd0135..f12bc412a 100644 --- a/web/components/modules/archived-modules/view.tsx +++ b/web/components/modules/archived-modules/view.tsx @@ -50,7 +50,7 @@ export const ArchivedModulesView: FC = observer((props) =>
{filteredArchivedModuleIds.map((moduleId) => ( - + ))}
= observer((props) => { const { moduleId } = props; + // refs + const parentRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -145,7 +147,7 @@ export const ModuleCardItem: React.FC = observer((props) => { return (
- +
@@ -239,6 +241,7 @@ export const ModuleCardItem: React.FC = observer((props) => { )} {workspaceSlug && projectId && ( ; +}; + +export const ModuleListItemAction: FC = observer((props) => { + const { moduleId, moduleDetails, parentRef } = props; + // router + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + // store hooks + const { + membership: { currentProjectRole }, + } = useUser(); + const { addModuleToFavorites, removeModuleFromFavorites } = useModule(); + const { getUserDetails } = useMember(); + const { captureEvent } = useEventTracker(); + const { isMobile } = usePlatformOS(); + + // derived values + const endDate = getDate(moduleDetails.target_date); + const startDate = getDate(moduleDetails.start_date); + + const renderDate = moduleDetails.start_date || moduleDetails.target_date; + + const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status); + + const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; + + // handlers + const handleAddToFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then( + () => { + captureEvent(MODULE_FAVORITED, { + module_id: moduleId, + element: "Grid layout", + state: "SUCCESS", + }); + } + ); + + setPromiseToast(addToFavoritePromise, { + loading: "Adding module to favorites...", + success: { + title: "Success!", + message: () => "Module added to favorites.", + }, + error: { + title: "Error!", + message: () => "Couldn't add the module to favorites. Please try again.", + }, + }); + }; + + const handleRemoveFromFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + const removeFromFavoritePromise = removeModuleFromFavorites( + workspaceSlug.toString(), + projectId.toString(), + moduleId + ).then(() => { + captureEvent(MODULE_UNFAVORITED, { + module_id: moduleId, + element: "Grid layout", + state: "SUCCESS", + }); + }); + + setPromiseToast(removeFromFavoritePromise, { + loading: "Removing module from favorites...", + success: { + title: "Success!", + message: () => "Module removed from favorites.", + }, + error: { + title: "Error!", + message: () => "Couldn't remove the module from favorites. Please try again.", + }, + }); + }; + + return ( + <> + {moduleStatus && ( + + {moduleStatus.label} + + )} + + {renderDate && ( + + {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} + + )} + + +
+ {moduleDetails.member_ids.length > 0 ? ( + + {moduleDetails.member_ids.map((member_id) => { + const member = getUserDetails(member_id); + return ; + })} + + ) : ( + + + + )} +
+ + + {isEditingAllowed && !moduleDetails.archived_at && ( + { + if (moduleDetails.is_favorite) handleRemoveFromFavorites(e); + else handleAddToFavorites(e); + }} + selected={moduleDetails.is_favorite} + /> + )} + {workspaceSlug && projectId && ( + + )} + + ); +}); diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx index 6b2c8c2ba..9ad7d2225 100644 --- a/web/components/modules/module-list-item.tsx +++ b/web/components/modules/module-list-item.tsx @@ -1,102 +1,45 @@ -import React from "react"; +import React, { useRef } from "react"; import { observer } from "mobx-react-lite"; -import Link from "next/link"; import { useRouter } from "next/router"; -import { Check, Info, User2 } from "lucide-react"; +// icons +import { Check, Info } from "lucide-react"; // ui -import { Avatar, AvatarGroup, CircularProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui"; +import { CircularProgressIndicator } from "@plane/ui"; // components -import { FavoriteStar } from "@/components/core"; -import { ModuleQuickActions } from "@/components/modules"; -// constants -import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker"; -import { MODULE_STATUS } from "@/constants/module"; -import { EUserProjectRoles } from "@/constants/project"; -// helpers -import { getDate, renderFormattedDate } from "@/helpers/date-time.helper"; +import { ListItem } from "@/components/core/list"; +import { ModuleListItemAction } from "@/components/modules"; // hooks -import { useModule, useUser, useEventTracker, useMember } from "@/hooks/store"; +import { useModule } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { moduleId: string; - isArchived?: boolean; }; export const ModuleListItem: React.FC = observer((props) => { - const { moduleId, isArchived = false } = props; + const { moduleId } = props; + // refs + const parentRef = useRef(null); // router const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug } = router.query; // store hooks - const { - membership: { currentProjectRole }, - } = useUser(); - const { getModuleById, addModuleToFavorites, removeModuleFromFavorites } = useModule(); - const { getUserDetails } = useMember(); - const { captureEvent } = useEventTracker(); + const { getModuleById } = useModule(); + const { isMobile } = usePlatformOS(); + // derived values const moduleDetails = getModuleById(moduleId); - const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; - const { isMobile } = usePlatformOS(); - const handleAddToFavorites = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (!workspaceSlug || !projectId) return; - const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then( - () => { - captureEvent(MODULE_FAVORITED, { - module_id: moduleId, - element: "Grid layout", - state: "SUCCESS", - }); - } - ); + if (!moduleDetails) return null; - setPromiseToast(addToFavoritePromise, { - loading: "Adding module to favorites...", - success: { - title: "Success!", - message: () => "Module added to favorites.", - }, - error: { - title: "Error!", - message: () => "Couldn't add the module to favorites. Please try again.", - }, - }); - }; + const completionPercentage = + ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100; - const handleRemoveFromFavorites = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (!workspaceSlug || !projectId) return; + const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); - const removeFromFavoritePromise = removeModuleFromFavorites( - workspaceSlug.toString(), - projectId.toString(), - moduleId - ).then(() => { - captureEvent(MODULE_UNFAVORITED, { - module_id: moduleId, - element: "Grid layout", - state: "SUCCESS", - }); - }); - - setPromiseToast(removeFromFavoritePromise, { - loading: "Removing module from favorites...", - success: { - title: "Success!", - message: () => "Module removed from favorites.", - }, - error: { - title: "Error!", - message: () => "Couldn't remove the module from favorites. Please try again.", - }, - }); - }; + const completedModuleCheck = moduleDetails.status === "completed"; + // handlers const openModuleOverview = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); @@ -116,126 +59,41 @@ export const ModuleListItem: React.FC = observer((props) => { } }; - if (!moduleDetails) return null; - - const completionPercentage = - ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100; - - const endDate = getDate(moduleDetails.target_date); - const startDate = getDate(moduleDetails.start_date); - - const renderDate = moduleDetails.start_date || moduleDetails.target_date; - - // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); - - const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status); - - const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); - - const completedModuleCheck = moduleDetails.status === "completed"; - return ( -
- { - if (isArchived) { - openModuleOverview(e); - } - }} - > -
-
-
-
- - - {completedModuleCheck ? ( - progress === 100 ? ( - - ) : ( - {`!`} - ) - ) : progress === 100 ? ( - - ) : ( - {`${progress}%`} - )} - - - - {moduleDetails.name} - -
- -
-
- -
- -
-
- {moduleStatus && ( - - {moduleStatus.label} - + { + if (moduleDetails.archived_at) openModuleOverview(e); + }} + prependTitleElement={ + + {completedModuleCheck ? ( + progress === 100 ? ( + + ) : ( + {`!`} + ) + ) : progress === 100 ? ( + + ) : ( + {`${progress}%`} )} -
-
-
- {renderDate && ( - - {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"} - - )} -
- -
- -
- {moduleDetails.member_ids.length > 0 ? ( - - {moduleDetails.member_ids.map((member_id) => { - const member = getUserDetails(member_id); - return ; - })} - - ) : ( - - - - )} -
- - - {isEditingAllowed && !isArchived && ( - { - if (moduleDetails.is_favorite) handleRemoveFromFavorites(e); - else handleAddToFavorites(e); - }} - selected={moduleDetails.is_favorite} - /> - )} - {workspaceSlug && projectId && ( - - )} -
-
-
-
+ + } + appendTitleElement={ + + } + actionableItems={ + + } + isMobile={isMobile} + parentRef={parentRef} + /> ); }); diff --git a/web/components/modules/module-view-header.tsx b/web/components/modules/module-view-header.tsx new file mode 100644 index 000000000..9367aad33 --- /dev/null +++ b/web/components/modules/module-view-header.tsx @@ -0,0 +1,178 @@ +import React, { FC, useCallback, useRef, useState } from "react"; +import { observer } from "mobx-react"; +import { useRouter } from "next/router"; +import { ListFilter, Search, X } from "lucide-react"; +import { cn } from "@plane/editor-core"; +// types +import { TModuleFilters } from "@plane/types"; +// ui +import { Tooltip } from "@plane/ui"; +// components +import { FiltersDropdown } from "@/components/issues"; +import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns"; +// constants +import { MODULE_VIEW_LAYOUTS } from "@/constants/module"; +// hooks +import { useMember, useModuleFilter } from "@/hooks/store"; +import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; +import { usePlatformOS } from "@/hooks/use-platform-os"; + +export const ModuleViewHeader: FC = observer(() => { + // refs + const inputRef = useRef(null); + + // router + const router = useRouter(); + const { projectId } = router.query; + + // hooks + const { isMobile } = usePlatformOS(); + + // store hooks + const { + workspace: { workspaceMemberIds }, + } = useMember(); + const { + currentProjectDisplayFilters: displayFilters, + currentProjectFilters: filters, + searchQuery, + updateDisplayFilters, + updateFilters, + updateSearchQuery, + } = useModuleFilter(); + + // states + const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false); + + // handlers + const handleFilters = useCallback( + (key: keyof TModuleFilters, value: string | string[]) => { + if (!projectId) return; + const newValues = filters?.[key] ?? []; + + if (Array.isArray(value)) + value.forEach((val) => { + if (!newValues.includes(val)) newValues.push(val); + else newValues.splice(newValues.indexOf(val), 1); + }); + else { + if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); + else newValues.push(value); + } + + updateFilters(projectId.toString(), { [key]: newValues }); + }, + [filters, projectId, updateFilters] + ); + + const handleInputKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Escape") { + if (searchQuery && searchQuery.trim() !== "") updateSearchQuery(""); + else { + setIsSearchOpen(false); + inputRef.current?.blur(); + } + } + }; + + // outside click detector hook + useOutsideClickDetector(inputRef, () => { + if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false); + }); + return ( +
+
+ {!isSearchOpen && ( + + )} +
+ + updateSearchQuery(e.target.value)} + onKeyDown={handleInputKeyDown} + /> + {isSearchOpen && ( + + )} +
+
+ + { + if (!projectId || val === displayFilters?.order_by) return; + updateDisplayFilters(projectId.toString(), { + order_by: val, + }); + }} + /> + } title="Filters" placement="bottom-end"> + { + if (!projectId) return; + updateDisplayFilters(projectId.toString(), val); + }} + handleFiltersUpdate={handleFilters} + memberIds={workspaceMemberIds ?? undefined} + /> + +
+ {MODULE_VIEW_LAYOUTS.map((layout) => ( + + + + ))} +
+
+ ); +}); diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx index 5e91a4a52..d211c6021 100644 --- a/web/components/modules/modules-list-view.tsx +++ b/web/components/modules/modules-list-view.tsx @@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite"; import Image from "next/image"; import { useRouter } from "next/router"; // components +import { ListLayout } from "@/components/core/list"; import { EmptyState } from "@/components/empty-state"; import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules"; import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui"; @@ -69,11 +70,11 @@ export const ModulesListView: React.FC = observer(() => { {displayFilters?.layout === "list" && (
-
+ {filteredModuleIds.map((moduleId) => ( ))} -
+ ; moduleId: string; projectId: string; workspaceSlug: string; - isArchived?: boolean; }; export const ModuleQuickActions: React.FC = observer((props) => { - const { moduleId, projectId, workspaceSlug, isArchived } = props; + const { parentRef, moduleId, projectId, workspaceSlug } = props; // router const router = useRouter(); // states @@ -37,6 +38,7 @@ export const ModuleQuickActions: React.FC = observer((props) => { const { getModuleById, restoreModule } = useModule(); // derived values const moduleDetails = getModuleById(moduleId); + const isArchived = !!moduleDetails?.archived_at; // auth const isEditingAllowed = !!currentWorkspaceAllProjectsRole && currentWorkspaceAllProjectsRole[projectId] >= EUserProjectRoles.MEMBER; @@ -44,34 +46,25 @@ export const ModuleQuickActions: React.FC = observer((props) => { const moduleState = moduleDetails?.status?.toLocaleLowerCase(); const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState); - const handleCopyText = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${moduleId}`).then(() => { + const moduleLink = `${workspaceSlug}/projects/${projectId}/modules/${moduleId}`; + const handleCopyText = () => + copyUrlToClipboard(moduleLink).then(() => { setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "Module link copied to clipboard.", }); }); - }; + const handleOpenInNewTab = () => window.open(`/${moduleLink}`, "_blank"); - const handleEditModule = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleEditModule = () => { setTrackElement("Modules page list layout"); setEditModal(true); }; - const handleArchiveModule = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - setArchiveModuleModal(true); - }; + const handleArchiveModule = () => setArchiveModuleModal(true); - const handleRestoreModule = async (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleRestoreModule = async () => await restoreModule(workspaceSlug, projectId, moduleId) .then(() => { setToast({ @@ -88,15 +81,61 @@ export const ModuleQuickActions: React.FC = observer((props) => { message: "Module could not be restored. Please try again.", }) ); - }; - const handleDeleteModule = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); + const handleDeleteModule = () => { setTrackElement("Modules page list layout"); setDeleteModal(true); }; + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + title: "Edit", + icon: Pencil, + action: handleEditModule, + shouldRender: isEditingAllowed && !isArchived, + }, + { + key: "open-new-tab", + action: handleOpenInNewTab, + title: "Open in new tab", + icon: ExternalLink, + shouldRender: !isArchived, + }, + { + key: "copy-link", + action: handleCopyText, + title: "Copy link", + icon: LinkIcon, + shouldRender: !isArchived, + }, + { + key: "archive", + action: handleArchiveModule, + title: "Archive", + description: isInArchivableGroup ? undefined : "Only completed or canceled\nmodule can be archived.", + icon: ArchiveIcon, + className: "items-start", + iconClassName: "mt-1", + shouldRender: isEditingAllowed && !isArchived, + disabled: !isInArchivableGroup, + }, + { + key: "restore", + action: handleRestoreModule, + title: "Restore", + icon: ArchiveRestoreIcon, + shouldRender: isEditingAllowed && isArchived, + }, + { + key: "delete", + action: handleDeleteModule, + title: "Delete", + icon: Trash2, + shouldRender: isEditingAllowed, + }, + ]; + return ( <> {moduleDetails && ( @@ -118,60 +157,42 @@ export const ModuleQuickActions: React.FC = observer((props) => { setDeleteModal(false)} />
)} - - {isEditingAllowed && !isArchived && ( - - - - Edit module - - - )} - {isEditingAllowed && !isArchived && ( - - {isInArchivableGroup ? ( -
- - Archive module -
- ) : ( -
- -
-

Archive module

-

- Only completed or cancelled
module can be archived. + + + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +

+
{item.title}
+ {item.description && ( +

+ {item.description}

-
+ )}
- )} - - )} - {isEditingAllowed && isArchived && ( - - - - Restore module - - - )} - {!isArchived && ( - - - - Copy module link - - - )} -
- {isEditingAllowed && ( - - - - Delete module - - - )} + + ); + })} ); diff --git a/web/components/pages/dropdowns/quick-actions.tsx b/web/components/pages/dropdowns/quick-actions.tsx index f88aa9757..9c311797a 100644 --- a/web/components/pages/dropdowns/quick-actions.tsx +++ b/web/components/pages/dropdowns/quick-actions.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; import { ArchiveRestoreIcon, ExternalLink, Link, Lock, Trash2, UsersRound } from "lucide-react"; -import { ArchiveIcon, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; +import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; // components import { DeletePageModal } from "@/components/pages"; // helpers @@ -11,12 +11,13 @@ import { usePage } from "@/hooks/store"; type Props = { pageId: string; + parentRef: React.RefObject; projectId: string; workspaceSlug: string; }; export const PageQuickActions: React.FC = observer((props) => { - const { pageId, projectId, workspaceSlug } = props; + const { pageId, parentRef, projectId, workspaceSlug } = props; // states const [deletePageModal, setDeletePageModal] = useState(false); // store hooks @@ -44,45 +45,39 @@ export const PageQuickActions: React.FC = observer((props) => { const handleOpenInNewTab = () => window.open(`/${pageLink}`, "_blank"); - const MENU_ITEMS: { - key: string; - action: () => void; - label: string; - icon: React.FC; - shouldRender: boolean; - }[] = [ + const MENU_ITEMS: TContextMenuItem[] = [ { - key: "copy-link", - action: handleCopyText, - label: "Copy link", - icon: Link, - shouldRender: true, + key: "make-public-private", + action: access === 0 ? makePrivate : makePublic, + title: access === 0 ? "Make private" : "Make public", + icon: access === 0 ? Lock : UsersRound, + shouldRender: canCurrentUserChangeAccess && !archived_at, }, { key: "open-new-tab", action: handleOpenInNewTab, - label: "Open in new tab", + title: "Open in new tab", icon: ExternalLink, shouldRender: true, }, + { + key: "copy-link", + action: handleCopyText, + title: "Copy link", + icon: Link, + shouldRender: true, + }, { key: "archive-restore", action: archived_at ? restore : archive, - label: archived_at ? "Restore" : "Archive", + title: archived_at ? "Restore" : "Archive", icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon, shouldRender: canCurrentUserArchivePage, }, - { - key: "make-public-private", - action: access === 0 ? makePrivate : makePublic, - label: access === 0 ? "Make private" : "Make public", - icon: access === 0 ? Lock : UsersRound, - shouldRender: canCurrentUserChangeAccess && !archived_at, - }, { key: "delete", action: () => setDeletePageModal(true), - label: "Delete", + title: "Delete", icon: Trash2, shouldRender: canCurrentUserDeletePage && !!archived_at, }, @@ -96,6 +91,7 @@ export const PageQuickActions: React.FC = observer((props) => { pageId={pageId} projectId={projectId} /> + {MENU_ITEMS.map((item) => { if (!item.shouldRender) return null; @@ -109,8 +105,8 @@ export const PageQuickActions: React.FC = observer((props) => { }} className="flex items-center gap-2" > - - {item.label} + {item.icon && } + {item.title} ); })} diff --git a/web/components/pages/editor/summary/content-browser.tsx b/web/components/pages/editor/summary/content-browser.tsx index c5519eb18..00fd06a66 100644 --- a/web/components/pages/editor/summary/content-browser.tsx +++ b/web/components/pages/editor/summary/content-browser.tsx @@ -26,7 +26,6 @@ export const PageContentBrowser: React.FC = (props) => { return (
-

Outline

{markings.length !== 0 ? ( markings.map((marking) => { diff --git a/web/components/pages/header/root.tsx b/web/components/pages/header/root.tsx index 964209e41..4f902415c 100644 --- a/web/components/pages/header/root.tsx +++ b/web/components/pages/header/root.tsx @@ -14,7 +14,7 @@ import { // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks -import { useLabel, useMember, useProjectPages } from "@/hooks/store"; +import { useMember, useProjectPages } from "@/hooks/store"; type Props = { pageType: TPageNavigationTabs; @@ -29,7 +29,6 @@ export const PagesListHeaderRoot: React.FC = observer((props) => { const { workspace: { workspaceMemberIds }, } = useMember(); - const { projectLabels } = useLabel(); const handleRemoveFilter = useCallback( (key: keyof TPageFilterProps, value: string | null) => { @@ -48,7 +47,7 @@ export const PagesListHeaderRoot: React.FC = observer((props) => { return ( <> -
+
@@ -64,7 +63,6 @@ export const PagesListHeaderRoot: React.FC = observer((props) => { diff --git a/web/components/pages/list/block-item-action.tsx b/web/components/pages/list/block-item-action.tsx new file mode 100644 index 000000000..f9fb57f0f --- /dev/null +++ b/web/components/pages/list/block-item-action.tsx @@ -0,0 +1,95 @@ +import React, { FC } from "react"; +import { observer } from "mobx-react"; +import { Circle, Earth, Info, Lock, Minus } from "lucide-react"; +// ui +import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; +// components +import { FavoriteStar } from "@/components/core"; +import { PageQuickActions } from "@/components/pages/dropdowns"; +// helpers +import { renderFormattedDate } from "@/helpers/date-time.helper"; +// hooks +import { useMember, usePage } from "@/hooks/store"; + +type Props = { + workspaceSlug: string; + projectId: string; + pageId: string; + parentRef: React.RefObject; +}; + +export const BlockItemAction: FC = observer((props) => { + const { workspaceSlug, projectId, pageId, parentRef } = props; + + // store hooks + const { access, created_at, is_favorite, owned_by, addToFavorites, removeFromFavorites } = usePage(pageId); + const { getUserDetails } = useMember(); + + // derived values + const ownerDetails = owned_by ? getUserDetails(owned_by) : undefined; + + // handlers + const handleFavorites = () => { + if (is_favorite) + removeFromFavorites().then(() => + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Success!", + message: "Page removed from favorites.", + }) + ); + else + addToFavorites().then(() => + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Success!", + message: "Page added to favorites.", + }) + ); + }; + return ( + <> + {/* page details */} +
+ {/* Labels + */} +
+ + + +
+ + {/* 10m read + */} +
+ + {access === 0 ? : } + +
+
+ + {/* vertical divider */} + + + {/* page info */} + + + + + + + {/* favorite/unfavorite */} + { + e.preventDefault(); + e.stopPropagation(); + handleFavorites(); + }} + selected={is_favorite} + /> + + {/* quick actions dropdown */} + + + ); +}); diff --git a/web/components/pages/list/block.tsx b/web/components/pages/list/block.tsx index 82a7cedc2..69f667377 100644 --- a/web/components/pages/list/block.tsx +++ b/web/components/pages/list/block.tsx @@ -1,15 +1,11 @@ -import { FC } from "react"; +import { FC, useRef } from "react"; import { observer } from "mobx-react"; -import Link from "next/link"; -import { Circle, Info, Lock, Minus, UsersRound } from "lucide-react"; -import { Avatar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui"; // components -import { FavoriteStar } from "@/components/core"; -import { PageQuickActions } from "@/components/pages"; -// helpers -import { renderFormattedDate } from "@/helpers/date-time.helper"; +import { ListItem } from "@/components/core/list"; +import { BlockItemAction } from "@/components/pages/list"; // hooks -import { useMember, usePage } from "@/hooks/store"; +import { usePage } from "@/hooks/store"; +import { usePlatformOS } from "@/hooks/use-platform-os"; type TPageListBlock = { workspaceSlug: string; @@ -19,85 +15,19 @@ type TPageListBlock = { export const PageListBlock: FC = observer((props) => { const { workspaceSlug, projectId, pageId } = props; + // refs + const parentRef = useRef(null); // hooks - const { access, created_at, is_favorite, name, owned_by, addToFavorites, removeFromFavorites } = usePage(pageId); - const { getUserDetails } = useMember(); - // derived values - const ownerDetails = owned_by ? getUserDetails(owned_by) : undefined; - - const handleFavorites = () => { - if (is_favorite) - removeFromFavorites().then(() => - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Page removed from favorites.", - }) - ); - else - addToFavorites().then(() => - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Success!", - message: "Page added to favorites.", - }) - ); - }; + const { name } = usePage(pageId); + const { isMobile } = usePlatformOS(); return ( - - {/* page title */} - -
{name}
- - - {/* page properties */} -
- {/* page details */} -
- {/* Labels - */} -
- - - -
- - {/* 10m read - */} -
- - {access === 0 ? : } - -
-
- - {/* vertical divider */} - - - {/* page info */} - - - - - - - {/* favorite/unfavorite */} - { - e.preventDefault(); - e.stopPropagation(); - handleFavorites(); - }} - selected={is_favorite} - /> - - {/* quick actions dropdown */} - -
- + } + isMobile={isMobile} + parentRef={parentRef} + /> ); }); diff --git a/web/components/pages/list/filters/index.ts b/web/components/pages/list/filters/index.ts index be7c679b7..e95258f0e 100644 --- a/web/components/pages/list/filters/index.ts +++ b/web/components/pages/list/filters/index.ts @@ -1,4 +1,3 @@ export * from "./created-at"; export * from "./created-by"; -export * from "./labels"; export * from "./root"; diff --git a/web/components/pages/list/filters/labels.tsx b/web/components/pages/list/filters/labels.tsx deleted file mode 100644 index 9a391ca22..000000000 --- a/web/components/pages/list/filters/labels.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useMemo, useState } from "react"; -import sortBy from "lodash/sortBy"; -import { observer } from "mobx-react"; -// types -import { IIssueLabel } from "@plane/types"; -// ui -import { Loader } from "@plane/ui"; -// components -import { FilterHeader, FilterOption } from "@/components/issues"; - -const LabelIcons = ({ color }: { color: string }) => ( - -); - -type Props = { - appliedFilters: string[] | null; - handleUpdate: (val: string) => void; - labels: IIssueLabel[] | undefined; - searchQuery: string; -}; - -export const FilterLabels: React.FC = observer((props) => { - const { appliedFilters, handleUpdate, labels, searchQuery } = props; - - const [itemsToRender, setItemsToRender] = useState(5); - const [previewEnabled, setPreviewEnabled] = useState(true); - - const appliedFiltersCount = appliedFilters?.length ?? 0; - - const sortedOptions = useMemo(() => { - const filteredOptions = (labels || []).filter((label) => - label.name.toLowerCase().includes(searchQuery.toLowerCase()) - ); - - return sortBy(filteredOptions, [ - (label) => !(appliedFilters ?? []).includes(label.id), - (label) => label.name.toLowerCase(), - ]); - }, [appliedFilters, labels, searchQuery]); - - const handleViewToggle = () => { - if (!sortedOptions) return; - - if (itemsToRender === sortedOptions.length) setItemsToRender(5); - else setItemsToRender(sortedOptions.length); - }; - - return ( - <> - 0 ? ` (${appliedFiltersCount})` : ""}`} - isPreviewEnabled={previewEnabled} - handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)} - /> - {previewEnabled && ( -
- {sortedOptions ? ( - sortedOptions.length > 0 ? ( - <> - {sortedOptions.slice(0, itemsToRender).map((label) => ( - handleUpdate(label?.id)} - icon={} - title={label.name} - /> - ))} - {sortedOptions.length > 5 && ( - - )} - - ) : ( -

No matches found

- ) - ) : ( - - - - - - )} -
- )} - - ); -}); diff --git a/web/components/pages/list/filters/root.tsx b/web/components/pages/list/filters/root.tsx index 475f89054..a9a152e0a 100644 --- a/web/components/pages/list/filters/root.tsx +++ b/web/components/pages/list/filters/root.tsx @@ -1,20 +1,19 @@ import { useState } from "react"; import { observer } from "mobx-react-lite"; import { Search, X } from "lucide-react"; -import { IIssueLabel, TPageFilterProps, TPageFilters } from "@plane/types"; +import { TPageFilterProps, TPageFilters } from "@plane/types"; // components import { FilterOption } from "@/components/issues"; -import { FilterCreatedBy, FilterCreatedDate, FilterLabels } from "@/components/pages"; +import { FilterCreatedBy, FilterCreatedDate } from "@/components/pages"; type Props = { filters: TPageFilters; handleFiltersUpdate: (filterKey: T, filterValue: TPageFilters[T]) => void; - labels?: IIssueLabel[] | undefined; memberIds?: string[] | undefined; }; export const PageFiltersSelection: React.FC = observer((props) => { - const { filters, handleFiltersUpdate, labels, memberIds } = props; + const { filters, handleFiltersUpdate, memberIds } = props; // states const [filtersSearchQuery, setFiltersSearchQuery] = useState(""); @@ -93,16 +92,6 @@ export const PageFiltersSelection: React.FC = observer((props) => { memberIds={memberIds} />
- - {/* labels */} -
- handleFilters("labels", val)} - searchQuery={filtersSearchQuery} - labels={labels} - /> -
); diff --git a/web/components/pages/list/index.ts b/web/components/pages/list/index.ts index b8270f3f2..88f7633a0 100644 --- a/web/components/pages/list/index.ts +++ b/web/components/pages/list/index.ts @@ -1,6 +1,7 @@ export * from "./applied-filters"; export * from "./filters"; export * from "./block"; +export * from "./block-item-action"; export * from "./order-by"; export * from "./root"; export * from "./search-input"; diff --git a/web/components/pages/list/root.tsx b/web/components/pages/list/root.tsx index 226bdaf70..edfdba596 100644 --- a/web/components/pages/list/root.tsx +++ b/web/components/pages/list/root.tsx @@ -2,6 +2,8 @@ import { FC } from "react"; import { observer } from "mobx-react"; // types import { TPageNavigationTabs } from "@plane/types"; +// components +import { ListLayout } from "@/components/core/list"; // hooks import { useProjectPages } from "@/hooks/store"; // components @@ -22,10 +24,10 @@ export const PagesListRoot: FC = observer((props) => { if (!filteredPageIds) return <>; return ( -
+ {filteredPageIds.map((pageId) => ( ))} -
+ ); }); diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx index e33f3f20f..3d536a7c0 100644 --- a/web/components/project/card.tsx +++ b/web/components/project/card.tsx @@ -1,12 +1,22 @@ -import React, { useState } from "react"; -import { observer } from "mobx-react"; +import React, { useRef, useState } from "react"; +import { observer } from "mobx-react-lite"; import Link from "next/link"; import { useRouter } from "next/router"; -import { ArchiveRestoreIcon, Check, LinkIcon, Lock, Pencil, Trash2 } from "lucide-react"; +import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Pencil, Trash2, UserPlus } from "lucide-react"; // types import type { IProject } from "@plane/types"; // ui -import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui"; +import { + Avatar, + AvatarGroup, + Button, + Tooltip, + TOAST_TYPE, + setToast, + setPromiseToast, + ContextMenu, + TContextMenuItem, +} from "@plane/ui"; // components import { FavoriteStar } from "@/components/core"; import { ArchiveRestoreProjectModal, DeleteProjectModal, JoinProjectModal, ProjectLogo } from "@/components/project"; @@ -30,6 +40,8 @@ export const ProjectCard: React.FC = observer((props) => { const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false); const [joinProjectModalOpen, setJoinProjectModal] = useState(false); const [restoreProject, setRestoreProject] = useState(false); + // refs + const projectCardRef = useRef(null); // router const router = useRouter(); const { workspaceSlug } = router.query; @@ -80,14 +92,61 @@ export const ProjectCard: React.FC = observer((props) => { }); }; + const projectLink = `${workspaceSlug}/projects/${project.id}/issues`; const handleCopyText = () => - copyUrlToClipboard(`${workspaceSlug}/projects/${project.id}/issues`).then(() => + copyUrlToClipboard(projectLink).then(() => setToast({ type: TOAST_TYPE.SUCCESS, title: "Link Copied!", message: "Project link copied to clipboard.", }) ); + const handleOpenInNewTab = () => window.open(`/${projectLink}`, "_blank"); + + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + action: () => router.push(`/${workspaceSlug}/projects/${project.id}/settings`), + title: "Edit", + icon: Pencil, + shouldRender: !isArchived && (isOwner || isMember), + }, + { + key: "join", + action: () => setJoinProjectModal(true), + title: "Join", + icon: UserPlus, + shouldRender: !project.is_member && !isArchived, + }, + { + key: "open-new-tab", + action: handleOpenInNewTab, + title: "Open in new tab", + icon: ExternalLink, + shouldRender: project.is_member, + }, + { + key: "copy-link", + action: handleCopyText, + title: "Copy link", + icon: LinkIcon, + shouldRender: true, + }, + { + key: "restore", + action: () => setRestoreProject(true), + title: "Restore", + icon: ArchiveRestoreIcon, + shouldRender: isArchived && isOwner, + }, + { + key: "delete", + action: () => setDeleteProjectModal(true), + title: "Delete", + icon: Trash2, + shouldRender: isArchived && isOwner, + }, + ]; return ( <> @@ -117,6 +176,7 @@ export const ProjectCard: React.FC = observer((props) => { /> )} { if (!project.is_member || isArchived) { @@ -127,6 +187,7 @@ export const ProjectCard: React.FC = observer((props) => { }} className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100" > +
diff --git a/web/components/views/index.ts b/web/components/views/index.ts index b7ebe5081..2a2a02dc7 100644 --- a/web/components/views/index.ts +++ b/web/components/views/index.ts @@ -1,5 +1,7 @@ export * from "./delete-view-modal"; export * from "./form"; export * from "./modal"; +export * from "./quick-actions"; export * from "./view-list-item"; export * from "./views-list"; +export * from "./view-list-item-action"; diff --git a/web/components/views/quick-actions.tsx b/web/components/views/quick-actions.tsx new file mode 100644 index 000000000..c9993169b --- /dev/null +++ b/web/components/views/quick-actions.tsx @@ -0,0 +1,126 @@ +import { useState } from "react"; +import { observer } from "mobx-react"; +import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react"; +// types +import { IProjectView } from "@plane/types"; +// ui +import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui"; +// components +import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views"; +// constants +import { EUserProjectRoles } from "@/constants/project"; +// helpers +import { cn } from "@/helpers/common.helper"; +import { copyUrlToClipboard } from "@/helpers/string.helper"; +// hooks +import { useUser } from "@/hooks/store"; + +type Props = { + parentRef: React.RefObject; + projectId: string; + view: IProjectView; + workspaceSlug: string; +}; + +export const ViewQuickActions: React.FC = observer((props) => { + const { parentRef, projectId, view, workspaceSlug } = props; + // states + const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false); + const [deleteViewModal, setDeleteViewModal] = useState(false); + // store hooks + const { + membership: { currentProjectRole }, + } = useUser(); + // auth + const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; + + const viewLink = `${workspaceSlug}/projects/${projectId}/views/${view.id}`; + const handleCopyText = () => + copyUrlToClipboard(viewLink).then(() => { + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Link Copied!", + message: "View link copied to clipboard.", + }); + }); + const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank"); + + const MENU_ITEMS: TContextMenuItem[] = [ + { + key: "edit", + action: () => setCreateUpdateViewModal(true), + title: "Edit", + icon: Pencil, + shouldRender: isEditingAllowed, + }, + { + key: "open-new-tab", + action: handleOpenInNewTab, + title: "Open in new tab", + icon: ExternalLink, + }, + { + key: "copy-link", + action: handleCopyText, + title: "Copy link", + icon: Link, + }, + { + key: "delete", + action: () => setDeleteViewModal(true), + title: "Delete", + icon: Trash2, + shouldRender: isEditingAllowed, + }, + ]; + + return ( + <> + setCreateUpdateViewModal(false)} + workspaceSlug={workspaceSlug} + projectId={projectId} + data={view} + /> + setDeleteViewModal(false)} /> + + + {MENU_ITEMS.map((item) => { + if (item.shouldRender === false) return null; + return ( + { + e.preventDefault(); + e.stopPropagation(); + item.action(); + }} + className={cn( + "flex items-center gap-2", + { + "text-custom-text-400": item.disabled, + }, + item.className + )} + > + {item.icon && } +
+
{item.title}
+ {item.description && ( +

+ {item.description} +

+ )} +
+ + ); + })} + + + ); +}); diff --git a/web/components/views/view-list-item-action.tsx b/web/components/views/view-list-item-action.tsx new file mode 100644 index 000000000..0c72d0dca --- /dev/null +++ b/web/components/views/view-list-item-action.tsx @@ -0,0 +1,89 @@ +import React, { FC, useState } from "react"; +import { observer } from "mobx-react"; +import { useRouter } from "next/router"; +// types +import { IProjectView } from "@plane/types"; +// components +import { FavoriteStar } from "@/components/core"; +import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions } from "@/components/views"; +// constants +import { EUserProjectRoles } from "@/constants/project"; +// helpers +import { calculateTotalFilters } from "@/helpers/filter.helper"; +// hooks +import { useProjectView, useUser } from "@/hooks/store"; + +type Props = { + parentRef: React.RefObject; + view: IProjectView; +}; + +export const ViewListItemAction: FC = observer((props) => { + const { parentRef, view } = props; + // states + const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false); + const [deleteViewModal, setDeleteViewModal] = useState(false); + // router + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + // store + const { + membership: { currentProjectRole }, + } = useUser(); + const { addViewToFavorites, removeViewFromFavorites } = useProjectView(); + + // derived values + const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; + // @ts-expect-error key types are not compatible + const totalFilters = calculateTotalFilters(view.filters ?? {}); + + // handlers + const handleAddToFavorites = () => { + if (!workspaceSlug || !projectId) return; + + addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id); + }; + + const handleRemoveFromFavorites = () => { + if (!workspaceSlug || !projectId) return; + + removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id); + }; + + return ( + <> + {workspaceSlug && projectId && view && ( + setCreateUpdateViewModal(false)} + workspaceSlug={workspaceSlug.toString()} + projectId={projectId.toString()} + data={view} + /> + )} + setDeleteViewModal(false)} /> +

+ {totalFilters} {totalFilters === 1 ? "filter" : "filters"} +

+ {isEditingAllowed && ( + { + e.preventDefault(); + e.stopPropagation(); + if (view.is_favorite) handleRemoveFromFavorites(); + else handleAddToFavorites(); + }} + selected={view.is_favorite} + /> + )} + {projectId && workspaceSlug && ( + + )} + + ); +}); diff --git a/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx index e77893f7c..e7e36c92e 100644 --- a/web/components/views/view-list-item.tsx +++ b/web/components/views/view-list-item.tsx @@ -1,151 +1,35 @@ -import React, { useState } from "react"; -import { observer } from "mobx-react"; -import Link from "next/link"; +import { FC, useRef } from "react"; +import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; -import { LinkIcon, PencilIcon, TrashIcon } from "lucide-react"; // types import { IProjectView } from "@plane/types"; -// ui -import { CustomMenu, TOAST_TYPE, setToast } from "@plane/ui"; // components -import { FavoriteStar } from "@/components/core"; -import { CreateUpdateProjectViewModal, DeleteProjectViewModal } from "@/components/views"; -// constants -import { EUserProjectRoles } from "@/constants/project"; -// helpers -import { calculateTotalFilters } from "@/helpers/filter.helper"; -import { copyUrlToClipboard } from "@/helpers/string.helper"; +import { ListItem } from "@/components/core/list"; +import { ViewListItemAction } from "@/components/views"; // hooks -import { useProjectView, useUser } from "@/hooks/store"; +import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { view: IProjectView; }; -export const ProjectViewListItem: React.FC = observer((props) => { +export const ProjectViewListItem: FC = observer((props) => { const { view } = props; - // states - const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false); - const [deleteViewModal, setDeleteViewModal] = useState(false); + // refs + const parentRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks - const { - membership: { currentProjectRole }, - } = useUser(); - const { addViewToFavorites, removeViewFromFavorites } = useProjectView(); - - const handleAddToFavorites = () => { - if (!workspaceSlug || !projectId) return; - - addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id); - }; - - const handleRemoveFromFavorites = () => { - if (!workspaceSlug || !projectId) return; - - removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id); - }; - - const handleCopyText = (e: React.MouseEvent) => { - e.stopPropagation(); - e.preventDefault(); - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/views/${view.id}`).then(() => { - setToast({ - type: TOAST_TYPE.SUCCESS, - title: "Link Copied!", - message: "View link copied to clipboard.", - }); - }); - }; - - // @ts-expect-error key types are not compatible - const totalFilters = calculateTotalFilters(view.filters ?? {}); - - const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; + const { isMobile } = usePlatformOS(); return ( - <> - {workspaceSlug && projectId && view && ( - setCreateUpdateViewModal(false)} - workspaceSlug={workspaceSlug.toString()} - projectId={projectId.toString()} - data={view} - /> - )} - setDeleteViewModal(false)} /> -
- -
-
-
-
-

{view.name}

- {view?.description &&

{view.description}

} -
-
-
-
-

- {totalFilters} {totalFilters === 1 ? "filter" : "filters"} -

- {isEditingAllowed && ( - { - e.preventDefault(); - e.stopPropagation(); - if (view.is_favorite) handleRemoveFromFavorites(); - else handleAddToFavorites(); - }} - selected={view.is_favorite} - /> - )} - - - {isEditingAllowed && ( - <> - { - e.preventDefault(); - e.stopPropagation(); - setCreateUpdateViewModal(true); - }} - > - - - Edit View - - - { - e.preventDefault(); - e.stopPropagation(); - setDeleteViewModal(true); - }} - > - - - Delete View - - - - )} - - - - Copy view link - - - -
-
-
-
- -
- + } + isMobile={isMobile} + parentRef={parentRef} + /> ); }); diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx index b2ffbf942..967469c79 100644 --- a/web/components/views/views-list.tsx +++ b/web/components/views/views-list.tsx @@ -1,53 +1,117 @@ -import { useState } from "react"; -import { observer } from "mobx-react"; -import { Search } from "lucide-react"; -// hooks +import { useRef, useState } from "react"; +import { observer } from "mobx-react-lite"; +// ui +import { Search, X } from "lucide-react"; // components -import { Input } from "@plane/ui"; +import { ListLayout } from "@/components/core/list"; import { EmptyState } from "@/components/empty-state"; import { ViewListLoader } from "@/components/ui"; import { ProjectViewListItem } from "@/components/views"; -// ui // constants import { EmptyStateType } from "@/constants/empty-state"; +// helper +import { cn } from "@/helpers/common.helper"; +// hooks import { useCommandPalette, useProjectView } from "@/hooks/store"; +import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; export const ProjectViewsList = observer(() => { // states - const [query, setQuery] = useState(""); + const [searchQuery, setSearchQuery] = useState(""); + const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false); + + // refs + const inputRef = useRef(null); + // store hooks const { toggleCreateViewModal } = useCommandPalette(); const { projectViewIds, getViewById, loader } = useProjectView(); + // outside click detector hook + useOutsideClickDetector(inputRef, () => { + if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false); + }); + if (loader || !projectViewIds) return ; + // derived values const viewsList = projectViewIds.map((viewId) => getViewById(viewId)); - const filteredViewsList = viewsList.filter((v) => v?.name.toLowerCase().includes(query.toLowerCase())); + const filteredViewsList = viewsList.filter((v) => v?.name.toLowerCase().includes(searchQuery.toLowerCase())); + + // handlers + const handleInputKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Escape") { + if (searchQuery && searchQuery.trim() !== "") setSearchQuery(""); + else { + setIsSearchOpen(false); + inputRef.current?.blur(); + } + } + }; return ( <> {viewsList.length > 0 ? (
-
-
- - setQuery(e.target.value)} - placeholder="Search" - mode="true-transparent" - /> +
+
+ Project Views +
+
+
+ {!isSearchOpen && ( + + )} +
+ + setSearchQuery(e.target.value)} + onKeyDown={handleInputKeyDown} + /> + {isSearchOpen && ( + + )} +
+
-
+ {filteredViewsList.length > 0 ? ( filteredViewsList.map((view) => ) ) : (

No results found

)} -
+
) : ( toggleCreateViewModal(true)} /> diff --git a/web/constants/dashboard.ts b/web/constants/dashboard.ts index 79ba0c1ed..1a408d04f 100644 --- a/web/constants/dashboard.ts +++ b/web/constants/dashboard.ts @@ -132,7 +132,7 @@ export const DURATION_FILTER_OPTIONS: { }[] = [ { key: EDurationFilters.NONE, - label: "None", + label: "All time", }, { key: EDurationFilters.TODAY, diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts index 2ac7dc7bd..614994767 100644 --- a/web/helpers/issue.helper.ts +++ b/web/helpers/issue.helper.ts @@ -1,13 +1,6 @@ import differenceInCalendarDays from "date-fns/differenceInCalendarDays"; import { v4 as uuidv4 } from "uuid"; -// helpers -import { getDate } from "@/helpers/date-time.helper"; -import { orderArrayBy } from "@/helpers/array.helper"; // types -import { IGanttBlock } from "@/components/gantt-chart"; -// constants -import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; -import { STATE_GROUPS } from "@/constants/state"; import { TIssue, TIssueGroupByOptions, @@ -16,6 +9,13 @@ import { TIssueParams, TStateGroups, } from "@plane/types"; +import { IGanttBlock } from "@/components/gantt-chart"; +// constants +import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue"; +import { STATE_GROUPS } from "@/constants/state"; +// helpers +import { orderArrayBy } from "@/helpers/array.helper"; +import { getDate } from "@/helpers/date-time.helper"; type THandleIssuesMutation = ( formData: Partial, @@ -205,3 +205,9 @@ export const formatTextList = (TextArray: string[]): string => { return `${TextArray.slice(0, 3).join(", ")}, and +${count - 3} more`; } }; + +export const getDescriptionPlaceholder = (isFocused: boolean, description: string | undefined): string => { + const isDescriptionEmpty = !description || description === "

" || description.trim() === ""; + if (!isDescriptionEmpty || isFocused) return "Press '/' for commands..."; + else return "Click to add description"; +}; diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx index 22973347f..cecaf01f1 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx @@ -7,7 +7,7 @@ import { TModuleFilters } from "@plane/types"; import { PageHead } from "@/components/core"; import { EmptyState } from "@/components/empty-state"; import { ModulesListHeader } from "@/components/headers"; -import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules"; +import { ModuleAppliedFiltersList, ModuleViewHeader, ModulesListView } from "@/components/modules"; // types // hooks import ModulesListMobileHeader from "@/components/modules/moduels-list-mobile-header"; @@ -57,6 +57,12 @@ const ProjectModulesPage: NextPageWithLayout = observer(() => { <>
+
+
+ Module name +
+ +
{calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
{ const { type } = router.query; // store hooks const { workspaceSlug, projectId } = useAppRouter(); + const { getProjectById } = useProject(); + // derived values + const project = projectId ? getProjectById(projectId.toString()) : undefined; + const pageTitle = project?.name ? `${project?.name} - Pages` : undefined; const currentPageType = (): TPageNavigationTabs => { const pageType = type?.toString(); @@ -29,17 +34,20 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => { if (!workspaceSlug || !projectId) return <>; return ( - - + + - + pageType={currentPageType()} + > + + + ); }); diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx index 1b54e3f66..234f70469 100644 --- a/web/pages/_document.tsx +++ b/web/pages/_document.tsx @@ -41,6 +41,7 @@ class MyDocument extends Document { )} +
{process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && ( diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts index a9672655b..f6ad0a307 100644 --- a/web/store/issue/issue-details/root.store.ts +++ b/web/store/issue/issue-details/root.store.ts @@ -54,6 +54,8 @@ export interface IIssueDetail isDeleteAttachmentModalOpen: boolean; // computed isAnyModalOpen: boolean; + // helper actions + getIsIssuePeeked: (issueId: string) => boolean; // actions setPeekIssue: (peekIssue: TPeekIssue | undefined) => void; toggleCreateIssueModal: (value: boolean) => void; @@ -156,6 +158,9 @@ export class IssueDetail implements IIssueDetail { ); } + // helper actions + getIsIssuePeeked = (issueId: string) => this.peekIssue?.issueId === issueId; + // actions setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue); toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);