[Backport 5.3.9104] Notices: Add customization for background color, text color, and text position. (#61915)

Notices: Add customization for background color, text color, and text position. (#61338)

Closes #59751

Co-authored-by: Bill Caplan <[email protected]>

Author: RXminuS

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable changes to Sourcegraph are documented in this file.
 - GitHub apps installation records will only be deleted from the database if the GitHub App has been uninstalled or if the GitHub app has been deleted. [#60460](https://github.com/sourcegraph/sourcegraph/pull/60460)
 - The Anthropic provider for Cody has been updated to use the messages API which includes support for Claude 3 models. This is applicable to both BYOK and Cody Gateway users. The messages API does not support model identifiers which only set a major model version such as: `claude-2`, `claude-instant-v1` and `claude-instant-1`. Default values have been updated to `claude-2.0` and `claude-instant-1.2`, any legacy models identifiers in the site config will be set to the corresponding default previously mentioned. [#60953](https://github.com/sourcegraph/sourcegraph/pull/60953) [#61324](https://github.com/sourcegraph/sourcegraph/pull/61324)
 - The AWS Bedrock provider for Cody has been updated to use Anthropic's Messages API, bringing support for Claude 3 models. [#61347](https://github.com/sourcegraph/sourcegraph/pull/61347)
+- Notices configured in the site config now allow for specifying a style or color. [#61338](https://github.com/sourcegraph/sourcegraph/pull/61338)
 
 ### Fixed
 

client/web/src/components/DismissibleAlert/DismissibleAlert.tsx

@@ -28,6 +28,7 @@ export const DismissibleAlert: React.FunctionComponent<React.PropsWithChildren<D
     testId,
     children,
     variant,
+    styleOverrides,
 }) => {
     const [dismissed, setDismissed] = React.useState<boolean>(
         partialStorageKey ? isAlertDismissed(partialStorageKey) : false
@@ -45,8 +46,19 @@ export const DismissibleAlert: React.FunctionComponent<React.PropsWithChildren<D
     }
 
     return (
-        <Alert data-testid={testId} className={classNames(styles.container, className)} variant={variant}>
-            <div className={styles.content}>{children}</div>
+        <Alert
+            data-testid={testId}
+            className={classNames(styles.container, className)}
+            variant={variant}
+            styleOverrides={styleOverrides}
+        >
+            <div
+                className={classNames(styles.content, {
+                    'justify-content-center': styleOverrides?.textCentered,
+                })}
+            >
+                {children}
+            </div>
             <Button aria-label="Dismiss alert" variant="icon" className={styles.closeButton} onClick={onDismiss}>
                 <Icon aria-hidden={true} svgPath={mdiClose} />
             </Button>

client/web/src/global/Notices.test.tsx

@@ -18,11 +18,22 @@ describe('Notices', () => {
                                 { message: 'a', location: 'home' },
                                 { message: 'a', location: 'home', dismissible: true },
                                 { message: 'b', location: 'top' },
+                                { message: 'a message with a variant', location: 'top', variant: 'note' },
+                                {
+                                    message: 'a message with style overrides',
+                                    location: 'top',
+                                    variant: 'success',
+                                    styleOverrides: {
+                                        backgroundColor: '#00f0ff',
+                                        textCentered: true,
+                                    },
+                                },
                             ],
                         },
                     }}
                 >
                     <Notices location="home" telemetryRecorder={noOpTelemetryRecorder} />
+                    <Notices location="top" telemetryRecorder={noOpTelemetryRecorder} />
                 </SettingsProvider>
             ).asFragment()
         ).toMatchSnapshot())

client/web/src/global/Notices.tsx

@@ -30,10 +30,11 @@ const NoticeAlert: React.FunctionComponent<React.PropsWithChildren<NoticeAlertPr
 }) => {
     const content = <Markdown dangerousInnerHTML={renderMarkdown(notice.message)} />
 
-    const sharedProps = {
+    const sharedProps: AlertProps & { 'data-testid': typeof testId } = {
         'data-testid': testId,
-        variant: getAlertVariant(notice.location),
+        variant: notice.variant || getAlertVariant(notice.location),
         className: classNames(notice.location !== 'top' && 'bg transparent border p-2', className),
+        styleOverrides: notice.styleOverrides,
     }
 
     return notice.dismissible ? (

client/web/src/global/__snapshots__/Notices.test.tsx.snap

@@ -20,6 +20,12 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * be default.
      */
     withIcon?: boolean
+
+    styleOverrides?: {
+        backgroundColor?: string
+        textColor?: string
+        textCentered?: boolean
+    }
 }
 
 const userShouldBeImmediatelyNotified = (variant?: AlertVariant): boolean =>
@@ -33,7 +39,17 @@ const userShouldBeImmediatelyNotified = (variant?: AlertVariant): boolean =>
  * Further details: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
  */
 export const Alert = React.forwardRef(function Alert(
-    { children, withIcon = true, as: Component = 'div', variant, className, role = 'alert', ...attributes },
+    {
+        children,
+        withIcon = true,
+        as: Component = 'div',
+        variant,
+        className,
+        role = 'alert',
+        styleOverrides,
+        style,
+        ...attributes
+    },
     reference
 ) {
     const { isBranded } = useWildcardTheme()
@@ -46,12 +62,22 @@ export const Alert = React.forwardRef(function Alert(
      */
     const alertAssertiveness = userShouldBeImmediatelyNotified(variant) ? 'assertive' : 'polite'
 
+    // Merge styles with overrides
+    const { backgroundColor, textColor, textCentered } = styleOverrides || {}
+    const mergedStyles: React.CSSProperties = {
+        ...style,
+        ...(!!backgroundColor && { backgroundColor }),
+        ...(!!textColor && { color: textColor }),
+        ...(!!textCentered && { textAlign: 'center' }),
+    }
+
     return (
         <Component
             ref={reference}
             className={classNames(brandedClassName, className, { [styles.alertWithNoIcon]: !withIcon })}
             role={role}
             aria-live={alertAssertiveness}
+            style={mergedStyles}
             {...attributes}
         >
             {children}

client/wildcard/src/components/Alert/Alert.tsx

@@ -484,10 +484,32 @@
             "type": "string",
             "enum": ["top", "home"]
           },
+          "variant": {
+            "type": "string",
+            "enum": ["primary", "secondary", "success", "danger", "warning", "info", "note"]
+          },
           "dismissible": {
             "description": "Whether this notice can be dismissed (closed) by the user.",
             "type": "boolean",
             "default": false
+          },
+          "styleOverrides": {
+            "description": "Overrides for the notice's default style. You probably want to use notice 'variant' setting instead.",
+            "type": "object",
+            "properties": {
+              "backgroundColor": {
+                "description": "The hex code of the background color for this notice.",
+                "type": "string"
+              },
+              "textColor": {
+                "description": "The hex code of the text color for this notice.",
+                "type": "string"
+              },
+              "textCentered": {
+                "description": "Whether the notice text should be centered.",
+                "type": "boolean"
+              }
+            }
           }
         }
       }