show custom notices on the homepage (and consolidate motd) (#2959)

- Adds a new setting property `notices` that contains messages to be shown on the homepage and in the global alerts at the top of the page (like `motd`)
- Cleans up CSS to make the display of dismissible and non-dismissible alerts consistent (w.r.t. padding and sizing)

closes #653

Author: sqs

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to Sourcegraph are documented in this file.
 ### Added
 
 - Enterprise admins can now customize the appearance of the homepage and search icon.
+- A new settings property `notices` allows showing custom informational messages on the homepage and at the top of each page.
 
 ### Changed
 

schema/schema.go

@@ -65,10 +65,35 @@
       "$ref": "#/definitions/SlackNotificationsConfig"
     },
     "motd": {
-      "description": "An array (often with just one element) of messages to display at the top of all pages, including for unauthenticated users. Users may dismiss a message (and any message with the same string value will remain dismissed for the user).\n\nMarkdown formatting is supported.\n\nUsually this setting is used in global and organization settings. If set in user settings, the message will only be displayed to that user. (This is useful for testing the correctness of the message's Markdown formatting.)\n\nMOTD stands for \"message of the day\" (which is the conventional Unix name for this type of message).",
+      "description": "DEPRECATED: Use `notices` instead.\n\nAn array (often with just one element) of messages to display at the top of all pages, including for unauthenticated users. Users may dismiss a message (and any message with the same string value will remain dismissed for the user).\n\nMarkdown formatting is supported.\n\nUsually this setting is used in global and organization settings. If set in user settings, the message will only be displayed to that user. (This is useful for testing the correctness of the message's Markdown formatting.)\n\nMOTD stands for \"message of the day\" (which is the conventional Unix name for this type of message).",
       "type": "array",
       "items": { "type": "string" }
     },
+    "notices": {
+      "description": "Custom informational messages to display to users at specific locations in the Sourcegraph user interface.\n\nUsually this setting is used in global and organization settings. If set in user settings, the message will only be displayed to that single user.",
+      "type": "array",
+      "items": {
+        "title": "Notice",
+        "type": "object",
+        "required": ["message", "location"],
+        "properties": {
+          "message": {
+            "description": "The message to display. Markdown formatting is supported.",
+            "type": "string"
+          },
+          "location": {
+            "description": "The location where this notice is shown: \"top\" for the top of every page, \"home\" for the homepage.",
+            "type": "string",
+            "enum": ["top", "home"]
+          },
+          "dismissible": {
+            "description": "Whether this notice can be dismissed (closed) by the user.",
+            "type": "boolean",
+            "default": false
+          }
+        }
+      }
+    },
     "extensions": {
       "description": "The Sourcegraph extensions to use. Enable an extension by adding a property `\"my/extension\": true` (where `my/extension` is the extension ID). Override a previously enabled extension and disable it by setting its value to `false`.",
       "type": "object",

schema/settings.schema.json

@@ -234,6 +234,7 @@ hr {
 @import './extensions/extension/ExtensionArea';
 @import './global/GlobalAlerts';
 @import './global/GlobalDebug';
+@import './global/Notices';
 @import './search/input/ScopePage';
 @import './search/input/SearchPage';
 @import './search/results/SearchResults';

schema/settings_stringdata.go

@@ -1,8 +1,7 @@
 .dismissible-alert {
     display: flex;
     align-items: flex-start;
-    padding: 0.75rem;
-    margin-bottom: 0;
+    padding-right: 0.5rem;
 
     &__content {
         flex: 1 1 auto;

web/src/SourcegraphWebApp.scss

@@ -4,16 +4,12 @@
 
     &__alert {
         width: 100%;
-        padding-top: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding: 0.5rem !important;
         margin-bottom: 0 !important;
 
         border-radius: 0;
         border-width: 0 0 1px 0;
 
-        // stylelint-disable-next-line declaration-property-unit-whitelist
-        font-size: 16px;
-
         // The trailing after-paragraph/list margin looks unbalanced in MOTDs.
         p:last-child,
         ul:last-child,

web/src/components/DismissibleAlert.scss

@@ -12,6 +12,7 @@ import { NeedsRepositoryConfigurationAlert } from '../site/NeedsRepositoryConfig
 import { NoRepositoriesEnabledAlert } from '../site/NoRepositoriesEnabledAlert'
 import { UpdateAvailableAlert } from '../site/UpdateAvailableAlert'
 import { GlobalAlert } from './GlobalAlert'
+import { Notices } from './Notices'
 
 interface Props extends SettingsCascadeProps {
     isSiteAdmin: boolean
@@ -82,6 +83,11 @@ export class GlobalAlerts extends React.PureComponent<Props, State> {
                             <Markdown dangerousInnerHTML={renderMarkdown(m)} />
                         </DismissibleAlert>
                     ))}
+                <Notices
+                    alertClassName="global-alerts__alert"
+                    location="top"
+                    settingsCascade={this.props.settingsCascade}
+                />
             </div>
         )
     }

web/src/global/GlobalAlerts.scss

@@ -0,0 +1,5 @@
+.notices {
+    p:last-child {
+        margin-bottom: 0; // override Bootstrap to fix uneven spacing at end of alert
+    }
+}

web/src/global/GlobalAlerts.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { Notices } from './Notices'
+
+describe('Notices', () => {
+    test('shows notices for location', () =>
+        expect(
+            renderer
+                .create(
+                    <Notices
+                        location="home"
+                        settingsCascade={{
+                            subjects: [],
+                            final: {
+                                notices: [
+                                    { message: 'a', location: 'home' },
+                                    { message: 'a', location: 'home', dismissible: true },
+                                    { message: 'b', location: 'top' },
+                                ],
+                            },
+                        }}
+                    />
+                )
+                .toJSON()
+        ).toMatchSnapshot())
+
+    test('no notices', () =>
+        expect(
+            renderer
+                .create(<Notices location="home" settingsCascade={{ subjects: [], final: { notices: null } }} />)
+                .toJSON()
+        ).toMatchSnapshot())
+})

web/src/global/Notices.scss

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Markdown } from '../../../shared/src/components/Markdown'
+import { isSettingsValid, SettingsCascadeProps } from '../../../shared/src/settings/settings'
+import { renderMarkdown } from '../../../shared/src/util/markdown'
+import { DismissibleAlert } from '../components/DismissibleAlert'
+import { Notice, Settings } from '../schema/settings.schema'
+
+const Notice: React.FunctionComponent<{ notice: Notice; className?: string }> = ({ notice, className = '' }) => {
+    const content = <Markdown dangerousInnerHTML={renderMarkdown(notice.message)} />
+    return !!notice.dismissible ? (
+        <DismissibleAlert className={`alert-info ${className}`} partialStorageKey={`notice.${notice.message}`}>
+            {content}
+        </DismissibleAlert>
+    ) : (
+        <div className={`alert alert-info ${className}`}>{content}</div>
+    )
+}
+
+interface Props extends SettingsCascadeProps {
+    className?: string
+
+    /** Apply this class name to each notice (alongside .alert). */
+    alertClassName?: string
+
+    /** Display notices for this location. */
+    location: Notice['location']
+}
+
+/**
+ * Displays notices from settings for a specific location.
+ */
+export const Notices: React.FunctionComponent<Props> = ({
+    className = '',
+    alertClassName,
+    settingsCascade,
+    location,
+}) => {
+    if (
+        !isSettingsValid<Settings>(settingsCascade) ||
+        !settingsCascade.final.notices ||
+        !Array.isArray(settingsCascade.final.notices)
+    ) {
+        return null
+    }
+    const notices = settingsCascade.final.notices.filter(n => n.location === location)
+    if (notices.length === 0) {
+        return null
+    }
+    return (
+        <div className={`notices ${className}`}>
+            {notices.map((notice, i) => (
+                <Notice key={i} className={alertClassName} notice={notice} />
+            ))}
+        </div>
+    )
+}

web/src/global/Notices.test.tsx

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notices no notices 1`] = `null`;
+
+exports[`Notices shows notices for location 1`] = `
+<div
+  className="notices "
+>
+  <div
+    className="alert alert-info "
+  >
+    <div
+      className="markdown undefined"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<p>a</p>
+",
+        }
+      }
+    />
+  </div>
+  <div
+    className="alert dismissible-alert alert-info "
+  >
+    <div
+      className="dismissible-alert__content"
+    >
+      <div
+        className="markdown undefined"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<p>a</p>
+",
+          }
+        }
+      />
+    </div>
+    <button
+      className="btn btn-icon"
+      onClick={[Function]}
+    >
+      <svg
+        className="mdi-icon icon-inline"
+        fill="currentColor"
+        height={24}
+        viewBox="0 0 24 24"
+        width={24}
+      >
+        <path
+          d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;

web/src/global/Notices.tsx

@@ -6,6 +6,7 @@ import * as GQL from '../../../../shared/src/graphql/schema'
 import { isSettingsValid, SettingsCascadeProps } from '../../../../shared/src/settings/settings'
 import { Form } from '../../components/Form'
 import { PageTitle } from '../../components/PageTitle'
+import { Notices } from '../../global/Notices'
 import { Settings } from '../../schema/settings.schema'
 import { ThemePreferenceProps, ThemeProps } from '../../theme'
 import { eventLogger } from '../../tracking/eventLogger'
@@ -123,6 +124,7 @@ export class SearchPage extends React.Component<Props, State> {
                             </div>
                         </>
                     )}
+                    <Notices className="my-3" location="home" settingsCascade={this.props.settingsCascade} />
                 </Form>
             </div>
         )