From 1c29f0b0a97bc5f0b1bd3f538c94baef2d756c7f Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Sat, 25 Nov 2023 21:31:09 +0530
Subject: [PATCH] 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 +
 web/components/onboarding/invitations.tsx     |   6 +-
 web/components/onboarding/invite-members.tsx  |   8 +-
 web/components/onboarding/join-workspaces.tsx |   7 +-
 .../onboarding-sidebar.tsx}                   |  39 +++---
 .../step-indicator.tsx                        |   4 +-
 web/components/onboarding/user-details.tsx    |  24 +++-
 web/pages/onboarding/index.tsx                | 126 +++++++++++-------
 8 files changed, 126 insertions(+), 91 deletions(-)
 rename web/components/{account/sidebar.tsx => onboarding/onboarding-sidebar.tsx} (89%)
 rename web/components/{account => onboarding}/step-indicator.tsx (87%)

diff --git a/web/components/onboarding/index.ts b/web/components/onboarding/index.ts
index f19eb9612..57a84818c 100644
--- a/web/components/onboarding/index.ts
+++ b/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";
diff --git a/web/components/onboarding/invitations.tsx b/web/components/onboarding/invitations.tsx
index 377ca2932..5472595f5 100644
--- a/web/components/onboarding/invitations.tsx
+++ b/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;
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 705efef29..88361dd23 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/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
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index c51c0de9b..cb2f3ee71 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/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 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}
diff --git a/web/components/account/sidebar.tsx b/web/components/onboarding/onboarding-sidebar.tsx
similarity index 89%
rename from web/components/account/sidebar.tsx
rename to web/components/onboarding/onboarding-sidebar.tsx
index 3604df485..feca84bf6 100644
--- a/web/components/account/sidebar.tsx
+++ b/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;
-  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;
diff --git a/web/components/account/step-indicator.tsx b/web/components/onboarding/step-indicator.tsx
similarity index 87%
rename from web/components/account/step-indicator.tsx
rename to web/components/onboarding/step-indicator.tsx
index 148d2933b..2f98b33b5 100644
--- a/web/components/account/step-indicator.tsx
+++ b/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;
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 6dff16c93..affc814c0 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/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 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..."
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 517e151f6..636bc48b5 100644
--- a/web/pages/onboarding/index.tsx
+++ b/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">
-                {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}