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',
 }

src/app/constants.ts

@@ -13,6 +13,10 @@ export const appName = process.env.REACT_APP_NAME || 'REACT_APP_NAME is undefine
 export const appVersion =
     process.env.REACT_APP_VERSION || 'REACT_APP_VERSION is undefined';
 
+/** URL to Pybricks Code changelog. */
+export const changelogUrl =
+    'https://github.com/pybricks/pybricks-code/blob/master/CHANGELOG.md';
+
 /** URL to main Pybricks website. */
 export const pybricksWebsiteUrl = 'https://pybricks.com';
 

src/index.scss

@@ -44,10 +44,19 @@ body {
     user-select: none;
 }
 
+a.#{$ns}-button {
+    text-align: left;
+}
+
 .#{$ns}-button-text > img {
     display: block;
 }
 
+.#{$ns}-dialog-footer-actions {
+    flex-wrap: wrap;
+    row-gap: 10px;
+}
+
 .#{$ns}-form-group > .#{$ns}-label {
     font-weight: bolder;
 }

src/licenses/i18n.en.json

@@ -1,6 +1,6 @@
 {
     "license": {
-        "title": "Open Source Licenses",
+        "title": "Open Source Software Licenses",
         "description": "{name} is built on open source software. By using {name} you are agreeing to the terms and conditions of all of the included software licenses.",
         "packageLabel": "Package:",
         "authorLabel": "Author:",