PLT-3466 E10: Add announcement bar feature (#6509)

* E10 - Add announcement bar feature

* Updates per feedback

* Add component tests and snapshots

* Update snapshots

* Updating color picker UI (#6543)

* Add class to body tag when banner is not dismissable and clean up localstorage items when banner changes

* Fixing links (#6544)

* Updating UI for fixed error bar (#6552)

* Truncating text on fixed banner (#6561)

* Plt 3466 - Error bar link states (#6577)

* Updating error bar hover state

* Updating error bar link states

webapp/tests/components/admin_console/__snapshots__/color_setting.test.jsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ColorSetting should match snapshot, all 1`] = `
+<Settings
+  helpText="helptext"
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={false}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;
+
+exports[`components/ColorSetting should match snapshot, disabled 1`] = `
+<Settings
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={true}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;
+
+exports[`components/ColorSetting should match snapshot, no help text 1`] = `
+<Settings
+  inputId="id"
+  label="label"
+>
+  <div
+    className="input-group color-picker colorpicker-element"
+  >
+    <input
+      className="form-control"
+      disabled={false}
+      onChange={[Function]}
+      type="text"
+      value="#fff"
+    />
+    <span
+      className="input-group-addon picker-id"
+      onClick={[Function]}
+    >
+      <i
+        style={
+          Object {
+            "backgroundColor": "#fff",
+          }
+        }
+      />
+    </span>
+  </div>
+</Settings>
+`;

webapp/tests/components/admin_console/color_setting.test.jsx

@@ -0,0 +1,55 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import ColorSetting from 'components/admin_console/color_setting.jsx';
+
+describe('components/ColorSetting', () => {
+    test('should match snapshot, all', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                helpText='helptext'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={false}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, no help text', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={false}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, disabled', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        const wrapper = shallow(
+            <ColorSetting
+                id='id'
+                label='label'
+                value='#fff'
+                onChange={emptyFunction}
+                disabled={true}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});