Create test asset overlay

This is a Work-in-Progress, merged current master and some non-trivial merging issues and stylistic touch-ups need to be applied.

src/features/test-assets/testVectorTableConstants.js

@@ -3,9 +3,9 @@ import _ from 'lodash';
 import { Badge, Button } from 'react-bootstrap';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
-// an object with custom `preprocessing` methods that won't be used
-// by react-bootstrap table and serve the preprocessing of data
 
+// A custom buttom displayed as 'pivot' of the table allowing the user
+// to copy the URL if necessary and otherwise displaying it as tooltip
 const UrlButton = ({ url }) => {
   return (
     url && (
@@ -54,7 +54,9 @@ const listToBadges = vals => {
     </React.Fragment>
   );
 };
+
 // remove entries, the value of which is just an 'x', other values are left untouched
+// this seems to be the case for quite a few columns
 const removeXValues = val => {
   if (_.lowerCase(val) === 'x') {
     return '';
@@ -77,10 +79,8 @@ const testVectorColumnsRaw = [
       var url = _.replace(val, '<a href=', '');
       return _.replace(url, '>Link</a>', '');
     },
-    // classes: 'id-custom-cell',
     formatter: cell => {
       return <UrlButton url={cell} />;
-      // return <code>{cell}</code>;
     },
   },
   {
@@ -229,6 +229,7 @@ const testVectorColumnsRaw = [
   {
     text: 'segment_template_duration',
     dataField: 'segment_template_duration',
+    preProcess: removeXValues,
   },
   {
     text: 'segment_template_number',
@@ -293,7 +294,7 @@ const testVectorColumnsRaw = [
   {
     text: 'video_codec',
     dataField: 'video_codec',
-    preProcess: x => _.split(x, ','),
+    preProcess: _.flow(removeXValues, x => _.split(x, ',')),
     formatter: listToPills,
   },
 ];
@@ -330,5 +331,3 @@ export const testVectorColumnSelectOptions = _.map(testVectorColumnsRaw, o => ({
   value: o.dataField,
   label: o.text,
 }));
-
-console.log(testVectorColumnSelectOptions);