omar/eng-67-invite-modal-if-no-teams-disable-add-user-to-team (#602)

Author: OmarMcAdam

apps/web/src/app/[orgShortcode]/settings/org/users/invites/_components/invite-modal.tsx

@@ -35,6 +35,11 @@ import {
   FormItem,
   FormMessage
 } from '@/src/components/shadcn-ui/form';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '@/src/components/shadcn-ui/tooltip';
 
 const inviteFormSchema = z.object({
   firstName: z.string().min(1).max(64),
@@ -384,10 +389,25 @@ export function InviteModal() {
                       Add User to Teams
                     </div>
                     <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      {orgTeams?.teams && orgTeams?.teams?.length > 0 ? (
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      ) : (
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <Switch
+                              disabled
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{`You don't have any teams`}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
                     </FormControl>
                     <FormMessage />
                   </FormItem>

apps/web/src/components/avatar.tsx

@@ -4,12 +4,7 @@ import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn, generateAvatarUrl, getInitials } from '@/src/lib/utils';
 import { type TypeId, inferTypeId } from '@u22n/utils/typeid';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from './shadcn-ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from './shadcn-ui/tooltip';
 import {
   Avatar as AvatarShad,
   AvatarFallback,
@@ -100,31 +95,29 @@ export function Avatar(props: AvatarProps) {
       </AvatarShad>
     </div>
   ) : (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger className="w-fit">
-          <AvatarShad
-            className={avatarVariants({
-              color: props.color,
-              size: props.size
-            })}>
-            <AvatarImage
-              src={avatarUrl}
-              alt={altText}
-            />
-            <AvatarFallback>{getInitials(altText)}</AvatarFallback>
-          </AvatarShad>
-        </TooltipTrigger>
-        <TooltipContent className="flex flex-col gap-1">
-          {altText}
-          <AvatarIcon
-            avatarProfilePublicId={props.avatarProfilePublicId}
-            size="xs"
-            withDot
+    <Tooltip>
+      <TooltipTrigger className="w-fit">
+        <AvatarShad
+          className={avatarVariants({
+            color: props.color,
+            size: props.size
+          })}>
+          <AvatarImage
+            src={avatarUrl}
+            alt={altText}
           />
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+          <AvatarFallback>{getInitials(altText)}</AvatarFallback>
+        </AvatarShad>
+      </TooltipTrigger>
+      <TooltipContent className="flex flex-col gap-1">
+        {altText}
+        <AvatarIcon
+          avatarProfilePublicId={props.avatarProfilePublicId}
+          size="xs"
+          withDot
+        />
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

apps/web/src/components/shadcn-ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'bg-base-12 text-base-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 overflow-hidden rounded-md px-3 py-1.5 text-xs',
+        'bg-base-12 text-base-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[5000] overflow-hidden rounded-md px-3 py-1.5 text-xs',
         className
       )}
       {...props}