Merge branch 'release-2.14.4' into release

Author: raclim

client/modules/IDE/components/EditorAccessibility.unit.test.jsx

@@ -6,7 +6,7 @@ import EditorAccessibility from './EditorAccessibility';
 
 describe('<EditorAccessibility />', () => {
   it('renders empty message with no lines', () => {
-    render(<EditorAccessibility lintMessages={[]} />);
+    render(<EditorAccessibility lintMessages={[]} currentLine={0} />);
 
     expect(
       screen.getByRole('listitem', {
@@ -21,11 +21,12 @@ describe('<EditorAccessibility />', () => {
         lintMessages={[
           {
             severity: 'info',
-            line: '1',
+            line: 1,
             message: 'foo',
-            id: '1a2b3c'
+            id: 123
           }
         ]}
+        currentLine={0}
       />
     );
 

client/modules/IDE/components/ErrorModal.unit.test.jsx

@@ -8,20 +8,30 @@ jest.mock('../../../i18n');
 
 describe('<ErrorModal />', () => {
   it('renders type forceAuthentication', () => {
-    render(<ErrorModal type="forceAuthentication" closeModal={jest.fn()} />);
+    render(
+      <ErrorModal
+        type="forceAuthentication"
+        closeModal={jest.fn()}
+        service="google"
+      />
+    );
 
     expect(screen.getByText('Login')).toBeVisible();
     expect(screen.getByText('Sign Up')).toBeVisible();
   });
 
   it('renders type staleSession', () => {
-    render(<ErrorModal type="staleSession" closeModal={jest.fn()} />);
+    render(
+      <ErrorModal type="staleSession" closeModal={jest.fn()} service="google" />
+    );
 
     expect(screen.getByText('log in')).toBeVisible();
   });
 
   it('renders type staleProject', () => {
-    render(<ErrorModal type="staleProject" closeModal={jest.fn()} />);
+    render(
+      <ErrorModal type="staleProject" closeModal={jest.fn()} service="google" />
+    );
 
     expect(
       screen.getByText(

client/modules/IDE/components/FileNode.unit.test.jsx

@@ -83,12 +83,18 @@ describe('<FileNode />', () => {
     });
 
     it('can change to a different extension', async () => {
+      const mockConfirm = jest.fn(() => true);
+      window.confirm = mockConfirm;
+
       const newName = 'newname.gif';
       const props = renderFileNode('file');
 
       changeName(newName);
 
-      await waitFor(() => expect(props.updateFileName).not.toHaveBeenCalled());
+      expect(mockConfirm).toHaveBeenCalled();
+      await waitFor(() =>
+        expect(props.updateFileName).toHaveBeenCalledWith(props.id, newName)
+      );
       await expectFileNameToBe(props.name);
     });
 

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -10,8 +10,21 @@ const Item = ({ isAdded, onSelect, name, url }) => {
   const buttonLabel = isAdded
     ? t('QuickAddList.ButtonRemoveARIA')
     : t('QuickAddList.ButtonAddToCollectionARIA');
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onSelect(event);
+    }
+  };
+
   return (
-    <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
+    <div
+      role="button"
+      className="quick-add__item"
+      onClick={onSelect}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
       <button
         className="quick-add__item-toggle"
         onClick={onSelect}
@@ -28,7 +41,7 @@ const Item = ({ isAdded, onSelect, name, url }) => {
       >
         {t('QuickAddList.View')}
       </Link>
-    </li>
+    </div>
   );
 };
 

client/modules/IDE/components/Searchbar/Collection.jsx

@@ -1,25 +1,33 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
 
 const scope = 'collection';
 
-function mapStateToProps(state) {
-  return {
-    searchLabel: i18next.t('Searchbar.SearchCollection'),
-    searchTerm: state.search[`${scope}SearchTerm`]
+const SearchbarContainer = () => {
+  const dispatch = useDispatch();
+  const searchLabel = i18next.t('Searchbar.SearchCollection');
+  const searchTerm = useSelector((state) => state.search[`${scope}SearchTerm`]);
+
+  const setSearchTerm = (term) => {
+    dispatch(SortingActions.setSearchTerm(scope, term));
   };
-}
 
-function mapDispatchToProps(dispatch) {
-  const actions = {
-    setSearchTerm: (term) => SortingActions.setSearchTerm(scope, term),
-    resetSearchTerm: () => SortingActions.resetSearchTerm(scope)
+  const resetSearchTerm = () => {
+    dispatch(SortingActions.resetSearchTerm(scope));
   };
-  return bindActionCreators(Object.assign({}, actions), dispatch);
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+  return (
+    <Searchbar
+      searchLabel={searchLabel}
+      searchTerm={searchTerm}
+      setSearchTerm={setSearchTerm}
+      resetSearchTerm={resetSearchTerm}
+    />
+  );
+};
+
+export default SearchbarContainer;

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,24 +1,24 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
 const Searchbar = ({
   searchTerm,
   setSearchTerm,
   resetSearchTerm,
-  searchLabel,
-  t
+  searchLabel
 }) => {
+  const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState(searchTerm);
 
   const throttledSearchChange = useCallback(
     throttle((value) => {
       setSearchTerm(value.trim());
     }, 500),
-    []
+    [setSearchTerm]
   );
 
   const handleResetSearch = () => {
@@ -65,12 +65,11 @@ Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
   setSearchTerm: PropTypes.func.isRequired,
   resetSearchTerm: PropTypes.func.isRequired,
-  searchLabel: PropTypes.string,
-  t: PropTypes.func.isRequired
+  searchLabel: PropTypes.string
 };
 
 Searchbar.defaultProps = {
   searchLabel: i18next.t('Searchbar.SearchSketch')
 };
 
-export default withTranslation()(Searchbar);
+export default Searchbar;

client/modules/IDE/components/Searchbar/Sketch.jsx

@@ -1,25 +1,32 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
-
 import Searchbar from './Searchbar';
 
 const scope = 'sketch';
 
-function mapStateToProps(state) {
-  return {
-    searchLabel: i18next.t('Searchbar.SearchSketch'),
-    searchTerm: state.search[`${scope}SearchTerm`]
+const SearchbarContainer = () => {
+  const dispatch = useDispatch();
+  const searchLabel = i18next.t('Searchbar.SearchSketch');
+  const searchTerm = useSelector((state) => state.search[`${scope}SearchTerm`]);
+
+  const setSearchTerm = (term) => {
+    dispatch(SortingActions.setSearchTerm(scope, term));
   };
-}
 
-function mapDispatchToProps(dispatch) {
-  const actions = {
-    setSearchTerm: (term) => SortingActions.setSearchTerm(scope, term),
-    resetSearchTerm: () => SortingActions.resetSearchTerm(scope)
+  const resetSearchTerm = () => {
+    dispatch(SortingActions.resetSearchTerm(scope));
   };
-  return bindActionCreators(Object.assign({}, actions), dispatch);
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+  return (
+    <Searchbar
+      searchLabel={searchLabel}
+      searchTerm={searchTerm}
+      setSearchTerm={setSearchTerm}
+      resetSearchTerm={resetSearchTerm}
+    />
+  );
+};
+
+export default SearchbarContainer;

client/modules/IDE/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -33,21 +33,10 @@ export default function SideBar() {
 
   const sidebarOptionsRef = useRef(null);
 
-  const [isFocused, setIsFocused] = useState(false);
-
   const isAuthenticated = useSelector(getAuthenticated);
 
   const onBlurComponent = () => {
-    setIsFocused(false);
-    setTimeout(() => {
-      if (!isFocused) {
-        dispatch(closeProjectOptions());
-      }
-    }, 200);
-  };
-
-  const onFocusComponent = () => {
-    setIsFocused(true);
+    setTimeout(() => dispatch(closeProjectOptions()), 200);
   };
 
   const toggleProjectOptions = (e) => {
@@ -96,7 +85,6 @@ export default function SideBar() {
               ref={sidebarOptionsRef}
               onClick={toggleProjectOptions}
               onBlur={onBlurComponent}
-              onFocus={onFocusComponent}
             >
               <PlusIcon focusable="false" aria-hidden="true" />
             </button>
@@ -109,7 +97,6 @@ export default function SideBar() {
                     setTimeout(() => dispatch(closeProjectOptions()), 0);
                   }}
                   onBlur={onBlurComponent}
-                  onFocus={onFocusComponent}
                 >
                   {t('Sidebar.AddFolder')}
                 </button>
@@ -122,7 +109,6 @@ export default function SideBar() {
                     setTimeout(() => dispatch(closeProjectOptions()), 0);
                   }}
                   onBlur={onBlurComponent}
-                  onFocus={onFocusComponent}
                 >
                   {t('Sidebar.AddFile')}
                 </button>
@@ -136,7 +122,6 @@ export default function SideBar() {
                       setTimeout(() => dispatch(closeProjectOptions()), 0);
                     }}
                     onBlur={onBlurComponent}
-                    onFocus={onFocusComponent}
                   >
                     {t('Sidebar.UploadFile')}
                   </button>