From cb80c98413e6cc26970c8a8de73130f7dbdf3acb Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 16 Oct 2023 17:10:37 +0530 Subject: [PATCH] dev: implemented inbox using MobX (#2440) * chore: kanban refactoring * chore: Implemented new kanaban board UX and implemented draggable using react beautiful dnd * chore: updated yarn lock * chore: updated the store for issues and issue filters * chore: resolved build error * chore: created filters and updated the issue filters, display_filter and display_properties in mobx and components * chore: implemented filters for issues * chore: UI theming updates * chore: handled single and multi select in filter cards * chore: implemented filters and views in kanaban * chore: updating filters, display_filter and display properties * chore: filter, layout, display filters, extra filters and display properties render validation * chore: clean up and resolved import warnings * chore: type check * chore: renamed gantt key to gantt_chart * chore: filter render UI and Functionality implementation * chore: filter empty state handling in issue filter selection * Implementing list view * chore: kanban drag drop logic * filtering * chore: store setup * chore: handled build issues * chore: store setup * user filter * chore: store setup * chore: store fixes and static data setup * chore: store setup for build fixes * fix: merge conflicts (#2231) * chore: dynamic position dropdown (#2138) * chore: dynamic position state dropdown for issue view * style: state select dropdown styling * fix: state icon attribute names * chore: state select dynamic dropdown * chore: member select dynamic dropdown * chore: label select dynamic dropdown * chore: priority select dynamic dropdown * chore: label select dropdown improvement * refactor: state dropdown location * chore: dropdown improvement and code refactor * chore: dynamic dropdown hook type added --------- Co-authored-by: Aaryan Khandelwal * fix: fields not getting selected in the create issue form (#2212) * fix: hydration error and draft issue workflow * fix: build error * fix: properties getting de-selected after create, module & cycle not getting auto-select on the form * fix: display layout, props being updated directly * chore: sub issues count in individual issue (#2221) * fix: service imports * chore: rename csv service file --------- Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> * chore: store fixes * chore: update issue detail store to handle peek overview (#2237) * chore: dynamic position dropdown (#2138) * chore: dynamic position state dropdown for issue view * style: state select dropdown styling * fix: state icon attribute names * chore: state select dynamic dropdown * chore: member select dynamic dropdown * chore: label select dynamic dropdown * chore: priority select dynamic dropdown * chore: label select dropdown improvement * refactor: state dropdown location * chore: dropdown improvement and code refactor * chore: dynamic dropdown hook type added --------- Co-authored-by: Aaryan Khandelwal * fix: fields not getting selected in the create issue form (#2212) * fix: hydration error and draft issue workflow * fix: build error * fix: properties getting de-selected after create, module & cycle not getting auto-select on the form * fix: display layout, props being updated directly * chore: sub issues count in individual issue (#2221) * Implemented nested issues in the sub issues section in issue detail page (#2233) * feat: subissues infinte level * feat: updated UI for sub issues * feat: subissues new ui and nested sub issues in issue detail * chore: removed repeated code * refactor: product updates modal layout (#2225) * fix: handle no issues in custom analytics (#2226) * fix: activity label color (#2227) * fix: profile issues layout switch (#2228) * chore: update service imports * chore: update issue detail store to handle peek overview --------- Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: guru_sainath * chore: minor fixes * workspace project fixes * feat: project issues topbar (#2256) * chore: project issues topbar * style: theming and minor UI fixes * refactor: file structure * chore: layout wise authorization added * style: filter dropdowns * chore: add fetch keys * chore: minor fixes * chore: filters dropdown (#2260) * chore: project issues topbar * style: theming and minor UI fixes * refactor: file structure * chore: layout wise authorization added * style: filter dropdowns * chore: add fetch keys * feat: search option for filters * fix: sticky headers * chore: sub_group_by section added * fix: leave project fixes * refactor: project card component refactor * Implemented swimlanes and kanban view (#2262) * chore: issue store for kanban and calendar * chore: updated ui for kanba and swimlanes * chore: yarn.lock updated * fix: computed filters logic * chore: added sub_group_by in params and handled sub-group-by render error in display filter's * fix: ui package setup and project update form refactor * fix: ui package setup * fix: minor ui fixes * dev: calendar view layout revamp (#2293) * dev: calendar view init * chore: new render logic * chore: implement calendar view * chore: calendar view * refactor: calendar payload * chore: remove active month logic from backend * chore: setup new store for calendar * refactor: issues fetching structure * chore: months dropdown * chore: modify request query params for calendar layout * refactor: remove console logs and add comments * chore: removed demo m-store routes * cycles changes * chore: issues grouped kanban and swimlanes UI and functionality (#2294) * chore: updated the all the group_by and sub_group_by UI and functionality render in kanban * chore: kanban sorting in mobx and ui updates * chore: ui changes and drag and drop functionality changes in kanban * chore: issues count render in kanban default and swimlanes * chore: Added icons to the group_by and sub_group_by in kanban and swimlanes * refactor: filter components, constants and helper functions (#2297) * refactor: filters and display filters to accept handlers as props * refactor: filters and display filters folder structure * refactor: change issue layout options constant structure * chore: display filters validations * chore: view less filters functionality * fix: display filters validation * refactor: wrap functions around useCallback * chore: start and target date filter options added * refactor: query params generator function * fix: query params generator function * dev: gantt chart implementation using MobX (#2302) * dev: fetch project gantt issues using mobx * chore: handle group by options in the kanban layout * dev: spreadsheet layout implementation using MobX (#2306) * dev: implement spreadsheet view using mobx * refactor: remove console logs and props * chore: refactoring cycles list * feat: adding additional ui components * dev: applied filters list implementation using MobX (#2325) * dev: applied filters list UI * fix: filter item height * chore: remove unnecessary classes * fix: params generator * fix: cycles views list and board * fix: cycles list rendering fixes * fix: layout fixes * refactor: filter components (#2359) * fix: calendar layout dividers * refactor: filter selection components * fix: dropdown closing after selection * refactor: filters components * chore: issue properties for list and kanban layouts and implemented estimates in project store (#2363) * chore: issue properties for state, priorit, labels and members * feat: implemented assignee, labels properties * fix: implemented estimates in project store and issue properties * chore: staer_date and due_date and validation properties in kanban * chore: filters import conflict * dev: setup module and module filter store (#2364) * dev: implement module issues using mobx store * dev: module filter store setup * chore: module store crud operations * chore: issue list layout (#2367) * chore: merge develop (#2388) * fix: build erros * chore: cycles, modules store integration, list and kanban layouts and updated kanban logic (#2399) * chore: cycle, cycle-issue, cycle-filters, cycle-kanban, cycle layout setup * chore: cycles kanban and list view store * chore: cycles, modules kanban and list, kanban view store * refactor: change naming convention (#2383) * fix:auth layer revamp * chore: Implemented list and kanban views in project modules (#2402) * chore: updated kanban logic in project cycles and modules * chore: updated list and kanban in module * dev: implement global views using MobX (#2404) * fix: selfhosted fixes (#2154) * fix: selfhosted fixes * fix: updated env example * chore: dynamic position dropdown (#2138) * chore: dynamic position state dropdown for issue view * style: state select dropdown styling * fix: state icon attribute names * chore: state select dynamic dropdown * chore: member select dynamic dropdown * chore: label select dynamic dropdown * chore: priority select dynamic dropdown * chore: label select dropdown improvement * refactor: state dropdown location * chore: dropdown improvement and code refactor * chore: dynamic dropdown hook type added --------- Co-authored-by: Aaryan Khandelwal * fix: fields not getting selected in the create issue form (#2212) * fix: hydration error and draft issue workflow * fix: build error * fix: properties getting de-selected after create, module & cycle not getting auto-select on the form * fix: display layout, props being updated directly * chore: sub issues count in individual issue (#2221) * Implemented nested issues in the sub issues section in issue detail page (#2233) * feat: subissues infinte level * feat: updated UI for sub issues * feat: subissues new ui and nested sub issues in issue detail * chore: removed repeated code * refactor: product updates modal layout (#2225) * fix: handle no issues in custom analytics (#2226) * fix: activity label color (#2227) * fix: profile issues layout switch (#2228) * fix: issues resolved in sub issues (#2238) * fix: aws region name (#2234) * chore: updated docker naming conventions (#2239) * naming convention changes * dev: update docker-compose-hub in consistent with docker-compose * dev: updated docker container name --------- Co-authored-by: sriram veeraghanta * chore: added state and priority order in workspace user profile (#2241) * fix: changed priority from None to none (#2229) * fix: cycle and module stats when issues are archived (#2185) * fix: cycle and module stats when issues are archived * fix: added draft filter --------- Co-authored-by: NarayanBavisetti * feat: quick add (#2240) * feat: quick add * style: made text color muted * chore: added epoch in draft (#2244) * chore: added epoch in draft * chore: removed extra spaces * fix: resolved pending issue graph in analytics, user wishes in dashboard, and typo in projects list (#2247) * style: settings page improvement (#2211) * style: settings page improvement * style: toggle switch styling --------- Co-authored-by: Anmol Singh Bhatia * chore: changed priority props in workspace and project (#2253) * fix: bug fix related to fetching dropdown options for the profile issue (#2246) * fix: sub issue state and member select build error (#2254) * rename view to layout (#2255) Co-authored-by: Your Name * fix: bug fixes and ui improvement (#2250) * dev: remove auto filter endpoint * feat: quick-add placement in spreadsheet and gantt (#2259) * feat: sticking quick-add at the bottom of the screen fix: opening create issue modal instead of quick-add in draft-issues, my-issue and profile page * fix: build error due to dynamic import * fix: draft issue delete not working (#2249) * fix: draft issue not deleting, project can't be changed in draft issue modal * fix: removed mutation for view where draft issues are not shown * fix: inline create issue for draft issue * fix: clearing data from localstorage on discard click * feat: Add peek overview in sub issues and updated UI for empty states. (#2263) * chore: add tooltip to show full time on activity logs (#2235) * fix: issue automation iterable error (#2208) * fix: n+1 queries for cycle list and project member endpoints (#2257) * [fix] nginx continuously rewriting and reloading on index page of spaces app (#2236) * chore: shifted index page to /home route * chore: added rewrite logic, to rewrite index to /home * chore: routed home to login route as login page * chore: updated nginx config to route to login * chore: updated path for home * dev: migration for 0.13 (#2266) * dev: updated migrations * dev: migration for 0.13 * dev: re-split migrations into two different files (#2268) * dev: split issue activity migration separate files * dev: resplit migrations into two different files * dev: changed the batch size * chore: udpate date filters to support dynamic options * fix: bugs in quick-add and draft issues (#2269) * fix: 'Last Drafted Issue' making sidebar look weird on collapsed * feat: scroll to the bottom when issue is created * fix: 'Add Issue' button overlapping issue card in spreadsheet view * fix: wrong placement of quick-add in calender layout * fix: spacing for issue card in spreadsheet view * chore: add instructions to contributing guide (#2270) * chore: add instructions to contributing guide * dev: update contributing.md to use the new configuration --------- Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> * fix: user dashboard greeting timezone (#2267) * chore: user greeting timezone * fix: group by labels not working on workspace level * feat: workspace global view, style: spreadsheet view revamp (#2273) * chore: workspace view types, services and hooks added * style: spreadsheet view revamp and code refactor * feat: workspace view * fix: build fix * chore: sidebar workspace issues redirection updated * style: gantt layout quick-add padding (#2272) * fix: 'Last Drafted Issue' making sidebar look weird on collapsed * feat: scroll to the bottom when issue is created * fix: 'Add Issue' button overlapping issue card in spreadsheet view * fix: wrong placement of quick-add in calender layout * fix: spacing for issue card in spreadsheet view * style: gantt layout quick-add padding style: removed 'State group' from draft issue * style: decrese shadow, quick-add position on calender layout, and 'add issue' sticky * style: button color * fix: block click happening while moving (#2275) * dev: refactor date filters to a single function * chore: handle calendar date range in frontend (#2277) * chore: gantt chart empty state (#2279) * chore: gantt empty state * chore: Add heading to the gantt sidebar * style: calender quick-add same width as single date (#2280) * style: calender quick-add same width as single date * style: margin bottom in quick-add in spreadsheet view * fix: quick add opening in list-layout * style: reduced margin left * chore: updated created at in draft issue (#2278) * chore: make target dates inclusive when filtering (#2276) * chore: sort order and issue props for global views (#2283) * chore: removed project filter (#2284) * fix: inbox issue deletes (#2290) * chore: views (#2288) * chore: global views order by * chore: update permissions for global views --------- Co-authored-by: NarayanBavisetti * chore: fetch issues from previous and next month in the calendar view (#2282) * fix: issue activity estimate value bug fix (#2281) * fix: issue activity estimate value bug fix * fix: activity typo fix * fix: ui and bugs (#2289) * fix: 24 character limit on first & last name in onboarding page * fix: no option: 'Add Issue' in archive issue page * fix: in archive issue directly sending to issue detail page * fix: issue type showing in archive issue * fix: custom menu overflowing * fix: changing subscriber in filters has no effect * style: border in quick-add * fix: on onboarding member role overflowing * fix: inconsistent icons in issue detail * style: spacing, borders and shadows in quick-add * fix: custom menu truncate * fix: notifications for created by me and assigned to me (#2292) * chore: workspace view display filters and properties , code refactor (#2295) * chore: spreadsheet view context * chore: spreadsheet context provider * chore: spreadsheet view context * chore: display filters and properties added in workspace view and code refactor * fix: build error fix * chore: set sub-issue display option to false for global views --------- Co-authored-by: gurusainath * chore: label create error (#2299) * chore: global issues ui improvement and bug fixes (#2300) * chore: workspace view mutation fix ,bug fixes and code refactor (#2301) * chore: workspace view mutation fix ,bug fixes and code refactor * chore: update workspace view toast alert added * chore: workspace view order by removed (#2303) * dev: updated migrations for 0.13-dev (#2305) * chore: epoch migration batch size changed * chore: reoredered the migration files * dev: updated migrations for 0.13-dev * chore: added epoch field * dev: merged the migration files * fix: workspace view filters count fix (#2307) * fix: unsplash api fix (#2310) * fix: workspace view redirection fix, style: spreadsheet view shadow scroll fix (#2314) * fix: workspace view redirection fix * style: spreadsheet view scroll shadow fix * fix: update build workflow for the deploy app (#2315) * fix: workspace view add issue mutation fix (#2317) * dev: create action to sync PR changes to the repo (#2333) * fix: ui package readme added (#2334) * fix: variable name for token (#2336) * dev: update add permissions to the action (#2337) * dev: rename token variables (#2338) * fix: updated readme fixes (#2339) * dev: update sync workflow to run only when the source repo is configured (#2346) * dev: update sync workflow to run only when the source repo is configured * fix: naming convention changes --------- Co-authored-by: sriramveeraghanta * fix: issue relation mutation and draft issue (#2340) * fix: issue relation mutation and draft issue * fix: 'New Issue' in gantt view fix: emoji select going under * fix: profile page typo * fix: sync workflow fixes (#2365) * fix: sync job pr description escaped values fix (#2366) * Update index.tsx (#2343) Fixes #2342 * dev: update apiserver configuration files (#2348) * dev: update apiserver configuration files * dev: add email and minio redirection urls * fix: themening validation in store init. (#2350) * chore: member can change role (#2371) * chore: removed the issue draft log from my profile (#2368) * adding sync info in pr title (#2373) * chore: layout access validation and switch in plane deploy issues route (#2351) * chore: handled route validation and layout access validation in plane deploy issues * chore: impoved validation condition * show current version in the help section dropdown (#2353) * fix: table menu positioning (#2354) * fix: handle cross project issues in the sub-issues. (#2357) * fix: login process validation based on api config (#2361) * dev: configuration endpoint for frontend client (#2355) * dev: configuration endpoint for frontend clients * dev: configuration enable magic and email/password signup * dev: update unsplash keys * dev: add unsplash API and add env for magic login * fix: 404 when redirecting user clicks on Sign In button (#2349) * fix: 404 when redirecting user to login page * fix: next_path redirection not working * fix: authentication workflow update in plane deploy --------- Co-authored-by: gurusainath * fix: project setting member role validation (#2369) * fix: project setting member role validation * chore: opacity removed from member setting page * chore: member setting page validation * chore: project covers endpoint (#2370) * chore: project covers endpoint * dev: remove print logs * dev: formatting --------- Co-authored-by: sriramveeraghanta * feat: default project cover images tab on the change cover popover (#2375) * feat: default project cover images tab * chore: remove unnecessary env vars from turbo.json * chore: remove unnecessary OAuth envs (#2378) * chore: remove unnecessary oauth envs * merge conflicts resolved * fix: adding new service --------- Co-authored-by: sriramveeraghanta * fix: added user store variables in mobx store observable (#2380) * fix: state group icons (#2381) * fix: removed default theme setting in the index page (#2382) * fix: removed default theme setting in the index page * fix: empty space * dev: global views and workspace filters store implemented * sync CE Master to EE Develop * refactor: create update view modal * chore: static issue global views * refactor: remove old code * refactor: filters select dropdown * chore: fix calendar layout * chore: mobx store for new applied filters * chore: dded search functionality --------- Co-authored-by: Vamsi Kurama Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> Co-authored-by: sriram veeraghanta Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: guru_sainath Co-authored-by: NarayanBavisetti Co-authored-by: Anmol Singh Bhatia Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com> Co-authored-by: Your Name Co-authored-by: pablohashescobar Co-authored-by: Henit Chobisa Co-authored-by: Thomas Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com> Co-authored-by: Manish Gupta * fix: Auth fixes and Layout fixes (#2408) * fix: auth fixes and layout improvements * fix: layout fixes * fix: analytics page fixes * dev: implemented project views using MobX (#2410) * dev: implemented project views list using mobx * style: views list UI * dev: implemented view issues page using mobx * refactor: project view issues fetching * chore: plane ui library component and code refactor (#2406) * chore: swap input component with plane/ui package * chore: swap textarea component with plane/ui package * chore: swap button component with plane/ui package * chore: button component revamp * fix: button type fix * chore: secondary button revamp * chore: button props updated * chore: swap loader component with plane/ui package * fix: build error fix * chore: button component refactor * chore: code refactor * chore: swap toggle switch component with plane/ui package * chore: swap spinner component with plane/ui package * chore: swap progress bar componenet with plan/ui package * chore: code refactor * fix: gitignore fixes * fix: project card fixes * chore: ui component revamp (#2415) * chore: swap tooltip component with plane ui package * chore: swap linear progress component with plane ui package * fix: login button fix * chore: implement new worksapace wrapper for global views (#2412) * chore: implement new worksapace wrapper for global views pages * fix: merge conflicts * fix: merge conflicts * dev: add remaining layouts to cycle (#2413) * fix: workspace auth wrapper changes * chore: project card revamp and refactor (#2416) * removing dist from ui * refactor: analytics (#2419) * refactor: helper functions * chore: updated all the page headers * refactor: custom analytics * refactor: project analytics modal * refactor: folder structure, remove junk code (#2423) * refactor: folder structure * chore: ad order by target date option * refactor: remove old layout components * refactor: inbox folder structure * dev: inbox stores init * fix: services fixes * fix: store imports changes * fix: services export fixes * fix: services implementation fixes * fix: build issue fixes * fix: react library fixes * refactor: MobX store folder structure (#2435) * refactor: store folder structure * chore: update import statements * fix: service import errors (#2436) * fix: service imports * chore: update service imports in store * chore: fix remianing service imports * build fixes * editor ts config fixes * dev: implemented mobx logic in inbox components * fix: inbox crud operations * fix: build errors --------- Co-authored-by: gurusainath Co-authored-by: sriram veeraghanta Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: Vamsi Kurama Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com> Co-authored-by: NarayanBavisetti Co-authored-by: Anmol Singh Bhatia Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com> Co-authored-by: Your Name Co-authored-by: pablohashescobar Co-authored-by: Henit Chobisa Co-authored-by: Thomas Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com> Co-authored-by: Manish Gupta --- web/components/command-palette/command-k.tsx | 29 +- .../command-palette/command-pallette.tsx | 3 +- web/components/headers/index.ts | 1 + web/components/headers/project-inbox.tsx | 21 ++ web/components/headers/project-issues.tsx | 22 +- ...{action-headers.tsx => actions-header.tsx} | 175 +++++------ web/components/inbox/filters-dropdown.tsx | 47 ++- web/components/inbox/filters-list.tsx | 69 +++-- web/components/inbox/index.ts | 2 +- web/components/inbox/issue-card.tsx | 25 +- web/components/inbox/issues-list-sidebar.tsx | 26 +- web/components/inbox/main-content.tsx | 142 +++------ .../inbox/modals/accept-issue-modal.tsx | 17 +- .../inbox/modals/create-issue-modal.tsx | 188 ++++++++++++ .../inbox/modals/decline-issue-modal.tsx | 17 +- .../inbox/modals/delete-issue-modal.tsx | 55 ++-- web/components/inbox/modals/index.ts | 1 + web/components/issues/form.tsx | 8 - web/components/issues/modal.tsx | 114 +++---- .../ui/dropdowns/custom-search-select.tsx | 18 +- web/components/ui/dropdowns/custom-select.tsx | 18 +- web/components/views/select-filters.tsx | 12 - web/components/views/signin.tsx | 182 ++++++++++++ web/constants/fetch-keys.ts | 13 - web/contexts/inbox-view-context.tsx | 177 ----------- web/hooks/use-inbox-view.tsx | 54 ---- web/lib/mobx/store-init.tsx | 6 +- .../projects/[projectId]/inbox/[inboxId].tsx | 81 +++-- .../projects/[projectId]/issues/index.tsx | 17 +- web/services/inbox.service.ts | 16 +- web/store/inbox/inbox.store.ts | 154 ++++++++++ web/store/inbox/inbox_filters.store.ts | 146 +++++++++ web/store/inbox/inbox_issue_detail.store.ts | 280 ++++++++++++++++++ web/store/inbox/inbox_issues.store.ts | 84 ++++++ web/store/inbox/index.ts | 4 + web/store/root.ts | 20 ++ web/types/inbox.d.ts | 36 +-- 37 files changed, 1468 insertions(+), 812 deletions(-) create mode 100644 web/components/headers/project-inbox.tsx rename web/components/inbox/{action-headers.tsx => actions-header.tsx} (62%) create mode 100644 web/components/inbox/modals/create-issue-modal.tsx create mode 100644 web/components/views/signin.tsx delete mode 100644 web/contexts/inbox-view-context.tsx delete mode 100644 web/hooks/use-inbox-view.tsx create mode 100644 web/store/inbox/inbox.store.ts create mode 100644 web/store/inbox/inbox_filters.store.ts create mode 100644 web/store/inbox/inbox_issue_detail.store.ts create mode 100644 web/store/inbox/inbox_issues.store.ts create mode 100644 web/store/inbox/index.ts diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx index 382acd19e..59a455e98 100644 --- a/web/components/command-palette/command-k.tsx +++ b/web/components/command-palette/command-k.tsx @@ -11,9 +11,7 @@ import { Dialog, Transition } from "@headlessui/react"; // services import { WorkspaceService } from "services/workspace.service"; import { IssueService } from "services/issue"; -import { InboxService } from "services/inbox.service"; // hooks -import useProjectDetails from "hooks/use-project-details"; import useDebounce from "hooks/use-debounce"; import useUser from "hooks/use-user"; import useToast from "hooks/use-toast"; @@ -30,13 +28,13 @@ import { Icon } from "components/ui"; import { Loader, ToggleSwitch, Tooltip } from "@plane/ui"; // icons import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons"; -import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import { IIssue, IWorkspaceSearchResults } from "types"; // fetch-keys -import { INBOX_LIST, ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; +import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; type Props = { deleteIssue: () => void; @@ -47,7 +45,6 @@ type Props = { // services const workspaceService = new WorkspaceService(); const issueService = new IssueService(); -const inboxService = new InboxService(); export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => { const [placeholder, setPlaceholder] = useState("Type a command or search..."); @@ -80,7 +77,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal const { setToastAlert } = useToast(); const { user } = useUser(); - const { projectDetails } = useProjectDetails(); const { data: issueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, @@ -89,11 +85,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal : null ); - const { data: inboxList } = useSWR( - workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null, - workspaceSlug && projectId ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string) : null - ); - const updateIssue = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; @@ -569,22 +560,6 @@ export const CommandK: React.FC = ({ deleteIssue, isPaletteOpen, setIsPal D - {projectDetails && projectDetails.inbox_view && ( - - { - setIsPaletteOpen(false); - redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`); - }} - className="focus:outline-none" - > -
- - Open inbox -
- - - )} )} diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx index 3b90f2699..4b2168137 100644 --- a/web/components/command-palette/command-pallette.tsx +++ b/web/components/command-palette/command-pallette.tsx @@ -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(); @@ -176,7 +176,6 @@ export const CommandPalette: React.FC = observer(() => { setIsIssueModalOpen(false)} - fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]} prePopulateData={ cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined } diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts index 89eb35766..2bd01abe2 100644 --- a/web/components/headers/index.ts +++ b/web/components/headers/index.ts @@ -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"; diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx new file mode 100644 index 000000000..a45eca0fd --- /dev/null +++ b/web/components/headers/project-inbox.tsx @@ -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 ( + <> + setCreateIssueModal(false)} /> + + + ); +}; diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index ea6004fe3..265be968e 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -23,7 +23,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore(); + const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore(); const activeLayout = issueFilterStore.userDisplayFilters.layout; @@ -91,6 +91,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => { ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) : undefined; + const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined; + return ( <> { } /> - {/* TODO: add inbox redirection here */} - {projectDetails?.inbox_view && ( - // - + {projectId && inboxStore.isInboxEnabled(projectId.toString()) && ( + - diff --git a/web/components/inbox/action-headers.tsx b/web/components/inbox/actions-header.tsx similarity index 62% rename from web/components/inbox/action-headers.tsx rename to web/components/inbox/actions-header.tsx index d51ec0302..a5e05edac 100644 --- a/web/components/inbox/action-headers.tsx +++ b/web/components/inbox/actions-header.tsx @@ -1,44 +1,31 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/router"; -import { mutate } from "swr"; +import { observer } from "mobx-react-lite"; import DatePicker from "react-datepicker"; import { Popover } from "@headlessui/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"; // hooks -import useInboxView from "hooks/use-inbox-view"; -import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; // components import { AcceptIssueModal, DeclineIssueModal, - DeleteIssueModal, + DeleteInboxIssueModal, FiltersDropdown, SelectDuplicateInboxIssueModal, } from "components/inbox"; // ui import { Button } from "@plane/ui"; // icons -import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons"; -import { - ChevronDownIcon, - ChevronUpIcon, - CheckCircleIcon, - ClockIcon, - XCircleIcon, - TrashIcon, -} from "@heroicons/react/24/outline"; +import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react"; // types -import type { IInboxIssueDetail, TInboxStatus } from "types"; -// fetch-keys -import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys"; +import type { TInboxStatus } from "types"; -const inboxService = new InboxService(); - -export const InboxActionHeader = () => { +export const InboxActionsHeader = observer(() => { const [date, setDate] = useState(new Date()); const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false); const [acceptIssueModal, setAcceptIssueModal] = useState(false); @@ -48,42 +35,24 @@ export const InboxActionHeader = () => { const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; - const { user } = useUserAuth(); + const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore(); + + const user = userStore?.currentUser; + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null; + const { memberRole } = useProjectMyMembership(); - const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView(); const { setToastAlert } = useToast(); const markInboxStatus = async (data: TInboxStatus) => { - if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return; + if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return; - mutate( - INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string), - (prevData) => { - if (!prevData) return prevData; - - return { - ...prevData, - issue_inbox: [{ ...prevData.issue_inbox[0], ...data }], - }; - }, - false - ); - mutateInboxIssues( - (prevData: any) => - (prevData ?? []).map((i: any) => - i.bridge_id === inboxIssueId ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] } : i - ), - false - ); - - await inboxService - .markInboxStatus( + await inboxIssueDetailsStore + .updateIssueStatus( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), - inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!, - data, - user + issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!, + data ) .catch(() => setToastAlert({ @@ -91,15 +60,11 @@ export const InboxActionHeader = () => { title: "Error!", message: "Something went wrong while updating inbox status. Please try again.", }) - ) - .finally(() => { - mutate(INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string)); - mutateInboxIssues(); - }); + ); }; - const issue = inboxIssues?.find((issue: any) => issue.bridge_id === inboxIssueId); - const currentIssueIndex = inboxIssues?.findIndex((issue: any) => 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; @@ -117,48 +82,46 @@ export const InboxActionHeader = () => { return ( <> - setSelectDuplicateIssue(false)} - value={ - inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to - } - onSubmit={(dupIssueId: string) => { - markInboxStatus({ - status: 2, - duplicate_to: dupIssueId, - }).finally(() => setSelectDuplicateIssue(false)); - }} - /> - setAcceptIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - onSubmit={async () => { - await markInboxStatus({ - status: 1, - }).finally(() => setAcceptIssueModal(false)); - }} - /> - setDeclineIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - onSubmit={async () => { - await markInboxStatus({ - status: -1, - }).finally(() => setDeclineIssueModal(false)); - }} - /> - setDeleteIssueModal(false)} - data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} - /> + {issue && ( + <> + setSelectDuplicateIssue(false)} + value={issue?.issue_inbox[0].duplicate_to} + onSubmit={(dupIssueId) => { + markInboxStatus({ + status: 2, + duplicate_to: dupIssueId, + }).finally(() => setSelectDuplicateIssue(false)); + }} + /> + setAcceptIssueModal(false)} + onSubmit={async () => { + await markInboxStatus({ + status: 1, + }).finally(() => setAcceptIssueModal(false)); + }} + /> + setDeclineIssueModal(false)} + onSubmit={async () => { + await markInboxStatus({ + status: -1, + }).finally(() => setDeclineIssueModal(false)); + }} + /> + setDeleteIssueModal(false)} /> + + )}
- +

Inbox

@@ -174,7 +137,7 @@ export const InboxActionHeader = () => { document.dispatchEvent(e); }} > - +
- {currentIssueIndex + 1}/{inboxIssues?.length ?? 0} + {currentIssueIndex + 1}/{issuesList?.length ?? 0}
@@ -195,11 +158,7 @@ export const InboxActionHeader = () => {
- @@ -239,7 +198,7 @@ export const InboxActionHeader = () => {
); -}; +}); diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx index 9220db899..cd7cf8093 100644 --- a/web/components/inbox/filters-dropdown.tsx +++ b/web/components/inbox/filters-dropdown.tsx @@ -1,34 +1,53 @@ -// hooks -import useInboxView from "hooks/use-inbox-view"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // ui import { MultiLevelDropdown } from "components/ui"; // icons import { PriorityIcon } from "components/icons"; +// types +import { IInboxFilterOptions } from "types"; // constants import { PRIORITIES } from "constants/project"; import { INBOX_STATUS } from "constants/inbox"; -export const FiltersDropdown: React.FC = () => { - const { filters, setFilters, filtersLength } = useInboxView(); +export const FiltersDropdown: React.FC = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, inboxId } = router.query; + + const { inboxFilters: inboxFiltersStore } = useMobxStore(); + + const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined; + + let filtersLength = 0; + Object.keys(filters ?? {}).forEach((key) => { + const filterKey = key as keyof IInboxFilterOptions; + + if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length; + }); return (
{ - const key = option.key as keyof typeof filters; + if (!workspaceSlug || !projectId || !inboxId) return; - const valueExists = (filters[key] as any[])?.includes(option.value); + const key = option.key as keyof IInboxFilterOptions; + const currentValue: any[] = filters?.[key] ?? []; - if (valueExists) { - setFilters({ - [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value), + const valueExists = currentValue.includes(option.value); + + if (valueExists) + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), { + [option.key]: currentValue.filter((val) => val !== option.value), }); - } else { - setFilters({ - [option.key]: [...((filters[key] ?? []) as any[]), option.value], + else + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), { + [option.key]: [...currentValue, option.value], }); - } }} direction="right" height="rg" @@ -76,4 +95,4 @@ export const FiltersDropdown: React.FC = () => { )}
); -}; +}); diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx index 7d07fb8d4..75657d47b 100644 --- a/web/components/inbox/filters-list.tsx +++ b/web/components/inbox/filters-list.tsx @@ -1,34 +1,69 @@ -// hooks -import useInboxView from "hooks/use-inbox-view"; +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; + +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; import { PriorityIcon } from "components/icons"; // helpers import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; // types -import { TIssuePriorities } from "types"; +import { IInboxFilterOptions, TIssuePriorities } from "types"; // constants import { INBOX_STATUS } from "constants/inbox"; -export const InboxFiltersList = () => { - const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView(); +export const InboxFiltersList = observer(() => { + const router = useRouter(); + const { workspaceSlug, projectId, inboxId } = router.query; - if (filtersLength <= 0) return <>; + const { inboxFilters: inboxFiltersStore } = useMobxStore(); + + const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined; + + const handleUpdateFilter = (filter: Partial) => { + if (!workspaceSlug || !projectId || !inboxId) return; + + inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter); + }; + + const handleClearAllFilters = () => { + if (!workspaceSlug || !projectId || !inboxId) return; + + const newFilters: IInboxFilterOptions = {}; + Object.keys(filters ?? {}).forEach((key) => { + newFilters[key as keyof IInboxFilterOptions] = null; + }); + + inboxFiltersStore.updateInboxFilters( + workspaceSlug.toString(), + projectId.toString(), + inboxId.toString(), + newFilters + ); + }; + + let filtersLength = 0; + Object.keys(filters ?? {}).forEach((key) => { + const filterKey = key as keyof IInboxFilterOptions; + + if (filters?.[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length; + }); + + if (!filters || filtersLength <= 0) return null; return (
{Object.keys(filters).map((key) => { - const filterKey = key as keyof typeof filters; + const filterKey = key as keyof IInboxFilterOptions; - if (filters[filterKey] !== null) + if (filters[filterKey]) return (
- - {replaceUnderscoreIfSnakeCase(key)}: - + {replaceUnderscoreIfSnakeCase(key)}: {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? ( None ) : ( @@ -57,7 +92,7 @@ export const InboxFiltersList = () => { type="button" className="cursor-pointer" onClick={() => - setFilters({ + handleUpdateFilter({ priority: filters.priority?.filter((p) => p !== priority), }) } @@ -69,7 +104,7 @@ export const InboxFiltersList = () => {
); -}; +}); diff --git a/web/components/inbox/index.ts b/web/components/inbox/index.ts index a96cf4446..ef1a9e92d 100644 --- a/web/components/inbox/index.ts +++ b/web/components/inbox/index.ts @@ -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"; diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx index 468eba908..a223e7c09 100644 --- a/web/components/inbox/issue-card.tsx +++ b/web/components/inbox/issue-card.tsx @@ -5,18 +5,11 @@ import Link from "next/link"; import { Tooltip } from "@plane/ui"; // icons import { PriorityIcon } from "components/icons"; -import { - CalendarDaysIcon, - CheckCircleIcon, - ClockIcon, - DocumentDuplicateIcon, - ExclamationTriangleIcon, - XCircleIcon, -} from "@heroicons/react/24/outline"; +import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // types -import type { IInboxIssue } from "types"; +import { IInboxIssue } from "types"; // constants import { INBOX_STATUS } from "constants/inbox"; @@ -34,7 +27,7 @@ export const InboxIssueCard: React.FC = (props) => { const issueStatus = issue.issue_inbox[0].status; return ( - +
= (props) => { tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`} >
- + {renderShortDateWithYearFormat(issue.created_at ?? "")}
@@ -85,29 +78,29 @@ export const InboxIssueCard: React.FC = (props) => { > {issueStatus === -2 ? ( <> - + Pending ) : issueStatus === -1 ? ( <> - + Declined ) : issueStatus === 0 ? ( <> - + {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"} ) : issueStatus === 1 ? ( <> - + Accepted ) : ( <> - + Duplicate )} diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx index cf89ccb39..305f4980e 100644 --- a/web/components/inbox/issues-list-sidebar.tsx +++ b/web/components/inbox/issues-list-sidebar.tsx @@ -1,31 +1,35 @@ import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; -// hooks -import useInboxView from "hooks/use-inbox-view"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // components import { InboxIssueCard, InboxFiltersList } from "components/inbox"; // ui import { Loader } from "@plane/ui"; -export const IssuesListSidebar = () => { +export const InboxIssuesListSidebar = observer(() => { const router = useRouter(); - const { inboxIssueId } = router.query; + const { inboxId, inboxIssueId } = router.query; - const { issues: inboxIssues, filtersLength } = useInboxView(); + const { inboxIssues: inboxIssuesStore } = useMobxStore(); + + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined; return (
- {inboxIssues ? ( - inboxIssues.length > 0 ? ( + {issuesList ? ( + issuesList.length > 0 ? (
- {inboxIssues.map((issue: any) => ( - + {issuesList.map((issue) => ( + ))}
) : (
- {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} + {/* TODO: add filtersLength logic here */} + {/* {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."} */}
) ) : ( @@ -38,4 +42,4 @@ export const IssuesListSidebar = () => { )}
); -}; +}); diff --git a/web/components/inbox/main-content.tsx b/web/components/inbox/main-content.tsx index 844717964..6cc17abe6 100644 --- a/web/components/inbox/main-content.tsx +++ b/web/components/inbox/main-content.tsx @@ -1,71 +1,52 @@ import { useCallback, useEffect } from "react"; - import Router, { useRouter } from "next/router"; - -import useSWR, { mutate } from "swr"; - -// react hook form +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"; -// hooks -import useInboxView from "hooks/use-inbox-view"; -import useUserAuth from "hooks/use-user-auth"; // components import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues"; import { InboxIssueActivity } from "components/inbox"; // ui import { Loader } from "@plane/ui"; -// icons -import { - ArrowTopRightOnSquareIcon, - CheckCircleIcon, - ClockIcon, - DocumentDuplicateIcon, - ExclamationTriangleIcon, - InboxIcon, - XCircleIcon, -} from "@heroicons/react/24/outline"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // types -import type { IInboxIssue, IIssue, IUser } from "types"; -// fetch-keys -import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; +import { IInboxIssue, IIssue } from "types"; const defaultValues: Partial = { 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 = () => { +export const InboxMainContent: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; - const { user } = useUserAuth(); + const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore(); + + const user = userStore.currentUser; + const { memberRole } = useProjectMyMembership(); - const { params, issues: inboxIssues } = useInboxView(); const { reset, control, watch } = useForm({ defaultValues, }); - const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( - workspaceSlug && projectId && inboxId && inboxIssueId - ? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString()) - : null, + useSWR( + workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null, workspaceSlug && projectId && inboxId && inboxIssueId ? () => - inboxService.getInboxIssueById( + inboxIssueDetailsStore.fetchIssueDetails( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), @@ -74,59 +55,29 @@ export const InboxMainContent: React.FC = () => { : null ); + const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined; + const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined; + const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return; - mutateIssueDetails((prevData: any) => { - if (!prevData) return prevData; - - return { - ...prevData, - ...formData, - }; - }, false); - mutate( - INBOX_ISSUES(inboxId.toString(), params), - (prevData) => - (prevData ?? []).map((i) => { - if (i.bridge_id === inboxIssueId) { - return { - ...i, - ...formData, - }; - } - - return i; - }), - false + await inboxIssueDetailsStore.updateIssue( + workspaceSlug.toString(), + projectId.toString(), + inboxId.toString(), + issueDetails.issue_inbox[0].id, + formData ); - - const payload = { issue: { ...formData } }; - - await inboxService - .patchInboxIssue( - workspaceSlug.toString(), - projectId.toString(), - inboxId.toString(), - issueDetails.issue_inbox[0].id, - payload, - user as IUser - ) - .then(() => { - mutateIssueDetails(); - mutate(INBOX_ISSUES(inboxId.toString(), params)); - mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id)); - }); }, - [workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params] + [workspaceSlug, inboxIssueId, projectId, inboxId, issueDetails, inboxIssueDetailsStore] ); const onKeyDown = useCallback( (e: KeyboardEvent) => { - if (!inboxIssues || !inboxIssueId) return; + if (!issuesList || !inboxIssueId) return; - const currentIssueIndex = inboxIssues.findIndex((issue: any) => issue.bridge_id === inboxIssueId); + const currentIssueIndex = issuesList.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId); switch (e.key) { case "ArrowUp": @@ -135,8 +86,8 @@ export const InboxMainContent: React.FC = () => { query: { inboxIssueId: currentIssueIndex === 0 - ? inboxIssues[inboxIssues.length - 1].bridge_id - : inboxIssues[currentIssueIndex - 1].bridge_id, + ? issuesList[issuesList.length - 1].issue_inbox[0].id + : issuesList[currentIssueIndex - 1].issue_inbox[0].id, }, }); break; @@ -145,9 +96,9 @@ export const InboxMainContent: React.FC = () => { pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, query: { inboxIssueId: - currentIssueIndex === inboxIssues.length - 1 - ? inboxIssues[0].bridge_id - : inboxIssues[currentIssueIndex + 1].bridge_id, + currentIssueIndex === issuesList.length - 1 + ? issuesList[0].issue_inbox[0].id + : issuesList[currentIssueIndex + 1].issue_inbox[0].id, }, }); break; @@ -155,7 +106,7 @@ export const InboxMainContent: React.FC = () => { break; } }, - [workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues] + [workspaceSlug, projectId, inboxIssueId, inboxId, issuesList] ); useEffect(() => { @@ -183,16 +134,13 @@ export const InboxMainContent: React.FC = () => {
- - {inboxIssues && inboxIssues.length > 0 ? ( + + {issuesList && issuesList.length > 0 ? ( - {inboxIssues?.length} issues found. Select an issue from the sidebar to view its details. + {issuesList?.length} issues found. Select an issue from the sidebar to view its details. ) : ( - - No issues found. Use 
C
shortcut - to create a new issue - + No issues found )}
@@ -223,17 +171,17 @@ export const InboxMainContent: React.FC = () => { > {issueStatus === -2 ? ( <> - +

This issue is still pending.

) : issueStatus === -1 ? ( <> - +

This issue has been declined.

) : issueStatus === 0 ? ( <> - + {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (

This issue was snoozed till{" "} @@ -248,12 +196,12 @@ export const InboxMainContent: React.FC = () => { ) : issueStatus === 1 ? ( <> - +

This issue has been accepted.

) : issueStatus === 2 ? ( <> - +

This issue has been marked as a duplicate of { rel="noreferrer" className="underline flex items-center gap-2" > - this issue + this issue .

@@ -286,7 +234,7 @@ export const InboxMainContent: React.FC = () => {
-
+
{ )} ); -}; +}); diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx index bca83a3ec..569061bdf 100644 --- a/web/components/inbox/modals/accept-issue-modal.tsx +++ b/web/components/inbox/modals/accept-issue-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; - -// headless ui import { Dialog, Transition } from "@headlessui/react"; + // icons import { CheckCircleIcon } from "@heroicons/react/24/outline"; // ui @@ -10,18 +9,18 @@ import { Button } from "@plane/ui"; import type { IInboxIssue } from "types"; type Props = { + data: IInboxIssue; isOpen: boolean; - handleClose: () => void; - data: IInboxIssue | undefined; + onClose: () => void; onSubmit: () => Promise; }; -export const AcceptIssueModal: React.FC = ({ isOpen, handleClose, data, onSubmit }) => { +export const AcceptIssueModal: React.FC = ({ isOpen, onClose, data, onSubmit }) => { const [isAccepting, setIsAccepting] = useState(false); - const onClose = () => { + const handleClose = () => { setIsAccepting(false); - handleClose(); + onClose(); }; const handleAccept = () => { @@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC = ({ isOpen, handleClose, data, o return ( - + = ({ isOpen, handleClose, data, o

- + +
+
+ + + +
+
+ + + ); +}); diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx index 48786da55..35309815f 100644 --- a/web/components/inbox/modals/decline-issue-modal.tsx +++ b/web/components/inbox/modals/decline-issue-modal.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; - -// headless ui import { Dialog, Transition } from "@headlessui/react"; + // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // ui @@ -10,18 +9,18 @@ import { Button } from "@plane/ui"; import type { IInboxIssue } from "types"; type Props = { + data: IInboxIssue; isOpen: boolean; - handleClose: () => void; - data: IInboxIssue | undefined; + onClose: () => void; onSubmit: () => Promise; }; -export const DeclineIssueModal: React.FC = ({ isOpen, handleClose, data, onSubmit }) => { +export const DeclineIssueModal: React.FC = ({ isOpen, onClose, data, onSubmit }) => { const [isDeclining, setIsDeclining] = useState(false); - const onClose = () => { + const handleClose = () => { setIsDeclining(false); - handleClose(); + onClose(); }; const handleDecline = () => { @@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC = ({ isOpen, handleClose, data, return ( - + = ({ isOpen, handleClose, data,

-
); -}; +}); diff --git a/web/components/inbox/modals/index.ts b/web/components/inbox/modals/index.ts index 2b45346d2..12ce68578 100644 --- a/web/components/inbox/modals/index.ts +++ b/web/components/inbox/modals/index.ts @@ -1,4 +1,5 @@ export * from "./accept-issue-modal"; +export * from "./create-issue-modal"; export * from "./decline-issue-modal"; export * from "./delete-issue-modal"; export * from "./select-duplicate"; diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx index a9832c205..07b55ae38 100644 --- a/web/components/issues/form.tsx +++ b/web/components/issues/form.tsx @@ -33,14 +33,6 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor"; const defaultValues: Partial = { project: "", name: "", - description: { - type: "doc", - content: [ - { - type: "paragraph", - }, - ], - }, description_html: "

", estimate_point: null, state: "", diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx index 31d19354d..c3ea7bfda 100644 --- a/web/components/issues/modal.tsx +++ b/web/components/issues/modal.tsx @@ -5,12 +5,10 @@ import { Dialog, Transition } from "@headlessui/react"; // services import { ModuleService } from "services/module.service"; import { IssueService, IssueDraftService } from "services/issue"; -import { InboxService } from "services/inbox.service"; // hooks import useUser from "hooks/use-user"; import useIssuesView from "hooks/use-issues-view"; import useToast from "hooks/use-toast"; -import useInboxView from "hooks/use-inbox-view"; import useProjects from "hooks/use-projects"; import useMyIssues from "hooks/my-issues/use-my-issues"; import useLocalStorage from "hooks/use-local-storage"; @@ -29,12 +27,9 @@ import { CYCLE_DETAILS, MODULE_DETAILS, VIEW_ISSUES, - INBOX_ISSUES, PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS, GLOBAL_VIEW_ISSUES, } from "constants/fetch-keys"; -// constants -import { INBOX_ISSUE_SOURCE } from "constants/inbox"; export interface IssuesModalProps { data?: IIssue | null; @@ -60,7 +55,6 @@ export interface IssuesModalProps { } const moduleService = new ModuleService(); -const inboxService = new InboxService(); const issueService = new IssueService(); const issueDraftService = new IssueDraftService(); @@ -81,19 +75,16 @@ export const CreateUpdateIssueModal: React.FC = ({ const [prePopulateData, setPreloadedData] = useState>({}); const router = useRouter(); - const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } = router.query; + const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query; const { displayFilters, params } = useIssuesView(); const { ...viewGanttParams } = params; - const { params: inboxParams } = useInboxView(); const { user } = useUser(); const { projects } = useProjects(); const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString()); - const globalViewParams = {}; - const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage( "draftedIssue", {} @@ -235,43 +226,6 @@ export const CreateUpdateIssueModal: React.FC = ({ }); }; - const addIssueToInbox = async (formData: Partial) => { - if (!workspaceSlug || !activeProject || !inboxId) return; - - const payload = { - issue: { - name: formData.name, - description: formData.description, - description_html: formData.description_html, - priority: formData.priority, - }, - source: INBOX_ISSUE_SOURCE, - }; - - await inboxService - .createInboxIssue(workspaceSlug.toString(), activeProject.toString(), inboxId.toString(), payload, user) - .then((res) => { - setToastAlert({ - type: "success", - title: "Success!", - message: "Issue created successfully.", - }); - - router.push( - `/${workspaceSlug}/projects/${activeProject}/inbox/${inboxId}?inboxIssueId=${res.issue_inbox[0].id}` - ); - - mutate(INBOX_ISSUES(inboxId.toString(), inboxParams)); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Issue could not be created. Please try again.", - }); - }); - }; - const workspaceIssuesPath = [ { params: { @@ -315,45 +269,43 @@ export const CreateUpdateIssueModal: React.FC = ({ const createIssue = async (payload: Partial) => { if (!workspaceSlug || !activeProject) return; - if (inboxId) await addIssueToInbox(payload); - else - await issueService - .createIssues(workspaceSlug as string, activeProject ?? "", payload, user) - .then(async (res) => { - mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params)); - if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle); - if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module); + await issueService + .createIssues(workspaceSlug as string, activeProject ?? "", payload, user) + .then(async (res) => { + mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params)); + if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle); + if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module); - if (displayFilters.layout === "gantt_chart") - mutate(ganttFetchKey, { - start_target_date: true, - order_by: "sort_order", - }); - if (groupedIssues) mutateMyIssues(); - - setToastAlert({ - type: "success", - title: "Success!", - message: "Issue created successfully.", + if (displayFilters.layout === "gantt_chart") + mutate(ganttFetchKey, { + start_target_date: true, + order_by: "sort_order", }); + if (groupedIssues) mutateMyIssues(); - if (payload.assignees_list?.some((assignee) => assignee === user?.id)) - mutate(USER_ISSUE(workspaceSlug as string)); - - if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent)); - - if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString())); - - if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString())); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Issue could not be created. Please try again.", - }); + setToastAlert({ + type: "success", + title: "Success!", + message: "Issue created successfully.", }); + if (payload.assignees_list?.some((assignee) => assignee === user?.id)) + mutate(USER_ISSUE(workspaceSlug as string)); + + if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent)); + + if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString())); + + if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString())); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Issue could not be created. Please try again.", + }); + }); + if (!createMore) onFormSubmitClose(); }; diff --git a/web/components/ui/dropdowns/custom-search-select.tsx b/web/components/ui/dropdowns/custom-search-select.tsx index 939961f48..b72cced4c 100644 --- a/web/components/ui/dropdowns/custom-search-select.tsx +++ b/web/components/ui/dropdowns/custom-search-select.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; -// react-poppper +// react-popper import { usePopper } from "react-popper"; // headless ui import { Combobox } from "@headlessui/react"; @@ -58,9 +58,7 @@ export const CustomSearchSelect = ({ }); const filteredOptions = - query === "" - ? options - : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); + query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); const props: any = { value, @@ -105,9 +103,7 @@ export const CustomSearchSelect = ({ } ${buttonClassName}`} > {label} - {!noChevron && !disabled && ( -
) : ( - + )} )} diff --git a/web/components/ui/dropdowns/custom-select.tsx b/web/components/ui/dropdowns/custom-select.tsx index 5e77a155d..cee441f66 100644 --- a/web/components/ui/dropdowns/custom-select.tsx +++ b/web/components/ui/dropdowns/custom-select.tsx @@ -55,9 +55,7 @@ const CustomSelect = ({ ref={setReferenceElement} type="button" className={`flex items-center justify-between gap-1 w-full text-xs ${ - disabled - ? "cursor-not-allowed text-custom-text-200" - : "cursor-pointer hover:bg-custom-background-80" + disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" } ${customButtonClassName}`} > {customButton} @@ -71,15 +69,11 @@ const CustomSelect = ({ className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${ input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs" } ${ - disabled - ? "cursor-not-allowed text-custom-text-200" - : "cursor-pointer hover:bg-custom-background-80" + disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80" } ${buttonClassName}`} > {label} - {!noChevron && !disabled && ( -