chore: Release v1.13.3

web/src/changelog.json

@@ -1,40 +1,16 @@
 {
   "Interface - General": [
     {
-      "issueId": 213,
-      "url": "/issues/213",
-      "description": "Improve Go versions selection"
+      "issueId": 251,
+      "url": "/pull/251",
+      "description": "Redesign command bar to reduce number of items."
     }
   ],
-  "Interface - IDE": [
+  "Interface - Hotfixes": [
     {
-      "issueId": 210,
-      "url": "/issues/210",
-      "description": "Properly display delayed messages from Go programs executed on server"
-    },
-    {
-      "issueId": 215,
-      "url": "/pull/215",
-      "description": "Properly handle WebAssembly programs lifecycle"
-    },
-    {
-      "issueId": 218,
-      "url": "/issues/218",
-      "description": "Add debouncing for code completion API calls"
-    }
-  ],
-  "Go - Runtime": [
-    {
-      "issueId": 211,
-      "url": "/pull/211",
-      "description": "Add embedded Go interpreter based on Yaegi"
-    }
-  ],
-  "Go - WebAssembly": [
-    {
-      "issueId": 211,
-      "url": "/pull/211",
-      "description": "Bump Go version to 1.19"
+      "issueId": 250,
+      "url": "/pull/250",
+      "description": "Remove broken web worker update mechanism."
     }
   ]
 }

web/src/components/core/Header/Header.tsx

@@ -4,13 +4,11 @@ import {
   ICommandBarItemProps, Stack,
 } from '@fluentui/react';
 
-import environment from "~/environment";
-import apiClient, {VersionsInfo} from "~/services/api";
-import {newAddNotificationAction, NotificationType} from "~/store/notifications";
+import apiClient, { VersionsInfo } from "~/services/api";
+import { newAddNotificationAction, NotificationType } from "~/store/notifications";
 import SettingsModal, { SettingsChanges } from '~/components/settings/SettingsModal';
 import ThemeableComponent from '~/components/utils/ThemeableComponent';
 import AboutModal from '~/components/modals/AboutModal';
-import ChangeLogModal from '~/components/modals/ChangeLogModal';
 import RunTargetSelector from '~/components/inputs/RunTargetSelector';
 import SharePopup from '~/components/utils/SharePopup';
 import {
@@ -39,7 +37,6 @@ const BTN_SHARE_CLASSNAME = 'Header__btn--share';
 interface HeaderState {
   showSettings?: boolean
   showAbout?: boolean
-  showChangelog?: boolean
   loading?: boolean
   showShareMessage?: boolean
   goVersions?: VersionsInfo
@@ -75,7 +72,6 @@ export class Header extends ThemeableComponent<any, HeaderState> {
     this.state = {
       showSettings: false,
       showAbout: false,
-      showChangelog: false,
       loading: false,
       showShareMessage: false
     };
@@ -176,6 +172,15 @@ export class Header extends ThemeableComponent<any, HeaderState> {
         onClick: () => {
           this.setState({ showSettings: true });
         }
+      },
+      {
+        key: 'about',
+        text: 'About',
+        ariaLabel: 'About',
+        iconProps: { iconName: 'Info' },
+        onClick: () => {
+          this.setState({ showAbout: true });
+        }
       }
     ];
   }
@@ -227,45 +232,6 @@ export class Header extends ThemeableComponent<any, HeaderState> {
     ];
   }
 
-  get overflowItems(): ICommandBarItemProps[] {
-    return [
-      {
-        key: 'new-issue',
-        text: 'Submit Issue',
-        ariaLabel: 'Submit Issue',
-        iconProps: { iconName: 'Bug' },
-        onClick: () => window.open(environment.urls.issue, '_blank')
-      },
-      {
-        key: 'donate',
-        text: 'Donate',
-        ariaLabel: 'Donate',
-        iconProps: { iconName: 'Heart' },
-        onClick: () => window.open(environment.urls.donate, '_blank')
-      },
-      {
-        key: 'changelog',
-        text: 'What\'s new',
-        ariaLabel: 'Changelog',
-        iconOnly: true,
-        disabled: this.isDisabled,
-        iconProps: { iconName: 'Giftbox' },
-        onClick: () => {
-          this.setState({ showChangelog: true });
-        }
-      },
-      {
-        key: 'about',
-        text: 'About',
-        ariaLabel: 'About',
-        iconProps: { iconName: 'Info' },
-        onClick: () => {
-          this.setState({ showAbout: true });
-        }
-      }
-    ]
-  }
-
   private onSettingsClose(changes: SettingsChanges) {
     if (changes.monaco) {
       // Update monaco state if some of its settings were changed
@@ -285,7 +251,7 @@ export class Header extends ThemeableComponent<any, HeaderState> {
     return (
       <header
         className='header'
-        style={{backgroundColor: this.theme.palette.white}}
+        style={{ backgroundColor: this.theme.palette.white }}
       >
         <img
           src='/go-logo-blue.svg'
@@ -295,8 +261,7 @@ export class Header extends ThemeableComponent<any, HeaderState> {
         <CommandBar
           className='header__commandBar'
           items={this.menuItems}
-          farItems={this.asideItems.filter(({hidden}) => !hidden)}
-          overflowItems={this.overflowItems}
+          farItems={this.asideItems.filter(({ hidden }) => !hidden)}
           ariaLabel='CodeEditor menu'
         />
         <SharePopup
@@ -313,10 +278,6 @@ export class Header extends ThemeableComponent<any, HeaderState> {
           onClose={() => this.setState({ showAbout: false })}
           isOpen={this.state.showAbout}
         />
-        <ChangeLogModal
-          onClose={() => this.setState({ showChangelog: false })}
-          isOpen={this.state.showChangelog}
-        />
       </header>
     );
   }

web/src/components/modals/AboutModal/AboutModal.tsx

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react';
+import {
+  IconButton,
+  FontWeights,
+  FontSizes,
+  mergeStyleSets,
+  useTheme,
+  Stack,
+  DefaultButton,
+} from '@fluentui/react';
+import { Modal } from '@fluentui/react/lib/Modal';
+import { Link } from '@fluentui/react/lib/Link';
+
+import ChangeLog from './ChangeLog';
+import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
+import environment from "~/environment";
+
+const TITLE_ID = 'AboutTitle';
+const SUB_TITLE_ID = 'AboutSubtitle';
+
+interface AboutModalProps {
+  isOpen?: boolean
+  onClose: () => void
+}
+
+const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) => {
+  const theme = useTheme();
+  const contentStyles = getContentStyles(theme);
+  const iconButtonStyles = getIconButtonStyles(theme);
+
+  const modalStyles = useMemo(() => mergeStyleSets({
+    main: {
+      maxWidth: '640px',
+    },
+    title: {
+      fontWeight: FontWeights.light,
+      fontSize: FontSizes.xxLargePlus,
+      padding: '1em 2em 2em 2em',
+      textAlign: 'center',
+    },
+    info: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    footer: {
+      marginTop: '2em',
+      backgroundColor: theme.semanticColors.bodyStandoutBackground,
+      padding: '.3rem 24px 24px',
+      margin: '24px -24px -24px'
+    },
+  }), [theme]);
+
+  return (
+    <Modal
+      titleAriaId={TITLE_ID}
+      subtitleAriaId={SUB_TITLE_ID}
+      isOpen={props.isOpen}
+      onDismiss={props.onClose}
+      styles={modalStyles}
+    >
+      <div className={contentStyles.header}>
+        <span id={TITLE_ID}>About</span>
+        <IconButton
+          iconProps={{ iconName: 'Cancel' }}
+          styles={iconButtonStyles}
+          ariaLabel='Close popup modal'
+          onClick={props.onClose as any}
+        />
+      </div>
+      <div id={SUB_TITLE_ID} className={contentStyles.body}>
+        <div className={modalStyles.title}>
+          Better Go Playground
+        </div>
+        <div className={modalStyles.info}>
+          <Link href={environment.urls.github} target='_blank'>
+            <b>GitHub</b>
+          </Link>
+          <span>Version: {environment.appVersion}</span>
+        </div>
+        <div className={modalStyles.footer}>
+          <div>
+            <h3>What's New</h3>
+            <ChangeLog />
+          </div>
+          <Stack
+            horizontal
+            wrap
+            horizontalAlign='end'
+            tokens={{
+              childrenGap: 'm',
+            }}
+            style={{
+              marginTop: '1.5rem'
+            }}
+          >
+            <Stack.Item grow={1}>
+              <DefaultButton
+                href={environment.urls.issue}
+                target='_blank'
+                iconProps={{
+                  iconName: 'Bug'
+                }}
+              >
+                Report Bug
+              </DefaultButton>
+
+
+            </Stack.Item>
+            <DefaultButton
+              href={environment.urls.github}
+              target='_blank'
+              iconProps={{
+                iconName: 'OpenSource'
+              }}
+            >
+              Source
+            </DefaultButton>
+
+            <DefaultButton
+              href={environment.urls.donate}
+              target='_blank'
+              iconProps={{
+                iconName: 'Heart'
+              }}
+            >
+              Donate
+            </DefaultButton>
+          </Stack>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+AboutModal.defaultProps = { isOpen: false };
+export default AboutModal;

web/src/components/modals/AboutModal/ChangeLog/ChangeLog.css

@@ -0,0 +1,3 @@
+.ChangeLog .ChangeLog__issue-url:after {
+  content: " - ";
+}