From c501d271dea0d7e38083d36b99acfa648b19308d Mon Sep 17 00:00:00 2001 From: Bill Caplan Date: Fri, 5 Apr 2024 10:33:46 -0400 Subject: [PATCH] Notices: Add customization for background color, text color, and text position. (#61338) Closes #59751 Co-authored-by: Rik Nauta --- CHANGELOG.md | 1 + .../DismissibleAlert/DismissibleAlert.tsx | 16 ++++++- client/web/src/global/Notices.test.tsx | 11 +++++ client/web/src/global/Notices.tsx | 5 +- .../__snapshots__/Notices.test.tsx.snap | 47 +++++++++++++++++++ .../wildcard/src/components/Alert/Alert.tsx | 28 ++++++++++- schema/schema.go | 13 +++++ schema/settings.schema.json | 22 +++++++++ 8 files changed, 138 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c1603266d20..7f262a8f50b3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/client/web/src/components/DismissibleAlert/DismissibleAlert.tsx b/client/web/src/components/DismissibleAlert/DismissibleAlert.tsx index ee0d84955592..4b6467954d01 100644 --- a/client/web/src/components/DismissibleAlert/DismissibleAlert.tsx +++ b/client/web/src/components/DismissibleAlert/DismissibleAlert.tsx @@ -28,6 +28,7 @@ export const DismissibleAlert: React.FunctionComponent { const [dismissed, setDismissed] = React.useState( partialStorageKey ? isAlertDismissed(partialStorageKey) : false @@ -45,8 +46,19 @@ export const DismissibleAlert: React.FunctionComponent -
{children}
+ +
+ {children} +
diff --git a/client/web/src/global/Notices.test.tsx b/client/web/src/global/Notices.test.tsx index 4b0b082d2eca..a7f913db9302 100644 --- a/client/web/src/global/Notices.test.tsx +++ b/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, + }, + }, ], }, }} > + ).asFragment() ).toMatchSnapshot()) diff --git a/client/web/src/global/Notices.tsx b/client/web/src/global/Notices.tsx index e93299e73417..422cf658e5ea 100644 --- a/client/web/src/global/Notices.tsx +++ b/client/web/src/global/Notices.tsx @@ -30,10 +30,11 @@ const NoticeAlert: React.FunctionComponent { const content = - 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 ? ( diff --git a/client/web/src/global/__snapshots__/Notices.test.tsx.snap b/client/web/src/global/__snapshots__/Notices.test.tsx.snap index bb09632ed311..545c9fd83973 100644 --- a/client/web/src/global/__snapshots__/Notices.test.tsx.snap +++ b/client/web/src/global/__snapshots__/Notices.test.tsx.snap @@ -58,5 +58,52 @@ exports[`Notices > shows notices for location 1`] = ` +
+ + + +
`; diff --git a/client/wildcard/src/components/Alert/Alert.tsx b/client/wildcard/src/components/Alert/Alert.tsx index e8dce1c0bc71..ec39584a0674 100644 --- a/client/wildcard/src/components/Alert/Alert.tsx +++ b/client/wildcard/src/components/Alert/Alert.tsx @@ -20,6 +20,12 @@ export interface AlertProps extends React.HTMLAttributes { * 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 ( {children} diff --git a/schema/schema.go b/schema/schema.go index b0219a755f6c..865bd043702f 100644 --- a/schema/schema.go +++ b/schema/schema.go @@ -1647,6 +1647,9 @@ type Notice struct { Location string `json:"location"` // Message description: The message to display. Markdown formatting is supported. Message string `json:"message"` + // StyleOverrides description: Overrides for the notice's default style. You probably want to use notice 'variant' setting instead. + StyleOverrides *StyleOverrides `json:"styleOverrides,omitempty"` + Variant string `json:"variant,omitempty"` } type Notifications struct { // Key description: e.g. '2023-03-10-my-key'; MUST START WITH YYYY-MM-DD; a globally unique key used to track whether the message has been dismissed. @@ -3175,6 +3178,16 @@ type Step struct { // Run description: The shell command to run in the container. It can also be a multi-line shell script. The working directory is the root directory of the repository checkout. Run string `json:"run"` } + +// StyleOverrides description: Overrides for the notice's default style. You probably want to use notice 'variant' setting instead. +type StyleOverrides struct { + // BackgroundColor description: The hex code of the background color for this notice. + BackgroundColor string `json:"backgroundColor,omitempty"` + // TextCentered description: Whether the notice text should be centered. + TextCentered bool `json:"textCentered,omitempty"` + // TextColor description: The hex code of the text color for this notice. + TextColor string `json:"textColor,omitempty"` +} type SubRepoPermissions struct { // Enabled description: Enables sub-repo permission checking Enabled bool `json:"enabled,omitempty"` diff --git a/schema/settings.schema.json b/schema/settings.schema.json index c0c8e7ce7ab3..b17f2f93fd92 100644 --- a/schema/settings.schema.json +++ b/schema/settings.schema.json @@ -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" + } + } } } }