Merge branch 'develop' into feat/3450

Author: raclim

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/images/copy.svg

@@ -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/images/pencil.svg

@@ -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/actions/preferences.js

@@ -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/Admonition.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import * as IDEActions from '../actions/ide';
 import * as FileActions from '../actions/files';
@@ -88,6 +89,24 @@ const FileNode = ({
   const [isDeleting, setIsDeleting] = useState(false);
   const [updatedName, setUpdatedName] = useState(name);
 
+  const files = useSelector((state) => state.files);
+
+  const checkDuplicate = (newName) => {
+    const parentFolder = files.find((f) => f.id === parentId);
+    if (!parentFolder) return false;
+
+    const siblingFiles = parentFolder.children
+      .map((childId) => files.find((f) => f.id === childId))
+      .filter(Boolean)
+      .filter((file) => file.id !== id);
+
+    const isDuplicate = siblingFiles.some(
+      (f) => f.name.trim().toLowerCase() === newName.trim().toLowerCase()
+    );
+
+    return isDuplicate;
+  };
+
   const { t } = useTranslation();
   const fileNameInput = useRef(null);
   const fileOptionsRef = useRef(null);
@@ -157,7 +176,7 @@ const FileNode = ({
   };
 
   const saveUpdatedFileName = () => {
-    if (updatedName !== name) {
+    if (!checkDuplicate(updatedName) && updatedName !== name) {
       updateFileName(id, updatedName);
     }
   };
@@ -198,8 +217,13 @@ const FileNode = ({
   };
 
   const handleFileNameBlur = () => {
-    validateFileName();
-    hideEditFileName();
+    if (!checkDuplicate(updatedName)) {
+      validateFileName();
+      hideEditFileName();
+    } else {
+      setUpdatedName(name);
+      hideEditFileName();
+    }
   };
 
   const toggleFileOptions = (event) => {
@@ -271,6 +295,7 @@ const FileNode = ({
             aria-label={updatedName}
             className="sidebar__file-item-name"
             onClick={handleFileClick}
+            onDoubleClick={handleClickRename}
             data-testid="file-name"
           >
             <FileName name={updatedName} />

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

@@ -1,4 +1,7 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 
 import {
   fireEvent,
@@ -9,6 +12,8 @@ import {
 } from '../../../test-utils';
 import { FileNode } from './FileNode';
 
+const mockStore = configureStore([thunk]);
+
 describe('<FileNode />', () => {
   const changeName = (newFileName) => {
     const renameButton = screen.getByText(/Rename/i);
@@ -32,6 +37,7 @@ describe('<FileNode />', () => {
       fileType,
       canEdit: true,
       children: [],
+      parentId: 'parent-folder-id',
       authenticated: false,
       setSelectedFile: jest.fn(),
       deleteFile: jest.fn(),
@@ -45,7 +51,40 @@ describe('<FileNode />', () => {
       setProjectName: jest.fn()
     };
 
-    render(<FileNode {...props} />);
+    const mockFiles = [
+      {
+        id: '0',
+        name: props.name,
+        parentId: 'parent-folder-id'
+      },
+      {
+        id: '1',
+        name: 'sketch.js',
+        parentId: '0',
+        isSelectedFile: true
+      },
+      {
+        id: 'parent-folder-id',
+        name: 'parent',
+        parentId: null,
+        children: ['0', 'some-other-file-id']
+      },
+      {
+        id: 'some-other-file-id',
+        name: 'duplicate.js',
+        parentId: 'parent-folder-id'
+      }
+    ];
+
+    const store = mockStore({
+      files: mockFiles
+    });
+
+    render(
+      <Provider store={store}>
+        <FileNode {...props} />
+      </Provider>
+    );
 
     return props;
   };

client/modules/IDE/components/FileNode.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())}