refactor: enhance components modularity and introduce new UI componenets (#6192)

* feat: add navigation dropdown component

* chore: enhance title/ description loader and componenet modularity

* chore: issue store filter update

* chore: added few icons to ui package

* chore: improvements for tabs componenet

* chore: enhance sidebar modularity

* chore: update issue and router store to add support for additional issue layouts

* chore: enhanced cycle componenets modularity

* feat: added project grouping header for cycles list

* chore: enhanced project dropdown componenet by adding multiple selection functionality

* chore: enhanced rich text editor modularity by taking members ids as props for mentions

* chore: added functionality to filter disabled layouts in issue-layout dropdown

* chore: added support to pass project ids as props in project card list

* feat: multi select project modal

* chore: seperate out project componenet for reusability

* chore: command pallete store improvements

* fix: build errors
This commit is contained in:
Prateek Shourya 2024-12-12 21:40:57 +05:30 committed by GitHub
parent 9ad8b43408
commit 54f828cbfa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
82 changed files with 1044 additions and 320 deletions

View file

@ -9,12 +9,13 @@ import { useAppRouter } from "@/hooks/use-app-router";
import { CycleDetailsSidebar } from "./";
type Props = {
projectId: string;
projectId?: string;
workspaceSlug: string;
isArchived?: boolean;
};
export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
export const CyclePeekOverview: React.FC<Props> = observer((props) => {
const { projectId: propsProjectId, workspaceSlug, isArchived } = props;
// router
const router = useAppRouter();
const pathname = usePathname();
@ -23,22 +24,25 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
// refs
const ref = React.useRef(null);
// store hooks
const { fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
const { getCycleById, fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
// derived values
const cycleDetails = peekCycle ? getCycleById(peekCycle.toString()) : undefined;
const projectId = propsProjectId || cycleDetails?.project_id;
const handleClose = () => {
const query = generateQueryParams(searchParams, ["peekCycle"]);
router.push(`${pathname}?${query}`);
router.push(`${pathname}?${query}`, {}, { showProgressBar: false });
};
useEffect(() => {
if (!peekCycle) return;
if (!peekCycle || !projectId) return;
if (isArchived) fetchArchivedCycleDetails(workspaceSlug, projectId, peekCycle.toString());
else fetchCycleDetails(workspaceSlug, projectId, peekCycle.toString());
}, [fetchArchivedCycleDetails, fetchCycleDetails, isArchived, peekCycle, projectId, workspaceSlug]);
return (
<>
{peekCycle && (
{peekCycle && projectId && (
<div
ref={ref}
className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative right-0 z-[9]"
@ -47,7 +51,13 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
<CycleDetailsSidebar handleClose={handleClose} isArchived={isArchived} cycleId={peekCycle} />
<CycleDetailsSidebar
handleClose={handleClose}
isArchived={isArchived}
projectId={projectId}
workspaceSlug={workspaceSlug}
cycleId={peekCycle}
/>
</div>
)}
</>