BUG Add a status column to the table view (#980)

* BUG Add a status column to the table view

client/lang/src/en.json

@@ -69,5 +69,6 @@
     "AssetAdmin.CreateTitle": "Insert new media from the web",
     "AssetAdmin.EditTitle": "Media from the web",
     "AssetAdmin.NEXT": "Next",
-    "AssetAdmin.PREVIOUS": "Previous"
-}
+    "AssetAdmin.MODIFIED": "Modified",
+    "AssetAdmin.STATUS": "Status",
+}

client/src/containers/TableView/TableView.js

@@ -4,6 +4,8 @@ import Griddle from 'griddle-react';
 import i18n from 'i18n';
 import { galleryViewPropTypes, galleryViewDefaultProps } from 'containers/Gallery/Gallery';
 import { fileSize } from 'lib/DataFormat';
+import { inject } from 'lib/Injector';
+import { compose } from 'redux';
 
 class TableView extends Component {
   constructor(props) {
@@ -15,6 +17,7 @@ class TableView extends Component {
     this.handleRowClick = this.handleRowClick.bind(this);
     this.renderSelect = this.renderSelect.bind(this);
     this.renderTitle = this.renderTitle.bind(this);
+    this.renderStatus = this.renderStatus.bind(this);
     this.renderNoItemsNotice = this.renderNoItemsNotice.bind(this);
 
     this.state = {
@@ -45,6 +48,7 @@ class TableView extends Component {
     const columns = [
       'thumbnail',
       'title',
+      'status',
       'size',
       'lastEdited',
     ];
@@ -80,18 +84,26 @@ class TableView extends Component {
       {
         columnName: 'title',
         customCompareFn: () => (0), // Suppress griddle re-sorting
+        displayName: i18n._t('File.TITLE', 'Title'),
         cssClassName: 'gallery__table-column--title',
         customComponent: this.renderTitle,
       },
+      {
+        columnName: 'status',
+        sortable: false,
+        cssClassName: 'sort--disabled',
+        customComponent: this.renderStatus,
+        displayName: i18n._t('File.STATUS', 'Status'),
+      },
       {
         columnName: 'lastEdited',
-        displayName: 'Modified',
+        displayName: i18n._t('File.MODIFIED', 'Modified'),
         customComponent: this.renderDate,
       },
       {
         columnName: 'size',
         sortable: false,
-        displayName: 'Size',
+        displayName: i18n._t('File.SIZE', 'Size'),
         cssClassName: 'sort--disabled',
         customComponent: this.renderSize,
       },
@@ -245,6 +257,36 @@ class TableView extends Component {
     );
   }
 
+  /**
+   * Renders the content for the status column
+   *
+   * @param {object} props
+   * @returns {Component|null}
+   */
+  renderStatus(props) {
+    let flags = [];
+    const item = props.rowData;
+    const { VersionedBadge } = this.props;
+
+    if (item.type !== 'folder') {
+      if (item.draft) {
+        flags.push({
+          key: 'status-draft',
+          status: 'draft'
+        });
+      } else if (item.modified) {
+        flags.push({
+          key: 'status-modified',
+          status: 'modified'
+        });
+      }
+    }
+
+    flags = flags.map(({ ...attributes }) => <VersionedBadge {...attributes} />);
+
+    return flags ? <span>{flags}</span> : null;
+  }
+
   /**
    * Renders the progressbar for a given row
    *
@@ -378,8 +420,14 @@ TableView.defaultProps = galleryViewDefaultProps;
 TableView.propTypes = {
   ...galleryViewPropTypes,
   sort: PropTypes.string.isRequired,
+  VersionedBadge: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 
 export { TableView as Component };
 
-export default TableView;
+export default compose(
+  inject(
+    ['VersionedBadge'],
+    VersionedBadge => ({ VersionedBadge })
+  )
+)(TableView);

package.json

@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@silverstripe/eslint-config": "0.0.5",
-    "@silverstripe/webpack-config": "^1.0.0",
+    "@silverstripe/webpack-config": "^1.2.0",
     "@storybook/addon-actions": "^3.4.11",
     "@storybook/addons": "^3.4.11",
     "@storybook/react": "^3.4.11",

tests/behat/features/change-sort-order.feature

@@ -28,6 +28,6 @@ Feature: Change view for asset admin
       And I wait until I see the ".gallery__table-row" element
     Then I should see the gallery item "file1" in position "1"
       And I should see the gallery item "file2" in position "2"
-    When I click "title" in the ".gallery__table thead" element
+    When I click "Title" in the ".gallery__table thead" element
     Then I should see the gallery item "file2" in position "1"
       And I should see the gallery item "file1" in position "2"

yarn.lock

@@ -38,9 +38,10 @@
     eslint-plugin-jsx-a11y "^5.1.1"
     eslint-plugin-react "^7.3.0"
 
-"@silverstripe/webpack-config@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@silverstripe/webpack-config/-/webpack-config-1.0.0.tgz#95ab7a5cca9959346b9c0feed306f65c8d2f3182"
+"@silverstripe/webpack-config@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@silverstripe/webpack-config/-/webpack-config-1.2.0.tgz#e79aeebda764b48ccafd62dd1e0b438e418757b5"
+  integrity sha512-Joctx5bPuMr4rGuM3qR+FRzxfRu8CTAcLFYSpoeW+Xf4u8SdpXoij8Jqb2Q0l3y9rXLGBqIyEyDkcgNthB/yDg==
   dependencies:
     autoprefixer "^6.4.0"
     babel-core "^6.24.1"
@@ -58,6 +59,7 @@
     modernizr-loader "^1.0.1"
     node-sass "^4.5.3"
     npm "^6.0.0"
+    postcss-custom-properties "^8.0.10"
     postcss-load-config "^1.2.0"
     postcss-loader "^2.0.5"
     resolve-url-loader "^2.0.2"
@@ -2151,6 +2153,15 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -7376,6 +7387,14 @@ postcss-convert-values@^2.3.4:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
 
+postcss-custom-properties@^8.0.10:
+  version "8.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
+  dependencies:
+    postcss "^7.0.17"
+    postcss-values-parser "^2.0.1"
+
 postcss-discard-comments@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
@@ -7618,6 +7637,15 @@ postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
+postcss-values-parser@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-zindex@^2.0.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
@@ -7643,6 +7671,15 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^7.0.17:
+  version "7.0.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
+  integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9446,6 +9483,13 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 svg-tag-names@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/svg-tag-names/-/svg-tag-names-1.1.1.tgz#9641b29ef71025ee094c7043f7cdde7d99fbd50a"