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

fix: consistent icons and modal fixes (#216)

Browse Source 
* fix: consistent icons and modal fixes

* fix: total worspace members

* fix: sub issue mutation
This commit is contained in:
Aaryan Khandelwal 2023-01-31 19:24:45 +05:30 committed by GitHub
parent 7278b5727f
commit eaa77a2552
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 137 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/components/account/email-signin-form.tsx
View File

@ -28,7 +28,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
<span className="bg-white px-2 text-gray-500">or</span>
</div>
</div>
<div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
{/* <div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
<button
type="button"
className="flex w-full items-center rounded border border-gray-300 px-3 py-2 text-sm duration-300 hover:bg-gray-100"
@ -39,7 +39,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
{useCode ? "Continue with Password" : "Continue with Code"}
</span>
</button>
</div>
</div> */}
</div>
</>
);

94
apps/app/components/common/bulk-delete-issues-modal.tsx
View File

@ -24,8 +24,7 @@ import { IIssue, IssueResponse } from "types";
import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
type FormInput = {
issue_ids: string[];
cycleId: string;
delete_issue_ids: string[];
};
type Props = {
@ -61,17 +60,27 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const { setToastAlert } = useToast();
const {
register,
handleSubmit,
watch,
reset,
setValue,
formState: { isSubmitting },
} = useForm<FormInput>();
} = useForm<FormInput>({
defaultValues: {
delete_issue_ids: [],
},
});
const filteredIssues: IIssue[] =
query === ""
? issues?.results ?? []
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
[];
: issues?.results.filter(
(issue) =>
issue.name.toLowerCase().includes(query.toLowerCase()) ||
`${issue.project_detail.identifier}-${issue.sequence_id}`
.toLowerCase()
.includes(query.toLowerCase())
) ?? [];
const handleClose = () => {
setIsOpen(false);
@ -80,7 +89,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
};
const handleDelete: SubmitHandler<FormInput> = async (data) => {
if (!data.issue_ids || data.issue_ids.length === 0) {
if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
setToastAlert({
title: "Error",
type: "error",
@ -89,30 +98,34 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
return;
}
if (!Array.isArray(data.issue_ids)) data.issue_ids = [data.issue_ids];
if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
if (workspaceSlug && projectId) {
await issuesServices
.bulkDeleteIssues(workspaceSlug as string, projectId as string, data)
.bulkDeleteIssues(workspaceSlug as string, projectId as string, {
issue_ids: data.delete_issue_ids,
})
.then((res) => {
setToastAlert({
title: "Success",
type: "success",
message: res.message,
});
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => ({
...(prevData as IssueResponse),
count: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
(p) => !data.delete_issue_ids.some((id) => p.id === id)
).length,
results: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
(p) => !data.delete_issue_ids.some((id) => p.id === id)
),
}),
false
);
handleClose();
})
.catch((e) => {
console.log(e);
@ -123,18 +136,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
return (
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<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}
@ -145,15 +146,31 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
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">
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<form>
<Combobox>
<Combobox
onChange={(val: string) => {
const selectedIssues = watch("delete_issue_ids");
if (selectedIssues.includes(val))
setValue(
"delete_issue_ids",
selectedIssues.filter((i) => i !== val)
);
else {
const newToDelete = selectedIssues;
newToDelete.push(val);
setValue("delete_issue_ids", newToDelete);
}
}}
>
<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
<input
type="text"
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={(event) => setQuery(event.target.value)}
@ -175,12 +192,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{filteredIssues.map((issue) => (
<Combobox.Option
key={issue.id}
as="label"
htmlFor={`issue-${issue.id}`}
value={{
name: issue.name,
url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
}}
as="div"
value={issue.id}
className={({ active }) =>
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
@ -190,9 +203,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div className="flex items-center gap-2">
<input
type="checkbox"
{...register("issue_ids")}
id={`issue-${issue.id}`}
value={issue.id}
checked={watch("delete_issue_ids").includes(issue.id)}
readOnly
/>
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@ -219,18 +231,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</div>
)}
</Combobox.Options>
{query !== "" && filteredIssues.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14">
<FolderIcon
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 issue with that term. Please try again.
</p>
</div>
)}
</Combobox>
{filteredIssues.length > 0 && (

5
apps/app/components/cycles/select.tsx
View File

@ -7,7 +7,8 @@ import useSWR from "swr";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// icons
import { PlusIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
import { PlusIcon } from "@heroicons/react/24/outline";
import { CyclesIcon } from "components/icons";
// services
import cycleServices from "services/cycles.service";
// components
@ -65,7 +66,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
<Listbox.Button
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
>
<ArrowPathIcon className="h-3 w-3 text-gray-500" />
<CyclesIcon className="h-3 w-3 text-gray-500" />
<div className="flex items-center gap-2 truncate">
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
</div>

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

@ -99,11 +99,6 @@ export const IssueForm: FC<IssueFormProps> = ({
setMostSimilarIssue(similarIssue);
};
const handleDiscard = () => {
reset({ ...defaultValues, project: projectId });
handleClose();
};
const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
await handleFormSubmit(formData);
@ -367,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
</button>
</div>
<div className="flex items-center gap-2">
<Button theme="secondary" onClick={handleDiscard}>
<Button theme="secondary" onClick={handleClose}>
Discard
</Button>
<Button type="submit" disabled={isSubmitting}>

12
apps/app/components/project/cycles/stats-view/single-stat.tsx
View File

@ -1,19 +1,19 @@
// react
import React from "react";
// next
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
// swr
import useSWR from "swr";
// services
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { ArrowPathIcon, UserIcon } from "@heroicons/react/24/outline";
import cyclesService from "services/cycles.service";
// hooks
// ui
import { Button, CustomMenu } from "components/ui";
// icons
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import { UserIcon } from "@heroicons/react/24/outline";
import { CyclesIcon } from "components/icons";
// helpers
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
import { groupBy } from "helpers/array.helper";
@ -120,7 +120,7 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
}
>
<ArrowPathIcon className="h-3 w-3" />
<CyclesIcon className="h-3 w-3" />
Open Cycle
</Button>
</div>

18
apps/app/components/project/issues/issue-detail/add-as-sub-issue.tsx
View File

@ -11,7 +11,7 @@ import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/out
// services
import issuesServices from "services/issues.service";
// types
import { IIssue } from "types";
import { IIssue, IssueResponse } from "types";
// constants
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
@ -54,6 +54,22 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
.then((res) => {
mutate(SUB_ISSUES(parent?.id ?? ""));
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((p) => {
if (p.id === res.id)
return {
...p,
...res,
};
return p;
}),
}),
false
);
})
.catch((e) => {
console.log(e);

9
apps/app/components/project/issues/issue-detail/comment/issue-comment-card.tsx
View File

@ -1,6 +1,5 @@
// react
import React, { useEffect, useState } from "react";
// next
import Image from "next/image";
import dynamic from "next/dynamic";
@ -8,14 +7,14 @@ import dynamic from "next/dynamic";
import { useForm } from "react-hook-form";
// icons
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types
import type { IIssueComment } from "types";
// hooks
import useUser from "hooks/use-user";
// ui
import { CustomMenu } from "components/ui";
// helpers
import { timeAgo } from "helpers/date-time.helper";
// types
import type { IIssueComment } from "types";
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
@ -76,7 +75,7 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
</span>
<span>{timeAgo(comment.created_at)}</span>
</p>
<div>
<div className="issue-comments-section">
{isEditing ? (
<form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
<RemirrorRichTextEditor

8
apps/app/components/project/issues/issue-detail/comment/issue-comment-section.tsx
View File

@ -5,15 +5,15 @@ import dynamic from "next/dynamic";
// react-hook-form
import { useForm, Controller } from "react-hook-form";
// types
import type { IIssueActivity, IIssueComment } from "types";
import type { KeyedMutator } from "swr";
// services
import issuesServices from "services/issues.service";
// ui
import { Loader } from "components/ui";
// helpers
import { debounce } from "helpers/functions.helper";
// types
import type { IIssueActivity, IIssueComment } from "types";
import type { KeyedMutator } from "swr";
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false,
@ -83,7 +83,7 @@ const AddIssueComment: React.FC<{
return (
<div className="space-y-5">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="issue-comments-section rounded-md p-2 pt-3">
<div className="issue-comments-section">
<Controller
name="comment_html"
control={control}

8
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
View File

@ -1,21 +1,21 @@
// react
import React from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react-hook-form
import { UseFormWatch } from "react-hook-form";
// constants
import { ArrowPathIcon } from "@heroicons/react/24/outline";
// services
import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service";
// ui
import { Spinner, CustomSelect } from "components/ui";
// icons
import { CyclesIcon } from "components/icons";
// types
import { ICycle, IIssue } from "types";
// fetch-keys
import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
type Props = {
@ -55,7 +55,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ArrowPathIcon className="h-4 w-4 flex-shrink-0" />
<CyclesIcon className="h-4 w-4 flex-shrink-0" />
<p>Cycle</p>
</div>
<div className="space-y-1 sm:basis-1/2">

7
apps/app/components/rich-text-editor/toolbar/index.tsx
View File

@ -32,11 +32,8 @@ export const RichTextToolbar: React.FC = () => (
<OrderedListButton />
<UnorderedListButton />
</div>
{/* <div className="px-2">
<TableControls />
</div> */}
<div className="flex items-center gap-x-1 px-2">
{/* <div className="flex items-center gap-x-1 px-2">
<LinkButton />
</div>
</div> */}
</div>
);

3
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -155,7 +155,8 @@ export const WorkspaceSidebarDropdown = () => {
<div className="text-left">
<h5 className="text-sm">{workspace.name}</h5>
<div className="text-xs text-gray-500">
{workspace.total_members} members
{workspace.total_members}{" "}
{workspace.total_members > 1 ? "members" : "member"}
</div>
</div>
</button>

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

@ -10,9 +10,7 @@ type Props = {
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
};
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => {
return (
<>
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
<div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
<div className="flex items-center gap-2">
<div className="block md:hidden">
@ -30,8 +28,6 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar })
</div>
{right}
</div>
</>
);
};
);
export default Header;

2
apps/app/layouts/app-layout/app-sidebar.tsx
View File

@ -1,5 +1,3 @@
import { Dispatch, SetStateAction } from "react";
// hooks
import useTheme from "hooks/use-theme";
// components

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

@ -10,13 +10,6 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
import AppLayout from "layouts/app-layout";
// contexts
import { IssueViewContextProvider } from "contexts/issue-view.context";
// icons
import {
ArrowLeftIcon,
ArrowPathIcon,
ListBulletIcon,
PlusIcon,
} from "@heroicons/react/24/outline";
// components
import CyclesListView from "components/project/cycles/list-view";
import CyclesBoardView from "components/project/cycles/board-view";
@ -33,6 +26,8 @@ import projectService from "services/project.service";
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";
@ -203,7 +198,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
<CustomMenu
label={
<>
<ArrowPathIcon className="h-3 w-3" />
<CyclesIcon className="h-3 w-3" />
{cycles?.find((c) => c.id === cycleId)?.name}
</>
}
@ -268,7 +263,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
<EmptySpace
title="You don't have any issue yet."
description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
Icon={ArrowPathIcon}
Icon={CyclesIcon}
>
<EmptySpaceItem
title="Create a new issue"

19
apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
View File

@ -25,7 +25,7 @@ import { Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssue } from "types";
import { IIssue, IssueResponse } from "types";
import type { NextPage, NextPageContext } from "next";
// fetch-keys
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
@ -154,6 +154,23 @@ const IssueDetailsPage: NextPage = () => {
.then((res) => {
mutate(SUB_ISSUES(issueDetails?.id ?? ""));
mutateIssueActivities();
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((p) => {
if (p.id === res.id)
return {
...p,
...res,
};
return p;
}),
}),
false
);
})
.catch((e) => {
console.error(e);

1
apps/app/pages/[workspaceSlug]/settings/index.tsx
View File

@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// react-dropzone

4
apps/app/styles/editor.css
View File

@ -354,6 +354,10 @@ img.ProseMirror-separator {
margin-bottom: 1em;
}
.remirror-editor-wrapper .remirror-editor {
min-height: 150px;
}
.issue-comments-section .remirror-editor-wrapper .remirror-editor {
min-height: 50px;
}