thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: workspace & user avatar tooltip (#2851)

Browse Source 
* fix: workspace & user avatar tooltip

* chore: user name update while typing on top right avatar

* chore: imports placement

* fix: rendering condition

* chore: component re-arrangement

* fix: imports
This commit is contained in:
Lakhan Baheti 2023-11-25 21:31:09 +05:30 committed by sriram veeraghanta
parent acc6b5ed5c
commit 1c29f0b0a9
8 changed files with 126 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/onboarding/index.ts
View File

@ -3,3 +3,6 @@ export * from "./invite-members";
export * from "./join-workspaces";
export * from "./user-details";
export * from "./workspace";
export * from "./invitations";
export * from "./onboarding-sidebar";
export * from "./step-indicator";

6
web/components/onboarding/invitations.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import useSWR, { mutate } from "swr";
// components
import { Button, Loader } from "@plane/ui";
import { Button } from "@plane/ui";
// helpers
import { truncateText } from "helpers/string.helper";
@ -24,7 +24,7 @@ type Props = {
};
const workspaceService = new WorkspaceService();
const Invitations: React.FC<Props> = (props) => {
export const Invitations: React.FC<Props> = (props) => {
const { handleNextStep, setTryDiffAccount } = props;
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
@ -169,5 +169,3 @@ const EmptyInvitation = ({ email, setTryDiffAccount }: { email: string; setTryDi
</p>
</div>
);
export default Invitations;

8
web/components/onboarding/invite-members.tsx
View File

@ -1,11 +1,9 @@
import React, { useEffect, useRef, useState } from "react";
// next
import Image from "next/image";
import { useTheme } from "next-themes";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// react-hook-form
import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
// services
import { WorkspaceService } from "services/workspace.service";
// hooks
@ -13,11 +11,9 @@ import useToast from "hooks/use-toast";
// ui
import { Button, Input } from "@plane/ui";
// components
import OnboardingStepIndicator from "components/account/step-indicator";
import { OnboardingStepIndicator } from "components/onboarding/step-indicator";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons
import { Check, ChevronDown, Plus, User2, XCircle } from "lucide-react";
// types
import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
// constants

7
web/components/onboarding/join-workspaces.tsx
View File

@ -3,10 +3,7 @@ import { Controller, useForm } from "react-hook-form";
// hooks
import useUser from "hooks/use-user";
// components
import Invitations from "./invitations";
import DummySidebar from "components/account/sidebar";
import OnboardingStepIndicator from "components/account/step-indicator";
import { Workspace } from "./workspace";
import { Invitations, OnboardingSidebar, OnboardingStepIndicator, Workspace } from "components/onboarding";
// types
import { IWorkspace, TOnboardingSteps } from "types";
@ -44,7 +41,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount
control={control}
name="name"
render={({ field: { value } }) => (
<DummySidebar
<OnboardingSidebar
watch={watch}
setValue={setValue}
control={control}

39
web/components/account/sidebar.tsx → web/components/onboarding/onboarding-sidebar.tsx
View File

@ -85,12 +85,17 @@ type Props = {
control?: Control<IWorkspace, any>;
setValue?: UseFormSetValue<IWorkspace>;
watch?: UseFormWatch<IWorkspace>;
userFullName?: string;
};
var timer: number = 0;
var lastWorkspaceName: string = "";
const DummySidebar: React.FC<Props> = (props) => {
const { workspaceName, showProject, control, setValue, watch } = props;
const { workspace: workspaceStore, user: userStore } = useMobxStore();
export const OnboardingSidebar: React.FC<Props> = (props) => {
const { workspaceName, showProject, control, setValue, watch, userFullName } = props;
const {
workspace: workspaceStore,
user: { currentUser },
} = useMobxStore();
const workspace = workspaceStore.workspaces ? workspaceStore.workspaces[0] : null;
const { resolvedTheme } = useTheme();
@ -148,12 +153,12 @@ const DummySidebar: React.FC<Props> = (props) => {
>
<div className="flex flex-shrink-0">
<Avatar
name={value.length > 0 ? value[0].toLocaleUpperCase() : "N"}
name={value.length > 0 ? value : "New Workspace"}
src={""}
size={30}
shape="square"
fallbackBackgroundColor="black"
className="!text-base"
className="!text-base capitalize"
/>
</div>
@ -165,11 +170,12 @@ const DummySidebar: React.FC<Props> = (props) => {
<div className="flex transition-all w-full border border-transparent items-center gap-y-2 px-4 pt-6 truncate">
<div className="flex flex-shrink-0">
<Avatar
name={value.length > 0 ? value : workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
name={value.length > 0 ? value : workspace ? workspace.name : "New Workspace"}
src={""}
size={24}
shape="square"
className="!text-base"
fallbackBackgroundColor="black"
className="!text-base capitalize"
/>
</div>
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
@ -178,12 +184,12 @@ const DummySidebar: React.FC<Props> = (props) => {
</div>
<div className="flex flex-shrink-0">
<Avatar
name={"N"}
src={workspace && workspace.logo ? workspace.logo : ""}
name={currentUser?.email}
src={currentUser?.avatar}
size={24}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
className="!text-base capitalize"
/>
</div>
</div>
@ -194,11 +200,12 @@ const DummySidebar: React.FC<Props> = (props) => {
<div className="flex transition-all w-full items-center gap-y-2 px-4 pt-6 truncate">
<div className="flex flex-shrink-0">
<Avatar
name={workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
name={workspace ? workspace.name : "New Workspace"}
src={""}
size={24}
shape="square"
className="!text-base"
fallbackBackgroundColor="black"
className="!text-base capitalize"
/>
</div>
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
@ -207,12 +214,12 @@ const DummySidebar: React.FC<Props> = (props) => {
</div>
<div className="flex flex-shrink-0">
<Avatar
name={"N"}
src={workspace && workspace.logo ? workspace.logo : ""}
name={userFullName ?? currentUser?.email}
src={currentUser?.avatar}
size={24}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
className="!text-base capitalize"
/>
</div>
</div>
@ -286,5 +293,3 @@ const DummySidebar: React.FC<Props> = (props) => {
</div>
);
};
export default DummySidebar;

4
web/components/account/step-indicator.tsx → web/components/onboarding/step-indicator.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
const OnboardingStepIndicator = ({ step }: { step: number }) => (
export const OnboardingStepIndicator = ({ step }: { step: number }) => (
<div className="flex items-center justify-center">
<div className="h-3 w-3 rounded-full bg-custom-primary-100 z-10" />
<div className={`h-1 w-14 -ml-1 ${step >= 2 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} />
@ -17,5 +17,3 @@ const OnboardingStepIndicator = ({ step }: { step: number }) => (
/>
</div>
);
export default OnboardingStepIndicator;

24
web/components/onboarding/user-details.tsx
View File

@ -7,8 +7,7 @@ import { Camera, User2 } from "lucide-react";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { Button, Input } from "@plane/ui";
import DummySidebar from "components/account/sidebar";
import OnboardingStepIndicator from "components/account/step-indicator";
import { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding";
import { UserImageUploadModal } from "components/core";
// types
import { IUser } from "types";
@ -25,6 +24,7 @@ const defaultValues: Partial<IUser> = {
type Props = {
user?: IUser;
setUserName: (name: string) => void;
};
const USE_CASES = [
@ -41,8 +41,7 @@ const USE_CASES = [
const fileService = new FileService();
export const UserDetails: React.FC<Props> = observer((props) => {
const { user } = props;
// states
const { user, setUserName } = props;
const [isRemoving, setIsRemoving] = useState(false);
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const {
@ -90,7 +89,17 @@ export const UserDetails: React.FC<Props> = observer((props) => {
return (
<div className="w-full h-full space-y-7 sm:space-y-10 overflow-y-auto flex ">
<div className="h-full fixed hidden lg:block w-1/5 max-w-[320px]">
<DummySidebar showProject workspaceName={workspaceName} />
<Controller
control={control}
name="first_name"
render={({ field: { value } }) => (
<OnboardingSidebar
userFullName={value.length === 0 ? undefined : value}
showProject
workspaceName={workspaceName}
/>
)}
/>
</div>
<Controller
control={control}
@ -155,7 +164,10 @@ export const UserDetails: React.FC<Props> = observer((props) => {
type="text"
value={value}
autoFocus={true}
onChange={onChange}
onChange={(event) => {
setUserName(event.target.value);
onChange(event);
}}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your full name..."

126
web/pages/onboarding/index.tsx
View File

@ -1,8 +1,12 @@
import { useEffect, useState, ReactElement, Fragment } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { useTheme } from "next-themes";
import { ChevronDown } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
import { Controller, useForm } from "react-hook-form";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
@ -13,7 +17,8 @@ import useUserAuth from "hooks/use-user-auth";
import DefaultLayout from "layouts/default-layout";
import { UserAuthWrapper } from "layouts/auth-layout";
// components
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
import { InviteMembers, JoinWorkspaces, UserDetails } from "components/onboarding";
import { DeactivateAccountModal } from "components/account";
// ui
import { Avatar, Spinner } from "@plane/ui";
// images
@ -21,10 +26,6 @@ import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// types
import { IUser, TOnboardingSteps } from "types";
import { NextPageWithLayout } from "types/app";
import { ChevronDown } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
import { DeactivateAccountModal } from "components/account";
import { useRouter } from "next/router";
// services
const workspaceService = new WorkspaceService();
@ -46,6 +47,12 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
const {} = useUserAuth("onboarding");
const { control, setValue } = useForm<{ full_name: string }>({
defaultValues: {
full_name: "",
},
});
const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () =>
workspaceService.userWorkspaceInvitations()
);
@ -111,51 +118,70 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
Plane
</div>
<div className="pr-4 flex gap-x-2 items-center">
{step != 1 && (
<Avatar
name={workspaces ? workspaces[0].name : "N"}
size={35}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
/>
)}
<div>
{step != 1 && (
<p className="text-sm text-custom-text-200 font-medium">
{currentUser?.first_name} {currentUser?.last_name}
</p>
)}
<div>
<Controller
control={control}
name="full_name"
render={({ field: { value } }) => (
<div className="pr-4 flex gap-x-2 items-center">
{step != 1 && (
<Avatar
name={
currentUser?.first_name
? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
: value.length > 0
? value
: currentUser?.email
}
src={currentUser?.avatar}
size={35}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base capitalize"
/>
)}
<div>
{step != 1 && (
<p className="text-sm text-custom-text-200 font-medium">
{currentUser?.first_name
? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
: value.length > 0
? value
: null}
</p>
)}
<Menu>
<Menu.Button className={"flex items-center gap-x-2"}>
<span className="text-base font-medium">{user.email}</span>
<ChevronDown className="h-4 w-4 text-custom-text-300" />
</Menu.Button>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className={"absolute translate-x-full"}>
<Menu.Item>
<div
className="absolute pr-28 hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
onClick={() => {
setShowDeleteModal(true);
}}
<Menu>
<Menu.Button className={"flex items-center gap-x-2"}>
<span className="text-base font-medium">{user.email}</span>
<ChevronDown className="h-4 w-4 text-custom-text-300" />
</Menu.Button>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
Delete
</div>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
<Menu.Items className={"absolute translate-x-full"}>
<Menu.Item>
<div
className="absolute pr-28 hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
onClick={() => {
setShowDeleteModal(true);
}}
>
Delete
</div>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
)}
/>
</div>
</div>
</div>
@ -170,7 +196,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
stepChange={stepChange}
/>
) : step === 2 ? (
<UserDetails user={user} />
<UserDetails setUserName={(value) => setValue("full_name", value)} user={user} />
) : (
<InviteMembers
finishOnboarding={finishOnboarding}