diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx index 5f1f41786..5e0b23c0b 100644 --- a/src/components/settings/SettingsFooter.test.tsx +++ b/src/components/settings/SettingsFooter.test.tsx @@ -48,7 +48,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => { ); }); - expect(screen.getByTitle('app-version')).toMatchSnapshot(); + expect(screen.getByLabelText('app-version')).toMatchSnapshot(); }); it('should show development app version', async () => { @@ -72,7 +72,49 @@ describe('routes/components/settings/SettingsFooter.tsx', () => { ); }); - expect(screen.getByTitle('app-version')).toMatchSnapshot(); + expect(screen.getByLabelText('app-version')).toMatchSnapshot(); + }); + }); + + describe('update available visual indicator', () => { + it('using latest version', async () => { + await act(async () => { + render( + + + + + , + ); + }); + + expect( + screen.getByTitle('You are using the latest version'), + ).toMatchSnapshot(); + }); + + it('new version available', async () => { + await act(async () => { + render( + + + + + , + ); + }); + + expect(screen.getByTitle('New version available')).toMatchSnapshot(); }); }); diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx index 54d4c4708..e53ca02ec 100644 --- a/src/components/settings/SettingsFooter.tsx +++ b/src/components/settings/SettingsFooter.tsx @@ -1,12 +1,23 @@ -import { PersonIcon, XCircleIcon } from '@primer/octicons-react'; +import { + AlertFillIcon, + CheckCircleFillIcon, + PersonIcon, + XCircleIcon, +} from '@primer/octicons-react'; import { type FC, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { BUTTON_CLASS_NAME } from '../../styles/gitify'; -import { Size } from '../../types'; +import { IconColor, Size } from '../../types'; import { getAppVersion, quitApp } from '../../utils/comms'; import { openGitifyReleaseNotes } from '../../utils/links'; -export const SettingsFooter: FC = () => { +interface ISettingsFooter { + isUpdateAvailable?: boolean; +} + +export const SettingsFooter: FC = ({ + isUpdateAvailable = false, +}: ISettingsFooter) => { const [appVersion, setAppVersion] = useState(null); const navigate = useNavigate(); @@ -29,7 +40,26 @@ export const SettingsFooter: FC = () => { title="View release notes" onClick={() => openGitifyReleaseNotes(appVersion)} > - Gitify {appVersion} +
+ Gitify {appVersion} + + {isUpdateAvailable ? ( + + + + ) : ( + + + + )} + +
- + ); }; diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index 58ff65ece..e5b4f9869 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -768,12 +768,38 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = ` title="View release notes" type="button" > - - Gitify - v0.0.1 - + + Gitify + v0.0.1 + + + + + + +