DRYD-1938: Update Detail List View (#296)

- Split DetailItem into its own component
- Create a new component for SearchResultCheckboxes
- Update detail view derivative to be 'Small'
- Create new config for detail view with formatters per section which match the wireframes
- Create 'no image found' placeholder for BlobImage
- Add alt text to BlobImage

Author: mikejritter

src/components/media/BlobImage.jsx

@@ -1,27 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
 import ImageContainer from '../../containers/media/ImageContainer';
 import { getDerivativePath } from '../../helpers/blobHelpers';
 
+import styles from '../../../styles/cspace-ui/Image.css';
+
 const propTypes = {
-  csid: PropTypes.string.isRequired,
+  alt: PropTypes.string,
+  csid: PropTypes.string,
   derivative: PropTypes.string,
 };
 
 const defaultProps = {
+  alt: '',
   derivative: 'Thumbnail',
 };
 
+const messages = defineMessages({
+  notFound: {
+    id: 'blob.notFound',
+    description: 'Error message when no image can be displayed',
+    defaultMessage: 'no image found',
+  },
+});
+
+const renderError = () => (
+  <div className={styles.noimage}>
+    <FormattedMessage {...messages.notFound} />
+  </div>
+);
+
 export default function BlobImage(props) {
   const {
+    alt,
     csid,
     derivative,
   } = props;
 
+  if (!csid) {
+    return renderError();
+  }
+
   const path = getDerivativePath(csid, derivative);
 
   return (
-    <ImageContainer src={path} />
+    <ImageContainer alt={alt} src={path} renderError={renderError} />
   );
 }
 

src/components/media/Image.jsx

@@ -10,11 +10,13 @@ const propTypes = {
   alt: PropTypes.string,
   errorMessage: PropTypes.node,
   pendingMessage: PropTypes.node,
+  renderError: PropTypes.func,
   retry: PropTypes.bool,
   retryLimit: PropTypes.number,
   readImage: PropTypes.func.isRequired,
 };
 
+// todo: message -> i18n
 const defaultProps = {
   errorMessage: '',
   pendingMessage: '',
@@ -129,6 +131,7 @@ export default class Image extends Component {
       errorMessage,
       pendingMessage,
       src,
+      renderError,
       retry,
       retryLimit,
       readImage,
@@ -141,9 +144,9 @@ export default class Image extends Component {
     } = this.state;
 
     if (isError) {
-      return (
-        <div className={styles.error}>{errorMessage}</div>
-      );
+      return renderError
+        ? renderError()
+        : <div className={styles.error}><p>{errorMessage}</p></div>;
     }
 
     if (blobUrl) {

src/components/pages/search/SearchResults.jsx

@@ -296,7 +296,7 @@ export default function SearchResults(props) {
   );
 
   return (
-    <div className={styles.common}>
+    <main className={styles.common}>
       <SearchResultTitleBar
         config={config}
         searchDescriptor={searchDescriptor}
@@ -326,7 +326,7 @@ export default function SearchResults(props) {
         </div>
         {sidebarPosition === 'right' ? sidebar : null}
       </div>
-    </div>
+    </main>
   );
 }
 

src/components/search/SearchResultCheckbox.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { CheckboxInput } from '../../helpers/configContextInputs';
+import { useConfig } from '../config/ConfigProvider';
+import { SEARCH_RESULT_PAGE_SEARCH_NAME } from '../../constants/searchNames';
+import { setResultItemSelected } from '../../actions/search';
+
+import styles from '../../../styles/cspace-ui/SearchTable.css';
+
+const messages = defineMessages({
+  checkboxLabelSelect: {
+    id: 'searchResult.checkboxAriaLabel',
+    description: 'The aria-label for a checkbox input',
+    defaultMessage: 'Select item {index}',
+  },
+});
+
+function SearchResultCheckbox({
+  index, listType, searchDescriptor, selected, intl,
+}) {
+  const config = useConfig();
+  const dispatch = useDispatch();
+
+  // todo: use an id field (e.g. objectNumber) instead of the index
+  const ariaLabel = intl.formatMessage(messages.checkboxLabelSelect, { index });
+
+  return (
+    <CheckboxInput
+      embedded
+      aria-label={ariaLabel}
+      className={styles.detailCheckbox}
+      name={`${index}`}
+      value={selected}
+      onCommit={(path, value) => dispatch(setResultItemSelected(config,
+        SEARCH_RESULT_PAGE_SEARCH_NAME,
+        searchDescriptor,
+        listType,
+        parseInt(path[0], 10),
+        value))}
+      onClick={(event) => event.stopPropagation()}
+    />
+  );
+}
+
+export default injectIntl(SearchResultCheckbox);
+
+SearchResultCheckbox.propTypes = {
+  index: PropTypes.number,
+  listType: PropTypes.string,
+  searchDescriptor: PropTypes.object,
+  selected: PropTypes.bool,
+  intl: PropTypes.object,
+};

src/components/search/list/DetailItem.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import {
+  defineMessages, FormattedMessage, injectIntl, intlShape,
+} from 'react-intl';
+import { components as inputComponents } from 'cspace-input';
+import { useConfig } from '../../config/ConfigProvider';
+import BlobImage from '../../media/BlobImage';
+import { SEARCH_RESULT_PAGE_SEARCH_NAME } from '../../../constants/searchNames';
+
+import styles from '../../../../styles/cspace-ui/SearchList.css';
+import SearchResultCheckbox from '../SearchResultCheckbox';
+
+const { Button } = inputComponents;
+
+const propTypes = {
+  item: PropTypes.instanceOf(Immutable.Map),
+  index: PropTypes.number,
+  intl: intlShape,
+  detailConfig: PropTypes.shape({
+    aside: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+    title: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+    subtitle: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+    description: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+    tags: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+    footer: PropTypes.shape({
+      formatter: PropTypes.func,
+    }),
+  }),
+  searchDescriptor: PropTypes.object,
+  listType: PropTypes.string,
+  selectedItems: PropTypes.instanceOf(Immutable.Map),
+};
+
+const renderEditButton = (location, state) => {
+  const button = (
+    <Button name="edit">
+      <FormattedMessage
+        id="searchDetailList.editLabel"
+        description="Label of the edit record button."
+        defaultMessage="Edit Record"
+      />
+    </Button>
+  );
+  return location ? (
+    <Link to={{ pathname: location, state }}>
+      {button}
+    </Link>
+  ) : button;
+};
+
+const renderBlob = (location, state, blobCsid, blobAltText) => {
+  if (location) {
+    return (
+      <Link to={{ pathname: location, state }}>
+        <BlobImage csid={blobCsid} derivative="Small" alt={blobAltText} />
+      </Link>
+    );
+  }
+
+  return <BlobImage csid={blobCsid} derivative="Small" alt={blobAltText} />;
+};
+
+const messages = defineMessages({
+  alt: {
+    id: 'searchDetail.altText',
+    description: 'Default alt text for thumbnails',
+    defaultMessage: 'Edit record {csid}',
+  },
+});
+
+function DetailItem({
+  item, index, detailConfig, searchDescriptor, listType, selectedItems, intl,
+}) {
+  const config = useConfig();
+
+  const {
+    title: {
+      formatter: titleFormatter,
+    } = {},
+    subtitle: {
+      formatter: subtitleFormatter,
+    } = {},
+    description: {
+      formatter: descriptionFormatter,
+    } = {},
+    tags: {
+      formatter: tagFormatter,
+    } = {},
+    footer: {
+      formatter: footerFormatter,
+    } = {},
+    aside: {
+      formatter: asideFormatter,
+    } = {},
+  } = detailConfig;
+
+  const csid = item.get('csid');
+  const blobCsid = item.get('blobCsid');
+  const altText = item.get('blobAltText') || intl.formatMessage(messages.alt, { csid });
+  const selected = selectedItems ? selectedItems.has(csid) : false;
+
+  const listTypeConfig = config.listTypes[listType];
+  const { getItemLocationPath } = listTypeConfig;
+  let location;
+  let state;
+  if (getItemLocationPath) {
+    location = getItemLocationPath(item, { config, searchDescriptor });
+    state = {
+      searchDescriptor: searchDescriptor.toJS(),
+      // The search traverser on records will always link to the search result page, so use
+      // its search name.
+      searchName: SEARCH_RESULT_PAGE_SEARCH_NAME,
+    };
+  }
+
+  const renderInfo = () => <aside>{asideFormatter(item)}</aside>;
+  const renderDescriptionBlock = () => (
+    <div className={styles.description}>
+      {
+        location ? (
+          <Link to={{ pathname: location, state }}>
+            {titleFormatter?.(item)}
+          </Link>
+        ) : titleFormatter?.(item)
+      }
+      {subtitleFormatter?.(item)}
+      {descriptionFormatter?.(item)}
+      {tagFormatter?.(item)}
+      {footerFormatter?.(item)}
+    </div>
+  );
+
+  const editButton = renderEditButton(location, state);
+  return (
+    <div className={styles.innerDetail}>
+      <div className={styles.imageContainer}>
+        {renderBlob(location, state, blobCsid, altText)}
+      </div>
+      <SearchResultCheckbox
+        index={index}
+        listType={listType}
+        searchDescriptor={searchDescriptor}
+        selected={selected}
+      />
+      {renderDescriptionBlock()}
+      <div className={styles.info}>
+        {renderInfo()}
+        {editButton}
+      </div>
+    </div>
+  );
+}
+
+DetailItem.propTypes = propTypes;
+
+export default injectIntl(DetailItem);