refactor(design-system): fold SuccessMessage into Banner, deduplicate ErrorMessage

messages/ErrorMessage was a near-copy of the one beside it, differing
only in import style, interface vs type, ?? vs ||, and a displayName.
That drift is how enabledButton ended up alive in one copy and dead in
the other. The file stays so existing imports keep working, but it now
re-exports the real one rather than carrying a second implementation.

SuccessMessage renders a Banner and keeps its bold title. Its url,
buttonText, isClosable, close and infoMessageClass props had no callers
at all, and its one successStyles caller was setting a margin the
Banner does not have.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/web/components/TestWebhook.tsx

@@ -24,12 +24,7 @@ const TestWebhook: FC<TestWebhookType> = ({ scope, secret, webhookUrl }) => {
       {backendError && <ErrorMessage error={backendError} />}
       {isBackendSuccess && (
         <div style={{ maxWidth: 'fit-content' }}>
-          <SuccessMessage
-            successStyles={{
-              marginBottom: '0',
-              width: 'fit-content !important',
-            }}
-          >
+          <SuccessMessage>
             {'Your API returned with a successful 200 response.'}
           </SuccessMessage>
         </div>

frontend/web/components/messages/ErrorMessage.tsx

@@ -1,79 +1,2 @@
-import React from 'react'
-import Icon from 'components/icons/Icon'
-import Button from 'components/base/forms/Button'
-import Format from 'common/utils/format'
-import Constants from 'common/constants'
-
-interface ErrorMessageProps {
-  error?: any
-  errorMessageClass?: string
-  errorStyles?: React.CSSProperties
-  enabledButton?: boolean
-}
-
-const ErrorMessage: React.FC<ErrorMessageProps> = ({
-  enabledButton,
-  error,
-  errorMessageClass,
-  errorStyles,
-}) => {
-  const errorMessageClassName = `alert alert-danger ${
-    errorMessageClass || 'flex-1 align-items-center'
-  }`
-
-  const resolvedError =
-    error?.data?.metadata?.find((item: any) =>
-      Object.prototype.hasOwnProperty.call(item, 'non_field_errors'),
-    )?.non_field_errors?.[0] ??
-    error?.data ??
-    error?.message ??
-    error
-
-  if (!error) return null
-
-  return (
-    <div
-      className={errorMessageClassName}
-      style={{
-        display: errorMessageClass ? 'initial' : '',
-        ...errorStyles,
-      }}
-    >
-      <span className='icon-alert'>
-        <Icon name='close-circle' />
-      </span>
-      {resolvedError instanceof Error ? (
-        resolvedError.message
-      ) : typeof resolvedError === 'object' ? (
-        <div
-          dangerouslySetInnerHTML={{
-            __html: Object.keys(resolvedError)
-              .map(
-                (v) =>
-                  `${Format.camelCase(Format.enumeration.get(v))}: ${
-                    resolvedError[v]
-                  }`,
-              )
-              .join('<br/>'),
-          }}
-        />
-      ) : (
-        resolvedError
-      )}
-      {enabledButton && (
-        <Button
-          className='btn ml-3'
-          onClick={() => {
-            document.location.replace(Constants.getUpgradeUrl())
-          }}
-        >
-          Upgrade plan
-        </Button>
-      )}
-    </div>
-  )
-}
-
-ErrorMessage.displayName = 'ErrorMessage'
-
-export default ErrorMessage
+// Kept so existing imports keep working. One implementation, next door.
+export { default } from 'components/ErrorMessage'

frontend/web/components/messages/SuccessMessage.tsx

@@ -1,65 +1,21 @@
-import React from 'react'
-import Icon from 'components/icons/Icon'
-import { close as closeIcon } from 'ionicons/icons'
-import { IonIcon } from '@ionic/react'
-import Button from 'components/base/forms/Button'
+import { FC, ReactNode } from 'react'
+import Banner from 'components/Banner'
 
-interface SuccessMessageProps {
-  url?: string
-  buttonText?: string
+type SuccessMessageProps = {
+  children?: ReactNode
   title?: string
-  children?: React.ReactNode
-  infoMessageClass?: string
-  successStyles?: React.CSSProperties
-  isClosable?: boolean
-  close?: () => void
 }
 
-const SuccessMessage: React.FC<SuccessMessageProps> = ({
-  buttonText,
+const SuccessMessage: FC<SuccessMessageProps> = ({
   children,
-  close,
-  infoMessageClass,
-  isClosable,
-  successStyles,
   title = 'SUCCESS',
-  url,
-}) => {
-  const handleOpenNewWindow = () => {
-    if (url) window.open(url, '_blank')
-  }
-
-  const infoMessageClassName = `alert alert-success ${
-    infoMessageClass || 'flex-1'
-  }`
-
-  const titleDescClass = infoMessageClass ? `${infoMessageClass} body mr-2` : ''
-
-  return (
-    <div className={infoMessageClassName} style={{ ...successStyles }}>
-      <span className={`icon-alert ${infoMessageClass} info-icon`}>
-        <Icon fill='#27AB95' name='checkmark-circle' />
-      </span>
-      <div className={titleDescClass}>
-        <div className='fw-semibold'>{title}</div>
-        {children}
-      </div>
-      {url && (
-        <Button className='btn my-2' onClick={handleOpenNewWindow}>
-          {buttonText}
-        </Button>
-      )}
-      {isClosable && (
-        <a onClick={close} className='mt-n2 mr-n2 pl-2'>
-          <span className={`icon ${infoMessageClass} close-btn`}>
-            <IonIcon icon={closeIcon} />
-          </span>
-        </a>
-      )}
+}) => (
+  <Banner variant='success'>
+    <div>
+      <div className='fw-semibold'>{title}</div>
+      {children}
     </div>
-  )
-}
-
-SuccessMessage.displayName = 'SuccessMessage'
+  </Banner>
+)
 
 export default SuccessMessage