learningtribes-studio-frontend 1.4.2-alpha.0 → 1.4.2-alpha.2

package/src/components/EditImageModal/index.jsx

@@ -1,4 +1,4 @@
-import { Button, CheckBox, Fieldset, Icon, InputText, Modal, StatusAlert, Variant } from '@edx/paragon';
+import { Button, CheckBox, Fieldset, 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,
@@ -59,6 +57,7 @@ const initialEditImageModalState = {
   isModalOpen: false,
   isStatusAlertOpen: false,
   pageNumber: 1,
+  editingExisting: false,
   shouldShowPreviousButton: false,
 };
 
@@ -74,7 +73,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);
@@ -125,12 +123,27 @@ export default class EditImageModal extends React.Component {
         break;
       }
       default: {
-        if (nextProps.selectedAsset.portable_url) {
+        if (nextProps.selectedAsset.portable_url &&
+          nextProps.selectedAsset.id !== this.props.selectedAsset.id) {
           newState.imageSource = nextProps.selectedAsset.portable_url;
         }
         break;
       }
     }
+
+    if (nextProps.assetsStatus.type !== assetActions.upload.UPLOAD_ASSET_SUCCESS &&
+      !nextProps.selectedAsset.id && this.state.imageSource && nextProps.assetsList.length) {
+      const source = this.state.imageSource;
+      const match = nextProps.assetsList.find(asset => (
+        asset.id && (
+          asset.portable_url === source || asset.url === source || asset.external_url === source
+        )
+      ));
+      if (match) {
+        nextProps.selectAsset(match);
+      }
+    }
+
     this.setState(state => ({
       ...newState,
       assetsPageType: getPageType(nextProps, state.assetsPageType),
@@ -167,12 +180,6 @@ export default class EditImageModal extends React.Component {
     ));
   }
 
-  onImageIsDecorativeClick = (checked) => {
-    this.setState({
-      isImageDecorative: checked,
-    });
-  }
-
   onImageLoad = (event) => {
     const img = event.target;
 
@@ -277,6 +284,7 @@ export default class EditImageModal extends React.Component {
     if (isValidFormContent) {
       // 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,
@@ -284,7 +292,7 @@ export default class EditImageModal extends React.Component {
             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,
           },
         },
@@ -389,27 +397,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>
   );
 
@@ -434,14 +424,8 @@ export default class EditImageModal extends React.Component {
       <WrappedMessage message={messages.editImageModalImageDescriptionDescription} />
       {' '}
       {this.getLearnMoreLink()}
-    </React.Fragment>
-  );
-
-  getImageIsDecorativeDescription = () => (
-    <React.Fragment>
-      <WrappedMessage message={messages.editImageModalImageIsDecorativeCheckboxDescription} />
       {' '}
-      {this.getLearnMoreLink()}
+      <WrappedMessage message={messages.editImageModalImageDecorativeDescription} />
     </React.Fragment>
   );
 
@@ -456,8 +440,8 @@ export default class EditImageModal extends React.Component {
       }}
       variantIconDescription={<WrappedMessage message={messages.editImageModalFormError} />}
     >
-      <div className="form-row">
-        <div className="col">
+      <div className={styles['dimensions-row']}>
+        <div className={styles['dimension-field']}>
           <InputText
             name="imageWidth"
             label={
@@ -471,10 +455,8 @@ export default class EditImageModal extends React.Component {
             onBlur={this.onImageDimensionBlur('width')}
           />
         </div>
-        <div className="col-1 my-auto image-dimensions-x">
-          <Icon className={['fa', 'fa-times']} />
-        </div>
-        <div className="col">
+        <span className={styles['dimensions-separator']} aria-hidden="true">x</span>
+        <div className={styles['dimension-field']}>
           <InputText
             name={imageHeightID}
             label={
@@ -593,16 +575,16 @@ export default class EditImageModal extends React.Component {
 
   getModalHeader = () => {
     let header;
-    if (this.state.pageNumber === 1) {
+    if (this.state.pageNumber === 2 || this.state.editingExisting) {
       header = (
         <WrappedMessage
-          message={messages.editImageModalInsertTitle}
+          message={messages.editImageModalEditTitle}
         />
       );
-    } else if (this.state.pageNumber === 2) {
+    } else {
       header = (
         <WrappedMessage
-          message={messages.editImageModalEditTitle}
+          message={messages.editImageModalInsertTitle}
         />
       );
     }
@@ -628,11 +610,7 @@ export default class EditImageModal extends React.Component {
       case pageTypes.NORMAL:
         return (<WrappedAssetsList />);
       case pageTypes.NO_ASSETS:
-        return (
-          <div className="mt-3">
-            <WrappedMessage message={messages.editImageModalAssetsListNoAssetsMessage} tagName="h3" />
-          </div>
-        );
+        return null;
       case pageTypes.NO_RESULTS:
         return (
           <React.Fragment>
@@ -683,14 +661,7 @@ export default class EditImageModal extends React.Component {
           {this.getImageSelectionModalBodyAssetsList(this.state.assetsPageType)}
         </div>
       </div>
-      {this.state.assetsPageType === pageTypes.NORMAL && (
-        <div className="row mt-2 no-gutters">
-          <div className="col">
-            <WrappedPagination />
-          </div>
-        </div>
-      )}
-      {this.isAssetSelected() && (
+      {(this.isAssetSelected() || this.state.imageSource) && (
         <div className="row mt-3">
           <div className="col">
             {/* Hidden image to load dimensions */}
@@ -704,7 +675,7 @@ export default class EditImageModal extends React.Component {
                 style={{ display: 'none' }}
               />
             )}
-            <form ref={this.setImageFormRef}>
+            <form className={styles['image-fields']} ref={this.setImageFormRef}>
               {this.getImageDescriptionInput()}
               {this.getImageDimensionsInput()}
             </form>
@@ -725,7 +696,7 @@ export default class EditImageModal extends React.Component {
           {this.getImagePreview()}
         </div>
         <div className="col">
-          <form ref={this.setImageFormRef}>
+          <form className={styles['image-fields']} ref={this.setImageFormRef}>
             {this.getImageDescriptionInput()}
             {this.getImageDimensionsInput()}
           </form>
@@ -737,12 +708,7 @@ export default class EditImageModal extends React.Component {
   getModalButtons = () => {
     let buttons;
     if (this.state.pageNumber === 1) {
-      // Show Save button if asset is selected, otherwise show Next button
-      if (this.isAssetSelected()) {
-        buttons = this.getInsertImageButton();
-      } else {
-        buttons = this.getNextPageButton();
-      }
+      buttons = this.getInsertImageButton();
     } else if (this.state.pageNumber === 2) {
       buttons = this.getInsertImageButton();
     }
@@ -783,6 +749,7 @@ export default class EditImageModal extends React.Component {
         />
       }
       buttonType="primary"
+      disabled={!this.isAssetSelected() && !this.state.imageSource}
       onClick={this.onInsertImageButtonClick}
     />
   );
@@ -826,34 +793,19 @@ export default class EditImageModal extends React.Component {
       } : {},
       imageSource: eventSource || '',
       imageStyle: event.detail.style || '',
-      isImageDecorative: event.detail.alt === '',
+      editingExisting: !isEventSourceEmpty,
       // if existing img had a source, assume it could be loaded and show the image preview
       isImageLoaded: !!eventSource,
       isModalOpen: true,
-      pageNumber: isEventSourceEmpty ? 1 : 2,
-      shouldShowPreviousButton: isEventSourceEmpty,
+      pageNumber: 1,
+      shouldShowPreviousButton: false,
     }));
 
-    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

@@ -145,21 +145,19 @@
   "editImageModalFormValidImageDescription": "Add an image description or specify that the image is decorative only.",
   "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 (Alt Text)",
+  "editImageModalImageDescriptionLabel": "Image Description",
+  "editImageModalImageDecorativeDescription": "If this image is purely decorative, it does not require alternative text.",
   "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",
+  "editImageModalInsertImageButton": "Save",
   "editImageModalLearnMore": "Learn more.",
   "editImageModalLockImageProportionsCheckboxLabel": "Lock proportions",
   "editImageModalImageWidth": "Width",
   "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 文件。没有文件被上传。",