binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: app dir migration (#4743)

Browse source 
* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* fix: adding profile settings layout

* fix: errors on app dir.

* chore: remove pages routes.

* chore: add sign-in/ sign-up, invitations, onboarding pages.

* [WEB-1374] fix: clear changes made on modal close (#4555)

* [WEB-1480] fix: preserve page access when making a copy (#4568)

* [WEB-1465] fix: theme fluctuation on initial load. (#4638)

* [WEB-1445] fix: issue creation on sub groups when cycle/ module grouping is applied. (#4636)

* [WEB-1244] fix: add better image insertion and replacement logic in the editor (#4508)

* fix: add better image insertion and replacement logic

* refactor: image handling in editor

* chore: remove passing uploadKey around

* refactor: remove unused code

* fix: redundant files removed

* fix: add is editor ready to discard api to control behvaiours from our app

* fix: focus issues and image insertion position when not using slash command

* fix: import order fixed

* fix: notification mark all as read (#4643)

* chore: remove enter key extension (#4648)

* [WEB-1467] chore: run the API's required to bootstrap the application in parallel. (#4642)

* [WEB - 1482] fix: uploads when using block storages other than s3 and minio (#4647)

* fix: minio storage and redirection

* dev: disconnect web url and app base url configuration.

* fix: negate check while trying to discard (#4653)

* fix: email notification preferences (#4656)

* [WEB-1493] chore: product tour asset and app sidebar quick action hover (#4655)

* chore: product tour asset updated

* fix: app sidebar quick action hover

* fix: project state setting state name remove camel case logic (#4652)

* [WEB-1419] chore: enable module creation with dates older than today. (#4659)

* [WEB-1216] chore: increase module empty state for consistency. (#4658)

* fix: build errors

* [WEB-1235] chore: module and cycle sidebar graph improvement (#4650)

* chore: module and cycle sidebar graph improvement

* chore: code refactor

* [WEB-1424] chore: page and view logo implementation, and emoji/icon (#4662)

* [WEB-1424] chore: page and view logo implementation, and emoji/icon picker improvement (#4583)

* chore: added logo_props

* chore: logo props in cycles, views and modules

* chore: emoji icon picker types updated

* chore: info icon added to plane ui package

* chore: icon color adjust helper function added

* style: icon picker ui improvement and default color options updated

* chore: update page logo action added in store

* chore: emoji code to unicode helper function added

* chore: common logo renderer component added

* chore: app header project logo updated

* chore: project logo updated across platform

* chore: page logo picker added

* chore: control link component improvement

* chore: list item improvement

* chore: emoji picker component updated

* chore: space app and package logo prop type updated

* chore: migration

* chore: logo added to project view

* chore: page logo picker added in create modal and breadcrumbs

* chore: view logo picker added in create modal and updated breadcrumbs

* fix: build error

* chore: AIO docker images for preview deployments (#4605)

* fix: adding single docker base file

* action added

* fix action

* dockerfile.base modified

* action fix

* dockerfile

* fix: base aio dockerfile

* fix: dockerfile.base

* fix: dockerfile base

* fix: modified folder structure

* fix: action

* fix: dockerfile

* fix: dockerfile.base

* fix: supervisor file name changed

* fix: base dockerfile updated

* fix dockerfile base

* fix: base dockerfile

* fix: docker files

* fix: base dockerfile

* update base image

* modified docker aio base

* aio base modified to debian-12-slim

* fixes

* finalize the dockerfiles with volume exposure

* modified the aio build and dockerfile

* fix: codacy suggestions implemented

* fix: codacy fix

* update aio build action

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* fix: merge conflict

* chore: lucide react added to planu ui package

* chore: new emoji picker component added with lucid icon and code refactor

* chore: logo component updated

* chore: emoji picker updated for pages and views

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

* fix: build error

---------

Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>

* refactor: drag handle component (#4663)

* refactor: checkbox ui component (#4665)

* [WEB-1325] chore: refactor inbox issue store to avoid data loss. (#4640)

* [WEB-1325] chore: refactor inbox issue store to avoid data loss.

* chore: inbox store improvement.

* chore: priority dropdown accepts undefined (#4666)

* chore: added buttonClassName prop to label dropdown (#4671)

* chore: created new constants for marketing website page links (#4670)

* chore: added a prop to render default state conditionally (#4669)

* [WEB-1501] dev: multiple select core components (#4667)

* dev: multiple select core components

* chore: added export statement

* chore: created a new constant for archivable state groups (#4668)

* chore: added primary variant to the alert modal (#4664)

* [WEB-1436] chore: pages improvement. (#4657)

* add empty state if no pages are available.
* set access to private in create page modal when the modal is open form private tab.

* [WEB-1440] chore: update cycle empty state to use project level access. (#4672)

* fix: checkbox ui component (#4675)

* fix: ai buttons overlapping issue (#4621)

* [WEB - 1500] chore: add extra fields on instance and create changelog table to store release change logs (#4673)

* chore: add extra fields on instance and create changelog table to store release change logs

* dev: rename new_version to latest_version

* [WEB - 1505] chore: alter instance id field (#4676)

* chore: instance id

* dev: update to max length

* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* feat: creating new app dir structure for web app

* fix: moving few pages to app dir

* fix: errors on app dir.

* chore: remove pages routes.

* chore: add sign-in/ sign-up, invitations, onboarding pages.

* fix: instance serializer

* fix: instance register script  (#4681)

* fix: instance register script

* dev: remove api key and add latest version and current version in types

* [WEB-1492] fix: resolved issue creation error in layouts while group_by and sub_group_by filters applied in quick add (#4682)

* fix: resolved issue creation error in layouts while group_by and sub_group_by filters applied in quick add

* fix: updated braces in conditions

* fix: inbox issue store update logic. (#4683)

* chore: update package version

* [WEB-1184] feat: issue bulk operations (#4674)

* feat: issue bulk operations

* style: bulk operations action bar

* chore: remove edition separation

* style: fix overlapping of response container in AI popover. (#4684)

* [WEB-1498] style: fix comments reaction alignment. (#4686)

* [WEB-1503] chore: add `autofocus` to name field in inline create/ update state component. (#4685)

* [WEB-1312] fix: trim file name before uploading (#4661)

* fix: trim file name before uploading

* fix: check the cursor position before inserting image

* dev: add trimming for file assets

* dev: add filename validation above if

* dev: make the validation to 50 to support user uploads

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>

* [WEB-1481] fix: multiple API calls in inbox issues on closed issues tab. (#4691)

* fix: multiple API calls on scroll and closed issues tab.

* fix: pagination loader on initial load.

* feat: Add components required for estimates (#4690)

* Add sortable, radio and typography components

* Remove stray css classes

* Prevent drag of items from other draggable

* Minor cleanup

* Update yarn.lock

* Remove radio input component as it was build on
headless ui v2.0.0 and now we are using v1.7.0

* Fix build errors

* Update dependencies in use memo.

* [WEB-1521] chore: add configuration to enable/disable sign-ups. (#4697)

* fix: regenerating lock file

* fix: docker image build errors

* fix: remove `setupInterceptors` to avoid circular dependency.

* chore: migrate all `accounts` related routes.

* chore: migrate all `profiles` related routes.

* chore: workspace invitation and onboarding migration / fixes.

* chore: installation provider migrations.

* regression: focus changing issue with the peek overview editor (#4700)

* [WEB-1459] chore: save users all / favorite project list collapse state into localstorage. (#4701)

* [WEB-1501] chore: update selected entity details on entities list change (#4702)

* chore: update selected entity detials on entities list change

* chore: addd selectionHelpers as a prop

* [WEB-1517] chore: remove drag handle from list drag block (#4698)

* remove drag handle from list drag block

* align list group header with list item

* rearrange chevron for list subissues and rearrange spaces

* adding default draggable property to control link

* remove unnecessary dependencies for useEffect

* fix: email validation  (#4707)

* fix: email validation on complete login or sign up functionality

* dev: add try catch block

* dev: split up code

* dev: empty return

* fix: cache invalidation on new members invite (#4699)

* fix: build test pull request running on non draft PRs (#4708)

* fix: cache invalidation on new members invite (#4699)

* fix: add version max length (#4713)

* chore: migrations for `routing` hooks.

* [WEB-1533] chore: fix alignment issues in List and Spreadsheet view (#4714)

* fix alignment issues in List and Spreadsheet view

* fix spreadsheet indentation

* chore: migration for workspace dashboard/ views/ analytics/ settings and active-cycles.

* chore: handle undefined identifier case

* fix: Overflowing loader in issue edit modal (#4720)

* [WEB-1529] chore: workspace sidebar updates. (#4710)

* fix: temporary fix exiting lines with slashes (#4725)

* [WEB-1537] fix: inline code block size fixed for headers, etc (#4709)

* fix: inline code block size fixed for headers, etc

* feat: persisting focus accurately post converting the code block into text

* fix: typo in error handling

* [WEB-1526] feat: add auto merge behaviour to task lists and fix infinite backspace case (#4703)

* feat: add auto merge behaviour to task lists

* fix: unhandled cases for taskItem and taskList

* fix: css task list such that toggling task list doesn't shift things

* fix: task list jumps around while trying create/delete things in between two task lists

* fix: remove filtering for generic transactions i.e. transactions with some meta data while tying to join things

* chore: migration for profile activity along with headers refactor.

* [WEB-1201] dev: dropdowns (#4721)

* chore: lodash package added

* chore: dropdown key down hook added

* dev: dropdown component

* chore: build error and code refactor

* chore: readme file updated

* chore: added disabled prop to multiple select components (#4724)

* chore: added disabled prop to mutliple select group hoc

* style: fix empty space

* fix: don't add  as a sub-issue if parent has been removed (#4731)

* fix: member list item custom menu placement (#4729)

* [WEB-1535] chore: project logo picker improvement (#4718)

* chore: emoji icon picker improvement

* chore: emoji icon picker improvement

* fix: resolved border flicker on issue title (#4727)

* chore: profile activity empty state added (#4732)

* [WEB-1481] fix: inbox issue list update after changing issue status. (#4715)

* style: fix ux copy style on project feature preview page. (#4734)

* chore: remove clear seleciton logic on escape key press (#4735)

* chore: migrations for projects and project issues.

* chore: issue and properties filter dropdown improvement (#4733)

* save all filters and properties for views (#4728)

* chore: migrations for issue details route.

* chore: migration for cycle routes.

* chore: migration for module routes.

* chore: migrations for project views routes.

* chore: migrations for project pages routes.

* chore: migration for project inbox routes.

* chore: migration for project settings routes.

* chore: migrations for draft issues routes.

* chore: migrations for project archives routes.

* chore: remove unused headers.

* temp: comment out auth constant and use-reload-confirmation code to avoid errors.

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Co-authored-by: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com>
Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Co-authored-by: guru_sainath <gurusainath007@gmail.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
sriram veeraghanta 2024-06-10 12:37:38 +05:30 • committed by GitHub
parent 59fdd611e4
commit 5d807db69e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
417 changed files with 5196 additions and 3918 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/components/issues/archived-issues-header.tsx
View file

@ -1,6 +1,6 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// types
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
// components
@ -15,8 +15,7 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/h
export const ArchivedIssuesHeader: FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// store hooks
const { currentProjectDetails } = useProject();
const {

200
web/components/issues/bulk-operations/properties.tsx Normal file
View file

@ -0,0 +1,200 @@
import { useState } from "react";
import { useParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { CalendarCheck2, CalendarClock } from "lucide-react";
// types
import { TBulkIssueProperties } from "@plane/types";
// ui
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { DateDropdown, MemberDropdown, PriorityDropdown, StateDropdown } from "@/components/dropdowns";
import { IssueLabelSelect } from "@/components/issues/select";
import { CreateLabelModal } from "@/components/labels";
// constants
import { EErrorCodes, ERROR_DETAILS } from "@/constants/errors";
import { EIssuesStoreType } from "@/constants/issue";
// helpers
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
// hooks
import { useIssues } from "@/hooks/store";
import { TSelectionHelper, TSelectionSnapshot } from "@/hooks/use-multiple-select";
type Props = {
selectionHelpers: TSelectionHelper;
snapshot: TSelectionSnapshot;
};
const defaultValues: TBulkIssueProperties = {
state_id: "",
// @ts-expect-error priority should not be undefined, but it should be, in this case
priority: undefined,
assignee_ids: [],
start_date: null,
target_date: null,
label_ids: [],
};
export const IssueBulkOperationsProperties: React.FC<Props> = (props) => {
const { snapshot } = props;
// states
const [createLabelModal, setCreateLabelModal] = useState(false);
// router
const { workspaceSlug, projectId } = useParams();
// store hooks
const {
issues: { bulkUpdateProperties },
} = useIssues(EIssuesStoreType.PROJECT);
// form info
const {
control,
formState: { dirtyFields, isDirty, isSubmitting },
handleSubmit,
reset,
watch,
} = useForm<TBulkIssueProperties>({
defaultValues,
});
const handleBulkOperations = async (data: TBulkIssueProperties) => {
if (!workspaceSlug || !projectId) return;
const payload: Partial<TBulkIssueProperties> = {};
Object.keys(dirtyFields).forEach((key) => {
const payloadKey = key as keyof typeof dirtyFields;
// @ts-expect-error values might not match
payload[payloadKey] = data[payloadKey];
});
await bulkUpdateProperties(workspaceSlug.toString(), projectId.toString(), {
issue_ids: snapshot.selectedEntityIds,
properties: payload,
})
.then(() => {
reset(defaultValues);
})
.catch((error) => {
const errorInfo = ERROR_DETAILS[error?.error_code as EErrorCodes] ?? undefined;
setToast({
type: TOAST_TYPE.ERROR,
title: errorInfo?.title ?? "Error!",
message: errorInfo?.message ?? "Something went wrong. Please try again.",
});
});
};
const isUpdateDisabled = !snapshot.isSelectionActive;
const startDate = watch("start_date");
const targetDate = watch("target_date");
const minDate = getDate(startDate);
minDate?.setDate(minDate.getDate());
const maxDate = getDate(targetDate);
maxDate?.setDate(maxDate.getDate());
return (
<form onSubmit={handleSubmit(handleBulkOperations)} className="size-full flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<Controller
name="state_id"
control={control}
render={({ field: { onChange, value } }) => (
<StateDropdown
value={value}
onChange={onChange}
projectId={projectId?.toString() ?? ""}
buttonVariant="border-with-text"
disabled={isUpdateDisabled}
/>
)}
/>
<Controller
name="priority"
control={control}
render={({ field: { onChange, value } }) => (
<PriorityDropdown
value={value}
onChange={onChange}
buttonVariant="border-with-text"
buttonClassName="!text-custom-text-300"
disabled={isUpdateDisabled}
/>
)}
/>
<Controller
name="assignee_ids"
control={control}
render={({ field: { onChange, value } }) => (
<MemberDropdown
value={value}
onChange={onChange}
buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
placeholder="Assignees"
multiple
disabled={isUpdateDisabled}
/>
)}
/>
<Controller
name="start_date"
control={control}
render={({ field: { onChange, value } }) => (
<DateDropdown
value={value}
onChange={(val) => onChange(val ? renderFormattedPayloadDate(val) : null)}
buttonVariant="border-with-text"
placeholder="Start date"
icon={<CalendarClock className="size-3 flex-shrink-0" />}
disabled={isUpdateDisabled}
maxDate={maxDate ?? undefined}
/>
)}
/>
<Controller
name="target_date"
control={control}
render={({ field: { onChange, value } }) => (
<DateDropdown
value={value}
onChange={(val) => onChange(val ? renderFormattedPayloadDate(val) : null)}
buttonVariant="border-with-text"
placeholder="Due date"
icon={<CalendarCheck2 className="size-3 flex-shrink-0" />}
disabled={isUpdateDisabled}
minDate={minDate ?? undefined}
/>
)}
/>
{projectId && (
<Controller
name="label_ids"
control={control}
render={({ field: { onChange, value } }) => (
<>
<CreateLabelModal
isOpen={createLabelModal}
handleClose={() => setCreateLabelModal(false)}
projectId={projectId.toString()}
onSuccess={(res) => onChange([...value, res.id])}
/>
<IssueLabelSelect
value={value}
projectId={projectId.toString()}
onChange={onChange}
setIsOpen={() => setCreateLabelModal(true)}
buttonClassName="text-custom-text-300"
/>
</>
)}
/>
)}
</div>
{isDirty && (
<Button type="submit" variant="primary" size="sm" className="py-1" loading={isSubmitting}>
{isSubmitting ? "Updating" : "Update"}
</Button>
)}
</form>
);
};

37
web/components/issues/issue-detail/root.tsx
View file

@ -1,6 +1,6 @@
import { FC, useMemo } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { usePathname, useRouter } from "next/navigation";
// types
import { TIssue } from "@plane/types";
// ui
@ -56,6 +56,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
const { workspaceSlug, projectId, issueId, swrIssueDetails, is_archived = false } = props;
// router
const router = useRouter();
const pathname = usePathname();
// hooks
const {
issue: { getIssueById },
@ -98,7 +99,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: Object.keys(data).join(","),
change_details: Object.values(data).join(","),
},
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
@ -108,7 +109,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: Object.keys(data).join(","),
change_details: Object.values(data).join(","),
},
path: router.asPath,
path: pathname,
});
setToast({
title: "Error!",
@ -129,7 +130,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_DELETED,
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -140,7 +141,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_DELETED,
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
path: router.asPath,
path: pathname,
});
}
},
@ -150,13 +151,13 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_ARCHIVED,
payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
eventName: ISSUE_ARCHIVED,
payload: { id: issueId, state: "FAILED", element: "Issue details page" },
path: router.asPath,
path: pathname,
});
}
},
@ -170,7 +171,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -185,7 +186,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
}
},
@ -199,7 +200,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -214,7 +215,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
}
},
@ -240,7 +241,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
@ -250,7 +251,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "cycle_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
}
},
@ -264,7 +265,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "module_id",
change_details: moduleIds,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -279,7 +280,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "module_id",
change_details: moduleIds,
},
path: router.asPath,
path: pathname,
});
}
},
@ -305,7 +306,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "module_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
@ -315,7 +316,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
changed_property: "module_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
}
},
@ -353,7 +354,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
removeIssueFromModule,
removeModulesFromIssue,
captureIssueEvent,
router.asPath,
pathname,
]
);

2
web/components/issues/issue-detail/sidebar.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useRouter } from "next/navigation";
import {
CalendarCheck2,
CalendarClock,

5
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View file

@ -1,6 +1,6 @@
import { FC } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { TGroupedIssues } from "@plane/types";
// components
import { TOAST_TYPE, setToast } from "@plane/ui";
@ -33,8 +33,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
const { QuickActions, storeType, addIssuesToView, viewId, isCompletedCycle = false } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// hooks
const {

5
web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
View file

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
import { Popover, Transition } from "@headlessui/react";
@ -38,8 +38,7 @@ interface ICalendarHeader {
export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((props) => {
const { issuesFilterStore, updateFilters } = props;
const router = useRouter();
const { projectId } = router.query;
const { projectId } = useParams();
const issueCalendarView = useCalendarView();
const [windowWidth] = useSize();

10
web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { differenceInCalendarDays } from "date-fns";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
// types
@ -67,8 +67,8 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
const { formKey, prePopulatedData, quickAddCallback, addIssuesToView, viewId, onOpen } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
const pathname = usePathname();
// store hooks
const { getProjectById } = useProject();
const { captureIssueEvent } = useEventTracker();
@ -156,14 +156,14 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
path: router.asPath,
path: pathname,
});
})
.catch(() => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
path: router.asPath,
path: pathname,
});
});
}

5
web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
View file

@ -1,6 +1,6 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
//hooks
import { CycleIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -12,8 +12,7 @@ import { BaseCalendarRoot } from "../base-calendar-root";
export const CycleCalendarLayout: React.FC = observer(() => {
const { currentProjectCompletedCycleIds } = useCycle();
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = useParams();
const { issues } = useIssues(EIssuesStoreType.CYCLE);

5
web/components/issues/issue-layouts/calendar/roots/module-root.tsx
View file

@ -1,6 +1,6 @@
import { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
// components
import { ModuleIssueQuickActions } from "@/components/issues";
@ -11,8 +11,7 @@ import { useIssues } from "@/hooks/store";
import { BaseCalendarRoot } from "../base-calendar-root";
export const ModuleCalendarLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
const { issues } = useIssues(EIssuesStoreType.MODULE);

5
web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { ProjectIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -10,8 +10,7 @@ import { BaseCalendarRoot } from "../base-calendar-root";
export const ProjectViewCalendarLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { viewId } = router.query;
const { viewId } = useParams();
return (
<BaseCalendarRoot

5
web/components/issues/issue-layouts/empty-states/archived-issues.tsx
View file

@ -1,6 +1,6 @@
import size from "lodash/size";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
// components
@ -13,8 +13,7 @@ import { useIssues } from "@/hooks/store";
export const ProjectArchivedEmptyState: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// theme
// store hooks
const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);

5
web/components/issues/issue-layouts/empty-states/draft-issues.tsx
View file

@ -1,6 +1,6 @@
import size from "lodash/size";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
// components
@ -13,8 +13,7 @@ import { useIssues } from "@/hooks/store";
export const ProjectDraftEmptyState: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// store hooks
const { issuesFilter } = useIssues(EIssuesStoreType.DRAFT);

5
web/components/issues/issue-layouts/empty-states/project-issues.tsx
View file

@ -1,6 +1,6 @@
import size from "lodash/size";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// types
import { IIssueFilterOptions } from "@plane/types";
// components
@ -13,8 +13,7 @@ import { useCommandPalette, useEventTracker, useIssues } from "@/hooks/store";
export const ProjectEmptyState: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// store hooks
const { toggleCreateIssueModal } = useCommandPalette();
const { setTrackElement } = useEventTracker();

5
web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { AppliedFiltersList } from "@/components/issues";
@ -10,8 +10,7 @@ import { useIssues, useLabel, useProjectState } from "@/hooks/store";
export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
// store hooks
const {

5
web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
@ -10,8 +10,7 @@ import { useIssues, useLabel, useProjectState } from "@/hooks/store";
export const CycleAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = useParams();
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },

5
web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { AppliedFiltersList } from "@/components/issues";
@ -10,8 +10,7 @@ import { useIssues, useLabel, useProjectState } from "@/hooks/store";
export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },

5
web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
View file

@ -1,7 +1,7 @@
import isEmpty from "lodash/isEmpty";
import isEqual from "lodash/isEqual";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
// hooks
//ui
@ -22,8 +22,7 @@ type Props = {
export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
const { globalViewId } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
// store hooks
const {
issuesFilter: { filters, updateFilters },

5
web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
@ -10,8 +10,7 @@ import { useIssues, useLabel, useProjectState } from "@/hooks/store";
export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },

5
web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
// components
@ -11,8 +11,7 @@ import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-propert
export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, userId } = router.query;
const { workspaceSlug, userId } = useParams();
//swr hook for fetching issue properties
useWorkspaceIssueProperties(workspaceSlug);
// store hooks

5
web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
// components
@ -13,8 +13,7 @@ import { useIssues } from "@/hooks/store/use-issues";
export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query as {
const { workspaceSlug, projectId } = useParams() as {
workspaceSlug: string;
projectId: string;
};

5
web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
View file

@ -1,6 +1,6 @@
import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueFilterOptions } from "@plane/types";
// hooks
import { Button } from "@plane/ui";
@ -14,8 +14,7 @@ import { getAreFiltersEqual } from "../../../utils";
export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
const { workspaceSlug, projectId, viewId } = useParams();
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },

5
web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { TIssue, TUnGroupedIssues } from "@plane/types";
// hooks
import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "@/components/gantt-chart";
@ -28,8 +28,7 @@ interface IBaseGanttRoot {
export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
const { viewId, storeType } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
const { issues, issuesFilter } = useIssues(storeType);
const { updateIssue } = useIssuesActions(storeType);

5
web/components/issues/issue-layouts/gantt/cycle-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
// components
@ -7,8 +7,7 @@ import { BaseGanttRoot } from "./base-gantt-root";
export const CycleGanttLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { cycleId } = router.query;
const { cycleId } = useParams();
return <BaseGanttRoot viewId={cycleId?.toString()} storeType={EIssuesStoreType.CYCLE} />;
});

5
web/components/issues/issue-layouts/gantt/module-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
// components
@ -7,8 +7,7 @@ import { BaseGanttRoot } from "./base-gantt-root";
export const ModuleGanttLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { moduleId } = router.query;
const { moduleId } = useParams();
return <BaseGanttRoot viewId={moduleId?.toString()} storeType={EIssuesStoreType.MODULE} />;
});

5
web/components/issues/issue-layouts/gantt/project-view-root.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
// components
@ -9,8 +9,7 @@ import { BaseGanttRoot } from "./base-gantt-root";
export const ProjectViewGanttLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { viewId } = router.query;
const { viewId } = useParams();
return <BaseGanttRoot viewId={viewId?.toString()} storeType={EIssuesStoreType.PROJECT_VIEW} />;
});

10
web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState, useRef, FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
import { IProject, TIssue } from "@plane/types";
@ -66,8 +66,8 @@ const defaultValues: Partial<TIssue> = {
export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observer((props) => {
const { prePopulatedData, quickAddCallback, viewId } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
// hooks
const { getProjectById } = useProject();
const { captureIssueEvent } = useEventTracker();
@ -129,14 +129,14 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
path: router.asPath,
path: pathname,
});
})
.catch(() => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
path: router.asPath,
path: pathname,
});
});
}

8
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file

@ -3,7 +3,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { Spinner } from "@plane/ui";
import { DeleteIssueModal } from "@/components/issues";
import { ISSUE_DELETED } from "@/constants/event-tracker";
@ -50,8 +50,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
isCompletedCycle = false,
} = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
// store hooks
const {
membership: { currentProjectRole },
@ -176,7 +176,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
captureIssueEvent({
eventName: ISSUE_DELETED,
payload: { id: draggedIssueId, state: "FAILED", element: "Kanban layout drag & drop" },
path: router.asPath,
path: pathname,
});
});
};

8
web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View file

@ -1,6 +1,6 @@
import React, { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
// lucide icons
import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
import { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
@ -51,10 +51,10 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
// hooks
const { setTrackElement } = useEventTracker();
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
const { workspaceSlug, projectId, moduleId, cycleId } = useParams();
const pathname = usePathname();
const isDraftIssue = router.pathname.includes("draft-issue");
const isDraftIssue = pathname.includes("draft-issue");
const renderExistingIssueModal = moduleId || cycleId;
const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };

10
web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState, useRef } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
import { TIssue } from "@plane/types";
@ -59,8 +59,8 @@ const defaultValues: Partial<TIssue> = {
export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = observer((props) => {
const { formKey, prePopulatedData, quickAddCallback, viewId } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
// store hooks
const { getProjectById } = useProject();
const { captureIssueEvent } = useEventTracker();
@ -123,14 +123,14 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
path: router.asPath,
path: pathname,
});
})
.catch(() => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
path: router.asPath,
path: pathname,
});
});
}

5
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// components
import { CycleIssueQuickActions } from "@/components/issues";
// constants
@ -14,8 +14,7 @@ import { BaseKanBanRoot } from "../base-kanban-root";
export interface ICycleKanBanLayout {}
export const CycleKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = useParams();
// store
const { issues } = useIssues(EIssuesStoreType.CYCLE);

5
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hook
import { ModuleIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -13,8 +13,7 @@ import { BaseKanBanRoot } from "../base-kanban-root";
export interface IModuleKanBanLayout {}
export const ModuleKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
// store
const { issues } = useIssues(EIssuesStoreType.MODULE);

5
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { EIssuesStoreType } from "@/constants/issue";
// constant
@ -11,8 +11,7 @@ import { BaseKanBanRoot } from "../base-kanban-root";
export const ProjectViewKanBanLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { viewId } = router.query;
const { viewId } = useParams();
return (
<BaseKanBanRoot

8
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { CircleDashed, Plus } from "lucide-react";
// types
import { TIssue, ISearchIssueResponse } from "@plane/types";
@ -47,12 +47,12 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
const [isOpen, setIsOpen] = useState(false);
const [openExistingIssueListModal, setOpenExistingIssueListModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
const { workspaceSlug, projectId, moduleId, cycleId } = useParams();
const pathname = usePathname();
// hooks
const { setTrackElement } = useEventTracker();
// derived values
const isDraftIssue = router.pathname.includes("draft-issue");
const isDraftIssue = pathname.includes("draft-issue");
const renderExistingIssueModal = moduleId || cycleId;
const existingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(groupID) === "empty";

10
web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
View file

@ -1,6 +1,6 @@
import { FC, useEffect, useState, useRef } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
import { TIssue, IProject } from "@plane/types";
@ -63,8 +63,8 @@ const defaultValues: Partial<TIssue> = {
export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props) => {
const { prePopulatedData, quickAddCallback, viewId } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
const pathname = usePathname();
// hooks
const { getProjectById } = useProject();
const { captureIssueEvent } = useEventTracker();
@ -120,14 +120,14 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...res, state: "SUCCESS", element: "List quick add" },
path: router.asPath,
path: pathname,
});
})
.catch(() => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED", element: "List quick add" },
path: router.asPath,
path: pathname,
});
});
}

5
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// components
import { CycleIssueQuickActions } from "@/components/issues";
// constants
@ -14,8 +14,7 @@ import { BaseListRoot } from "../base-list-root";
export interface ICycleListLayout {}
export const CycleListLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = useParams();
// store
const { issues } = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCompletedCycleIds } = useCycle(); // mobx store

5
web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx
View file

@ -1,6 +1,6 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { DraftIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -10,8 +10,7 @@ import { EIssuesStoreType } from "@/constants/issue";
import { BaseListRoot } from "../base-list-root";
export const DraftIssueListLayout: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
if (!workspaceSlug || !projectId) return null;

5
web/components/issues/issue-layouts/list/roots/module-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// mobx store
import { ModuleIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -13,8 +13,7 @@ import { BaseListRoot } from "../base-list-root";
export interface IModuleListLayout {}
export const ModuleListLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
const { issues } = useIssues(EIssuesStoreType.MODULE);

5
web/components/issues/issue-layouts/list/roots/project-root.tsx
View file

@ -1,6 +1,6 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// hooks
import { ProjectIssueQuickActions } from "@/components/issues";
import { EIssuesStoreType } from "@/constants/issue";
@ -10,8 +10,7 @@ import { EIssuesStoreType } from "@/constants/issue";
import { BaseListRoot } from "../base-list-root";
export const ListLayout: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
if (!workspaceSlug || !projectId) return null;

5
web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// store
import { EIssuesStoreType } from "@/constants/issue";
// constants
@ -10,8 +10,7 @@ import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
import { BaseListRoot } from "../base-list-root";
export const ProjectViewListLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
const { workspaceSlug, projectId, viewId } = useParams();
if (!workspaceSlug || !projectId) return null;

43
web/components/issues/issue-layouts/properties/all-properties.tsx
View file

@ -1,7 +1,7 @@
import { useCallback, useMemo } from "react";
import xor from "lodash/xor";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname, useRouter } from "next/navigation";
// icons
import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
// types
@ -60,6 +60,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
const { getStateById } = useProjectState();
const { isMobile } = usePlatformOS();
const projectDetails = getProjectById(issue.project_id);
// router
const router = useRouter();
const { workspaceSlug } = useParams();
const pathname = usePathname();
const currentLayout = `${activeLayout} layout`;
// derived values
const stateDetails = getStateById(issue.state_id);
@ -93,7 +97,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "state",
change_details: stateId,
@ -108,7 +112,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "priority",
change_details: value,
@ -123,7 +127,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "labels",
change_details: ids,
@ -138,7 +142,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "assignees",
change_details: ids,
@ -163,11 +167,11 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: { changed_property: "module_ids", change_details: { module_ids: moduleIds } },
});
},
[issueOperations, captureIssueEvent, currentLayout, router, issue]
[issueOperations, captureIssueEvent, currentLayout, pathname, issue]
);
const handleCycle = useCallback(
@ -179,11 +183,11 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: { changed_property: "cycle", change_details: { cycle_id: cycleId } },
});
},
[issue, issueOperations, captureIssueEvent, currentLayout, router.asPath]
[issue, issueOperations, captureIssueEvent, currentLayout, pathname]
);
const handleStartDate = (date: Date | null) => {
@ -193,7 +197,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "start_date",
change_details: date ? renderFormattedPayloadDate(date) : null,
@ -210,7 +214,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "target_date",
change_details: date ? renderFormattedPayloadDate(date) : null,
@ -226,7 +230,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...issue, state: "SUCCESS", element: currentLayout },
path: router.asPath,
path: pathname,
updates: {
changed_property: "estimate_point",
change_details: value,
@ -236,12 +240,15 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
};
const redirectToIssueDetail = () => {
router.push({
pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
issue.id
}`,
hash: "sub-issues",
});
router.push(
`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`
);
// router.push({
// pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
// issue.id
// }`,
// hash: "sub-issues",
// });
};
if (!displayProperties) return null;

5
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
// types
import { TIssue } from "@plane/types";
@ -38,8 +38,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [archiveIssueModal, setArchiveIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
// store hooks
const { setTrackElement } = useEventTracker();
const { getStateById } = useProjectState();

5
web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
View file

@ -1,6 +1,6 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// icons
import { ArchiveRestoreIcon, ExternalLink, Link, Trash2 } from "lucide-react";
// ui
@ -32,8 +32,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
// states
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
// store hooks
const {
membership: { currentProjectRole },

5
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
// types
import { TIssue } from "@plane/types";
@ -40,8 +40,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [archiveIssueModal, setArchiveIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, cycleId } = router.query;
const { workspaceSlug, cycleId } = useParams();
// store hooks
const { setTrackElement } = useEventTracker();
const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);

5
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
// types
import { TIssue } from "@plane/types";
@ -40,8 +40,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
const [archiveIssueModal, setArchiveIssueModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug, moduleId } = router.query;
const { workspaceSlug, moduleId } = useParams();
// store hooks
const { setTrackElement } = useEventTracker();
const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);

8
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react";
import omit from "lodash/omit";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
// types
import { TIssue } from "@plane/types";
@ -34,8 +34,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
parentRef,
} = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
const pathname = usePathname();
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@ -68,7 +68,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
);
const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
const isDraftIssue = pathname?.includes("draft-issues") || false;
const duplicateIssuePayload = omit(
{

12
web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
View file

@ -1,7 +1,7 @@
import React, { Fragment, useCallback } from "react";
import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, useSearchParams } from "next/navigation";
import useSWR from "swr";
import { IIssueDisplayFilterOptions } from "@plane/types";
// hooks
@ -23,8 +23,14 @@ import { TRenderQuickActions } from "../list/list-view-types";
export const AllIssueLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, globalViewId, ...routeFilters } = router.query;
const { workspaceSlug, globalViewId } = useParams();
const searchParams = useSearchParams();
const routeFilters: {
[key: string]: string;
} = {};
searchParams.forEach((value: string, key: string) => {
routeFilters[key] = value;
});
//swr hook for fetching issue properties
useWorkspaceIssueProperties(workspaceSlug);
// store

5
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View file

@ -1,6 +1,6 @@
import React, { Fragment } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
// mobx store
// components
@ -17,8 +17,7 @@ import { useIssues } from "@/hooks/store";
export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);

5
web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
View file

@ -2,7 +2,7 @@ import React, { Fragment, useState } from "react";
import isEmpty from "lodash/isEmpty";
import size from "lodash/size";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
import { IIssueFilterOptions } from "@plane/types";
// hooks
@ -25,8 +25,7 @@ import { useCycle, useIssues } from "@/hooks/store";
// types
export const CycleLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = useParams();
// store hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { getCycleById } = useCycle();

5
web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
// hooks
import { IssuePeekOverview } from "@/components/issues/peek-overview";
@ -17,8 +17,7 @@ import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
export const DraftIssueLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.DRAFT);

5
web/components/issues/issue-layouts/roots/module-layout-root.tsx
View file

@ -1,7 +1,7 @@
import React, { Fragment } from "react";
import size from "lodash/size";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
import { IIssueFilterOptions } from "@plane/types";
// mobx store
@ -24,8 +24,7 @@ import { useIssues } from "@/hooks/store";
export const ModuleLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = useParams();
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);

5
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View file

@ -1,6 +1,6 @@
import { FC, Fragment } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
// components
import { Spinner } from "@plane/ui";
@ -22,8 +22,7 @@ import { useIssues } from "@/hooks/store";
export const ProjectLayoutRoot: FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);

5
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View file

@ -1,6 +1,6 @@
import React, { Fragment } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
// mobx store
// components
@ -22,8 +22,7 @@ import { useIssues } from "@/hooks/store";
export const ProjectViewLayoutRoot: React.FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId, viewId } = router.query;
const { workspaceSlug, projectId, viewId } = useParams();
// hooks
const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);

5
web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
View file

@ -1,6 +1,6 @@
import { FC, useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types";
// hooks
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
@ -29,8 +29,7 @@ interface IBaseSpreadsheetRoot {
export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
const { viewId, QuickActions, storeType, canEditPropertiesBasedOnProject, isCompletedCycle = false } = props;
// router
const router = useRouter();
const { projectId } = router.query;
const { projectId } = useParams();
// store hooks
const {
membership: { currentProjectRole },

10
web/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
// types
import { TIssue } from "@plane/types";
// components
@ -19,8 +19,8 @@ type Props = {
export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
const { issue, disabled, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
const pathname = usePathname();
// hooks
const { captureIssueEvent } = useEventTracker();
const {
@ -40,10 +40,10 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
element: "Spreadsheet layout",
},
updates: { changed_property: "cycle", change_details: { cycle_id: cycleId } },
path: router.asPath,
path: pathname,
});
},
[workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue, captureIssueEvent, router.asPath]
[workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue, captureIssueEvent, pathname]
);
return (

10
web/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
View file

@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import xor from "lodash/xor";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
// types
import { TIssue } from "@plane/types";
// components
@ -20,8 +20,8 @@ type Props = {
export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
const { issue, disabled, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
const pathname = usePathname();
// hooks
const { captureIssueEvent } = useEventTracker();
const {
@ -49,10 +49,10 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
element: "Spreadsheet layout",
},
updates: { changed_property: "module_ids", change_details: { module_ids: moduleIds } },
path: router.asPath,
path: pathname,
});
},
[workspaceSlug, issue, changeModulesInIssue, captureIssueEvent, router.asPath]
[workspaceSlug, issue, changeModulesInIssue, captureIssueEvent, pathname]
);
return (

9
web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useRouter } from "next/navigation";
// types
import { TIssue } from "@plane/types";
// helpers
@ -22,12 +22,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
const subIssueCount = issue?.sub_issues_count ?? 0;
const redirectToIssueDetail = () => {
router.push({
pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
issue.id
}`,
hash: "sub-issues",
});
router.push(`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`);
};
return (

6
web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
View file

@ -1,6 +1,6 @@
import { useRef } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
// types
import { IIssueDisplayProperties, TIssue } from "@plane/types";
// constants
@ -22,7 +22,7 @@ type Props = {
export const IssueColumn = observer((props: Props) => {
const { displayProperties, issueDetail, disableUserActions, property, updateIssue, isEstimateEnabled } = props;
// router
const router = useRouter();
const pathname = usePathname();
const tableCellRef = useRef<HTMLTableCellElement | null>(null);
const { captureIssueEvent } = useEventTracker();
@ -54,7 +54,7 @@ export const IssueColumn = observer((props: Props) => {
element: "Spreadsheet layout",
},
updates: updates,
path: router.asPath,
path: pathname,
});
})
}

5
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View file

@ -1,6 +1,6 @@
import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { ChevronRight, MoreHorizontal } from "lucide-react";
// types
import { IIssueDisplayProperties, TIssue } from "@plane/types";
@ -163,8 +163,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const cellRef = useRef(null);
const menuActionRef = useRef<HTMLDivElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = useParams();
// hooks
const { getProjectIdentifierById } = useProject();
const { getIsIssuePeeked, peekIssue, setPeekIssue } = useIssueDetail();

8
web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
View file

@ -1,6 +1,6 @@
import { useEffect, useState, useRef } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
import { useForm } from "react-hook-form";
import { PlusIcon } from "lucide-react";
import { TIssue } from "@plane/types";
@ -64,7 +64,7 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
const { currentProjectDetails } = useProject();
const { captureIssueEvent } = useEventTracker();
// router
const router = useRouter();
const pathname = usePathname();
// form info
const {
reset,
@ -183,14 +183,14 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...res, state: "SUCCESS", element: "Spreadsheet quick add" },
path: router.asPath,
path: pathname,
});
})
.catch((err) => {
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED", element: "Spreadsheet quick add" },
path: router.asPath,
path: pathname,
});
console.error(err);
});

5
web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
View file

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// constants
import { EIssuesStoreType } from "@/constants/issue";
import { EUserProjectRoles } from "@/constants/project";
@ -12,8 +12,7 @@ import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
export const CycleSpreadsheetLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { cycleId } = router.query;
const { cycleId } = useParams();
// store hooks
const { currentProjectCompletedCycleIds } = useCycle();
const {

5
web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// mobx store
import { EIssuesStoreType } from "@/constants/issue";
// components
@ -8,8 +8,7 @@ import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
export const ModuleSpreadsheetLayout: React.FC = observer(() => {
const router = useRouter();
const { moduleId } = router.query;
const { moduleId } = useParams();
if (!moduleId) return null;

5
web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// mobx store
import { EIssuesStoreType } from "@/constants/issue";
// components
@ -11,8 +11,7 @@ import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
// router
const router = useRouter();
const { viewId } = router.query;
const { viewId } = useParams();
return (
<BaseSpreadsheetRoot

5
web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
View file

@ -1,5 +1,5 @@
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// ui
import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
// components
@ -33,8 +33,7 @@ export const SpreadsheetHeader = observer((props: Props) => {
selectionHelpers,
} = props;
// router
const router = useRouter();
const { projectId } = router.query;
const { projectId } = useParams();
// derived values
const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(SPREADSHEET_SELECT_GROUP) === "empty";
// auth

13
web/components/issues/issue-modal/draft-issue-layout.tsx
View file

@ -1,7 +1,7 @@
import React, { useState } from "react";
import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useParams, usePathname } from "next/navigation";
import type { TIssue } from "@plane/types";
// hooks
import { TOAST_TYPE, setToast } from "@plane/ui";
@ -42,9 +42,10 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
} = props;
// states
const [issueDiscardModal, setIssueDiscardModal] = useState(false);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// router params
const { workspaceSlug } = useParams();
// pathname
const pathname = usePathname();
// store hooks
const { captureIssueEvent } = useEventTracker();
@ -98,7 +99,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
captureIssueEvent({
eventName: "Draft issue created",
payload: { ...res, state: "SUCCESS" },
path: router.asPath,
path: pathname,
});
onChange(null);
setIssueDiscardModal(false);
@ -113,7 +114,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
captureIssueEvent({
eventName: "Draft issue created",
payload: { ...payload, state: "FAILED" },
path: router.asPath,
path: pathname,
});
});
};

24
web/components/issues/issue-modal/form.tsx
View file

@ -1,6 +1,6 @@
import React, { FC, useState, useRef, useEffect } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { Controller, useForm } from "react-hook-form";
import { LayoutPanelTop, Sparkle, X } from "lucide-react";
import { EditorRefApi } from "@plane/rich-text-editor";
@ -28,6 +28,9 @@ import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper"
import { getChangedIssuefields, getDescriptionPlaceholder } from "@/helpers/issue.helper";
import { shouldRenderProject } from "@/helpers/project.helper";
// hooks
<<<<<<< HEAD
import { useAppRouter, useEstimate, useInstance, useIssueDetail, useProject, useWorkspace } from "@/hooks/store";
=======
import {
useAppRouter,
useProjectEstimates,
@ -36,6 +39,7 @@ import {
useProject,
useWorkspace,
} from "@/hooks/store";
>>>>>>> 59fdd611e4b840993e93fc53c89a75a3787f248d
import useKeypress from "@/hooks/use-keypress";
import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
// services
@ -119,8 +123,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
const editorRef = useRef<EditorRefApi>(null);
const submitBtnRef = useRef<HTMLButtonElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
// store hooks
const workspaceStore = useWorkspace();
const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
@ -144,6 +147,21 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
useKeypress("Escape", handleKeyDown);
const handleKeyDown = (event: KeyboardEvent) => {
if (editorRef.current?.isEditorReadyToDiscard()) {
onClose();
} else {
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Editor is still processing changes. Please wait before proceeding.",
});
event.preventDefault(); // Prevent default action if editor is not ready to discard
}
};
useKeypress("Escape", handleKeyDown);
const {
issue: { getIssueById },
} = useIssueDetail();

14
web/components/issues/issue-modal/modal.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
// types
import type { TIssue } from "@plane/types";
// ui
@ -63,8 +63,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
const { issues: cycleIssues } = useIssues(EIssuesStoreType.CYCLE);
const { issues: draftIssues } = useIssues(EIssuesStoreType.DRAFT);
const { fetchIssue } = useIssueDetail();
// router
const router = useRouter();
// pathname
const pathname = usePathname();
// local storage
const { storedValue: localStorageDraftIssues, setValue: setLocalStorageDraftIssue } = useLocalStorage<
Record<string, Partial<TIssue>>
@ -168,7 +168,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...response, state: "SUCCESS" },
path: router.asPath,
path: pathname,
});
!createMore && handleClose();
if (createMore) issueTitleRef && issueTitleRef?.current?.focus();
@ -184,7 +184,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
captureIssueEvent({
eventName: ISSUE_CREATED,
payload: { ...payload, state: "FAILED" },
path: router.asPath,
path: pathname,
});
}
};
@ -205,7 +205,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...payload, issueId: data.id, state: "SUCCESS" },
path: router.asPath,
path: pathname,
});
handleClose();
} catch (error) {
@ -217,7 +217,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { ...payload, state: "FAILED" },
path: router.asPath,
path: pathname,
});
}
};

182
web/components/issues/issues-mobile-header.tsx
View file

@ -1,182 +0,0 @@
import { useCallback, useState } from "react";
import { observer } from "mobx-react";
import router from "next/router";
// icons
import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
// types
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
// ui
import { CustomMenu } from "@plane/ui";
// components
import { ProjectAnalyticsModal } from "@/components/analytics";
import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues/issue-layouts";
// constants
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "@/constants/issue";
// helpers
import { calculateTotalFilters } from "@/helpers/filter.helper";
// hooks
import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
export const IssuesMobileHeader = observer(() => {
const layouts = [
{ key: "list", title: "List", icon: List },
{ key: "kanban", title: "Kanban", icon: Kanban },
{ key: "calendar", title: "Calendar", icon: Calendar },
];
const [analyticsModal, setAnalyticsModal] = useState(false);
const { workspaceSlug, projectId } = router.query as {
workspaceSlug: string;
projectId: string;
};
const { currentProjectDetails } = useProject();
const { projectStates } = useProjectState();
const { projectLabels } = useLabel();
// store hooks
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.PROJECT);
const {
project: { projectMemberIds },
} = useMember();
const activeLayout = issueFilters?.displayFilters?.layout;
const handleLayoutChange = useCallback(
(layout: TIssueLayouts) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
},
[workspaceSlug, projectId, updateFilters]
);
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
},
[workspaceSlug, projectId, issueFilters, updateFilters]
);
const handleDisplayFilters = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayProperties = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
},
[workspaceSlug, projectId, updateFilters]
);
const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0;
return (
<>
<ProjectAnalyticsModal
isOpen={analyticsModal}
onClose={() => setAnalyticsModal(false)}
projectDetails={currentProjectDetails ?? undefined}
/>
<div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
<CustomMenu
maxHeight={"md"}
className="flex flex-grow justify-center text-sm text-custom-text-200"
placement="bottom-start"
customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
closeOnSelect
>
{layouts.map((layout, index) => (
<CustomMenu.MenuItem
key={index}
onClick={() => {
handleLayoutChange(ISSUE_LAYOUTS[index].key);
}}
className="flex items-center gap-2"
>
<layout.icon className="h-3 w-3" />
<div className="text-custom-text-300">{layout.title}</div>
</CustomMenu.MenuItem>
))}
</CustomMenu>
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
<FiltersDropdown
title="Filters"
placement="bottom-end"
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
Filters
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
isFiltersApplied={isFiltersApplied}
>
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectLabels}
memberIds={projectMemberIds ?? undefined}
states={projectStates}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
</div>
<div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
<FiltersDropdown
title="Display"
placement="bottom-end"
menuButton={
<span className="flex items-center text-sm text-custom-text-200">
Display
<ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
</span>
}
>
<DisplayFiltersSelection
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
cycleViewDisabled={!currentProjectDetails?.cycle_view}
moduleViewDisabled={!currentProjectDetails?.module_view}
/>
</FiltersDropdown>
</div>
<button
onClick={() => setAnalyticsModal(true)}
className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
>
Analytics
</button>
</div>
</>
);
});

5
web/components/issues/parent-issues-list-modal.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
// headless ui
import { Rocket, Search } from "lucide-react";
import { Combobox, Dialog, Transition } from "@headlessui/react";
@ -44,8 +44,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
const { isMobile } = usePlatformOS();
const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
const handleClose = () => {
onClose();

42
web/components/issues/peek-overview/root.tsx
View file

@ -1,6 +1,6 @@
import { FC, useEffect, useState, useMemo } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
// types
import { TIssue } from "@plane/types";
// ui
@ -45,7 +45,7 @@ export type TIssuePeekOperations = {
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const { is_archived = false, is_draft = false } = props;
// router
const router = useRouter();
const pathname = usePathname();
const {
membership: { currentWorkspaceAllProjectsRole },
} = useUser();
@ -95,14 +95,14 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: Object.keys(data).join(","),
change_details: Object.values(data).join(","),
},
path: router.asPath,
path: pathname,
});
})
.catch(() => {
captureIssueEvent({
eventName: ISSUE_UPDATED,
payload: { state: "FAILED", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
setToast({
title: "Error!",
@ -122,7 +122,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_DELETED,
payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -133,7 +133,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_DELETED,
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
}
},
@ -143,13 +143,13 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_ARCHIVED,
payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
eventName: ISSUE_ARCHIVED,
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
}
},
@ -164,7 +164,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_RESTORED,
payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -175,7 +175,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
captureIssueEvent({
eventName: ISSUE_RESTORED,
payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
path: router.asPath,
path: pathname,
});
}
},
@ -190,7 +190,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -205,7 +205,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
}
},
@ -219,7 +219,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -234,7 +234,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: cycleId,
},
path: router.asPath,
path: pathname,
});
}
},
@ -260,7 +260,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
@ -270,7 +270,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "cycle_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
}
},
@ -284,7 +284,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "module_id",
change_details: moduleIds,
},
path: router.asPath,
path: pathname,
});
} catch (error) {
setToast({
@ -299,7 +299,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "module_id",
change_details: moduleIds,
},
path: router.asPath,
path: pathname,
});
}
},
@ -325,7 +325,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "module_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
} catch (error) {
captureIssueEvent({
@ -335,7 +335,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
changed_property: "module_id",
change_details: "",
},
path: router.asPath,
path: pathname,
});
}
},
@ -374,7 +374,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
removeIssueFromModule,
removeModulesFromIssue,
captureIssueEvent,
router.asPath,
pathname,
]
);

5
web/components/issues/select/label.tsx
View file

@ -1,6 +1,6 @@
import React, { Fragment, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, Component, Plus, Search, Tag } from "lucide-react";
import { Combobox } from "@headlessui/react";
@ -38,8 +38,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
buttonClassName,
} = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug } = useParams();
// store hooks
const { getProjectLabels, fetchProjectLabels } = useLabel();
// states

26
web/components/issues/sub-issues/root.tsx
View file

@ -1,6 +1,6 @@
import { FC, useCallback, useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { usePathname } from "next/navigation";
// icons
import { Plus, ChevronRight, Loader, Pencil } from "lucide-react";
// types
@ -16,6 +16,7 @@ import { copyTextToClipboard } from "@/helpers/string.helper";
// hooks
import { useEventTracker, useIssueDetail } from "@/hooks/store";
// local components
import useURLHash from "@/hooks/use-url-hash";
import { IssueList } from "./issues-list";
export interface ISubIssuesRoot {
@ -46,7 +47,8 @@ export type TSubIssueOperations = {
export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
const { workspaceSlug, projectId, parentIssueId, disabled = false } = props;
// router
const router = useRouter();
const pathname = usePathname();
const hashValue = useURLHash();
const {
issue: { getIssueById },
subIssues: { subIssuesByIssueId, stateDistributionByIssueId, subIssueHelpersByIssueId, setSubIssueHelpers },
@ -94,7 +96,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
});
const scrollToSubIssuesView = useCallback(() => {
if (router.asPath.split("#")[1] === "sub-issues") {
if (hashValue === "sub-issues") {
setTimeout(() => {
const subIssueDiv = document.getElementById(`sub-issues`);
if (subIssueDiv)
@ -104,13 +106,13 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
});
}, 200);
}
}, [router.asPath]);
}, [hashValue]);
useEffect(() => {
if (router.asPath) {
if (hashValue) {
scrollToSubIssuesView();
}
}, [router.asPath, scrollToSubIssuesView]);
}, [hashValue, scrollToSubIssuesView]);
const handleIssueCrudState = (
key: "create" | "existing" | "update" | "delete",
@ -185,7 +187,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
changed_property: Object.keys(issueData).join(","),
change_details: Object.values(issueData).join(","),
},
path: router.asPath,
path: pathname,
});
setToast({
type: TOAST_TYPE.SUCCESS,
@ -201,7 +203,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
changed_property: Object.keys(issueData).join(","),
change_details: Object.values(issueData).join(","),
},
path: router.asPath,
path: pathname,
});
setToast({
type: TOAST_TYPE.ERROR,
@ -226,7 +228,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
changed_property: "parent_id",
change_details: parentIssueId,
},
path: router.asPath,
path: pathname,
});
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
} catch (error) {
@ -237,7 +239,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
changed_property: "parent_id",
change_details: parentIssueId,
},
path: router.asPath,
path: pathname,
});
setToast({
type: TOAST_TYPE.ERROR,
@ -253,14 +255,14 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
captureIssueEvent({
eventName: "Sub-issue deleted",
payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
path: router.asPath,
path: pathname,
});
setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
} catch (error) {
captureIssueEvent({
eventName: "Sub-issue removed",
payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
path: router.asPath,
path: pathname,
});
setToast({
type: TOAST_TYPE.ERROR,