learningtribes-studio-frontend 1.4.2-alpha.3 → 1.4.2-alpha.5

package/src/components/EditImageModal/index.jsx

@@ -14,7 +14,6 @@ import styles from './EditImageModal.scss';
 import WrappedAssetsClearSearchButton from '../AssetsClearSearchButton/container';
 import WrappedAssetsDropZone from '../AssetsDropZone/container';
 import WrappedAssetsList from '../AssetsList/container';
-import WrappedAssetsSearch from '../AssetsSearch/container';
 import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
 
 
@@ -56,9 +55,7 @@ const initialEditImageModalState = {
   isImageDimensionsValid: true,
   isModalOpen: false,
   isStatusAlertOpen: false,
-  pageNumber: 1,
   editingExisting: false,
-  shouldShowPreviousButton: false,
 };
 
 export default class EditImageModal extends React.Component {
@@ -74,8 +71,6 @@ export default class EditImageModal extends React.Component {
     this.onImageDimensionBlur = this.onImageDimensionBlur.bind(this);
     this.onInsertImageButtonClick = this.onInsertImageButtonClick.bind(this);
     this.onImageLoad = this.onImageLoad.bind(this);
-    this.onNextPageButtonClick = this.onNextPageButtonClick.bind(this);
-    this.onPreviousPageButtonClick = this.onPreviousPageButtonClick.bind(this);
     this.onStatusAlertClose = this.onStatusAlertClose.bind(this);
     // Create ref setters to minimize anonymous inline functions
     this.setDropZoneButtonRef = this.setDropZoneButtonRef.bind(this);
@@ -83,14 +78,12 @@ export default class EditImageModal extends React.Component {
     this.setImageFormRef = this.setImageFormRef.bind(this);
     this.setImageRef = this.setImageRef.bind(this);
     this.setModalWrapperRef = this.setModalWrapperRef.bind(this);
-    this.setPreviousButtonRef = this.setPreviousButtonRef.bind(this);
     this.setStatusAlertRef = this.setStatusAlertRef.bind(this);
 
     this.dropZoneButtonRef = null;
     this.imageDescriptionInputRef = null;
     this.imageFormRef = null;
     this.imageRef = null;
-    this.previousPageButtonRef = null;
     this.modalWrapperRef = null;
     this.statusAlertRef = null;
   }
@@ -108,8 +101,6 @@ export default class EditImageModal extends React.Component {
         nextProps.clearAssetsStatus();
         newState.currentUploadErrorMessage = null;
         newState.isStatusAlertOpen = false;
-        // Stay on page 1 - the form fields are now shown on the same page
-        newState.pageNumber = 1;
         break;
       }
       case assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR: {
@@ -152,8 +143,6 @@ export default class EditImageModal extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     this.didStatusAlertOpen(prevState);
-    this.wasNextButtonClicked(prevState);
-    this.wasPreviousButtonClicked(prevState);
   }
 
   componentWillUnmount() {
@@ -238,27 +227,6 @@ export default class EditImageModal extends React.Component {
     };
   }
 
-  onNextPageButtonClick = () => {
-    if (this.isAssetSelected()) {
-      this.setState({
-        currentUploadErrorMessage: null,
-        isStatusAlertOpen: false,
-        pageNumber: 2,
-      });
-      this.props.clearAssetsStatus();
-    }
-  }
-
-  onPreviousPageButtonClick = () => {
-    this.setState({
-      currentValidationMessages: {},
-      isImageDescriptionValid: true,
-      isImageDimensionsValid: true,
-      isStatusAlertOpen: false,
-      pageNumber: 1,
-    });
-  }
-
   onInsertImageButtonClick = () => {
     const isValidImageDescription = this.validateImageDescription();
     const isValidImageDimensions = this.validateImageDimensions();
@@ -311,15 +279,16 @@ export default class EditImageModal extends React.Component {
   }
 
   onStatusAlertClose = () => {
-    if (this.state.pageNumber === 1) {
-      this.props.clearAssetsStatus();
-      this.dropZoneButtonRef.focus();
-    } else if (this.state.pageNumber === 2) {
-      if (this.state.shouldShowPreviousButton) {
-        this.previousPageButtonRef.focus();
-      } else {
+    const hasValidationMessages = Object.keys(this.state.currentValidationMessages)
+      .some(key => this.state.currentValidationMessages[key]);
+
+    if (hasValidationMessages) {
+      if (this.imageDescriptionInputRef) {
         this.imageDescriptionInputRef.focus();
       }
+    } else if (this.dropZoneButtonRef) {
+      this.props.clearAssetsStatus();
+      this.dropZoneButtonRef.focus();
     }
 
     this.setState({
@@ -347,10 +316,6 @@ export default class EditImageModal extends React.Component {
     this.modalWrapperRef = ref;
   }
 
-  setPreviousButtonRef(ref) {
-    this.previousPageButtonRef = ref;
-  }
-
   setStatusAlertRef(ref) {
     this.statusAlertRef = ref;
   }
@@ -424,8 +389,6 @@ export default class EditImageModal extends React.Component {
       <WrappedMessage message={messages.editImageModalImageDescriptionDescription} />
       {' '}
       {this.getLearnMoreLink()}
-      {' '}
-      <WrappedMessage message={messages.editImageModalImageDecorativeDescription} />
     </React.Fragment>
   );
 
@@ -489,78 +452,46 @@ export default class EditImageModal extends React.Component {
     rewriteStaticLinks(this.state.imageSource, '/static/', this.state.baseAssetURL)
   );
 
-  getImage = () => (
-    <img
-      alt=""
-      className={classNames(styles['image-preview-image'], { invisible: !this.state.isImageLoaded })}
-      src={this.getImageAssetSource()}
-      onLoad={this.onImageLoad}
-      onError={this.onImageError}
-      ref={this.setImageRef}
-    />
-  );
+  getValidationMessages = () => (
+    Object.keys(this.state.currentValidationMessages).reduce((accumulator, current) => {
+      const value = this.state.currentValidationMessages[current];
 
-  /*
-    image is conditionally displayed so that onImageError is not called on initial
-    modal open, when image source is empty string
-  */
-  getImagePreviewPlaceholder = () => (
-    <div className={styles['image-preview-placeholder']}>
-      <WrappedMessage message={messages.editImageModalImagePreviewText} >
-        {displayText =>
-          (<span className={classNames({ invisible: this.state.isImageLoaded })}>
-            {displayText}
-          </span>)}
-      </WrappedMessage>
-      {this.state.imageSource && this.getImage()}
-    </div>
-  );
+      if (value) {
+        accumulator.push(
+          <li key={`Error-${current}`}>
+            <a href={`#${current}`}>{value} </a>
+          </li>,
+        );
+      }
 
-  getImagePreview = () => (
-    // image preview is decorative
-    <div aria-hidden>
-      <WrappedMessage message={messages.editImageModalImagePreviewText} />
-      <div className={styles['image-preview-container']}>
-        {this.getImagePreviewPlaceholder()}
-      </div>
-    </div>
+      return accumulator;
+    }, [])
   );
 
   getStatusAlertDialog = () => {
-    let dialog;
+    const validationMessages = this.getValidationMessages();
 
-    if (this.state.pageNumber === 1) {
-      dialog = (
+    if (validationMessages.length === 0) {
+      return (
         <React.Fragment>
           {this.getUploadErrorStatusMessage()}
         </React.Fragment>
       );
-    } else if (this.state.pageNumber === 2) {
-      dialog = (
-        <div>
-          <WrappedMessage
-            message={messages.editImageModalFormErrorMissingFields}
-            tagName="div"
-          />
-          <div className="mt-3">
-            <ul className="bullet-list">
-              {(Object.keys(this.state.currentValidationMessages).reduce((accumulator, current) => {
-                const value = this.state.currentValidationMessages[current];
-
-                if (value) {
-                  const errorMessage = <li key={`Error-${current}`}>{<a href={`#${current}`}>{value} </a>}</li>;
-                  accumulator.push(errorMessage);
-                }
-
-                return accumulator;
-              }, [])
-              )}
-            </ul>
-          </div>
-        </div>
-      );
     }
-    return dialog;
+
+    return (
+      <div>
+        <WrappedMessage
+          message={messages.editImageModalFormErrorMissingFields}
+          tagName="div"
+        />
+        <div className="mt-3">
+          <ul className="bullet-list">
+            {validationMessages}
+          </ul>
+        </div>
+      </div>
+    );
   };
 
   getStatusAlert = () => (
@@ -573,37 +504,17 @@ export default class EditImageModal extends React.Component {
     />
   )
 
-  getModalHeader = () => {
-    let header;
-    if (this.state.pageNumber === 2 || this.state.editingExisting) {
-      header = (
-        <WrappedMessage
-          message={messages.editImageModalEditTitle}
-        />
-      );
-    } else {
-      header = (
-        <WrappedMessage
-          message={messages.editImageModalInsertTitle}
-        />
-      );
-    }
-    return (
-      <div aria-live="polite">
-        { header }
-      </div>
-    );
-  }
+  getModalHeader = () => (
+    <div aria-live="polite">
+      <WrappedMessage
+        message={this.state.editingExisting
+          ? messages.editImageModalEditTitle
+          : messages.editImageModalInsertTitle}
+      />
+    </div>
+  );
 
-  getModalBody = () => {
-    let body;
-    if (this.state.pageNumber === 1) {
-      body = this.getImageSelectionModalBody();
-    } else if (this.state.pageNumber === 2) {
-      body = this.getImageSettingsModalBody();
-    }
-    return body;
-  }
+  getModalBody = () => this.getImageSelectionModalBody();
 
   getImageSelectionModalBodyAssetsList = (type) => {
     switch (type) {
@@ -685,61 +596,7 @@ export default class EditImageModal extends React.Component {
     </React.Fragment>
   );
 
-  getImageSettingsModalBody = () => (
-    <React.Fragment>
-      {this.getStatusAlert()}
-      <div className="row">
-        {this.state.shouldShowPreviousButton && this.getPreviousPageButton()}
-      </div>
-      <div className="row">
-        <div className="col-sm-4">
-          {this.getImagePreview()}
-        </div>
-        <div className="col">
-          <form className={styles['image-fields']} ref={this.setImageFormRef}>
-            {this.getImageDescriptionInput()}
-            {this.getImageDimensionsInput()}
-          </form>
-        </div>
-      </div>
-    </React.Fragment>
-  );
-
-  getModalButtons = () => {
-    let buttons;
-    if (this.state.pageNumber === 1) {
-      buttons = this.getInsertImageButton();
-    } else if (this.state.pageNumber === 2) {
-      buttons = this.getInsertImageButton();
-    }
-    return buttons;
-  }
-
-  getNextPageButton = () => (
-    <Button
-      label={
-        <WrappedMessage
-          message={messages.editImageModalNextPageButton}
-        />
-      }
-      buttonType="primary"
-      disabled={!this.isAssetSelected()}
-      onClick={this.onNextPageButtonClick}
-    />
-  );
-
-  getPreviousPageButton = () => (
-    <Button
-      label={
-        <WrappedMessage
-          message={messages.editImageModalPreviousPageButton}
-        />
-      }
-      buttonType="link"
-      onClick={this.onPreviousPageButtonClick}
-      inputRef={this.setPreviousButtonRef}
-    />
-  );
+  getModalButtons = () => this.getInsertImageButton();
 
   getInsertImageButton = () => (
     <Button
@@ -797,15 +654,27 @@ export default class EditImageModal extends React.Component {
       // if existing img had a source, assume it could be loaded and show the image preview
       isImageLoaded: !!eventSource,
       isModalOpen: true,
-      pageNumber: 1,
-      shouldShowPreviousButton: false,
     }));
 
     this.props.getAssets({ assetTypes: { Images: true }, pageSize: 1000 }, this.props.courseDetails);
   }
 
   validateImageDescription = () => {
-    return { isValid: true };
+    let feedback = { isValid: true };
+
+    // Decorative images are no longer an explicit choice, so a description is required.
+    if (!this.state.imageDescription) {
+      feedback = {
+        isValid: false,
+        validationMessage:
+          (<WrappedMessage
+            message={messages.editImageModalFormValidImageDescription}
+          />),
+        dangerIconDescription: <WrappedMessage message={messages.editImageModalFormError} />,
+      };
+    }
+
+    return feedback;
   }
 
   validateImageDimensions = () => {
@@ -844,22 +713,9 @@ export default class EditImageModal extends React.Component {
     return false;
   }
 
-  wasNextButtonClicked = (prevState) => {
-    if (this.state.pageNumber === 2 && prevState.pageNumber === 1
-      && this.state.shouldShowPreviousButton) {
-      this.previousPageButtonRef.focus();
-    }
-  }
-
-  wasPreviousButtonClicked = (prevState) => {
-    if (this.state.pageNumber === 1 && prevState.pageNumber === 2
-      && prevState.isModalOpen) {
-      this.dropZoneButtonRef.focus();
-    }
-  }
-
   render = () => (
     <div
+      className={styles['edit-image-modal']}
       ref={this.setModalWrapperRef}
       id={modalWrapperID}
     >

package/src/data/i18n/default/transifex_input.json

@@ -40,6 +40,8 @@
   "assetsDropZoneAriaLabel": "Upload assets",
   "assetsDropZoneBrowseLabel": "Select from your computer",
   "assetsDropZoneHeader": "Drag & Drop",
+  "assetsDropZoneClickToUpload": "Click to upload",
+  "assetsDropZoneOrDragAndDrop": "or drag and drop",
   "assetsDropZoneMaxFileSizeLabel": "Size limit: {maxFileSizeMB} MB",
   "assetsDropZoneSupportedFileTypesLabel": "Supported file types: {filesTypesList}",
   "assetsDropZoneImageSizeRecommandationLabel": "Size recommendation: {imageSize}",
@@ -142,11 +144,10 @@
   "editImageModalCancelButton": "Cancel",
   "editImageModalFormError": "Error",
   "editImageModalFormErrorMissingFields": "Make sure to fill in all fields.",
-  "editImageModalFormValidImageDescription": "Add an image description or specify that the image is decorative only.",
+  "editImageModalFormValidImageDescription": "Add an image description.",
   "editImageModalFormValidImageDimensions": "Image dimensions must be positive numbers.",
   "editImageModalImageDescriptionDescription": "Alternative text for users who cannot view the image, such as \"The sky with clouds\".",
   "editImageModalImageDescriptionLabel": "Image Description",
-  "editImageModalImageDecorativeDescription": "If this image is purely decorative, it does not require alternative text.",
   "editImageModalImageDescriptionLegend": "Image Description",
   "editImageModalDimensionsLegend": "Image Dimensions",
   "editImageModalImageHeight": "Height",