Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dev: implemented inbox using MobX #2440

Merged
merged 125 commits into from
Oct 16, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
125 commits
Select commit Hold shift + click to select a range
8d86087
chore: kanban refactoring
gurusainath Sep 4, 2023
e9b6f86
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaba…
gurusainath Sep 4, 2023
9d334cf
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaba…
gurusainath Sep 4, 2023
731309a
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaba…
gurusainath Sep 5, 2023
ef630ef
chore: Implemented new kanaban board UX and implemented draggable usi…
gurusainath Sep 5, 2023
15ef2bc
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanaba…
gurusainath Sep 6, 2023
b86c30b
chore: updated yarn lock
gurusainath Sep 6, 2023
7c5936e
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 7, 2023
b9a6a00
chore: updated the store for issues and issue filters
gurusainath Sep 8, 2023
aef71fb
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 8, 2023
8c04e77
chore: resolved build error
gurusainath Sep 8, 2023
c0e3c81
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 11, 2023
0445c61
chore: created filters and updated the issue filters, display_filter …
gurusainath Sep 12, 2023
a8c5a41
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 12, 2023
0424280
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 12, 2023
3b85444
chore: implemented filters for issues
gurusainath Sep 12, 2023
834e672
chore: UI theming updates
gurusainath Sep 12, 2023
ada1bc0
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 12, 2023
698021a
chore: handled single and multi select in filter cards
gurusainath Sep 12, 2023
0ec0ad6
chore: implemented filters and views in kanaban
gurusainath Sep 13, 2023
3ffbb6a
chore: updating filters, display_filter and display properties
gurusainath Sep 14, 2023
f579712
chore: merge conflict for lucide icons resolved
gurusainath Sep 14, 2023
c67f08f
chore: filter, layout, display filters, extra filters and display pro…
gurusainath Sep 14, 2023
60883ba
chore: clean up and resolved import warnings
gurusainath Sep 14, 2023
66022ea
chore: type check
gurusainath Sep 14, 2023
28ce96a
chore: renamed gantt key to gantt_chart
gurusainath Sep 14, 2023
3c9e62d
chore: filter render UI and Functionality implementation
gurusainath Sep 14, 2023
fce6907
chore: filter empty state handling in issue filter selection
gurusainath Sep 14, 2023
d88a088
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 15, 2023
9136258
Implementing list view
sriramveeraghanta Sep 15, 2023
7b04adf
chore: kanban drag drop logic
gurusainath Sep 15, 2023
cf34d4a
merge conflicts resolved
sriramveeraghanta Sep 15, 2023
cc9ebc5
Merge pull request #2195 from makeplane/fix/list-sorting
sriramveeraghanta Sep 15, 2023
f6d4ac9
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 15, 2023
e949031
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 15, 2023
70fe830
filtering
sriramveeraghanta Sep 15, 2023
12b6ec4
Merge pull request #2197 from makeplane/fix/list-sorting
sriramveeraghanta Sep 15, 2023
a25e5ac
chore: store setup
gurusainath Sep 15, 2023
12ce6e7
Merge branch 'develop' of gurusainath:makeplane/plane into fix/kanban…
gurusainath Sep 19, 2023
906caa6
chore: handled build issues
gurusainath Sep 19, 2023
4915926
chore: store setup
gurusainath Sep 20, 2023
50c330d
conflicts
gurusainath Sep 20, 2023
908f671
user filter
gurusainath Sep 20, 2023
a328c53
chore: store setup
sriramveeraghanta Sep 20, 2023
e96bc77
chore: fixing up store
sriramveeraghanta Sep 20, 2023
6d52801
chore: store fixes and static data setup
sriramveeraghanta Sep 20, 2023
f69d346
chore: store setup for build fixes
sriramveeraghanta Sep 21, 2023
2dcaccd
fix: merge conflicts (#2231)
aaryan610 Sep 21, 2023
9b41b5b
chore: store fixes
sriramveeraghanta Sep 21, 2023
daa3094
chore: update issue detail store to handle peek overview (#2237)
aaryan610 Sep 21, 2023
6a430ed
chore: minor fixes
sriramveeraghanta Sep 22, 2023
0ebe36b
workspace project fixes
sriramveeraghanta Sep 25, 2023
27f78dd
feat: project issues topbar (#2256)
aaryan610 Sep 25, 2023
9a8dcc3
chore: minor fixes
sriramveeraghanta Sep 25, 2023
9831418
chore: filters dropdown (#2260)
aaryan610 Sep 25, 2023
2b419c0
fix: leave project fixes
sriramveeraghanta Sep 25, 2023
310a2ca
refactor: project card component refactor
sriramveeraghanta Sep 25, 2023
43404bf
Implemented swimlanes and kanban view (#2262)
gurusainath Sep 26, 2023
1b8d58a
fix: computed filters logic
aaryan610 Sep 26, 2023
7c0c0da
Merge branch 'fix/issues-layout-mobx' of https://github.com/makeplane…
aaryan610 Sep 26, 2023
c48cd3e
chore: added sub_group_by in params and handled sub-group-by render e…
gurusainath Sep 26, 2023
c342ab3
fix: ui package setup and project update form refactor
sriramveeraghanta Sep 27, 2023
151662a
fix: ui package setup
sriramveeraghanta Sep 27, 2023
ccf6bd4
Merge branch 'fix/issues-layout-mobx' of github.com:makeplane/plane i…
sriramveeraghanta Sep 27, 2023
b2d17e6
fix: minor ui fixes
sriramveeraghanta Sep 28, 2023
3bf590b
dev: calendar view layout revamp (#2293)
aaryan610 Sep 28, 2023
5af753f
chore: removed demo m-store routes
gurusainath Sep 28, 2023
2643de8
cycles changes
sriramveeraghanta Sep 28, 2023
f60dcdc
Merge branch 'fix/issues-layout-mobx' of github.com:makeplane/plane i…
sriramveeraghanta Sep 28, 2023
b70047b
chore: issues grouped kanban and swimlanes UI and functionality (#2294)
gurusainath Sep 29, 2023
479c145
refactor: filter components, constants and helper functions (#2297)
aaryan610 Sep 29, 2023
9ad1e73
dev: gantt chart implementation using MobX (#2302)
aaryan610 Sep 29, 2023
7270424
dev: spreadsheet layout implementation using MobX (#2306)
aaryan610 Sep 29, 2023
f227058
chore: refactoring cycles list
sriramveeraghanta Sep 29, 2023
405a398
feat: adding additional ui components
sriramveeraghanta Sep 29, 2023
569a6c3
dev: applied filters list implementation using MobX (#2325)
aaryan610 Oct 2, 2023
a39aa80
Merge branch 'fix/issues-layout-mobx' of github.com:makeplane/plane i…
sriramveeraghanta Oct 2, 2023
9c2ea8a
fix: cycles views list and board
sriramveeraghanta Oct 2, 2023
b1448c9
fix: cycles list rendering fixes
sriramveeraghanta Oct 2, 2023
41fd9ce
fix: layout fixes
sriramveeraghanta Oct 2, 2023
7be038a
refactor: filter components (#2359)
aaryan610 Oct 4, 2023
b5b8095
chore: issue properties for list and kanban layouts and implemented e…
gurusainath Oct 4, 2023
844a3e4
chore: filters import conflict
gurusainath Oct 4, 2023
0f47762
dev: setup module and module filter store (#2364)
aaryan610 Oct 4, 2023
547a265
chore: issue list layout (#2367)
gurusainath Oct 4, 2023
71604bb
chore: merge develop (#2388)
aaryan610 Oct 5, 2023
13874f2
fix: build erros
aaryan610 Oct 5, 2023
e28919a
chore: cycles, modules store integration, list and kanban layouts and…
gurusainath Oct 9, 2023
0ef2200
refactor: change naming convention (#2383)
aaryan610 Oct 9, 2023
f444309
fix:auth layer revamp
sriramveeraghanta Oct 10, 2023
57e2ed2
chore: Implemented list and kanban views in project modules (#2402)
gurusainath Oct 10, 2023
4dec676
dev: implement global views using MobX (#2404)
aaryan610 Oct 11, 2023
991a685
fix: Auth fixes and Layout fixes (#2408)
sriramveeraghanta Oct 11, 2023
9f61d8b
fix: analytics page fixes
sriramveeraghanta Oct 11, 2023
00b40fb
dev: implemented project views using MobX (#2410)
aaryan610 Oct 11, 2023
35a7d10
chore: plane ui library component and code refactor (#2406)
anmolsinghbhatia Oct 11, 2023
faf0a64
fix: gitignore fixes
sriramveeraghanta Oct 11, 2023
d58d639
fix: project card fixes
sriramveeraghanta Oct 11, 2023
67b2821
chore: ui component revamp (#2415)
anmolsinghbhatia Oct 11, 2023
265e60a
chore: implement new worksapace wrapper for global views (#2412)
aaryan610 Oct 11, 2023
fcfdd74
dev: add remaining layouts to cycle (#2413)
aaryan610 Oct 11, 2023
08d9f15
fix: workspace auth wrapper changes
sriramveeraghanta Oct 11, 2023
2a4e61f
chore: project card revamp and refactor (#2416)
anmolsinghbhatia Oct 12, 2023
f2c3ad4
removing dist from ui
sriramveeraghanta Oct 12, 2023
404e6a0
refactor: analytics (#2419)
aaryan610 Oct 12, 2023
8aebf0b
refactor: folder structure, remove junk code (#2423)
aaryan610 Oct 13, 2023
6cc4c1d
dev: inbox stores init
aaryan610 Oct 13, 2023
9b0b5fc
fix: services fixes
sriramveeraghanta Oct 13, 2023
655585d
fix: merge conflicts
aaryan610 Oct 13, 2023
7b5779c
fix: store imports changes
sriramveeraghanta Oct 13, 2023
06bbc4c
fix: merge conflicts resolved from develop
sriramveeraghanta Oct 13, 2023
6be0405
Merge branch 'fix/issues-layout-mobx' of https://github.com/makeplane…
aaryan610 Oct 13, 2023
863d5ab
fix: services export fixes
sriramveeraghanta Oct 13, 2023
c7341ef
fix: services implementation fixes
sriramveeraghanta Oct 13, 2023
ea85f5d
fix: build issue fixes
sriramveeraghanta Oct 13, 2023
9d50d28
fix: react library fixes
sriramveeraghanta Oct 13, 2023
44df9e5
refactor: MobX store folder structure (#2435)
aaryan610 Oct 13, 2023
f7f9881
fix: service import errors (#2436)
aaryan610 Oct 14, 2023
93cd04f
build fixes
sriramveeraghanta Oct 14, 2023
bc37c02
editor ts config fixes
sriramveeraghanta Oct 14, 2023
8d73908
fix: merge conflicts
aaryan610 Oct 14, 2023
a19ac02
fix: merge conflicts from develop
aaryan610 Oct 16, 2023
e18378d
dev: implemented mobx logic in inbox components
aaryan610 Oct 16, 2023
844402b
fix: inbox crud operations
aaryan610 Oct 16, 2023
a65678a
fix: build errors
aaryan610 Oct 16, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: inbox crud operations
  • Loading branch information
aaryan610 committed Oct 16, 2023
commit 844402b4fde360fb0c6ff8bd69fab290fe4ac7b9
3 changes: 1 addition & 2 deletions web/components/command-palette/command-pallette.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const CommandPalette: React.FC = observer(() => {
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);

const router = useRouter();
const { workspaceSlug, projectId, issueId, inboxId, cycleId, moduleId } = router.query;
const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;

const { user } = useUser();

Expand Down Expand Up @@ -176,7 +176,6 @@ export const CommandPalette: React.FC = observer(() => {
<CreateUpdateIssueModal
isOpen={isIssueModalOpen}
handleClose={() => setIsIssueModalOpen(false)}
fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
prePopulateData={
cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
}
Expand Down
1 change: 1 addition & 0 deletions web/components/headers/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export * from "./cycle-issues";
export * from "./global-issues";
export * from "./module-issues";
export * from "./project-inbox";
export * from "./project-issues";
export * from "./project-view-issues";
export * from "./project-views";
Expand Down
21 changes: 21 additions & 0 deletions web/components/headers/project-inbox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useState } from "react";

// components
import { CreateInboxIssueModal } from "components/inbox";
// ui
import { Button } from "@plane/ui";
// icons
import { Plus } from "lucide-react";

export const ProjectInboxHeader = () => {
const [createIssueModal, setCreateIssueModal] = useState(false);

return (
<>
<CreateInboxIssueModal isOpen={createIssueModal} onClose={() => setCreateIssueModal(false)} />
<Button onClick={() => setCreateIssueModal(true)} size="sm" prependIcon={<Plus />}>
Add Issue
</Button>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2,
// types
import type { TInboxStatus } from "types";

export const InboxActionHeader = observer(() => {
export const InboxActionsHeader = observer(() => {
const [date, setDate] = useState(new Date());
const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
const [acceptIssueModal, setAcceptIssueModal] = useState(false);
Expand All @@ -51,7 +51,7 @@ export const InboxActionHeader = observer(() => {
workspaceSlug.toString(),
projectId.toString(),
inboxId.toString(),
issuesList.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
data
)
.catch(() =>
Expand All @@ -63,8 +63,8 @@ export const InboxActionHeader = observer(() => {
);
};

const issue = issuesList?.find((issue) => issue.bridge_id === inboxIssueId);
const currentIssueIndex = issuesList?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;

useEffect(() => {
if (!issue?.issue_inbox[0].snoozed_till) return;
Expand Down
2 changes: 1 addition & 1 deletion web/components/inbox/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export * from "./modals";
export * from "./action-headers";
export * from "./actions-header";
export * from "./filters-dropdown";
export * from "./filters-list";
export * from "./issue-activity";
Expand Down
2 changes: 1 addition & 1 deletion web/components/inbox/issue-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
const issueStatus = issue.issue_inbox[0].status;

return (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.bridge_id}`}>
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>
<a>
<div
id={issue.id}
Expand Down
2 changes: 1 addition & 1 deletion web/components/inbox/issues-list-sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const InboxIssuesListSidebar = observer(() => {
issuesList.length > 0 ? (
<div className="divide-y divide-custom-border-200 overflow-auto h-full">
{issuesList.map((issue) => (
<InboxIssueCard key={issue.id} active={issue.bridge_id === inboxIssueId} issue={issue} />
<InboxIssueCard key={issue.id} active={issue.issue_inbox[0].id === inboxIssueId} issue={issue} />
))}
</div>
) : (
Expand Down
34 changes: 11 additions & 23 deletions web/components/inbox/main-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,31 @@ import Router, { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { useForm } from "react-hook-form";
import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react";

// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// contexts
import { useProjectMyMembership } from "contexts/project-member.context";
// services
import { InboxService } from "services/inbox.service";
// components
import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
import { InboxIssueActivity } from "components/inbox";
// ui
import { Loader } from "@plane/ui";
// icons
import { AlertTriangle, CheckCircle2, Clock, Copy, ExternalLink, Inbox, XCircle } from "lucide-react";
// helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types
import type { IInboxIssue, IIssue, IUser } from "types";
import { IInboxIssue, IIssue } from "types";

const defaultValues: Partial<IInboxIssue> = {
name: "",
description_html: "",
estimate_point: null,
assignees_list: [],
priority: "low",
target_date: new Date().toString(),
labels_list: [],
};

const inboxService = new InboxService();

export const InboxMainContent: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
Expand Down Expand Up @@ -68,25 +62,22 @@ export const InboxMainContent: React.FC = observer(() => {
async (formData: Partial<IInboxIssue>) => {
if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;

const payload = { issue: { ...formData } };

await inboxService.patchInboxIssue(
await inboxIssueDetailsStore.updateIssue(
workspaceSlug.toString(),
projectId.toString(),
inboxId.toString(),
issueDetails.issue_inbox[0].id,
payload,
user as IUser
formData
);
},
[workspaceSlug, inboxIssueId, projectId, inboxId, user, issueDetails]
[workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore]
);

const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (!issuesList || !inboxIssueId) return;

const currentIssueIndex = issuesList.findIndex((issue) => issue.bridge_id === inboxIssueId);
const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId);

switch (e.key) {
case "ArrowUp":
Expand All @@ -95,8 +86,8 @@ export const InboxMainContent: React.FC = observer(() => {
query: {
inboxIssueId:
currentIssueIndex === 0
? issuesList[issuesList.length - 1].bridge_id
: issuesList[currentIssueIndex - 1].bridge_id,
? issuesList[issuesList.length - 1].issue_inbox[0].id
: issuesList[currentIssueIndex - 1].issue_inbox[0].id,
},
});
break;
Expand All @@ -106,8 +97,8 @@ export const InboxMainContent: React.FC = observer(() => {
query: {
inboxIssueId:
currentIssueIndex === issuesList.length - 1
? issuesList[0].bridge_id
: issuesList[currentIssueIndex + 1].bridge_id,
? issuesList[0].issue_inbox[0].id
: issuesList[currentIssueIndex + 1].issue_inbox[0].id,
},
});
break;
Expand Down Expand Up @@ -149,10 +140,7 @@ export const InboxMainContent: React.FC = observer(() => {
{issuesList?.length} issues found. Select an issue from the sidebar to view its details.
</span>
) : (
<span className="text-custom-text-200">
No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
to create a new issue
</span>
<span className="text-custom-text-200">No issues found</span>
)}
</div>
</div>
Expand Down
188 changes: 188 additions & 0 deletions web/components/inbox/modals/create-issue-modal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
import React, { useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Dialog, Transition } from "@headlessui/react";
import { Controller, useForm } from "react-hook-form";
import { RichTextEditorWithRef } from "@plane/rich-text-editor";

// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { FileService } from "services/file.service";
// components
import { IssuePrioritySelect } from "components/issues/select";
// ui
import { Button, Input, ToggleSwitch } from "@plane/ui";
// types
import { IIssue } from "types";

type Props = {
isOpen: boolean;
onClose: () => void;
};

const defaultValues: Partial<IIssue> = {
project: "",
name: "",
description_html: "<p></p>",
parent: null,
priority: "none",
};

// services
const fileService = new FileService();

export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
const { isOpen, onClose } = props;

// states
const [createMore, setCreateMore] = useState(false);

const editorRef = useRef<any>(null);

const router = useRouter();
const { workspaceSlug, projectId, inboxId } = router.query;

const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();

const {
control,
formState: { errors, isSubmitting },
handleSubmit,
reset,
} = useForm({ defaultValues });

const handleClose = () => {
onClose();
reset(defaultValues);
};

const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId || !inboxId) return;

await inboxIssueDetailsStore
.createIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), formData)
.then((res) => {
if (!createMore) {
router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}`);
handleClose();
} else reset(defaultValues);
});
};

return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}>
<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-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child>

<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-5">
<h3 className="text-xl font-semibold leading-6 text-custom-text-100">Create Inbox Issue</h3>
<div className="space-y-3">
<div className="mt-2 space-y-3">
<div>
<Controller
control={control}
name="name"
rules={{
required: "Title is required",
maxLength: {
value: 255,
message: "Title should be less than 255 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="name"
name="name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Title"
className="resize-none text-xl w-full"
/>
)}
/>
</div>
<div>
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => (
<RichTextEditorWithRef
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
ref={editorRef}
debouncedUpdatesEnabled={false}
value={!value || value === "" ? "<p></p>" : value}
customClassName="min-h-[150px]"
onChange={(description, description_html: string) => {
onChange(description_html);
}}
/>
)}
/>
</div>

<div className="flex flex-wrap items-center gap-2">
<Controller
control={control}
name="priority"
render={({ field: { value, onChange } }) => (
<IssuePrioritySelect value={value ?? "none"} onChange={onChange} />
)}
/>
</div>
</div>
</div>
</div>
<div className="-mx-5 mt-5 flex items-center justify-between gap-2 border-t border-custom-border-200 px-5 pt-5">
<div
className="flex cursor-pointer items-center gap-1"
onClick={() => setCreateMore((prevData) => !prevData)}
>
<span className="text-xs">Create more</span>
<ToggleSwitch value={createMore} onChange={() => {}} size="md" />
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" onClick={() => handleClose()}>
Discard
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
{isSubmitting ? "Adding Issue..." : "Add Issue"}
</Button>
</div>
</div>
</form>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
});
Loading