fix(ui): upgrade Info component with Radix (NangoHQ#2645)

## Describe your changes

Contributes to
https://linear.app/nango/issue/NAN-1537/script-v2-integrate-ui

- Upgrade Info component with Radix

packages/webapp/src/components/Info.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+import { Alert, AlertDescription, AlertTitle } from './ui/Alert';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import type { ComponentProps } from 'react';
+import { cn } from '../utils/utils';
+
+export const Info: React.FC<{ children: React.ReactNode; title?: string } & ComponentProps<typeof Alert>> = ({ children, title, ...props }) => {
+    return (
+        <Alert variant={'default'} {...props}>
+            <div
+                className={cn(
+                    'rounded-full p-1',
+                    props.variant === 'destructive' && 'bg-red-base-35',
+                    props.variant === 'warning' && 'bg-yellow-base-35',
+                    (!props.variant || props.variant === 'default') && 'bg-blue-base-35'
+                )}
+            >
+                <InfoCircledIcon className="h-4 w-4" />
+            </div>
+            {title && <AlertTitle>{title}</AlertTitle>}
+            <AlertDescription>{children}</AlertDescription>
+        </Alert>
+    );
+};

packages/webapp/src/components/TopNavBar.tsx

@@ -1,7 +1,7 @@
 import { ChatBubbleBottomCenterIcon, ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
 import { useMemo } from 'react';
 import { useSignout } from '../utils/user';
-import Info from './ui/Info';
+import { Info } from './Info';
 import { useUser } from '../hooks/useUser';
 
 export default function NavBar() {
@@ -19,7 +19,7 @@ export default function NavBar() {
         <div className="bg-pure-black flex justify-between border-b border-border-gray py-3">
             <div className="text-white px-6 text-sm">
                 {isHNDemo && (
-                    <Info padding={'px-3 py-1.5'} size={15}>
+                    <Info>
                         This is a test account. Click{' '}
                         <button className="font-bold" onClick={onCreateAccount}>
                             here

packages/webapp/src/components/ui/Alert.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils/utils';
+
+const alertVariants = cva('relative w-full rounded-lg border px-3 py-1.5 text-sm flex gap-2 items-center', {
+    variants: {
+        variant: {
+            default: 'bg-blue-base-35 border-blue-base text-blue-base',
+            destructive: 'bg-red-base-35 border-red-base text-red-base',
+            warning: 'bg-yellow-base-35 border-yellow-base text-yellow-base'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+
+const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
+    ({ className, variant, ...props }, ref) => <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

packages/webapp/src/pages/Account/InviteSignup.tsx

@@ -2,7 +2,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import { apiAcceptInvite, apiDeclineInvite, useInvite } from '../../hooks/useInvite';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { Skeleton } from '../../components/ui/Skeleton';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import Button from '../../components/ui/button/Button';
 import { useState } from 'react';
 import { useToast } from '../../hooks/useToast';
@@ -79,7 +79,7 @@ export const InviteSignup: React.FC = () => {
                                 </div>
                             </>
                         ) : (
-                            <Info color={'red'} classNames="text-xs" size={20}>
+                            <Info variant={'destructive'}>
                                 An error occurred, refresh your page or reach out to the support.{' '}
                                 {error.error.code === 'generic_error_support' && (
                                     <>

packages/webapp/src/pages/Connection/Show.tsx

@@ -8,10 +8,9 @@ import useSWR, { useSWRConfig } from 'swr';
 import { requestErrorToast, swrFetcher, useGetConnectionDetailsAPI, useDeleteConnectionAPI } from '../../utils/api';
 import { LeftNavBarItems } from '../../components/LeftNavBar';
 import ActionModal from '../../components/ui/ActionModal';
-import { ErrorCircle } from '../../components/ui/label/error-circle';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import DashboardLayout from '../../layout/DashboardLayout';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import IntegrationLogo from '../../components/ui/IntegrationLogo';
 import Button from '../../components/ui/button/Button';
 import { useEnvironment } from '../../hooks/useEnvironment';
@@ -250,21 +249,15 @@ We could not retrieve and/or refresh your access token due to the following erro
 
             {serverErrorMessage && (
                 <div className="flex my-4">
-                    <Info showIcon={false} size={14} padding="py-1 px-1 py-1" color="red">
-                        <div className="flex items-center text-sm">
-                            <ErrorCircle />
-                            <span className="ml-2">{serverErrorMessage}</span>
-                        </div>
-                    </Info>
+                    <Info variant={'destructive'}>{serverErrorMessage}</Info>
                 </div>
             )}
 
             {activeTab === Tabs.Authorization && connectionResponse.errorLog && (
                 <div className="flex my-4">
-                    <Info showIcon={false} size={14} padding="py-1 px-1" color="red">
-                        <div className="flex items-center text-sm">
-                            <ErrorCircle />
-                            <span className="ml-2">There was an error refreshing the credentials</span>
+                    <Info variant={'destructive'}>
+                        <div>
+                            There was an error refreshing the credentials
                             <Link
                                 to={getLogsUrl({
                                     env,
@@ -283,32 +276,29 @@ We could not retrieve and/or refresh your access token due to the following erro
 
             {activeTab === Tabs.Syncs && syncs && syncs.some((sync) => sync.active_logs?.log_id) && (
                 <div className="flex my-4">
-                    <Info showIcon={false} size={14} padding="py-1 px-1" color="red">
-                        <div className="flex items-center text-sm">
-                            <ErrorCircle />
-                            <span className="ml-2">
-                                Last sync execution failed for the following sync
-                                {syncs.filter((sync) => sync.active_logs?.log_id).length > 1 ? 's' : ''}:{' '}
-                                {syncs
-                                    .filter((sync) => sync.active_logs?.log_id)
-                                    .map((sync, index) => (
-                                        <Fragment key={sync.name}>
-                                            {sync.name} (
-                                            <Link className="underline" to={getLogsUrl({ env, operationId: sync.active_logs?.log_id, syncs: sync.name })}>
-                                                logs
-                                            </Link>
-                                            ){index < syncs.filter((sync) => sync.active_logs?.log_id).length - 1 && ', '}
-                                        </Fragment>
-                                    ))}
-                                .
-                            </span>
+                    <Info variant={'destructive'}>
+                        <div>
+                            Last sync execution failed for the following sync
+                            {syncs.filter((sync) => sync.active_logs?.log_id).length > 1 ? 's' : ''}:{' '}
+                            {syncs
+                                .filter((sync) => sync.active_logs?.log_id)
+                                .map((sync, index) => (
+                                    <Fragment key={sync.name}>
+                                        {sync.name} (
+                                        <Link className="underline" to={getLogsUrl({ env, operationId: sync.active_logs?.log_id, syncs: sync.name })}>
+                                            logs
+                                        </Link>
+                                        ){index < syncs.filter((sync) => sync.active_logs?.log_id).length - 1 && ', '}
+                                    </Fragment>
+                                ))}
+                            .
                         </div>
                     </Info>
                 </div>
             )}
 
             {!slackIsConnected && !isHosted() && (
-                <Info size={14} color="blue" showIcon={false} padding="mt-7 p-1 py-1">
+                <Info className="mt-4">
                     <div className="flex text-sm items-center">
                         <IntegrationLogo provider="slack" height={6} width={6} classNames="flex mr-2" />
                         Receive instant monitoring alerts on Slack.{' '}

packages/webapp/src/pages/FlowCreate.tsx

@@ -7,7 +7,7 @@ import type { Sync } from '../types';
 import { LeftNavBarItems } from '../components/LeftNavBar';
 import DashboardLayout from '../layout/DashboardLayout';
 import { useStore } from '../store';
-import Info from '../components/ui/Info';
+import { Info } from '../components/Info';
 import Button from '../components/ui/button/Button';
 import Spinner from '../components/ui/Spinner';
 

packages/webapp/src/pages/Homepage/Show.tsx

@@ -47,7 +47,6 @@ export const Homepage: React.FC = () => {
                 </div>
                 <div className="text-white text-sm">Last 14 days</div>
             </div>
-
             <div className="grid gap-8 grid-cols-[repeat(auto-fill,minmax(300px,470px))] mt-8">
                 {globalEnv.features.scripts && (
                     <InsightChart

packages/webapp/src/pages/Integration/AuthSettings.tsx

@@ -7,7 +7,7 @@ import type { EnvironmentAndAccount } from '@nangohq/server';
 import { Tooltip, useModal } from '@geist-ui/core';
 import type { IntegrationConfig } from '../../types';
 import { useDeleteIntegrationAPI, useCreateIntegrationAPI, useEditIntegrationAPI, useEditIntegrationNameAPI } from '../../utils/api';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import ActionModal from '../../components/ui/ActionModal';
 import SecretInput from '../../components/ui/input/SecretInput';
 import SecretTextArea from '../../components/ui/input/SecretTextArea';
@@ -394,7 +394,7 @@ export default function AuthSettings(props: AuthSettingsProps) {
                 </>
             )}
             {(integration?.auth_mode === 'BASIC' || integration?.auth_mode === 'API_KEY') && (
-                <Info size={20} color="blue">
+                <Info>
                     The &quot;{integration?.provider}&quot; integration provider uses {integration?.auth_mode === 'BASIC' ? 'basic auth' : 'API Keys'} for
                     authentication (
                     <a

packages/webapp/src/pages/Integration/EndpointReference.tsx

@@ -4,7 +4,7 @@ import type { EnvironmentAndAccount } from '@nangohq/server';
 import { Prism } from '@mantine/prism';
 import Button from '../../components/ui/button/Button';
 import { CopyButton } from '../../components/ui/button/CopyButton';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import EndpointLabel from './components/EndpointLabel';
 import type { IntegrationConfig, FlowEndpoint, Flow } from '../../types';
 import { nodeSyncSnippet, nodeActionSnippet, curlSnippet } from '../../utils/language-snippets';
@@ -95,7 +95,7 @@ export default function EndpointReference(props: EndpointReferenceProps) {
                 {activeFlow?.description && <span className="mt-2">{activeFlow.description}</span>}
             </div>
             {!activeFlow?.version && activeFlow?.version === null && (
-                <Info size={18} classNames="mt-10 mb-10 z-10" padding="px-4 py-1.5" color="orange">
+                <Info variant={'warning'}>
                     This endpoint is disabled. Enable it in the associated{' '}
                     <span className="cursor-pointer underline" onClick={routeToFlow}>
                         script settings

packages/webapp/src/pages/Integration/FlowPage.tsx

@@ -17,7 +17,7 @@ import { Tabs, SubTabs } from './Show';
 import type { IntegrationConfig, Flow, Connection } from '../../types';
 import EndpointLabel from './components/EndpointLabel';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle } from '../../components/ui/Dialog';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import { formatDateToShortUSFormat, githubIntegrationTemplates } from '../../utils/utils';
 import EnableDisableSync from './components/EnableDisableSync';
 import { autoStartSnippet, setMetadataSnippet } from '../../utils/language-snippets';
@@ -370,7 +370,7 @@ export default function FlowPage(props: FlowPageProps) {
                 </div>
                 {flow.is_public && (
                     <div className="my-1">
-                        <Info size={18} padding="px-4 py-1.5">
+                        <Info>
                             This script originates from a template made public by Nango. Templates are intended as a starting point and can easily be customized{' '}
                             <a
                                 href="https://docs.nango.dev/customize/guides/extend-an-integration-template"
@@ -386,7 +386,7 @@ export default function FlowPage(props: FlowPageProps) {
                 )}
                 {flow?.nango_yaml_version === 'v1' && (
                     <div className="my-5">
-                        <Info size={18} padding="px-4 py-1.5">
+                        <Info>
                             This {flow?.type} is using the legacy nango.yaml schema.{' '}
                             <a
                                 href="https://docs.nango.dev/customize/guides/advanced/migrate-integration-configuration"
@@ -581,7 +581,7 @@ export default function FlowPage(props: FlowPageProps) {
                                 <div className="flex flex-col w-full">
                                     <span className="text-gray-400 text-xs uppercase mb-2">Metadata</span>
                                     <div className="text-sm w-full text-[#C3E5FA]">
-                                        <Info size={16} verticallyCenter={false}>
+                                        <Info>
                                             <span>To use this sync, programmatically add metadata on each connection.</span>
                                             <div className="flex w-[700px] cursor-pointer" onClick={() => setShowMetadataCode(!showMetadataCode)}>
                                                 <div className="flex-col items-center mt-4 border border-blue-400 border-opacity-50 rounded px-2 py-2 -ml-8 w-full">
@@ -635,7 +635,7 @@ export default function FlowPage(props: FlowPageProps) {
                                 <div className="flex flex-col w-full">
                                     <span className="text-gray-400 text-xs uppercase mb-2">Auto Starts</span>
                                     <div className="text-sm w-full">
-                                        <Info size={18} verticallyCenter={false}>
+                                        <Info>
                                             <span>To use this sync, programmatically start the sync for each connection.</span>
                                             <div className="flex w-[700px] cursor-pointer" onClick={() => setShowAutoStartCode(!showAutoStartCode)}>
                                                 <div className="flex-col items-center mt-4 border border-blue-400 border-opacity-50 rounded px-2 py-2 -ml-8 w-full">

packages/webapp/src/pages/Logs/Search.tsx

@@ -1,7 +1,7 @@
 import { LeftNavBarItems } from '../../components/LeftNavBar';
 import DashboardLayout from '../../layout/DashboardLayout';
 import { useStore } from '../../store';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import { useSearchOperations } from '../../hooks/useLogs';
 import * as Table from '../../components/ui/Table';
 import { getCoreRowModel, useReactTable, flexRender } from '@tanstack/react-table';
@@ -326,7 +326,7 @@ export const LogsSearch: React.FC = () => {
                         </div>
                     </div>
                 ) : (
-                    <Info color={'red'} classNames="text-xs" size={20}>
+                    <Info variant={'destructive'}>
                         An error occurred, refresh your page or reach out to the support.{' '}
                         {error.error.code === 'generic_error_support' && (
                             <>

packages/webapp/src/pages/Logs/ShowOperation.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import Info from '../../components/ui/Info';
+import { Info } from '../../components/Info';
 import { useGetOperation } from '../../hooks/useLogs';
 import { useStore } from '../../store';
 import { OperationTag } from './components/OperationTag';
@@ -80,9 +80,7 @@ export const ShowOperation: React.FC<{ operationId: string }> = ({ operationId }
     if (error || !operation) {
         return (
             <div className="py-6 px-6 flex flex-col gap-9">
-                <Info color="red" classNames="text-xs" size={20} padding="p-2">
-                    An error occurred
-                </Info>
+                <Info variant={'destructive'}>An error occurred</Info>
             </div>
         );
     }