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

dev: implemented inbox using MobX (#2440)

Browse Source 
* 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 <aaryankhandu123@gmail.com>

* 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 <aaryankhandu123@gmail.com>

* 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 <gurusainath007@gmail.com>

* 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 <aaryankhandu123@gmail.com>

* 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 <veeraghanta.sriram@gmail.com>

* 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 <narayan3119@gmail.com>

* 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 <asb@Anmols-MacBook-Pro.local>

* 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 <you@example.com>

* 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 <narayan3119@gmail.com>

* 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 <gurusainath007@gmail.com>

* 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 <veeraghanta.sriram@gmail.com>

* 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 <gurusainath007@gmail.com>

* 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 <veeraghanta.sriram@gmail.com>

* 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 <veeraghanta.sriram@gmail.com>

* 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 <vamsi.kurama@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
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 <gurusainath007@gmail.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>
Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
Co-authored-by: Thomas <git@thomasync.dev>
Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com>
Co-authored-by: Manish Gupta <manish@mgupta.me>

* 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 <gurusainath007@gmail.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
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 <vamsi.kurama@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Anmol Singh Bhatia <asb@Anmols-MacBook-Pro.local>
Co-authored-by: Rhea Jain <65884341+rhea0110@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
Co-authored-by: Thomas <git@thomasync.dev>
Co-authored-by: Luis Cruz <55716036+luis-cruzt@users.noreply.github.com>
Co-authored-by: Manish Gupta <manish@mgupta.me>
This commit is contained in:
Aaryan Khandelwal 2023-10-16 17:10:37 +05:30 committed by GitHub
parent a361dae185
commit cb80c98413
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 1468 additions and 812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/components/command-palette/command-k.tsx
View File

@ -11,9 +11,7 @@ import { Dialog, Transition } from "@headlessui/react";
// services // services
import { WorkspaceService } from "services/workspace.service"; import { WorkspaceService } from "services/workspace.service";
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
import { InboxService } from "services/inbox.service";
// hooks // hooks
import useProjectDetails from "hooks/use-project-details";
import useDebounce from "hooks/use-debounce"; import useDebounce from "hooks/use-debounce";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -30,13 +28,13 @@ import { Icon } from "components/ui";
import { Loader, ToggleSwitch, Tooltip } from "@plane/ui"; import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// icons // icons
import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons"; import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
import { IIssue, IWorkspaceSearchResults } from "types"; import { IIssue, IWorkspaceSearchResults } from "types";
// fetch-keys // 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 = { type Props = {
deleteIssue: () => void; deleteIssue: () => void;
@ -47,7 +45,6 @@ type Props = {
// services // services
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
const issueService = new IssueService(); const issueService = new IssueService();
const inboxService = new InboxService();
export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => { export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
const [placeholder, setPlaceholder] = useState("Type a command or search..."); const [placeholder, setPlaceholder] = useState("Type a command or search...");
@ -80,7 +77,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { user } = useUser(); const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { data: issueDetails } = useSWR( const { data: issueDetails } = useSWR(
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
@ -89,11 +85,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
: null : 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( const updateIssue = useCallback(
async (formData: Partial<IIssue>) => { async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId || !issueId) return; if (!workspaceSlug || !projectId || !issueId) return;
@ -569,22 +560,6 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<kbd>D</kbd> <kbd>D</kbd>
</Command.Item> </Command.Item>
</Command.Group> </Command.Group>
{projectDetails && projectDetails.inbox_view && (
<Command.Group heading="Inbox">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`);
}}
className="focus:outline-none"
>
<div className="flex items-center gap-2 text-custom-text-200">
<InboxIcon className="h-4 w-4" color="#6b7280" />
Open inbox
</div>
</Command.Item>
</Command.Group>
)}
</> </>
)} )}

3
web/components/command-palette/command-pallette.tsx
View File

@ -41,7 +41,7 @@ export const CommandPalette: React.FC = observer(() => {
const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false); const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, issueId, inboxId, cycleId, moduleId } = router.query; const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
const { user } = useUser(); const { user } = useUser();
@ -176,7 +176,6 @@ export const CommandPalette: React.FC = observer(() => {
<CreateUpdateIssueModal <CreateUpdateIssueModal
isOpen={isIssueModalOpen} isOpen={isIssueModalOpen}
handleClose={() => setIsIssueModalOpen(false)} handleClose={() => setIsIssueModalOpen(false)}
fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
prePopulateData={ prePopulateData={
cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
} }

1
web/components/headers/index.ts
View File

@ -1,6 +1,7 @@
export * from "./cycle-issues"; export * from "./cycle-issues";
export * from "./global-issues"; export * from "./global-issues";
export * from "./module-issues"; export * from "./module-issues";
export * from "./project-inbox";
export * from "./project-issues"; export * from "./project-issues";
export * from "./project-view-issues"; export * from "./project-view-issues";
export * from "./project-views"; export * from "./project-views";

21
web/components/headers/project-inbox.tsx Normal file
View File

@ -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>
</>
);
};

22
web/components/headers/project-issues.tsx
View File

@ -23,7 +23,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore(); const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore();
const activeLayout = issueFilterStore.userDisplayFilters.layout; const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -91,6 +91,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined; : undefined;
const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;
return ( return (
<> <>
<ProjectAnalyticsModal <ProjectAnalyticsModal
@ -127,18 +129,16 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
} }
/> />
</FiltersDropdown> </FiltersDropdown>
{/* TODO: add inbox redirection here */} {projectId && inboxStore.isInboxEnabled(projectId.toString()) && (
{projectDetails?.inbox_view && ( <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
// <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/inboxId`}>
<a> <a>
<Button variant="neutral-primary" size="sm"> <Button variant="neutral-primary" size="sm" className="relative">
<span>Inbox</span> Inbox
{/* {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && ( {inboxDetails && (
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200"> <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
{inboxList?.[0]?.pending_issue_count} {inboxDetails.pending_issue_count}
</span> </span>
)} */} )}
</Button> </Button>
</a> </a>
</Link> </Link>

175
web/components/inbox/action-headers.tsx → web/components/inbox/actions-header.tsx
View File

@ -1,44 +1,31 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr"; import { observer } from "mobx-react-lite";
import DatePicker from "react-datepicker"; import DatePicker from "react-datepicker";
import { Popover } from "@headlessui/react"; import { Popover } from "@headlessui/react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// contexts // contexts
import { useProjectMyMembership } from "contexts/project-member.context"; import { useProjectMyMembership } from "contexts/project-member.context";
// services
import { InboxService } from "services/inbox.service";
// hooks // hooks
import useInboxView from "hooks/use-inbox-view";
import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // components
import { import {
AcceptIssueModal, AcceptIssueModal,
DeclineIssueModal, DeclineIssueModal,
DeleteIssueModal, DeleteInboxIssueModal,
FiltersDropdown, FiltersDropdown,
SelectDuplicateInboxIssueModal, SelectDuplicateInboxIssueModal,
} from "components/inbox"; } from "components/inbox";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// icons // icons
import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons"; import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react";
import {
ChevronDownIcon,
ChevronUpIcon,
CheckCircleIcon,
ClockIcon,
XCircleIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// types // types
import type { IInboxIssueDetail, TInboxStatus } from "types"; import type { TInboxStatus } from "types";
// fetch-keys
import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
const inboxService = new InboxService(); export const InboxActionsHeader = observer(() => {
export const InboxActionHeader = () => {
const [date, setDate] = useState(new Date()); const [date, setDate] = useState(new Date());
const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false); const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
const [acceptIssueModal, setAcceptIssueModal] = useState(false); const [acceptIssueModal, setAcceptIssueModal] = useState(false);
@ -48,42 +35,24 @@ export const InboxActionHeader = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; 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 { memberRole } = useProjectMyMembership();
const { issues: inboxIssues, mutate: mutateInboxIssues } = useInboxView();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const markInboxStatus = async (data: TInboxStatus) => { const markInboxStatus = async (data: TInboxStatus) => {
if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId) return; if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return;
mutate<IInboxIssueDetail>( await inboxIssueDetailsStore
INBOX_ISSUE_DETAILS(inboxId as string, inboxIssueId as string), .updateIssueStatus(
(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(
workspaceSlug.toString(), workspaceSlug.toString(),
projectId.toString(), projectId.toString(),
inboxId.toString(), inboxId.toString(),
inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!, issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
data, data
user
) )
.catch(() => .catch(() =>
setToastAlert({ setToastAlert({
@ -91,15 +60,11 @@ export const InboxActionHeader = () => {
title: "Error!", title: "Error!",
message: "Something went wrong while updating inbox status. Please try again.", 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 issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
const currentIssueIndex = inboxIssues?.findIndex((issue: any) => issue.bridge_id === inboxIssueId) ?? 0; const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
useEffect(() => { useEffect(() => {
if (!issue?.issue_inbox[0].snoozed_till) return; if (!issue?.issue_inbox[0].snoozed_till) return;
@ -117,48 +82,46 @@ export const InboxActionHeader = () => {
return ( return (
<> <>
<SelectDuplicateInboxIssueModal {issue && (
isOpen={selectDuplicateIssue} <>
onClose={() => setSelectDuplicateIssue(false)} <SelectDuplicateInboxIssueModal
value={ isOpen={selectDuplicateIssue}
inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to onClose={() => setSelectDuplicateIssue(false)}
} value={issue?.issue_inbox[0].duplicate_to}
onSubmit={(dupIssueId: string) => { onSubmit={(dupIssueId) => {
markInboxStatus({ markInboxStatus({
status: 2, status: 2,
duplicate_to: dupIssueId, duplicate_to: dupIssueId,
}).finally(() => setSelectDuplicateIssue(false)); }).finally(() => setSelectDuplicateIssue(false));
}} }}
/> />
<AcceptIssueModal <AcceptIssueModal
isOpen={acceptIssueModal} data={issue}
handleClose={() => setAcceptIssueModal(false)} isOpen={acceptIssueModal}
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} onClose={() => setAcceptIssueModal(false)}
onSubmit={async () => { onSubmit={async () => {
await markInboxStatus({ await markInboxStatus({
status: 1, status: 1,
}).finally(() => setAcceptIssueModal(false)); }).finally(() => setAcceptIssueModal(false));
}} }}
/> />
<DeclineIssueModal <DeclineIssueModal
isOpen={declineIssueModal} data={issue}
handleClose={() => setDeclineIssueModal(false)} isOpen={declineIssueModal}
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)} onClose={() => setDeclineIssueModal(false)}
onSubmit={async () => { onSubmit={async () => {
await markInboxStatus({ await markInboxStatus({
status: -1, status: -1,
}).finally(() => setDeclineIssueModal(false)); }).finally(() => setDeclineIssueModal(false));
}} }}
/> />
<DeleteIssueModal <DeleteInboxIssueModal data={issue} isOpen={deleteIssueModal} onClose={() => setDeleteIssueModal(false)} />
isOpen={deleteIssueModal} </>
handleClose={() => setDeleteIssueModal(false)} )}
data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
/>
<div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200"> <div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200">
<div className="col-span-1 flex justify-between p-4"> <div className="col-span-1 flex justify-between p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<InboxIcon className="h-4 w-4 text-custom-text-200" /> <Inbox className="text-custom-text-200" size={16} strokeWidth={2} />
<h3 className="font-medium">Inbox</h3> <h3 className="font-medium">Inbox</h3>
</div> </div>
<FiltersDropdown /> <FiltersDropdown />
@ -174,7 +137,7 @@ export const InboxActionHeader = () => {
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<ChevronUpIcon className="h-3.5 w-3.5" /> <ChevronUp size={14} strokeWidth={2} />
</button> </button>
<button <button
type="button" type="button"
@ -184,10 +147,10 @@ export const InboxActionHeader = () => {
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<ChevronDownIcon className="h-3.5 w-3.5" /> <ChevronDown size={14} strokeWidth={2} />
</button> </button>
<div className="text-sm"> <div className="text-sm">
{currentIssueIndex + 1}/{inboxIssues?.length ?? 0} {currentIssueIndex + 1}/{issuesList?.length ?? 0}
</div> </div>
</div> </div>
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
@ -195,11 +158,7 @@ export const InboxActionHeader = () => {
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Popover className="relative"> <Popover className="relative">
<Popover.Button as="button" type="button"> <Popover.Button as="button" type="button">
<Button <Button variant="neutral-primary" prependIcon={<Clock size={14} strokeWidth={2} />} size="sm">
variant="neutral-primary"
prependIcon={<ClockIcon className="text-custom-text-200" />}
size="sm"
>
Snooze Snooze
</Button> </Button>
</Popover.Button> </Popover.Button>
@ -239,7 +198,7 @@ export const InboxActionHeader = () => {
<Button <Button
variant="neutral-primary" variant="neutral-primary"
size="sm" size="sm"
prependIcon={<StackedLayersHorizontalIcon className="text-custom-text-200" />} prependIcon={<FileStack size={14} strokeWidth={2} />}
onClick={() => setSelectDuplicateIssue(true)} onClick={() => setSelectDuplicateIssue(true)}
> >
Mark as duplicate Mark as duplicate
@ -251,7 +210,7 @@ export const InboxActionHeader = () => {
<Button <Button
variant="neutral-primary" variant="neutral-primary"
size="sm" size="sm"
prependIcon={<CheckCircleIcon className="text-green-500" />} prependIcon={<CheckCircle2 className="text-green-500" size={14} strokeWidth={2} />}
onClick={() => setAcceptIssueModal(true)} onClick={() => setAcceptIssueModal(true)}
> >
Accept Accept
@ -263,7 +222,7 @@ export const InboxActionHeader = () => {
<Button <Button
variant="neutral-primary" variant="neutral-primary"
size="sm" size="sm"
prependIcon={<XCircleIcon className="text-red-500" />} prependIcon={<XCircle className="text-red-500" size={14} strokeWidth={2} />}
onClick={() => setDeclineIssueModal(true)} onClick={() => setDeclineIssueModal(true)}
> >
Decline Decline
@ -275,7 +234,7 @@ export const InboxActionHeader = () => {
<Button <Button
variant="neutral-primary" variant="neutral-primary"
size="sm" size="sm"
prependIcon={<TrashIcon className="text-red-500" />} prependIcon={<Trash2 className="text-red-500" size={14} strokeWidth={2} />}
onClick={() => setDeleteIssueModal(true)} onClick={() => setDeleteIssueModal(true)}
> >
Delete Delete
@ -288,4 +247,4 @@ export const InboxActionHeader = () => {
</div> </div>
</> </>
); );
}; });

47
web/components/inbox/filters-dropdown.tsx
View File

@ -1,34 +1,53 @@
// hooks import { useRouter } from "next/router";
import useInboxView from "hooks/use-inbox-view"; import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { MultiLevelDropdown } from "components/ui"; import { MultiLevelDropdown } from "components/ui";
// icons // icons
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "components/icons";
// types
import { IInboxFilterOptions } from "types";
// constants // constants
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
import { INBOX_STATUS } from "constants/inbox"; import { INBOX_STATUS } from "constants/inbox";
export const FiltersDropdown: React.FC = () => { export const FiltersDropdown: React.FC = observer(() => {
const { filters, setFilters, filtersLength } = useInboxView(); 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 ( return (
<div className="relative"> <div className="relative">
<MultiLevelDropdown <MultiLevelDropdown
label="Filters" label="Filters"
onSelect={(option) => { onSelect={(option) => {
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) { const valueExists = currentValue.includes(option.value);
setFilters({
[option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value), if (valueExists)
inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
[option.key]: currentValue.filter((val) => val !== option.value),
}); });
} else { else
setFilters({ inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
[option.key]: [...((filters[key] ?? []) as any[]), option.value], [option.key]: [...currentValue, option.value],
}); });
}
}} }}
direction="right" direction="right"
height="rg" height="rg"
@ -76,4 +95,4 @@ export const FiltersDropdown: React.FC = () => {
)} )}
</div> </div>
); );
}; });

69
web/components/inbox/filters-list.tsx
View File

@ -1,34 +1,69 @@
// hooks import { useRouter } from "next/router";
import useInboxView from "hooks/use-inbox-view"; import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// icons // icons
import { XMarkIcon } from "@heroicons/react/24/outline"; import { XMarkIcon } from "@heroicons/react/24/outline";
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "components/icons";
// helpers // helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types // types
import { TIssuePriorities } from "types"; import { IInboxFilterOptions, TIssuePriorities } from "types";
// constants // constants
import { INBOX_STATUS } from "constants/inbox"; import { INBOX_STATUS } from "constants/inbox";
export const InboxFiltersList = () => { export const InboxFiltersList = observer(() => {
const { filters, setFilters, clearAllFilters, filtersLength } = useInboxView(); 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<IInboxFilterOptions>) => {
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 ( return (
<div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3"> <div className="flex items-center gap-2 flex-wrap text-[0.65rem] p-3">
{Object.keys(filters).map((key) => { {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 ( return (
<div <div
key={key} key={key}
className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1" className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
> >
<span className="capitalize text-custom-text-200"> <span className="capitalize text-custom-text-200">{replaceUnderscoreIfSnakeCase(key)}:</span>
{replaceUnderscoreIfSnakeCase(key)}:
</span>
{filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? ( {filters[filterKey] === null || (filters[filterKey]?.length ?? 0) <= 0 ? (
<span className="inline-flex items-center px-2 py-0.5 font-medium">None</span> <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
) : ( ) : (
@ -57,7 +92,7 @@ export const InboxFiltersList = () => {
type="button" type="button"
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
setFilters({ handleUpdateFilter({
priority: filters.priority?.filter((p) => p !== priority), priority: filters.priority?.filter((p) => p !== priority),
}) })
} }
@ -69,7 +104,7 @@ export const InboxFiltersList = () => {
<button <button
type="button" type="button"
onClick={() => onClick={() =>
setFilters({ handleUpdateFilter({
priority: null, priority: null,
}) })
} }
@ -89,7 +124,7 @@ export const InboxFiltersList = () => {
type="button" type="button"
className="cursor-pointer" className="cursor-pointer"
onClick={() => onClick={() =>
setFilters({ handleUpdateFilter({
inbox_status: filters.inbox_status?.filter((p) => p !== status), inbox_status: filters.inbox_status?.filter((p) => p !== status),
}) })
} }
@ -101,7 +136,7 @@ export const InboxFiltersList = () => {
<button <button
type="button" type="button"
onClick={() => onClick={() =>
setFilters({ handleUpdateFilter({
inbox_status: null, inbox_status: null,
}) })
} }
@ -119,7 +154,7 @@ export const InboxFiltersList = () => {
})} })}
<button <button
type="button" type="button"
onClick={clearAllFilters} onClick={handleClearAllFilters}
className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100" className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
> >
<span>Clear all</span> <span>Clear all</span>
@ -127,4 +162,4 @@ export const InboxFiltersList = () => {
</button> </button>
</div> </div>
); );
}; });

2
web/components/inbox/index.ts
View File

@ -1,5 +1,5 @@
export * from "./modals"; export * from "./modals";
export * from "./action-headers"; export * from "./actions-header";
export * from "./filters-dropdown"; export * from "./filters-dropdown";
export * from "./filters-list"; export * from "./filters-list";
export * from "./issue-activity"; export * from "./issue-activity";

25
web/components/inbox/issue-card.tsx
View File

@ -5,18 +5,11 @@ import Link from "next/link";
import { Tooltip } from "@plane/ui"; import { Tooltip } from "@plane/ui";
// icons // icons
import { PriorityIcon } from "components/icons"; import { PriorityIcon } from "components/icons";
import { import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
CalendarDaysIcon,
CheckCircleIcon,
ClockIcon,
DocumentDuplicateIcon,
ExclamationTriangleIcon,
XCircleIcon,
} from "@heroicons/react/24/outline";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types // types
import type { IInboxIssue } from "types"; import { IInboxIssue } from "types";
// constants // constants
import { INBOX_STATUS } from "constants/inbox"; import { INBOX_STATUS } from "constants/inbox";
@ -34,7 +27,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
const issueStatus = issue.issue_inbox[0].status; const issueStatus = issue.issue_inbox[0].status;
return ( 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> <a>
<div <div
id={issue.id} id={issue.id}
@ -71,7 +64,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`} tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
> >
<div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200"> <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
<CalendarDaysIcon className="h-3.5 w-3.5" /> <Calendar size={12} strokeWidth={1.5} />
<span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span> <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
</div> </div>
</Tooltip> </Tooltip>
@ -85,29 +78,29 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
> >
{issueStatus === -2 ? ( {issueStatus === -2 ? (
<> <>
<ExclamationTriangleIcon className="h-3.5 w-3.5" /> <AlertTriangle size={14} strokeWidth={2} />
<span>Pending</span> <span>Pending</span>
</> </>
) : issueStatus === -1 ? ( ) : issueStatus === -1 ? (
<> <>
<XCircleIcon className="h-3.5 w-3.5" /> <XCircle size={14} strokeWidth={2} />
<span>Declined</span> <span>Declined</span>
</> </>
) : issueStatus === 0 ? ( ) : issueStatus === 0 ? (
<> <>
<ClockIcon className="h-3.5 w-3.5" /> <Clock size={14} strokeWidth={2} />
<span> <span>
{new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"} {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
</span> </span>
</> </>
) : issueStatus === 1 ? ( ) : issueStatus === 1 ? (
<> <>
<CheckCircleIcon className="h-3.5 w-3.5" /> <CheckCircle2 size={14} strokeWidth={2} />
<span>Accepted</span> <span>Accepted</span>
</> </>
) : ( ) : (
<> <>
<DocumentDuplicateIcon className="h-3.5 w-3.5" /> <Copy size={14} strokeWidth={2} />
<span>Duplicate</span> <span>Duplicate</span>
</> </>
)} )}

26
web/components/inbox/issues-list-sidebar.tsx
View File

@ -1,31 +1,35 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks // mobx store
import useInboxView from "hooks/use-inbox-view"; import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { InboxIssueCard, InboxFiltersList } from "components/inbox"; import { InboxIssueCard, InboxFiltersList } from "components/inbox";
// ui // ui
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
export const IssuesListSidebar = () => { export const InboxIssuesListSidebar = observer(() => {
const router = useRouter(); 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 ( return (
<div className="h-full flex flex-col overflow-hidden"> <div className="h-full flex flex-col overflow-hidden">
<InboxFiltersList /> <InboxFiltersList />
{inboxIssues ? ( {issuesList ? (
inboxIssues.length > 0 ? ( issuesList.length > 0 ? (
<div className="divide-y divide-custom-border-200 overflow-auto h-full"> <div className="divide-y divide-custom-border-200 overflow-auto h-full">
{inboxIssues.map((issue: any) => ( {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> </div>
) : ( ) : (
<div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200"> <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
{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."} */}
</div> </div>
) )
) : ( ) : (
@ -38,4 +42,4 @@ export const IssuesListSidebar = () => {
)} )}
</div> </div>
); );
}; });

142
web/components/inbox/main-content.tsx
View File

@ -1,71 +1,52 @@
import { useCallback, useEffect } from "react"; import { useCallback, useEffect } from "react";
import Router, { useRouter } from "next/router"; import Router, { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR, { mutate } from "swr"; import useSWR from "swr";
// react hook form
import { useForm } from "react-hook-form"; 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 // contexts
import { useProjectMyMembership } from "contexts/project-member.context"; 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 // components
import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues"; import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
import { InboxIssueActivity } from "components/inbox"; import { InboxIssueActivity } from "components/inbox";
// ui // ui
import { Loader } from "@plane/ui"; import { Loader } from "@plane/ui";
// icons
import {
ArrowTopRightOnSquareIcon,
CheckCircleIcon,
ClockIcon,
DocumentDuplicateIcon,
ExclamationTriangleIcon,
InboxIcon,
XCircleIcon,
} from "@heroicons/react/24/outline";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
// types // types
import type { IInboxIssue, IIssue, IUser } from "types"; import { IInboxIssue, IIssue } from "types";
// fetch-keys
import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
const defaultValues: Partial<IInboxIssue> = { const defaultValues: Partial<IInboxIssue> = {
name: "", name: "",
description_html: "", description_html: "",
estimate_point: null,
assignees_list: [], assignees_list: [],
priority: "low", priority: "low",
target_date: new Date().toString(), target_date: new Date().toString(),
labels_list: [], labels_list: [],
}; };
const inboxService = new InboxService(); export const InboxMainContent: React.FC = observer(() => {
export const InboxMainContent: React.FC = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; 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 { memberRole } = useProjectMyMembership();
const { params, issues: inboxIssues } = useInboxView();
const { reset, control, watch } = useForm<IIssue>({ const { reset, control, watch } = useForm<IIssue>({
defaultValues, defaultValues,
}); });
const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( useSWR(
workspaceSlug && projectId && inboxId && inboxIssueId workspaceSlug && projectId && inboxId && inboxIssueId ? `INBOX_ISSUE_DETAILS_${inboxIssueId.toString()}` : null,
? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString())
: null,
workspaceSlug && projectId && inboxId && inboxIssueId workspaceSlug && projectId && inboxId && inboxIssueId
? () => ? () =>
inboxService.getInboxIssueById( inboxIssueDetailsStore.fetchIssueDetails(
workspaceSlug.toString(), workspaceSlug.toString(),
projectId.toString(), projectId.toString(),
inboxId.toString(), inboxId.toString(),
@ -74,59 +55,29 @@ export const InboxMainContent: React.FC = () => {
: null : null
); );
const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
const issueDetails = inboxIssueId ? inboxIssueDetailsStore.issueDetails[inboxIssueId.toString()] : undefined;
const submitChanges = useCallback( const submitChanges = useCallback(
async (formData: Partial<IInboxIssue>) => { async (formData: Partial<IInboxIssue>) => {
if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return; if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return;
mutateIssueDetails((prevData: any) => { await inboxIssueDetailsStore.updateIssue(
if (!prevData) return prevData; workspaceSlug.toString(),
projectId.toString(),
return { inboxId.toString(),
...prevData, issueDetails.issue_inbox[0].id,
...formData, formData
};
}, false);
mutate<IInboxIssue[]>(
INBOX_ISSUES(inboxId.toString(), params),
(prevData) =>
(prevData ?? []).map((i) => {
if (i.bridge_id === inboxIssueId) {
return {
...i,
...formData,
};
}
return i;
}),
false
); );
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( const onKeyDown = useCallback(
(e: KeyboardEvent) => { (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) { switch (e.key) {
case "ArrowUp": case "ArrowUp":
@ -135,8 +86,8 @@ export const InboxMainContent: React.FC = () => {
query: { query: {
inboxIssueId: inboxIssueId:
currentIssueIndex === 0 currentIssueIndex === 0
? inboxIssues[inboxIssues.length - 1].bridge_id ? issuesList[issuesList.length - 1].issue_inbox[0].id
: inboxIssues[currentIssueIndex - 1].bridge_id, : issuesList[currentIssueIndex - 1].issue_inbox[0].id,
}, },
}); });
break; break;
@ -145,9 +96,9 @@ export const InboxMainContent: React.FC = () => {
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
query: { query: {
inboxIssueId: inboxIssueId:
currentIssueIndex === inboxIssues.length - 1 currentIssueIndex === issuesList.length - 1
? inboxIssues[0].bridge_id ? issuesList[0].issue_inbox[0].id
: inboxIssues[currentIssueIndex + 1].bridge_id, : issuesList[currentIssueIndex + 1].issue_inbox[0].id,
}, },
}); });
break; break;
@ -155,7 +106,7 @@ export const InboxMainContent: React.FC = () => {
break; break;
} }
}, },
[workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues] [workspaceSlug, projectId, inboxIssueId, inboxId, issuesList]
); );
useEffect(() => { useEffect(() => {
@ -183,16 +134,13 @@ export const InboxMainContent: React.FC = () => {
<div className="h-full p-4 grid place-items-center text-custom-text-200"> <div className="h-full p-4 grid place-items-center text-custom-text-200">
<div className="grid h-full place-items-center"> <div className="grid h-full place-items-center">
<div className="my-5 flex flex-col items-center gap-4"> <div className="my-5 flex flex-col items-center gap-4">
<InboxIcon height={60} width={60} /> <Inbox size={60} strokeWidth={1.5} />
{inboxIssues && inboxIssues.length > 0 ? ( {issuesList && issuesList.length > 0 ? (
<span className="text-custom-text-200"> <span className="text-custom-text-200">
{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.
</span> </span>
) : ( ) : (
<span className="text-custom-text-200"> <span className="text-custom-text-200">No issues found</span>
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>
)} )}
</div> </div>
</div> </div>
@ -223,17 +171,17 @@ export const InboxMainContent: React.FC = () => {
> >
{issueStatus === -2 ? ( {issueStatus === -2 ? (
<> <>
<ExclamationTriangleIcon className="h-5 w-5" /> <AlertTriangle size={18} strokeWidth={2} />
<p>This issue is still pending.</p> <p>This issue is still pending.</p>
</> </>
) : issueStatus === -1 ? ( ) : issueStatus === -1 ? (
<> <>
<XCircleIcon className="h-5 w-5" /> <XCircle size={18} strokeWidth={2} />
<p>This issue has been declined.</p> <p>This issue has been declined.</p>
</> </>
) : issueStatus === 0 ? ( ) : issueStatus === 0 ? (
<> <>
<ClockIcon className="h-5 w-5" /> <Clock size={18} strokeWidth={2} />
{new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? ( {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
<p> <p>
This issue was snoozed till{" "} This issue was snoozed till{" "}
@ -248,12 +196,12 @@ export const InboxMainContent: React.FC = () => {
</> </>
) : issueStatus === 1 ? ( ) : issueStatus === 1 ? (
<> <>
<CheckCircleIcon className="h-5 w-5" /> <CheckCircle2 size={18} strokeWidth={2} />
<p>This issue has been accepted.</p> <p>This issue has been accepted.</p>
</> </>
) : issueStatus === 2 ? ( ) : issueStatus === 2 ? (
<> <>
<DocumentDuplicateIcon className="h-5 w-5" /> <Copy size={18} strokeWidth={2} />
<p className="flex items-center gap-1"> <p className="flex items-center gap-1">
This issue has been marked as a duplicate of This issue has been marked as a duplicate of
<a <a
@ -262,7 +210,7 @@ export const InboxMainContent: React.FC = () => {
rel="noreferrer" rel="noreferrer"
className="underline flex items-center gap-2" className="underline flex items-center gap-2"
> >
this issue <ArrowTopRightOnSquareIcon className="h-3 w-3" /> this issue <ExternalLink size={12} strokeWidth={2} />
</a> </a>
. .
</p> </p>
@ -286,7 +234,7 @@ export const InboxMainContent: React.FC = () => {
<InboxIssueActivity issueDetails={issueDetails} /> <InboxIssueActivity issueDetails={issueDetails} />
</div> </div>
<div className="basis-1/3 space-y-5 border-custom-border-200 p-5"> <div className="basis-1/3 space-y-5 border-custom-border-200 py-5">
<IssueDetailsSidebar <IssueDetailsSidebar
control={control} control={control}
issueDetail={issueDetails} issueDetail={issueDetails}
@ -314,4 +262,4 @@ export const InboxMainContent: React.FC = () => {
)} )}
</> </>
); );
}; });

17
web/components/inbox/modals/accept-issue-modal.tsx
View File

@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
// headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { CheckCircleIcon } from "@heroicons/react/24/outline"; import { CheckCircleIcon } from "@heroicons/react/24/outline";
// ui // ui
@ -10,18 +9,18 @@ import { Button } from "@plane/ui";
import type { IInboxIssue } from "types"; import type { IInboxIssue } from "types";
type Props = { type Props = {
data: IInboxIssue;
isOpen: boolean; isOpen: boolean;
handleClose: () => void; onClose: () => void;
data: IInboxIssue | undefined;
onSubmit: () => Promise<void>; onSubmit: () => Promise<void>;
}; };
export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => { export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
const [isAccepting, setIsAccepting] = useState(false); const [isAccepting, setIsAccepting] = useState(false);
const onClose = () => { const handleClose = () => {
setIsAccepting(false); setIsAccepting(false);
handleClose(); onClose();
}; };
const handleAccept = () => { const handleAccept = () => {
@ -32,7 +31,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}> <Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -76,7 +75,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
</p> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" onClick={onClose}> <Button variant="neutral-primary" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" onClick={handleAccept} loading={isAccepting}> <Button variant="primary" onClick={handleAccept} loading={isAccepting}>

188
web/components/inbox/modals/create-issue-modal.tsx Normal file
View File

@ -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>
);
});

17
web/components/inbox/modals/decline-issue-modal.tsx
View File

@ -1,7 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
// headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui // ui
@ -10,18 +9,18 @@ import { Button } from "@plane/ui";
import type { IInboxIssue } from "types"; import type { IInboxIssue } from "types";
type Props = { type Props = {
data: IInboxIssue;
isOpen: boolean; isOpen: boolean;
handleClose: () => void; onClose: () => void;
data: IInboxIssue | undefined;
onSubmit: () => Promise<void>; onSubmit: () => Promise<void>;
}; };
export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, onSubmit }) => { export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSubmit }) => {
const [isDeclining, setIsDeclining] = useState(false); const [isDeclining, setIsDeclining] = useState(false);
const onClose = () => { const handleClose = () => {
setIsDeclining(false); setIsDeclining(false);
handleClose(); onClose();
}; };
const handleDecline = () => { const handleDecline = () => {
@ -32,7 +31,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={onClose}> <Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -76,7 +75,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
</p> </p>
</span> </span>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="neutral-primary" onClick={onClose}> <Button variant="neutral-primary" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="danger" onClick={handleDecline} loading={isDeclining}> <Button variant="danger" onClick={handleDecline} loading={isDeclining}>

55
web/components/inbox/modals/delete-issue-modal.tsx
View File

@ -1,69 +1,48 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// services
import { InboxService } from "services/inbox.service"; // mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useInboxView from "hooks/use-inbox-view";
import useUser from "hooks/use-user";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui // ui
import { Button } from "@plane/ui"; import { Button } from "@plane/ui";
// types // types
import type { IInboxIssue } from "types"; import type { IInboxIssue } from "types";
// fetch-keys
import { INBOX_ISSUES } from "constants/fetch-keys";
type Props = { type Props = {
data: IInboxIssue;
isOpen: boolean; isOpen: boolean;
handleClose: () => void; onClose: () => void;
data: IInboxIssue | undefined;
}; };
const inboxService = new InboxService(); export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, data }) => {
export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, inboxId } = router.query; const { workspaceSlug, projectId, inboxId } = router.query;
const { user } = useUser(); const { inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
const { setToastAlert } = useToast();
const { params } = useInboxView();
const onClose = () => { const { setToastAlert } = useToast();
const handleClose = () => {
setIsDeleting(false); setIsDeleting(false);
handleClose(); onClose();
}; };
const handleDelete = () => { const handleDelete = () => {
if (!workspaceSlug || !projectId || !inboxId || !data) return; if (!workspaceSlug || !projectId || !inboxId) return;
setIsDeleting(true); setIsDeleting(true);
inboxService inboxIssueDetailsStore
.deleteInboxIssue( .deleteIssue(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), data.issue_inbox[0].id)
workspaceSlug.toString(),
projectId.toString(),
inboxId.toString(),
data.bridge_id.toString(),
user
)
.then(() => { .then(() => {
mutate<IInboxIssue[]>(
INBOX_ISSUES(inboxId.toString(), params),
(prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
false
);
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Success!", title: "Success!",
@ -75,7 +54,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
}); });
onClose(); handleClose();
}) })
.catch(() => .catch(() =>
setToastAlert({ setToastAlert({
@ -148,4 +127,4 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
</Dialog> </Dialog>
</Transition.Root> </Transition.Root>
); );
}; });

1
web/components/inbox/modals/index.ts
View File

@ -1,4 +1,5 @@
export * from "./accept-issue-modal"; export * from "./accept-issue-modal";
export * from "./create-issue-modal";
export * from "./decline-issue-modal"; export * from "./decline-issue-modal";
export * from "./delete-issue-modal"; export * from "./delete-issue-modal";
export * from "./select-duplicate"; export * from "./select-duplicate";

8
web/components/issues/form.tsx
View File

@ -33,14 +33,6 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor";
const defaultValues: Partial<IIssue> = { const defaultValues: Partial<IIssue> = {
project: "", project: "",
name: "", name: "",
description: {
type: "doc",
content: [
{
type: "paragraph",
},
],
},
description_html: "<p></p>", description_html: "<p></p>",
estimate_point: null, estimate_point: null,
state: "", state: "",

114
web/components/issues/modal.tsx
View File

@ -5,12 +5,10 @@ import { Dialog, Transition } from "@headlessui/react";
// services // services
import { ModuleService } from "services/module.service"; import { ModuleService } from "services/module.service";
import { IssueService, IssueDraftService } from "services/issue"; import { IssueService, IssueDraftService } from "services/issue";
import { InboxService } from "services/inbox.service";
// hooks // hooks
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useIssuesView from "hooks/use-issues-view"; import useIssuesView from "hooks/use-issues-view";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useInboxView from "hooks/use-inbox-view";
import useProjects from "hooks/use-projects"; import useProjects from "hooks/use-projects";
import useMyIssues from "hooks/my-issues/use-my-issues"; import useMyIssues from "hooks/my-issues/use-my-issues";
import useLocalStorage from "hooks/use-local-storage"; import useLocalStorage from "hooks/use-local-storage";
@ -29,12 +27,9 @@ import {
CYCLE_DETAILS, CYCLE_DETAILS,
MODULE_DETAILS, MODULE_DETAILS,
VIEW_ISSUES, VIEW_ISSUES,
INBOX_ISSUES,
PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS, PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
GLOBAL_VIEW_ISSUES, GLOBAL_VIEW_ISSUES,
} from "constants/fetch-keys"; } from "constants/fetch-keys";
// constants
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
export interface IssuesModalProps { export interface IssuesModalProps {
data?: IIssue | null; data?: IIssue | null;
@ -60,7 +55,6 @@ export interface IssuesModalProps {
} }
const moduleService = new ModuleService(); const moduleService = new ModuleService();
const inboxService = new InboxService();
const issueService = new IssueService(); const issueService = new IssueService();
const issueDraftService = new IssueDraftService(); const issueDraftService = new IssueDraftService();
@ -81,19 +75,16 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({}); const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
const router = useRouter(); 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 { displayFilters, params } = useIssuesView();
const { ...viewGanttParams } = params; const { ...viewGanttParams } = params;
const { params: inboxParams } = useInboxView();
const { user } = useUser(); const { user } = useUser();
const { projects } = useProjects(); const { projects } = useProjects();
const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString()); const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
const globalViewParams = {};
const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>( const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
"draftedIssue", "draftedIssue",
{} {}
@ -235,43 +226,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
}); });
}; };
const addIssueToInbox = async (formData: Partial<IIssue>) => {
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 = [ const workspaceIssuesPath = [
{ {
params: { params: {
@ -315,45 +269,43 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const createIssue = async (payload: Partial<IIssue>) => { const createIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return; if (!workspaceSlug || !activeProject) return;
if (inboxId) await addIssueToInbox(payload); await issueService
else .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
await issueService .then(async (res) => {
.createIssues(workspaceSlug as string, activeProject ?? "", payload, user) mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
.then(async (res) => { if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params)); if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
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") if (displayFilters.layout === "gantt_chart")
mutate(ganttFetchKey, { mutate(ganttFetchKey, {
start_target_date: true, start_target_date: true,
order_by: "sort_order", order_by: "sort_order",
});
if (groupedIssues) mutateMyIssues();
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
}); });
if (groupedIssues) mutateMyIssues();
if (payload.assignees_list?.some((assignee) => assignee === user?.id)) setToastAlert({
mutate(USER_ISSUE(workspaceSlug as string)); type: "success",
title: "Success!",
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent)); message: "Issue created successfully.",
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 (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(); if (!createMore) onFormSubmitClose();
}; };

18
web/components/ui/dropdowns/custom-search-select.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
// react-poppper // react-popper
import { usePopper } from "react-popper"; import { usePopper } from "react-popper";
// headless ui // headless ui
import { Combobox } from "@headlessui/react"; import { Combobox } from "@headlessui/react";
@ -58,9 +58,7 @@ export const CustomSearchSelect = ({
}); });
const filteredOptions = const filteredOptions =
query === "" query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
? options
: options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const props: any = { const props: any = {
value, value,
@ -105,9 +103,7 @@ export const CustomSearchSelect = ({
} ${buttonClassName}`} } ${buttonClassName}`}
> >
{label} {label}
{!noChevron && !disabled && ( {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
)}
</button> </button>
</Combobox.Button> </Combobox.Button>
)} )}
@ -164,14 +160,10 @@ export const CustomSearchSelect = ({
active || selected ? "opacity-100" : "opacity-0" active || selected ? "opacity-100" : "opacity-0"
}`} }`}
> >
<CheckIcon <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/>
</div> </div>
) : ( ) : (
<CheckIcon <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/>
)} )}
</> </>
)} )}

18
web/components/ui/dropdowns/custom-select.tsx
View File

@ -55,9 +55,7 @@ const CustomSelect = ({
ref={setReferenceElement} ref={setReferenceElement}
type="button" type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${ className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`} } ${customButtonClassName}`}
> >
{customButton} {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 ${ 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" input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${ } ${
disabled disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`} } ${buttonClassName}`}
> >
{label} {label}
{!noChevron && !disabled && ( {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
)}
</button> </button>
</Listbox.Button> </Listbox.Button>
)} )}
@ -118,9 +112,9 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
<Listbox.Option <Listbox.Option
value={value} value={value}
className={({ active, selected }) => className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${ `cursor-pointer select-none truncate rounded px-1 py-1.5 ${active || selected ? "bg-custom-background-80" : ""} ${
active || selected ? "bg-custom-background-80" : "" selected ? "text-custom-text-100" : "text-custom-text-200"
} ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}` } ${className}`
} }
> >
{({ selected }) => ( {({ selected }) => (

12
web/components/views/select-filters.tsx
View File

@ -4,8 +4,6 @@ import useSWR from "swr";
// services // services
import { ProjectStateService, ProjectService } from "services/project"; import { ProjectStateService, ProjectService } from "services/project";
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// components
import { DateFilterModal } from "components/core";
// ui // ui
import { Avatar, MultiLevelDropdown } from "components/ui"; import { Avatar, MultiLevelDropdown } from "components/ui";
// icons // icons
@ -248,16 +246,6 @@ export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction =
]; ];
return ( return (
<> <>
{/* {isDateFilterModalOpen && (
<DateFilterModal
title={dateFilterType.title}
field={dateFilterType.type}
filters={filters as IIssueFilterOptions}
handleClose={() => setIsDateFilterModalOpen(false)}
isOpen={isDateFilterModalOpen}
onSelect={onSelect}
/>
)} */}
<MultiLevelDropdown <MultiLevelDropdown
label="Filters" label="Filters"
onSelect={onSelect} onSelect={onSelect}

182
web/components/views/signin.tsx Normal file
View File

@ -0,0 +1,182 @@
import useSWR from "swr";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import { useRouter } from "next/router";
// hooks
import useToast from "hooks/use-toast";
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { AuthService } from "services/auth.service";
import { AppConfigService } from "services/app_config.service";
// components
import {
GoogleLoginButton,
GithubLoginButton,
EmailCodeForm,
EmailPasswordForm,
EmailPasswordFormValues,
} from "components/account";
// ui
import { Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import { IUserSettings } from "types";
const appConfigService = new AppConfigService();
const authService = new AuthService();
export const SignInView = observer(() => {
const { user: userStore } = useMobxStore();
// router
const router = useRouter();
// toast
const { setToastAlert } = useToast();
// fetch app config
const { data } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
// fetch user info
const { data: user, error } = useSWR("USER_INFO", () => userStore.fetchCurrentUser());
// computed
const enableEmailPassword =
data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github);
const handleLoginRedirection = () =>
userStore.fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
router.push(`/${workspaceSlug}`);
});
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
if (clientId && credential) {
const socialAuthPayload = {
medium: "google",
credential,
clientId,
};
const response = await authService.socialAuth(socialAuthPayload);
if (response) {
handleLoginRedirection();
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handleGitHubSignIn = async (credential: string) => {
try {
if (data && data.github && credential) {
const socialAuthPayload = {
medium: "github",
credential,
clientId: data.github,
};
const response = await authService.socialAuth(socialAuthPayload);
if (response) {
handleLoginRedirection();
}
} else {
throw Error("Cant find credentials");
}
} catch (err: any) {
setToastAlert({
title: "Error signing in!",
type: "error",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
await authService
.emailLogin(formData)
.then((response) => {
if (response) {
handleLoginRedirection();
}
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
})
);
};
const handleEmailCodeSignIn = async (response: any) => {
try {
if (response) {
handleLoginRedirection();
}
} catch (err: any) {
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
});
}
};
return (
<>
{!user && !error ? (
<div className="grid place-items-center h-screen">
<Spinner />
</div>
) : (
<>
<>
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
</>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<>
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
{data?.magic_login && (
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
</div>
)}
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
{data?.google && <GoogleLoginButton clientId={data?.google} handleSignIn={handleGoogleSignIn} />}
{data?.github && <GithubLoginButton clientId={data?.github} handleSignIn={handleGitHubSignIn} />}
</div>
</>
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
</div>
</div>
</>
)}
</>
);
});

13
web/constants/fetch-keys.ts
View File

@ -210,19 +210,6 @@ export const VIEW_ISSUES = (viewId: string, params: any) => {
return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`; return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`;
}; };
// inbox
export const INBOX_LIST = (projectId: string) => `INBOX_LIST_${projectId.toUpperCase()}`;
export const INBOX_DETAILS = (inboxId: string) => `INBOX_DETAILS_${inboxId.toUpperCase()}`;
export const INBOX_ISSUES = (inboxId: string, params?: any) => {
if (!params) return `INBOX_ISSUES_${inboxId.toUpperCase()}`;
const paramsKey = inboxParamsToKey(params);
return `INBOX_ISSUES_${inboxId.toUpperCase()}_${paramsKey.toUpperCase()}`;
};
export const INBOX_ISSUE_DETAILS = (inboxId: string, issueId: string) =>
`INBOX_ISSUE_DETAILS_${inboxId.toUpperCase()}_${issueId.toUpperCase()}`;
// Issues // Issues
export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`; export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`; export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;

177
web/contexts/inbox-view-context.tsx
View File

@ -1,177 +0,0 @@
import { createContext, useCallback, useEffect, useReducer } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// components
import ToastAlert from "components/toast-alert";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInboxFilterOptions } from "types";
// fetch-keys
import { INBOX_DETAILS } from "constants/fetch-keys";
export const inboxViewContext = createContext<ContextType>({} as ContextType);
const inboxServices = new InboxService();
type InboxViewProps = {
filters: IInboxFilterOptions;
};
type ReducerActionType = {
type: "REHYDRATE_THEME" | "SET_FILTERS";
payload?: Partial<InboxViewProps>;
};
type ContextType = InboxViewProps & {
setFilters: (filters: Partial<IInboxFilterOptions>) => void;
clearAllFilters: () => void;
};
type StateType = {
filters: IInboxFilterOptions;
};
type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
export const initialState: StateType = {
filters: {
priority: null,
inbox_status: null,
},
};
export const reducer: ReducerFunctionType = (state, action) => {
const { type, payload } = action;
switch (type) {
case "REHYDRATE_THEME": {
return { ...initialState, ...payload };
}
case "SET_FILTERS": {
const newState = {
...state,
filters: {
...state.filters,
...payload?.filters,
},
};
return {
...state,
...newState,
};
}
}
};
const saveDataToServer = async (workspaceSlug: string, projectId: string, inboxId: string, state: any) => {
await inboxServices.patchInbox(workspaceSlug, projectId, inboxId, {
view_props: state,
});
};
export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
const router = useRouter();
const { workspaceSlug, projectId, inboxId } = router.query;
const { data: inboxDetails, mutate: mutateInboxDetails } = useSWR(
workspaceSlug && projectId && inboxId ? INBOX_DETAILS(inboxId.toString()) : null,
workspaceSlug && projectId && inboxId
? () => inboxServices.getInboxById(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
: null
);
const setFilters = useCallback(
(property: Partial<IInboxFilterOptions>) => {
Object.keys(property).forEach((key) => {
if (property[key as keyof typeof property]?.length === 0) property[key as keyof typeof property] = null;
});
dispatch({
type: "SET_FILTERS",
payload: {
filters: {
...state.filters,
...property,
},
},
});
if (!workspaceSlug || !projectId || !inboxId) return;
const newViewProps = {
...state,
filters: {
...state.filters,
...property,
},
};
mutateInboxDetails((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: newViewProps,
};
}, false);
saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
},
[workspaceSlug, projectId, inboxId, mutateInboxDetails, state]
);
const clearAllFilters = useCallback(() => {
dispatch({
type: "SET_FILTERS",
payload: {
filters: { ...initialState.filters },
},
});
if (!workspaceSlug || !projectId || !inboxId) return;
const newViewProps = {
...state,
filters: { ...initialState.filters },
};
mutateInboxDetails((prevData: any) => {
if (!prevData) return prevData;
return {
...prevData,
view_props: newViewProps,
};
}, false);
saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
}, [inboxId, mutateInboxDetails, projectId, state, workspaceSlug]);
useEffect(() => {
dispatch({
type: "REHYDRATE_THEME",
payload: {
...inboxDetails?.view_props,
},
});
}, [inboxDetails]);
return (
<inboxViewContext.Provider
value={{
filters: state.filters,
setFilters,
clearAllFilters,
}}
>
<ToastAlert />
{children}
</inboxViewContext.Provider>
);
};

54
web/hooks/use-inbox-view.tsx
View File

@ -1,54 +0,0 @@
import { useContext } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// contexts
import { inboxViewContext } from "contexts/inbox-view-context";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInboxQueryParams } from "types";
// fetch-keys
import { INBOX_ISSUES } from "constants/fetch-keys";
const inboxService = new InboxService();
const useInboxView = () => {
const { filters, setFilters, clearAllFilters } = useContext(inboxViewContext);
const router = useRouter();
const { workspaceSlug, projectId, inboxId } = router.query;
const params: IInboxQueryParams = {
priority: filters?.priority ? filters?.priority.join(",") : null,
inbox_status: filters?.inbox_status ? filters?.inbox_status.join(",") : null,
};
const { data: inboxIssues, mutate: mutateInboxIssues } = useSWR(
workspaceSlug && projectId && inboxId && params ? INBOX_ISSUES(inboxId.toString(), params) : null,
workspaceSlug && projectId && inboxId && params
? () => inboxService.getInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), params)
: null
);
let filtersLength = 0;
Object.keys(filters ?? {}).forEach((key) => {
const filterKey = key as keyof typeof filters;
if (filters[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
});
return {
filters,
setFilters,
clearAllFilters,
filtersLength,
params,
issues: inboxIssues,
mutate: mutateInboxIssues,
} as const;
};
export default useInboxView;

6
web/lib/mobx/store-init.tsx
View File

@ -14,12 +14,13 @@ const MobxStoreInit = () => {
module: moduleStore, module: moduleStore,
globalViews: globalViewsStore, globalViews: globalViewsStore,
projectViews: projectViewsStore, projectViews: projectViewsStore,
inbox: inboxStore,
} = useMobxStore(); } = useMobxStore();
// theme // theme
const { setTheme } = useTheme(); const { setTheme } = useTheme();
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, moduleId, globalViewId, viewId } = router.query; const { workspaceSlug, projectId, moduleId, globalViewId, viewId, inboxId } = router.query;
useEffect(() => { useEffect(() => {
// sidebar collapsed toggle // sidebar collapsed toggle
@ -51,17 +52,20 @@ const MobxStoreInit = () => {
if (moduleId) moduleStore.setModuleId(moduleId.toString()); if (moduleId) moduleStore.setModuleId(moduleId.toString());
if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString()); if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
if (viewId) projectViewsStore.setViewId(viewId.toString()); if (viewId) projectViewsStore.setViewId(viewId.toString());
if (inboxId) inboxStore.setInboxId(inboxId.toString());
}, [ }, [
workspaceSlug, workspaceSlug,
projectId, projectId,
moduleId, moduleId,
globalViewId, globalViewId,
viewId, viewId,
inboxId,
workspaceStore, workspaceStore,
projectStore, projectStore,
moduleStore, moduleStore,
globalViewsStore, globalViewsStore,
projectViewsStore, projectViewsStore,
inboxStore,
]); ]);
return <></>; return <></>;

81
web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
View File

@ -1,64 +1,61 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr";
// hooks // mobx store
import useProjectDetails from "hooks/use-project-details"; import { useMobxStore } from "lib/mobx/store-provider";
// layouts // layouts
import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy"; import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
// contexts
import { InboxViewContextProvider } from "contexts/inbox-view-context";
// components // components
import { InboxActionHeader, InboxMainContent, IssuesListSidebar } from "components/inbox"; import { InboxActionsHeader, InboxMainContent, InboxIssuesListSidebar } from "components/inbox";
import { ProjectInboxHeader } from "components/headers";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// ui // ui
import { Button } from "@plane/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
const ProjectInbox: NextPage = () => { const ProjectInbox: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug, projectId, inboxId } = router.query;
const { projectDetails } = useProjectDetails(); const { inboxIssues: inboxIssuesStore, inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore();
const projectDetails =
workspaceSlug && projectId
? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
: undefined;
useSWR(
workspaceSlug && projectId && inboxId ? `REVALIDATE_INBOX_${inboxId.toString()}` : null,
workspaceSlug && projectId && inboxId
? async () => {
await inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
await inboxIssuesStore.fetchInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
}
: null
);
return ( return (
<InboxViewContextProvider> <ProjectAuthorizationWrapper
<ProjectAuthorizationWrapper breadcrumbs={
breadcrumbs={ <Breadcrumbs>
<Breadcrumbs> <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} /> <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "", 32)} Inbox`} />
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`} /> </Breadcrumbs>
</Breadcrumbs> }
} right={<ProjectInboxHeader />}
right={ >
<div className="flex items-center gap-2"> <div className="flex flex-col h-full">
<Button <InboxActionsHeader />
variant="primary" <div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
prependIcon={<PlusIcon />} <InboxIssuesListSidebar />
onClick={() => { <div className="col-span-3 h-full overflow-auto">
const e = new KeyboardEvent("keydown", { key: "c" }); <InboxMainContent />
document.dispatchEvent(e);
}}
>
Add Issue
</Button>
</div>
}
>
<div className="flex flex-col h-full">
<InboxActionHeader />
<div className="grid grid-cols-4 flex-1 divide-x divide-custom-border-200 overflow-hidden">
<IssuesListSidebar />
<div className="col-span-3 h-full overflow-auto">
<InboxMainContent />
</div>
</div> </div>
</div> </div>
</ProjectAuthorizationWrapper> </div>
</InboxViewContextProvider> </ProjectAuthorizationWrapper>
); );
}; };

17
web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
View File

@ -27,7 +27,7 @@ const ProjectIssues: NextPage = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore(); const { issueFilter: issueFilterStore, project: projectStore, inbox: inboxStore } = useMobxStore();
const { data: projectDetails } = useSWR( const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
@ -63,6 +63,21 @@ const ProjectIssues: NextPage = () => {
: null : null
); );
useSWR(
workspaceSlug && projectId ? "REVALIDATE_PROJECT_DETAILS" : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
: null
);
useSWR(
workspaceSlug && projectId ? "REVALIDATE_INBOXES_LIST" : null,
workspaceSlug && projectId
? () => inboxStore.fetchInboxesList(workspaceSlug.toString(), projectId.toString())
: null
);
// TODO: remove all the above fetching logic to project auth wrapper
return ( return (
<ProjectAuthorizationWrapper <ProjectAuthorizationWrapper
breadcrumbs={ breadcrumbs={

16
web/services/inbox.service.ts
View File

@ -3,7 +3,7 @@ import { TrackEventService } from "services/track_event.service";
// helpers // helpers
import { API_BASE_URL } from "helpers/common.helper"; import { API_BASE_URL } from "helpers/common.helper";
// types // types
import type { IInboxIssue, IInbox, TInboxStatus, IInboxIssueDetail, IUser, IInboxQueryParams } from "types"; import type { IInboxIssue, IInbox, TInboxStatus, IUser, IInboxQueryParams } from "types";
const trackEventService = new TrackEventService(); const trackEventService = new TrackEventService();
@ -56,7 +56,7 @@ export class InboxService extends APIService {
projectId: string, projectId: string,
inboxId: string, inboxId: string,
inboxIssueId: string inboxIssueId: string
): Promise<IInboxIssueDetail> { ): Promise<IInboxIssue> {
return this.get( return this.get(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/` `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
) )
@ -77,7 +77,7 @@ export class InboxService extends APIService {
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/` `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
) )
.then((response) => { .then((response) => {
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user as IUser); if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
return response?.data; return response?.data;
}) })
.catch((error) => { .catch((error) => {
@ -120,14 +120,14 @@ export class InboxService extends APIService {
inboxId: string, inboxId: string,
inboxIssueId: string, inboxIssueId: string,
data: { issue: Partial<IInboxIssue> }, data: { issue: Partial<IInboxIssue> },
user: IUser user: IUser | undefined
): Promise<IInboxIssue> { ): Promise<any> {
return this.patch( return this.patch(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`, `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
data data
) )
.then((response) => { .then((response) => {
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user); if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
return response?.data; return response?.data;
}) })
.catch((error) => { .catch((error) => {
@ -141,10 +141,10 @@ export class InboxService extends APIService {
inboxId: string, inboxId: string,
data: any, data: any,
user: IUser | undefined user: IUser | undefined
): Promise<IInboxIssueDetail> { ): Promise<IInboxIssue> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data) return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data)
.then((response) => { .then((response) => {
trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user as IUser); if (user) trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
return response?.data; return response?.data;
}) })
.catch((error) => { .catch((error) => {

154
web/store/inbox/inbox.store.ts Normal file
View File

@ -0,0 +1,154 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInbox } from "types";
export interface IInboxStore {
// states
loader: boolean;
error: any | null;
// observables
inboxId: string | null;
inboxesList: {
[projectId: string]: IInbox[];
};
inboxDetails: {
[inboxId: string]: IInbox;
};
// actions
setInboxId: (inboxId: string) => void;
isInboxEnabled: (projectId: string) => boolean;
getInboxId: (projectId: string) => string | null;
fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise<IInbox[]>;
fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
}
export class InboxStore implements IInboxStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
inboxId: string | null = null;
inboxesList: {
[projectId: string]: IInbox[];
} = {};
inboxDetails: {
[inboxId: string]: IInbox;
} = {};
// root store
rootStore;
// services
inboxService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
inboxId: observable.ref,
inboxesList: observable.ref,
inboxDetails: observable.ref,
// actions
setInboxId: action,
fetchInboxesList: action,
isInboxEnabled: action,
getInboxId: action,
});
this.rootStore = _rootStore;
this.inboxService = new InboxService();
}
isInboxEnabled = (projectId: string) => {
const projectDetails = this.rootStore.project.project_details[projectId];
if (!projectDetails) return false;
return projectDetails.inbox_view;
};
getInboxId = (projectId: string) => {
const projectDetails = this.rootStore.project.project_details[projectId];
if (!projectDetails || !projectDetails.inbox_view) return null;
return this.inboxesList[projectId]?.[0]?.id ?? null;
};
setInboxId = (inboxId: string) => {
runInAction(() => {
this.inboxId = inboxId;
});
};
fetchInboxesList = async (workspaceSlug: string, projectId: string) => {
try {
runInAction(() => {
this.loader = true;
});
const inboxesResponse = await this.inboxService.getInboxes(workspaceSlug, projectId);
runInAction(() => {
this.loader = false;
this.inboxesList = {
...this.inboxesList,
[projectId]: inboxesResponse,
};
});
return inboxesResponse;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
fetchInboxDetails = async (workspaceSlug: string, projectId: string, inboxId: string) => {
try {
runInAction(() => {
this.loader = true;
});
const inboxDetailsResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
runInAction(() => {
this.loader = false;
this.inboxDetails = {
...this.inboxDetails,
[inboxId]: inboxDetailsResponse,
};
});
return inboxDetailsResponse;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
}

146
web/store/inbox/inbox_filters.store.ts Normal file
View File

@ -0,0 +1,146 @@
import { observable, action, makeObservable, runInAction, computed } from "mobx";
// types
import { RootStore } from "../root";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInbox, IInboxFilterOptions, IInboxQueryParams } from "types";
export interface IInboxFiltersStore {
// states
loader: boolean;
error: any | null;
// observables
inboxFilters: {
[inboxId: string]: { filters: IInboxFilterOptions };
};
// actions
fetchInboxFilters: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
updateInboxFilters: (
workspaceSlug: string,
projectId: string,
inboxId: string,
filters: Partial<IInboxFilterOptions>
) => Promise<void>;
// computed
appliedFilters: IInboxQueryParams | null;
}
export class InboxFiltersStore implements IInboxFiltersStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
inboxFilters: {
[inboxId: string]: { filters: IInboxFilterOptions };
} = {};
// root store
rootStore;
// services
inboxService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
inboxFilters: observable.ref,
// actions
fetchInboxFilters: action,
updateInboxFilters: action,
// computed
appliedFilters: computed,
});
this.rootStore = _rootStore;
this.inboxService = new InboxService();
}
get appliedFilters(): IInboxQueryParams | null {
const inboxId = this.rootStore.inbox.inboxId;
if (!inboxId) return null;
const filtersList = this.inboxFilters[inboxId]?.filters;
if (!filtersList) return null;
const filteredRouteParams: IInboxQueryParams = {
priority: filtersList.priority ? filtersList.priority.join(",") : null,
inbox_status: filtersList.inbox_status ? filtersList.inbox_status.join(",") : null,
};
return filteredRouteParams;
}
fetchInboxFilters = async (workspaceSlug: string, projectId: string, inboxId: string) => {
try {
runInAction(() => {
this.loader = true;
});
const issuesResponse = await this.inboxService.getInboxById(workspaceSlug, projectId, inboxId);
runInAction(() => {
this.loader = false;
this.inboxFilters = {
...this.inboxFilters,
[inboxId]: issuesResponse.view_props,
};
});
return issuesResponse;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
updateInboxFilters = async (
workspaceSlug: string,
projectId: string,
inboxId: string,
filters: Partial<IInboxFilterOptions>
) => {
const newViewProps = {
...this.inboxFilters[inboxId],
filters: {
...this.inboxFilters[inboxId]?.filters,
...filters,
},
};
try {
runInAction(() => {
this.inboxFilters = {
...this.inboxFilters,
[inboxId]: newViewProps,
};
});
await this.inboxService.patchInbox(workspaceSlug, projectId, inboxId, { view_props: newViewProps });
} catch (error) {
runInAction(() => {
this.error = error;
});
this.fetchInboxFilters(workspaceSlug, projectId, inboxId);
throw error;
}
};
}

280
web/store/inbox/inbox_issue_detail.store.ts Normal file
View File

@ -0,0 +1,280 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInboxIssue, IIssue, TInboxStatus } from "types";
// constants
import { INBOX_ISSUE_SOURCE } from "constants/inbox";
export interface IInboxIssueDetailsStore {
// states
loader: boolean;
error: any | null;
// observables
issueDetails: {
[issueId: string]: IInboxIssue;
};
// actions
fetchIssueDetails: (
workspaceSlug: string,
projectId: string,
inboxId: string,
issueId: string
) => Promise<IInboxIssue>;
createIssue: (
workspaceSlug: string,
projectId: string,
inboxId: string,
data: Partial<IIssue>
) => Promise<IInboxIssue>;
updateIssue: (
workspaceSlug: string,
projectId: string,
inboxId: string,
issueId: string,
data: Partial<IInboxIssue>
) => Promise<void>;
updateIssueStatus: (
workspaceSlug: string,
projectId: string,
inboxId: string,
issueId: string,
data: TInboxStatus
) => Promise<void>;
deleteIssue: (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => Promise<void>;
}
export class InboxIssueDetailsStore implements IInboxIssueDetailsStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
issueDetails: { [issueId: string]: IInboxIssue } = {};
// root store
rootStore;
// services
inboxService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
issueDetails: observable.ref,
// actions
fetchIssueDetails: action,
createIssue: action,
updateIssueStatus: action,
deleteIssue: action,
});
this.rootStore = _rootStore;
this.inboxService = new InboxService();
}
fetchIssueDetails = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
try {
runInAction(() => {
this.loader = true;
});
const issueResponse = await this.inboxService.getInboxIssueById(workspaceSlug, projectId, inboxId, issueId);
runInAction(() => {
this.loader = false;
this.issueDetails = {
...this.issueDetails,
[issueId]: issueResponse,
};
});
return issueResponse;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
createIssue = async (workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IIssue>) => {
const payload = {
issue: {
name: data.name,
description: data.description,
description_html: data.description_html,
priority: data.priority,
},
source: INBOX_ISSUE_SOURCE,
};
try {
const response = await this.inboxService.createInboxIssue(
workspaceSlug,
projectId,
inboxId,
payload,
this.rootStore.user.currentUser ?? undefined
);
runInAction(() => {
this.issueDetails = {
...this.issueDetails,
[response.id]: response,
};
this.rootStore.inboxIssues.inboxIssues = {
...this.rootStore.inboxIssues.inboxIssues,
[inboxId]: [response, ...this.rootStore.inboxIssues.inboxIssues[inboxId]],
};
});
return response;
} catch (error) {
runInAction(() => {
this.error = error;
});
throw error;
}
};
updateIssue = async (
workspaceSlug: string,
projectId: string,
inboxId: string,
issueId: string,
data: Partial<IInboxIssue>
) => {
const updatedIssue = { ...this.issueDetails[issueId], ...data };
try {
runInAction(() => {
this.issueDetails = {
...this.issueDetails,
[issueId]: updatedIssue,
};
this.rootStore.inboxIssues.inboxIssues = {
...this.rootStore.inboxIssues.inboxIssues,
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
if (issue.issue_inbox[0].id === issueId) return updatedIssue;
return issue;
}),
};
});
await this.inboxService.patchInboxIssue(
workspaceSlug,
projectId,
inboxId,
issueId,
{ issue: data },
this.rootStore.user.currentUser ?? undefined
);
} catch (error) {
runInAction(() => {
this.error = error;
});
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
throw error;
}
};
updateIssueStatus = async (
workspaceSlug: string,
projectId: string,
inboxId: string,
issueId: string,
data: TInboxStatus
) => {
const updatedIssue = { ...this.issueDetails[issueId] };
updatedIssue.issue_inbox[0] = {
...updatedIssue.issue_inbox[0],
...data,
};
try {
runInAction(() => {
this.issueDetails = {
...this.issueDetails,
[issueId]: updatedIssue,
};
this.rootStore.inboxIssues.inboxIssues = {
...this.rootStore.inboxIssues.inboxIssues,
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId].map((issue) => {
if (issue.issue_inbox[0].id === issueId) return updatedIssue as IInboxIssue;
return issue;
}),
};
});
await this.inboxService.markInboxStatus(
workspaceSlug,
projectId,
inboxId,
issueId,
data,
this.rootStore.user.currentUser ?? undefined
);
} catch (error) {
runInAction(() => {
this.error = error;
});
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
throw error;
}
};
deleteIssue = async (workspaceSlug: string, projectId: string, inboxId: string, issueId: string) => {
const updatedIssues = { ...this.issueDetails };
delete updatedIssues[issueId];
try {
runInAction(() => {
this.issueDetails = updatedIssues;
this.rootStore.inboxIssues.inboxIssues = {
...this.rootStore.inboxIssues.inboxIssues,
[inboxId]: this.rootStore.inboxIssues.inboxIssues[inboxId]?.filter(
(issue) => issue.issue_inbox[0].id !== issueId
),
};
});
await this.inboxService.deleteInboxIssue(
workspaceSlug,
projectId,
inboxId,
issueId,
this.rootStore.user.currentUser ?? undefined
);
} catch (error) {
runInAction(() => {
this.error = error;
});
this.rootStore.inboxIssues.fetchInboxIssues(workspaceSlug, projectId, inboxId);
this.fetchIssueDetails(workspaceSlug, projectId, inboxId, issueId);
throw error;
}
};
}

84
web/store/inbox/inbox_issues.store.ts Normal file
View File

@ -0,0 +1,84 @@
import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
// services
import { InboxService } from "services/inbox.service";
// types
import { IInboxIssue } from "types";
export interface IInboxIssuesStore {
// states
loader: boolean;
error: any | null;
// observables
inboxIssues: {
[inboxId: string]: IInboxIssue[];
};
// actions
fetchInboxIssues: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInboxIssue[]>;
}
export class InboxIssuesStore implements IInboxIssuesStore {
// states
loader: boolean = false;
error: any | null = null;
// observables
inboxIssues: {
[inboxId: string]: IInboxIssue[];
} = {};
// root store
rootStore;
// services
inboxService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// states
loader: observable.ref,
error: observable.ref,
// observables
inboxIssues: observable.ref,
// actions
fetchInboxIssues: action,
});
this.rootStore = _rootStore;
this.inboxService = new InboxService();
}
fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {
try {
runInAction(() => {
this.loader = true;
});
const queryParams = this.rootStore.inboxFilters.appliedFilters ?? undefined;
const issuesResponse = await this.inboxService.getInboxIssues(workspaceSlug, projectId, inboxId, queryParams);
runInAction(() => {
this.loader = false;
this.inboxIssues = {
...this.inboxIssues,
[inboxId]: issuesResponse,
};
});
return issuesResponse;
} catch (error) {
runInAction(() => {
this.loader = false;
this.error = error;
});
throw error;
}
};
}

4
web/store/inbox/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from "./inbox_filters.store";
export * from "./inbox_issue_detail.store";
export * from "./inbox_issues.store";
export * from "./inbox.store";

20
web/store/root.ts
View File

@ -53,6 +53,16 @@ import {
IGlobalViewIssuesStore, IGlobalViewIssuesStore,
IGlobalViewsStore, IGlobalViewsStore,
} from "store/global-view"; } from "store/global-view";
import {
IInboxFiltersStore,
IInboxIssueDetailsStore,
IInboxIssuesStore,
IInboxStore,
InboxFiltersStore,
InboxIssueDetailsStore,
InboxIssuesStore,
InboxStore,
} from "store/inbox";
enableStaticRendering(typeof window === "undefined"); enableStaticRendering(typeof window === "undefined");
@ -92,6 +102,11 @@ export class RootStore {
globalViewIssues: IGlobalViewIssuesStore; globalViewIssues: IGlobalViewIssuesStore;
globalViewFilters: IGlobalViewFiltersStore; globalViewFilters: IGlobalViewFiltersStore;
inbox: IInboxStore;
inboxIssues: IInboxIssuesStore;
inboxIssueDetails: IInboxIssueDetailsStore;
inboxFilters: IInboxFiltersStore;
constructor() { constructor() {
this.user = new UserStore(this); this.user = new UserStore(this);
this.theme = new ThemeStore(this); this.theme = new ThemeStore(this);
@ -127,5 +142,10 @@ export class RootStore {
this.globalViews = new GlobalViewsStore(this); this.globalViews = new GlobalViewsStore(this);
this.globalViewIssues = new GlobalViewIssuesStore(this); this.globalViewIssues = new GlobalViewIssuesStore(this);
this.globalViewFilters = new GlobalViewFiltersStore(this); this.globalViewFilters = new GlobalViewFiltersStore(this);
this.inbox = new InboxStore(this);
this.inboxIssues = new InboxIssuesStore(this);
this.inboxIssueDetails = new InboxIssueDetailsStore(this);
this.inboxFilters = new InboxFiltersStore(this);
} }
} }

36
web/types/inbox.d.ts vendored
View File

@ -1,23 +1,7 @@
import { IIssue, IIssueFilterOptions, IIssueLabels } from "./issues"; import { IIssue } from "./issues";
import type { IProjectLite } from "./projects"; import type { IProjectLite } from "./projects";
import { IState } from "./state";
import { IUserLite } from "./users";
export interface IInboxIssue extends Partial<IIssue> { export interface IInboxIssue extends IIssue {
bridge_id: string;
issue_inbox: {
duplicate_to: string | null;
snoozed_till: Date | null;
source: string;
status: -2 | -1 | 0 | 1 | 2;
}[];
}
export interface IInboxIssueDetail extends IIssue {
id: string;
project_detail: IProjectLite;
created_at: string;
updated_at: string;
issue_inbox: { issue_inbox: {
duplicate_to: string | null; duplicate_to: string | null;
id: string; id: string;
@ -25,11 +9,8 @@ export interface IInboxIssueDetail extends IIssue {
source: string; source: string;
status: -2 | -1 | 0 | 1 | 2; status: -2 | -1 | 0 | 1 | 2;
}[]; }[];
created_by: string;
updated_by: string;
project: string;
workspace: string;
} }
export interface IInbox { export interface IInbox {
id: string; id: string;
project_detail: IProjectLite; project_detail: IProjectLite;
@ -67,16 +48,11 @@ interface StatusDuplicate {
duplicate_to: string; duplicate_to: string;
} }
export type TInboxStatus = export type TInboxStatus = StatusReject | StatusSnoozed | StatusAccepted | StatusDuplicate | StatePending;
| StatusReject
| StatusSnoozed
| StatusAccepted
| StatusDuplicate
| StatePending;
export interface IInboxFilterOptions { export interface IInboxFilterOptions {
priority: string[] | null; priority?: string[] | null;
inbox_status: number[] | null; inbox_status?: number[] | null;
} }
export interface IInboxQueryParams { export interface IInboxQueryParams {