From 32b95661d1a636ccf1d1666c6b3a7a2d93bac355 Mon Sep 17 00:00:00 2001
From: aglowinthefield <146008217+aglowinthefield@users.noreply.github.com>
Date: Mon, 8 Sep 2025 22:07:02 -0400
Subject: [PATCH 1/5] Add release MBID to release selector dropdown.

---
 .../Form/AlbumReleaseSelectInputConnector.js  | 21 ++++++++++---------
 .../AlbumRelease/SelectAlbumReleaseRow.js     |  7 ++++---
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index 4433fac6e..a443f83ea 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -1,15 +1,15 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
+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';
 
 function createMapStateToProps() {
   return createSelector(
-    (state, { albumReleases }) => albumReleases,
+    (state, {albumReleases}) => albumReleases,
     (albumReleases) => {
       const values = _.map(albumReleases.value, (albumRelease) => {
 
@@ -29,13 +29,14 @@ function createMapStateToProps() {
             `${disambiguation ? ' (' : ''}${titleCase(disambiguation)}${disambiguation ? ')' : ''}` +
             `, ${mediumCount} med, ${trackCount} tracks` +
             `${country && country.length > 0 ? `, ${shortenList(country)}` : ''}` +
-            `${format ? `, [${format}]` : ''}`
+            `${format ? `, [${format}]` : ''}` +
+            `, ${foreignReleaseId.toString()}`
         };
       });
 
       const sortedValues = _.orderBy(values, ['value']);
 
-      const value = _.find(albumReleases.value, { monitored: true }).foreignReleaseId;
+      const value = _.find(albumReleases.value, {monitored: true}).foreignReleaseId;
 
       return {
         values: sortedValues,
@@ -50,15 +51,15 @@ class AlbumReleaseSelectInputConnector extends Component {
   //
   // Listeners
 
-  onChange = ({ name, value }) => {
+  onChange = ({name, value}) => {
     const {
       albumReleases
     } = this.props;
 
-    const updatedReleases = _.map(albumReleases.value, (e) => ({ ...e, monitored: false }));
-    _.find(updatedReleases, { foreignReleaseId: value }).monitored = true;
+    const updatedReleases = _.map(albumReleases.value, (e) => ({...e, monitored: false}));
+    _.find(updatedReleases, {foreignReleaseId: value}).monitored = true;
 
-    this.props.onChange({ name, value: updatedReleases });
+    this.props.onChange({name, value: updatedReleases});
   };
 
   render() {
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index 26fa7282a..a2c88eb3e 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
@@ -12,7 +12,7 @@ class SelectAlbumReleaseRow extends Component {
   //
   // Listeners
 
-  onInputChange = ({ name, value }) => {
+  onInputChange = ({name, value}) => {
     this.props.onAlbumReleaseSelect(parseInt(name), parseInt(value));
   };
 
@@ -64,7 +64,8 @@ class SelectAlbumReleaseRow extends Component {
                         `, ${r.mediumCount} med, ${r.trackCount} tracks` +
                         `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
-                        `${r.monitored ? ', Monitored' : ''}`
+                        `${r.monitored ? ', Monitored' : ''}` +
+                        `, ${r.id.toString()}`
                     }))}
                     value={matchedReleaseId}
                     onChange={this.onInputChange}

From b1b943d3a161f494c97654b35202d3d96eff00ed Mon Sep 17 00:00:00 2001
From: aglowinthefield <146008217+aglowinthefield@users.noreply.github.com>
Date: Mon, 8 Sep 2025 22:18:16 -0400
Subject: [PATCH 2/5] Eslint fixes

---
 .../Form/AlbumReleaseSelectInputConnector.js   | 18 +++++++++---------
 .../AlbumRelease/SelectAlbumReleaseRow.js      |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index a443f83ea..5cdd57545 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -1,15 +1,15 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {createSelector} from 'reselect';
+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';
 
 function createMapStateToProps() {
   return createSelector(
-    (state, {albumReleases}) => albumReleases,
+    (state, { albumReleases }) => albumReleases,
     (albumReleases) => {
       const values = _.map(albumReleases.value, (albumRelease) => {
 
@@ -36,7 +36,7 @@ function createMapStateToProps() {
 
       const sortedValues = _.orderBy(values, ['value']);
 
-      const value = _.find(albumReleases.value, {monitored: true}).foreignReleaseId;
+      const value = _.find(albumReleases.value, { monitored: true }).foreignReleaseId;
 
       return {
         values: sortedValues,
@@ -51,15 +51,15 @@ class AlbumReleaseSelectInputConnector extends Component {
   //
   // Listeners
 
-  onChange = ({name, value}) => {
+  onChange = ({ name, value }) => {
     const {
       albumReleases
     } = this.props;
 
-    const updatedReleases = _.map(albumReleases.value, (e) => ({...e, monitored: false}));
-    _.find(updatedReleases, {foreignReleaseId: value}).monitored = true;
+    const updatedReleases = _.map(albumReleases.value, (e) => ({ ...e, monitored: false }));
+    _.find(updatedReleases, { foreignReleaseId: value }).monitored = true;
 
-    this.props.onChange({name, value: updatedReleases});
+    this.props.onChange({ name, value: updatedReleases });
   };
 
   render() {
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index a2c88eb3e..e737145f5 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
@@ -12,7 +12,7 @@ class SelectAlbumReleaseRow extends Component {
   //
   // Listeners
 
-  onInputChange = ({name, value}) => {
+  onInputChange = ({ name, value }) => {
     this.props.onAlbumReleaseSelect(parseInt(name), parseInt(value));
   };
 

From 3ac47f83ece07f06f6aa84be8db4f174ee77229d Mon Sep 17 00:00:00 2001
From: aglowinthefield <146008217+aglowinthefield@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:03:18 -0400
Subject: [PATCH 3/5] Shorten MBID for release and surround in brackets.

---
 .../src/Components/Form/AlbumReleaseSelectInputConnector.js     | 2 +-
 .../src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index 5cdd57545..fa8957213 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -30,7 +30,7 @@ function createMapStateToProps() {
             `, ${mediumCount} med, ${trackCount} tracks` +
             `${country && country.length > 0 ? `, ${shortenList(country)}` : ''}` +
             `${format ? `, [${format}]` : ''}` +
-            `, ${foreignReleaseId.toString()}`
+            `, [...${foreignReleaseId.toString().slice(-4)}]`
         };
       });
 
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index e737145f5..b18c09ddd 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -65,7 +65,7 @@ class SelectAlbumReleaseRow extends Component {
                         `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
                         `${r.monitored ? ', Monitored' : ''}` +
-                        `, ${r.id.toString()}`
+                        `, [...${r.id.toString().slice(-4)}]`
                     }))}
                     value={matchedReleaseId}
                     onChange={this.onInputChange}

From f5b7a4036c9ebf2dd9ed1cf3af43c51c8fb4f397 Mon Sep 17 00:00:00 2001
From: aglowinthefield <146008217+aglowinthefield@users.noreply.github.com>
Date: Fri, 19 Sep 2025 10:31:20 -0400
Subject: [PATCH 4/5] Utilize hinted select for MBID

---
 .../Components/Form/AlbumReleaseSelectInputConnector.js   | 8 ++++----
 .../AlbumRelease/SelectAlbumReleaseRow.js                 | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index fa8957213..22a1cdc1d 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -5,7 +5,7 @@ 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';
+import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
@@ -29,8 +29,8 @@ function createMapStateToProps() {
             `${disambiguation ? ' (' : ''}${titleCase(disambiguation)}${disambiguation ? ')' : ''}` +
             `, ${mediumCount} med, ${trackCount} tracks` +
             `${country && country.length > 0 ? `, ${shortenList(country)}` : ''}` +
-            `${format ? `, [${format}]` : ''}` +
-            `, [...${foreignReleaseId.toString().slice(-4)}]`
+            `${format ? `, [${format}]` : ''}`,
+          hint: `MBID: ${foreignReleaseId.toString().slice(0, 8)}`
         };
       });
 
@@ -65,7 +65,7 @@ class AlbumReleaseSelectInputConnector extends Component {
   render() {
 
     return (
-      <SelectInput
+      <EnhancedSelectInput
         {...this.props}
         onChange={this.onChange}
       />
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index b18c09ddd..12bb0b10e 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import SelectInput from 'Components/Form/SelectInput';
+import EnhancedSelectInput from 'Components/Form/EnhancedSelectInput';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import shortenList from 'Utilities/String/shortenList';
@@ -55,7 +55,7 @@ class SelectAlbumReleaseRow extends Component {
             if (name === 'release') {
               return (
                 <TableRowCell key={name}>
-                  <SelectInput
+                  <EnhancedSelectInput
                     name={id.toString()}
                     values={_.map(releases, (r) => ({
                       key: r.id,
@@ -64,8 +64,8 @@ class SelectAlbumReleaseRow extends Component {
                         `, ${r.mediumCount} med, ${r.trackCount} tracks` +
                         `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
-                        `${r.monitored ? ', Monitored' : ''}` +
-                        `, [...${r.id.toString().slice(-4)}]`
+                        `${r.monitored ? ', Monitored' : ''}`,
+                      hint: `MBID: ${r.id.toString().slice(0, 8)}`
                     }))}
                     value={matchedReleaseId}
                     onChange={this.onInputChange}

From ce523d4466b5fa9d2117658591bf8d8c52d831c6 Mon Sep 17 00:00:00 2001
From: aglowinthefield <146008217+aglowinthefield@users.noreply.github.com>
Date: Fri, 19 Sep 2025 23:14:02 -0400
Subject: [PATCH 5/5] Add ... to signify prefix

---
 .../src/Components/Form/AlbumReleaseSelectInputConnector.js     | 2 +-
 .../src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
index 22a1cdc1d..0d55eacfa 100644
--- a/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
+++ b/frontend/src/Components/Form/AlbumReleaseSelectInputConnector.js
@@ -30,7 +30,7 @@ function createMapStateToProps() {
             `, ${mediumCount} med, ${trackCount} tracks` +
             `${country && country.length > 0 ? `, ${shortenList(country)}` : ''}` +
             `${format ? `, [${format}]` : ''}`,
-          hint: `MBID: ${foreignReleaseId.toString().slice(0, 8)}`
+          hint: `MBID: ${foreignReleaseId.toString().slice(0, 8)}...`
         };
       });
 
diff --git a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
index 12bb0b10e..8dfaf3c96 100644
--- a/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
+++ b/frontend/src/InteractiveImport/AlbumRelease/SelectAlbumReleaseRow.js
@@ -65,7 +65,7 @@ class SelectAlbumReleaseRow extends Component {
                         `${r.country.length > 0 ? ', ' : ''}${shortenList(r.country)}` +
                         `${r.format ? ', [' : ''}${r.format}${r.format ? ']' : ''}` +
                         `${r.monitored ? ', Monitored' : ''}`,
-                      hint: `MBID: ${r.id.toString().slice(0, 8)}`
+                      hint: `MBID: ${r.id.toString().slice(0, 8)}...`
                     }))}
                     value={matchedReleaseId}
                     onChange={this.onInputChange}