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
2024-06-14 14:31:34 +00:00 · 2023-11-25 21:31:09 +05:30 · 2023-11-25 21:31:09 +05:30 · 1c29f0b0a9
commit 1c29f0b0a9
parent acc6b5ed5c
8 changed files with 126 additions and 91 deletions
--- 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";
--- 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;
--- 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
--- 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}
--- a/web/components/onboarding/onboarding-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;
--- a/web/components/onboarding/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;
--- 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..."
--- 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}