learningtribes-studio-frontend 1.4.1 → 1.4.2-alpha.1

package/src/components/EditImageModal/index.jsx

@@ -1,4 +1,4 @@
-import { Button, CheckBox, Fieldset, Icon, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
+import { Button, Fieldset, Icon, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
@@ -16,7 +16,6 @@ import WrappedAssetsDropZone from '../AssetsDropZone/container';
 import WrappedAssetsList from '../AssetsList/container';
 import WrappedAssetsSearch from '../AssetsSearch/container';
 import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
-import WrappedPagination from '../Pagination/container';
 
 
 // Create an AssetsResultsCount that is not aware of the Images filter.
@@ -51,7 +50,6 @@ const initialEditImageModalState = {
   imageDimensions: {},
   imageSource: '',
   imageStyle: '',
-  isImageDecorative: false,
   isImageDescriptionValid: true,
   isImageLoaded: false,
   isImageLoading: false,
@@ -74,7 +72,6 @@ export default class EditImageModal extends React.Component {
     this.onImageDescriptionBlur = this.onImageDescriptionBlur.bind(this);
     this.onImageDimensionBlur = this.onImageDimensionBlur.bind(this);
     this.onInsertImageButtonClick = this.onInsertImageButtonClick.bind(this);
-    this.onImageIsDecorativeClick = this.onImageIsDecorativeClick.bind(this);
     this.onImageLoad = this.onImageLoad.bind(this);
     this.onNextPageButtonClick = this.onNextPageButtonClick.bind(this);
     this.onPreviousPageButtonClick = this.onPreviousPageButtonClick.bind(this);
@@ -110,7 +107,8 @@ export default class EditImageModal extends React.Component {
         nextProps.clearAssetsStatus();
         newState.currentUploadErrorMessage = null;
         newState.isStatusAlertOpen = false;
-        newState.pageNumber = 2;
+        // 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: {
@@ -166,12 +164,6 @@ export default class EditImageModal extends React.Component {
     ));
   }
 
-  onImageIsDecorativeClick = (checked) => {
-    this.setState({
-      isImageDecorative: checked,
-    });
-  }
-
   onImageLoad = (event) => {
     const img = event.target;
 
@@ -274,14 +266,17 @@ export default class EditImageModal extends React.Component {
     });
 
     if (isValidFormContent) {
-      this.imageFormRef.dispatchEvent(new CustomEvent('submitForm',
+      // Use the form ref if available, otherwise dispatch from modal wrapper
+      const targetElement = this.imageFormRef || this.modalWrapperRef;
+      const altText = this.state.imageDescription || '';
+      targetElement.dispatchEvent(new CustomEvent('submitForm',
         {
           bubbles: true,
           detail: {
             height: this.getDimensionStateOrNatural('height'),
             width: this.getDimensionStateOrNatural('width'),
             src: this.state.imageSource,
-            alt: this.state.isImageDecorative ? '' : this.state.imageDescription,
+            alt: altText,
             style: this.state.imageStyle,
           },
         },
@@ -293,7 +288,9 @@ export default class EditImageModal extends React.Component {
 
       this.resetImageSelection();
     } else {
-      this.statusAlertRef.focus();
+      if (this.statusAlertRef) {
+        this.statusAlertRef.focus();
+      }
     }
   }
 
@@ -384,27 +381,9 @@ export default class EditImageModal extends React.Component {
         id={imageDescriptionID}
         type="text"
         value={this.state.imageDescription}
-        disabled={this.state.isImageDecorative}
         onBlur={this.onImageDescriptionBlur}
         inputRef={this.setImageDescriptionInputRef}
       />
-      <div className="or-fields">
-        <WrappedMessage
-          message={messages.editImageModalImageOrFields}
-        />
-      </div>
-      <CheckBox
-        id="isDecorative"
-        name="isDecorative"
-        label={
-          <WrappedMessage
-            message={messages.editImageModalImageIsDecorativeCheckboxLabel}
-          />
-        }
-        description={this.getImageIsDecorativeDescription()}
-        checked={this.state.isImageDecorative}
-        onChange={this.onImageIsDecorativeClick}
-      />
     </Fieldset>
   );
 
@@ -432,14 +411,6 @@ export default class EditImageModal extends React.Component {
     </React.Fragment>
   );
 
-  getImageIsDecorativeDescription = () => (
-    <React.Fragment>
-      <WrappedMessage message={messages.editImageModalImageIsDecorativeCheckboxDescription} />
-      {' '}
-      {this.getLearnMoreLink()}
-    </React.Fragment>
-  );
-
   getImageDimensionsInput = () => (
     <Fieldset
       legend={<WrappedMessage message={messages.editImageModalDimensionsLegend} />}
@@ -662,7 +633,7 @@ export default class EditImageModal extends React.Component {
           {this.getStatusAlert()}
         </div>
       </div>
-      <div className="row mb-5">
+      <div className="row mb-3">
         <div className="col">
           <WrappedAssetsDropZone
             maxFileCount={1}
@@ -673,35 +644,29 @@ export default class EditImageModal extends React.Component {
           />
         </div>
       </div>
-      <div className="row no-gutters">
-        <div className="col">
-          <WrappedMessage message={messages.editImageModalInsertHeader} tagName="h3" />
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-6 order-2">
-          {(this.state.assetsPageType === pageTypes.NORMAL ||
-            this.state.assetsPageType === pageTypes.NO_RESULTS) && (
-            <WrappedAssetsSearch />
-          )}
-        </div>
-        <div className="col-6 order-1">
-          {this.state.assetsPageType === pageTypes.NORMAL && (
-            <div aria-hidden>
-              <WrappedAssetsResultsCount />
-            </div>
-          )}
-        </div>
-      </div>
       <div className="row">
         <div className="col">
           {this.getImageSelectionModalBodyAssetsList(this.state.assetsPageType)}
         </div>
       </div>
-      {this.state.assetsPageType === pageTypes.NORMAL && (
-        <div className="row mt-3 no-gutters">
+      {this.isAssetSelected() && (
+        <div className="row mt-3">
           <div className="col">
-            <WrappedPagination />
+            {/* Hidden image to load dimensions */}
+            {this.state.imageSource && (
+              <img
+                alt=""
+                src={this.getImageAssetSource()}
+                onLoad={this.onImageLoad}
+                onError={this.onImageError}
+                ref={this.setImageRef}
+                style={{ display: 'none' }}
+              />
+            )}
+            <form ref={this.setImageFormRef}>
+              {this.getImageDescriptionInput()}
+              {this.getImageDimensionsInput()}
+            </form>
           </div>
         </div>
       )}
@@ -731,7 +696,12 @@ export default class EditImageModal extends React.Component {
   getModalButtons = () => {
     let buttons;
     if (this.state.pageNumber === 1) {
-      buttons = this.getNextPageButton();
+      // Show Save button if asset is selected, otherwise show Next button
+      if (this.isAssetSelected()) {
+        buttons = this.getInsertImageButton();
+      } else {
+        buttons = this.getNextPageButton();
+      }
     } else if (this.state.pageNumber === 2) {
       buttons = this.getInsertImageButton();
     }
@@ -815,7 +785,6 @@ export default class EditImageModal extends React.Component {
       } : {},
       imageSource: eventSource || '',
       imageStyle: event.detail.style || '',
-      isImageDecorative: event.detail.alt === '',
       // if existing img had a source, assume it could be loaded and show the image preview
       isImageLoaded: !!eventSource,
       isModalOpen: true,
@@ -824,25 +793,12 @@ export default class EditImageModal extends React.Component {
     }));
 
     if (this.props.assetsList.length === 0) {
-      this.props.getAssets({ assetTypes: { Images: true }, pageSize: 4 }, this.props.courseDetails);
+      this.props.getAssets({ assetTypes: { Images: true }, pageSize: 1000 }, this.props.courseDetails);
     }
   }
 
   validateImageDescription = () => {
-    let feedback = { isValid: true };
-    const { imageDescription, isImageDecorative } = this.state;
-
-    if (!imageDescription && !isImageDecorative) {
-      feedback = {
-        isValid: false,
-        validationMessage:
-          (<WrappedMessage
-            message={messages.editImageModalFormValidImageDescription}
-          />),
-        dangerIconDescription: <WrappedMessage message={messages.editImageModalFormError} />,
-      };
-    }
-    return feedback;
+    return { isValid: true };
   }
 
   validateImageDimensions = () => {

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

@@ -149,8 +149,6 @@
   "editImageModalImageDescriptionLegend": "Image Description",
   "editImageModalDimensionsLegend": "Image Dimensions",
   "editImageModalImageHeight": "Height",
-  "editImageModalImageIsDecorativeCheckboxDescription": "This image is a background or other image that does not require alternative text.",
-  "editImageModalImageIsDecorativeCheckboxLabel": "This image is decorative only",
   "editImageModalImagePreviewText": "Image Preview",
   "editImageModalInsertImageButton": "Insert Image",
   "editImageModalLearnMore": "Learn more.",
@@ -159,7 +157,6 @@
   "editImageModalInsertTitle": "Add an Image",
   "editImageModalInsertHeader": "Select a previously uploaded image",
   "editImageModalEditTitle": "Edit Image Settings",
-  "editImageModalImageOrFields": "or",
   "editImageModalNextPageButton": "Next",
   "editImageModalPreviousPageButton": "Back",
   "editImageModalInvalidFileType": "Files must be images, such as .jpg, .png, and .tiff files. No files were uploaded.",

package/src/data/i18n/locales/ar.json

@@ -149,8 +149,6 @@
   "editImageModalImageDescriptionLegend": "Image Description",
   "editImageModalDimensionsLegend": "Image Dimensions",
   "editImageModalImageHeight": "Height",
-  "editImageModalImageIsDecorativeCheckboxDescription": "This image is a background or other image that does not require alternative text.",
-  "editImageModalImageIsDecorativeCheckboxLabel": "This image is decorative only",
   "editImageModalImagePreviewText": "Image Preview",
   "editImageModalInsertImageButton": "Insert Image",
   "editImageModalLearnMore": "Learn more.",
@@ -159,7 +157,6 @@
   "editImageModalInsertTitle": "Add an Image",
   "editImageModalInsertHeader": "Select a previously uploaded image",
   "editImageModalEditTitle": "Edit Image Settings",
-  "editImageModalImageOrFields": "or",
   "editImageModalNextPageButton": "Next",
   "editImageModalPreviousPageButton": "Back",
   "editImageModalInvalidFileType": "Files must be images, such as .jpg, .png, and .tiff files. No files were uploaded.",

package/src/data/i18n/locales/es_419.json

@@ -149,8 +149,6 @@
   "editImageModalImageDescriptionLegend": "Descripción de la imagen",
   "editImageModalDimensionsLegend": "Dimensiones de la imagen",
   "editImageModalImageHeight": "Altura",
-  "editImageModalImageIsDecorativeCheckboxDescription": "Esta imagen es un fondo o otra imagen que no necesita un texto alternativo.",
-  "editImageModalImageIsDecorativeCheckboxLabel": "Esta es solo una imagen decorativa",
   "editImageModalImagePreviewText": "Previsualización de Imagen",
   "editImageModalInsertImageButton": "Insertar imagen",
   "editImageModalLearnMore": "Saber más.",
@@ -159,7 +157,6 @@
   "editImageModalInsertTitle": "Añadir una imagen",
   "editImageModalInsertHeader": "Seleccionar una imagen subida anteriormente",
   "editImageModalEditTitle": "Editar ajustes de la imagen",
-  "editImageModalImageOrFields": "o",
   "editImageModalNextPageButton": "Siguiente",
   "editImageModalPreviousPageButton": "Volver atrás",
   "editImageModalInvalidFileType": "Los archivos deben ser imágenes, formatos como .jpg, .png, y .tiff. Ningún archivo fue subido.",

package/src/data/i18n/locales/fr.json

@@ -149,8 +149,6 @@
   "editImageModalImageDescriptionLegend": "Description de l'Image",
   "editImageModalDimensionsLegend": "Dimensions de l'image",
   "editImageModalImageHeight": "Hauteur",
-  "editImageModalImageIsDecorativeCheckboxDescription": "C'est image de fond ou une autre image ne nécessitant pas de texte alternatif.",
-  "editImageModalImageIsDecorativeCheckboxLabel": "Cette image est purement décorative",
   "editImageModalImagePreviewText": "Aperçu de l'image",
   "editImageModalInsertImageButton": "Insérer l'image",
   "editImageModalLearnMore": "En savoir plus.",
@@ -159,7 +157,6 @@
   "editImageModalInsertTitle": "Ajouter une image",
   "editImageModalInsertHeader": "Sélectionner une image chargée précédemment",
   "editImageModalEditTitle": "Modifier les paramètres d'images",
-  "editImageModalImageOrFields": "ou",
   "editImageModalNextPageButton": "Suivant",
   "editImageModalPreviousPageButton": "Retour",
   "editImageModalInvalidFileType": "Les fichiers doivent être des images, du type .jpg, png, et .tiff. Aucun fichier n'a été chargé.",

package/src/data/i18n/locales/zh_CN.json

@@ -148,8 +148,6 @@
   "editImageModalImageDescriptionLegend": "图片描述",
   "editImageModalDimensionsLegend": "图片长宽比例",
   "editImageModalImageHeight": "高度",
-  "editImageModalImageIsDecorativeCheckboxDescription": "此图像是不需要替代文本的背景或其他图像。",
-  "editImageModalImageIsDecorativeCheckboxLabel": "此图片仅为装饰",
   "editImageModalImagePreviewText": "图片预览",
   "editImageModalInsertImageButton": "插入图片",
   "editImageModalLearnMore": "了解更多。",
@@ -158,7 +156,6 @@
   "editImageModalInsertTitle": "添加图片",
   "editImageModalInsertHeader": "选择一张之前上传的图片",
   "editImageModalEditTitle": "编辑图片设置",
-  "editImageModalImageOrFields": "或者",
   "editImageModalNextPageButton": "下一步",
   "editImageModalPreviousPageButton": "返回",
   "editImageModalInvalidFileType": "文件必须是图片，例如 .jpg，.png 和 .tiff 文件。没有文件被上传。",