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' ? (
+                <LinkToVersion version={config.version} />
-                  <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>
-                )}
               </TableRow>
               {Object.keys(links).map((key) => {
                 return (
@@ -118,4 +126,4 @@ AboutDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
 }
 
-export { AboutDialog }
+export { AboutDialog, LinkToVersion }

ui/src/dialogs/AboutDialog.test.js

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { cleanup, render } from '@testing-library/react'
+import { LinkToVersion } from './AboutDialog'
+import TableBody from '@material-ui/core/TableBody'
+import TableRow from '@material-ui/core/TableRow'
+import Table from '@material-ui/core/Table'
+
+const Wrapper = ({ version }) => (
+  <Table>
+    <TableBody>
+      <TableRow>
+        <LinkToVersion version={version} />
+      </TableRow>
+    </TableBody>
+  </Table>
+)
+
+describe('<LinkToVersion />', () => {
+  afterEach(cleanup)
+
+  it('should not render any link for "dev" version', () => {
+    const version = 'dev'
+    const { queryByRole } = render(<Wrapper version={version} />)
+    expect(queryByRole('link')).toBeNull()
+  })
+
+  it('should render link to GH tag page for full releases', () => {
+    const version = '0.40.0 (300a0292)'
+    const { queryByRole } = render(<Wrapper version={version} />)
+
+    const link = queryByRole('link')
+    expect(link.href).toBe(
+      'https://github.com/navidrome/navidrome/releases/tag/v0.40.0'
+    )
+    expect(link.textContent).toBe('0.40.0')
+
+    const cell = queryByRole('cell')
+    expect(cell.textContent).toBe('0.40.0 (300a0292)')
+  })
+
+  it('should render link to GH comparison page for snapshot releases', () => {
+    const version = '0.40.0-SNAPSHOT (300a0292)'
+    const { queryByRole } = render(<Wrapper version={version} />)
+
+    const link = queryByRole('link')
+    expect(link.href).toBe(
+      'https://github.com/navidrome/navidrome/compare/v0.40.0...300a0292'
+    )
+    expect(link.textContent).toBe('0.40.0-SNAPSHOT')
+
+    const cell = queryByRole('cell')
+    expect(cell.textContent).toBe('0.40.0-SNAPSHOT (300a0292)')
+  })
+})