Make the version number clickable for the SNAPSHOT version in development docker build (#843)

* Make the version number clickable for the SNAPSHOT version while using development docker build

* Update the snapshot version link in to view list of commits since the release

* Create a new component for the link to the version

* Add tests and refactored a bit

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/dialogs/AboutDialog.js

@@ -25,6 +25,29 @@ const links = {
   featureRequests: 'github.com/navidrome/navidrome/issues',
 }
 
+const LinkToVersion = ({ version }) => {
+  if (version === 'dev') {
+    return <TableCell align="left">{version}</TableCell>
+  }
+
+  const parts = version.split(' ')
+  const commitID = parts[1].replace(/[()]/g, '')
+  const isSnapshot = version.includes('SNAPSHOT')
+  const url = isSnapshot
+    ? `https://github.com/navidrome/navidrome/compare/v${
+        parts[0].split('-')[0]
+      }...${commitID}`
+    : `https://github.com/navidrome/navidrome/releases/tag/v${parts[0]}`
+  return (
+    <TableCell align="left">
+      <Link href={url} target="_blank" rel="noopener noreferrer">
+        {parts[0]}
+      </Link>
+      {' (' + commitID + ')'}
+    </TableCell>
+  )
+}
+
 const AboutDialog = ({ open, onClose }) => {
   const translate = useTranslate()
   return (
@@ -45,22 +68,7 @@ const AboutDialog = ({ open, onClose }) => {
                 <TableCell align="right" component="th" scope="row">
                   {translate('menu.version')}:
                 </TableCell>
-                {config.version === 'dev' ? (
-                  <TableCell align="left"> {config.version} </TableCell>
-                ) : (
-                  <TableCell align="left">
-                    <Link
-                      href={`https://github.com/navidrome/navidrome/releases/tag/v${
-                        config.version.split(' ')[0]
-                      }`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {config.version.split(' ')[0]}
-                    </Link>
-                    {' ' + config.version.split(' ')[1]}
-                  </TableCell>
-                )}
+                <LinkToVersion version={config.version} />
               </TableRow>
               {Object.keys(links).map((key) => {
                 return (
@@ -118,4 +126,4 @@ AboutDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
 }
 
-export { AboutDialog }
+export { AboutDialog, LinkToVersion }