github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: merge develop

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-18 18:48:09 +05:30
commit 9d2e0e29e7
97 changed files with 1200 additions and 379 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.github/workflows/create-sync-pr.yml vendored
View File

@ -3,7 +3,7 @@ name: Create Sync Action
on:
pull_request:
branches:
- develop # Change this to preview
- preview
types:
- closed
env:
@ -33,23 +33,14 @@ jobs:
sudo apt update
sudo apt install gh -y
- name: Create Pull Request
- name: Push Changes to Target Repo
env:
GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
run: |
TARGET_REPO="${{ secrets.SYNC_TARGET_REPO_NAME }}"
TARGET_BRANCH="${{ secrets.SYNC_TARGET_BRANCH_NAME }}"
TARGET_BASE_BRANCH="${{ secrets.SYNC_TARGET_BASE_BRANCH_NAME }}"
SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
git checkout $SOURCE_BRANCH
git remote add target-origin "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
git push target-origin $SOURCE_BRANCH:$TARGET_BRANCH
PR_TITLE=${{secrets.SYNC_PR_TITLE}}
gh pr create \
--base $TARGET_BASE_BRANCH \
--head $TARGET_BRANCH \
--title "$PR_TITLE" \
--repo $TARGET_REPO
git push target-origin $SOURCE_BRANCH:$TARGET_BRANCH

33
apiserver/plane/app/views/project.py
View File

@ -999,11 +999,18 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
def get(self, request):
files = []
s3 = boto3.client(
"s3",
aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
)
s3_client_params = {
"service_name": "s3",
"aws_access_key_id": settings.AWS_ACCESS_KEY_ID,
"aws_secret_access_key": settings.AWS_SECRET_ACCESS_KEY,
}
# Use AWS_S3_ENDPOINT_URL if it is present in the settings
if hasattr(settings, "AWS_S3_ENDPOINT_URL") and settings.AWS_S3_ENDPOINT_URL:
s3_client_params["endpoint_url"] = settings.AWS_S3_ENDPOINT_URL
s3 = boto3.client(**s3_client_params)
params = {
"Bucket": settings.AWS_STORAGE_BUCKET_NAME,
"Prefix": "static/project-cover/",
@ -1016,9 +1023,19 @@ class ProjectPublicCoverImagesEndpoint(BaseAPIView):
if not content["Key"].endswith(
"/"
): # This line ensures we're only getting files, not "sub-folders"
files.append(
f"https://{settings.AWS_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
)
if (
hasattr(settings, "AWS_S3_CUSTOM_DOMAIN")
and settings.AWS_S3_CUSTOM_DOMAIN
and hasattr(settings, "AWS_S3_URL_PROTOCOL")
and settings.AWS_S3_URL_PROTOCOL
):
files.append(
f"{settings.AWS_S3_URL_PROTOCOL}//{settings.AWS_S3_CUSTOM_DOMAIN}/{content['Key']}"
)
else:
files.append(
f"https://{settings.AWS_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
)
return Response(files, status=status.HTTP_200_OK)

2
apiserver/requirements/base.txt
View File

@ -30,7 +30,7 @@ openpyxl==3.1.2
beautifulsoup4==4.12.2
dj-database-url==2.1.0
posthog==3.0.2
cryptography==41.0.5
cryptography==41.0.6
lxml==4.9.3
boto3==1.28.40

2
deploy/selfhost/install.sh
View File

@ -39,7 +39,7 @@ function download(){
echo ""
echo "Latest version is now available for you to use"
echo ""
echo "In case of Upgrade, your new setting file is availabe as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
echo "In case of Upgrade, your new setting file is available as 'variables-upgrade.env'. Please compare and set the required values in '.env 'file."
echo ""
}

2
web/components/common/new-empty-state.tsx
View File

@ -19,7 +19,7 @@ type Props = {
icon?: any;
text: string;
onClick: () => void;
};
} | null;
disabled?: boolean;
};

30
web/components/core/modals/bulk-delete-issues-modal.tsx
View File

@ -1,14 +1,14 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// react hook form
import { observer } from "mobx-react-lite";
import { SubmitHandler, useForm } from "react-hook-form";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
import useSWR from "swr";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast";
// services
import { IssueService } from "services/issue";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, LayersIcon } from "@plane/ui";
// icons
@ -30,17 +30,25 @@ type Props = {
const issueService = new IssueService();
export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose } = props;
// states
const [query, setQuery] = useState("");
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// states
const [query, setQuery] = useState("");
// store hooks
const {
user: { hasPermissionToCurrentProject },
} = useMobxStore();
// fetching project issues.
const { data: issues } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
workspaceSlug && projectId && hasPermissionToCurrentProject
? PROJECT_ISSUES_LIST(workspaceSlug.toString(), projectId.toString())
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => issueService.getIssues(workspaceSlug.toString(), projectId.toString())
: null
);
const { setToastAlert } = useToast();
@ -222,4 +230,4 @@ export const BulkDeleteIssuesModal: React.FC<Props> = (props) => {
</Dialog>
</Transition.Root>
);
};
});

26
web/components/core/sidebar/links-list.tsx
View File

@ -50,8 +50,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
</Tooltip>
</div>
{!isNotAllowed && (
<div className="z-[1] flex flex-shrink-0 items-center gap-2">
<div className="z-[1] flex flex-shrink-0 items-center gap-2">
{!isNotAllowed && (
<button
type="button"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@ -63,14 +63,16 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
>
<Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
</button>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
>
<ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
</a>
)}
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
>
<ExternalLinkIcon className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
</a>
{!isNotAllowed && (
<button
type="button"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
@ -82,8 +84,8 @@ export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEdit
>
<Trash2 className="h-3 w-3" />
</button>
</div>
)}
)}
</div>
</div>
<div className="px-5">
<p className="mt-0.5 stroke-[1.5] text-xs text-custom-text-300">

42
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -14,6 +14,7 @@ import { SingleProgressStats } from "components/core";
import { Avatar, StateGroupIcon } from "@plane/ui";
// types
import {
IIssueFilterOptions,
IModule,
TAssigneesDistribution,
TCompletionChartDistribution,
@ -35,6 +36,9 @@ type Props = {
roundedTab?: boolean;
noBackground?: boolean;
isPeekView?: boolean;
isCompleted?: boolean;
filters?: IIssueFilterOptions;
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
};
export const SidebarProgressStats: React.FC<Props> = ({
@ -44,7 +48,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
module,
roundedTab,
noBackground,
isCompleted = false,
isPeekView = false,
filters,
handleFiltersUpdate,
}) => {
const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
@ -140,20 +147,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
completed={assignee.completed_issues}
total={assignee.total_issues}
{...(!isPeekView && {
onClick: () => {
// TODO: set filters here
// if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
// setFilters({
// assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
// });
// else
// setFilters({
// assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
// });
},
// selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
})}
{...(!isPeekView &&
!isCompleted && {
onClick: () => handleFiltersUpdate("assignees", assignee.assignee_id ?? ""),
selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
})}
/>
);
else
@ -200,17 +198,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
}
completed={label.completed_issues}
total={label.total_issues}
{...(!isPeekView && {
// TODO: set filters here
onClick: () => {
// if (filters.labels?.includes(label.label_id ?? ""))
// setFilters({
// labels: filters?.labels?.filter((l) => l !== label.label_id),
// });
// else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
},
// selected: filters?.labels?.includes(label.label_id ?? ""),
})}
{...(!isPeekView &&
!isCompleted && {
onClick: () => handleFiltersUpdate("labels", label.label_id ?? ""),
selected: filters?.labels?.includes(label.label_id ?? `no-label-${index}`),
})}
/>
))
) : (

35
web/components/cycles/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useForm } from "react-hook-form";
@ -28,7 +28,8 @@ import {
renderShortMonthDate,
} from "helpers/date-time.helper";
// types
import { ICycle } from "types";
import { ICycle, IIssueFilterOptions } from "types";
import { EFilterType } from "store/issues/types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
// fetch-keys
@ -52,12 +53,20 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId, peekCycle } = router.query;
// store hooks
const {
<<<<<<< HEAD
eventTracker: { setTrackElement },
} = useApplication();
const {
membership: { currentProjectRole },
} = useUser();
const { getCycleById, updateCycleDetails } = useCycle();
=======
cycle: cycleDetailsStore,
cycleIssuesFilter: { issueFilters, updateFilters },
trackEvent: { setTrackElement },
user: { currentProjectRole },
} = useMobxStore();
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const cycleDetails = getCycleById(cycleId);
@ -246,6 +255,25 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
}
};
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, cycleId);
},
[workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
);
const cycleStatus =
cycleDetails?.start_date && cycleDetails?.end_date
? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
@ -539,6 +567,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
}}
totalIssues={cycleDetails.total_issues}
isPeekView={Boolean(peekCycle)}
isCompleted={isCompleted}
filters={issueFilters?.filters}
handleFiltersUpdate={handleFiltersUpdate}
/>
</div>
)}

27
web/components/instance/email-form.tsx
View File

@ -20,6 +20,7 @@ export interface EmailFormValues {
EMAIL_HOST_PASSWORD: string;
EMAIL_USE_TLS: string;
// EMAIL_USE_SSL: string;
EMAIL_FROM: string;
}
export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
@ -44,6 +45,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
// EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
EMAIL_FROM: config["EMAIL_FROM"],
},
});
@ -167,6 +169,31 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
</div>
</div>
</div>
<div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
<div className="flex flex-col gap-1">
<h4 className="text-sm">From address</h4>
<Controller
control={control}
name="EMAIL_FROM"
render={({ field: { value, onChange, ref } }) => (
<Input
id="EMAIL_FROM"
name="EMAIL_FROM"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.EMAIL_FROM)}
placeholder="no-reply@projectplane.so"
className="w-full rounded-md font-medium"
/>
)}
/>
<p className="text-xs text-custom-text-400">
You will have to verify your email address to being sending emails.
</p>
</div>
</div>
<div className="flex w-full max-w-md flex-col gap-y-8 px-1">
<div className="mr-8 flex items-center gap-10 pt-4">

29
web/components/issues/attachment/attachments.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react";
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
@ -24,7 +24,14 @@ import { IIssueAttachment } from "types";
const issueAttachmentService = new IssueAttachmentService();
const projectMemberService = new ProjectMemberService();
export const IssueAttachments = () => {
type Props = {
editable: boolean;
};
export const IssueAttachments: React.FC<Props> = (props) => {
const { editable } = props;
// states
const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
@ -86,14 +93,16 @@ export const IssueAttachments = () => {
</div>
</Link>
<button
onClick={() => {
setDeleteAttachment(file);
setAttachmentDeleteModal(true);
}}
>
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
{editable && (
<button
onClick={() => {
setDeleteAttachment(file);
setAttachmentDeleteModal(true);
}}
>
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
)}
</div>
))}
</>

8
web/components/issues/description-form.tsx
View File

@ -135,7 +135,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
debouncedFormSave();
}}
required
className="min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
!isAllowed ? "hover:cursor-not-allowed" : ""
}`}
hasError={Boolean(errors?.description)}
role="textbox"
disabled={!isAllowed}
@ -170,7 +172,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
customClassName={
isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
}
noBorder={!isAllowed}
onChange={(description: Object, description_html: string) => {
setShowAlert(true);

1
web/components/issues/form.tsx
View File

@ -224,6 +224,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
reset({
...defaultValues,
...initialData,
project: projectId,
});
}, [setFocus, initialData, reset]);

4
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -120,8 +120,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={async (issueToUpdate) =>
await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, EIssueActions.UPDATE)
handleIssue={async (issueToUpdate, action: EIssueActions) =>
await handleIssues(issueToUpdate.target_date ?? "", issueToUpdate as IIssue, action)
}
/>
)}

34
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -9,7 +9,14 @@ import { Tooltip } from "@plane/ui";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// types
import { IIssue } from "types";
<<<<<<< HEAD
import { IIssueResponse } from "store_legacy/issues/types";
=======
import { IIssueResponse } from "store/issues/types";
import { useMobxStore } from "lib/mobx/store-provider";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
type Props = {
issues: IIssueResponse | undefined;
@ -26,15 +33,24 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
// states
const [isMenuActive, setIsMenuActive] = useState(false);
// mobx store
const {
user: { currentProjectRole },
} = useMobxStore();
const menuActionRef = useRef<HTMLDivElement | null>(null);
const handleIssuePeekOverview = (issue: IIssue) => {
const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
}
};
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@ -51,6 +67,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
</div>
);
const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
return (
<>
{issueIdList?.slice(0, showAllIssues ? issueIdList.length : 4).map((issueId, index) => {
@ -58,14 +76,14 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
const issue = issues?.[issueId];
return (
<Draggable key={issue.id} draggableId={issue.id} index={index}>
<Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={!isEditable}>
{(provided, snapshot) => (
<div
className="relative cursor-pointer p-1 px-2"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
onClick={() => handleIssuePeekOverview(issue)}
onClick={(e) => handleIssuePeekOverview(issue, e)}
>
{issue?.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />

20
web/components/issues/issue-layouts/empty-states/project.tsx
View File

@ -34,14 +34,18 @@ export const ProjectEmptyState: React.FC = observer(() => {
description:
"Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
}}
primaryButton={{
text: "Create your first issue",
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("PROJECT_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
},
}}
primaryButton={
isEditingAllowed
? {
text: "Create your first issue",
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("PROJECT_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
},
}
: null
}
disabled={!isEditingAllowed}
/>
</div>

37
web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
@ -23,9 +23,17 @@ import {
IProjectIssuesStore,
IViewIssuesFilterStore,
IViewIssuesStore,
<<<<<<< HEAD
} from "store_legacy/issues";
import { TUnGroupedIssues } from "store_legacy/issues/types";
import { EUserProjectRoles } from "constants/project";
=======
} from "store/issues";
import { TUnGroupedIssues } from "store/issues/types";
import { EIssueActions } from "../types";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
interface IBaseGanttRoot {
issueFiltersStore:
@ -35,11 +43,21 @@ interface IBaseGanttRoot {
| IViewIssuesFilterStore;
issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
viewId?: string;
issueActions: {
[EIssueActions.DELETE]: (issue: IIssue) => Promise<void>;
[EIssueActions.UPDATE]?: (issue: IIssue) => Promise<void>;
[EIssueActions.REMOVE]?: (issue: IIssue) => Promise<void>;
};
}
export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
<<<<<<< HEAD
const { issueFiltersStore, issueStore, viewId } = props;
// router
=======
const { issueFiltersStore, issueStore, viewId, issueActions } = props;
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const router = useRouter();
const { workspaceSlug, peekIssueId, peekProjectId } = router.query;
// store hooks
@ -64,11 +82,14 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
await issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, payload, viewId);
};
const updateIssue = async (projectId: string, issueId: string, payload: Partial<IIssue>) => {
if (!workspaceSlug) return;
await issueStore.updateIssue(workspaceSlug.toString(), projectId, issueId, payload, viewId);
};
const handleIssues = useCallback(
async (issue: IIssue, action: EIssueActions) => {
if (issueActions[action]) {
await issueActions[action]!(issue);
}
},
[issueActions]
);
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
@ -102,8 +123,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={async (issueToUpdate) => {
await updateIssue(peekProjectId.toString(), peekIssueId.toString(), issueToUpdate);
handleIssue={async (issueToUpdate, action) => {
await handleIssues(issueToUpdate as IIssue, action);
}}
/>
)}

16
web/components/issues/issue-layouts/gantt/blocks.tsx
View File

@ -9,13 +9,17 @@ import { IIssue } from "types";
export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
const router = useRouter();
const handleIssuePeekOverview = () => {
const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${data?.workspace_detail.slug}/projects/${data?.project_detail.id}/issues/${data?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
});
}
};
return (

30
web/components/issues/issue-layouts/gantt/cycle-root.tsx
View File

@ -4,15 +4,43 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseGanttRoot } from "./base-gantt-root";
import { useRouter } from "next/router";
// types
import { EIssueActions } from "../types";
import { IIssue } from "types";
export const CycleGanttLayout: React.FC = observer(() => {
const router = useRouter();
const { cycleId } = router.query;
const { cycleId, workspaceSlug } = router.query;
const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
await cycleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, cycleId.toString());
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
await cycleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, cycleId.toString());
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
await cycleIssueStore.removeIssueFromCycle(
workspaceSlug.toString(),
issue.project,
cycleId.toString(),
issue.id,
issue.bridge_id
);
},
};
return (
<BaseGanttRoot
issueActions={issueActions}
issueFiltersStore={cycleIssueFilterStore}
issueStore={cycleIssueStore}
viewId={cycleId?.toString()}

30
web/components/issues/issue-layouts/gantt/module-root.tsx
View File

@ -4,15 +4,43 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseGanttRoot } from "./base-gantt-root";
import { useRouter } from "next/router";
// types
import { EIssueActions } from "../types";
import { IIssue } from "types";
export const ModuleGanttLayout: React.FC = observer(() => {
const router = useRouter();
const { moduleId } = router.query;
const { moduleId, workspaceSlug } = router.query;
const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
await moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId.toString());
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
await moduleIssueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id, moduleId.toString());
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
await moduleIssueStore.removeIssueFromModule(
workspaceSlug.toString(),
issue.project,
moduleId.toString(),
issue.id,
issue.bridge_id
);
},
};
return (
<BaseGanttRoot
issueActions={issueActions}
issueFiltersStore={moduleIssueFilterStore}
issueStore={moduleIssueStore}
viewId={moduleId?.toString()}

26
web/components/issues/issue-layouts/gantt/project-root.tsx
View File

@ -1,12 +1,36 @@
import React from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseGanttRoot } from "./base-gantt-root";
// types
import { EIssueActions } from "../types";
import { IIssue } from "types";
export const GanttLayout: React.FC = observer(() => {
const { projectIssues: projectIssuesStore, projectIssuesFilter: projectIssueFiltersStore } = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
return <BaseGanttRoot issueFiltersStore={projectIssueFiltersStore} issueStore={projectIssuesStore} />;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
return (
<BaseGanttRoot
issueActions={issueActions}
issueFiltersStore={projectIssueFiltersStore}
issueStore={projectIssuesStore}
/>
);
});

26
web/components/issues/issue-layouts/gantt/project-view-root.tsx
View File

@ -1,11 +1,35 @@
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseGanttRoot } from "./base-gantt-root";
// types
import { EIssueActions } from "../types";
import { IIssue } from "types";
export const ProjectViewGanttLayout: React.FC = observer(() => {
const { viewIssues: projectIssueViewStore, viewIssuesFilter: projectIssueViewFiltersStore } = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
return <BaseGanttRoot issueFiltersStore={projectIssueViewFiltersStore} issueStore={projectIssueViewStore} />;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssueViewStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssueViewStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
return (
<BaseGanttRoot
issueActions={issueActions}
issueFiltersStore={projectIssueViewFiltersStore}
issueStore={projectIssueViewStore}
/>
);
});

6
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -277,7 +277,13 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
<<<<<<< HEAD
handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
=======
handleIssue={async (issueToUpdate, action: EIssueActions) =>
await handleIssues(sub_group_by, group_by, issueToUpdate as IIssue, action)
}
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
/>
)}
</>

75
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -1,5 +1,10 @@
import { memo } from "react";
<<<<<<< HEAD
import { Draggable } from "@hello-pangea/dnd";
=======
import { Draggable, DraggableStateSnapshot } from "@hello-pangea/dnd";
import isEqual from "lodash/isEqual";
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
// components
import { IssueProperties } from "../properties/all-properties";
// ui
@ -47,10 +52,27 @@ interface IssueDetailsBlockProps {
handleIssues: (issue: IIssue, action: EIssueActions) => void;
quickActions: (issue: IIssue) => React.ReactNode;
isReadOnly: boolean;
snapshot: DraggableStateSnapshot;
isDragDisabled: boolean;
}
const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
<<<<<<< HEAD
const { issue, showEmptyGroup, handleIssues, quickActions, isReadOnly, issuesFilter } = props;
=======
const {
sub_group_id,
columnId,
issue,
showEmptyGroup,
handleIssues,
quickActions,
displayProperties,
isReadOnly,
snapshot,
isDragDisabled,
} = props;
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const router = useRouter();
@ -58,29 +80,43 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
};
const handleIssuePeekOverview = () => {
const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
}
};
return (
<<<<<<< HEAD
<>
<WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="key">
<div className="relative">
<div className="line-clamp-1 text-xs text-custom-text-300">
=======
<div
className={`flex flex-col space-y-2 cursor-pointer rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all w-full ${
isDragDisabled ? "" : "hover:cursor-grab"
} ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
onClick={handleIssuePeekOverview}
>
{displayProperties && displayProperties?.key && (
<div className="relative w-full ">
<div className="line-clamp-1 text-xs text-left text-custom-text-300">
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
<div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">{quickActions(issue)}</div>
</div>
</WithDisplayPropertiesHOC>
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<div className="line-clamp-2 text-sm font-medium text-custom-text-100" onClick={handleIssuePeekOverview}>
{issue.name}
</div>
<div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
</Tooltip>
<div>
<IssueProperties
@ -91,7 +127,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
isReadOnly={isReadOnly}
/>
</div>
</>
</div>
);
};
@ -119,10 +155,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
return (
<>
<Draggable draggableId={draggableId} index={index}>
<Draggable draggableId={draggableId} index={index} isDragDisabled={!canEditIssueProperties}>
{(provided, snapshot) => (
<div
className="group/kanban-block relative p-1.5 hover:cursor-default"
className="group/kanban-block relative p-1.5"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
@ -130,6 +166,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
{issue.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<<<<<<< HEAD
<div
className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
isDragDisabled ? "" : "hover:cursor-grab"
@ -144,6 +181,20 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
isReadOnly={!canEditIssueProperties}
/>
</div>
=======
<KanbanIssueMemoBlock
sub_group_id={sub_group_id}
columnId={columnId}
issue={issue}
showEmptyGroup={showEmptyGroup}
handleIssues={handleIssues}
quickActions={quickActions}
displayProperties={displayProperties}
isReadOnly={!canEditIssueProperties}
snapshot={snapshot}
isDragDisabled={isDragDisabled}
/>
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
</div>
)}
</Draggable>

4
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -168,7 +168,9 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={async (issueToUpdate) => await handleIssues(issueToUpdate as IIssue, EIssueActions.UPDATE)}
handleIssue={async (issueToUpdate, action: EIssueActions) =>
await handleIssues(issueToUpdate as IIssue, action)
}
/>
)}
</>

28
web/components/issues/issue-layouts/list/block.tsx
View File

@ -25,20 +25,27 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
handleIssues(issueToUpdate, EIssueActions.UPDATE);
};
const handleIssuePeekOverview = () => {
const handleIssuePeekOverview = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
}
};
const canEditIssueProperties = canEditProperties(issue.project);
return (
<>
<div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
<button
className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm w-full"
onClick={handleIssuePeekOverview}
>
{displayProperties && displayProperties?.key && (
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
{issue?.project_detail?.identifier}-{issue.sequence_id}
@ -49,10 +56,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<div
className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
onClick={handleIssuePeekOverview}
>
<div className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100 text-left">
{issue.name}
</div>
</Tooltip>
@ -75,7 +79,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
</div>
)}
</div>
</div>
</button>
</>
);
};

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

@ -40,11 +40,11 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
};
const handleStartDate = (date: string) => {
const handleStartDate = (date: string | null) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
};
const handleTargetDate = (date: string) => {
const handleTargetDate = (date: string | null) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
};
@ -106,7 +106,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
{displayProperties && displayProperties?.start_date && (
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
onChange={(date) => handleStartDate(date)}
disabled={isReadonly}
type="start_date"
/>
@ -116,7 +116,7 @@ export const ListProperties: FC<IListProperties> = observer((props) => {
{displayProperties && displayProperties?.due_date && (
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
onChange={(date) => handleTargetDate(date)}
disabled={isReadonly}
type="target_date"
/>

21
web/components/issues/issue-layouts/properties/all-properties.tsx
View File

@ -52,12 +52,29 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
handleIssues({ ...issue, assignees: ids });
};
<<<<<<< HEAD:web/components/issues/issue-layouts/properties/all-properties.tsx
const handleStartDate = (date: string) => {
handleIssues({ ...issue, start_date: date });
};
const handleTargetDate = (date: string) => {
handleIssues({ ...issue, target_date: date });
=======
const handleStartDate = (date: string | null) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, start_date: date }
);
};
const handleTargetDate = (date: string | null) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, target_date: date }
);
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434:web/components/issues/issue-layouts/kanban/properties.tsx
};
const handleEstimate = (value: number | null) => {
@ -106,7 +123,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
<WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="start_date">
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
onChange={(date) => handleStartDate(date)}
disabled={isReadOnly}
type="start_date"
/>
@ -116,7 +133,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
<WithDisplayPropertiesHOC issuesFilter={issuesFilter} displayPropertyKey="due_date">
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
onChange={(date) => handleTargetDate(date)}
disabled={isReadOnly}
type="target_date"
/>

14
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -42,7 +42,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
// store
const {
workspace: workspaceStore,
projectMember: { projectMembers: _projectMembers, fetchProjectMembers },
projectMember: { members: _members, fetchProjectMembers },
} = useMobxStore();
const workspaceSlug = workspaceStore?.workspaceSlug;
// states
@ -51,14 +51,14 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [isLoading, setIsLoading] = useState<Boolean>(false);
const getWorkspaceMembers = () => {
const getProjectMembers = () => {
setIsLoading(true);
if (workspaceSlug && projectId) fetchProjectMembers(workspaceSlug, projectId).then(() => setIsLoading(false));
};
const updatedDefaultOptions: IProjectMember[] =
defaultOptions.map((member: any) => ({ member: { ...member } })) ?? [];
const projectMembers = _projectMembers ?? updatedDefaultOptions;
const projectMembers = projectId && _members[projectId] ? _members[projectId] : updatedDefaultOptions;
const options = projectMembers?.map((member) => ({
value: member.member.id,
@ -142,7 +142,10 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
className={`flex w-full items-center justify-between gap-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
} ${buttonClassName}`}
onClick={() => !projectMembers && getWorkspaceMembers()}
onClick={(e) => {
e.stopPropagation();
(!projectId || !_members[projectId]) && getProjectMembers();
}}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -168,7 +171,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
<div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
{isLoading ? (
<p className="text-center text-custom-text-200">Loading...</p>
) : filteredOptions.length > 0 ? (
) : filteredOptions && filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
@ -178,6 +181,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

66
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -12,11 +12,11 @@ import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
import { renderDateFormat, renderFormattedDate } from "helpers/date-time.helper";
export interface IIssuePropertyDate {
value: any;
onChange: (date: any) => void;
value: string | null;
onChange: (date: string | null) => void;
disabled?: boolean;
type: "start_date" | "target_date";
}
@ -56,32 +56,41 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
return (
<>
<Popover.Button
as="button"
type="button"
ref={dropdownBtn}
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
disabled
? "pointer-events-none cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
}`}
className="border-none outline-none"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<Tooltip tooltipHeading={dateOptionDetails.placeholder} tooltipContent={value ?? "None"}>
<div className="text-xs">{value}</div>
</Tooltip>
<div
className="flex flex-shrink-0 items-center justify-center"
onClick={() => {
if (onChange) onChange(null);
}}
>
<X className="h-2.5 w-2.5" strokeWidth={2} />
</div>
</>
)}
</div>
<Tooltip
tooltipHeading={dateOptionDetails.placeholder}
tooltipContent={value ? renderFormattedDate(value) : "None"}
>
<div
className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
disabled
? "pointer-events-none cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
}`}
>
<div className="flex items-center justify-center gap-2 overflow-hidden">
<dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<div className="text-xs">{value}</div>
<div
className="flex flex-shrink-0 items-center justify-center"
onClick={() => {
if (onChange) onChange(null);
}}
>
<X className="h-2.5 w-2.5" strokeWidth={2} />
</div>
</>
)}
</div>
</div>
</Tooltip>
</Popover.Button>
<div className={`${open ? "fixed left-0 top-0 z-20 h-full w-full cursor-auto" : ""}`}>
@ -92,7 +101,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
{({ close }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: any) => {
onChange={(val, e) => {
e?.stopPropagation();
if (onChange && val) {
onChange(renderDateFormat(val));
close();

2
web/components/issues/issue-layouts/properties/estimates.tsx
View File

@ -116,6 +116,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={(e) => e.stopPropagation()}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -150,6 +151,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

26
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -106,7 +106,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
{projectLabels
?.filter((l) => value.includes(l.id))
.map((label) => (
<Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
<Tooltip position="top" tooltipHeading="Label" tooltipContent={label.name ?? ""}>
<div
key={label.id}
className={`flex overflow-hidden hover:bg-custom-background-80 ${
@ -144,14 +144,16 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
</div>
)
) : (
<div
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
>
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
{placeholderText}
</div>
<Tooltip position="top" tooltipHeading="Labels" tooltipContent="None">
<div
className={`h-full flex items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
>
<Tags className="h-3.5 w-3.5" strokeWidth={2} />
{placeholderText}
</div>
</Tooltip>
)}
</div>
);
@ -176,7 +178,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => !storeLabels && fetchLabels()}
onClick={(e) => {
e.stopPropagation();
!storeLabels && fetchLabels();
}}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -213,6 +218,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
selected ? "text-custom-text-100" : "text-custom-text-200"
}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

8
web/components/issues/issue-layouts/properties/state.tsx
View File

@ -117,7 +117,14 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
<<<<<<< HEAD
onClick={() => !storeStates && handleFetchProjectStates()}
=======
onClick={(e) => {
e.stopPropagation();
!storeStates && fetchProjectStates();
}}
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@ -153,6 +160,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

7
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View File

@ -58,7 +58,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.PROJECT}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu
placement="bottom-start"
customButton={customActionButton}
ellipsis
menuButtonOnClick={(e) => e.stopPropagation()}
>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

7
web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
View File

@ -40,7 +40,12 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
handleClose={() => setDeleteIssueModal(false)}
onSubmit={handleDelete}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu
placement="bottom-start"
customButton={customActionButton}
ellipsis
menuButtonOnClick={(e) => e.stopPropagation()}
>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

7
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -58,7 +58,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.CYCLE}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu
placement="bottom-start"
customButton={customActionButton}
ellipsis
menuButtonOnClick={(e) => e.stopPropagation()}
>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

8
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -58,7 +58,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
}}
currentStore={EProjectStore.MODULE}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu
placement="bottom-start"
customButton={customActionButton}
ellipsis
menuButtonOnClick={(e) => e.stopPropagation()}
>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

7
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -66,7 +66,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
}}
currentStore={EProjectStore.PROJECT}
/>
<CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
<CustomMenu
placement="bottom-start"
customButton={customActionButton}
ellipsis
menuButtonOnClick={(e) => e.stopPropagation()}
>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

6
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View File

@ -9,7 +9,7 @@ import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "compon
export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = router.query;
const {
projectArchivedIssues: { getIssues, fetchIssues },
@ -18,8 +18,8 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
if (workspaceSlug && projectId) {
await fetchFilters(workspaceSlug, projectId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
await fetchFilters(workspaceSlug.toString(), projectId.toString());
await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
}
});

20
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View File

@ -25,12 +25,17 @@ export const CycleLayoutRoot: React.FC = observer(() => {
const [transferIssuesModal, setTransferIssuesModal] = useState(false);
const router = useRouter();
<<<<<<< HEAD
const { workspaceSlug, projectId, cycleId } = router.query as {
workspaceSlug: string;
projectId: string;
cycleId: string;
};
// store hooks
=======
const { workspaceSlug, projectId, cycleId } = router.query;
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const {
cycleIssues: { loader, getIssues, fetchIssues },
cycleIssuesFilter: { issueFilters, fetchFilters },
@ -41,8 +46,13 @@ export const CycleLayoutRoot: React.FC = observer(() => {
workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES_V3_${workspaceSlug}_${projectId}_${cycleId}` : null,
async () => {
if (workspaceSlug && projectId && cycleId) {
await fetchFilters(workspaceSlug, projectId, cycleId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader", cycleId);
await fetchFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
await fetchIssues(
workspaceSlug.toString(),
projectId.toString(),
getIssues ? "mutation" : "init-loader",
cycleId.toString()
);
}
}
);
@ -70,7 +80,11 @@ export const CycleLayoutRoot: React.FC = observer(() => {
) : (
<>
{Object.keys(getIssues ?? {}).length == 0 ? (
<CycleEmptyState workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
<CycleEmptyState
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
cycleId={cycleId?.toString()}
/>
) : (
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (

6
web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
View File

@ -11,7 +11,7 @@ import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
export const DraftIssueLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = router.query;
const {
projectDraftIssuesFilter: { issueFilters, fetchFilters },
@ -20,8 +20,8 @@ export const DraftIssueLayoutRoot: React.FC = observer(() => {
useSWR(workspaceSlug && projectId ? `DRAFT_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
if (workspaceSlug && projectId) {
await fetchFilters(workspaceSlug, projectId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
await fetchFilters(workspaceSlug.toString(), projectId.toString());
await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
}
});

21
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View File

@ -20,11 +20,7 @@ import { Spinner } from "@plane/ui";
export const ModuleLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query as {
workspaceSlug: string;
projectId: string;
moduleId: string;
};
const { workspaceSlug, projectId, moduleId } = router.query;
const {
moduleIssues: { loader, getIssues, fetchIssues },
@ -35,8 +31,13 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
workspaceSlug && projectId && moduleId ? `MODULE_ISSUES_V3_${workspaceSlug}_${projectId}_${moduleId}` : null,
async () => {
if (workspaceSlug && projectId && moduleId) {
await fetchFilters(workspaceSlug, projectId, moduleId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader", moduleId);
await fetchFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
await fetchIssues(
workspaceSlug.toString(),
projectId.toString(),
getIssues ? "mutation" : "init-loader",
moduleId.toString()
);
}
}
);
@ -54,7 +55,11 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
) : (
<>
{Object.keys(getIssues ?? {}).length == 0 ? (
<ModuleEmptyState workspaceSlug={workspaceSlug} projectId={projectId} moduleId={moduleId} />
<ModuleEmptyState
workspaceSlug={workspaceSlug?.toString()}
projectId={projectId?.toString()}
moduleId={moduleId?.toString()}
/>
) : (
<div className="h-full w-full overflow-auto">
{activeLayout === "list" ? (

11
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -21,13 +21,14 @@ import { EIssuesStoreType } from "constants/issue";
export const ProjectLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = router.query;
const {
issues: { loader, getIssues, fetchIssues },
issuesFilter: { issueFilters, fetchFilters },
} = useIssues(EIssuesStoreType.PROJECT);
<<<<<<< HEAD
useSWR(
workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
async () => {
@ -61,6 +62,14 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
// console.log("issueGetIssuesIds", issueGetIssuesIds);
// console.log("issueGetIssues", issueGetIssues);
// console.log("---");
=======
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
if (workspaceSlug && projectId) {
await fetchFilters(workspaceSlug.toString(), projectId.toString());
await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
}
});
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const activeLayout = issueFilters?.displayFilters?.layout;

10
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -18,11 +18,7 @@ import { Spinner } from "@plane/ui";
export const ProjectViewLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query as {
workspaceSlug: string;
projectId: string;
viewId?: string;
};
const { workspaceSlug, projectId, viewId } = router.query;
const {
viewIssues: { loader, getIssues, fetchIssues },
@ -31,8 +27,8 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
useSWR(workspaceSlug && projectId && viewId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
if (workspaceSlug && projectId && viewId) {
await fetchFilters(workspaceSlug, projectId, viewId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
await fetchFilters(workspaceSlug.toString(), projectId.toString(), viewId.toString());
await fetchIssues(workspaceSlug.toString(), projectId.toString(), getIssues ? "mutation" : "init-loader");
}
});

18
web/components/issues/issue-layouts/spreadsheet/columns/issue/issue-column.tsx
View File

@ -34,13 +34,17 @@ export const IssueColumn: React.FC<Props> = ({
const menuActionRef = useRef<HTMLDivElement | null>(null);
const handleIssuePeekOverview = (issue: IIssue) => {
const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
}
};
const paddingLeft = `${nestingLevel * 54}px`;
@ -99,7 +103,7 @@ export const IssueColumn: React.FC<Props> = ({
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<div
className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
onClick={() => handleIssuePeekOverview(issue)}
onClick={(e) => handleIssuePeekOverview(issue, e)}
>
{issue.name}
</div>

2
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -6,8 +6,6 @@ import { IssuePropertyState } from "../../properties";
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue, IState } from "types";
import { mutate } from "swr";
import { SUB_ISSUES } from "constants/fetch-keys";
type Props = {
issue: IIssue;

2
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -194,7 +194,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
workspaceSlug={workspaceSlug.toString()}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={async (issueToUpdate: any) => await handleIssues(issueToUpdate, EIssueActions.UPDATE)}
handleIssue={async (issueToUpdate: any, action: EIssueActions) => await handleIssues(issueToUpdate, action)}
/>
)}
</div>

19
web/components/issues/main-content.tsx
View File

@ -40,7 +40,7 @@ const issueService = new IssueService();
const issueCommentService = new IssueCommentService();
export const IssueMainContent: React.FC<Props> = observer((props) => {
const { issueDetails, submitChanges, uneditable = false } = props;
const { issueDetails, submitChanges, uneditable } = props;
// states
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
// router
@ -151,7 +151,13 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
);
};
<<<<<<< HEAD
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
=======
const isAllowed =
(!!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER) ||
(uneditable !== undefined && !uneditable);
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
return (
<>
@ -231,7 +237,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
workspaceSlug={workspaceSlug as string}
issue={issueDetails}
handleFormSubmit={submitChanges}
isAllowed={isAllowed || !uneditable}
isAllowed={isAllowed}
/>
{workspaceSlug && projectId && (
@ -249,8 +255,8 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
<div className="flex flex-col gap-3 py-3">
<h3 className="text-lg">Attachments</h3>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
<IssueAttachmentUpload disabled={uneditable} />
<IssueAttachments />
<IssueAttachmentUpload disabled={!isAllowed} />
<IssueAttachments editable={isAllowed} />
</div>
</div>
<div className="space-y-5 pt-3">
@ -263,8 +269,13 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
/>
<AddComment
onSubmit={handleAddComment}
<<<<<<< HEAD
disabled={uneditable}
showAccessSpecifier={Boolean(projectDetails && projectDetails.is_deployed)}
=======
disabled={!isAllowed}
showAccessSpecifier={projectDetails && projectDetails.is_deployed}
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
/>
</div>
</>

10
web/components/issues/peek-overview/issue-detail.tsx
View File

@ -153,10 +153,12 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
debouncedFormSave();
}}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
className={`min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary ${
!isAllowed ? "hover:cursor-not-allowed" : ""
}`}
hasError={Boolean(errors?.description)}
role="textbox"
disabled={!true}
disabled={!isAllowed}
/>
)}
/>
@ -188,7 +190,9 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
dragDropEnabled
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
customClassName={
isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200 pointer-events-none"
}
noBorder={!isAllowed}
onChange={(description: Object, description_html: string) => {
setShowAlert(true);

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

@ -49,7 +49,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
const { getProjectById } = useProject();
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, peekProjectId: projectId } = router.query;
const handleState = (_state: string) => {
issueUpdate({ ...issue, state: _state });
@ -118,7 +118,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>State</p>
</div>
<div>
<SidebarStateSelect value={issue?.state || ""} onChange={handleState} disabled={disableUserActions} />
<SidebarStateSelect
value={issue?.state || ""}
projectId={projectId as string}
onChange={handleState}
disabled={disableUserActions}
/>
</div>
</div>
@ -131,6 +136,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<SidebarAssigneeSelect
value={issue.assignees || []}
projectId={projectId as string}
onChange={handleAssignee}
disabled={disableUserActions}
/>
@ -212,7 +218,12 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<p>Parent</p>
</div>
<div>
<SidebarParentSelect onChange={handleParent} issueDetails={issue} disabled={disableUserActions} />
<SidebarParentSelect
onChange={handleParent}
issueDetails={issue}
projectId={projectId as string}
disabled={disableUserActions}
/>
</div>
</div>
</div>
@ -228,6 +239,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<SidebarCycleSelect
issueDetail={issue}
projectId={projectId as string}
disabled={disableUserActions}
handleIssueUpdate={handleCycleOrModuleChange}
/>
@ -242,6 +254,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div>
<SidebarModuleSelect
issueDetail={issue}
projectId={projectId as string}
disabled={disableUserActions}
handleIssueUpdate={handleCycleOrModuleChange}
/>
@ -255,6 +268,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
<div className="flex w-full flex-col gap-3">
<SidebarLabelSelect
issueDetails={issue}
projectId={projectId as string}
labelList={issue.labels}
submitChanges={handleLabels}
isNotAllowed={disableUserActions}

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

@ -11,6 +11,7 @@ import { IssueView } from "components/issues";
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IIssue, IIssueLink } from "types";
import { EIssueActions } from "../issue-layouts/types";
// constants
import { EUserProjectRoles } from "constants/project";
@ -18,7 +19,7 @@ interface IIssuePeekOverview {
workspaceSlug: string;
projectId: string;
issueId: string;
handleIssue: (issue: Partial<IIssue>) => void;
handleIssue: (issue: Partial<IIssue>, action: EIssueActions) => Promise<void>;
isArchived?: boolean;
children?: ReactNode;
}
@ -30,8 +31,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const { peekIssueId } = router.query;
const {
user: { currentProjectRole },
issue: { removeIssueFromStructure },
issueDetail: {
createIssueComment,
updateIssueComment,
@ -58,6 +57,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
},
archivedIssues: { deleteArchivedIssue },
project: { currentProjectDetails },
workspaceMember: { currentWorkspaceUserProjectsRole },
} = useMobxStore();
const { setToastAlert } = useToast();
@ -98,7 +98,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const issueUpdate = async (_data: Partial<IIssue>) => {
if (handleIssue) {
await handleIssue(_data);
await handleIssue(_data, EIssueActions.UPDATE);
fetchIssueActivity(workspaceSlug, projectId, issueId);
}
};
@ -133,7 +133,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const handleDeleteIssue = async () => {
if (isArchived) await deleteArchivedIssue(workspaceSlug, projectId, issue!);
else removeIssueFromStructure(workspaceSlug, projectId, issue!);
else await handleIssue(issue!, EIssueActions.DELETE);
const { query } = router;
if (query.peekIssueId) {
setPeekId(null);
@ -146,7 +146,12 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
}
};
<<<<<<< HEAD
const userRole = currentProjectRole ?? EUserProjectRoles.GUEST;
=======
const userRole =
(currentWorkspaceUserProjectsRole && currentWorkspaceUserProjectsRole[projectId]) ?? EUserWorkspaceRoles.GUEST;
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
return (
<Fragment>

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

@ -1,4 +1,4 @@
import { FC, ReactNode, useState } from "react";
import { FC, ReactNode, useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
@ -14,6 +14,8 @@ import {
PeekOverviewIssueDetails,
PeekOverviewProperties,
} from "components/issues";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
// types
@ -107,6 +109,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
// ref
const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
const updateRoutePeekId = () => {
if (issueId != peekIssueId) {
@ -151,6 +155,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
useOutsideClickDetector(issuePeekOverviewRef, () => removeRoutePeekId());
return (
<>
{issue && !isArchived && (
@ -178,6 +184,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
{issueId === peekIssueId && (
<div
ref={issuePeekOverviewRef}
className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300
${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}

4
web/components/issues/select/cycle.tsx
View File

@ -34,7 +34,11 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
if (workspaceSlug && projectId) fetchAllCycles(workspaceSlug, projectId);
};
<<<<<<< HEAD
const selectedCycle = value ? getCycleById(value) : null;
=======
const cycles = cycleStore.cycles?.[projectId]?.["all"] ?? [];
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const options = projectAllCycles?.map((cycleId) => {
const cycleDetail = getCycleById(cycleId);

5
web/components/issues/sidebar-select/assignee.tsx
View File

@ -10,6 +10,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
value: string[];
projectId: string;
onChange: (val: string[]) => void;
disabled?: boolean;
};
@ -17,9 +18,9 @@ type Props = {
// services
const projectMemberService = new ProjectMemberService();
export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
export const SidebarAssigneeSelect: React.FC<Props> = ({ value, projectId, onChange, disabled = false }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,

5
web/components/issues/sidebar-select/cycle.tsx
View File

@ -14,6 +14,7 @@ import { CYCLE_ISSUES, INCOMPLETE_CYCLES_LIST, ISSUE_DETAILS } from "constants/f
type Props = {
issueDetail: IIssue | undefined;
projectId: string;
handleCycleChange?: (cycleId: string) => void;
disabled?: boolean;
handleIssueUpdate?: () => void;
@ -26,7 +27,7 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
const { issueDetail, disabled = false, handleIssueUpdate, handleCycleChange } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId: _projectId, peekProjectId } = router.query;
// mobx store
const {
cycleIssues: { removeIssueFromCycle, addIssueToCycle },
@ -34,6 +35,8 @@ export const SidebarCycleSelect: React.FC<Props> = (props) => {
const [isUpdating, setIsUpdating] = useState(false);
const projectId = _projectId ?? peekProjectId;
const { data: incompleteCycles } = useSWR(
workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
workspaceSlug && projectId

5
web/components/issues/sidebar-select/label.tsx
View File

@ -16,6 +16,7 @@ import { IIssue, IIssueLabel } from "types";
type Props = {
issueDetails: IIssue | undefined;
projectId: string;
labelList: string[];
submitChanges: (formData: any) => void;
isNotAllowed: boolean;
@ -28,12 +29,12 @@ const defaultValues: Partial<IIssueLabel> = {
};
export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
const { issueDetails, labelList, submitChanges, isNotAllowed, uneditable } = props;
const { issueDetails, projectId, labelList, submitChanges, isNotAllowed, uneditable } = props;
// states
const [createLabelForm, setCreateLabelForm] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
// toast
const { setToastAlert } = useToast();
// mobx store

24
web/components/issues/sidebar-select/module.tsx
View File

@ -1,29 +1,40 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
<<<<<<< HEAD
import { mutate } from "swr";
// hooks
import { useModule } from "hooks/store";
=======
import useSWR, { mutate } from "swr";
// mobx store
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
// fetch-keys
import { ISSUE_DETAILS, MODULE_ISSUES } from "constants/fetch-keys";
import { ISSUE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
// services
import { ModuleService } from "services/module.service";
type Props = {
issueDetail: IIssue | undefined;
projectId: string;
handleModuleChange?: (moduleId: string) => void;
disabled?: boolean;
handleIssueUpdate?: () => void;
};
// services
const moduleService = new ModuleService();
export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const { issueDetail, disabled = false, handleIssueUpdate, handleModuleChange } = props;
const { issueDetail, projectId, disabled = false, handleIssueUpdate, handleModuleChange } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;
// mobx store
const {
moduleIssues: { removeIssueFromModule, addIssueToModule },
@ -32,6 +43,13 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
const [isUpdating, setIsUpdating] = useState(false);
const { data: projectModules } = useSWR(
workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => moduleService.getModules(workspaceSlug as string, projectId as string)
: null
);
const handleModuleStoreChange = async (moduleId: string) => {
if (!workspaceSlug || !issueDetail || !moduleId) return;

5
web/components/issues/sidebar-select/parent.tsx
View File

@ -12,15 +12,16 @@ import { IIssue, ISearchIssueResponse } from "types";
type Props = {
onChange: (value: string) => void;
issueDetails: IIssue | undefined;
projectId: string;
disabled?: boolean;
};
export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, disabled = false }) => {
export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, projectId, disabled = false }) => {
const [isParentModalOpen, setIsParentModalOpen] = useState(false);
const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
const router = useRouter();
const { projectId, issueId } = router.query;
const { issueId } = router.query;
return (
<>

5
web/components/issues/sidebar-select/state.tsx
View File

@ -15,6 +15,7 @@ import { STATES_LIST } from "constants/fetch-keys";
type Props = {
value: string;
projectId: string;
onChange: (val: string) => void;
disabled?: boolean;
};
@ -22,9 +23,9 @@ type Props = {
// services
const stateService = new ProjectStateService();
export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
export const SidebarStateSelect: React.FC<Props> = ({ value, projectId, onChange, disabled = false }) => {
const router = useRouter();
const { workspaceSlug, projectId, inboxIssueId } = router.query;
const { workspaceSlug, inboxIssueId } = router.query;
const { data: states } = useSWR(
workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,

6
web/components/issues/sidebar.tsx
View File

@ -289,6 +289,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
render={({ field: { value } }) => (
<SidebarStateSelect
value={value}
projectId={projectId as string}
onChange={(val: string) => submitChanges({ state: val })}
disabled={!isAllowed || uneditable}
/>
@ -310,6 +311,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
render={({ field: { value } }) => (
<SidebarAssigneeSelect
value={value}
projectId={projectId as string}
onChange={(val: string[]) => submitChanges({ assignees: val })}
disabled={!isAllowed || uneditable}
/>
@ -382,6 +384,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
onChange(val);
}}
issueDetails={issueDetail}
projectId={projectId as string}
disabled={!isAllowed || uneditable}
/>
)}
@ -536,6 +539,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="space-y-1">
<SidebarCycleSelect
issueDetail={issueDetail}
projectId={projectId as string}
handleCycleChange={handleCycleChange}
disabled={!isAllowed || uneditable}
/>
@ -551,6 +555,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="space-y-1">
<SidebarModuleSelect
issueDetail={issueDetail}
projectId={projectId as string}
handleModuleChange={handleModuleChange}
disabled={!isAllowed || uneditable}
/>
@ -569,6 +574,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="space-y-1 sm:w-1/2">
<SidebarLabelSelect
issueDetails={issueDetail}
projectId={projectId as string}
labelList={issueDetail?.labels ?? []}
submitChanges={submitChanges}
isNotAllowed={!isAllowed}

28
web/components/issues/sub-issues/issue.tsx
View File

@ -10,6 +10,7 @@ import { CustomMenu, Tooltip } from "@plane/ui";
// types
import { IUser, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
import { EIssueActions } from "../issue-layouts/types";
export interface ISubIssues {
workspaceSlug: string;
@ -29,6 +30,7 @@ export interface ISubIssues {
issue?: IIssue | null
) => void;
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
handleDeleteIssue: (issue: IIssue) => Promise<void>;
}
export const SubIssues: React.FC<ISubIssues> = ({
@ -45,17 +47,22 @@ export const SubIssues: React.FC<ISubIssues> = ({
copyText,
handleIssueCrudOperation,
handleUpdateIssue,
handleDeleteIssue,
}) => {
const router = useRouter();
const { peekProjectId, peekIssueId } = router.query;
const handleIssuePeekOverview = () => {
const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
if (event.ctrlKey || event.metaKey) {
const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
window.open(issueUrl, "_blank"); // Open link in a new tab
} else {
router.push({
pathname: router.pathname,
query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
});
}
};
return (
@ -65,7 +72,13 @@ export const SubIssues: React.FC<ISubIssues> = ({
workspaceSlug={workspaceSlug}
projectId={peekProjectId.toString()}
issueId={peekIssueId.toString()}
handleIssue={async (issueToUpdate) => await handleUpdateIssue(issue, { ...issue, ...issueToUpdate })}
handleIssue={async (issueToUpdate, action) => {
if (action === EIssueActions.UPDATE) {
await handleUpdateIssue(issue, { ...issue, ...issueToUpdate });
} else if (action === EIssueActions.DELETE) {
await handleDeleteIssue(issue);
}
}}
/>
)}
<div>
@ -176,6 +189,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
{issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
<SubIssuesRootList
handleDeleteIssue={handleDeleteIssue}
workspaceSlug={workspaceSlug}
projectId={projectId}
parentIssue={issue}

3
web/components/issues/sub-issues/issues-list.tsx
View File

@ -27,6 +27,7 @@ export interface ISubIssuesRootList {
issue?: IIssue | null
) => void;
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
handleDeleteIssue: (issue: IIssue) => Promise<void>
}
const issueService = new IssueService();
@ -44,6 +45,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
copyText,
handleIssueCrudOperation,
handleUpdateIssue,
handleDeleteIssue
}) => {
const { data: issues, isLoading } = useSWR(
workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
@ -70,6 +72,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
issues.sub_issues.length > 0 &&
issues.sub_issues.map((issue: IIssue) => (
<SubIssues
handleDeleteIssue={handleDeleteIssue}
key={`${issue?.id}`}
workspaceSlug={workspaceSlug}
projectId={projectId}

15
web/components/issues/sub-issues/root.tsx
View File

@ -179,7 +179,21 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
[updateIssueStructure, projectId, updateIssue, user, workspaceSlug]
);
<<<<<<< HEAD
const isEditable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
=======
const handleDeleteIssue = useCallback(
async (issue: IIssue) => {
if (!workspaceSlug || !projectId || !user) return;
await removeIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
await mutate(SUB_ISSUES(parentIssue?.id));
},
[removeIssue, projectId, user, workspaceSlug, parentIssue?.id]
);
const isEditable = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const mutateSubIssues = (parentIssueId: string | null) => {
if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
@ -239,6 +253,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = observer((props) => {
{issuesLoader.visibility.includes(parentIssue?.id) && workspaceSlug && projectId && (
<div className="border border-b-0 border-custom-border-100">
<SubIssuesRootList
handleDeleteIssue={handleDeleteIssue}
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
parentIssue={parentIssue}

14
web/components/modules/modules-list-view.tsx
View File

@ -94,11 +94,15 @@ export const ModulesListView: React.FC = observer(() => {
description:
"A cart module, a chassis module, and a warehouse module are all good example of this grouping.",
}}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Build your first module",
onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
}}
primaryButton={
isEditingAllowed
? {
icon: <Plus className="h-4 w-4" />,
text: "Build your first module",
onClick: () => commandPaletteStore.toggleCreateModuleModal(true),
}
: null
}
disabled={!isEditingAllowed}
/>
)}

55
web/components/modules/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
@ -25,7 +25,8 @@ import {
} from "helpers/date-time.helper";
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { ILinkDetails, IModule, ModuleLink } from "types";
import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "types";
import { EFilterType } from "store/issues/types";
// constant
import { MODULE_STATUS } from "constants/module";
import { EUserProjectRoles } from "constants/project";
@ -55,9 +56,22 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const { workspaceSlug, projectId, peekModule } = router.query;
// store hooks
const {
<<<<<<< HEAD
membership: { currentProjectRole },
} = useUser();
const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
=======
module: {
moduleDetails: _moduleDetails,
updateModuleDetails,
createModuleLink,
updateModuleLink,
deleteModuleLink,
},
moduleIssuesFilter: { issueFilters, updateFilters },
user: userStore,
} = useMobxStore();
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
const moduleDetails = getModuleById(moduleId);
@ -204,6 +218,25 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
}
};
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, moduleId);
},
[workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
);
useEffect(() => {
if (moduleDetails)
reset({
@ -537,6 +570,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
totalIssues={moduleDetails.total_issues}
module={moduleDetails}
isPeekView={Boolean(peekModule)}
filters={issueFilters?.filters}
handleFiltersUpdate={handleFiltersUpdate}
/>
</div>
)}
@ -596,13 +631,15 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
<span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
</div>
<button
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
Add link
</button>
{isEditingAllowed && (
<button
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
Add link
</button>
)}
</div>
)}
</div>

18
web/components/page-views/workspace-dashboard.tsx
View File

@ -93,13 +93,17 @@ export const WorkspaceDashboardView = observer(() => {
direction: "right",
description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
}}
primaryButton={{
text: "Build your first project",
onClick: () => {
setTrackElement("DASHBOARD_PAGE");
commandPaletteStore.toggleCreateProjectModal(true);
},
}}
primaryButton={
isEditingAllowed
? {
text: "Build your first project",
onClick: () => {
setTrackElement("DASHBOARD_PAGE");
commandPaletteStore.toggleCreateProjectModal(true);
},
}
: null
}
disabled={!isEditingAllowed}
/>
)

14
web/components/pages/pages-list/list-view.tsx
View File

@ -59,11 +59,15 @@ export const PagesListView: FC<IPagesListView> = observer((props) => {
"We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
direction: "right",
}}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => toggleCreatePageModal(true),
}}
primaryButton={
isEditingAllowed
? {
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => toggleCreatePageModal(true),
}
: null
}
disabled={!isEditingAllowed}
/>
)}

14
web/components/pages/pages-list/recent-pages-list.tsx
View File

@ -66,11 +66,15 @@ export const RecentPagesList: FC = observer(() => {
"We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
direction: "right",
}}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
}}
primaryButton={
isEditingAllowed
? {
icon: <Plus className="h-4 w-4" />,
text: "Create your first page",
onClick: () => commandPaletteStore.toggleCreatePageModal(true),
}
: null
}
disabled={!isEditingAllowed}
/>
</>

18
web/components/project/card-list.tsx
View File

@ -64,13 +64,17 @@ export const ProjectCardList = observer(() => {
direction: "right",
description: "A project could be a product’s roadmap, a marketing campaign, or launching a new car.",
}}
primaryButton={{
text: "Start your first project",
onClick: () => {
setTrackElement("PROJECTS_EMPTY_STATE");
commandPaletteStore.toggleCreateProjectModal(true);
},
}}
primaryButton={
isEditingAllowed
? {
text: "Start your first project",
onClick: () => {
setTrackElement("PROJECTS_EMPTY_STATE");
commandPaletteStore.toggleCreateProjectModal(true);
},
}
: null
}
disabled={!isEditingAllowed}
/>
)}

4
web/components/project/create-project-modal.tsx
View File

@ -308,8 +308,8 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 12,
message: "Identifier must at most be of 12 characters",
value: 6,
message: "Identifier must at most be of 6 characters",
},
}}
render={({ field: { value, onChange } }) => (

7
web/components/project/form.tsx
View File

@ -231,7 +231,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
/>
</div>
<div className="flex w-full items-center justify-between gap-10">
<div className="flex w-full items-baseline justify-between gap-10">
<div className="flex w-1/2 flex-col gap-1">
<h4 className="text-sm">Identifier</h4>
<Controller
@ -245,8 +245,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 12,
message: "Identifier must at most be of 5 characters",
value: 6,
message: "Identifier must at most be of 6 characters",
},
}}
render={({ field: { value, ref } }) => (
@ -264,6 +264,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
/>
)}
/>
<span className="text-xs text-red-500">{errors?.identifier?.message}</span>
</div>
<div className="flex w-1/2 flex-col gap-1">

2
web/components/project/priority-select.tsx
View File

@ -93,6 +93,7 @@ export const PrioritySelect: React.FC<Props> = ({
className={`flex h-full w-full items-center justify-between gap-1 ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
} ${buttonClassName}`}
onClick={(e) => e.stopPropagation()}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
@ -127,6 +128,7 @@ export const PrioritySelect: React.FC<Props> = ({
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={(e) => e.stopPropagation()}
>
{({ selected }) => (
<>

12
web/components/views/views-list.tsx
View File

@ -73,11 +73,23 @@ export const ProjectViewsList = observer(() => {
description: "You can create a view from here with as many properties as filters as you see fit.",
direction: "right",
}}
<<<<<<< HEAD
primaryButton={{
icon: <Plus size={14} strokeWidth={2} />,
text: "Build your first view",
onClick: () => toggleCreateViewModal(true),
}}
=======
primaryButton={
isEditingAllowed
? {
icon: <Plus size={14} strokeWidth={2} />,
text: "Build your first view",
onClick: () => commandPaletteStore.toggleCreateViewModal(true),
}
: null
}
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
disabled={!isEditingAllowed}
/>
)}

27
web/components/workspace/views/header.tsx
View File

@ -9,7 +9,7 @@ import { CreateUpdateWorkspaceViewModal } from "components/workspace";
// icon
import { Plus } from "lucide-react";
// constants
import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
export const GlobalViewsHeader: React.FC = observer(() => {
const [createViewModal, setCreateViewModal] = useState(false);
@ -17,7 +17,10 @@ export const GlobalViewsHeader: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, globalViewId } = router.query;
const { globalViews: globalViewsStore } = useMobxStore();
const {
globalViews: globalViewsStore,
user: { currentWorkspaceRole },
} = useMobxStore();
// bring the active view to the centre of the header
useEffect(() => {
@ -28,11 +31,13 @@ export const GlobalViewsHeader: React.FC = observer(() => {
if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
}, [globalViewId]);
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
return (
<>
<CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
<div className="group relative flex w-full items-center overflow-x-scroll border-b border-custom-border-200 px-4">
<div className="group relative flex w-full items-center overflow-x-scroll border-b border-custom-border-200 px-4 py-2">
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
<Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
<span
@ -62,13 +67,15 @@ export const GlobalViewsHeader: React.FC = observer(() => {
</Link>
))}
<button
type="button"
className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={() => setCreateViewModal(true)}
>
<Plus className="h-4 w-4 text-custom-primary-200" />
</button>
{isAuthorizedUser && (
<button
type="button"
className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
onClick={() => setCreateViewModal(true)}
>
<Plus className="h-4 w-4 text-custom-primary-200" />
</button>
)}
</div>
</>
);

20
web/constants/issue.ts
View File

@ -84,7 +84,7 @@ export const ISSUE_ORDER_BY_OPTIONS: {
{ key: "-updated_at", title: "Last Updated" },
{ key: "start_date", title: "Start Date" },
{ key: "target_date", title: "Due Date" },
{ key: "priority", title: "Priority" },
{ key: "-priority", title: "Priority" },
];
export const ISSUE_FILTER_OPTIONS: {
@ -233,7 +233,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "priority", "project", "labels", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -246,7 +246,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "priority", "project", "labels"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -261,7 +261,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state", "state_detail.group", "priority", "labels", "assignees", "created_by", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -276,7 +276,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "priority", "project", "labels", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -289,7 +289,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state_detail.group", "priority", "project", "labels"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -317,7 +317,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_properties: true,
display_filters: {
group_by: ["state", "priority", "labels", "assignees", "created_by", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -331,7 +331,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
display_filters: {
group_by: ["state", "priority", "labels", "assignees", "created_by"],
sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority", "target_date"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -354,7 +354,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
display_properties: true,
display_filters: {
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {
@ -366,7 +366,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
filters: ["priority", "state", "assignees", "mentions", "created_by", "labels", "start_date", "target_date"],
display_properties: false,
display_filters: {
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
type: [null, "active", "backlog"],
},
extra_options: {

76
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -31,6 +31,18 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
const { children } = props;
// store
const {
<<<<<<< HEAD
=======
user: { fetchUserProjectInfo, projectMemberInfo, hasPermissionToCurrentProject },
project: { fetchProjectDetails, workspaceProjects },
projectLabel: { fetchProjectLabels },
projectMember: { fetchProjectMembers },
projectState: { fetchProjectStates },
projectEstimates: { fetchProjectEstimates },
cycle: { fetchCycles },
module: { fetchModules },
projectViews: { fetchAllViews },
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
inbox: { fetchInboxesList, isInboxEnabled },
} = useMobxStore();
const {
@ -67,43 +79,77 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
);
// fetching project labels
useSWR(
workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project members
useSWR(
workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null
workspaceSlug && projectId && hasPermissionToCurrentProject
? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}`
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project states
useSWR(
workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null
workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project estimates
useSWR(
workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null
workspaceSlug && projectId && hasPermissionToCurrentProject
? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}`
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchProjectEstimates(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project cycles
useSWR(
<<<<<<< HEAD
workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null
=======
workspaceSlug && projectId && hasPermissionToCurrentProject
? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}`
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchCycles(workspaceSlug.toString(), projectId.toString(), "all")
: null
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
);
// fetching project modules
useSWR(
workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchModules(workspaceSlug.toString(), projectId.toString()) : null
workspaceSlug && projectId && hasPermissionToCurrentProject
? `PROJECT_MODULES_${workspaceSlug}_${projectId}`
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchModules(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project views
useSWR(
<<<<<<< HEAD
workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null
=======
workspaceSlug && projectId && hasPermissionToCurrentProject ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId && hasPermissionToCurrentProject
? () => fetchAllViews(workspaceSlug.toString(), projectId.toString())
: null
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
);
// fetching project inboxes if inbox is enabled
useSWR(
workspaceSlug && projectId && isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId && isInboxEnabled
workspaceSlug && projectId && hasPermissionToCurrentProject && isInboxEnabled
? `PROJECT_INBOXES_${workspaceSlug}_${projectId}`
: null,
workspaceSlug && projectId && hasPermissionToCurrentProject && isInboxEnabled
? () => fetchInboxesList(workspaceSlug.toString(), projectId.toString())
: null,
{
@ -115,7 +161,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
const projectExists = projectId ? getProjectById(projectId.toString()) : null;
// check if the project member apis is loading
if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === null)
if (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null)
return (
<div className="grid h-screen place-items-center bg-custom-background-100 p-4">
<div className="flex flex-col items-center gap-3 text-center">
@ -125,10 +171,10 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
);
// check if the user don't have permission to access the project
if (projectExists && projectId && hasPermissionToProject[projectId.toString()] === false) return <JoinProject />;
if (projectExists && projectId && hasPermissionToCurrentProject === false) return <JoinProject />;
// check if the project info is not found.
if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false)
if (!projectExists && projectId && hasPermissionToCurrentProject === false)
return (
<div className="container grid h-screen place-items-center bg-custom-background-100">
<EmptyState

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

@ -2,8 +2,12 @@ import { FC, ReactNode } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
<<<<<<< HEAD
// hooks
import { useUser, useWorkspace } from "hooks/store";
=======
import useSWRImmutable from "swr/immutable";
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
// ui
import { Spinner } from "@plane/ui";
@ -29,7 +33,7 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
shouldRetryOnError: false,
});
// fetching current user instance admin status
useSWR("CURRENT_USER_INSTANCE_ADMIN_STATUS", () => fetchCurrentUserInstanceAdminStatus(), {
useSWRImmutable("CURRENT_USER_INSTANCE_ADMIN_STATUS", () => fetchCurrentUserInstanceAdminStatus(), {
shouldRetryOnError: false,
});
// fetching user settings

19
web/layouts/auth-layout/workspace-wrapper.tsx
View File

@ -33,23 +33,30 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
);
// fetching workspace projects
useSWR(
workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchProjects(workspaceSlug.toString()) : null
workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchProjects(workspaceSlug.toString()) : null
);
// fetch workspace members
useSWR(
workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null
);
// fetch workspace labels
useSWR(
workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
workspaceSlug && hasPermissionToCurrentWorkspace ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null
);
// fetch workspace user projects role
useSWR(
<<<<<<< HEAD
workspaceSlug ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
workspaceSlug ? () => membership.fetchUserWorkspaceProjectsRole(workspaceSlug.toString()) : null
=======
workspaceSlug && hasPermissionToCurrentWorkspace ? `WORKSPACE_PROJECTS_ROLE_${workspaceSlug}` : null,
workspaceSlug && hasPermissionToCurrentWorkspace
? () => fetchWorkspaceUserProjectsRole(workspaceSlug.toString())
: null
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
);
// while data is being loaded

18
web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
View File

@ -78,13 +78,17 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
description:
"A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle.",
}}
primaryButton={{
icon: <Plus className="h-4 w-4" />,
text: "Set your first cycle",
onClick: () => {
setCreateModal(true);
},
}}
primaryButton={
isEditingAllowed
? {
icon: <Plus className="h-4 w-4" />,
text: "Set your first cycle",
onClick: () => {
setCreateModal(true);
},
}
: null
}
disabled={!isEditingAllowed}
/>
</div>

2
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -503,7 +503,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
projectId={projectId as string}
issueId={peekIssueId ? (peekIssueId as string) : ""}
isArchived={false}
handleIssue={(issueToUpdate) => {
handleIssue={async (issueToUpdate, action) => {
if (peekIssueId && typeof peekIssueId === "string") {
handleUpdateIssue(peekIssueId, issueToUpdate);
}

4
web/pages/profile/activity.tsx
View File

@ -25,7 +25,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
const { data: userActivity } = useSWR(USER_ACTIVITY, () => userService.getUserActivity());
return (
<section className="mx-auto mt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
<section className="mx-auto pt-16 flex h-full w-full flex-col overflow-hidden px-8 pb-8 lg:w-3/5">
<div className="flex items-center border-b border-custom-border-100 pb-3.5">
<h3 className="text-xl font-medium">Activity</h3>
</div>
@ -180,7 +180,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
</ul>
</div>
) : (
<Loader className="space-y-5">
<Loader className="space-y-5 mt-5">
<Loader.Item height="40px" />
<Loader.Item height="40px" />
<Loader.Item height="40px" />

2
web/pages/profile/change-password.tsx
View File

@ -88,7 +88,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
return (
<form
onSubmit={handleSubmit(handleChangePassword)}
className="mx-auto mt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
className="mx-auto pt-16 flex h-full w-full flex-col gap-8 px-8 pb-8 lg:w-3/5"
>
<h3 className="text-xl font-medium">Change password</h3>
<div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">

2
web/pages/profile/index.tsx
View File

@ -168,7 +168,7 @@ const ProfileSettingsPage: NextPageWithLayout = () => {
)}
/>
<DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
<div className="mx-auto mt-16 flex h-full w-full flex-col space-y-10 overflow-y-auto px-8 pb-8 lg:w-3/5">
<div className="mx-auto flex h-full w-full flex-col space-y-10 overflow-y-auto pt-16 px-8 pb-8 lg:w-3/5">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex w-full flex-col gap-8">
<div className="relative h-44 w-full">

2
web/pages/profile/preferences.tsx
View File

@ -48,7 +48,7 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
return (
<>
{currentUser ? (
<div className="mx-auto mt-16 h-full w-full overflow-y-auto px-8 pb-8 lg:w-3/5">
<div className="mx-auto pt-16 h-full w-full overflow-y-auto px-8 pb-8 lg:w-3/5">
<div className="flex items-center border-b border-custom-border-100 pb-3.5">
<h3 className="text-xl font-medium">Preferences</h3>
</div>

130
web/store/issue/issue.store.ts
View File

@ -28,19 +28,149 @@ export class IssueStore implements IIssueStore {
// observable
allIssues: observable,
// actions
<<<<<<< HEAD
addIssue: action,
updateIssue: action,
removeIssue: action,
=======
fetchIssues: action,
updateIssueStructure: action,
removeIssueFromStructure: action,
updateGanttIssueStructure: action,
});
this.rootStore = _rootStore;
this.issueService = new IssueService();
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (
workspaceSlug &&
projectId &&
hasPermissionToCurrentProject &&
this.rootStore.issueFilter.userFilters &&
this.rootStore.issueFilter.userDisplayFilters
)
this.fetchIssues(workspaceSlug, projectId, "mutation");
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
});
}
addIssue = (issues: IIssue[]) => {
if (issues && issues.length <= 0) return;
<<<<<<< HEAD
const _issues = { ...this.allIssues };
issues.forEach((issue) => {
_issues[issue.id] = issue;
});
=======
const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
const issueGroup = this.rootStore?.issueFilter?.userDisplayFilters?.group_by || null;
const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
if (!issueLayout) return null;
const _issueState = groupedLayouts.includes(issueLayout)
? issueGroup
? issueSubGroup
? "groupWithSubGroups"
: "grouped"
: "ungrouped"
: ungroupedLayouts.includes(issueLayout)
? "ungrouped"
: null;
return _issueState || null;
}
get getIssues() {
const projectId: string | null = this.rootStore?.project?.projectId;
const issueType = this.getIssueType;
if (!projectId || !issueType) return null;
return this.issues?.[projectId]?.[issueType] || null;
}
get getIssuesCount() {
const issueType = this.getIssueType;
let issuesCount = 0;
if (issueType === "grouped") {
const issues = this.getIssues as IIssueGroupedStructure;
if (!issues) return 0;
Object.keys(issues).map((group_id) => {
issuesCount += issues[group_id].length;
});
}
if (issueType === "groupWithSubGroups") {
const issues = this.getIssues as IIssueGroupWithSubGroupsStructure;
if (!issues) return 0;
Object.keys(issues).map((sub_group_id) => {
Object.keys(issues[sub_group_id]).map((group_id) => {
issuesCount += issues[sub_group_id][group_id].length;
});
});
}
if (issueType === "ungrouped") {
const issues = this.getIssues as IIssueUnGroupedStructure;
if (!issues) return 0;
issuesCount = issues.length;
}
return issuesCount;
}
updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
const projectId: string | null = issue?.project;
const issueType = this.getIssueType;
if (!projectId || !issueType) return null;
let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
this.getIssues;
if (!issues) return null;
if (issueType === "grouped" && group_id) {
issues = issues as IIssueGroupedStructure;
const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
issues = {
...issues,
[group_id]: _currentIssueId
? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
: [...(issues?.[group_id] ?? []), issue],
};
}
if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
issues = issues as IIssueGroupWithSubGroupsStructure;
const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
issues = {
...issues,
[sub_group_id]: {
...issues[sub_group_id],
[group_id]: _currentIssueId
? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
: [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
},
};
}
if (issueType === "ungrouped") {
issues = issues as IIssueUnGroupedStructure;
const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
issues = _currentIssueId
? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
: [...(issues ?? []), issue];
}
>>>>>>> a86dafc11c3e52699f4050e9d9c97393e29f0434
runInAction(() => {
this.allIssues = _issues;

2
web/store_legacy/archived-issues/issue.store.ts
View File

@ -87,10 +87,12 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (
workspaceSlug &&
projectId &&
hasPermissionToCurrentProject &&
this.rootStore.archivedIssueFilters.userDisplayFilters &&
this.rootStore.archivedIssueFilters.userFilters
)

6
web/store_legacy/cycle/cycle_issue.store.ts
View File

@ -89,10 +89,12 @@ export class CycleIssueStore implements ICycleIssueStore {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const cycleId = this.rootStore.cycle.cycleId;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (
workspaceSlug &&
projectId &&
hasPermissionToCurrentProject &&
cycleId &&
this.rootStore.cycleIssueFilter.cycleFilters &&
this.rootStore.issueFilter.userDisplayFilters
@ -115,8 +117,8 @@ export class CycleIssueStore implements ICycleIssueStore {
? "groupWithSubGroups"
: "grouped"
: ungroupedLayouts.includes(issueLayout)
? "ungrouped"
: null;
? "ungrouped"
: null;
return _issueState || null;
}

6
web/store_legacy/issues/global/issue.store.ts
View File

@ -182,6 +182,12 @@ export class GlobalIssuesStore extends IssueBaseStore implements IGlobalIssuesSt
const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[workspaceViewId][issueId] = { ..._issues[workspaceViewId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, workspaceViewId, "mutation");

3
web/store_legacy/issues/project-issues/archived/issue.store.ts
View File

@ -60,7 +60,8 @@ export class ProjectArchivedIssuesStore extends IssueBaseStore implements IProje
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
if (!workspaceSlug || !projectId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
const userFilters = this.rootStore?.projectArchivedIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");

9
web/store_legacy/issues/project-issues/cycle/issue.store.ts
View File

@ -119,7 +119,8 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const cycleId = this.rootStore.cycle.cycleId;
if (!workspaceSlug || !projectId || !cycleId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject || !cycleId) return;
const userFilters = this.rootStore?.cycleIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
@ -238,6 +239,12 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
const response = await this.rootStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[cycleId][issueId] = { ..._issues[cycleId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);

9
web/store_legacy/issues/project-issues/draft/issue.store.ts
View File

@ -63,7 +63,8 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
if (!workspaceSlug || !projectId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
const userFilters = this.rootStore?.projectDraftIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@ -157,6 +158,12 @@ export class ProjectDraftIssuesStore extends IssueBaseStore implements IProjectD
const response = await this.issueDraftService.updateDraftIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation");

9
web/store_legacy/issues/project-issues/module/issue.store.ts
View File

@ -111,7 +111,8 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const moduleId = this.rootStore.module.moduleId;
if (!workspaceSlug || !projectId || !moduleId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject || !moduleId) return;
const userFilters = this.rootStore?.moduleIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
@ -230,6 +231,12 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
const response = await this.rootStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[moduleId][issueId] = { ..._issues[moduleId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);

9
web/store_legacy/issues/project-issues/project-view/issue.store.ts
View File

@ -65,7 +65,8 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
if (!workspaceSlug || !projectId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
const userFilters = this.rootStore?.viewIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@ -162,6 +163,12 @@ export class ViewIssuesStore extends IssueBaseStore implements IViewIssuesStore
const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation");

9
web/store_legacy/issues/project-issues/project/issue.store.ts
View File

@ -65,7 +65,8 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
autorun(() => {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
if (!workspaceSlug || !projectId) return;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (!workspaceSlug || !projectId || !hasPermissionToCurrentProject) return;
const userFilters = this.rootStore?.projectIssuesFilter?.issueFilters?.filters;
if (userFilters) this.fetchIssues(workspaceSlug, projectId, "mutation");
@ -162,6 +163,12 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
const response = await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
runInAction(() => {
_issues = { ...this.issues };
_issues[projectId][issueId] = { ..._issues[projectId][issueId], ...response };
this.issues = _issues;
});
return response;
} catch (error) {
this.fetchIssues(workspaceSlug, projectId, "mutation");

6
web/store_legacy/module/module_issue.store.ts
View File

@ -91,10 +91,12 @@ export class ModuleIssueStore implements IModuleIssueStore {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const projectId = this.rootStore.project.projectId;
const moduleId = this.rootStore.module.moduleId;
const hasPermissionToCurrentProject = this.rootStore.user.hasPermissionToCurrentProject;
if (
workspaceSlug &&
projectId &&
hasPermissionToCurrentProject &&
moduleId &&
this.rootStore.moduleFilter.moduleFilters &&
this.rootStore.issueFilter.userDisplayFilters
@ -117,8 +119,8 @@ export class ModuleIssueStore implements IModuleIssueStore {
? "groupWithSubGroups"
: "grouped"
: ungroupedLayouts.includes(issueLayout)
? "ungrouped"
: null;
? "ungrouped"
: null;
return _issueState || null;
}

1
web/store_legacy/profile-issues/issue_filters.store.ts
View File

@ -68,7 +68,6 @@ export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
const userId = this.rootStore.profileIssues?.userId;
if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab && this.appliedFilters) {
console.log("autorun triggered");
this.rootStore.profileIssues.fetchIssues(
workspaceSlug,
userId,

1
web/styles/globals.css
View File

@ -420,6 +420,7 @@ body {
.vertical-lr {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
div.web-view-spinner {