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

Merge pull request #1406 from makeplane/develop

Browse Source 
promote: develop to stage-release
This commit is contained in:
guru_sainath 2023-06-27 16:48:34 +05:30 committed by GitHub
commit fd7274ba1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 681 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apiserver/plane/api/views/issue.py
View File

@ -15,6 +15,7 @@ from django.db.models import (
Value,
CharField,
When,
Max,
)
from django.core.serializers.json import DjangoJSONEncoder
from django.utils.decorators import method_decorator
@ -195,7 +196,7 @@ class IssueViewSet(BaseViewSet):
output_field=CharField(),
)
).order_by("priority_order")
# State Ordering
elif order_by_param in [
"state__name",
@ -218,6 +219,22 @@ class IssueViewSet(BaseViewSet):
output_field=CharField(),
)
).order_by("state_order")
# assignee and label ordering
elif order_by_param in [
"labels__name",
"-labels__name",
"assignees__first_name",
"-assignees__first_name",
]:
issue_queryset = issue_queryset.annotate(
max_values=Max(
order_by_param[1::]
if order_by_param.startswith("-")
else order_by_param
)
).order_by(
"-max_values" if order_by_param.startswith("-") else "max_values"
)
else:
issue_queryset = issue_queryset.order_by(order_by_param)
@ -239,7 +256,7 @@ class IssueViewSet(BaseViewSet):
return Response(issues, status=status.HTTP_200_OK)
except Exception as e:
print(e)
capture_exception(e)
return Response(
{"error": "Something went wrong please try again later"},
status=status.HTTP_400_BAD_REQUEST,

24
apiserver/plane/utils/issue_filters.py
View File

@ -1,7 +1,6 @@
from django.utils.timezone import make_aware
from django.utils.dateparse import parse_datetime
def filter_state(params, filter, method):
if method == "GET":
states = params.get("state").split(",")
@ -26,12 +25,27 @@ def filter_estimate_point(params, filter, method):
def filter_priority(params, filter, method):
if method == "GET":
priorties = params.get("priority").split(",")
if len(priorties) and "" not in priorties:
filter["priority__in"] = priorties
priorities = params.get("priority").split(",")
if len(priorities) and "" not in priorities:
if len(priorities) == 1 and "null" in priorities:
filter["priority__isnull"] = True
elif len(priorities) > 1 and "null" in priorities:
filter["priority__isnull"] = True
filter["priority__in"] = [p for p in priorities if p != "null"]
else:
filter["priority__in"] = [p for p in priorities if p != "null"]
else:
if params.get("priority", None) and len(params.get("priority")):
filter["priority__in"] = params.get("priority")
priorities = params.get("priority")
if len(priorities) == 1 and "null" in priorities:
filter["priority__isnull"] = True
elif len(priorities) > 1 and "null" in priorities:
filter["priority__isnull"] = True
filter["priority__in"] = [p for p in priorities if p != "null"]
else:
filter["priority__in"] = [p for p in priorities if p != "null"]
return filter

8
apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
View File

@ -41,6 +41,14 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
colors={(datum) => datum.color}
curve="monotoneX"
margin={{ top: 20 }}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{
background: "rgb(var(--color-bg-base))",
}}

139
apps/app/components/core/board-view/single-issue.tsx
View File

@ -23,6 +23,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
@ -44,7 +45,14 @@ import { LayerDiagonalIcon } from "components/icons";
import { handleIssuesMutation } from "constants/issue";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types
import { ICurrentUserResponse, IIssue, Properties, TIssueGroupByOptions, UserAuth } from "types";
import {
ICurrentUserResponse,
IIssue,
ISubIssueResponse,
Properties,
TIssueGroupByOptions,
UserAuth,
} from "types";
// fetch-keys
import {
CYCLE_DETAILS,
@ -52,6 +60,8 @@ import {
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";
type Props = {
@ -101,86 +111,68 @@ export const SingleBoardIssue: React.FC<Props> = ({
const { orderBy, params } = useIssuesView();
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
if (cycleId)
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
(prevData) =>
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
),
false
);
else if (moduleId)
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
MODULE_ISSUES_WITH_PARAMS(moduleId as string),
(prevData) =>
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
),
false
);
else {
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
const fetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
: viewId
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return handleIssuesMutation(
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
} else {
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
fetchKey,
(prevData) =>
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
);
},
),
false
);
}
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId, formData, user)
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
} else if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
mutate(fetchKey);
});
},
[
@ -188,6 +180,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
projectId,
cycleId,
moduleId,
viewId,
groupTitle,
index,
selectedGroup,
@ -370,23 +363,15 @@ export const SingleBoardIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.label_details.length > 0 && (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<div
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
</div>
))}
</div>
{properties.labels && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed}
tooltipPosition="left"
user={user}
selfPositioned
/>
)}
{properties.assignee && (
<ViewAssigneeSelect

94
apps/app/components/core/calendar-view/single-issue.tsx
View File

@ -19,6 +19,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
@ -28,12 +29,13 @@ import { LayerDiagonalIcon } from "components/icons";
// helper
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// type
import { ICurrentUserResponse, IIssue } from "types";
import { ICurrentUserResponse, IIssue, ISubIssueResponse } from "types";
// fetch-keys
import {
CYCLE_ISSUES_WITH_PARAMS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";
@ -68,7 +70,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
const fetchKey = cycleId
@ -79,25 +81,54 @@ export const SingleCalendarIssue: React.FC<Props> = ({
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issueId) {
return {
...p,
...formData,
assignees: formData?.assignees_list ?? p.assignees,
};
}
if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return p;
}),
false
);
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
} else {
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issue.id) {
return {
...p,
...formData,
assignees: formData?.assignees_list ?? p.assignees,
};
}
return p;
}),
false
);
}
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData, user)
.patchIssue(
workspaceSlug as string,
projectId as string,
issue.id as string,
formData,
user
)
.then(() => {
mutate(fetchKey);
})
@ -207,25 +238,14 @@ export const SingleCalendarIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.label_details.length > 0 ? (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
</span>
))}
</div>
) : (
""
{properties.labels && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
user={user}
isNotAllowed={isNotAllowed}
/>
)}
{properties.assignee && (
<ViewAssigneeSelect

3
apps/app/components/core/issues-view.tsx
View File

@ -572,8 +572,11 @@ export const IssuesView: React.FC<Props> = ({
/>
) : issueView === "spreadsheet" ? (
<SpreadsheetView
type={type}
handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
isCompleted={isCompleted}
user={user}
userAuth={memberRole}
/>

113
apps/app/components/core/list-view/single-issue.tsx
View File

@ -14,6 +14,7 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues/view-select";
@ -36,7 +37,7 @@ import { LayerDiagonalIcon } from "components/icons";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
import { handleIssuesMutation } from "constants/issue";
// types
import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
import { ICurrentUserResponse, IIssue, ISubIssueResponse, Properties, UserAuth } from "types";
// fetch-keys
import {
CYCLE_DETAILS,
@ -44,6 +45,8 @@ import {
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";
type Props = {
@ -80,24 +83,53 @@ export const SingleListIssue: React.FC<Props> = ({
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const { setToastAlert } = useToast();
const { groupByProperty: selectedGroup, orderBy, params } = useIssueView();
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
if (cycleId)
const fetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
: viewId
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
} else {
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
fetchKey,
(prevData) =>
handleIssuesMutation(
formData,
@ -109,49 +141,12 @@ export const SingleListIssue: React.FC<Props> = ({
),
false
);
if (moduleId)
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
(prevData) =>
handleIssuesMutation(
formData,
groupTitle ?? "",
selectedGroup,
index,
orderBy,
prevData
),
false
);
mutate<
| {
[key: string]: IIssue[];
}
| IIssue[]
>(
PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
(prevData) =>
handleIssuesMutation(formData, groupTitle ?? "", selectedGroup, index, orderBy, prevData),
false
);
}
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId, formData, user)
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
mutate(CYCLE_DETAILS(cycleId as string));
} else if (moduleId) {
mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
mutate(MODULE_DETAILS(moduleId as string));
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
mutate(fetchKey);
});
},
[
@ -159,6 +154,7 @@ export const SingleListIssue: React.FC<Props> = ({
projectId,
cycleId,
moduleId,
viewId,
groupTitle,
index,
selectedGroup,
@ -275,25 +271,14 @@ export const SingleListIssue: React.FC<Props> = ({
isNotAllowed={isNotAllowed}
/>
)}
{properties.labels && issue.label_details.length > 0 ? (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
>
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
}}
/>
{label.name}
</span>
))}
</div>
) : (
""
{properties.labels && (
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="right"
user={user}
isNotAllowed={isNotAllowed}
/>
)}
{properties.assignee && (
<ViewAssigneeSelect

8
apps/app/components/core/sidebar/progress-chart.tsx
View File

@ -117,6 +117,14 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
colors={(datum) => datum.color ?? "#3F76FF"}
customYAxisTickValues={[0, totalIssues]}
gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues pending on </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{
background: "transparent",
axis: {

222
apps/app/components/core/spreadsheet-view/single-issue.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback } from "react";
import React, { useCallback, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
@ -10,12 +10,19 @@ import {
ViewAssigneeSelect,
ViewDueDateSelect,
ViewEstimateSelect,
ViewLabelSelect,
ViewPrioritySelect,
ViewStateSelect,
} from "components/issues";
import { Popover2 } from "@blueprintjs/popover2";
// icons
import { CustomMenu, Icon } from "components/ui";
import { LinkIcon, PencilIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { Icon } from "components/ui";
import {
EllipsisHorizontalIcon,
LinkIcon,
PencilIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// hooks
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
import useToast from "hooks/use-toast";
@ -26,10 +33,11 @@ import {
CYCLE_ISSUES_WITH_PARAMS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";
// types
import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
import { ICurrentUserResponse, IIssue, ISubIssueResponse, Properties, UserAuth } from "types";
// helper
import { copyTextToClipboard } from "helpers/string.helper";
@ -58,6 +66,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
userAuth,
nestingLevel,
}) => {
const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@ -67,7 +76,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
const fetchKey = cycleId
@ -78,25 +87,58 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issueId) {
return {
...p,
...formData,
};
}
return p;
}),
false
);
if (issue.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
} else {
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issue.id) {
return {
...p,
...formData,
};
}
return p;
}),
false
);
}
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData, user)
.patchIssue(
workspaceSlug as string,
projectId as string,
issue.id as string,
formData,
user
)
.then(() => {
mutate(fetchKey);
if (issue.parent) {
mutate(SUB_ISSUES(issue.parent as string));
} else {
mutate(fetchKey);
}
})
.catch((error) => {
console.log(error);
@ -128,27 +170,87 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
style={{ gridTemplateColumns }}
>
<div className="flex gap-1.5 items-center px-4 sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
<span className="flex gap-1 items-center" style={issue.parent ? { paddingLeft } : {}}>
<div className="flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14 opacity-100 group-hover:opacity-0">
<div className="flex gap-1.5 items-center px-4 sticky z-10 left-0 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
<div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14">
{properties.key && (
<span>
<span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
)}
{!isNotAllowed && (
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
<Popover2
isOpen={isOpen}
canEscapeKeyClose
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
content={
<div
className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-brand-base bg-brand-surface-1`}
>
<button
type="button"
className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
onClick={() => {
handleEditIssue(issue);
setIsOpen(false);
}}
>
<div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</div>
</button>
<button
type="button"
className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
onClick={() => {
handleDeleteIssue(issue);
setIsOpen(false);
}}
>
<div className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete issue</span>
</div>
</button>
<button
type="button"
className="hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
onClick={() => {
handleCopyText();
setIsOpen(false);
}}
>
<div className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</div>
</button>
</div>
}
placement="bottom-start"
>
<EllipsisHorizontalIcon className="h-5 w-5 text-brand-secondary" />
</Popover2>
</div>
)}
</div>
<div className="h-5 w-5">
<div className="h-6 w-6 flex justify-center items-center">
{issue.sub_issues_count > 0 && (
<button
className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm"
className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
onClick={() => handleToggleExpand(issue.id)}
>
<Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
</button>
)}
</div>
</span>
</div>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="truncate text-brand-base cursor-pointer w-full text-[0.825rem]">
{issue.name}
@ -191,30 +293,19 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
/>
</div>
)}
{properties.labels ? (
issue.label_details.length > 0 ? (
<div className="flex items-center gap-2 text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
{issue.label_details.slice(0, 4).map((label, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-brand-surface-2 border-brand-base
`}
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
}}
/>
</div>
))}
{issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
</div>
) : (
<div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
No Labels
</div>
)
) : (
""
{properties.labels && (
<div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
<ViewLabelSelect
issue={issue}
partialUpdateIssue={partialUpdateIssue}
position="left"
customButton
user={user}
isNotAllowed={isNotAllowed}
/>
</div>
)}
{properties.due_date && (
<div className="flex items-center text-xs text-brand-secondary text-center p-2 group-hover:bg-brand-surface-2 border-brand-base">
<ViewDueDateSelect
@ -237,35 +328,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
/>
</div>
)}
<div
className="absolute top-2.5 z-10 cursor-pointer opacity-0 group-hover:opacity-100"
style={{
left: `${nestingLevel * 68 + 24}px`,
}}
>
{!isNotAllowed && (
<CustomMenu width="auto" position="left" ellipsis>
<CustomMenu.MenuItem onClick={() => handleEditIssue(issue)}>
<div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" />
<span>Edit issue</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
<div className="flex items-center justify-start gap-2">
<TrashIcon className="h-4 w-4" />
<span>Delete issue</span>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<div className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
)}
</div>
</div>
);
};

2
apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
View File

@ -40,7 +40,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
return (
<div
className={`bg-brand-surface-1 w-full ${
col.propertyName === "title" ? "sticky left-0 z-[2] bg-brand-surface-1 pl-24" : ""
col.propertyName === "title" ? "sticky left-0 z-20 bg-brand-surface-1 pl-24" : ""
}`}
>
{col.propertyName === "title" ? (

67
apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
View File

@ -5,7 +5,7 @@ import { useRouter } from "next/router";
// components
import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
import { Icon, Spinner } from "components/ui";
import { CustomMenu, Icon, Spinner } from "components/ui";
// hooks
import useIssuesProperties from "hooks/use-issue-properties";
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
@ -17,15 +17,21 @@ import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
import { PlusIcon } from "@heroicons/react/24/outline";
type Props = {
type: "issue" | "cycle" | "module";
handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null;
isCompleted?: boolean;
user: ICurrentUserResponse | undefined;
userAuth: UserAuth;
};
export const SpreadsheetView: React.FC<Props> = ({
type,
handleEditIssue,
handleDeleteIssue,
openIssuesListModal,
isCompleted = false,
user,
userAuth,
}) => {
@ -56,7 +62,7 @@ export const SpreadsheetView: React.FC<Props> = ({
return (
<div className="h-full rounded-lg text-brand-secondary overflow-x-auto whitespace-nowrap bg-brand-base">
<div className="sticky z-[2] top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
<div className="sticky z-20 top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
<SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
</div>
{spreadsheetIssues ? (
@ -75,16 +81,55 @@ export const SpreadsheetView: React.FC<Props> = ({
userAuth={userAuth}
/>
))}
<button
className="flex items-center gap-1.5 pl-7 py-2.5 text-sm text-brand-secondary hover:text-brand-base hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
<div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
style={{ gridTemplateColumns }}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
{type === "issue" ? (
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
) : (
!isCompleted && (
<CustomMenu
className="sticky left-0 z-[1]"
customButton={
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
type="button"
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
}
position="left"
menuItemsClassName="left-5 !w-36"
noBorder
>
<CustomMenu.MenuItem
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
Create new
</CustomMenu.MenuItem>
{openIssuesListModal && (
<CustomMenu.MenuItem onClick={openIssuesListModal}>
Add an existing issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
)
)}
</div>
</div>
) : (
<Spinner />

8
apps/app/components/issues/form.tsx
View File

@ -23,7 +23,6 @@ import {
IssueStateSelect,
} from "components/issues/select";
import { CreateStateModal } from "components/states";
import { CreateUpdateCycleModal } from "components/cycles";
import { CreateLabelModal } from "components/labels";
// ui
import {
@ -73,7 +72,6 @@ const defaultValues: Partial<IIssue> = {
description_html: "<p></p>",
estimate_point: null,
state: "",
cycle: null,
priority: null,
assignees: [],
assignees_list: [],
@ -122,7 +120,6 @@ export const IssueForm: FC<IssueFormProps> = ({
}) => {
// states
const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
const [cycleModal, setCycleModal] = useState(false);
const [stateModal, setStateModal] = useState(false);
const [labelModal, setLabelModal] = useState(false);
const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
@ -252,11 +249,6 @@ export const IssueForm: FC<IssueFormProps> = ({
projectId={projectId}
user={user}
/>
<CreateUpdateCycleModal
isOpen={cycleModal}
handleClose={() => setCycleModal(false)}
user={user}
/>
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}

32
apps/app/components/issues/modal.tsx
View File

@ -82,12 +82,17 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const { params: inboxParams } = useInboxView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
const { user } = useUser();
const { setToastAlert } = useToast();
if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
if (router.asPath.includes("my-issues"))
prePopulateData = {
...prePopulateData,
assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
};
const { data: issues } = useSWR(
workspaceSlug && activeProject
? PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? "")
@ -121,7 +126,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
}, [handleClose]);
const addIssueToCycle = async (issueId: string, cycleId: string) => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !activeProject) return;
await issuesService
.addIssueToCycle(
@ -142,7 +147,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};
const addIssueToModule = async (issueId: string, moduleId: string) => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !activeProject) return;
await modulesService
.addIssuesToModule(
@ -163,7 +168,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};
const addIssueToInbox = async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId || !inboxId) return;
if (!workspaceSlug || !activeProject || !inboxId) return;
const payload = {
issue: {
@ -178,7 +183,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
await inboxServices
.createInboxIssue(
workspaceSlug.toString(),
projectId.toString(),
activeProject.toString(),
inboxId.toString(),
payload,
user
@ -191,7 +196,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
});
router.push(
`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
`/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`
);
mutate(INBOX_ISSUES(inboxId.toString(), inboxParams));
@ -211,7 +216,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
: viewId
? VIEW_ISSUES(viewId.toString(), calendarParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", calendarParams);
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
@ -219,7 +224,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", spreadsheetParams);
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
const ganttFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
@ -227,10 +232,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString())
: viewId
? VIEW_ISSUES(viewId.toString(), viewGanttParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "");
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
const createIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !projectId) return;
if (!workspaceSlug || !activeProject) return;
if (inboxId) await addIssueToInbox(payload);
else
@ -252,7 +257,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
message: "Issue created successfully.",
});
if (payload.assignees_list?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE);
if (payload.assignees_list?.some((assignee) => assignee === user?.id))
mutate(USER_ISSUE(workspaceSlug as string));
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
})

6
apps/app/components/issues/my-issues-list-item.tsx
View File

@ -44,14 +44,14 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>, issueId: string) => {
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug) return;
mutate<IIssue[]>(
USER_ISSUE(workspaceSlug as string),
(prevData) =>
prevData?.map((p) => {
if (p.id === issueId) return { ...p, ...formData };
if (p.id === issue.id) return { ...p, ...formData };
return p;
}),
@ -59,7 +59,7 @@ export const MyIssuesListItem: React.FC<Props> = ({ issue, properties, projectId
);
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issueId, formData, user)
.patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
.then((res) => {
mutate(USER_ISSUE(workspaceSlug as string));
})

4
apps/app/components/issues/view-select/assignee.tsx
View File

@ -18,7 +18,7 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
tooltipPosition?: "left" | "right";
@ -108,7 +108,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
else newData.push(data);
partialUpdateIssue({ assignees_list: data }, issue.id);
partialUpdateIssue({ assignees_list: data }, issue);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{

4
apps/app/components/issues/view-select/due-date.tsx
View File

@ -11,7 +11,7 @@ import { ICurrentUserResponse, IIssue } from "types";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
noBorder?: boolean;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
@ -48,7 +48,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
priority: issue.priority,
state: issue.state,
},
issue.id
issue
);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{

4
apps/app/components/issues/view-select/estimate.tsx
View File

@ -15,7 +15,7 @@ import { ICurrentUserResponse, IIssue } from "types";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
customButton?: boolean;
@ -54,7 +54,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
<CustomSelect
value={issue.estimate_point}
onChange={(val: number) => {
partialUpdateIssue({ estimate_point: val }, issue.id);
partialUpdateIssue({ estimate_point: val }, issue);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,

1
apps/app/components/issues/view-select/index.ts
View File

@ -3,3 +3,4 @@ export * from "./due-date";
export * from "./estimate";
export * from "./priority";
export * from "./state";
export * from "./label";

148
apps/app/components/issues/view-select/label.tsx Normal file
View File

@ -0,0 +1,148 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import issuesService from "services/issues.service";
// component
import { CreateLabelModal } from "components/labels";
// ui
import { CustomSearchSelect, Tooltip } from "components/ui";
// icons
import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
// types
import { ICurrentUserResponse, IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
tooltipPosition?: "left" | "right";
customButton?: boolean;
user: ICurrentUserResponse | undefined;
isNotAllowed: boolean;
};
export const ViewLabelSelect: React.FC<Props> = ({
issue,
partialUpdateIssue,
position = "left",
selfPositioned = false,
tooltipPosition = "right",
user,
isNotAllowed,
customButton = false,
}) => {
const [labelModal, setLabelModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const options = issueLabels?.map((label) => ({
value: label.id,
query: label.name,
content: (
<div className="flex items-center justify-start gap-2">
<span
className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color,
}}
/>
<span>{label.name}</span>
</div>
),
}));
const labelsLabel = (
<Tooltip
position={`top-${tooltipPosition}`}
tooltipHeading="Labels"
tooltipContent={
issue.label_details.length > 0
? issue.label_details.map((label) => label.name ?? "").join(", ")
: "No Label"
}
>
<div
className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-2 text-brand-secondary`}
>
{issue.label_details.length > 0 ? (
<>
{issue.label_details.slice(0, 4).map((label, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-brand-surface-2 border-brand-base
`}
style={{
backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
}}
/>
</div>
))}
{issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
</>
) : (
<>
<TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
</>
)}
</div>
</Tooltip>
);
const footerOption = (
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
onClick={() => setLabelModal(true)}
>
<span className="flex items-center justify-start gap-1 text-brand-secondary">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
</button>
);
return (
<>
{projectId && (
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId.toString()}
user={user}
/>
)}
<CustomSearchSelect
value={issue.labels}
onChange={(data: string[]) => {
partialUpdateIssue({ labels_list: data }, issue);
}}
options={options}
{...(customButton ? { customButton: labelsLabel } : { label: labelsLabel })}
multiple
noChevron
position={position}
disabled={isNotAllowed}
selfPositioned={selfPositioned}
footerOption={footerOption}
dropdownWidth="w-full min-w-[12rem]"
/>
</>
);
};

4
apps/app/components/issues/view-select/priority.tsx
View File

@ -17,7 +17,7 @@ import { capitalizeFirstLetter } from "helpers/string.helper";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
noBorder?: boolean;
@ -41,7 +41,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
<CustomSelect
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data }, issue.id);
partialUpdateIssue({ priority: data }, issue);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{
workspaceSlug,

4
apps/app/components/issues/view-select/state.tsx
View File

@ -19,7 +19,7 @@ import { STATES_LIST } from "constants/fetch-keys";
type Props = {
issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
position?: "left" | "right";
selfPositioned?: boolean;
customButton?: boolean;
@ -83,7 +83,7 @@ export const ViewStateSelect: React.FC<Props> = ({
priority: issue.priority,
target_date: issue.target_date,
},
issue.id
issue
);
trackEventServices.trackIssuePartialPropertyUpdateEvent(
{

46
apps/app/components/states/create-update-state-inline.tsx
View File

@ -15,7 +15,7 @@ import stateService from "services/state.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
// types
import type { ICurrentUserResponse, IState, IStateResponse } from "types";
// fetch-keys
@ -28,6 +28,7 @@ type Props = {
onClose: () => void;
selectedGroup: StateGroup | null;
user: ICurrentUserResponse | undefined;
groupLength: number;
};
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
@ -43,6 +44,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
onClose,
selectedGroup,
user,
groupLength,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -174,9 +176,8 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none ${
open ? "text-brand-base" : "text-brand-secondary"
}`}
className={`group inline-flex items-center text-base font-medium focus:outline-none ${open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" && (
<span
@ -228,22 +229,27 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
name="group"
control={control}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
onChange={onChange}
label={
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
: "Select group"
}
input
>
{Object.keys(GROUP_CHOICES).map((key) => (
<CustomSelect.Option key={key} value={key}>
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
</CustomSelect.Option>
))}
</CustomSelect>
<Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"} >
<div>
<CustomSelect
disabled={groupLength === 1}
value={value}
onChange={onChange}
label={
Object.keys(GROUP_CHOICES).find((k) => k === value.toString())
? GROUP_CHOICES[value.toString() as keyof typeof GROUP_CHOICES]
: "Select group"
}
input
>
{Object.keys(GROUP_CHOICES).map((key) => (
<CustomSelect.Option key={key} value={key}>
{GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
</CustomSelect.Option>
))}
</CustomSelect>
</div>
</Tooltip>
)}
/>
)}

4
apps/app/components/ui/custom-menu.tsx
View File

@ -19,6 +19,7 @@ type Props = {
noChevron?: boolean;
position?: "left" | "right";
verticalPosition?: "top" | "bottom";
menuItemsClassName?: string;
customButton?: JSX.Element;
menuItemsWhiteBg?: boolean;
};
@ -44,6 +45,7 @@ const CustomMenu = ({
noChevron = false,
position = "right",
verticalPosition = "bottom",
menuItemsClassName = "",
customButton,
menuItemsWhiteBg = false,
}: Props) => (
@ -133,7 +135,7 @@ const CustomMenu = ({
menuItemsWhiteBg
? "border-brand-surface-1 bg-brand-base"
: "border-brand-base bg-brand-surface-1"
}`}
} ${menuItemsClassName}`}
>
<div className="py-1">{children}</div>
</Menu.Items>

2
apps/app/components/ui/custom-select.tsx
View File

@ -54,7 +54,7 @@ const CustomSelect = ({
) : (
<Listbox.Button
className={`flex w-full ${
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
disabled ? "cursor-not-allowed text-brand-secondary" : "cursor-pointer hover:bg-brand-surface-2"
} items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${

9
apps/app/components/ui/multi-level-dropdown.tsx
View File

@ -3,7 +3,7 @@ import { Fragment, useState } from "react";
// headless ui
import { Menu, Transition } from "@headlessui/react";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
type MultiLevelDropdownProps = {
@ -127,9 +127,14 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
}}
className={`${
child.selected ? "bg-brand-surface-2" : ""
} flex w-full items-center whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
} flex w-full items-center justify-between whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
>
{child.label}
<CheckIcon
className={`h-3.5 w-3.5 opacity-0 ${
child.selected ? "opacity-100" : ""
}`}
/>
</button>
))}
</div>

6
apps/app/components/views/select-filters.tsx
View File

@ -70,7 +70,7 @@ export const SelectFilters: React.FC<Props> = ({
value: PRIORITIES,
children: [
...PRIORITIES.map((priority) => ({
id: priority ?? "none",
id: priority === null ? "null" : priority,
label: (
<div className="flex items-center gap-2">
{getPriorityIcon(priority)} {priority ?? "None"}
@ -78,9 +78,9 @@ export const SelectFilters: React.FC<Props> = ({
),
value: {
key: "priority",
value: priority,
value: priority === null ? "null" : priority,
},
selected: filters?.priority?.includes(priority ?? "none"),
selected: filters?.priority?.includes(priority === null ? "null" : priority),
})),
],
},

8
apps/app/components/workspace/completed-issues-graph.tsx
View File

@ -60,6 +60,14 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
customYAxisTickValues={data.map((item) => item.completed_count)}
colors={(datum) => datum.color}
enableSlices="x"
sliceTooltip={(datum) => (
<div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
{datum.slice.points[0].data.yFormatted}
<span className="text-brand-secondary"> issues closed in </span>
{datum.slice.points[0].data.xFormatted}
</div>
)}
theme={{
background: "rgb(var(--color-bg-base))",
}}

9
apps/app/layouts/app-layout/app-header.tsx
View File

@ -6,10 +6,15 @@ type Props = {
left?: JSX.Element;
right?: JSX.Element;
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
noHeader: boolean;
};
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
<div className="relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4">
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
<div
className={`relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-y-4 border-b border-brand-base bg-brand-sidebar px-5 py-4 ${
noHeader ? "md:hidden" : ""
}`}
>
<div className="flex items-center gap-2">
<div className="block md:hidden">
<button

15
apps/app/layouts/auth-layout/project-authorization-wrapper.tsx
View File

@ -100,14 +100,13 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
: "bg-brand-base"
}`}
>
{!noHeader && (
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
/>
)}
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
noHeader={noHeader}
/>
<div className="h-full w-full overflow-hidden">
<div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
</div>

15
apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
View File

@ -107,14 +107,13 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
: "bg-brand-base"
}`}
>
{!noHeader && (
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
/>
)}
<AppHeader
breadcrumbs={breadcrumbs}
left={left}
right={right}
setToggleSidebar={setToggleSidebar}
noHeader={noHeader}
/>
<div className="h-full w-full overflow-hidden">
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
{children}

2
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -98,6 +98,7 @@ const StatesSettings: NextPage = () => {
<div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
{key === activeGroup && (
<CreateUpdateStateInline
groupLength={orderedStateGroups[key].length}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
@ -128,6 +129,7 @@ const StatesSettings: NextPage = () => {
setActiveGroup(null);
setSelectedState(null);
}}
groupLength={orderedStateGroups[key].length}
data={
statesList?.find((state) => state.id === selectedState) ?? null
}

5
apps/app/styles/globals.css
View File

@ -225,3 +225,8 @@ body {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
/* popover2 styling */
.bp4-popover2-transition-container {
z-index: 20 !important;
}