Version switcher

client/common/icons.jsx

@@ -25,6 +25,7 @@ import CircleInfo from '../images/circle-info.svg';
 import Add from '../images/add.svg';
 import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
+import Copy from '../images/copy.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -102,3 +103,4 @@ export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
 export const AddIcon = withLabel(Add);
 export const FilterIcon = withLabel(Filter);
+export const CopyIcon = withLabel(Copy);

client/components/Dropdown/DropdownMenu.jsx

@@ -8,7 +8,15 @@ import { DropdownWrapper } from '../Dropdown';
 
 const DropdownMenu = forwardRef(
   (
-    { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+    {
+      children,
+      anchor,
+      'aria-label': ariaLabel,
+      align,
+      className,
+      classes,
+      maxHeight
+    },
     ref
   ) => {
     // Note: need to use a ref instead of a state to avoid stale closures.
@@ -32,7 +40,7 @@ const DropdownMenu = forwardRef(
       focusedRef.current = false;
       setTimeout(() => {
         if (!focusedRef.current) {
-          close();
+          // close();
         }
       }, 200);
     };
@@ -59,6 +67,7 @@ const DropdownMenu = forwardRef(
             }}
             onBlur={handleBlur}
             onFocus={handleFocus}
+            style={maxHeight && { maxHeight, overflowY: 'auto' }}
           >
             {children}
           </DropdownWrapper>
@@ -84,14 +93,16 @@ DropdownMenu.propTypes = {
   classes: PropTypes.shape({
     button: PropTypes.string,
     list: PropTypes.string
-  })
+  }),
+  maxHeight: PropTypes.string
 };
 
 DropdownMenu.defaultProps = {
   anchor: null,
   align: 'right',
   className: '',
-  classes: {}
+  classes: {},
+  maxHeight: undefined
 };
 
 export default DropdownMenu;

client/constants.js

@@ -10,6 +10,7 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT';
 
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
+export const SET_PREFERENCES_TAB = 'SET_PREFERENCES_TAB';
 export const SET_FONT_SIZE = 'SET_FONT_SIZE';
 export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS';
 

client/modules/IDE/actions/preferences.js

@@ -14,6 +14,13 @@ function updatePreferences(formParams, dispatch) {
     });
 }
 
+export function setPreferencesTab(value) {
+  return {
+    type: ActionTypes.SET_PREFERENCES_TAB,
+    value
+  };
+}
+
 export function setFontSize(value) {
   return (dispatch, getState) => {
     // eslint-disable-line

client/modules/IDE/components/Admonition.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Admonition({ children, title }) {
+  return (
+    <div className="admonition">
+      <p className="admonition__title">
+        <strong>{title}</strong>
+      </p>
+      {children}
+    </div>
+  );
+}
+
+Admonition.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node
+};
+
+Admonition.defaultProps = {
+  children: undefined
+};

client/modules/IDE/components/Editor/index.jsx

@@ -104,6 +104,7 @@ class Editor extends React.Component {
     this.showFind = this.showFind.bind(this);
     this.showReplace = this.showReplace.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.updateFileContent = this.updateFileContent.bind(this);
   }
 
   componentDidMount() {
@@ -220,7 +221,8 @@ class Editor extends React.Component {
       tidyCode: this.tidyCode,
       showFind: this.showFind,
       showReplace: this.showReplace,
-      getContent: this.getContent
+      getContent: this.getContent,
+      updateFileContent: this.updateFileContent
     });
   }
 
@@ -254,6 +256,9 @@ class Editor extends React.Component {
       if (!prevProps.unsavedChanges) {
         setTimeout(() => this.props.setUnsavedChanges(false), 400);
       }
+    } else if (this.getContent().content !== this.props.file.content) {
+      // TODO: make this not break regular edits!
+      // this._cm.setValue(this.props.file.content);
     }
     if (this.props.fontSize !== prevProps.fontSize) {
       this._cm.getWrapperElement().style[
@@ -329,7 +334,8 @@ class Editor extends React.Component {
       tidyCode: this.tidyCode,
       showFind: this.showFind,
       showReplace: this.showReplace,
-      getContent: this.getContent
+      getContent: this.getContent,
+      updateFileContent: this.updateFileContent
     });
   }
 
@@ -366,6 +372,16 @@ class Editor extends React.Component {
     return updatedFile;
   }
 
+  updateFileContent(id, src) {
+    const file = this._docs[id];
+    if (file) {
+      this._docs[id] = CodeMirror.Doc(src, this._docs[id].modeOption);
+      if (id === this.props.file.id) {
+        this._cm.swapDoc(this._docs[id]);
+      }
+    }
+  }
+
   handleKeyUp = () => {
     const lineNumber = parseInt(this._cm.getCursor().line + 1, 10);
     this.setState({ currentLine: lineNumber });

client/modules/IDE/components/Header/Toolbar.jsx

@@ -20,6 +20,7 @@ import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
+import VersionIndicator from '../VersionIndicator';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -113,6 +114,8 @@ const Toolbar = (props) => {
           return null;
         })()}
       </div>
+      <VersionIndicator />
+      <div style={{ flex: 1 }} />
       <button
         className={preferencesButtonClass}
         onClick={() => dispatch(openPreferences())}