feat: Add tooltip component and disable PM state in UI

frontend/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@sentry/react": "^10.30.0",
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.90.12",

frontend/src/components/EditablePill.tsx

@@ -1,10 +1,12 @@
+import type {ReactNode} from 'react';
 import {useCallback, useState} from 'react';
 import {cva} from 'class-variance-authority';
 import {cn} from 'utils/cn';
 
 import {Pill, type PillProps} from './Pill';
 import {Popover, PopoverContent, PopoverTrigger} from './Popover';
 import {Spinner} from './Spinner';
+import {Tooltip, TooltipContent, TooltipTrigger} from './Tooltip';
 
 const optionRowStyles = cva([
   'w-full',
@@ -39,6 +41,7 @@ export interface EditablePillProps<T extends string> {
   className?: string;
   getVariant?: (value: T) => PillProps['variant'];
   placeholder?: string;
+  disabledOptions?: Partial<Record<T, ReactNode>>;
 }
 
 export function EditablePill<T extends string>({
@@ -48,6 +51,7 @@ export function EditablePill<T extends string>({
   className,
   getVariant,
   placeholder = 'Not set',
+  disabledOptions,
 }: EditablePillProps<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
@@ -103,13 +107,16 @@ export function EditablePill<T extends string>({
         case 'Enter':
         case ' ':
           event.preventDefault();
-          if (focusedIndex >= 0) {
+          if (
+            focusedIndex >= 0 &&
+            !(disabledOptions && options[focusedIndex] in disabledOptions)
+          ) {
             handleSelect(options[focusedIndex]);
           }
           break;
       }
     },
-    [isSaving, isOpen, focusedIndex, options, handleSelect]
+    [isSaving, isOpen, focusedIndex, options, handleSelect, disabledOptions]
   );
 
   const variant = value
@@ -140,23 +147,42 @@ export function EditablePill<T extends string>({
               ? getVariant(option)
               : (option as PillProps['variant']);
             const isFocused = index === focusedIndex;
-            return (
+            const isDisabled = disabledOptions !== undefined && option in disabledOptions;
+            const disabledMessage = disabledOptions?.[option];
+
+            const row = (
               <div
                 key={option}
                 tabIndex={-1}
                 className={cn(
                   optionRowStyles(),
-                  isFocused && 'bg-gray-100 dark:bg-neutral-700'
+                  isFocused && 'bg-gray-100 dark:bg-neutral-700',
+                  isDisabled &&
+                    'cursor-default opacity-50 hover:bg-transparent dark:hover:bg-transparent'
                 )}
-                onClick={() => handleSelect(option)}
+                onClick={isDisabled ? undefined : () => handleSelect(option)}
                 role="option"
                 aria-selected={option === value}
+                aria-disabled={isDisabled}
               >
                 <Pill variant={optionVariant} className={cn(optionStyles())}>
                   {option}
                 </Pill>
               </div>
             );
+
+            if (isDisabled) {
+              return (
+                <Tooltip key={option}>
+                  <TooltipTrigger asChild>{row}</TooltipTrigger>
+                  <TooltipContent side="bottom" className="max-w-xs">
+                    {disabledMessage}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+
+            return row;
           })}
         </div>
       </PopoverContent>

frontend/src/components/Tooltip.tsx

@@ -0,0 +1,64 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {cn} from 'utils/cn';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+> {
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  ref,
+  children,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50',
+          'rounded-radius-md',
+          'border',
+          'border-gray-200',
+          'bg-background-primary',
+          'px-space-sm',
+          'py-space-xs',
+          'text-size-sm',
+          'text-content-primary',
+          'shadow-lg',
+          'animate-in',
+          'fade-in-0',
+          'zoom-in-95',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow asChild>
+          <svg
+            className="-my-px fill-background-primary stroke-gray-200"
+            width={10}
+            height={5}
+            viewBox="0 0 30 10"
+            preserveAspectRatio="none"
+          >
+            <polygon points="0,0 30,0 15,10" className="stroke-none" />
+            <polyline points="0,0 15,10 30,0" fill="none" strokeWidth={3} />
+          </svg>
+        </TooltipPrimitive.Arrow>
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {TooltipProvider, Tooltip, TooltipTrigger, TooltipContent};

frontend/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import * as Sentry from '@sentry/react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {createRouter, RouterProvider} from '@tanstack/react-router';
+import {TooltipProvider} from 'components/Tooltip';
 
 import {routeTree} from './routeTree.gen';
 
@@ -51,7 +52,9 @@ if (!rootElement.innerHTML) {
   });
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <TooltipProvider>
+        <RouterProvider router={router} />
+      </TooltipProvider>
     </StrictMode>
   );
 }

frontend/src/routes/$incidentId/components/IncidentSummary.tsx

@@ -106,6 +106,15 @@ export function IncidentSummary({incident}: IncidentSummaryProps) {
           value={incident.status}
           options={STATUS_OPTIONS}
           onSave={handleFieldChange('status')}
+          disabledOptions={{
+            Postmortem: (
+              <>
+                If you need a postmortem doc, use <code>/inc fixed</code> in the incident
+                channel. This is a temporary thing due to INC Bot owning the PM generation
+                and will be fixed in a future version of Firetower.
+              </>
+            ),
+          }}
         />
         <EditablePill
           value={incident.service_tier}

frontend/src/styles/index.css

@@ -43,6 +43,9 @@ body {
   .bg-background-primary {
     background-color: var(--tokens-color-background-primary);
   }
+  .fill-background-primary {
+    fill: var(--tokens-color-background-primary);
+  }
   .bg-background-secondary {
     background-color: var(--tokens-color-background-secondary);
   }
@@ -155,6 +158,9 @@ body {
     .bg-background-primary {
       background-color: var(--base-color-neutral-dark-opaque-300);
     }
+    .fill-background-primary {
+      fill: var(--base-color-neutral-dark-opaque-300);
+    }
     .bg-background-secondary {
       background-color: var(--base-color-neutral-dark-opaque-500);
     }