Add ConsoleNotification CRD that can appear above, below, or above and below the page

frontend/__tests__/reducers/features.spec.tsx

@@ -46,6 +46,7 @@ describe('featureReducer', () => {
       [FLAGS.MACHINE_CONFIG]: false,
       [FLAGS.MACHINE_AUTOSCALER]: false,
       [FLAGS.CONSOLE_CLI_DOWNLOAD]: false,
+      [FLAGS.CONSOLE_NOTIFICATION]: false,
     }));
   });
 });

frontend/integration-tests/tests/crud.scenario.ts

@@ -79,7 +79,7 @@ describe('Kubernetes resource CRUD operations', () => {
       if (namespaced) {
         it('has a working namespace dropdown on namespaced objects', async() => {
           await browser.wait(until.presenceOf(namespaceView.namespaceSelector));
-          expect(namespaceView.selectedNamespace.getText()).toEqual(testName);
+          expect(namespaceView.namespaceSelector.getText()).toContain(testName);
         });
       } else {
         it('does not have a namespace dropdown on non-namespaced objects', async() => {

frontend/integration-tests/views/namespace.view.ts

@@ -1,5 +1,3 @@
-import { $, $$ } from 'protractor';
+import { $ } from 'protractor';
 
-export const namespaceBar = $('.co-namespace-bar');
-export const namespaceSelector = $('.co-namespace-selector');
-export const selectedNamespace = $$('.co-namespace-selector .pf-c-dropdown .pf-m-plain .btn-link__title').first();
+export const namespaceSelector = $('[data-test-id="namespace-bar-dropdown"]');

frontend/public/components/_global-notification.scss

@@ -3,28 +3,30 @@ $global-notification-text: $color-pf-white;
 .co-global-notification {
   background-color: $color-pf-blue-400;
   color: $global-notification-text;
-  font-weight: 300;
   padding: 4px ($grid-gutter-width / 2);
   text-align: center;
 
   @media(min-width: $grid-float-breakpoint) {
     padding: 6px $grid-gutter-width;
   }
 
+  + .co-global-notification {
+    margin-top: 1px;
+  }
+
   a {
     color: $global-notification-text;
     cursor: pointer;
     text-decoration: underline;
   }
 
-  +  .co-global-notification {
-    box-shadow: inset 0 10px 10px -10px rgba(0,34,53,0.7);
+  .close {
+    margin-left: 10px;
   }
 }
 
 .co-global-notification__text {
   margin: 0;
-  padding: 5px 10px;
 }
 
 .co-global-notification__impersonate-name {

frontend/public/components/app.jsx

@@ -12,6 +12,7 @@ import { detectFeatures } from '../actions/features';
 import { analyticsSvc } from '../module/analytics';
 import AppContents from './app-contents';
 import { getBrandingDetails, Masthead } from './masthead';
+import { ConsoleNotifier } from './console-notifier';
 import { Navigation } from './nav';
 import { history } from './utils';
 import * as UIActions from '../actions/ui';
@@ -109,12 +110,14 @@ class App extends React.PureComponent {
           titleTemplate={`%s · ${productName}`}
           defaultTitle={productName}
         />
+        <ConsoleNotifier location="BannerTop" />
         <Page
           header={<Masthead onNavToggle={this._onNavToggle} />}
           sidebar={<Navigation isNavOpen={isNavOpen} onNavSelect={this._onNavSelect} />}
         >
           <AppContents />
         </Page>
+        <ConsoleNotifier location="BannerBottom" />
       </React.Fragment>
     );
   }

frontend/public/components/console-notifier.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as _ from 'lodash-es';
+
+import { FLAGS } from '../const';
+import { connectToFlags } from '../reducers/features';
+import { Firehose, FirehoseResult } from './utils';
+import { referenceForModel } from '../module/k8s';
+import { ConsoleNotificationModel } from '../models/index';
+
+const ConsoleNotifier_: React.FC<ConsoleNotifierProps> = ({obj, location}) => {
+  if (_.isEmpty(obj)) {
+    return null;
+  }
+
+  return <React.Fragment>
+    {_.map(_.get(obj, 'data'), notification => (notification.spec.location === location || notification.spec.location === 'BannerTopBottom')
+      ? <div key={notification.metadata.uid}
+        className="co-global-notification"
+        style={{
+          backgroundColor: notification.spec.backgroundColor,
+          color: notification.spec.color,
+        }}>
+        <div className="co-global-notification__content">
+          <p className="co-global-notification__text">
+            {notification.spec.text} {_.get(notification.spec, ['link', 'href'])
+              && <a href={notification.spec.link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="co-external-link"
+                style={{color: notification.spec.color}}>{notification.spec.link.text || 'More info'}</a>}
+          </p>
+        </div>
+      </div>
+      : null)}
+  </React.Fragment>;
+};
+ConsoleNotifier_.displayName = 'ConsoleNotifier_';
+
+export const ConsoleNotifier = connectToFlags(FLAGS.CONSOLE_NOTIFICATION)(({ flags, ...props }) => {
+  const resources = flags[FLAGS.CONSOLE_NOTIFICATION]
+    ? [{
+      kind: referenceForModel(ConsoleNotificationModel),
+      isList: true,
+      prop: 'obj',
+    }]
+    : [];
+  return <Firehose resources={resources}>
+    <ConsoleNotifier_ {...props as ConsoleNotifierProps} />
+  </Firehose>;
+});
+ConsoleNotifier.displayName = 'ConsoleNotifier';
+
+type ConsoleNotifierProps = {
+  obj: FirehoseResult;
+  location: 'BannerTop' | 'BannerBottom' | 'BannerTopBottom';
+};

frontend/public/components/edit-yaml.jsx

@@ -139,7 +139,8 @@ export const EditYAML = connect(stateToProps)(
 
     get height() {
       return Math.floor(
-        document.body.getBoundingClientRect().bottom - this.editor.getBoundingClientRect().top
+        // notifications can appear above and below .pf-c-page, so calculate height using the bottom of .pf-c-page
+        document.getElementsByClassName('pf-c-page')[0].getBoundingClientRect().bottom - this.editor.getBoundingClientRect().top
       );
     }
 

frontend/public/components/namespace.jsx

@@ -347,7 +347,7 @@ class NamespaceBarDropdowns_ extends React.Component {
 
     const onChange = newNamespace => dispatch(UIActions.setActiveNamespace(newNamespace));
 
-    return <div className="co-namespace-bar__items">
+    return <div className="co-namespace-bar__items" data-test-id="namespace-bar-dropdown">
       <Dropdown
         className="co-namespace-selector"
         menuClassName="co-namespace-selector__menu"

frontend/public/components/terminal.jsx

@@ -86,13 +86,14 @@ export class Terminal extends React.Component {
       return;
     }
 
+    const pageRect = document.getElementsByClassName('pf-c-page')[0].getBoundingClientRect();
     const bodyRect = document.body.getBoundingClientRect();
     const nodeRect = node.getBoundingClientRect();
 
     const { padding } = this.props;
 
     // This assumes we want to fill everything below and to the right.  In full-screen, fill entire viewport
-    const height = Math.floor(bodyRect.bottom - (this.isFullscreen ? 0 : nodeRect.top) - padding);
+    const height = Math.floor(pageRect.bottom - (this.isFullscreen ? 0 : nodeRect.top) - padding);
     const width = Math.floor(bodyRect.width - (this.isFullscreen ? 0 : nodeRect.left) - (this.isFullscreen ? 10 : padding));
 
     if (height === this.state.height && width === this.state.width) {

frontend/public/const.ts

@@ -68,4 +68,5 @@ export enum FLAGS {
   MACHINE_CONFIG = 'MACHINE_CONFIG',
   MACHINE_AUTOSCALER = 'MACHINE_AUTOSCALER',
   CONSOLE_CLI_DOWNLOAD = 'CONSOLE_CLI_DOWNLOAD',
+  CONSOLE_NOTIFICATION = 'CONSOLE_NOTIFICATION',
 }

frontend/public/models/index.ts

@@ -914,3 +914,16 @@ export const ConsoleCLIDownloadModel: K8sKind = {
   id: 'consoleclidownload',
   crd: true,
 };
+
+export const ConsoleNotificationModel: K8sKind = {
+  label: 'Console Notification',
+  labelPlural: 'Console Notifications',
+  apiVersion: 'v1',
+  apiGroup: 'console.openshift.io',
+  plural: 'consolenotifications',
+  abbr: 'CN',
+  namespaced: false,
+  kind: 'ConsoleNotification',
+  id: 'consolenotification',
+  crd: true,
+};

frontend/public/models/yaml-templates.ts

@@ -830,6 +830,19 @@ spec:
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a lobortis justo, eu suscipit purus.
   links:
     - href: 'https://www.example.com'
+`).setIn([referenceForModel(k8sModels.ConsoleNotificationModel), 'default'], `
+apiVersion: console.openshift.io/v1
+kind: ConsoleNotification
+metadata:
+  name: example
+spec:
+  text: This is an example notification message with an optional link.
+  location: BannerTop
+  link:
+    href: 'https://www.example.com'
+    text: Optional link text
+  color: '#fff'
+  backgroundColor: '#0088ce'
 `);
 
 const pluginTemplates = ImmutableMap<GroupVersionKind, ImmutableMap<string, string>>()

frontend/public/reducers/features.ts

@@ -12,6 +12,7 @@ import {
   OperatorSourceModel,
   PrometheusModel,
   ConsoleCLIDownloadModel,
+  ConsoleNotificationModel,
 } from '../models';
 import { referenceForModel } from '../module/k8s';
 import { ActionType as K8sActionType } from '../actions/k8s';
@@ -34,6 +35,7 @@ export const baseCRDs = {
   [referenceForModel(MachineConfigModel)]: FLAGS.MACHINE_CONFIG,
   [referenceForModel(MachineAutoscalerModel)]: FLAGS.MACHINE_AUTOSCALER,
   [referenceForModel(ConsoleCLIDownloadModel)]: FLAGS.CONSOLE_CLI_DOWNLOAD,
+  [referenceForModel(ConsoleNotificationModel)]: FLAGS.CONSOLE_NOTIFICATION,
 };
 
 const CRDs = { ...baseCRDs };

frontend/public/style/_layout.scss

@@ -7,9 +7,13 @@ body,
   height: 100%; // so .co-p-has-sidebar, .yaml-editor are full height
 }
 
+#app,
 #content {
   display: flex;
   flex-direction: column;
+}
+
+#content {
   font-size: $font-size-base; // so PatternFly 4's PatternFly 3 shield rules don't override
 }