fix(ui): don't crash the About dialog before the server version is known

Signed-off-by: kgeminicdev <kurtgeminicb@gmail.com>

ui/src/dialogs/AboutDialog.jsx

@@ -80,11 +80,12 @@ const links = {
 }
 
 const LinkToVersion = ({ version }) => {
-  if (version === 'dev') {
+  const parts = version.split(' ')
+  // 'dev', or '' while the server version is still being fetched
+  if (parts.length < 2) {
     return <>{version}</>
   }
 
-  const parts = version.split(' ')
   const commitID = parts[1].replace(/[()]/g, '')
   const isSnapshot = version.includes('SNAPSHOT')
   const url = isSnapshot
@@ -104,7 +105,7 @@ const LinkToVersion = ({ version }) => {
 
 const ShowVersion = ({ uiVersion, serverVersion }) => {
   const translate = useTranslate()
-  const showRefresh = uiVersion !== serverVersion
+  const showRefresh = !!serverVersion && uiVersion !== serverVersion
 
   return (
     <>

ui/src/dialogs/AboutDialog.test.jsx

@@ -1,11 +1,40 @@
 import * as React from 'react'
 import { cleanup, render, screen } from '@testing-library/react'
-import { LinkToVersion } from './AboutDialog'
+import { TestContext } from 'ra-test'
+import { DataProviderContext } from 'react-admin'
+import { describe, afterEach, it, expect, vi } from 'vitest'
+import { AboutDialog, LinkToVersion } from './AboutDialog'
+import subsonic from '../subsonic/index.js'
 import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import Table from '@material-ui/core/Table'
 import TableCell from '@material-ui/core/TableCell'
 
+describe('<AboutDialog />', () => {
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  it('opens before the ping request completes', () => {
+    vi.spyOn(subsonic, 'ping').mockReturnValue(new Promise(() => {}))
+    const dataProvider = {
+      getOne: vi.fn().mockReturnValue(new Promise(() => {})),
+    }
+
+    render(
+      <DataProviderContext.Provider value={dataProvider}>
+        <TestContext enableReducers>
+          <AboutDialog open={true} onClose={vi.fn()} />
+        </TestContext>
+      </DataProviderContext.Provider>,
+    )
+
+    expect(screen.getByText('Navidrome Music Server')).toBeTruthy()
+    expect(screen.queryByText('ra.notification.new_version')).toBeNull()
+  })
+})
+
 const Wrapper = ({ version }) => (
   <Table>
     <TableBody>
@@ -27,6 +56,12 @@ describe('<LinkToVersion />', () => {
     expect(screen.queryByRole('link')).toBeNull()
   })
 
+  it('should render nothing while the server version is not known yet', () => {
+    render(<Wrapper version="" />)
+    expect(screen.queryByRole('link')).toBeNull()
+    expect(screen.queryByRole('cell').textContent).toBe('')
+  })
+
   it('should render link to GH tag page for full releases', () => {
     const version = '0.40.0 (300a0292)'
     render(<Wrapper version={version} />)