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

package/src/components/AssetsList/index.jsx

@@ -72,57 +72,64 @@ export default class AssetsList extends React.Component {
     }
   }
 
-  getAssetsListHeader = () => (
-    <div className={classNames(styles['list-header'], 'row')}>
-      <span className="col-6 offset-3" data-identifier="asset-file-name" id="name-header"><WrappedMessage message={messages.assetsListNameLabel} /></span>
-      <span className="col-3" data-identifier="asset-date-added" id="date-added-header"><WrappedMessage message={messages.assetsListDateLabel} /></span>
-    </div>
-  )
-
-  getAssetListItem = (asset, index) => {
+  getFileExtension = (displayName) => {
+    if (!displayName) return '';
+    const lastDot = displayName.lastIndexOf('.');
+    if (lastDot === -1 || lastDot === displayName.length - 1) {
+      return 'file';
+    }
+    return displayName.substring(lastDot + 1).toLowerCase();
+  }
+
+  formatFileSize = (bytes) => {
+    if (!bytes || bytes === 0) return '';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const k = 1024;
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const size = (bytes / Math.pow(k, i)).toFixed(i === 0 ? 0 : 1);
+    return `${size} ${units[i]}`;
+  }
+
+  getAssetGridItem = (asset, index) => {
     const isSelected = this.props.selectedAsset.id === asset.id;
+    const baseUrl = this.props.courseDetails.base_url || '';
+    const fileExt = this.getFileExtension(asset.display_name);
+    const fileSize = this.formatFileSize(asset.file_size);
 
     return (
-      <li
-        // prevent clicking on list item from triggering parent's focus
+      <div
         onMouseDown={(e) => { e.preventDefault(); this.onAssetClick(asset, index); }}
-        className={classNames('list-group-item list-group-item-action', { active: isSelected })}
+        className={classNames(styles['asset-grid-item'], { [styles.selected]: isSelected })}
         id={`asset-list-option-${index}`}
         aria-selected={isSelected}
         role="option"
-        key={asset.display_name}
+        key={asset.id || asset.display_name}
         tabIndex="-1"
-        aria-labelledby={`name-header asset-name-${index} date-added-header asset-date-${index}`}
       >
-        <div className="row">
-          {this.getThumbnailElement(asset.thumbnail)}
-          {this.getDisplayNameElement(asset.display_name, index)}
-          {this.getDateAddedElement(asset.date_added, index)}
+        <div className={styles['asset-preview']}>
+          <span className={styles['file-type-badge']}>{fileExt}</span>
+          {asset.thumbnail ? (
+            <img
+              className={styles['asset-thumbnail']}
+              src={`${baseUrl}${asset.thumbnail}`}
+              alt=""
+            />
+          ) : (
+            <div className={styles['asset-icon']}>
+              <i className="far fa-image" />
+            </div>
+          )}
+        </div>
+        <div className={styles['asset-info']}>
+          <div className={classNames(styles['asset-name'], { [styles.selected]: isSelected })} title={asset.display_name}>
+            {asset.display_name}
+          </div>
+          {fileSize && (
+            <div className={styles['asset-size']}>
+              {fileSize}
+            </div>
+          )}
         </div>
-      </li>
-    );
-  }
-
-  getDateAddedElement = (dateAdded, index) => (
-    <span id={`asset-date-${index}`} className="col-3" data-identifier="asset-date-added">{dateAdded}</span>
-  );
-
-  getDisplayNameElement = (displayName, index) => (
-    <span id={`asset-name-${index}`} className="col-6" data-identifier="asset-file-name">{displayName}</span>
-  );
-
-  getImageThumbnail(thumbnail) {
-    const baseUrl = this.props.courseDetails.base_url || '';
-
-    return (
-      <div className={styles['assets-list-image-preview-container']}>
-        {
-          thumbnail ?
-            <img className={styles['assets-list-image-preview-image']} src={`${baseUrl}${thumbnail}`} alt="" data-identifier="asset-image-thumbnail" /> :
-            <WrappedMessage message={messages.assetsListNoPreview} >
-              {displayText => <span className={classNames('text-center')} data-identifier="asset-image-thumbnail">{displayText}</span>}
-            </WrappedMessage>
-        }
       </div>
     );
   }
@@ -130,17 +137,11 @@ export default class AssetsList extends React.Component {
   getSelectedAssetIndex = (assetsList, selectedAsset) => (assetsList.findIndex(
     asset => asset.id === selectedAsset.id));
 
-  getThumbnailElement = thumbnail => (
-    <span aria-hidden className="col">{this.getImageThumbnail(thumbnail)}</span>
-  );
-
   handleKeyDown = (e) => {
     switch (e.key) {
-      case 'ArrowDown': {
-        // prevent scrolling entire modal body with arrow keys
+      case 'ArrowRight': {
         e.preventDefault();
-
-        if (this.state.selectedAssetIndex < this.props.paginationMetadata.pageSize - 1) {
+        if (this.state.selectedAssetIndex < this.props.assetsList.length - 1) {
           this.setState(
             (state, props) => ({
               selectedAssetIndex: this.state.selectedAssetIndex + 1,
@@ -151,10 +152,8 @@ export default class AssetsList extends React.Component {
         }
         break;
       }
-      case 'ArrowUp': {
-        // prevent scrolling entire modal body with arrow keys
+      case 'ArrowLeft': {
         e.preventDefault();
-
         if (this.state.selectedAssetIndex > 0) {
           this.setState(
             (state, props) => ({
@@ -171,29 +170,36 @@ export default class AssetsList extends React.Component {
   }
 
   render = () => {
-    const assetsListItems = this.props.assetsList.map((asset, index) =>
-      this.getAssetListItem(asset, index));
+    const assetsGridItems = this.props.assetsList.map((asset, index) =>
+      this.getAssetGridItem(asset, index));
 
     return (
-      <React.Fragment>
-        {this.getAssetsListHeader()}
-        <ol
-          aria-activedescendant={this.state.selectedAssetIndex > -1 ? `asset-list-option-${this.state.selectedAssetIndex}` : null}
-          className="list-group"
-          onFocus={this.onListBoxFocus}
-          onKeyDown={this.handleKeyDown}
-          role="listbox"
-          tabIndex="0"
-        >
-          {assetsListItems}
-        </ol>
-      </React.Fragment>
+      <div
+        aria-activedescendant={this.state.selectedAssetIndex > -1 ? `asset-list-option-${this.state.selectedAssetIndex}` : null}
+        className={styles['assets-grid']}
+        onFocus={this.onListBoxFocus}
+        onKeyDown={this.handleKeyDown}
+        role="listbox"
+        tabIndex="0"
+      >
+        {assetsGridItems}
+      </div>
     );
   };
 }
 
 AssetsList.propTypes = {
-  assetsList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  assetsList: PropTypes.arrayOf(PropTypes.shape({
+    display_name: PropTypes.string,
+    content_type: PropTypes.string,
+    url: PropTypes.string,
+    date_added: PropTypes.string,
+    id: PropTypes.string,
+    portable_url: PropTypes.string,
+    thumbnail: PropTypes.string,
+    external_url: PropTypes.string,
+    file_size: PropTypes.number,
+  })).isRequired,
   courseDetails: PropTypes.shape({
     lang: PropTypes.string,
     url_name: PropTypes.string,
@@ -222,5 +228,6 @@ AssetsList.propTypes = {
     portable_url: PropTypes.string,
     thumbnail: PropTypes.string,
     external_url: PropTypes.string,
+    file_size: PropTypes.number,
   }).isRequired,
 };

package/src/components/EditImageModal/EditImageModal.scss

@@ -7,6 +7,7 @@
 
 .modal-dialog {
   max-width: $modal-lg;
+  margin: 40px auto;
 }
 
 // --- Copied from: https://github.com/edx/paragon/blob/master/src/Fieldset/Fieldset.scss
@@ -17,6 +18,12 @@
     width: auto;
     margin-bottom: 0;
   }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 }
 
 .form-control.is-invalid.is-invalid-nodanger {
@@ -76,3 +83,73 @@
 .invalid-feedback {
   font-size: $font-size-base;
 }
+
+.modal-body {
+  // Form fields
+  form {
+    .paragon-fieldset {
+      margin-bottom: 1.5rem;
+      
+      fieldset {
+        legend {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          margin-bottom: 0.5rem;
+        }
+      }
+    }
+
+    .form-group {
+      margin-bottom: 1rem;
+
+      label {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .form-control {
+        border-radius: 8px;
+        border: 1px solid #e0e0e0;
+        padding: 10px 14px;
+        font-size: 14px;
+
+        &:focus {
+          border-color: #e0e0e0;
+          box-shadow: none;
+        }
+      }
+
+      .form-text {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+      }
+    }
+  }
+
+  // Dimensions row
+  .form-row {
+    .col {
+      .form-group {
+        label {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+// Checkbox
+.form-check {
+  .form-check-input {
+    margin-top: 0.25rem;
+  }
+
+  .form-check-label {
+    font-size: 14px;
+    color: #333;
+  }
+}

package/src/components/EditImageModal/EditImageModal.test.jsx

@@ -47,9 +47,6 @@ const getImageDescriptionFieldset = editImageModal =>
   (getFormContainer(editImageModal).find(Fieldset).at(0));
 const getImageDescriptionInput = editImageModal =>
   (getImageDescriptionFieldset(editImageModal).find(InputText));
-const getImageDescriptionInputCheckBox = editImageModal =>
-  (getImageDescriptionFieldset(editImageModal).find(CheckBox));
-
 const getImageDimensionsFieldset = editImageModal =>
   (getFormContainer(editImageModal).find(Fieldset).at(1));
 const getImageDimensionsWidthInput = editImageModal =>
@@ -488,36 +485,6 @@ describe('EditImageModal', () => {
                 });
               });
 
-              describe('a image description CheckBox with', () => {
-                it('a CheckBox', () => {
-                  expect(getImageDescriptionInputCheckBox(editImageModal)).toHaveLength(1);
-                });
-
-                it('correct initial props', () => {
-                  const imageDescriptionInputCheckbox =
-                    getImageDescriptionInputCheckBox(editImageModal);
-
-                  expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
-                  expect(imageDescriptionInputCheckbox.prop('id')).toEqual('isDecorative');
-
-                  expect(shallowWithIntl(imageDescriptionInputCheckbox.prop('label')).prop('message'))
-                    .toEqual(messages.editImageModalImageIsDecorativeCheckboxLabel);
-
-                  expect(imageDescriptionInputCheckbox.prop('checked')).toEqual(false);
-                });
-
-                it('a Learn More link in description', () => {
-                  /*
-                    Due to Enzyme issue #1213, we must wrap React Fragments in a div in order
-                    to succesfully shallow them. Once Enzyme introduces support for React Fragments,
-                    we can remove the extraneous div.
-                  */
-                  const imageDescriptionInputCheckBoxDescriptionMessages = shallowWithIntl(<div>{getImageDescriptionInputCheckBox(editImageModal).prop('description')}</div>).find(WrappedMessage);
-                  expect(imageDescriptionInputCheckBoxDescriptionMessages.at(1).prop('children')().type).toEqual('a');
-                  expect(imageDescriptionInputCheckBoxDescriptionMessages.at(1).prop('message'))
-                    .toEqual(messages.editImageModalLearnMore);
-                });
-              });
             });
 
             describe('an imageDimensions Fieldset with', () => {
@@ -620,7 +587,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -648,7 +614,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -672,7 +637,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDimensions')).toEqual({});
         expect(editImageModal.state('imageSource')).toEqual('');
         expect(editImageModal.state('imageStyle')).toEqual('');
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(false);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -712,7 +676,6 @@ describe('EditImageModal', () => {
         });
         expect(editImageModal.state('imageStyle')).toEqual(sampleText);
         expect(editImageModal.state('imageSource')).toEqual(sampleText);
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
         expect(editImageModal.state('isImageDescriptionValid')).toEqual(true);
         expect(editImageModal.state('isImageLoaded')).toEqual(true);
         expect(editImageModal.state('isImageLoading')).toEqual(false);
@@ -956,23 +919,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('currentValidationMessages')).toEqual({});
       });
 
-      it('this.state.currentValidationMessages has correct validation messages when invalid form submitted', () => {
-        getInsertImageButton(editImageModal).simulate('click');
-
-        expect(editImageModal.state('currentValidationMessages').imageDescription.props.message).toEqual(messages.editImageModalFormValidImageDescription);
-      });
-
-      it('this.state.currentValidationMessages has correct validation message when invalid image description submitted', () => {
-        editImageModal.setState({
-          imageSource: sampleText,
-        });
-
-        getInsertImageButton(editImageModal).simulate('click');
-
-        expect(editImageModal.state('currentValidationMessages')).not.toHaveProperty('imageDimensions');
-        expect(editImageModal.state('currentValidationMessages').imageDescription.props.message).toEqual(messages.editImageModalFormValidImageDescription);
-      });
-
       it('this.state.currentValidationMessages has correct validation message when invalid image dimensions submitted', () => {
         editImageModal.setState({
           imageSource: sampleText,
@@ -1008,7 +954,7 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('currentValidationMessages')).not.toHaveProperty('imageDescription');
       });
 
-      it('status alert has correct validation messages when invalid form submitted', () => {
+      it('status alert has correct validation message when invalid dimensions submitted', () => {
         editImageModal.setState({
           imageDimensions: {
             height: (-1 * sampleImgData.naturalHeight),
@@ -1021,9 +967,8 @@ describe('EditImageModal', () => {
         editImageModal.update();
 
         const statusAlertListItems = shallowWithIntl(getStatusAlert(editImageModal).prop('dialog')).find('div ul.bullet-list li a');
-        expect(statusAlertListItems).toHaveLength(2);
-        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
-        expect(statusAlertListItems.at(1).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDimensions);
+        expect(statusAlertListItems).toHaveLength(1);
+        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDimensions);
       });
 
       it('validation messages are hyperlinks that navigate to appropriate form elements', () => {
@@ -1040,32 +985,8 @@ describe('EditImageModal', () => {
         editImageModal.update();
 
         const statusAlertListItems = shallowWithIntl(getStatusAlert(editImageModal).prop('dialog')).find('div ul.bullet-list li a');
-        expect(statusAlertListItems).toHaveLength(2);
-        expect(statusAlertListItems.at(0).prop('href')).toEqual('#imageDescription');
-        expect(statusAlertListItems.at(1).prop('href')).toEqual('#imageWidth');
-      });
-
-      it('status alert has correct validation message when invalid image description submitted', () => {
-        editImageModal.setState({
-          imageSource: sampleText,
-        });
-
-        getModalBody(editImageModal).find('img').simulate('load', { target: { ...sampleImgData } });
-
-        getInsertImageButton(editImageModal).simulate('click');
-
-        editImageModal.update();
-
-        const statusAlert = getStatusAlert(editImageModal);
-
-        const validationMessages = shallowWithIntl(statusAlert.prop('dialog')).find(WrappedMessage);
-        expect(validationMessages).toHaveLength(2);
-        expect(validationMessages.at(0).prop('message')).toEqual(messages.editImageModalFormErrorMissingFields);
-        expect(validationMessages.at(1).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
-
-        const statusAlertListItems = shallowWithIntl(statusAlert.prop('dialog')).find('div ul.bullet-list li a');
         expect(statusAlertListItems).toHaveLength(1);
-        expect(statusAlertListItems.at(0).find(WrappedMessage).prop('message')).toEqual(messages.editImageModalFormValidImageDescription);
+        expect(statusAlertListItems.at(0).prop('href')).toEqual('#imageWidth');
       });
 
       it('status alert has correct validation message when invalid image dimensions submitted', () => {
@@ -1340,79 +1261,6 @@ describe('EditImageModal', () => {
         expect(editImageModal.state('imageDescription')).toEqual(sampleText);
       });
 
-      it('sets this.state.isImageDecorative with value on checkbox onChange', () => {
-        const isImageDecoractiveCheckBox = getImageDescriptionInputCheckBox(editImageModal);
-
-        isImageDecoractiveCheckBox.simulate('change', true);
-
-        expect(editImageModal.state('isImageDecorative')).toEqual(true);
-
-        isImageDecoractiveCheckBox.simulate('change', false);
-
-        expect(editImageModal.state('isImageDecorative')).toEqual(false);
-      });
-
-      it('sends this.state.isImageDecorative as checkbox checked prop to image description checkbox', () => {
-        editImageModal.setState({
-          isImageDecorative: true,
-        });
-
-        expect(getImageDescriptionInputCheckBox(editImageModal).prop('checked')).toEqual(true);
-
-        editImageModal.setState({
-          isImageDecorative: false,
-        });
-
-        expect(getImageDescriptionInputCheckBox(editImageModal).prop('checked')).toEqual(false);
-      });
-
-      it('toggles image description input disabled prop via checkbox', () => {
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', true);
-
-        editImageModal.update();
-
-        expect(getImageDescriptionInput(editImageModal).prop('disabled')).toEqual(true);
-
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', false);
-
-        editImageModal.update();
-
-        expect(getImageDescriptionInput(editImageModal).prop('disabled')).toEqual(false);
-      });
-
-      it('returns correct feedback for invalid description (uses initial state)', () => {
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(false);
-        expect(shallowWithIntl(feedback.validationMessage).prop('message'))
-          .toEqual(messages.editImageModalFormValidImageDescription);
-        expect(shallowWithIntl(feedback.dangerIconDescription).prop('message'))
-          .toEqual(messages.editImageModalFormError);
-      });
-
-      it('returns correct feedback for valid description (with non-empty description)', () => {
-        editImageModal.setState({
-          imageDescription: sampleText,
-        });
-
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(true);
-        expect(feedback.validationMessage).toBeUndefined();
-        expect(feedback.dangerIconDescription).toBeUndefined();
-      });
-
-      it('returns correct feedback for valid description (with checked checkbox)', () => {
-        editImageModal.setState({
-          isImageDecorative: true,
-        });
-
-        const feedback = editImageModal.instance().validateImageDescription();
-
-        expect(feedback.isValid).toEqual(true);
-        expect(feedback.validationMessage).toBeUndefined();
-        expect(feedback.dangerIconDescription).toBeUndefined();
-      });
     });
 
     describe('Image Dimensions Fieldset', () => {
@@ -1789,10 +1637,11 @@ describe('EditImageModal', () => {
         expect(dispatchEventSpy.mock.calls[0][0].detail.alt).toEqual(sampleText);
       });
 
-      it('sends empty string in submitForm event if this.state.imageIsDecorative', () => {
-        getImageDescriptionInput(editImageModal).simulate('blur', sampleText);
-
-        getImageDescriptionInputCheckBox(editImageModal).simulate('change', true);
+      it('sends empty string in submitForm event when description is empty', () => {
+        editImageModal.setState({
+          imageDescription: '',
+          imageSource: sampleText,
+        });
 
         getInsertImageButton(editImageModal).simulate('click');
 

package/src/components/EditImageModal/displayMessages.jsx

@@ -66,16 +66,6 @@ const messages = defineMessages({
     defaultMessage: 'Height',
     description: 'Label for the text input box for an image\'s height,',
   },
-  editImageModalImageIsDecorativeCheckboxDescription: {
-    id: 'editImageModalImageIsDecorativeCheckboxDescription',
-    defaultMessage: 'This image is a background or other image that does not require alternative text.',
-    description: 'Description for a checkbox that explains what it means for an image to be decorative',
-  },
-  editImageModalImageIsDecorativeCheckboxLabel: {
-    id: 'editImageModalImageIsDecorativeCheckboxLabel',
-    defaultMessage: 'This image is decorative only',
-    description: 'Label for a checkbox that denotes that an image is decorative',
-  },
   editImageModalImagePreviewText: {
     id: 'editImageModalImagePreviewText',
     defaultMessage: 'Image Preview',
@@ -83,8 +73,8 @@ const messages = defineMessages({
   },
   editImageModalInsertImageButton: {
     id: 'editImageModalInsertImageButton',
-    defaultMessage: 'Insert Image',
-    description: 'Text inside the Insert Image button at the bottom of the modal',
+    defaultMessage: 'Save',
+    description: 'Text inside the Save button at the bottom of the modal',
   },
   editImageModalLearnMore: {
     id: 'editImageModalLearnMore',
@@ -116,11 +106,6 @@ const messages = defineMessages({
     defaultMessage: 'Edit Image Settings',
     description: 'Title of the modal used for editing image settings',
   },
-  editImageModalImageOrFields: {
-    id: 'editImageModalImageOrFields',
-    defaultMessage: 'or',
-    description: 'Describes two choices,',
-  },
   editImageModalNextPageButton: {
     id: 'editImageModalNextPageButton',
     defaultMessage: 'Next',