Update: Migrating to new metadata templates for skills (#150)

Upgrades some packages Fixes some flow issues Fixes skills css causing overflow on preview
box · Jan 12, 2018 · 541a7a1 · 541a7a1
1 parent 5c92eaa
commit 541a7a1
Show file tree

Hide file tree

Showing 32 changed files with 1,130 additions and 566 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -32,6 +32,10 @@ be.deleteDialogFileText = Are you sure you want to delete {name}?
 be.deleteDialogFolderText = Are you sure you want to delete {name} and all its contents?
 # Label for delete confirmation dialog
 be.deleteDialogLabel = Confirm Delete
+# Label for the description field in the preview sidebar.
+be.description = Description
+# Placeholder for file description in preview sidebar.
+be.descriptionPlaceholder = Enter a description
 # Label for download action.
 be.download = Download
 # Shown as the title in the sub header while showing an error.
@@ -126,10 +130,6 @@ be.shareDialogLabel = Share
 be.shareDialogNone = None
 # Text for share link dialog
 be.shareDialogText = Shared Link:
-# Label for the description field in the preview sidebar.
-be.sidebarDescription = Description
-# Placeholder for file description in preview sidebar.
-be.sidebarDescriptionPlaceholder = Enter a description
 # Title for the preview details sidebar.
 be.sidebarDetailsTitle = Details
 # Label for the hide sidebar button.

diff --git a/package.json b/package.json
@@ -99,11 +99,11 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.3",
+    "autoprefixer": "^7.2.4",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
-    "babel-eslint": "^8.0.3",
-    "babel-jest": "^22.0.3",
+    "babel-eslint": "^8.2.1",
+    "babel-jest": "^22.0.4",
     "babel-loader": "^7.1.1",
     "babel-plugin-istanbul": "^4.1.4",
     "babel-plugin-react-intl": "^2.3.1",
@@ -132,36 +132,36 @@
     "conventional-github-releaser": "^2.0.0",
     "core-js": "^2.5.3",
     "cpx": "^1.5.0",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.8",
     "cssnano": "^3.10.0",
     "deepmerge": "^2.0.1",
-    "enzyme": "^3.2.0",
+    "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.13.1",
+    "eslint": "^4.15.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
+    "eslint-import-resolver-webpack": "^0.8.4",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-flowtype": "^2.40.1",
+    "eslint-plugin-flowtype": "^2.41.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "fetch-mock-forwarder": "^1.0.0",
-    "flow-bin": "^0.61.0",
+    "flow-bin": "^0.63.1",
     "husky": "^0.14.3",
     "intl": "^1.2.5",
-    "jest": "^22.0.3",
+    "jest": "^22.0.5",
     "jsuri": "^1.3.1",
     "leche": "^2.2.2",
     "lint-staged": "^6.0.0",
     "lodash": "^4.17.4",
-    "mocha": "^4.0.1",
+    "mocha": "^4.1.0",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^2.0.9",
-    "prettier": "^1.9.2",
-    "prettier-eslint-cli": "^4.6.1",
+    "postcss-loader": "^2.0.10",
+    "prettier": "^1.10.1",
+    "prettier-eslint-cli": "^4.7.0",
     "prop-types": "^15.6.0",
     "properties-parser": "^0.3.1",
     "raf": "^3.4.0",
@@ -171,18 +171,18 @@
     "react-measure": "^2.0.2",
     "react-modal": "^3.1.10",
     "react-tether": "^0.6.0",
-    "react-virtualized": "^9.14.1",
+    "react-virtualized": "^9.16.1",
     "regenerator-runtime": "^0.11.1",
     "sass-lint": "^1.12.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
     "stylelint": "^8.4.0",
     "stylelint-config-standard": "^18.0.0",
     "stylelint-order": "^0.8.0",
-    "uglifyjs-webpack-plugin": "^1.1.4",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-dev-server": "^2.9.7"
+    "webpack-bundle-analyzer": "^2.9.2",
+    "webpack-dev-server": "^2.10.1"
   },
   "peerDependencies": {
     "box-react-ui": "^21.2.3",

diff --git a/src/api/BaseUpload.js b/src/api/BaseUpload.js
@@ -13,7 +13,7 @@ class BaseUpload extends Base {
     file: File;
     overwrite: boolean;
     retryCount: number = 0;
-    retryTimeout: number;
+    retryTimeout: TimeoutID;
     errorCallback: Function;
 
     /**

diff --git a/src/api/PlainUpload.js b/src/api/PlainUpload.js
@@ -13,7 +13,6 @@ class PlainUpload extends BaseUpload {
     folderId: string;
     fileId: ?string;
     overwrite: boolean;
-    retryTimeout: number;
     successCallback: Function;
     errorCallback: Function;
     progressCallback: Function;

diff --git a/src/api/uploads/MultiputPart.js b/src/api/uploads/MultiputPart.js
@@ -36,7 +36,7 @@ class MultiputPart extends BaseMultiput {
     data: MultiputData;
     config: MultiputConfig;
     id: string;
-    retryTimeout: ?number;
+    retryTimeout: TimeoutID;
     blob: ?Blob;
     rangeEnd: number;
     startTimestamp: number;

diff --git a/src/api/uploads/MultiputUpload.js b/src/api/uploads/MultiputUpload.js
@@ -54,8 +54,8 @@ class MultiputUpload extends BaseMultiput {
     sessionId: string;
     totalUploadedBytes: number;
     sha1Worker: Worker;
-    createSessionTimeout: ?number;
-    commitSessionTimeout: ?number;
+    createSessionTimeout: TimeoutID;
+    commitSessionTimeout: TimeoutID;
     fileName: string;
     fileId: ?string;
     overwrite: boolean;

diff --git a/src/components/ContentSidebar/ContentSidebar.js b/src/components/ContentSidebar/ContentSidebar.js
@@ -26,7 +26,6 @@ type Props = {
     getPreviewer: Function,
     hasTitle: boolean,
     hasSkills: boolean,
-    hasDescription: boolean,
     hasProperties: boolean,
     hasMetadata: boolean,
     hasAccessStats: boolean,
@@ -57,7 +56,6 @@ class ContentSidebar extends PureComponent<Props, State> {
         getPreviewer: noop,
         hasTitle: false,
         hasSkills: false,
-        hasDescription: false,
         hasProperties: false,
         hasMetadata: false,
         hasAccessStats: false,
@@ -154,16 +152,9 @@ class ContentSidebar extends PureComponent<Props, State> {
      * @return {Boolean} true if we should fetch or render
      */
     shouldFetchOrRender(): boolean {
-        const {
-            hasSkills,
-            hasDescription,
-            hasProperties,
-            hasMetadata,
-            hasAccessStats,
-            hasClassification
-        }: Props = this.props;
+        const { hasSkills, hasProperties, hasMetadata, hasAccessStats, hasClassification }: Props = this.props;
 
-        return hasSkills || hasDescription || hasProperties || hasMetadata || hasAccessStats || hasClassification;
+        return hasSkills || hasProperties || hasMetadata || hasAccessStats || hasClassification;
     }
 
     /**
@@ -218,7 +209,6 @@ class ContentSidebar extends PureComponent<Props, State> {
             getPreviewer,
             hasTitle,
             hasSkills,
-            hasDescription,
             hasProperties,
             hasMetadata,
             hasAccessStats,
@@ -241,7 +231,6 @@ class ContentSidebar extends PureComponent<Props, State> {
                             ensurePrivacy={!!sharedLink}
                             hasTitle={hasTitle}
                             hasSkills={hasSkills}
-                            hasDescription={hasDescription}
                             hasProperties={hasProperties}
                             hasMetadata={hasMetadata}
                             hasAccessStats={hasAccessStats}

diff --git a/src/components/ContentSidebar/ContentSidebar.scss b/src/components/ContentSidebar/ContentSidebar.scss
@@ -1,6 +1,7 @@
 @import '../variables';
 
 .be.bcs {
+    display: flex;
     width: 340px;
 }
 

diff --git a/src/components/ContentSidebar/DetailsSidebar.js b/src/components/ContentSidebar/DetailsSidebar.js
@@ -5,27 +5,24 @@
  */
 
 import React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import messages from '../messages';
 import SidebarSection from './SidebarSection';
 import FileProperties from '../FileProperties';
 import SidebarContent from './SidebarContent';
 import SidebarSkills from './SidebarSkills';
 import type { BoxItem } from '../../flowTypes';
-import './DetailsSidebar.scss';
 
 type Props = {
     file: BoxItem,
     getPreviewer: Function,
     hasTitle: boolean,
     hasSkills: boolean,
-    hasDescription: boolean,
     hasProperties: boolean,
     hasMetadata: boolean,
     hasAccessStats: boolean,
     hasClassification: boolean,
-    ensurePrivacy: boolean,
-    intl: any
+    ensurePrivacy: boolean
 };
 
 /* eslint-disable jsx-a11y/label-has-for */
@@ -34,40 +31,26 @@ const DetailsSidebar = ({
     getPreviewer,
     hasTitle,
     hasSkills,
-    hasDescription,
     hasProperties,
     hasMetadata,
     hasAccessStats,
     hasClassification,
-    ensurePrivacy,
-    intl
+    ensurePrivacy
 }: Props) => {
-    if (!hasSkills && !hasDescription && !hasProperties && !hasMetadata && !hasAccessStats && !hasClassification) {
+    if (!hasSkills && !hasProperties && !hasMetadata && !hasAccessStats && !hasClassification) {
         return null;
     }
 
     return (
         <SidebarContent hasTitle={hasTitle} title={<FormattedMessage {...messages.sidebarDetailsTitle} />}>
-            {hasDescription && (
-                <div className='bcs-details-description'>
-                    <label>
-                        <FormattedMessage {...messages.sidebarDescription} />
-                        <textarea
-                            readOnly
-                            placeholder={intl.formatMessage(messages.sidebarDescriptionPlaceholder)}
-                            defaultValue={file.description}
-                        />
-                    </label>
-                </div>
-            )}
+            {hasSkills && <SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} />}
             {hasProperties && (
                 <SidebarSection title={<FormattedMessage {...messages.sidebarProperties} />}>
                     <FileProperties file={file} ensurePrivacy={ensurePrivacy} />
                 </SidebarSection>
             )}
-            {hasSkills && <SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} />}
         </SidebarContent>
     );
 };
 
-export default injectIntl(DetailsSidebar);
+export default DetailsSidebar;
diff --git a/src/components/ContentSidebar/DetailsSidebar.scss b/src/components/ContentSidebar/DetailsSidebar.scss
diff --git a/src/components/ContentSidebar/Sidebar.js b/src/components/ContentSidebar/Sidebar.js
@@ -8,7 +8,7 @@ import React, { PureComponent } from 'react';
 import { injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import PlainButton from 'box-react-ui/lib/components/plain-button/PlainButton';
-import DetailsSidebar from './DetailsSidebar';
+// import DetailsSidebar from './DetailsSidebar';
 import messages from '../messages';
 import type { BoxItem } from '../../flowTypes';
 import './Sidebar.scss';
@@ -58,7 +58,7 @@ class Sidebar extends PureComponent<Props, State> {
      * @inheritdoc
      */
     render() {
-        const { file, getPreviewer, intl }: Props = this.props;
+        const { intl }: Props = this.props;
         const { showSidebar }: State = this.state;
         const sidebarTitle = intl.formatMessage(messages.sidebarDetailsTitle);
 
@@ -84,7 +84,7 @@ class Sidebar extends PureComponent<Props, State> {
                         className={sidebarBtnClassName}
                     />
                 </div>
-                {!!file && showSidebar && <DetailsSidebar file={file} getPreviewer={getPreviewer} />}
+                {/* !!file && showSidebar && <DetailsSidebar file={file} getPreviewer={getPreviewer} /> */}
             </div>
         );
     }

diff --git a/src/components/ContentSidebar/SidebarContent.scss b/src/components/ContentSidebar/SidebarContent.scss
@@ -2,6 +2,7 @@
 
 .bcs-content {
     flex: 1;
+    position: relative;
 
     .bcs-title {
         font-size: 16px;

diff --git a/src/components/ContentSidebar/SidebarSection.scss b/src/components/ContentSidebar/SidebarSection.scss
@@ -12,13 +12,12 @@
     border-bottom: 1px solid $off-white;
     padding: 5px 0 10px;
     text-align: left;
-    text-decoration: none;
     width: 100%;
 
-    .btn-content {
-        cursor: pointer;
-        max-width: 250px;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    &:hover,
+    &:active,
+    &:focus {
+        border-bottom-color: $blue;
+        text-decoration: none;
     }
 }