From 4f7d45e012ed137e979e46bb6b241b44e3a3403c Mon Sep 17 00:00:00 2001
From: Petr Stefan <ptr.stef@gmail.com>
Date: Sat, 4 May 2019 15:28:33 +0200
Subject: [PATCH] Finish editing and listing system messages

---
 .../SystemMessages/MessagesList/MessagesList.js     |  7 +++++--
 .../SystemMessages/MessagesList/MessagesList.less   | 13 +++++++++++++
 .../EditSystemMessageForm/EditSystemMessageForm.js  |  1 +
 src/pages/SystemMessages/SystemMessages.js          |  1 +
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SystemMessages/MessagesList/MessagesList.less

diff --git a/src/components/SystemMessages/MessagesList/MessagesList.js b/src/components/SystemMessages/MessagesList/MessagesList.js
index 22c3a44b0..b9fa59d02 100644
--- a/src/components/SystemMessages/MessagesList/MessagesList.js
+++ b/src/components/SystemMessages/MessagesList/MessagesList.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { Alert } from 'react-bootstrap';
 import { defaultMemoize } from 'reselect';
 
 import SortableTable, { SortableTableColumnDescriptor } from '../../widgets/SortableTable';
@@ -9,6 +10,8 @@ import DateTime from '../../widgets/DateTime';
 import { roleLabels } from '../../helpers/usersRoles';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
 
+import styles from './MessagesList.less';
+
 class MessagesList extends Component {
   prepareColumnDescriptors = defaultMemoize((systemMessages, locale) => {
     const columns = [
@@ -16,7 +19,7 @@ class MessagesList extends Component {
         'text',
         <FormattedMessage id="app.systemMessagesList.text" defaultMessage="Text" />,
         {
-          className: 'text-left',
+          className: styles.textPreview,
           comparator: ({ text: t1 }, { text: t2 }) =>
             getLocalizedText(t1, locale).localeCompare(getLocalizedText(t2, locale), locale),
           cellRenderer: text => text && <i>{getLocalizedText(text, locale)}</i>,
@@ -59,7 +62,7 @@ class MessagesList extends Component {
         <FormattedMessage id="app.systemMessagesList.type" defaultMessage="Type" />,
         {
           comparator: ({ type: t1 }, { type: t2 }) => t1.localeCompare(t2, locale),
-          cellRenderer: type => type && <span>{type}</span>,
+          cellRenderer: type => type && <Alert bsStyle={type} className={styles.alertType} />,
         }
       ),
 
diff --git a/src/components/SystemMessages/MessagesList/MessagesList.less b/src/components/SystemMessages/MessagesList/MessagesList.less
new file mode 100644
index 000000000..643841bdf
--- /dev/null
+++ b/src/components/SystemMessages/MessagesList/MessagesList.less
@@ -0,0 +1,13 @@
+.alertType {
+  margin-bottom: 0px;
+  padding: 10px;
+  height: 10px;
+  width: 10px;
+}
+
+.textPreview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 20vw;
+}
diff --git a/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js b/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js
index 726a13f7a..ed3cfe634 100644
--- a/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js
+++ b/src/components/forms/EditSystemMessageForm/EditSystemMessageForm.js
@@ -46,6 +46,7 @@ const EditSystemMessageForm = ({
         name="type"
         component={SelectField}
         options={[
+          { key: 'success', name: 'Success' },
           { key: 'info', name: 'Info' },
           { key: 'warning', name: 'Warning' },
           { key: 'danger', name: 'Danger' },
diff --git a/src/pages/SystemMessages/SystemMessages.js b/src/pages/SystemMessages/SystemMessages.js
index 571cf175d..501fca221 100644
--- a/src/pages/SystemMessages/SystemMessages.js
+++ b/src/pages/SystemMessages/SystemMessages.js
@@ -127,6 +127,7 @@ class SystemMessages extends Component {
                       <Button
                         bsSize="xs"
                         bsStyle="warning"
+                        className="btn-flat"
                         onClick={() => {
                           this.setState({ isOpen: true, message: messageToForm(message) });
                         }}>