feat: session auth implementation (#4411)
* feat: session authentication and god-mode implementation (#4302) * dev: move authentication to base class for credentials * chore: new account creation * dev: return error as query parameter * dev: accounts and profile endpoints for user * fix: user store updates * fix: store fixes * fix: type fixes * dev: set is_password_autoset and is_email_verifier for auth providers * dev: move all auth configuration to different apps * dev: fix circular imports * dev: remove unused imports * dev: fix imports for authentication * dev: update endpoints to use rest framework api viewa * fix: onboarding fixes * dev: session model changes * fix: session model and add check for last name first name and avatar * dev: fix referer redirect * dev: remove auth imports * dev: fix imports * dev: update migrations * fix: instance admin login * comflict: conflicts resolved * dev: fix import errors and email check endpoint * fix: error messages and redirects after login * dev: configs api * fix: is github enabled boolean * dev: merge config and instance api * conflict: merge conflict resolved * dev: instance admin sign up endpoint * dev: enable magic link login * dev: configure instance variables for github and google enabled * chore: typo fixes * fix: god mode docker file changes * build-error: resolved build errors * fix: docker compose changes * dev: add email credential check endpoint * fix: minor package changes * fix: docker related changes * dev: add nginx rules in the nginx template * dev: refactor the url patterns * fix: docker changes * fix: docker files for god-mode * fix: static export * fix: nginx conf * dev: smtp sender refused exception * fix: godmode fixes * chore: god mode revamp. * dev: add csrf secured flag * fix: oauth redirect uri and session settings * chore: god mode app changes. (#3982) * chore: send test email functionality. * style: authentication methods page UI revamp. * chore: create workspace popup. * fix: user me endpoint * dev: fix redirection after authentication * dev: handle god mode redirection * fix: redirections * fix: auth related hooks * fix: store related fixes * dev: fix session authentication for rest apis * fix: linting errors * fix: removing references of useStore= * dev: fix redirection and password validation * dev: add useUser hook * fix: build fixes and lint issues * fix: removing useApplication hook * fix: build errors * fix: delete unused files * fix: auth build fixes * fix: bugfixes * dev: alter avatar to support more than 255 chars * dev: fix profile endpoint and increase session expiry time and update session on every request * chore: resolved the migration * chore: resolved merge conflicts * dev: error codes and error messages for the auth flow * dev: instance admin sign up and sign in endpoint * dev: use zxcvbn to validate password strength * dev: add extra parameters when error handling on instance god mode * chore: auth init * chore: signin/ signup form ui updates and password strength meter. * chore: update password fields. * chore: validations and error handling. * chore: updated sign-up form * chore: updated workflow and updated the code structure * chore: instance empty state for god-mode. * chore: instance and auth wrappers update * fix: renaming godmode * fix: docker changes * chore: updated authentication wrappers * chore: updated the authentication workflow and rendered all pages * fix: build errors * fix: docker related fixes * fix: tailing slash added to space and admin for valid nginx locations * chore: seperate pages for signup and login * git-action modified for admin file changes * feature build action updated for admin app * self host modified * chore: resolved build errors and handled signin and signup in a seperate route * chore: sign-in and sign-up revamp. * fix: migration conflicts * dev: migrations * chore: handled redirection * dev: admin url * dev: create seperate endpoint for instance admin me * dev: instance admin endpoint * git action fixed * chore: handled auth wrappers * dev: add serializer and remove print logs * fix: build errors * dev: fix migrations * dev: instance folder structuring * fix: linting errors * chore: resolved build errors * chore: updated store and auth workflow and updates api service types * chore: Replaced Next Link with Anchoer tag for god-mode redirection * add 3333 port to allowed origins * make password login working again * dev: fix redirection, add admin signout endpoint and fix email credential check endpoint * fix unique code sign in * fix small build error * enable sign out * dev: add google client secret variable to configure instance * dev: add referer for redirection * fix origin urls for oauths * admin setup and login separation * dev: fix user redirection and tour completed endpoint * fix build errors * dev: add set password endpoint * dev: remove user creation logic for redirection * fix unique code page * fix forgot password * chore: onboarding revamp. * dev: fix workspace slug redirection in login * chore: invited user onboarding flow update. * chore: fix switch or delete account modal. * fix members exception * refactor auth flows and add invitations to auth flow * fix sig in sign up url * fix action url * fix build errors * dev: fix user set password when logging in * dev: reset password endpoint * chore: confirm password validation for signup and onboarding. * enable reset password * fix build error * chore: minor UI updates. * chore: forgot and reset password UI revamp. * fix authentication re directions * dev: auth redirections * change url paths for signup and signin * dev: make the user logged in when changing passwords * dev: next path redirection for web and space app * dev: next path for magic sign in endpoint * dev: github space endpoint * chore: minor ui updates and fixes in web app. * set password screen * fix multiple unique code generation * dev: next path base redirection * dev: remove print logs * dev: auth space endpoints * fix build errors * dev: invalidate cache on configuration update, god mode exception errors and authentication failed code * dev: fix space endpoints and add extra endpoints * chore: space auth revamp. * dev: add sign up for space app * fix: build errors. * fix: auth redirection logic. * chore: space app onboarding revamp. --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Manish Gupta <manish@mgupta.me> Co-authored-by: = <=> Co-authored-by: rahulramesha <rahulramesham@gmail.com> * chore: updated file structure for admin * chore: updated admin-sidebar * chore: auth error handling * chore: onboarding UI updates and dark mode fixes. * chore: add `user personalization` step to onboarding profile setup screen. * chore: fix minor UI bugs * chore: authentication workflow changes * chore: handled signin workflow * style: switch or delete account workflow * chore: god mode redirection URL * feat(dashboard): improve label readability (#4321) change none label for all time in dashbard filters * chore: god-mode redirection * chore: onboarding ui updates and accept invitation workflow updates. * chore: rename unique code auth form. * style: space auth ux copy. * chore: updated intance and auth wrapper logic * chore: update default layout style. * chore: update confirm password. * chore: backend redirection * style: update banner ui * chore: minor ui updates and validation fix. * chore: removed old auth hook * chore: handled auth wrapper * chore: handled store loaders in the user * chore: handled logs * chore: add loading spinners for all auth and onboarding form buttons. * chore: add background pattern in admin auth forms and minor ui fixes. * chore: UI changes and revamp components for authentication * chore: auth UI consistency in web, space and admin. * chore: resolved build errors * chore: removed old auth hooks * chore: handled lint errors in use accounts * chore: updated authentication wrapper logic in web app * [WEB -1149] dev: update dependencies (#4333) * dev: upgrade dependencies remove unwanted dependency and add ruff as local dependency * dev: add comments * chore: authentication wrapper fetch user * chore: updated store loader * chore: removed old auth wrapper and replaced the imports with new auth wrapper * chore: join workspace invitation workflow updates * chore: build error resolved in deploy * chore: handled onboarding step error in web app * chore: SMTP Name and Password validation removed * chore: handled seo and signout logic and new user popup * chore: added redirection to plane in the sidebar * chore: resolved build errors * dev: admin session cookie update * chore: updated cookie session time for admin * dev: add start date and end date to projects (#4355) * chore: add email security dropdown and remove SMTP username and password validation. * chore: add tooltip to admin sidebar help-section. * chore: add dropdown to collapsed admin sidebar. * chore: profile themning * chore: updated page error messages and theme in command palette * dev: add email validation in email check apis * dev: remove start date and end date from project * chore: updated space folder structure and updated the store hooks * dev: error codes for authentication * chore: handled authentication in space and web apps * chore: banner redirect handling the email * dev: god mode error codes * chore: updated error codes * chore: updated onboarding images * dev: signout endpoints and saving login domain while creating sessions * feat: Self Host Data Backup (#4383) * feat: implemented backup , support for docker-compose tool, readme updated * minor fix in shell script * codacy fixes * chore: handled build errors in web * chore: updated react, react-dom, and next versions * chore: updated password autioset in the signin * dev: add logo prop to views and pages * chore: updated api service and handled the set password in store * chore: handled build errors and code cleanup * dev: return 401 when the session is not valid * dev: users/me exception for api * chore: installed lodash in space app * dev: add auth route in nginx --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: Manish Gupta <59428681+mguptahub@users.noreply.github.com> Co-authored-by: Manish Gupta <manish@mgupta.me> Co-authored-by: rahulramesha <rahulramesham@gmail.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Daniel Alba <56451942+redrum15@users.noreply.github.com> Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
This commit is contained in:
sriram veeraghanta
GitHub
parent
ae43d05714
commit
59335618b4
903 changed files with 25736 additions and 16041 deletions
105
web/components/workspace/ConfirmWorkspaceMemberRemove.tsx
Normal file
105
web/components/workspace/ConfirmWorkspaceMemberRemove.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { Button } from "@plane/ui";
|
||||
import { useUser } from "@/hooks/store";
|
||||
import { Props } from "./confirm-workspace-member-remove";
|
||||
|
||||
export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
|
||||
const { isOpen, onClose, onSubmit, userDetails } = props;
|
||||
// states
|
||||
const [isRemoving, setIsRemoving] = useState(false);
|
||||
// store hooks
|
||||
const { data: currentUser } = useUser();
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setIsRemoving(false);
|
||||
};
|
||||
|
||||
const handleDeletion = async () => {
|
||||
setIsRemoving(true);
|
||||
|
||||
await onSubmit();
|
||||
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-20 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
|
||||
{currentUser?.id === userDetails.id
|
||||
? "Leave workspace?"
|
||||
: `Remove ${userDetails?.display_name}?`}
|
||||
</Dialog.Title>
|
||||
<div className="mt-2">
|
||||
{currentUser?.id === userDetails.id ? (
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Are you sure you want to leave the workspace? You will no longer have access to this
|
||||
workspace. This action cannot be undone.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Are you sure you want to remove member-{" "}
|
||||
<span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
|
||||
access to this workspace. This action cannot be undone.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 p-4 sm:px-6">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
|
||||
{currentUser?.id === userDetails.id
|
||||
? isRemoving
|
||||
? "Leaving"
|
||||
: "Leave"
|
||||
: isRemoving
|
||||
? "Removing"
|
||||
: "Remove"}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
});
|
||||
|
|
@ -2,12 +2,12 @@ import React, { useState } from "react";
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import { Button } from "@plane/ui";
|
||||
import { useUser } from "@/hooks/store";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
|
||||
type Props = {
|
||||
export type Props = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: () => Promise<void>;
|
||||
|
|
@ -22,7 +22,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
|
|||
// states
|
||||
const [isRemoving, setIsRemoving] = useState(false);
|
||||
// store hooks
|
||||
const { currentUser } = useUser();
|
||||
const { data: currentUser } = useUser();
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
|
|
@ -102,8 +102,8 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
|
|||
? "Leaving"
|
||||
: "Leave"
|
||||
: isRemoving
|
||||
? "Removing"
|
||||
: "Remove"}
|
||||
? "Removing"
|
||||
: "Remove"}
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { IWorkspace } from "@plane/types";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useRef, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
// headless ui
|
||||
import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
|
||||
|
|
@ -8,7 +8,7 @@ import { Transition } from "@headlessui/react";
|
|||
// ui
|
||||
import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
|
||||
// hooks
|
||||
import { useApplication } from "@/hooks/store";
|
||||
import { useAppTheme, useCommandPalette } from "@/hooks/store";
|
||||
import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
// assets
|
||||
|
|
@ -38,10 +38,8 @@ export interface WorkspaceHelpSectionProps {
|
|||
|
||||
export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
|
||||
// store hooks
|
||||
const {
|
||||
theme: { sidebarCollapsed, toggleSidebar },
|
||||
commandPalette: { toggleShortcutModal },
|
||||
} = useApplication();
|
||||
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
|
||||
const { toggleShortcutModal } = useCommandPalette();
|
||||
const { isMobile } = usePlatformOS();
|
||||
// states
|
||||
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
|
||||
|
|
@ -68,7 +66,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
|
|||
{!isCollapsed && (
|
||||
<Tooltip tooltipContent={`Version: v${packageJson.version}`} isMobile={isMobile}>
|
||||
<div className="w-1/2 cursor-default rounded-md bg-green-500/10 px-2 py-1 text-center text-xs font-medium text-green-500 outline-none leading-6">
|
||||
Community Edition
|
||||
Community
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
|
|
|||
19
web/components/workspace/logo.tsx
Normal file
19
web/components/workspace/logo.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
type Props = {
|
||||
logo: string | null | undefined;
|
||||
name: string | undefined;
|
||||
classNames?: string;
|
||||
};
|
||||
|
||||
export const WorkspaceLogo = (props: Props) => (
|
||||
<div
|
||||
className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
|
||||
!props.logo && "rounded bg-custom-primary-500 text-white"
|
||||
} ${props.classNames ? props.classNames : ""}`}
|
||||
>
|
||||
{props.logo && props.logo !== "" ? (
|
||||
<img src={props.logo} className="absolute left-0 top-0 h-full w-full rounded object-cover" alt="Workspace Logo" />
|
||||
) : (
|
||||
props.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { Controller, useFieldArray, useForm } from "react-hook-form";
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { ChevronDown, XCircle } from "lucide-react";
|
||||
// ui
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { useState, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { FC, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// lucide icons
|
||||
import { ChevronDown, Dot, XCircle } from "lucide-react";
|
||||
// ui
|
||||
import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
import { CustomSelect, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
|
||||
// components
|
||||
import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
|
||||
// constants
|
||||
|
|
@ -28,10 +28,11 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
|
|||
const { workspaceSlug } = router.query;
|
||||
// store hooks
|
||||
const {
|
||||
currentUser,
|
||||
currentUserSettings,
|
||||
// currentUser,
|
||||
// currentUserSettings,
|
||||
membership: { currentWorkspaceRole, leaveWorkspace },
|
||||
} = useUser();
|
||||
const { data: currentUser } = useUser();
|
||||
const {
|
||||
workspace: { updateMember, removeMemberFromWorkspace, getWorkspaceMemberDetails },
|
||||
} = useMember();
|
||||
|
|
@ -41,7 +42,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
|
|||
const memberDetails = getWorkspaceMemberDetails(memberId);
|
||||
|
||||
const handleLeaveWorkspace = async () => {
|
||||
if (!workspaceSlug || !currentUserSettings) return;
|
||||
if (!workspaceSlug || !currentUser) return;
|
||||
|
||||
await leaveWorkspace(workspaceSlug.toString())
|
||||
.then(() => {
|
||||
|
|
@ -51,7 +52,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
|
|||
});
|
||||
router.push("/profile");
|
||||
})
|
||||
.catch((err) =>
|
||||
.catch((err: any) =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useState, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import { Fragment, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useTheme } from "next-themes";
|
||||
import { usePopper } from "react-popper";
|
||||
import { mutate } from "swr";
|
||||
// ui
|
||||
import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
|
||||
// ui
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
// types
|
||||
import { IWorkspace } from "@plane/types";
|
||||
// plane ui
|
||||
import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// hooks
|
||||
import { useApplication, useUser, useWorkspace } from "@/hooks/store";
|
||||
import { useAppTheme, useUser, useWorkspace } from "@/hooks/store";
|
||||
import { WorkspaceLogo } from "./logo";
|
||||
// types
|
||||
// Static Data
|
||||
const userLinks = (workspaceSlug: string, userId: string) => [
|
||||
|
|
@ -53,12 +53,15 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
// store hooks
|
||||
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
|
||||
const { data: currentUser } = useUser();
|
||||
const {
|
||||
theme: { sidebarCollapsed, toggleSidebar },
|
||||
} = useApplication();
|
||||
const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser();
|
||||
updateCurrentUser,
|
||||
// isUserInstanceAdmin,
|
||||
signOut,
|
||||
} = useUser();
|
||||
const isUserInstanceAdmin = false;
|
||||
const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
|
||||
const { setTheme } = useTheme();
|
||||
// popper-js refs
|
||||
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
|
|
@ -79,19 +82,13 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
last_workspace_id: workspace?.id,
|
||||
});
|
||||
const handleSignOut = async () => {
|
||||
await signOut()
|
||||
.then(() => {
|
||||
mutate("CURRENT_USER_DETAILS", null);
|
||||
setTheme("system");
|
||||
router.push("/");
|
||||
await signOut().catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Failed to sign out. Please try again.",
|
||||
})
|
||||
.catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Failed to sign out. Please try again.",
|
||||
})
|
||||
);
|
||||
);
|
||||
};
|
||||
const handleItemClick = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
|
|
@ -112,21 +109,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 truncate">
|
||||
<div
|
||||
className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
|
||||
!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
|
||||
}`}
|
||||
>
|
||||
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
|
||||
<img
|
||||
src={activeWorkspace.logo}
|
||||
className="absolute left-0 top-0 h-full w-full rounded object-cover"
|
||||
alt="Workspace Logo"
|
||||
/>
|
||||
) : (
|
||||
activeWorkspace?.name?.charAt(0) ?? "..."
|
||||
)}
|
||||
</div>
|
||||
<WorkspaceLogo logo={activeWorkspace?.logo} name={activeWorkspace?.name} />
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="truncate text-base font-medium text-custom-text-100">
|
||||
{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}
|
||||
|
|
@ -152,9 +135,9 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items as={Fragment}>
|
||||
<div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-custom-border-100 outline-none">
|
||||
<div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4 vertical-scrollbar scrollbar-sm">
|
||||
<h6 className="sticky top-0 z-10 h-full w-full pt-3 pb-1 text-sm font-medium text-custom-sidebar-text-400 bg-custom-sidebar-background-100">
|
||||
<div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
|
||||
<div className="vertical-scrollbar scrollbar-sm mb-2 flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll px-4">
|
||||
<h6 className="sticky top-0 z-10 h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-sidebar-text-400">
|
||||
{currentUser?.email}
|
||||
</h6>
|
||||
{workspacesList ? (
|
||||
|
|
@ -220,7 +203,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
<Link href="/create-workspace" className="w-full">
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80 font-medium"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
|
||||
>
|
||||
<PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
|
||||
Create workspace
|
||||
|
|
@ -237,7 +220,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
>
|
||||
<Menu.Item
|
||||
as="div"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 font-medium"
|
||||
className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
|
||||
>
|
||||
<link.icon className="h-4 w-4 flex-shrink-0" />
|
||||
{link.name}
|
||||
|
|
@ -249,7 +232,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
<Menu.Item
|
||||
as="button"
|
||||
type="button"
|
||||
className="w-full flex items-center gap-2 rounded px-2 py-1 text-sm text-red-600 hover:bg-custom-sidebar-background-80 font-medium"
|
||||
className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
|
||||
onClick={handleSignOut}
|
||||
>
|
||||
<LogOut className="h-4 w-4 flex-shrink-0" />
|
||||
|
|
@ -267,7 +250,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
<Menu.Button className="grid place-items-center outline-none" ref={setReferenceElement}>
|
||||
<Avatar
|
||||
name={currentUser?.display_name}
|
||||
src={currentUser?.avatar}
|
||||
src={currentUser?.avatar || undefined}
|
||||
size={24}
|
||||
shape="square"
|
||||
className="!text-base"
|
||||
|
|
@ -308,7 +291,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className={`pt-2 ${isUserInstanceAdmin ? "pb-2" : ""}`}>
|
||||
<div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
|
||||
<Menu.Item
|
||||
as="button"
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Crown } from "lucide-react";
|
||||
|
|
@ -14,12 +14,12 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
|
|||
// helper
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import { useApplication, useEventTracker, useUser } from "@/hooks/store";
|
||||
import { useAppTheme, useEventTracker, useUser } from "@/hooks/store";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
|
||||
export const WorkspaceSidebarMenu = observer(() => {
|
||||
// store hooks
|
||||
const { theme: themeStore } = useApplication();
|
||||
const { toggleSidebar, sidebarCollapsed } = useAppTheme();
|
||||
const { captureEvent } = useEventTracker();
|
||||
const { isMobile } = usePlatformOS();
|
||||
const {
|
||||
|
|
@ -33,7 +33,7 @@ export const WorkspaceSidebarMenu = observer(() => {
|
|||
|
||||
const handleLinkClick = (itemKey: string) => {
|
||||
if (window.innerWidth < 768) {
|
||||
themeStore.toggleSidebar();
|
||||
toggleSidebar();
|
||||
}
|
||||
captureEvent(SIDEBAR_CLICKED, {
|
||||
destination: itemKey,
|
||||
|
|
@ -51,7 +51,7 @@ export const WorkspaceSidebarMenu = observer(() => {
|
|||
tooltipContent={link.label}
|
||||
position="right"
|
||||
className="ml-2"
|
||||
disabled={!themeStore?.sidebarCollapsed}
|
||||
disabled={!sidebarCollapsed}
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<div
|
||||
|
|
@ -59,7 +59,7 @@ export const WorkspaceSidebarMenu = observer(() => {
|
|||
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"
|
||||
} ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
|
||||
} ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
{
|
||||
<link.Icon
|
||||
|
|
@ -68,8 +68,8 @@ export const WorkspaceSidebarMenu = observer(() => {
|
|||
})}
|
||||
/>
|
||||
}
|
||||
{!themeStore?.sidebarCollapsed && <p className="leading-5">{link.label}</p>}
|
||||
{!themeStore?.sidebarCollapsed && link.key === "active-cycles" && (
|
||||
{!sidebarCollapsed && <p className="leading-5">{link.label}</p>}
|
||||
{!sidebarCollapsed && link.key === "active-cycles" && (
|
||||
<Crown className="h-3.5 w-3.5 text-amber-400" />
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useRef, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { ChevronUp, PenSquare, Search } from "lucide-react";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
// components
|
||||
import { CreateUpdateIssueModal } from "@/components/issues";
|
||||
|
|
@ -8,19 +9,16 @@ import { CreateUpdateIssueModal } from "@/components/issues";
|
|||
import { EIssuesStoreType } from "@/constants/issue";
|
||||
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
||||
// hooks
|
||||
import { useApplication, useEventTracker, useProject, useUser } from "@/hooks/store";
|
||||
import { useAppRouter, useAppTheme, useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
|
||||
import useLocalStorage from "@/hooks/use-local-storage";
|
||||
// types
|
||||
|
||||
export const WorkspaceSidebarQuickAction = observer(() => {
|
||||
// states
|
||||
const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
|
||||
|
||||
const {
|
||||
router: { workspaceSlug },
|
||||
theme: themeStore,
|
||||
commandPalette: commandPaletteStore,
|
||||
} = useApplication();
|
||||
// store hooks
|
||||
const { toggleCreateIssueModal, toggleCommandPaletteModal } = useCommandPalette();
|
||||
const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
|
||||
const { workspaceSlug } = useAppRouter();
|
||||
const { setTrackElement } = useEventTracker();
|
||||
const { joinedProjectIds } = useProject();
|
||||
const {
|
||||
|
|
@ -35,8 +33,6 @@ export const WorkspaceSidebarQuickAction = observer(() => {
|
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const timeoutRef = useRef<any>();
|
||||
|
||||
const isSidebarCollapsed = themeStore.sidebarCollapsed;
|
||||
|
||||
const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
|
||||
|
||||
const disabled = joinedProjectIds.length === 0;
|
||||
|
|
@ -94,7 +90,7 @@ export const WorkspaceSidebarQuickAction = observer(() => {
|
|||
} ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
|
||||
onClick={() => {
|
||||
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
|
||||
commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
|
|
@ -142,14 +138,14 @@ export const WorkspaceSidebarQuickAction = observer(() => {
|
|||
)}
|
||||
|
||||
<button
|
||||
className={`flex flex-shrink-0 items-center rounded p-2 gap-2 outline-none ${
|
||||
className={`flex flex-shrink-0 items-center gap-2 rounded p-2 outline-none ${
|
||||
isAuthorizedUser ? "justify-center" : "w-full"
|
||||
} ${
|
||||
isSidebarCollapsed
|
||||
? "hover:bg-custom-sidebar-background-80"
|
||||
: "border-[0.5px] border-custom-border-200 shadow-custom-sidebar-shadow-2xs"
|
||||
}`}
|
||||
onClick={() => commandPaletteStore.toggleCommandPaletteModal(true)}
|
||||
onClick={() => toggleCommandPaletteModal(true)}
|
||||
>
|
||||
<Search className="h-4 w-4 text-custom-sidebar-text-300" />
|
||||
{!isAuthorizedUser && !isSidebarCollapsed && <span className="text-xs font-medium">Open command menu</span>}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
// types
|
||||
import { IWorkspaceView } from "@plane/types";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// types
|
||||
import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
// types
|
||||
import { IWorkspaceView } from "@plane/types";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// icons
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { observer } from "mobx-react-lite";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
|
|
@ -28,5 +28,11 @@ export const GlobalViewsList: React.FC<Props> = observer((props) => {
|
|||
|
||||
const filteredViewsList = getSearchedViews(searchQuery);
|
||||
|
||||
return <>{filteredViewsList?.map((viewId) => <GlobalViewListItem key={viewId} viewId={viewId} />)}</>;
|
||||
return (
|
||||
<>
|
||||
{filteredViewsList?.map((viewId) => (
|
||||
<GlobalViewListItem key={viewId} viewId={viewId} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,20 +14,22 @@ import { useUser } from "@/hooks/store";
|
|||
|
||||
export const WorkspaceActiveCyclesUpgrade = observer(() => {
|
||||
// store hooks
|
||||
const { currentUser } = useUser();
|
||||
const {
|
||||
userProfile: { data: userProfile },
|
||||
} = useUser();
|
||||
|
||||
const isDarkMode = currentUser?.theme.theme === "dark";
|
||||
const isDarkMode = userProfile?.theme.theme === "dark";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full vertical-scrollbar scrollbar-lg">
|
||||
<div className="vertical-scrollbar scrollbar-lg flex h-full flex-col gap-10 rounded-xl px-8 pt-8">
|
||||
<div
|
||||
className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
|
||||
"bg-gradient-to-l from-[#CFCFCF] to-[#212121]": currentUser?.theme.theme === "dark",
|
||||
"bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": currentUser?.theme.theme === "light",
|
||||
className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
|
||||
"bg-gradient-to-l from-[#CFCFCF] to-[#212121]": userProfile?.theme.theme === "dark",
|
||||
"bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
|
||||
})}
|
||||
>
|
||||
<div className="relative px-14 flex flex-col gap-7 justify-center lg:w-1/2">
|
||||
<div className="flex flex-col gap-2 max-w-64">
|
||||
<div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">
|
||||
<div className="flex max-w-64 flex-col gap-2">
|
||||
<h2 className="text-2xl font-semibold">On-demand snapshots of all your cycles</h2>
|
||||
<p className="text-base font-medium text-custom-text-300">
|
||||
Monitor cycles across projects, track high-priority issues, and zoom in cycles that need attention.
|
||||
|
|
@ -54,8 +56,8 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative w-1/2 hidden lg:block">
|
||||
<span className="absolute right-0 bottom-0">
|
||||
<div className="relative hidden w-1/2 lg:block">
|
||||
<span className="absolute bottom-0 right-0">
|
||||
<Image
|
||||
src={`/workspace-active-cycles/cta-r-1-${isDarkMode ? "dark" : "light"}.webp`}
|
||||
height={420}
|
||||
|
|
@ -63,7 +65,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
|
|||
alt="r-1"
|
||||
/>
|
||||
</span>
|
||||
<span className="absolute right-1/2 -bottom-16 rounded-xl">
|
||||
<span className="absolute -bottom-16 right-1/2 rounded-xl">
|
||||
<Image
|
||||
src={`/workspace-active-cycles/cta-r-2-${isDarkMode ? "dark" : "light"}.webp`}
|
||||
height={210}
|
||||
|
|
@ -73,12 +75,12 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 pb-8 h-full">
|
||||
<div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
|
||||
<div key={item.title} className="flex flex-col gap-2 p-4 min-h-32 w-full bg-custom-background-80 rounded-md">
|
||||
<div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-custom-background-80 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<item.icon className="text-blue-500 h-4 w-4" />
|
||||
<item.icon className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
<span className="text-sm text-custom-text-300">{item.description}</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue