feat: app dir migration (#4743)
* 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
GitHub
parent
59fdd611e4
commit
5d807db69e
417 changed files with 5196 additions and 3918 deletions
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { CommandPalette } from "@/components/command-palette";
|
||||
import { SidebarHamburgerToggle } from "@/components/core/sidebar";
|
||||
// layouts
|
||||
import { WorkspaceAuthWrapper, ProjectAuthWrapper } from "@/layouts/auth-layout";
|
||||
// wrappers
|
||||
import { AuthenticationWrapper } from "@/lib/wrappers";
|
||||
import { AppSidebar } from "./sidebar";
|
||||
|
||||
export interface IAppLayout {
|
||||
children: ReactNode;
|
||||
header: ReactNode;
|
||||
withProjectWrapper?: boolean;
|
||||
mobileHeader?: ReactNode;
|
||||
}
|
||||
|
||||
export const AppLayout: FC<IAppLayout> = observer((props) => {
|
||||
const { children, header, withProjectWrapper = false, mobileHeader } = props;
|
||||
|
||||
return (
|
||||
<AuthenticationWrapper>
|
||||
<CommandPalette />
|
||||
<WorkspaceAuthWrapper>
|
||||
<div className="relative flex h-screen w-full overflow-hidden">
|
||||
<AppSidebar />
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
<div className="z-[15]">
|
||||
<div className="z-10 flex w-full items-center border-b border-custom-border-200">
|
||||
<div className="block bg-custom-sidebar-background-100 py-4 pl-5 md:hidden">
|
||||
<SidebarHamburgerToggle />
|
||||
</div>
|
||||
<div className="w-full">{header}</div>
|
||||
</div>
|
||||
{mobileHeader && mobileHeader}
|
||||
</div>
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
|
||||
{withProjectWrapper ? <ProjectAuthWrapper>{children}</ProjectAuthWrapper> : <>{children}</>}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</WorkspaceAuthWrapper>
|
||||
</AuthenticationWrapper>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import { FC, useRef } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
// components
|
||||
import { ProjectSidebarList } from "@/components/project";
|
||||
import {
|
||||
WorkspaceHelpSection,
|
||||
WorkspaceSidebarDropdown,
|
||||
WorkspaceSidebarMenu,
|
||||
WorkspaceSidebarQuickAction,
|
||||
} from "@/components/workspace";
|
||||
// hooks
|
||||
import { useAppTheme } from "@/hooks/store";
|
||||
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
|
||||
|
||||
export interface IAppSidebar {}
|
||||
|
||||
export const AppSidebar: FC<IAppSidebar> = observer(() => {
|
||||
// store hooks
|
||||
const { toggleSidebar, sidebarCollapsed } = useAppTheme();
|
||||
// refs
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useOutsideClickDetector(ref, () => {
|
||||
if (sidebarCollapsed === false) {
|
||||
if (window.innerWidth < 768) {
|
||||
toggleSidebar();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100
|
||||
duration-300 md:relative
|
||||
${sidebarCollapsed ? "-ml-[280px]" : ""}
|
||||
sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
|
||||
md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
||||
lg:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
||||
`}
|
||||
>
|
||||
<div ref={ref} className="flex h-full w-full flex-1 flex-col">
|
||||
<WorkspaceSidebarDropdown />
|
||||
<WorkspaceSidebarQuickAction />
|
||||
<WorkspaceSidebarMenu />
|
||||
<ProjectSidebarList />
|
||||
<WorkspaceHelpSection />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { JoinProject } from "@/components/auth-screens";
|
||||
|
|
@ -46,8 +46,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
|
|||
const { fetchProjectLabels } = useLabel();
|
||||
const { getProjectEstimates } = useProjectEstimates();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
const { workspaceSlug, projectId } = useParams();
|
||||
|
||||
// fetching project details
|
||||
useSWR(
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
|
|||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useTheme } from "next-themes";
|
||||
import useSWR from "swr";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
|
@ -22,9 +22,8 @@ export interface IWorkspaceAuthWrapper {
|
|||
|
||||
export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
|
||||
const { children } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// router params
|
||||
const { workspaceSlug } = useParams();
|
||||
// next themes
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store hooks
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
export * from "./profile";
|
||||
export * from "./project";
|
||||
export * from "./workspace";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
// layout
|
||||
import { CommandPalette } from "@/components/command-palette";
|
||||
import { ProfileLayoutSidebar } from "@/layouts/settings-layout";
|
||||
// wrappers
|
||||
import { AuthenticationWrapper } from "@/lib/wrappers";
|
||||
// components
|
||||
|
||||
interface IProfileSettingsLayout {
|
||||
children: ReactNode;
|
||||
header?: ReactNode;
|
||||
}
|
||||
|
||||
export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
|
||||
const { children, header } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommandPalette />
|
||||
<AuthenticationWrapper>
|
||||
<div className="relative flex h-screen w-full overflow-hidden">
|
||||
<ProfileLayoutSidebar />
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
{header}
|
||||
<div className="h-full w-full overflow-hidden">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</AuthenticationWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
// layout
|
||||
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
|
||||
import { PreferencesMobileHeader } from "@/components/profile/preferences/preferences-mobile-header";
|
||||
import { useAppTheme } from "@/hooks/store";
|
||||
import { ProfileSettingsLayout } from "@/layouts/settings-layout";
|
||||
// local components
|
||||
import { ProfilePreferenceSettingsSidebar } from "./sidebar";
|
||||
|
||||
interface IProfilePreferenceSettingsLayout {
|
||||
children: ReactNode;
|
||||
header?: ReactNode;
|
||||
}
|
||||
|
||||
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
|
||||
const { children, header } = props;
|
||||
const { toggleSidebar } = useAppTheme();
|
||||
|
||||
return (
|
||||
<ProfileSettingsLayout
|
||||
header={
|
||||
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
|
||||
<SidebarHamburgerToggle onClick={toggleSidebar} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="h-full">
|
||||
<PreferencesMobileHeader />
|
||||
<div className="relative flex h-full w-full overflow-hidden">
|
||||
<ProfilePreferenceSettingsSidebar />
|
||||
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
||||
{header}
|
||||
<div className="h-full w-full">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</ProfileSettingsLayout>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export const ProfilePreferenceSettingsSidebar = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const profilePreferenceLinks: Array<{
|
||||
label: string;
|
||||
href: string;
|
||||
}> = [
|
||||
{
|
||||
label: "Theme",
|
||||
href: `/profile/preferences/theme`,
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: `/profile/preferences/email`,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="hidden md:flex w-96 flex-col gap-6 px-8 py-12">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-xs font-semibold text-custom-text-400">Preference</span>
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
{profilePreferenceLinks.map((link) => (
|
||||
<Link key={link.href} href={link.href}>
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// icons
|
||||
import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
|
||||
// ui
|
||||
import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
|
||||
// constants
|
||||
import { PROFILE_ACTION_LINKS } from "@/constants/profile";
|
||||
// hooks
|
||||
import { useAppTheme, useUser, useUserSettings, useWorkspace } from "@/hooks/store";
|
||||
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
|
||||
const WORKSPACE_ACTION_LINKS = [
|
||||
{
|
||||
key: "create-workspace",
|
||||
Icon: Plus,
|
||||
label: "Create workspace",
|
||||
href: "/create-workspace",
|
||||
},
|
||||
{
|
||||
key: "invitations",
|
||||
Icon: UserPlus,
|
||||
label: "Invitations",
|
||||
href: "/invitations",
|
||||
},
|
||||
];
|
||||
|
||||
export const ProfileLayoutSidebar = observer(() => {
|
||||
// states
|
||||
const [isSigningOut, setIsSigningOut] = useState(false);
|
||||
// router
|
||||
const router = useRouter();
|
||||
// store hooks
|
||||
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
|
||||
const { data: currentUser, signOut } = useUser();
|
||||
const { data: currentUserSettings } = useUserSettings();
|
||||
const { workspaces } = useWorkspace();
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
const workspacesList = Object.values(workspaces ?? {});
|
||||
|
||||
// redirect url for normal mode
|
||||
const redirectWorkspaceSlug =
|
||||
currentUserSettings?.workspace?.last_workspace_slug ||
|
||||
currentUserSettings?.workspace?.fallback_workspace_slug ||
|
||||
"";
|
||||
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useOutsideClickDetector(ref, () => {
|
||||
if (sidebarCollapsed === false) {
|
||||
if (window.innerWidth < 768) {
|
||||
toggleSidebar();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth <= 768) {
|
||||
toggleSidebar(true);
|
||||
}
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [toggleSidebar]);
|
||||
|
||||
const handleItemClick = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
toggleSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSignOut = async () => {
|
||||
setIsSigningOut(true);
|
||||
await signOut()
|
||||
.catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Failed to sign out. Please try again.",
|
||||
})
|
||||
)
|
||||
.finally(() => setIsSigningOut(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative
|
||||
${sidebarCollapsed ? "-ml-[280px]" : ""}
|
||||
sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
|
||||
md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
||||
lg:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
|
||||
`}
|
||||
>
|
||||
<div ref={ref} className="flex h-full w-full flex-col gap-y-4">
|
||||
<Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
|
||||
<div
|
||||
className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="grid h-5 w-5 flex-shrink-0 place-items-center">
|
||||
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="truncate text-lg font-semibold text-custom-text-200">Profile settings</h4>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-shrink-0 flex-col overflow-x-hidden px-4">
|
||||
{!sidebarCollapsed && (
|
||||
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
|
||||
)}
|
||||
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
|
||||
{PROFILE_ACTION_LINKS.map((link) => {
|
||||
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
|
||||
|
||||
return (
|
||||
<Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
|
||||
<Tooltip
|
||||
tooltipContent={link.label}
|
||||
position="right"
|
||||
className="ml-2"
|
||||
disabled={!sidebarCollapsed}
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
link.highlight(router.pathname)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
|
||||
} ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col overflow-x-hidden px-4">
|
||||
{!sidebarCollapsed && (
|
||||
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
|
||||
)}
|
||||
{workspacesList && workspacesList.length > 0 && (
|
||||
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
|
||||
{workspacesList.map((workspace) => (
|
||||
<Link
|
||||
key={workspace.id}
|
||||
href={`/${workspace.slug}`}
|
||||
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
|
||||
sidebarCollapsed ? "justify-center" : `justify-between`
|
||||
}`}
|
||||
onClick={handleItemClick}
|
||||
>
|
||||
<span
|
||||
className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`relative flex h-6 w-6 flex-shrink-0 items-center justify-center p-2 text-xs uppercase ${
|
||||
!workspace?.logo && "rounded bg-custom-primary-500 text-white"
|
||||
}`}
|
||||
>
|
||||
{workspace?.logo && workspace.logo !== "" ? (
|
||||
<img
|
||||
src={workspace.logo}
|
||||
className="absolute left-0 top-0 h-full w-full rounded object-cover"
|
||||
alt="Workspace Logo"
|
||||
/>
|
||||
) : (
|
||||
workspace?.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
|
||||
)}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-1.5">
|
||||
{WORKSPACE_ACTION_LINKS.map((link) => (
|
||||
<Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
|
||||
<Tooltip
|
||||
tooltipContent={link.label}
|
||||
position="right"
|
||||
className="ml-2"
|
||||
disabled={!sidebarCollapsed}
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
{<link.Icon className="h-4 w-4" />}
|
||||
{!sidebarCollapsed && link.label}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
|
||||
<div
|
||||
className={`flex w-full ${
|
||||
sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSignOut}
|
||||
className="flex items-center justify-center gap-2 text-sm font-medium text-red-500"
|
||||
disabled={isSigningOut}
|
||||
>
|
||||
<LogOut className="h-3.5 w-3.5" />
|
||||
{!sidebarCollapsed && <span>{isSigningOut ? "Signing out..." : "Sign out"}</span>}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
<MoveLeft className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
|
||||
sidebarCollapsed ? "w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
// components
|
||||
import { Button, LayersIcon } from "@plane/ui";
|
||||
import { NotAuthorizedView } from "@/components/auth-screens";
|
||||
// ui
|
||||
// constants
|
||||
import { EUserProjectRoles } from "@/constants/project";
|
||||
import { useUser } from "@/hooks/store";
|
||||
import { ProjectSettingsSidebar } from "./sidebar";
|
||||
|
||||
export interface IProjectSettingLayout {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
|
||||
const { children } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const restrictViewSettings = currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER;
|
||||
|
||||
return restrictViewSettings ? (
|
||||
<NotAuthorizedView
|
||||
type="project"
|
||||
actionButton={
|
||||
//TODO: Create a new component called Button Link to handle such scenarios
|
||||
<Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
|
||||
<Button variant="primary" size="md" prependIcon={<LayersIcon />}>
|
||||
Go to issues
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="inset-y-0 z-20 flex flex-grow-0 h-full w-full">
|
||||
<div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
|
||||
<ProjectSettingsSidebar />
|
||||
</div>
|
||||
<div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// hooks
|
||||
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
|
||||
import { useUser } from "@/hooks/store";
|
||||
// constants
|
||||
|
||||
export const ProjectSettingsSidebar = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// mobx store
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
|
||||
const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
|
||||
|
||||
if (!currentProjectRole) {
|
||||
return (
|
||||
<div className="flex w-80 flex-col gap-6 px-5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
|
||||
<Loader className="flex w-full flex-col gap-2">
|
||||
{[...Array(8)].map((index) => (
|
||||
<Loader.Item key={index} height="34px" />
|
||||
))}
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-80 flex-col gap-6 px-5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{PROJECT_SETTINGS_LINKS.map(
|
||||
(link) =>
|
||||
projectMemberInfo >= link.access && (
|
||||
<Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
// components
|
||||
import MobileWorkspaceSettingsTabs from "@/components/workspace/settings/mobile-workspace-settings-tabs";
|
||||
import { WorkspaceSettingsSidebar } from "./sidebar";
|
||||
|
||||
export interface IWorkspaceSettingLayout {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
|
||||
const { children } = props;
|
||||
|
||||
return (
|
||||
<div className="inset-y-0 z-20 flex h-full w-full gap-2">
|
||||
<div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
|
||||
<WorkspaceSettingsSidebar />
|
||||
</div>
|
||||
<div className="flex flex-col relative w-full overflow-hidden">
|
||||
<MobileWorkspaceSettingsTabs />
|
||||
<div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
|
||||
import { useUser } from "@/hooks/store";
|
||||
// constants
|
||||
|
||||
export const WorkspaceSettingsSidebar = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// mobx store
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
|
||||
const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
|
||||
|
||||
return (
|
||||
<div className="flex w-80 flex-col gap-6 px-5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{WORKSPACE_SETTINGS_LINKS.map(
|
||||
(link) =>
|
||||
workspaceMemberInfo >= link.access && (
|
||||
<Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
|
||||
<span>
|
||||
<div
|
||||
className={`rounded-md px-4 py-2 text-sm font-medium ${
|
||||
link.highlight(router.asPath, `/${workspaceSlug}`)
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</div>
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from "./layout";
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
// components
|
||||
import { ProfileNavbar, ProfileSidebar } from "@/components/profile";
|
||||
// constants
|
||||
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
showProfileIssuesFilter?: boolean;
|
||||
};
|
||||
|
||||
const AUTHORIZED_ROLES = [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.VIEWER];
|
||||
|
||||
export const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
|
||||
const { children, className, showProfileIssuesFilter } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentWorkspaceRole },
|
||||
} = useUser();
|
||||
// derived values
|
||||
const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
|
||||
const isAuthorizedPath = router.pathname.includes("assigned" || "created" || "subscribed");
|
||||
|
||||
return (
|
||||
<div className="h-full w-full flex md:overflow-hidden">
|
||||
<div className="flex w-full flex-col md:h-full md:overflow-hidden">
|
||||
<ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
|
||||
{isAuthorized || !isAuthorizedPath ? (
|
||||
<div className={`w-full overflow-hidden md:h-full ${className}`}>{children}</div>
|
||||
) : (
|
||||
<div className="grid h-full w-full place-items-center text-custom-text-200">
|
||||
You do not have the permission to access this page.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ProfileSidebar />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue