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

+import React from 'react';
+import _ from 'lodash';
+import { Badge, Button } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+
+// 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 && (
+      <OverlayTrigger
+        key={url}
+        placement="top"
+        overlay={
+          <Popover id={`popover-positioned-${url}`}>
+            <Popover.Content>{url}</Popover.Content>
+          </Popover>
+        }
+      >
+        <Button
+          variant="outline-primary"
+          size="sm"
+          onClick={() => navigator.clipboard.writeText(url)}
+        >
+          Copy Url
+        </Button>
+      </OverlayTrigger>
+    )
+  );
+};
+
+// convert a list of strings to bootstrap "pill badges"
+const listToPills = vals => {
+  return (
+    <React.Fragment>
+      {_.map(vals, val => (
+        <Badge pill variant="secondary" key={val}>
+          {val}
+        </Badge>
+      ))}
+    </React.Fragment>
+  );
+};
+
+const listToBadges = vals => {
+  return (
+    <React.Fragment>
+      {_.map(vals, val => (
+        <Badge className="test-case-badge" variant="secondary" key={val}>
+          {val}
+        </Badge>
+      ))}
+    </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 '';
+  } else {
+    return val;
+  }
+};
+
+const booleanToIcon = val => <i className={val ? 'bi bi-check-square' : 'bi bi-square'} />;
+
+const testVectorColumnsRaw = [
+  {
+    isDummy: true,
+    text: 'url',
+    fixed: true,
+    dataField: 'url',
+    preProcess: val => {
+      // extract expressive url for vector, wrapped in <a> in API-response
+      // THIS IS NOT VERY ROBUST, relies on exact string-match
+      var url = _.replace(val, '<a href=', '');
+      return _.replace(url, '>Link</a>', '');
+    },
+    formatter: cell => {
+      return <UrlButton url={cell} />;
+    },
+  },
+  {
+    text: 'testvector',
+    dataField: 'testvector',
+    preProcess: val => {
+      // extract expressive label for vector, wrapped in <a> in API-response
+      var label = _.last(_.split(val, '">', 2));
+      return _.replace(label, '</a>', '');
+    },
+  },
+  {
+    text: 'testcase',
+    dataField: 'testcase',
+    preProcess: x => _.split(x, ','),
+    formatter: listToBadges,
+  },
+  {
+    text: 'active',
+    dataField: 'active',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'Asset identifier',
+    dataField: 'asset_identifier',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'Feature',
+    dataField: 'feature',
+  },
+  {
+    text: 'Feature Group',
+    dataField: 'featureGroup',
+  },
+  {
+    text: 'identifier',
+    dataField: 'identifier',
+  },
+  {
+    text: 'audio_codec',
+    dataField: 'audio_codec',
+    preProcess: x => _.split(x, ','),
+    formatter: listToPills,
+  },
+  {
+    text: 'Base Url',
+    dataField: 'base_url',
+  },
+  {
+    text: 'cenc_pssh',
+    dataField: 'cenc_pssh',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'Created At',
+    type: 'date',
+    dataField: 'createdAt',
+  },
+  {
+    text: 'dashjs_smoke_vector',
+    dataField: 'dashjs_smoke_vector',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'default_content',
+    dataField: 'default_content',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'Description',
+    dataField: 'description',
+  },
+  {
+    text: 'Duration',
+    dataField: 'duration',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'early_terminated_period',
+    dataField: 'early_terminated_period',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'max_num_audio',
+    dataField: 'max_num_audio',
+  },
+  {
+    text: 'max_num_video',
+    dataField: 'max_num_video',
+  },
+  {
+    text: 'max_video_resolution',
+    dataField: 'max_video_resolution',
+  },
+  {
+    text: 'mime_types',
+    dataField: 'mime_types',
+    preProcess: x => _.split(x, ','),
+    formatter: listToPills,
+  },
+  {
+    text: 'min_update_period',
+    dataField: 'min_update_period',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'mpd_type',
+    dataField: 'mpd_type',
+  },
+  {
+    text: 'multi_resolution_video',
+    dataField: 'multi_resolution_video',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'num_periods',
+    dataField: 'num_periods',
+  },
+  {
+    text: 'period_xlink_actuate',
+    dataField: 'period_xlink_actuate',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'period_xlink_href',
+    dataField: 'period_xlink_href',
+  },
+  {
+    text: 'profile',
+    dataField: 'profile',
+  },
+  {
+    text: 'segment_template',
+    dataField: 'segment_template',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'segment_template_duration',
+    dataField: 'segment_template_duration',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'segment_template_number',
+    dataField: 'segment_template_number',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'segment_template_presentation_timeoffset',
+    dataField: 'segment_template_presentation_timeoffset',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'segment_template_time',
+    dataField: 'segment_template_time',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'segment_timeline',
+    dataField: 'segment_timeline',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'content_protection_schemeid_uri',
+    dataField: 'content_protection_schemeid_uri',
+    preProcess: _.flow(removeXValues, x => _.split(x, ',')),
+    formatter: listToBadges,
+  },
+  {
+    text: 'inband_event_stream_schemeid_uri',
+    dataField: 'inband_event_stream_schemeid_uri',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'source',
+    dataField: 'source',
+  },
+  {
+    text: 'time_shift_buffer_depth',
+    dataField: 'time_shift_buffer_depth',
+    preProcess: removeXValues,
+  },
+  {
+    text: 'updatedAt',
+    dataField: 'updatedAt',
+  },
+  {
+    text: 'urn_mpeg_dash_period_continuity_2014',
+    dataField: 'urn_mpeg_dash_period_continuity_2014',
+    preProcess: Boolean,
+    formatter: booleanToIcon,
+  },
+  {
+    text: 'utc_timing_schemeid_uri',
+    dataField: 'utc_timing_schemeid_uri',
+    preProcess: _.flow(removeXValues, x => _.split(x, ',')),
+    formatter: listToPills,
+  },
+  {
+    text: 'video_codec',
+    dataField: 'video_codec',
+    preProcess: _.flow(removeXValues, x => _.split(x, ',')),
+    formatter: listToPills,
+  },
+];
+
+const testVectorColumsPreProcessFunctions = _.mapValues(
+  // key items by field, map values to just the function
+  _.keyBy(
+    // Limit values to one's with preprocessing function
+    _.filter(testVectorColumnsRaw, o => _.has(o, 'preProcess')),
+    'dataField'
+  ),
+  'preProcess'
+);
+
+export function preProcessTestVector(value, key) {
+  if (_.has(testVectorColumsPreProcessFunctions, key)) {
+    var val = testVectorColumsPreProcessFunctions[key](value);
+    return val;
+  } else {
+    return value;
+  }
+}
+
+// omit specified columns
+export const testVectorTableColumns = _.map(testVectorColumnsRaw, o => _.omit(o, ['preProcess']));
+
+export const testVectorColumnSelectOptions = _.map(testVectorColumnsRaw, o => ({
+  value: o.dataField,
+  label: o.text,
+}));

[Marcel Ebert]

I like the button and the tooltip, that's a good idea.