Fixed: Display of album release with many countries

frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import shortenList from 'Utilities/String/shortenList';
 import titleCase from 'Utilities/String/titleCase';
 import SelectInput from './SelectInput';
 
@@ -17,7 +18,7 @@ function createMapStateToProps() {
           value: `${albumRelease.title}` +
             `${albumRelease.disambiguation ? ' (' : ''}${titleCase(albumRelease.disambiguation)}${albumRelease.disambiguation ? ')' : ''}` +
             `, ${albumRelease.mediumCount} med, ${albumRelease.trackCount} tracks` +
-            `${albumRelease.country.length > 0 ? ', ' : ''}${albumRelease.country}` +
+            `${albumRelease.country.length > 0 ? ', ' : ''}${shortenList(albumRelease.country)}` +
             `${albumRelease.format ? ', [' : ''}${albumRelease.format}${albumRelease.format ? ']' : ''}`
         };
       });

frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js

@@ -5,6 +5,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { inputTypes } from 'Helpers/Props';
+import shortenList from 'Utilities/String/shortenList';
 import titleCase from 'Utilities/String/titleCase';
 
 class SelectAlbumReleaseRow extends Component {
@@ -63,7 +64,7 @@ class SelectAlbumReleaseRow extends Component {
                       value: `${r.title}` +
                         `${r.disambiguation ? ' (' : ''}${titleCase(r.disambiguation)}${r.disambiguation ? ')' : ''}` +
                         `, ${r.mediumCount} med, ${r.trackCount} tracks` +
-                        `${r.country.length > 0 ? ', ' : ''}${r.country}` +
+                        `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
                         `${r.monitored ? ', Monitored' : ''}`
                     }))}

frontend/src/Utilities/String/shortenList.js

@@ -0,0 +1,7 @@
+export default function shortenList(input, startCount = 3, endCount = 1, separator = ', ') {
+  const sorted = [...input].sort();
+  if (sorted.length <= startCount + endCount) {
+    return sorted.join(separator);
+  }
+  return [...sorted.slice(0, startCount), '...', sorted.slice(-endCount)].join(separator);
+}