File manager icons

client/src/bundles/bundle.js

@@ -76,6 +76,7 @@ require('expose-loader?TinyMCEActionRegistrar!lib/TinyMCEActionRegistrar');
 require('expose-loader?ShortcodeSerialiser!lib/ShortcodeSerialiser');
 require('expose-loader?formatWrittenNumber!lib/formatWrittenNumber');
 require('expose-loader?withDragDropContext!lib/withDragDropContext');
+require('expose-loader?FileStatusIcon!components/FileStatusIcon/FileStatusIcon');
 
 // Legacy CMS
 require('../legacy/sspath');

client/src/components/Breadcrumb/Breadcrumb.js

@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import FileStatusIcon from 'components/FileStatusIcon/FileStatusIcon';
 
 class Breadcrumb extends Component {
+  /**
+   * @returns {Object|false}
+   */
   getLastCrumb() {
     return this.props.crumbs && this.props.crumbs[this.props.crumbs.length - 1];
   }
 
+  /**
+   * @returns {*}
+   */
   renderBreadcrumbs() {
     if (!this.props.crumbs) {
       return null;
@@ -25,34 +33,54 @@ class Breadcrumb extends Component {
     ));
   }
 
+  /**
+   * @returns {*}
+   */
   renderLastCrumb() {
     const crumb = this.getLastCrumb();
     if (!crumb) {
       return null;
     }
-
-    const iconClassNames = ['breadcrumb__icon'];
-    if (crumb.icon) {
-      iconClassNames.push(crumb.icon.className);
-    }
-
     return (
       <div className="breadcrumb__item breadcrumb__item--last">
         <h2 className="breadcrumb__item-title">
           {crumb.text}
-          {crumb.icon && (
-            <span
-              className={iconClassNames.join(' ')}
-              role="button"
-              tabIndex={0}
-              onClick={crumb.icon.onClick}
-            />
-          )}
+          {crumb.icon && this.renderIcons([crumb.icon])}
+          {crumb.icons && this.renderIcons(crumb.icons)}
         </h2>
       </div>
     );
   }
 
+  /**
+   * @param {Array} icon
+   * @returns {*}
+   */
+  renderIcons(icons) {
+    return icons.map((icon, i) => {
+      const { nodeName, className, hasRestrictedAccess, ...other } = icon;
+      // reassign with let so linter won't suggest 'const' above for unmodified nodeName/className
+      let attrs = { ...other };
+      const extraClassName = classNames(['breadcrumb__icon', className]);
+      attrs = { tabIndex: '0', ...attrs };
+      if (attrs.hasOwnProperty('onClick')) {
+        attrs = { role: 'button', ...attrs };
+      }
+      attrs.key = `breadcrumb-icon-${i}`;
+      if (nodeName === 'FileStatusIcon') {
+        attrs.fileID = 0;
+        attrs.hasRestrictedAccess = hasRestrictedAccess;
+        attrs.extraClassName = extraClassName;
+        return <FileStatusIcon {...attrs} />;
+      }
+      attrs.className = extraClassName;
+      return <span {...attrs} />;
+    });
+  }
+
+  /**
+   * @returns {*}
+   */
   render() {
     return (
       <div className="breadcrumb__container fill-height flexbox-area-grow">
@@ -73,11 +101,19 @@ Breadcrumb.propTypes = {
   crumbs: PropTypes.arrayOf(PropTypes.shape({
     onClick: PropTypes.func,
     text: PropTypes.string,
+    // pass in a single icon (retain backwards compatibility)
     icon: PropTypes.shape({
+      nodeName: PropTypes.string,
       className: PropTypes.string,
       onClick: PropTypes.func,
       action: (props) => { if (props.action) { throw new Error('action: no longer used'); } },
-    })
+    }),
+    // pass in an array multiple icons (use this going forward)
+    icons: PropTypes.arrayOf(PropTypes.shape({
+      nodeName: PropTypes.string,
+      className: PropTypes.string,
+      onClick: PropTypes.func,
+    }))
   })),
 };
 

client/src/components/Breadcrumb/Breadcrumb.scss

@@ -79,11 +79,24 @@
   font-weight: normal;
   line-height: 24px;
   @include text-truncate;
+  display: flex;
+  align-items: center;
 }
 
 .breadcrumb__icon::before {
   margin-left: 1rem;
   font-size: 1.5rem;
   cursor: pointer;
-  vertical-align: middle;
+}
+
+.breadcrumb__icon {
+  margin-top: 5px;
+}
+
+.breadcrumb__icon.file-status-icon {
+  margin-left: 6px;
+
+  &:last-of-type {
+    margin-right: 6px;
+  }
 }

client/src/components/Breadcrumb/tests/breadcrumb-test.js

@@ -55,5 +55,22 @@ describe('BreadcrumbsComponent', () => {
       const listEls = breadcrumbs.renderBreadcrumbs();
       expect(listEls).toBe(null);
     });
+
+    it('can have multiple icons for the last crumb', () => {
+      props.crumbs = [
+        { text: 'breadcrumb1', href: 'href1' },
+        { text: 'breadcrumb2',
+          href: 'href2',
+          icons: [
+            { className: 'breadcrumb2iconA', onClick: jest.fn() },
+            { className: 'breadcrumb2iconB', onClick: jest.fn() }
+          ]
+        },
+      ];
+      breadcrumbs = ReactTestUtils.renderIntoDocument(<Breadcrumb {...props} />);
+      const fn = ReactTestUtils.scryRenderedDOMComponentsWithClass;
+      expect(fn(breadcrumbs, 'breadcrumb2iconA')).toBeTruthy();
+      expect(fn(breadcrumbs, 'breadcrumb2iconB')).toBeTruthy();
+    });
   });
 });

client/src/components/FileStatusIcon/FileStatusIcon.js

@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import i18n from 'i18n';
+import classNames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
+
+const cssClass = 'file-status-icon';
+
+/**
+ * File status icon (e.g. restricted access) with a tooltip
+ */
+class FileStatusIcon extends PureComponent {
+  /**
+   * @param {boolean} hasRestrictedAccess
+   * @returns {Object}
+   */
+  buildTrackedFormUpload(hasRestrictedAccess) {
+    const fontIconClass = hasRestrictedAccess
+      ? 'font-icon-address-card'
+      : 'font-icon-address-card-warning';
+    const className = classNames('icon', `${cssClass}__icon`, fontIconClass);
+    const dataTitle = hasRestrictedAccess
+      ? i18n._t(
+        'SilverStripe\\Admin\\FileStatusIcon.TRACKED_FORM_UPLOAD_RESTRICTED',
+        'Form submission'
+      )
+      : i18n._t(
+        'SilverStripe\\Admin\\FileStatusIcon.TRACKED_FORM_UPLOAD_UNRESTRICTED',
+        'Form submission, unrestricted access'
+      );
+    return { className, 'data-title': dataTitle };
+  }
+
+  /**
+   * @returns {Object}
+   */
+  buildRestrictedFileAttrs() {
+    const className = classNames('icon', `${cssClass}__icon`, 'font-icon-user-lock');
+    const dataTitle = i18n._t(
+      'SilverStripe\\Admin\\FileStatusIcon.ACCESS_RESTRICTED',
+      'Restricted access'
+    );
+    return { className, 'data-title': dataTitle };
+  }
+
+  /**
+   * @param {string} placement
+   * @param {string} id
+   * @param {string} title
+   * @returns {*}
+   */
+  renderTooltip(placement, id, title) {
+    return (
+      <UncontrolledTooltip placement={placement} target={id} delay={{ show: 300, hide: 0 }}>
+        {title}
+      </UncontrolledTooltip>
+    );
+  }
+
+  /**
+   * @returns {*}
+   */
+  render() {
+    const {
+      fileID, hasRestrictedAccess, isTrackedFormUpload, placement, extraClassName,
+      disableTooltip, includeBackground
+    } = this.props;
+    if (!isTrackedFormUpload && !hasRestrictedAccess) {
+      return '';
+    }
+    const backgroundClass = includeBackground ? 'file-status-icon--background' : '';
+    const className = classNames([cssClass, backgroundClass, extraClassName]);
+    const attrs = isTrackedFormUpload
+      ? this.buildTrackedFormUpload(hasRestrictedAccess)
+      : this.buildRestrictedFileAttrs();
+    const idType = isTrackedFormUpload ? 'tracked-form-upload' : 'restricted';
+    const id = `FileStatusIcon-${idType}-${fileID}`;
+    const tooltip = disableTooltip ? '' : this.renderTooltip(placement, id, attrs['data-title']);
+    return (
+      <div className={className}>
+        <span id={id} {...attrs} />
+        {tooltip}
+      </div>
+    );
+  }
+}
+
+FileStatusIcon.propTypes = {
+  fileID: PropTypes.number,
+  hasRestrictedAccess: PropTypes.bool,
+  isTrackedFormUpload: PropTypes.bool,
+  placement: PropTypes.string,
+  disableTooltip: PropTypes.bool,
+  extraClassName: PropTypes.string,
+  includeBackground: PropTypes.bool
+};
+
+FileStatusIcon.defaultProps = {
+  placement: 'auto',
+  disableTooltip: false
+};
+
+export default FileStatusIcon;

client/src/components/FileStatusIcon/FileStatusIcon.scss

@@ -0,0 +1,22 @@
+.file-status-icon__icon {
+  display: inline-block;
+
+  // uses the pseudo element from 'font-icon' to display different icons
+  // e.g. class="icon file-status-icon font-icon-user-lock"
+  &::before {
+    font-size: 1.385rem;
+  }
+}
+
+// adds a white circle background, which will make the icon larger
+.file-status-icon--background .file-status-icon__icon {
+  height: 26px;
+  width: 26px;
+  background-color: white;
+  border-radius: 100%;
+  text-align: center;
+
+  &::before {
+    line-height: 2rem;
+  }
+}

client/src/components/FileStatusIcon/README.md

@@ -0,0 +1,20 @@
+# FileStatusIcon Component
+
+Generates a file status icon element with a reactstrap tooltip.
+The icon and tooltip text is controlled via boolean props on the component rather than passed in as strings.
+
+## Example
+
+```js
+<FileStatusIcon fileID={123} hasRestrictedAccess={1} includeBackground={1} />
+```
+
+## Properties
+
+ * `fileID (number)`: The database ID of the file,
+ * `hasRestrictedAccess (boolean)`: Whether the file has restricted access / permissions,
+ * `isTrackedFormUpload (boolean)`: Whether the file is associated with a tracked form upload,
+ * `placement (string)`: Reactstramp tooltip position,
+ * `disableTooltip (boolean)`: Disable the reactstrap tooltip,
+ * `extraClassName (string)`: Extra class the component should have,
+ * `includeBackground (boolean)`: Whether to render the icon on a white circle background

client/src/components/FileStatusIcon/tests/FileStatusIcon-story.js

@@ -0,0 +1,26 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@storybook/react';
+import { withNotes } from '@storybook/addon-notes';
+import { withKnobs, boolean, selectV2 } from '@storybook/addon-knobs';
+import FileStatusIcon from 'components/FileStatusIcon/FileStatusIcon';
+
+import notes from '../README.md';
+
+storiesOf('Admin/FileStatusIcon', module)
+  .addDecorator(withKnobs)
+  .addWithJSX(
+    'Default',
+    withNotes(notes)(
+      () => (
+        <FileStatusIcon
+          fileID={123}
+          hasRestrictedAccess={boolean('hasRestrictedAccess', true)}
+          isTrackedFormUpload={boolean('isTrackedFormUpload', false)}
+          includeBackground={boolean('includeBackground', false)}
+          placement={selectV2('placement', ['auto', 'top', 'bottom', 'left', 'right'], 'auto')}
+          disableTooltip={boolean('disableTooltip', false)}
+        />
+      )
+    )
+  );