New: Show search parameters on History view

frontend/src/History/HistoryRow.css

@@ -33,3 +33,10 @@
 
   width: 70px;
 }
+
+.parameters {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  display: flex;
+  flex-wrap: wrap;
+}

frontend/src/History/HistoryRow.js

@@ -7,6 +7,7 @@ import TableRow from 'Components/Table/TableRow';
 import { icons } from 'Helpers/Props';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
+import HistoryRowParameter from './HistoryRowParameter';
 import styles from './HistoryRow.css';
 
 class HistoryRow extends Component {
@@ -117,6 +118,134 @@ class HistoryRow extends Component {
               );
             }
 
+            if (name === 'query') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.query}
+                >
+                  {data.query}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'parameters') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.parameters}
+                >
+                  {
+                    data.imdbId ?
+                      <HistoryRowParameter
+                        title='IMDb Id'
+                        value={data.imdbId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.tmdbId ?
+                      <HistoryRowParameter
+                        title='TMDb Id'
+                        value={data.tmdbId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.tvdbId ?
+                      <HistoryRowParameter
+                        title='TVDb Id'
+                        value={data.tvdbId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.traktId ?
+                      <HistoryRowParameter
+                        title='Trakt Id'
+                        value={data.traktId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.rId ?
+                      <HistoryRowParameter
+                        title='Rage Id'
+                        value={data.rId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.tvMazeId ?
+                      <HistoryRowParameter
+                        title='TvMaze Id'
+                        value={data.tvMazeId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.season ?
+                      <HistoryRowParameter
+                        title='Season'
+                        value={data.tvMazeId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.episode ?
+                      <HistoryRowParameter
+                        title='Episode'
+                        value={data.tvMazeId}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.artist ?
+                      <HistoryRowParameter
+                        title='Artist'
+                        value={data.artist}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.album ?
+                      <HistoryRowParameter
+                        title='Album'
+                        value={data.album}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.author ?
+                      <HistoryRowParameter
+                        title='Author'
+                        value={data.author}
+                      /> :
+                      null
+                  }
+
+                  {
+                    data.bookTitle ?
+                      <HistoryRowParameter
+                        title='Book'
+                        value={data.bookTitle}
+                      /> :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
             if (name === 'categories') {
               return (
                 <TableRowCell
@@ -173,17 +302,6 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'query') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.query}
-                >
-                  {data.query}
-                </TableRowCell>
-              );
-            }
-
             if (name === 'date') {
               return (
                 <RelativeDateCellConnector

frontend/src/History/HistoryRowParameter.css

@@ -0,0 +1,20 @@
+.parameter {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  margin: 2px 4px;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: #eee;
+  cursor: default;
+}
+
+.info {
+  padding: 0 4px;
+}
+
+.value {
+  padding: 0 4px;
+  background-color: $white;
+  color: $defaultColor;
+}

frontend/src/History/HistoryRowParameter.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import styles from './HistoryRowParameter.css';
+
+class HistoryRowParameter extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      value
+    } = this.props;
+
+    return (
+      <div className={styles.parameter}>
+        <div className={styles.info}>
+          <span>
+            {
+              title
+            }
+          </span>
+        </div>
+
+        <div
+          className={styles.value}
+        >
+          {
+            value
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+HistoryRowParameter.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired
+};
+
+export default HistoryRowParameter;

frontend/src/Store/Actions/historyActions.js

@@ -46,6 +46,12 @@ export const defaultState = {
       isSortable: false,
       isVisible: true
     },
+    {
+      name: 'parameters',
+      label: 'Parameters',
+      isSortable: false,
+      isVisible: false
+    },
     {
       name: 'categories',
       label: 'Categories',