fix: workspace & user avatar tooltip (#2851)

* 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

web/components/onboarding/index.ts

@@ -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";

web/components/onboarding/invitations.tsx

@@ -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;

web/components/onboarding/invite-members.tsx

@@ -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

web/components/onboarding/join-workspaces.tsx

@@ -3,10 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import Invitations from "./invitations";
+import { Invitations, OnboardingSidebar, OnboardingStepIndicator, Workspace } from "components/onboarding";
-import DummySidebar from "components/account/sidebar";
-import OnboardingStepIndicator from "components/account/step-indicator";
-import { Workspace } from "./workspace";
 // 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}

web/components/onboarding/onboarding-sidebar.tsx

@@ -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;
+export const OnboardingSidebar: React.FC<Props> = (props) => {
-  const { workspace: workspaceStore, user: userStore } = useMobxStore();
+  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"}
+                      name={currentUser?.email}
-                      src={workspace && workspace.logo ? workspace.logo : ""}
+                      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"}
+                name={userFullName ?? currentUser?.email}
-                src={workspace && workspace.logo ? workspace.logo : ""}
+                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;

web/components/onboarding/step-indicator.tsx

@@ -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;

web/components/onboarding/user-details.tsx

@@ -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 { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding";
-import OnboardingStepIndicator from "components/account/step-indicator";
 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;
+  const { user, setUserName } = props;
-  // states
   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..."

web/pages/onboarding/index.tsx

@@ -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">
+              <div>
-                {step != 1 && (
+                <Controller
-                  <Avatar
+                  control={control}
-                    name={workspaces ? workspaces[0].name : "N"}
+                  name="full_name"
-                    size={35}
+                  render={({ field: { value } }) => (
-                    shape="square"
+                    <div className="pr-4 flex gap-x-2 items-center">
-                    fallbackBackgroundColor="#FCBE1D"
+                      {step != 1 && (
-                    className="!text-base"
+                        <Avatar
-                  />
+                          name={
-                )}
+                            currentUser?.first_name
-                <div>
+                              ? `${currentUser?.first_name} ${currentUser?.last_name ?? ""}`
-                  {step != 1 && (
+                              : value.length > 0
-                    <p className="text-sm text-custom-text-200 font-medium">
+                              ? value
-                      {currentUser?.first_name} {currentUser?.last_name}
+                              : currentUser?.email
-                    </p>
+                          }
-                  )}
+                          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>
-                    <Menu.Button className={"flex items-center gap-x-2"}>
+                          <Menu.Button className={"flex items-center gap-x-2"}>
-                      <span className="text-base font-medium">{user.email}</span>
+                            <span className="text-base font-medium">{user.email}</span>
-                      <ChevronDown className="h-4 w-4 text-custom-text-300" />
+                            <ChevronDown className="h-4 w-4 text-custom-text-300" />
-                    </Menu.Button>
+                          </Menu.Button>
-                    <Transition
+                          <Transition
-                      enter="transition duration-100 ease-out"
+                            enter="transition duration-100 ease-out"
-                      enterFrom="transform scale-95 opacity-0"
+                            enterFrom="transform scale-95 opacity-0"
-                      enterTo="transform scale-100 opacity-100"
+                            enterTo="transform scale-100 opacity-100"
-                      leave="transition duration-75 ease-out"
+                            leave="transition duration-75 ease-out"
-                      leaveFrom="transform scale-100 opacity-100"
+                            leaveFrom="transform scale-100 opacity-100"
-                      leaveTo="transform scale-95 opacity-0"
+                            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);
-                            }}
                           >
-                            Delete
+                            <Menu.Items className={"absolute translate-x-full"}>
-                          </div>
+                              <Menu.Item>
-                        </Menu.Item>
+                                <div
-                      </Menu.Items>
+                                  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"
-                    </Transition>
+                                  onClick={() => {
-                  </Menu>
+                                    setShowDeleteModal(true);
-                </div>
+                                  }}
+                                >
+                                  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}