Add statusbar

web/src/components/core/StatusBar/StatusBar.css

@@ -0,0 +1,27 @@
+:root {
+  --color-idle: #007fd4;
+  --color-busy: #cc6633;
+}
+
+.StatusBar {
+  display: flex;
+  flex-direction: row;
+  color: #fff;
+  background-color: var(--color-idle);
+  padding: 0 7px;
+  justify-content: space-between;
+  height: 22px;
+}
+
+.StatusBar.StatusBar--busy {
+  background-color: var(--color-busy);
+}
+
+.StatusBar__side-left,
+.StatusBar__side-right {
+  display: flex;
+  flex-direction: row;
+}
+
+.StatusBar__side-right {
+}

web/src/components/core/StatusBar/StatusBar.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import {editor} from "monaco-editor";
+import config, {RuntimeType} from '~/services/config';
+import EllipsisText from '~/components/utils/EllipsisText';
+import StatusBarItem from '~/components/core/StatusBar/StatusBarItem';
+import EnvironmentSelectModal from '~/components/modals/EnvironmentSelectModal';
+import {newEnvironmentChangeAction} from "~/store";
+import './StatusBar.css';
+
+interface Props {
+  loading?: true
+  lastError?: string
+  runtime?: RuntimeType
+  markers?: editor.IMarkerData[]
+  dispatch?: Function
+}
+
+const getStatusItem = ({loading, lastError}) => {
+  if (loading) {
+    return (
+      <StatusBarItem iconName="Build">
+        <EllipsisText>
+          Loading
+        </EllipsisText>
+      </StatusBarItem>
+    );
+  }
+
+  if (lastError) {
+    return (
+      <StatusBarItem
+        iconName="NotExecuted"
+        hideTextOnMobile
+        disabled
+      >
+      Build failed
+      </StatusBarItem>
+    )
+  }
+  return null;
+}
+
+const StatusBar: React.FC<Props> = ({
+  loading, lastError, runtime, markers, dispatch
+}) => {
+  const [ runSelectorModalVisible, setRunSelectorModalVisible ] = useState(false);
+  const className = loading ? 'StatusBar StatusBar--busy' : 'StatusBar';
+  return (
+    <>
+      <div className={className}>
+        <div className="StatusBar__side-left">
+          <StatusBarItem
+            iconName="ErrorBadge"
+            title="No Problems"
+            button
+          >
+            {markers?.length ?? 0} Errors
+          </StatusBarItem>
+          {getStatusItem({loading, lastError})}
+        </div>
+        <div className="StatusBar__side-right">
+          <StatusBarItem
+            iconName="Code"
+            title="Select environment"
+            disabled={loading}
+            onClick={() => setRunSelectorModalVisible(true)}
+            hideTextOnMobile
+            button
+          >
+            {RuntimeType.toString(runtime)}
+          </StatusBarItem>
+          <StatusBarItem
+            iconName="Feedback"
+            title="Send feedback"
+            href={config.issueUrl}
+            iconOnly
+          />
+          <StatusBarItem
+            imageSrc="/github-mark-light-32px.png"
+            title="GitHub"
+            href={config.githubUrl}
+            iconOnly
+          />
+        </div>
+      </div>
+      <EnvironmentSelectModal
+        value={runtime as RuntimeType}
+        isOpen={runSelectorModalVisible}
+        onClose={val => {
+          setRunSelectorModalVisible(false);
+          if (val) {
+            dispatch?.(newEnvironmentChangeAction(val));
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default connect(({status: {loading, lastError, markers}, settings: {runtime}}: any) => (
+  {loading, lastError, markers, runtime}
+))(StatusBar);

web/src/components/core/StatusBar/StatusBarItem.css

@@ -0,0 +1,61 @@
+.StatusBarItem {
+  color: #fff;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  height: 100%;
+  padding: 0 5px;
+  white-space: pre;
+  align-items: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  outline-width: 0;
+  margin: 0 3px;
+  text-decoration: none;
+}
+
+.StatusBarItem.StatusBarItem--action {
+  cursor: pointer;
+}
+
+.StatusBarItem.StatusBarItem--text {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+.StatusBarItem__label {
+  margin-left: 0.4em;
+  font-size: 12px;
+}
+
+.StatusBarItem__icon {
+  font-size: 12px;
+}
+
+.StatusBarItem__icon--image {
+  height: 12px;
+}
+
+.StatusBarItem.StatusBarItem--action:not([disabled]):hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.StatusBarItem.StatusBarItem--action:not([disabled]):active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.StatusBarItem.StatusBarItem--action[disabled] {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+@media (max-width: 640px) {
+  .StatusBarItem.StatusBarItem--hideOnMobile
+  .StatusBarItem__label {
+    display: none;
+  }
+}

web/src/components/core/StatusBar/StatusBarItem.tsx

@@ -0,0 +1,84 @@
+import React, {CSSProperties, MouseEventHandler} from 'react';
+import { FontIcon } from '@fluentui/react/lib/Icon';
+import './StatusBarItem.css';
+
+interface Props {
+  iconName?: string
+  iconOnly?: boolean
+  imageSrc?: string
+  button?: boolean
+  disabled?: boolean
+  hideTextOnMobile?: boolean
+  href?: string
+  title?: string
+  onClick?: MouseEventHandler<HTMLButtonElement|HTMLAnchorElement>
+  style?: CSSProperties
+}
+
+const getItemContents = ({iconName, iconOnly, imageSrc, children}) => (
+  <>
+    {
+      iconName && (
+        <FontIcon iconName={iconName} className="StatusBarItem__icon"/>
+      )
+    }
+    {
+      imageSrc && (
+        <img src={imageSrc} className="StatusBarItem__icon--image" />
+      )
+    }
+    {
+      !iconOnly && (
+        <span className="StatusBarItem__label">
+          {children}
+        </span>
+      )
+    }
+  </>
+)
+
+const StatusBarItem: React.FC<Props> = ({
+  iconName, iconOnly, imageSrc, hideTextOnMobile,
+  href, button, children,  ...props
+}) => {
+  const content = getItemContents({iconName, iconOnly, children, imageSrc});
+  const className = hideTextOnMobile ? (
+    'StatusBarItem StatusBarItem--hideOnMobile'
+  ) : 'StatusBarItem';
+  if (button) {
+    return (
+      <button
+        className={`${className} StatusBarItem--action`}
+        {...props}
+      >
+        { content }
+      </button>
+    )
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        className={`${className} StatusBarItem--action`}
+        {...props}
+      >
+        { content }
+      </a>
+    )
+  }
+
+  const { style, title } = props;
+  return (
+    <div
+      className={`${className} StatusBarItem--text`}
+      title={title}
+      style={style}
+    >
+      { content }
+    </div>
+  );
+};
+
+export default StatusBarItem;

web/src/components/core/StatusBar/index.ts

@@ -0,0 +1,2 @@
+import StatusBar from './StatusBar';
+export default StatusBar;

web/src/components/editor/CodeEditor.tsx

@@ -3,7 +3,14 @@ import MonacoEditor from 'react-monaco-editor';
 import { editor } from 'monaco-editor';
 import * as monaco from 'monaco-editor';
 
-import { Connect, formatFileDispatcher, newFileChangeAction, runFileDispatcher, newSnippetLoadDispatcher } from '~/store';
+import {
+  Connect,
+  formatFileDispatcher,
+  newFileChangeAction,
+  runFileDispatcher,
+  newSnippetLoadDispatcher,
+  newMarkerAction
+} from '~/store';
 import { Analyzer } from '~/services/analyzer';
 
 import { LANGUAGE_GOLANG, stateToOptions } from './props';
@@ -91,12 +98,13 @@ export default class CodeEditor extends React.Component<any, CodeEditorState> {
 
     this._previousTimeout = setTimeout(() => {
       this._previousTimeout = null;
-      this.analyzer?.analyzeCode(code).then(result => {
+      this.analyzer?.analyzeCode(code).then(({markers}) => {
         editor.setModelMarkers(
           this.editorInstance?.getModel() as editor.ITextModel,
           this.editorInstance?.getId() as string,
-          result.markers
+          markers
         );
+        this.props.dispatch(newMarkerAction(markers))
       }).catch(err => console.error('failed to perform code analysis: %s', err));
     }, ANALYZE_DEBOUNCE_TIME);
   }

web/src/components/modals/EnvironmentSelectModal/EnvironmentSelectModal.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { CompoundButton } from '@fluentui/react/lib/Button';
+import { Modal } from '@fluentui/react/lib/Modal';
+import {
+  Stack, IStackTokens, getTheme, IconButton, mergeStyleSets
+} from '@fluentui/react';
+import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
+import {RuntimeType} from "~/services/config";
+
+const options = [
+  {
+    label: 'Go Playground',
+    description: 'Build and run code on official Go playground server.',
+    type: RuntimeType.GoPlayground,
+  },
+  {
+    label: 'Go Playground (GoTip)',
+    description: 'Run on server with a current unstable development build of Go.',
+    type: RuntimeType.GoTipPlayground,
+  },
+  {
+    label: 'WebAssembly',
+    description: 'Run Go code in your web browser with access to JS API.',
+    type: RuntimeType.WebAssembly,
+  }
+]
+
+const buttonStyles = mergeStyleSets({
+  button: {
+    maxWidth: 'initial'
+  }
+});
+
+interface Props {
+  isOpen?: boolean
+  value: RuntimeType
+  onClose?: (v?: RuntimeType) => void
+}
+
+const EnvironmentSelectModal: React.FC<Props> = ({
+  isOpen, onClose, value
+}) => {
+  const theme = getTheme();
+  const contentStyles = getContentStyles(theme);
+  const iconButtonStyles = getIconButtonStyles(theme);
+  const stackTokens: IStackTokens = { childrenGap: 10 };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onDismiss={() => onClose?.()}
+      topOffsetFixed={true}
+      containerClassName={contentStyles.container}
+    >
+      <div className={contentStyles.header}>
+        <span>Select Environment</span>
+        <IconButton
+          iconProps={{ iconName: 'Cancel' }}
+          styles={iconButtonStyles}
+          ariaLabel='Close popup modal'
+          onClick={() => onClose?.()}
+        />
+      </div>
+      <div className={contentStyles.body}>
+        <Stack tokens={stackTokens}>
+          {
+            options.map(({label, description, type}) => (
+              <CompoundButton
+                key={type}
+                secondaryText={description}
+                checked={type === value}
+                className={buttonStyles.button}
+                onClick={() => onClose?.(type)}
+              >
+                {label}
+              </CompoundButton>
+            ))
+          }
+        </Stack>
+      </div>
+    </Modal>
+  );
+}
+
+export default EnvironmentSelectModal;