Simple Payments: restrict image sources available in Media Library (#24797)

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

Author: vindl

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
 					/>
 				);