thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge pull request #259 from makeplane/stage-release-develop

Browse Source 
release: Stage Release
This commit is contained in:
sriram veeraghanta 2023-02-09 00:19:42 +05:30 committed by GitHub
commit 394c73885d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 869 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apiserver/plane/api/views/oauth.py
View File

@ -34,7 +34,6 @@ def get_tokens_for_user(user):
def validate_google_token(token, client_id):
try:
id_info = id_token.verify_oauth2_token(
token, google_auth_request.Request(), client_id
)
@ -106,9 +105,19 @@ def get_user_data(access_token: str) -> dict:
resp = requests.get(url=url, headers=headers)
userData = resp.json()
user_data = resp.json()
return userData
response = requests.get(
url="https://api.github.com/user/emails", headers=headers
).json()
[
user_data.update({"email": item.get("email")})
for item in response
if item.get("primary") is True
]
return user_data
class OauthEndpoint(BaseAPIView):
@ -116,7 +125,6 @@ class OauthEndpoint(BaseAPIView):
def post(self, request):
try:
medium = request.data.get("medium", False)
id_token = request.data.get("credential", False)
client_id = request.data.get("clientId", False)
@ -138,7 +146,6 @@ class OauthEndpoint(BaseAPIView):
email = data.get("email", None)
if email == None:
return Response(
{
"error": "Something went wrong. Please try again later or contact the support team."
@ -153,7 +160,6 @@ class OauthEndpoint(BaseAPIView):
mobile_number = uuid.uuid4().hex
email_verified = True
else:
return Response(
{
"error": "Something went wrong. Please try again later or contact the support team."

2
apps/app/components/account/github-login-button.tsx
View File

@ -34,7 +34,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
return (
<Link
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}`}
href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
>
<button className="flex w-full items-center rounded bg-black px-3 py-2 text-sm text-white opacity-90 duration-300 hover:opacity-100">
<Image

1
apps/app/components/core/board-view/all-boards.tsx
View File

@ -3,7 +3,6 @@ import { DragDropContext, DropResult } from "react-beautiful-dnd";
// hooks
import useIssueView from "hooks/use-issue-view";
// components
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { SingleBoard } from "components/core/board-view/single-board";
// types
import { IIssue, IProjectMember, IState, UserAuth } from "types";

7
apps/app/components/core/bulk-delete-issues-modal.tsx
View File

@ -148,12 +148,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) =>
"delete_issue_ids",
selectedIssues.filter((i) => i !== val)
);
else {
const newToDelete = selectedIssues;
newToDelete.push(val);
setValue("delete_issue_ids", newToDelete);
}
else setValue("delete_issue_ids", [...selectedIssues, val]);
}}
>
<div className="relative m-1">

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

@ -14,17 +14,12 @@ import modulesService from "services/modules.service";
// hooks
import useIssueView from "hooks/use-issue-view";
// components
import { AllLists, AllBoards, ExistingIssuesListModal } from "components/core";
import { AllLists, AllBoards } from "components/core";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import {
CycleIssueResponse,
IIssue,
IssueResponse,
IState,
ModuleIssueResponse,
UserAuth,
} from "types";
import { CycleIssueResponse, IIssue, IssueResponse, ModuleIssueResponse, UserAuth } from "types";
// fetch-keys
import {
CYCLE_ISSUES,
@ -68,12 +63,13 @@ export const IssuesView: React.FC<Props> = ({
const { issueView, groupedByIssues, groupByProperty: selectedGroup } = useIssueView(issues);
const { data: states } = useSWR<IState[]>(
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
workspaceSlug
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const { data: members } = useSWR(
projectId ? PROJECT_MEMBERS(projectId as string) : null,

184
apps/app/components/core/sidebar/sidebar-progress-stats.tsx Normal file
View File

@ -0,0 +1,184 @@
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import useSWR from "swr";
// headless ui
import { Tab } from "@headlessui/react";
// services
import issuesServices from "services/issues.service";
import projectService from "services/project.service";
// components
import SingleProgressStats from "components/core/sidebar/single-progress-stats";
// ui
import { Avatar } from "components/ui";
// icons
import User from "public/user.png";
// types
import { IIssue, IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
// types
type Props = {
groupedIssues: any;
issues: IIssue[];
};
const stateGroupColours: {
[key: string]: string;
} = {
backlog: "#3f76ff",
unstarted: "#ff9e9e",
started: "#d687ff",
cancelled: "#ff5353",
completed: "#096e8d",
};
const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
workspaceSlug && projectId
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
: null
);
return (
<div className="flex flex-col items-center justify-center w-full gap-2 ">
<Tab.Group>
<Tab.List
as="div"
className="flex items-center justify-between w-full rounded bg-gray-100 text-xs"
>
<Tab
className={({ selected }) =>
`w-1/2 rounded py-1 ${selected ? "bg-gray-300" : "hover:bg-gray-200"}`
}
>
Assignees
</Tab>
<Tab
className={({ selected }) =>
`w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
}
>
Labels
</Tab>
<Tab
className={({ selected }) =>
`w-1/2 rounded py-1 ${selected ? "bg-gray-300 font-semibold" : "hover:bg-gray-200 "}`
}
>
States
</Tab>
</Tab.List>
<Tab.Panels className="flex items-center justify-between w-full">
<Tab.Panel as="div" className="w-full flex flex-col ">
{members?.map((member, index) => {
const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
if (totalArray.length > 0) {
return (
<SingleProgressStats
key={index}
title={
<>
<Avatar user={member.member} />
<span>{member.member.first_name}</span>
</>
}
completed={completeArray.length}
total={totalArray.length}
/>
);
}
})}
{issues?.filter((i) => i.assignees?.length === 0).length > 0 ? (
<SingleProgressStats
title={
<>
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="User"
/>
</div>
<span>No assignee</span>
</>
}
completed={
issues?.filter(
(i) => i.state_detail.group === "completed" && i.assignees?.length === 0
).length
}
total={issues?.filter((i) => i.assignees?.length === 0).length}
/>
) : (
""
)}
</Tab.Panel>
<Tab.Panel as="div" className="w-full flex flex-col ">
{issueLabels?.map((issue, index) => {
const totalArray = issues?.filter((i) => i.labels?.includes(issue.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
if (totalArray.length > 0) {
return (
<SingleProgressStats
key={index}
title={
<>
<span
className="block h-2 w-2 rounded-full "
style={{
backgroundColor: issue.color,
}}
/>
<span className="text-xs capitalize">{issue.name}</span>
</>
}
completed={completeArray.length}
total={totalArray.length}
/>
);
}
})}
</Tab.Panel>
<Tab.Panel as="div" className="w-full flex flex-col ">
{Object.keys(groupedIssues).map((group, index) => (
<SingleProgressStats
key={index}
title={
<>
<span
className="block h-2 w-2 rounded-full "
style={{
backgroundColor: stateGroupColours[group],
}}
/>
<span className="text-xs capitalize">{group}</span>
</>
}
completed={groupedIssues[group].length}
total={issues.length}
/>
))}
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
);
};
export default SidebarProgressStats;

29
apps/app/components/core/sidebar/single-progress-stats.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import { CircularProgressbar } from "react-circular-progressbar";
type TSingleProgressStatsProps = {
title: any;
completed: number;
total: number;
};
const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({ title, completed, total }) => (
<>
<div className="flex items-center justify-between w-full py-3 text-xs border-b-[1px] border-gray-200">
<div className="flex items-center justify-start w-1/2 gap-2">{title}</div>
<div className="flex items-center justify-end w-1/2 gap-1 px-2">
<div className="flex h-5 justify-center items-center gap-1 ">
<span className="h-4 w-4 ">
<CircularProgressbar value={completed} maxValue={total} strokeWidth={10} />
</span>
<span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
</div>
<span>of</span>
<span>{total}</span>
</div>
</div>
</>
);
export default SingleProgressStats;

5
apps/app/components/issues/select/state.tsx
View File

@ -10,6 +10,8 @@ import stateService from "services/state.service";
import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
// icons
import { Combobox, Transition } from "@headlessui/react";
// helpers
import { getStatesList } from "helpers/state.helper";
// fetch keys
import { STATE_LIST } from "constants/fetch-keys";
@ -27,12 +29,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: states } = useSWR(
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(projectId) : null,
workspaceSlug && projectId
? () => stateService.getStates(workspaceSlug as string, projectId)
: null
);
const states = getStatesList(stateGroups ?? {});
const options = states?.map((state) => ({
value: state.id,

7
apps/app/components/issues/sidebar-select/blocked.tsx
View File

@ -183,12 +183,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
"blocked_issue_ids",
selectedIssues.filter((i) => i !== val)
);
else {
const newBlocked = selectedIssues;
newBlocked.push(val);
setValue("blocked_issue_ids", newBlocked);
}
else setValue("blocked_issue_ids", [...selectedIssues, val]);
}}
>
<div className="relative m-1">

7
apps/app/components/issues/sidebar-select/blocker.tsx
View File

@ -184,12 +184,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
"blocker_issue_ids",
selectedIssues.filter((i) => i !== val)
);
else {
const newBlockers = selectedIssues;
newBlockers.push(val);
setValue("blocker_issue_ids", newBlockers);
}
else setValue("blocker_issue_ids", [...selectedIssues, val]);
}}
>
<div className="relative m-1">

8
apps/app/components/issues/sidebar-select/state.tsx
View File

@ -4,13 +4,16 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services
import { Squares2X2Icon } from "@heroicons/react/24/outline";
import stateService from "services/state.service";
// ui
import { Spinner, CustomSelect } from "components/ui";
// icons
import { Squares2X2Icon } from "@heroicons/react/24/outline";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IIssue, UserAuth } from "types";
// constants
@ -26,12 +29,13 @@ export const SidebarStateSelect: React.FC<Props> = ({ control, submitChanges, us
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: states } = useSWR(
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;

4
apps/app/components/issues/sub-issues-list-modal.tsx
View File

@ -44,7 +44,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
[];
const handleCommandPaletteClose = () => {
const handleModalClose = () => {
handleClose();
setQuery("");
};
@ -93,7 +93,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
return (
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
<Dialog as="div" className="relative z-20" onClose={handleCommandPaletteClose}>
<Dialog as="div" className="relative z-20" onClose={handleModalClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"

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

@ -8,8 +8,9 @@ import stateService from "services/state.service";
import { CustomSelect } from "components/ui";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { IIssue, IState } from "types";
import { IIssue } from "types";
// fetch-keys
import { STATE_LIST } from "constants/fetch-keys";
@ -29,12 +30,11 @@ export const ViewStateSelect: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: states } = useSWR<IState[]>(
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
workspaceSlug
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(issue.project) : null,
workspaceSlug ? () => stateService.getStates(workspaceSlug as string, issue.project) : null
);
const states = getStatesList(stateGroups ?? {});
return (
<CustomSelect

2
apps/app/components/labels/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./labels-list-modal";
export * from "./single-label";

180
apps/app/components/labels/labels-list-modal.tsx Normal file
View File

@ -0,0 +1,180 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// icons
import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
// services
import issuesService from "services/issues.service";
// types
import { IIssueLabels } from "types";
// constants
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
handleClose: () => void;
parent: IIssueLabels | undefined;
};
export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }) => {
const [query, setQuery] = useState("");
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const filteredLabels: IIssueLabels[] =
query === ""
? issueLabels ?? []
: issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
const handleModalClose = () => {
handleClose();
setQuery("");
};
const addChildLabel = async (label: IIssueLabels) => {
if (!workspaceSlug || !projectId) return;
mutate(
(prevData) =>
prevData?.map((l) => {
if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
return l;
}),
false
);
await issuesService
.patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
parent: parent?.id ?? "",
})
.then((res) => {
console.log(res);
mutate();
});
};
return (
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
<Dialog as="div" className="relative z-20" onClose={handleModalClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<Combobox>
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
placeholder="Search..."
onChange={(e) => setQuery(e.target.value)}
/>
</div>
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
>
{filteredLabels.length > 0 && (
<>
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
Labels
</h2>
)}
<ul className="text-sm text-gray-700">
{filteredLabels.map((label) => {
const children = issueLabels?.filter((l) => l.parent === label.id);
if (
(label.parent === "" || label.parent === null) && // issue does not have any other parent
label.id !== parent?.id && // issue is not itself
children?.length === 0 // issue doesn't have any othe children
)
return (
<Combobox.Option
key={label.id}
value={{
name: label.name,
}}
className={({ active }) =>
`flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
}`
}
onClick={() => {
addChildLabel(label);
handleClose();
}}
>
<span
className="block flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: label.color,
}}
/>
{label.name}
</Combobox.Option>
);
})}
</ul>
</li>
</>
)}
</Combobox.Options>
{query !== "" && filteredLabels.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14">
<RectangleStackIcon
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
aria-hidden="true"
/>
<p className="mt-4 text-sm text-gray-900">
We couldn{"'"}t find any label with that term. Please try again.
</p>
</div>
)}
</Combobox>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
);
};

171
apps/app/components/labels/single-label.tsx Normal file
View File

@ -0,0 +1,171 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
// headless ui
import { Disclosure, Transition } from "@headlessui/react";
// services
import issuesService from "services/issues.service";
// components
import { LabelsListModal } from "components/labels";
// ui
import { CustomMenu } from "components/ui";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
label: IIssueLabels;
issueLabels: IIssueLabels[];
editLabel: (label: IIssueLabels) => void;
handleLabelDelete: (labelId: string) => void;
};
export const SingleLabel: React.FC<Props> = ({
label,
issueLabels,
editLabel,
handleLabelDelete,
}) => {
const [labelsListModal, setLabelsListModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const children = issueLabels?.filter((l) => l.parent === label.id);
const removeFromGroup = (label: IIssueLabels) => {
if (!workspaceSlug || !projectId) return;
mutate<IIssueLabels[]>(
PROJECT_ISSUE_LABELS(projectId as string),
(prevData) =>
prevData?.map((l) => {
if (l.id === label.id) return { ...l, parent: null };
return l;
}),
false
);
issuesService
.patchIssueLabel(workspaceSlug as string, projectId as string, label.id, {
parent: null,
})
.then((res) => {
mutate(PROJECT_ISSUE_LABELS(projectId as string));
});
};
return (
<>
<LabelsListModal
isOpen={labelsListModal}
handleClose={() => setLabelsListModal(false)}
parent={label}
/>
{children && children.length === 0 ? (
label.parent === "" || !label.parent ? (
<div className="gap-2 space-y-3 divide-y rounded-md border p-3 md:w-2/3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span
className="h-3 w-3 flex-shrink-0 rounded-full"
style={{
backgroundColor: label.color,
}}
/>
<h6 className="text-sm">{label.name}</h6>
</div>
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
Convert to group
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
Delete
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
) : null
) : (
<Disclosure as="div" className="relative z-20 rounded-md border p-3 text-gray-900 md:w-2/3">
{({ open }) => (
<>
<div className="flex items-center justify-between gap-2 cursor-pointer">
<Disclosure.Button>
<div className="flex items-center gap-2">
<span>
<ChevronDownIcon
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
/>
</span>
<h6 className="text-sm">{label.name}</h6>
</div>
</Disclosure.Button>
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => setLabelsListModal(true)}>
Add more labels
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
Delete
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
<div className="mt-2 ml-4">
{children.map((child) => (
<div
key={child.id}
className="group pl-4 py-1 flex items-center justify-between rounded text-sm hover:bg-gray-100"
>
<h5 className="flex items-center gap-2">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: child.color,
}}
/>
{child.name}
</h5>
<div className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
<CustomMenu ellipsis>
<CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
Remove from group
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => editLabel(child)}>
Edit
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
Delete
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
))}
</div>
</Disclosure.Panel>
</Transition>
</>
)}
</Disclosure>
)}
</>
);
};

29
apps/app/components/modules/sidebar.tsx
View File

@ -7,6 +7,16 @@ import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// icons
import {
CalendarDaysIcon,
ChartPieIcon,
LinkIcon,
PlusIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// progress-bar
import { CircularProgressbar } from "react-circular-progressbar";
// services
import modulesService from "services/modules.service";
// hooks
@ -18,27 +28,19 @@ import {
SidebarMembersSelect,
SidebarStatusSelect,
} from "components/modules";
// progress-bar
import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
// ui
import { CustomDatePicker, Loader } from "components/ui";
// icons
import {
CalendarDaysIcon,
ChartPieIcon,
LinkIcon,
PlusIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers
import { timeAgo } from "helpers/date-time.helper";
import { copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
// types
import { IModule, ModuleIssueResponse } from "types";
import { IIssue, IModule, ModuleIssueResponse } from "types";
// fetch-keys
import { MODULE_DETAILS } from "constants/fetch-keys";
import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
const defaultValues: Partial<IModule> = {
lead: "",
@ -49,6 +51,7 @@ const defaultValues: Partial<IModule> = {
};
type Props = {
issues: IIssue[];
module?: IModule;
isOpen: boolean;
moduleIssues: ModuleIssueResponse[] | undefined;
@ -56,6 +59,7 @@ type Props = {
};
export const ModuleDetailsSidebar: React.FC<Props> = ({
issues,
module,
isOpen,
moduleIssues,
@ -290,6 +294,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({
</div>
</div>
</div>
<div className="w-full">
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
</div>
</>
) : (
<Loader>

28
apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
View File

@ -7,26 +7,29 @@ import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// icons
import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
// services
import cyclesService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Loader, CustomDatePicker } from "components/ui";
// progress-bar
// react-circular-progressbar
import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
// ui
import { Loader, CustomDatePicker } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
// services
import cyclesService from "services/cycles.service";
// components
import SidebarProgressStats from "components/core/sidebar/sidebar-progress-stats";
// icons
import { CalendarDaysIcon, ChartPieIcon, LinkIcon, UserIcon } from "@heroicons/react/24/outline";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
// types
import { CycleIssueResponse, ICycle } from "types";
import { CycleIssueResponse, ICycle, IIssue } from "types";
// fetch-keys
import { CYCLE_DETAILS } from "constants/fetch-keys";
type Props = {
issues: IIssue[];
cycle: ICycle | undefined;
isOpen: boolean;
cycleIssues: CycleIssueResponse[];
@ -37,7 +40,7 @@ const defaultValues: Partial<ICycle> = {
end_date: new Date().toString(),
};
const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) => {
const CycleDetailSidebar: React.FC<Props> = ({ issues, cycle, isOpen, cycleIssues }) => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
@ -219,6 +222,9 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
</div>
<div className="py-1" />
</div>
<div className="w-full">
<SidebarProgressStats issues={issues} groupedIssues={groupedIssues} />
</div>
</>
) : (
<Loader>

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

@ -15,7 +15,7 @@ import useToast from "hooks/use-toast";
// ui
import { Button, CustomSelect, Input } from "components/ui";
// types
import type { IState } from "types";
import type { IState, StateResponse } from "types";
// fetch-keys
import { STATE_LIST } from "constants/fetch-keys";
// constants
@ -85,7 +85,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
await stateService
.createState(workspaceSlug, projectId, { ...payload })
.then((res) => {
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res]);
mutate(STATE_LIST(projectId));
handleClose();
setToastAlert({

16
apps/app/components/states/create-update-state-modal.tsx
View File

@ -81,7 +81,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
await stateService
.createState(workspaceSlug as string, projectId, payload)
.then((res) => {
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
mutate(STATE_LIST(projectId));
onClose();
})
.catch((err) => {
@ -95,19 +95,7 @@ export const CreateUpdateStateModal: React.FC<Props> = ({
await stateService
.updateState(workspaceSlug as string, projectId, data.id, payload)
.then((res) => {
mutate<IState[]>(
STATE_LIST(projectId),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
mutate(STATE_LIST(projectId));
onClose();
})
.catch((err) => {

6
apps/app/components/states/delete-state-modal.tsx
View File

@ -59,11 +59,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
await stateServices
.deleteState(workspaceSlug as string, data.project, data.id)
.then(() => {
mutate<IState[]>(
STATE_LIST(data.project),
(prevData) => prevData?.filter((state) => state.id !== data?.id),
false
);
mutate(STATE_LIST(data.project));
handleClose();
setToastAlert({

18
apps/app/helpers/state.helper.ts Normal file
View File

@ -0,0 +1,18 @@
// types
import { IState, StateResponse } from "types";
export const orderStateGroups = (unorderedStateGroups: StateResponse) =>
Object.assign(
{ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
unorderedStateGroups
);
export const getStatesList = (stateGroups: any): IState[] => {
// order the unordered state groups first
const orderedStateGroups = orderStateGroups(stateGroups);
// extract states from the groups and return them
return Object.keys(orderedStateGroups)
.map((group) => [...orderedStateGroups[group].map((state: IState) => state)])
.flat();
};

4
apps/app/hooks/use-issue-view.tsx
View File

@ -10,6 +10,7 @@ import stateService from "services/state.service";
import { issueViewContext } from "contexts/issue-view.context";
// helpers
import { groupBy, orderArrayBy } from "helpers/array.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { IIssue, IState } from "types";
// fetch-keys
@ -35,12 +36,13 @@ const useIssueView = (projectIssues: IIssue[]) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: states } = useSWR(
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
let groupedByIssues: {
[key: string]: IIssue[];

4
apps/app/hooks/use-my-issues-filter.tsx
View File

@ -8,6 +8,7 @@ import userService from "services/user.service";
import useUser from "hooks/use-user";
// helpers
import { groupBy } from "helpers/array.helper";
import { getStatesList } from "helpers/state.helper";
// types
import { Properties, NestedKeyOf, IIssue } from "types";
// fetch-keys
@ -36,12 +37,13 @@ const useMyIssuesProperties = (issues?: IIssue[]) => {
const { user } = useUser();
const { data: states } = useSWR(
const { data: stateGroups } = useSWR(
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const states = getStatesList(stateGroups ?? {});
useEffect(() => {
if (!user) return;

40
apps/app/next.config.js
View File

@ -1,10 +1,4 @@
// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
const { withSentryConfig } = require("@sentry/nextjs");
/** @type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
@ -18,34 +12,10 @@ const nextConfig = {
],
},
output: "standalone",
experimental: {
outputFileTracingRoot: path.join(__dirname, "../../"),
transpilePackages: ["components/ui"],
},
};
module.exports = nextConfig;
// const withPWA = require("next-pwa")({
// dest: "public",
// });
// module.exports = withPWA({
// pwa: {
// dest: "public",
// register: true,
// skipWaiting: true,
// },
// reactStrictMode: false,
// swcMinify: true,
// images: {
// domains: ["vinci-web.s3.amazonaws.com"],
// },
// output: "standalone",
// experimental: {
// outputFileTracingRoot: path.join(__dirname, "../../"),
// transpilePackages: ["components/ui"],
// },
// });
module.exports = withSentryConfig(module.exports, { silent: true }, { hideSourcemaps: true });
if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
module.exports = withSentryConfig(nextConfig, { silent: true }, { hideSourceMaps: true });
} else {
module.exports = nextConfig;
}

49
apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -3,7 +3,10 @@ import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
import { NextPageContext } from "next";
// icons
import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
import { CyclesIcon } from "components/icons";
// lib
import { requiredAdmin, requiredAuth } from "lib/auth";
// layouts
@ -11,7 +14,6 @@ import AppLayout from "layouts/app-layout";
// contexts
import { IssueViewContextProvider } from "contexts/issue-view.context";
// components
import { CreateUpdateIssueModal } from "components/issues";
import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
import CycleDetailSidebar from "components/project/cycles/cycle-detail-sidebar";
// services
@ -21,12 +23,8 @@ import projectService from "services/project.service";
// ui
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
import { CyclesIcon } from "components/icons";
// types
import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
import { NextPageContext } from "next";
import { CycleIssueResponse, UserAuth } from "types";
// fetch-keys
import {
CYCLE_ISSUES,
@ -37,15 +35,9 @@ import {
} from "constants/fetch-keys";
const SingleCycle: React.FC<UserAuth> = (props) => {
const [isIssueModalOpen, setIsIssueModalOpen] = useState(false);
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
const [cycleSidebar, setCycleSidebar] = useState(true);
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | null
>(null);
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
@ -95,6 +87,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
)
: null
);
const cycleIssuesArray = cycleIssues?.map((issue) => ({
...issue.issue_detail,
sub_issues_count: issue.sub_issues_count,
@ -102,18 +95,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
cycle: cycleId as string,
}));
const openCreateIssueModal = (
issue?: IIssue,
actionType: "create" | "edit" | "delete" = "create"
) => {
if (issue) {
setPreloadedData(null);
setSelectedIssues({ ...issue, actionType });
} else setSelectedIssues(null);
setIsIssueModalOpen(true);
};
const openIssuesListModal = () => {
setCycleIssuesListModal(true);
};
@ -134,16 +115,6 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
return (
<IssueViewContextProvider>
<CreateUpdateIssueModal
isOpen={isIssueModalOpen && selectedIssues?.actionType !== "delete"}
data={selectedIssues}
prePopulateData={
preloadedData
? { cycle: cycleId as string, ...preloadedData }
: { cycle: cycleId as string, ...selectedIssues }
}
handleClose={() => setIsIssueModalOpen(false)}
/>
<ExistingIssuesListModal
isOpen={cycleIssuesListModal}
handleClose={() => setCycleIssuesListModal(false)}
@ -224,7 +195,12 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
title="Create a new issue"
description="Click to create a new issue inside the cycle."
Icon={PlusIcon}
action={openCreateIssueModal}
action={() => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
}}
/>
<EmptySpaceItem
title="Add an existing issue"
@ -241,6 +217,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
</div>
)}
<CycleDetailSidebar
issues={cycleIssuesArray ?? []}
cycle={cycleDetails}
isOpen={cycleSidebar}
cycleIssues={cycleIssues ?? []}

28
apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -1,9 +1,17 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { NextPageContext } from "next";
import useSWR, { mutate } from "swr";
// icons
import {
ArrowLeftIcon,
ListBulletIcon,
PlusIcon,
RectangleGroupIcon,
RectangleStackIcon,
} from "@heroicons/react/24/outline";
// lib
import { requiredAdmin, requiredAuth } from "lib/auth";
// services
@ -20,14 +28,6 @@ import { DeleteModuleModal, ModuleDetailsSidebar } from "components/modules";
// ui
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import {
ArrowLeftIcon,
ListBulletIcon,
PlusIcon,
RectangleGroupIcon,
RectangleStackIcon,
} from "@heroicons/react/24/outline";
// types
import {
IIssue,
@ -37,7 +37,7 @@ import {
SelectModuleType,
UserAuth,
} from "types";
import { NextPageContext } from "next";
// fetch-keys
import {
MODULE_DETAILS,
@ -245,7 +245,12 @@ const SingleModule: React.FC<UserAuth> = (props) => {
title="Create a new issue"
description="Click to create a new issue inside the module."
Icon={PlusIcon}
action={openCreateIssueModal}
action={() => {
const e = new KeyboardEvent("keydown", {
key: "c",
});
document.dispatchEvent(e);
}}
/>
<EmptySpaceItem
title="Add an existing issue"
@ -262,6 +267,7 @@ const SingleModule: React.FC<UserAuth> = (props) => {
</div>
)}
<ModuleDetailsSidebar
issues={moduleIssuesArray ?? []}
module={moduleDetails}
isOpen={moduleSidebar}
moduleIssues={moduleIssues}

101
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -19,14 +19,14 @@ import { requiredAdmin } from "lib/auth";
// layouts
import AppLayout from "layouts/app-layout";
// components
import SingleLabel from "components/project/settings/single-label";
import { SingleLabel } from "components/labels";
// ui
import { Button, Input, Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
import { IIssueLabels, UserAuth } from "types";
import type { NextPageContext, NextPage } from "next";
// fetch-keys
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
@ -36,28 +36,15 @@ const defaultValues: Partial<IIssueLabels> = {
color: "#ff0000",
};
type TLabelSettingsProps = {
isMember: boolean;
isOwner: boolean;
isViewer: boolean;
isGuest: boolean;
};
const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
const LabelsSettings: NextPage<UserAuth> = (props) => {
const { isMember, isOwner, isViewer, isGuest } = props;
const [newLabelForm, setNewLabelForm] = useState(false);
const [labelForm, setLabelForm] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const [labelIdForUpdate, setLabelIdForUpdate] = useState<string | null>(null);
const {
query: { workspaceSlug, projectId },
} = useRouter();
const { data: activeWorkspace } = useSWR(
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@ -66,6 +53,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
: null
);
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const {
register,
handleSubmit,
@ -76,37 +70,37 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
watch,
} = useForm<IIssueLabels>({ defaultValues });
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
workspaceSlug && projectId
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
: null
);
const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
if (!activeWorkspace || !projectDetails || isSubmitting) return;
await issuesService
.createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
.then((res) => {
reset(defaultValues);
mutate((prevData) => [...(prevData ?? []), res], false);
setNewLabelForm(false);
});
const newLabel = () => {
reset();
setIsUpdating(false);
setLabelForm(true);
};
const editLabel = (label: IIssueLabels) => {
setNewLabelForm(true);
setLabelForm(true);
setValue("color", label.color);
setValue("name", label.name);
setIsUpdating(true);
setLabelIdForUpdate(label.id);
};
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!activeWorkspace || !projectDetails || isSubmitting) return;
const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectDetails || isSubmitting) return;
await issuesService
.patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
.createIssueLabel(workspaceSlug as string, projectDetails.id, formData)
.then((res) => {
mutate((prevData) => [res, ...(prevData ?? [])], false);
reset(defaultValues);
setLabelForm(false);
});
};
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
if (!workspaceSlug || !projectDetails || isSubmitting) return;
await issuesService
.patchIssueLabel(workspaceSlug as string, projectDetails.id, labelIdForUpdate ?? "", formData)
.then((res) => {
console.log(res);
reset(defaultValues);
@ -115,15 +109,15 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)),
false
);
setNewLabelForm(false);
setLabelForm(false);
});
};
const handleLabelDelete = (labelId: string) => {
if (activeWorkspace && projectDetails) {
if (workspaceSlug && projectDetails) {
mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
issuesService
.deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
.deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
.then((res) => {
console.log(res);
})
@ -154,11 +148,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
</div>
<div className="flex items-center justify-between gap-2 md:w-2/3">
<h4 className="text-md mb-1 leading-6 text-gray-900">Manage labels</h4>
<Button
theme="secondary"
className="flex items-center gap-x-1"
onClick={() => setNewLabelForm(true)}
>
<Button theme="secondary" className="flex items-center gap-x-1" onClick={newLabel}>
<PlusIcon className="h-4 w-4" />
New label
</Button>
@ -166,7 +156,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
<div className="space-y-5">
<div
className={`flex items-center gap-2 rounded-md border p-3 md:w-2/3 ${
newLabelForm ? "" : "hidden"
labelForm ? "" : "hidden"
}`}
>
<div className="h-8 w-8 flex-shrink-0">
@ -227,7 +217,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
error={errors.name}
/>
</div>
<Button type="button" theme="secondary" onClick={() => setNewLabelForm(false)}>
<Button
type="button"
theme="secondary"
onClick={() => {
reset();
setLabelForm(false);
}}
>
Cancel
</Button>
{isUpdating ? (
@ -239,7 +236,11 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
{isSubmitting ? "Updating" : "Update"}
</Button>
) : (
<Button type="button" onClick={handleSubmit(handleNewLabel)} disabled={isSubmitting}>
<Button
type="button"
onClick={handleSubmit(handleLabelCreate)}
disabled={isSubmitting}
>
{isSubmitting ? "Adding" : "Add"}
</Button>
)}

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

@ -1,10 +1,9 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
import { IState } from "types";
import useSWR from "swr";
// services
import stateService from "services/state.service";
import projectService from "services/project.service";
@ -17,22 +16,18 @@ import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "component
// ui
import { Loader } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
// helpers
import { addSpaceIfCamelCase } from "helpers/string.helper";
import { groupBy } from "helpers/array.helper";
import { getStatesList, orderStateGroups } from "helpers/state.helper";
// types
import { UserAuth } from "types";
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import { PROJECT_DETAILS, STATE_LIST } from "constants/fetch-keys";
type TStateSettingsProps = {
isMember: boolean;
isOwner: boolean;
isViewer: boolean;
isGuest: boolean;
};
const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
const StatesSettings: NextPage<UserAuth> = (props) => {
const { isMember, isOwner, isViewer, isGuest } = props;
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
@ -56,16 +51,14 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
? () => stateService.getStates(workspaceSlug as string, projectId as string)
: null
);
const groupedStates: {
[key: string]: IState[];
} = groupBy(states ?? [], "group");
const orderedStateGroups = orderStateGroups(states ?? {});
const statesList = getStatesList(orderedStateGroups ?? {});
return (
<>
<DeleteStateModal
isOpen={!!selectDeleteState}
data={states?.find((state) => state.id === selectDeleteState) ?? null}
data={statesList?.find((s) => s.id === selectDeleteState) ?? null}
onClose={() => setSelectDeleteState(null)}
/>
<AppLayout
@ -88,60 +81,23 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
</div>
<div className="flex flex-col justify-between gap-4">
{states && projectDetails ? (
Object.keys(groupedStates).map((key) => (
<div key={key}>
<div className="mb-2 flex w-full justify-between md:w-2/3">
<p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
<button
type="button"
onClick={() => setActiveGroup(key as keyof StateGroup)}
className="flex items-center gap-2 text-xs text-theme"
>
<PlusIcon className="h-3 w-3 text-theme" />
Add
</button>
</div>
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
{key === activeGroup && (
<CreateUpdateStateInline
projectId={projectDetails.id}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={workspaceSlug as string}
data={null}
selectedGroup={key as keyof StateGroup}
/>
)}
{groupedStates[key]?.map((state) =>
state.id !== selectedState ? (
<div
key={state.id}
className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
Boolean(activeGroup !== key) ? "last:border-0" : ""
}`}
Object.keys(orderedStateGroups).map((key) => {
if (orderedStateGroups[key].length !== 0)
return (
<div key={key}>
<div className="mb-2 flex w-full justify-between md:w-2/3">
<p className="text-md capitalize leading-6 text-gray-900">{key} states</p>
<button
type="button"
onClick={() => setActiveGroup(key as keyof StateGroup)}
className="flex items-center gap-2 text-xs text-theme"
>
<div className="flex items-center gap-2">
<div
className="h-3 w-3 flex-shrink-0 rounded-full"
style={{
backgroundColor: state.color,
}}
/>
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
</div>
<div className="flex items-center gap-2">
<button type="button" onClick={() => setSelectDeleteState(state.id)}>
<TrashIcon className="h-4 w-4 text-red-400" />
</button>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
</button>
</div>
</div>
) : (
<div className="border-b last:border-b-0" key={state.id}>
<PlusIcon className="h-3 w-3 text-theme" />
Add
</button>
</div>
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
{key === activeGroup && (
<CreateUpdateStateInline
projectId={projectDetails.id}
onClose={() => {
@ -149,15 +105,60 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
setSelectedState(null);
}}
workspaceSlug={workspaceSlug as string}
data={states?.find((state) => state.id === selectedState) ?? null}
data={null}
selectedGroup={key as keyof StateGroup}
/>
</div>
)
)}
</div>
</div>
))
)}
{orderedStateGroups[key].map((state) =>
state.id !== selectedState ? (
<div
key={state.id}
className={`flex items-center justify-between gap-2 border-b bg-gray-50 p-3 ${
activeGroup !== key ? "last:border-0" : ""
}`}
>
<div className="flex items-center gap-2">
<div
className="h-3 w-3 flex-shrink-0 rounded-full"
style={{
backgroundColor: state.color,
}}
/>
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
</div>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => setSelectDeleteState(state.id)}
>
<TrashIcon className="h-4 w-4 text-red-400" />
</button>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
</button>
</div>
</div>
) : (
<div className="border-b last:border-b-0" key={state.id}>
<CreateUpdateStateInline
projectId={projectDetails.id}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={workspaceSlug as string}
data={
statesList?.find((state) => state.id === selectedState) ?? null
}
selectedGroup={key as keyof StateGroup}
/>
</div>
)
)}
</div>
</div>
);
})
) : (
<Loader className="space-y-5 md:w-2/3">
<Loader.Item height="40px" />

43
apps/app/pages/signin.tsx
View File

@ -62,27 +62,30 @@ const SignInPage: NextPage = () => {
}
};
const handleGithubSignIn = (githubToken: string) => {
setLoading(true);
authenticationService
.socialAuth({
medium: "github",
credential: githubToken,
clientId: NEXT_PUBLIC_GITHUB_ID,
})
.then(async () => {
await onSignInSuccess();
})
.catch((err) => {
console.log(err);
setToastAlert({
title: "Error signing in!",
type: "error",
message: "Something went wrong. Please try again later or contact the support team.",
const handleGithubSignIn = useCallback(
(credential: string) => {
setLoading(true);
authenticationService
.socialAuth({
medium: "github",
credential,
clientId: NEXT_PUBLIC_GITHUB_ID,
})
.then(async () => {
await onSignInSuccess();
})
.catch((err) => {
console.log(err);
setToastAlert({
title: "Error signing in!",
type: "error",
message: "Something went wrong. Please try again later or contact the support team.",
});
setLoading(false);
});
setLoading(false);
});
};
},
[onSignInSuccess, setToastAlert]
);
return (
<DefaultLayout

1
apps/app/sentry.client.config.js
View File

@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({
dsn: SENTRY_DSN,
environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1.0,
// ...

1
apps/app/sentry.edge.config.js
View File

@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({
dsn: SENTRY_DSN,
environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1.0,
// ...

1
apps/app/sentry.server.config.js
View File

@ -8,6 +8,7 @@ const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({
dsn: SENTRY_DSN,
environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1.0,
// ...

4
apps/app/services/state.service.ts
View File

@ -4,7 +4,7 @@ import APIService from "services/api.service";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
// types
import type { IState } from "types";
import type { IState, StateResponse } from "types";
class ProjectStateServices extends APIService {
constructor() {
@ -19,7 +19,7 @@ class ProjectStateServices extends APIService {
});
}
async getStates(workspaceSlug: string, projectId: string): Promise<IState[]> {
async getStates(workspaceSlug: string, projectId: string): Promise<StateResponse> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
.then((response) => response?.data)
.catch((error) => {

4
apps/app/types/state.d.ts vendored
View File

@ -13,3 +13,7 @@ export interface IState {
sequence: number;
group: "backlog" | "unstarted" | "started" | "completed" | "cancelled";
}
export interface StateResponse {
[key: string]: IState[];
}

4
turbo.json
View File

@ -7,7 +7,9 @@
"NEXT_PUBLIC_DOCSEARCH_API_KEY",
"NEXT_PUBLIC_DOCSEARCH_APP_ID",
"NEXT_PUBLIC_DOCSEARCH_INDEX_NAME",
"NEXT_PUBLIC_SENTRY_DSN"
"NEXT_PUBLIC_SENTRY_DSN",
"SENTRY_AUTH_TOKEN",
"NEXT_PUBLIC_SENTRY_ENVIRONMENT"
],
"pipeline": {
"build": {