fix(ui): Add warning for organization-wide settings (#4366)

* fix(ui): Add warning for organization-wide settings

* Create emcn component

* Bump up text padding a tad

* apply emcn-design-review

* Address greptile comments

Author: TheodoreSpeaks

apps/sim/components/emcn/components/callout/callout.tsx

@@ -0,0 +1,60 @@
+import type * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+
+const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 text-[12px]', {
+  variants: {
+    variant: {
+      default: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      info: 'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-muted)]',
+      success:
+        'border-[color-mix(in_srgb,var(--badge-success-text)_30%,transparent)] bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]',
+      warning:
+        'border-[color-mix(in_srgb,var(--badge-amber-text)_30%,transparent)] bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]',
+      destructive:
+        'border-[color-mix(in_srgb,var(--text-error)_40%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)]',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+const DEFAULT_ICONS = {
+  default: Info,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertTriangle,
+} as const
+
+export interface CalloutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  /** Icon component shown before the content. Pass `null` to hide. Defaults per variant. */
+  icon?: React.ComponentType<{ className?: string }> | null
+}
+
+/**
+ * Inline note used to highlight short pieces of context inside a page or section.
+ *
+ * @example
+ * ```tsx
+ * <Callout>Applies organization-wide</Callout>
+ * <Callout variant='warning'>This action is irreversible</Callout>
+ * ```
+ */
+function Callout({ className, variant, icon, children, role = 'note', ...props }: CalloutProps) {
+  const variantKey = (variant ?? 'default') as keyof typeof DEFAULT_ICONS
+  const Icon = icon === null ? null : (icon ?? DEFAULT_ICONS[variantKey])
+
+  return (
+    <div role={role} className={cn(calloutVariants({ variant }), className)} {...props}>
+      {Icon && <Icon className='h-[14px] w-[14px] shrink-0' />}
+      <span>{children}</span>
+    </div>
+  )
+}
+
+export { Callout, calloutVariants }

apps/sim/components/emcn/components/index.ts

@@ -18,6 +18,7 @@ export {
   buttonGroupItemVariants,
   buttonGroupVariants,
 } from './button-group/button-group'
+export { Callout, type CalloutProps, calloutVariants } from './callout/callout'
 export {
   Checkbox,
   type CheckboxProps,

apps/sim/ee/data-retention/components/data-retention-settings.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Button, Combobox, toast } from '@/components/emcn'
+import { Button, Callout, Combobox, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
@@ -169,10 +169,8 @@ export function DataRetentionSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <Callout>Applies organization-wide</Callout>
       <section>
-        <h3 className='mb-4 font-medium text-[15px] text-[var(--text-primary)]'>
-          Retention Periods
-        </h3>
         <div className='flex flex-col gap-5'>
           <SettingRow
             label='Log retention'

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -6,7 +6,7 @@ import { toError } from '@sim/utils/errors'
 import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { Button, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
+import { Button, Callout, Input, Label, Loader, Skeleton, toast } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
@@ -318,6 +318,7 @@ export function WhitelabelingSettings() {
 
   return (
     <div className='flex flex-col gap-8'>
+      <Callout>Applies organization-wide</Callout>
       <section>
         <SectionTitle>Brand Identity</SectionTitle>
         <div className='flex flex-col gap-5'>