add changelog link to about dialog

src/about/AboutDialog.test.tsx

@@ -50,7 +50,7 @@ it('should manage license dialog open/close', async () => {
         </Provider>,
     );
 
-    userEvent.click(screen.getByText('Open Source Licenses'));
+    userEvent.click(screen.getByText('Software Licenses'));
 
     expect(
         screen.getByText('Pybricks Code is built on open source software.', {

src/about/AboutDialog.tsx

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import {
     appName,
     appVersion,
+    changelogUrl,
     legoDisclaimer,
     pybricksCopyright,
     pybricksWebsiteUrl,
@@ -57,6 +58,10 @@ class AboutDialog extends React.Component<AboutDialogProps> {
                         >
                             {i18n.translate(AboutStringId.LicenseButtonLabel)}
                         </Button>
+                        <AnchorButton href={changelogUrl} target="blank_">
+                            {i18n.translate(AboutStringId.ChangelogButtonLabel)}&nbsp;
+                            <ExternalLinkIcon />
+                        </AnchorButton>
                         <AnchorButton href={pybricksWebsiteUrl} target="blank_">
                             {i18n.translate(AboutStringId.WebsiteButtonLabel)}&nbsp;
                             <ExternalLinkIcon />

src/about/i18n.en.json

@@ -1,7 +1,8 @@
 {
     "about": {
         "description": "MicroPython for LEGO® Powered Up smart hubs.",
-        "licenseButton": { "label": "Open Source Licenses" },
+        "licenseButton": { "label": "Software Licenses" },
+        "changelogButton": { "label": "Changelog" },
         "websiteButton": { "label": "Pybricks Website" }
     }
 }

src/about/i18n.ts

@@ -6,5 +6,6 @@
 export enum AboutStringId {
     Description = 'about.description',
     LicenseButtonLabel = 'about.licenseButton.label',
+    ChangelogButtonLabel = 'about.changelogButton.label',
     WebsiteButtonLabel = 'about.websiteButton.label',
 }