add private media library for integrations

src/components/MediaLibrary/MediaLibrary.css

@@ -96,3 +96,25 @@
   overflow-wrap: break-word;
   line-height: 1.3 !important;
 }
+
+.nc-mediaLibrary-dialogPrivate {
+  background-color: var(--backgroundAltColor);
+
+  & .nc-mediaLibrary-title,
+  & .nc-mediaLibrary-emptyMessage,
+  & .nc-mediaLibrary-paginatingMessage,
+  & h1 {
+    color: var(--textFieldBorderColor);
+  }
+
+  & .nc-mediaLibrary-card,
+  & .nc-mediaLibrary-searchInput {
+    background-color: var(--textFieldBorderColor);
+  }
+
+  & button:disabled,
+  & label[disabled] {
+    background-color: rgba(217, 217, 217, 0.15);
+  }
+}
+

src/components/MediaLibrary/MediaLibrary.js

@@ -48,6 +48,10 @@ class MediaLibrary extends React.Component {
     if (isOpening) {
       this.setState({ selectedFile: {}, query: '' });
     }
+
+    if (isOpening && (this.props.privateUpload !== nextProps.privateUpload)) {
+      this.props.loadMedia({ privateUpload: nextProps.privateUpload });
+    }
   }
 
   /**
@@ -111,7 +115,7 @@ class MediaLibrary extends React.Component {
      */
     event.stopPropagation();
     event.preventDefault();
-    const { loadMedia, persistMedia, privateUpload } = this.props;
+    const { persistMedia, privateUpload } = this.props;
     const { files: fileList } = event.dataTransfer || event.target;
     const files = [...fileList];
     const file = files[0];
@@ -121,7 +125,7 @@ class MediaLibrary extends React.Component {
      * improved in the future, but isn't currently resulting in noticeable
      * performance/load time issues.
      */
-    await persistMedia(file, privateUpload);
+    await persistMedia(file, { privateUpload });
     this.scrollToTop();
   };
 
@@ -143,20 +147,20 @@ class MediaLibrary extends React.Component {
    */
   handleDelete = () => {
     const { selectedFile } = this.state;
-    const { files, deleteMedia } = this.props;
+    const { files, deleteMedia, privateUpload } = this.props;
     if (!window.confirm('Are you sure you want to delete selected media?')) {
       return;
     }
     const file = files.find(file => selectedFile.key === file.key);
-    deleteMedia(file)
+    deleteMedia(file, { privateUpload })
       .then(() => {
         this.setState({ selectedFile: {} });
       });
   };
 
   handleLoadMore = () => {
-    const { loadMedia, dynamicSearchQuery, page } = this.props;
-    loadMedia({ query: dynamicSearchQuery, page: page + 1 });
+    const { loadMedia, dynamicSearchQuery, page, privateUpload } = this.props;
+    loadMedia({ query: dynamicSearchQuery, page: page + 1, privateUpload });
   };
 
   /**
@@ -167,8 +171,9 @@ class MediaLibrary extends React.Component {
    * so this handler has no impact.
    */
   handleSearchKeyDown = async (event) => {
-    if (event.key === 'Enter' && this.props.dynamicSearch) {
-      await this.props.loadMedia({ query: this.state.query })
+    const { dynamicSearch, loadMedia, privateUpload } = this.props;
+    if (event.key === 'Enter' && dynamicSearch) {
+      await loadMedia({ query: this.state.query, privateUpload })
       this.scrollToTop();
     }
   };
@@ -216,6 +221,7 @@ class MediaLibrary extends React.Component {
       hasNextPage,
       page,
       isPaginating,
+      privateUpload,
     } = this.props;
     const { query, selectedFile } = this.state;
     const filteredFiles = forImage ? this.filterImages(files) : files;
@@ -236,7 +242,7 @@ class MediaLibrary extends React.Component {
       <Dialog
         isVisible={isVisible}
         onClose={this.handleClose}
-        className="nc-mediaLibrary-dialog"
+        className={c('nc-mediaLibrary-dialog', { 'nc-mediaLibrary-dialogPrivate': privateUpload })}
         footer={
           <MediaLibraryFooter
             onDelete={this.handleDelete}
@@ -251,7 +257,10 @@ class MediaLibrary extends React.Component {
           />
         }
       >
-        <h1 className="nc-mediaLibrary-title">{forImage ? 'Images' : 'Assets'}</h1>
+        <h1 className="nc-mediaLibrary-title">
+          {privateUpload ? 'Private ' : null}
+          {forImage ? 'Images' : 'Assets'}
+        </h1>
         <input
           className="nc-mediaLibrary-searchInput"
           value={query}

src/components/Widgets/FileControl.js

@@ -45,7 +45,7 @@ export default class FileControl extends React.Component {
 
   handleClick = (e) => {
     const { field, onOpenMediaLibrary } = this.props;
-    return onOpenMediaLibrary({ controlID: this.controlID, privateUpload: field.private });
+    return onOpenMediaLibrary({ controlID: this.controlID, privateUpload: field.get('private') });
   };
 
   renderFileName = () => {

src/components/Widgets/ImageControl.js

@@ -43,7 +43,7 @@ export default class ImageControl extends React.Component {
 
   handleClick = (e) => {
     const { field, onOpenMediaLibrary } = this.props;
-    return onOpenMediaLibrary({ controlID: this.controlID, forImage: true, privateUpload: field.private });
+    return onOpenMediaLibrary({ controlID: this.controlID, forImage: true, privateUpload: field.get('private') });
   };
 
   renderFileName = () => {