Simple Payments: restrict image sources available in Media Library (A…

…utomattic#24797)

This temoporarily removes Google Photos and Free Photo Library as
options from Simple Payments Media Library selection.

client/components/dialog/style.scss

@@ -28,7 +28,7 @@
 }
 
 .dialog__backdrop.is-hidden {
- background-color: rgba( white, 0 );
+ background-color: transparent;
 }
 
 .dialog.card {

client/components/tinymce/plugins/simple-payments/dialog/product-image-picker.jsx

@@ -90,7 +90,7 @@ class ProductImagePicker extends Component {
  role="button"
  tabIndex={ 0 }
  >
- <ProductImage siteId={ siteId } imageId={ this.props.input.value } showEditIcon={ true } />
+ <ProductImage siteId={ siteId } imageId={ this.props.input.value } showEditIcon />
  <RemoveButton onRemove={ this.removeCurrentImage } />
  </div>
  );
@@ -114,6 +114,7 @@ class ProductImagePicker extends Component {
  enabledFilters={ [ 'images' ] }
  visible={ isSelecting }
  isBackdropVisible={ false }
+ disabledDataSources={ [ 'pexels', 'google_photos' ] }
  labels={ {
  confirm: translate( 'Add' ),
  } }

client/my-sites/media-library/filter-bar.jsx

@@ -6,7 +6,7 @@
 
 import React, { Component } from 'react';
 import { localize } from 'i18n-calypso';
-import { identity, includes, noop, pull } from 'lodash';
+import { identity, includes, noop, pull, union } from 'lodash';
 import PropTypes from 'prop-types';
 
 /**
@@ -40,6 +40,7 @@ export class MediaLibraryFilterBar extends Component {
  post: PropTypes.bool,
  isConnected: PropTypes.bool,
  disableLargeImageSources: PropTypes.bool,
+ disabledDataSources: PropTypes.arrayOf( PropTypes.string ),
  };
 
  static defaultProps = {
@@ -53,6 +54,7 @@ export class MediaLibraryFilterBar extends Component {
  post: false,
  isConnected: true,
  disableLargeImageSources: false,
+ disabledDataSources: [],
  };
 
  getSearchPlaceholderText() {
@@ -175,13 +177,17 @@ export class MediaLibraryFilterBar extends Component {
  }
 
  render() {
+ const disabledSources = this.props.disableLargeImageSources
+ ? union( this.props.disabledDataSources, largeImageSources )
+ : this.props.disabledDataSources;
+
  // Dropdown is disabled when viewing any external data source
  return (
  <div className="media-library__filter-bar">
  <DataSource
  source={ this.props.source }
  onSourceChange={ this.props.onSourceChange }
- disabledSources={ this.props.disableLargeImageSources ? largeImageSources : [] }
+ disabledSources={ disabledSources }
  />
 
  <SectionNav

client/my-sites/media-library/index.jsx

@@ -63,6 +63,7 @@ class MediaLibrary extends Component {
  scrollable: PropTypes.bool,
  postId: PropTypes.number,
  disableLargeImageSources: PropTypes.bool,
+ disabledDataSources: PropTypes.arrayOf( PropTypes.string ),
  };
 
  static defaultProps = {
@@ -72,6 +73,7 @@ class MediaLibrary extends Component {
  scrollable: false,
  source: '',
  disableLargeImageSources: false,
+ disabledDataSources: [],
  };
 
  componentWillMount() {
@@ -209,6 +211,7 @@ class MediaLibrary extends Component {
  isConnected={ isConnected( this.props ) }
  post={ !! this.props.postId }
  disableLargeImageSources={ this.props.disableLargeImageSources }
+ disabledDataSources={ this.props.disabledDataSources }
  />
  { content }
  </div>

client/post-editor/media-modal/index.jsx

@@ -82,6 +82,7 @@ export class EditorMediaModal extends Component {
  resetView: PropTypes.func,
  postId: PropTypes.number,
  disableLargeImageSources: PropTypes.bool,
+ disabledDataSources: PropTypes.arrayOf( PropTypes.string ),
  };
 
  static defaultProps = {
@@ -98,6 +99,7 @@ export class EditorMediaModal extends Component {
  imageEditorProps: {},
  deleteMedia: () => {},
  disableLargeImageSources: false,
+ disabledDataSources: [],
  };
 
  constructor( props ) {
@@ -610,6 +612,7 @@ export class EditorMediaModal extends Component {
  mediaLibrarySelectedItems={ this.props.mediaLibrarySelectedItems }
  postId={ this.props.postId }
  disableLargeImageSources={ this.props.disableLargeImageSources }
+ disabledDataSources={ this.props.disabledDataSources }
  scrollable
  />
  );