fix(ui): feedback on profile/team/invitation (NangoHQ#2530)

## Describe your changes Fixes https://linear.app/nango/issue/SAM-11/integration-feedback - Change wording - Fix: Admin shown to everybody - Change button shape - Remove input for email - Remove some copy button
hassan254-prog · Jul 19, 2024 · 7acdf66 · 7acdf66
1 parent 3c5607a
commit 7acdf66
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 22 deletions.
diff --git a/packages/webapp/src/pages/Account/InviteSignup.tsx b/packages/webapp/src/pages/Account/InviteSignup.tsx
@@ -93,21 +93,21 @@ export const InviteSignup: React.FC = () => {
         <DefaultLayout>
             <div className="flex flex-col justify-center">
                 <div className="flex flex-col justify-center mx-4 gap-4">
-                    <h2 className="text-3xl font-semibold text-white text-center">Join a team</h2>
+                    <h2 className="text-3xl font-semibold text-white text-center">{isLogged ? 'Request to join a different team' : 'Join a team'}</h2>
                     <div className="text-text-light-gray text-sm text-center">
                         <p>
                             {data.invitedBy.name} has invited you to transfer to a new team: <strong className="text-white">{data.newTeam.name}</strong> (
                             {data.newTeamUsers} {data.newTeamUsers > 1 ? 'members' : 'member'})
                         </p>{' '}
-                        <p>If you accept, you will permanently lose access to your existing team.</p>
+                        {isLogged && <p>If you accept, you will permanently lose access to your existing team.</p>}
                     </div>
                     {isLogged && (
                         <div className="flex gap-2 mt-6 items-center justify-center">
                             <Button variant={'zinc'} onClick={onDecline} disabled={loadingAccept} isLoading={loadingDecline}>
-                                Cancel
+                                Decline
                             </Button>
                             <Button variant={'danger'} onClick={onAccept} disabled={loadingDecline} isLoading={loadingAccept}>
-                                Join new team
+                                Join a different team
                             </Button>
                         </div>
                     )}

diff --git a/packages/webapp/src/pages/Team/Settings.tsx b/packages/webapp/src/pages/Team/Settings.tsx
@@ -12,7 +12,7 @@ import { Admin } from './components/Admin';
 export const TeamSettings: React.FC = () => {
     const env = useStore((state) => state.env);
 
-    const { error, team, loading } = useTeam(env);
+    const { error, team, isAdminTeam, loading } = useTeam(env);
 
     if (loading) {
         return (
@@ -51,7 +51,7 @@ export const TeamSettings: React.FC = () => {
             <div className="flex flex-col gap-12 mt-16">
                 <TeamInfo />
                 <TeamUsers />
-                <Admin />
+                {isAdminTeam && <Admin />}
             </div>
         </DashboardLayout>
     );

diff --git a/packages/webapp/src/pages/Team/components/Info.tsx b/packages/webapp/src/pages/Team/components/Info.tsx
@@ -70,7 +70,7 @@ export const TeamInfo: React.FC = () => {
                 <div className="flex justify-end gap-1 items-center">
                     <Button
                         size={'sm'}
-                        variant={'zombie'}
+                        variant={'zinc'}
                         onClick={() => {
                             setName(team.name);
                             setEdit(false);

diff --git a/packages/webapp/src/pages/Team/components/Users.tsx b/packages/webapp/src/pages/Team/components/Users.tsx
@@ -13,6 +13,10 @@ export const columns: ColumnDef<ApiUser | ApiInvitation>[] = [
         header: 'Name',
         size: 180,
         cell: ({ row }) => {
+            if ('created_at' in row.original) {
+                return '-';
+            }
+
             return <div className="truncate text-sm">{row.original.name || '-'}</div>;
         }
     },

diff --git a/packages/webapp/src/pages/User/Settings.tsx b/packages/webapp/src/pages/User/Settings.tsx
@@ -5,7 +5,6 @@ import { Skeleton } from '../../components/ui/Skeleton';
 import { Input } from '../../components/ui/input/Input';
 import { apiPatchUser, useUser } from '../../hooks/useUser';
 import DashboardLayout from '../../layout/DashboardLayout';
-import { CopyButton } from '../../components/ui/button/CopyButton';
 import { Pencil1Icon } from '@radix-ui/react-icons';
 import { useToast } from '../../hooks/useToast';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../components/ui/Tooltip';
@@ -74,7 +73,6 @@ export const UserSettings: React.FC = () => {
                         disabled={!edit}
                         after={
                             <div className="flex gap-1 items-center">
-                                <CopyButton text={name} />
                                 {!edit && (
                                     <Tooltip delayDuration={0}>
                                         <TooltipTrigger asChild>
@@ -101,7 +99,7 @@ export const UserSettings: React.FC = () => {
                         <div className="flex justify-end gap-1 items-center">
                             <Button
                                 size={'sm'}
-                                variant={'zombie'}
+                                variant={'zinc'}
                                 onClick={() => {
                                     setName(user!.name);
                                     setEdit(false);
@@ -117,18 +115,7 @@ export const UserSettings: React.FC = () => {
                 </div>
                 <div className="flex flex-col gap-5">
                     <h3 className="font-semibold text-sm text-white">Email</h3>
-                    <Input
-                        ref={ref}
-                        variant={'flat'}
-                        inputSize={'lg'}
-                        value={user!.email}
-                        disabled={true}
-                        after={
-                            <div className="flex gap-1 items-center">
-                                <CopyButton text={user!.email} />
-                            </div>
-                        }
-                    />
+                    <p className="text-white text-sm">{user!.email}</p>
                 </div>
             </div>
         </DashboardLayout>