Break up Toolbar elements

client/constants.js

@@ -30,8 +30,6 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 export const RESET_PROJECT = 'RESET_PROJECT';
-export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
-export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';

client/modules/IDE/actions/project.js

@@ -351,18 +351,6 @@ export function cloneProject(project) {
   };
 }
 
-export function showEditProjectName() {
-  return {
-    type: ActionTypes.SHOW_EDIT_PROJECT_NAME
-  };
-}
-
-export function hideEditProjectName() {
-  return {
-    type: ActionTypes.HIDE_EDIT_PROJECT_NAME
-  };
-}
-
 export function setProjectSavedTime(updatedAt) {
   return {
     type: ActionTypes.SET_PROJECT_SAVED_TIME,

client/modules/IDE/components/EditableInput.jsx

@@ -11,27 +11,36 @@ function EditableInput({
   emptyPlaceholder,
   InputComponent,
   inputProps,
-  onChange
+  onChange,
+  disabled,
+  'aria-label': ariaLabel
 }) {
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
   const hasValue = currentValue !== '';
   const classes = `editable-input editable-input--${
     isEditing ? 'is-editing' : 'is-not-editing'
-  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
-  const inputRef = React.createRef();
+  } editable-input--${hasValue ? 'has-value' : 'has-placeholder'} ${
+    disabled ? 'editable-input--disabled' : ''
+  }`;
+  const inputRef = React.useRef();
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current.focus();
+      inputRef.current?.focus();
     }
   }, [isEditing]);
 
   function beginEditing() {
     setIsEditing(true);
   }
 
+  function cancelEditing() {
+    setIsEditing(false);
+    setCurrentValue(value);
+  }
+
   function doneEditing() {
     setIsEditing(false);
 
@@ -51,6 +60,8 @@ function EditableInput({
   function checkForKeyAction(event) {
     if (event.key === 'Enter') {
       doneEditing();
+    } else if (event.key === 'Escape' || event.key === 'Esc') {
+      cancelEditing();
     }
   }
 
@@ -59,7 +70,11 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={t('EditableInput.EditValue', { display: displayValue })}
+        aria-label={
+          ariaLabel ?? t('EditableInput.EditValue', { display: displayValue })
+        }
+        aria-hidden={isEditing}
+        disabled={disabled}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -74,9 +89,10 @@ function EditableInput({
         type="text"
         {...inputProps}
         disabled={!isEditing}
+        aria-hidden={!isEditing}
         onBlur={doneEditing}
         onChange={updateValue}
-        onKeyPress={checkForKeyAction}
+        onKeyDown={checkForKeyAction}
         ref={inputRef}
         value={currentValue}
       />
@@ -89,7 +105,9 @@ EditableInput.defaultProps = {
   InputComponent: 'input',
   inputProps: {},
   validate: () => true,
-  value: ''
+  value: '',
+  disabled: false,
+  'aria-label': undefined
 };
 
 EditableInput.propTypes = {
@@ -99,7 +117,9 @@ EditableInput.propTypes = {
   inputProps: PropTypes.object, // eslint-disable-line
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  'aria-label': PropTypes.string
 };
 
 export default EditableInput;