magento/adobe-stock-integration

Magento Adobe Stock integration Community Project.

Adobe Stock Integration

Welcome to the Adobe Stock Integration community project!

Overview

Adobe Stock Integration provides a searchable interface in the Magento Admin to explore, preview and use stock images inside PageBuilder or WYSIWYG content. Magento Admin user will be able to access Adobe Stock from Media Gallery, search for images, save watermarked image preview and try it inside the content. The right fit image can be licensed through Adobe. Watermarked preview images will be replaced with licensed file in media storage and across all CMS content currently using the watermarked preview.

Documentation

• Complete documentation located on the project wiki pages:
  • Project roadmap contains information about project phases and stories for each phase
  • How to start local development described in the installation guide
  • How to run the project tests

Community Engineering Slack

To connect with Magento team and the Community, join us on the Magento Community Engineering Slack. If you are interested in joining Slack, or a specific channel, use our self signup link.

Adobe Stock Integration project slack channel: #adobe-stock

adobe-stock-integration's Issues

[Story #19] User controls access to Adobe Stock images from Admin Panel in ACL

Story

As a Merchant I want to control level of access that Admin users have to stock images

Business Value

control the level of spending on stock images

Preconditions

• Admin User is logged into Admin Panel
• Admin user created new role in Magento Admin

Acceptance Criteria

• User opens Resources tree and sees Adobe Stock Config node under Settings - Configuration - System Section.
• User includes this resource into the role. That will allow admin user with this role to set up an integration with Adobe stock
• User sees Adobe Stock node under Content - Elements - Media Gallery. This node has 2 child nodes:
  • Save preview images
  • License images
• User includes Save preview images resource into the role. This will allow admin user with the role assigned only search for stock images and same their previews into Media Gallery. License image is not accessible.
• If user doesn't select any of the 2 options, user with the role won't see the access to Adobe Stock from Media Gallery
• If user selects the parent node Adobe Stock, both child nodes get selected.

Provide ability to login via Adobe Stock oAuth: Backend

Description

• Show popup window with ability to login with Adobe credentials
• Implement callback endpoint to receive token information

Dependency

Current task has a dependency on the: Implement setup script for user metadata. Please, make sure that the mentioned task is done before starting any progress on this.

Documentation

App Design Document: : Save Licensed Image Design

QA notes

• Admin user has the ability to login via oAuth2 to Adobe Stock Image account
• Token for usage with Adobe Stock API received and persisted in the database

Fix typos in the namespace

Fix typo that causes an error during execution

[Story #8] User returns to the same state of image grid after saving image preview

Story

As a Merchant I want to return to the stock image search that I run last during my session in Admin Panel after I was navigated outside of it for Media Gallery or other activities.

Business Value

no need to run image search again after downloading image preview to browse other images in that search

Preconditions

• Admin User is logged into Admin Panel
• User searched for stock images
• User applied filters to image search
• User navigated to X page of search results
• User saved preview of the image
• User accesses Adobe Stock images from Media Gallery

Acceptance Criteria

• User sees search keywords and filters applied
• User lands to the same page of search results that they were at before leaving it
• User sees the image details opened

Implement filter for safe content attribute

Description

• Implement an offensive search filter UI element
• Implement offensive filter for the API endpoint on the backend

Documentation

Story: User filters safe content images
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by the offensive attribute

Render image attributes on the preview

Description

• Display preview attributes:
  • Creator
  • Dimensions
  • File type
  • Category
  • Stock id

Documentation

Story: User views the image details

QA notes

• User has the ability to view attributes in the preview mode.

System configuration

Description

• Define the required fields in the system configuration for Adobe Stock module
  • Enabled
  • x-api-key
• Make it possible to test connection with provided token

Documentation

Story: User configures Adobe Stock integration
Design document: Implementation Guide

QA notes

• Admin has the ability to view and modify the configuration for the Adobe Stock Integration module

Cleanup stock metadata after image delete action

Description

• Introduce new plugin to cleanup stock metadata after image delete action in media gallery

QA notes

• Save image to the media gallery via Adobe Stock Image
• Remove image from media gallery
• Image metadata should be removed

Admin user can search images by keywords

Description

Implement MFTF test to cover scenario: "User searches stock images by keywords"

Test steps

1. Before - Save Adobe Stock API credentials in Magento Admin
2. Before - LoginAsAdmin
3. Navigate to */cms/page/
4. Fill basic(test independent) data for CMS Page
5. User clicks "Insert Image..." Insert Image...
6. Assert that User searches for "popular" using keyboard input and mouse navigation and sees "that grid was updated by new images"
7. Assert that User searches for "0" using keyboard input and mouse navigation and sees "that grid was updated by new images"
8. Assert that User searches for "}:->""" using keyboard input and mouse navigation and sees "that filters were reset to initial state" and doesn't see "spinner loading, 'something went wrong' message"
9. Assert that User searches for "bluetooth true wireless headphones" using clipboard input and mouse navigation and sees "that grid was updated by new images"
10. Assert that User searches for "} { ] [ ) ( ~ ! @ # $ % ^ & ` | \ : " ; ' < > ? , . ⁄ - +" using clipboard input and mouse navigation and sees "that empty set was returned" and doesn't see "spinner loading, 'something went wrong' message"
11. Assert that User searches for "top secret" using keyboard input and keyboard navigation and sees "that grid was updated by new images"
12. Assert that User searches for "%0F" using keyboard input and keyboard navigation and sees "that filters were reset to initial state" and doesn't see "spinner loading, 'something went wrong' message"
13. Assert that User searches for "chest band heart rate" using clipboard input and mouse navigation and sees "that grid was updated by new images"
14. Assert that User searches for "mi band heart rate" using clipboard input and mouse navigation and sees "that grid was updated by new images" and doesn't see "spinner loading, 'something went wrong' message"
15. After - Remove Adobe Stock API credentials in Magento Admin
16. After - logout

Option 48 is missing in the images count per page drop down

Description

• Option 48 is missing in the images count per page drop down

Steps to reproduce:

1. Navigate to Content > Elements > Pages
2. Click Add New Page button
3. Fill Title with "Test CMS Page"
4. Expand the "Content" section
5. Fill Content Heading with "Test Content Heading"
6. Click "Insert Image..." button
7. Click "Search Adobe Stock" button
8. Choose option 48 in the "per page" dropdown

Expected result:

• Option 48 is available in the "per page" dropdown

Actual result

• Option 48 is not available in the "per page" dropdown

Introduce image listing UI component

Description

Implement MFTF test to cover scenario: "Masonry Grid Component"

Test steps

1. ToDo

Implement setup script for user metadata

Documentation

Story: User saves image preview
App Design Documen: Save preview image design

Description

• Introduce new tables in the database for user data
• Tables structure is described in Database document

QA notes

• Table created according to the design.

Preserve the image grid state including the expanded image

Description

Images grid filters, paging, sorting, search query and the expanded image (if any) state should be preserved and recreated the next time admin opens the image grid

Documentation

Story: User returns to the same state of image grid after saving image preview

Depends on

Expand preview image on thumbnail click

Expand preview image on thumbnail click

Description

• Implement new expandable UI column component for image listing
• Use thumbnail_500 image URL for preview
• Implement switching between images in the preview mode
• Cover changes with MFTF test

Documentation

Story: User views the image details

QA notes

User has the ability to click on the image in the listing and view large image preview.
User can see image attributes

[Story #10] User filters images by orientation

Story

As a Merchant I want to filter stock images by their orientations (horizontal, vertical, square, panoramic) to narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter by Orientation
• User sees the default filter "All" applied. It doesn't filter search result
• User sees 4 other filtering options available:
• • horizontal
• • vertical
• • square
• • panoramic
• User selects new value for the filter and applies it
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

[Story #5] Masonry Grid Component

Story

As a Developer, I want a configurable and extendable grid component that allows to display images using masonry layout in a responsive grid, so that I can use it in Magento extensions or core functionality

Business Value

unified admin user experience, reduce code duplication, save time on development by reusing existing grid components in Magento UI library

Acceptance Criteria

• Masonry grid component displays images and attributes associated with them. Some examples of successful: implementation:

  • Responsive grid prototype
  • Building the Image Grid from Google Photos
  • Building the Google Photos Web UI

• Responsiveness achieved by resizing images and wrapping them. Space between images always remains the same.

  • Default Space between images - 20px (UI component configuration)
  • Default maximum image height - 240px (UI component configuration)

• Grid supports pagination

• 3d party developer can extend grid component with the following:

  • show image attributes on user action
  • display selected attributes on top of the image (overlay)
  • add call to action buttons on top of the images (overlay)

Implement overlay UI component for Masonry grid image

Description

• Implement an overlay UI component for Masonry grid image

Documentation

Story: Masonry Grid Component
App Design Document: Adobe Stock Image Search Design

QA notes

• Extension developer can display selected attributes on top of the image (overlay)

Filters were not reset to its original state but message "Something went wrong with processing current custom view and filters have been reset to its original state. Please edit filters then click apply." appeared

Preconditions:

1. php bin/magento config:set adobe_stock/integration/enabled 1
2. php bin/magento config:set adobe_stock/integration/api_key <key>
3. php bin/magento config:set cms/wysiwyg/enabled disabled
4. php bin/magento config:set admin/security/admin_account_sharing 1
5. php bin/magento config:set admin/security/use_form_key 0
6. php bin/magento cache:flush

Steps to reproduce:

1. Navigate to Content > Elements > Pages
2. Click Add New Page button
3. Fill Title with "Test CMS Page"
4. Expand the "Content" section
5. Fill Content Heading with "Test Content Heading"
6. Click "Insert Image..." button
7. Click "Search Adobe Stock" button
8. Set focus on the Search bar
9. Check the results for the next search queries:

• %
• "a
• "%

Expected result:

✔️ 1. For search query % returns images
✔️ 2. For search query "a returns images
✔️ 3. For search query "% spinner knows what to do if error came instead of images
✔️ 4. For search query "% filters have been reset to its original state

Actual result

✔️ 1. For search query % returns images
✔️ 2. For search query "a returns images
❌ 3. For search query "% spinner will continue to work while the page is not reloaded by Admin
❌ 4. For search query "% filters haven't been reset to its original state
❌ 5. For search query "% the spinner will continue to work even after X (Close) button is clicked and slide out panel revealed again

Related to #23

[Story #9] User filters images by type

Story

As a Merchant I want to filter stock images by media type (photos, illustrations) to narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter by Subcategory
• User sees the default filter "All" applied. It displays both photos and images in search result
• User sees 2 other filtering options available:

• photos: only photographies are displayed in the image search result
• illustrations: only illustrations are displayed in the image search result

• User selects new value for the filter and applies it
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

[Story #16] User sorts the order of images in the grid

Story

As a Merchant I want to sort stock images returned in search result to change the order they displayed on the page and get more relevant images on top

Business Value

ability to control the order of images displayed

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User sees images by Relevance by default. It sorts images by how closely they match search request, closest matches first.
• User sees other options sorting available:
  • Most recent (creation) - Creation date in descending order (newest first).
  • Popularity (popularity) - In descending order by the number of views by all users.
  • Downloads (nb_downloads) - In descending order by the number of downloads by all users since the asset was added to Adobe Stock.
  • Undiscovered (undiscovered) - Starting with assets that have not commonly been viewed or downloaded.
• User updates the selection
• User sees the order of the images updated on the page
• User sees that the selection is retained any time they come back to the page

Test issue

Test issue

Implement search filter for the price attribute

Description

• Implement price search filter UI element
• Implement price filter for the API endpoint on the backend

Documentation

Story: User filters images by price
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by price attribute

[Story #15] User chooses the number of images to display on the page

Story

As a Merchant I want to choose number of stock images that is displayed on one page

Business Value

ability to optimize page load

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User sees 32 images selected to display per page by default
• User sees 2 other options available: 48, 64
• User updates the selection
• User sees the number of images updated on the page
• User sees that the selection is retained any time they come back to the page

[Story #18] User sees stock image attributes localized

Story

As a Merchant I want search for stock images using the same language I have selected for Magento Admin Panel and see search results localized

Business Value

non-english speakers can use stock image search, unified language across Magento Admin

Preconditions

• Magento Admin Panel is localized language other than English
• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User views stock image details and sees attributes values in the same language that selected in Magento Admin Panel if these localized values exist in Stock
• User searches for stock images using keywords in the same language selected in Magento Admin panel and sees search returning results
• User saves image preview and localized image attribute values ( if they exist in Stock, are saved to the DB)
• User sees messages that come from Stock API localized (success, error, info messages)

[Story #2] User searches Adobe Stock images by keywords

Story

As a Merchant I want to search stock images by keywords inside Magento Admin Panel.

Business Value

no need to switch between systems (Stock and Magento) to find relevant stock images

Preconditions

Admin User is logged into Admin Panel
Admin User accessed stock images inside Media Gallery

Acceptance Criteria

• User inserts search phrase, confirms the input and sees images updated with the search result
• If search returns no images matching search phrase, user sees the message
• User sees total number of images matching search criteria and number of images on the page
• User sees up to 32 images on the page
• User can use pagination to get to next/previous page
• If Adobe Stock server is not responding, user sees timeout message
  
  Search started

Search results

Search no results

Issues related to the story

• Admin user can search images by keywords
• Introduce pagination for image listing UI component

[Story #4] User saves image preview

Story

As a Merchant I want to save stock image preview directly into Magento Media Storage to be able to insert it into website content

Business Value

no need manually download image preview locally and re-upload it into Magento Media Storage

Preconditions

• Admin User is logged into Admin Panel
• Admin User found the stock image to download preview

Acceptance Criteria

• User saves image preview
• User sees the image uploaded into the currently selected folder of Magento Media Gallery
• The image is selected
• The following image attributes associated with the stock image are saved into Magento DB:
  • id - Asset's unique identifier
  • title - Asset's title
  • creator_id - Unique identifier for the asset's creator
  • creator_name - Asset creator's name
  • creation_date - Date on which the asset was created
  • is_licensed - license applied
  • width - Width in pixels of the asset's complementary (unlicensed) image
  • height - Height in pixels of the asset's complementary (unlicensed) image
  • category - JSON structure with information about the category assigned to the asset
  • category{id}
  • category{name}
  • keywords - List of keywords for the asset
  • media_type - custom Magento attribute. Value is based on stock media_type_id.
  • content-type - Mime type of the asset's content. E.g.image/jpeg
• If Adobe Stock server is not responding, user sees timeout message

[Story #11] User filters images by price

Story

As a Merchant I want to filter stock images by their premium level and narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter by Price
• User sees the default filter "All" applied. It doesn't filter search result
• User sees other filtering options available:
• • standard
• • premium
• User selects new value for the filter and applies it
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

Implement setup script for image metadata

Documentation

Story: User saves image preview
App Design Documen: Save preview image design

Description

• Introduce new tables in the database as image metadata storage
• Tables structure is described in Database document

QA notes

• Table created according to the design.

Add explanation message to the configuration

Description

• Add tooltip with a message that explains how to get credentials for the integration.
  Similar tooltip already implemented in the admin panel, please, see Configuration for PayPal Express

Message text: "Configure Adobe Stock account on the 'Adobe.io to retrieve API key"

Documentation

Story: User configures Adobe Stock integration

QA notes

• User sees a message that explains how to get these credentials with a link to Adobe.io

Implement content type search filter

Description

• Implement content type search filter UI element
• Implement content type filter for the API endpoint on the backend

Documentation

Story: User filters images by type
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by the content type attribute

Implement search filter for the "isolated" attribute

Description

• Implement "isolated" search filter UI element
• Implement "isolated" filter for the API endpoint on the backend

Documentation

Story: User filters isolated image only
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by "isolated" attribute

Admin user sees default images on the slide out panel

Description

• Define Magento Search API interface
• Implement Magento Search API endpoint stub
• Implement basic grid data provider that uses endpoint stub
• Basic rendering on default admin UI component grid

Documentation

Story: User accesses stock images from Magento Admin
App Design Document: Adobe Stock Image Search Design

Dependency

Current task has a dependency on the: Admin user access stock images from Magento Media Gallery. Please, make sure that the mentioned task is done before starting any progress on this.

QA notes

• 32 images are shown when the slide panel is opened

[Story #3] User views the image details

Story

As a Merchant I want to view stock image attributes inside Magento Admin Panel when I search for the stock images

Business Value

provide information for user to take informative decision if the stock image is the right fit for their purposes

Preconditions

• Admin User is logged into Admin Panel
• Admin User searched stock images inside Media Gallery
• Admin User sees the images matching search request

Acceptance Criteria

• User selects the image in search results to view details
• User sees following image attributes without page reload:
• • thumbnail_500 - Extra large (XL) (500 px) image returned with watermark.
• • id - Asset's unique identifier
• • title - Asset's title
• • content-type - Mime type of the asset's content
• • width - Width in pixels of the full-sized original asset
• • height - Height in pixels of the full-sized original asset
• User sees selected image in the search result
• User selects next image in the grid to view details of and sees the image attributes updated.
• User scrolls down the page and sees image details going up
• User hides image details by closing them or selecting this image in the grid once again

Issues related to the story

• Expand image view on image click
• Render image attributes on the preview

[Story #7] Adobe and Magento teams views report on Adobe Stock integration KPIs

Story

As a Magento/Adobe product manager I want to understand the actual level of interest that Magento merchants have to integrated stock images by tracking the number of search requests, saved preview images and licensed images via Adobe Stock-Magento integration.

Business Value

collect metrics to evaluate product success

Acceptance Criteria

• All requests to Adobe Stock that merchants send need to include static identifier in the header of request.
• The value of this identifier needs to be hardcoded

[Story #1] User accesses stock images from Magento Admin

Story

As a Merchant, I want to access and browse Adobe stock images inside Magento Admin Panel through the fully integrated business friendly user interface. Images include photos and illustrations.

Business Value

no need to switch between different systems (Adobe Stock and Magento) to access stock images

Preconditions

• User logged into Magento Admin Panel
• Adobe Stock API credentials are stored in Magento.

Acceptance Criteria

• Admin user access stock images from Magento Media Gallery. If API credentials are missing, user can't access stock images.
• Admin user sees the most recent stock images
• Admin user sees 32 images per page
• Admin user uses pagination to see the next/previous page

Issues related to the story

• Admin user access stock images from Magento Media Gallery
• Admin user sees default images on the slide out panel
• Search API endpoint implementation
• Introduce image listing UI component
• Introduce pagination for image listing UI component

Return value of Magento\AdobeStockAsset\Model\Config::getApiKey() must be of the type string, null returned

Preconditions:

1. php bin/magento config:set adobe_stock/integration/enabled 1
2. php bin/magento config:set adobe_stock/integration/api_key <key>
3. php bin/magento config:set cms/wysiwyg/enabled disabled
4. php bin/magento config:set admin/security/admin_account_sharing 1
5. php bin/magento config:set admin/security/use_form_key 0
6. php bin/magento cache:flush
7. php bin/magento config:set adobe_stock/integration/api_key ""
8. php bin/magento cache:flush

Steps to reproduce:

1. Navigate to Content > Elements > Pages
2. Click Add New Page button
3. Fill Title with "Test CMS Page"
4. Expand the "Content" section
5. Fill Content Heading with "Test Content Heading"
6. Click "Insert Image..." button
7. Click "Search Adobe Stock" button

Expected result:

✔️ 1. Step 7 is impossible - "Search Adobe Stock" is not visible on the page
✔️ 2. or/and "Invalid API key" alert appears because of validation.
(Link to settings page is +1 for usability:{{base_url}}/admin/admin/system_config/edit/section/system/group/adobe_stock_integration/)

Actual result

❌ 1. Return value of Magento\AdobeStockAsset\Model\Config::getApiKey() must be of the type string, null returned

Implement search filter for the "orientation" attribute

Description

• Implement "orientation" search filter UI element
• Implement "orientation" filter for the API endpoint on the backend

Documentation

Story: User filters images by orientation
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by "orientation" attribute

Introduce pagination for image listing UI component

Description

• Implement pagination for image listing data provider
• Implement UI elements to use pagination on the listing
• Integrate pagination logic to request builder (limit, offset)
• Cover changes with unit, integration tests

Documentation

Story: User searches stock images by keywords
Design document: Adobe Stock Image Search Design

QA notes

• User has the ability to use pages during images view

[Story #17] User navigates to next previous image from the currently viewed

Story

As a Merchant I want a simple way to navigate though the details of the images in search result

Business Value

better UX, unification with native Adobe Stock interface

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images
• Admin User views image details

Acceptance Criteria

• User sees controls to view next and previous images in search result
• User activates viewing next\previous image details in the search result
• User sees image preview and image attributes updated. Any other elements on the page aren't reloaded
• User sees details of the next\previous image in search result.

Implement ability to sort search results

Description

• Implement the ability to sort search results by the following attributes:
  • relevance
  • creation
  • popularity
  • nb_downloads
  • undiscovered

Documentation

Story: User sorts the order of images in the grid
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to sort results in by different parameters

[Story #14] User filters images by image color

Story

As a Merchant I want to filter stock images by their main color and narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter by Color
• User sees no filter applied by default
• User selects color value with color picker or inserts it HEX format
• User applies filter
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

[Story #13] User filters isolated image only

Story

As a Merchant I want to find stock images where subject is isolated from the background by being on a uniformly colored background to narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter Isolated Assets
• User sees this filter not applied by default
• User selects to find isolated images only and applies this filter
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

Test Issue

test

Uncaught Error: You cannot apply bindings multiple times to the same element.

Preconditions:

1. php bin/magento config:set adobe_stock/integration/enabled 1
2. php bin/magento config:set adobe_stock/integration/api_key <key>
3. php bin/magento config:set cms/wysiwyg/enabled disabled
4. php bin/magento config:set admin/security/admin_account_sharing 1
5. php bin/magento config:set admin/security/use_form_key 0
6. php bin/magento cache:flush

Steps to reproduce:

1. Navigate to Content > Elements > Pages
2. Click Add New Page button
3. Fill Title with "Test CMS Page"
4. Expand the "Content" section
5. Fill Content Heading with "Test Content Heading"
6. Click "Insert Image..." button
7. Click "Cancel"
8. Click "Insert Image..." button

Expected result:

✔️ JS works as expected

Actual result

❌ JS error in knockout.js::3287

Uncaught Error: You cannot apply bindings multiple times to the same element.
    at applyBindingsToNodeInternal (knockout.js:3287)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3233)
    at Object.ko.applyBindings (knockout.js:3444)
    at _super (wrapper.js:73)
    at Object.applyBindings (bound-nodes.js:120)
    at Object.applyBindings (wrapper.js:78)
    at bindings.js:84
    at Array.forEach (<anonymous>)
    at jQuery.fn.init.$.fn.applyBindings (bindings.js:81)
    at panel.js:18

	applyBindingsToNodeInternal	@	knockout.js:3287
	applyBindingsToNodeAndDescendantsInternal	@	knockout.js:3233
	ko.applyBindings	@	knockout.js:3444
	_super	@	wrapper.js:73
	applyBindings	@	bound-nodes.js:120
	(anonymous)	@	wrapper.js:78
	(anonymous)	@	bindings.js:84
	$.fn.applyBindings	@	bindings.js:81
	(anonymous)	@	panel.js:18
	(anonymous)	@	main.js:31
	execCb	@	require.js:1650
	context.execCb	@	resolver.js:145
	check	@	require.js:866
	enable	@	require.js:1143
	init	@	require.js:774
	(anonymous)	@	require.js:1416
	setTimeout (async)
	req.nextTick	@	require.js:1755
	localRequire	@	require.js:1405
	window.require	@	mixins.js:245
	init	@	main.js:24
	(anonymous)	@	main.js:96
	.each..forEach	@	underscore.js:150
	(anonymous)	@	main.js:79
	apply	@	main.js:76
	(anonymous)	@	mage.js:98
	dispatch	@	jquery.js:5232
	elemData.handle	@	jquery.js:4884
	trigger	@	jquery.js:5136
	jQuery.event.trigger	@	jquery-migrate.js:633
	(anonymous)	@	jquery.js:5866
	each	@	jquery.js:376
	each	@	jquery.js:142
	trigger	@	jquery.js:5865
	(anonymous)	@	browser.js:76
	fire	@	jquery.js:3238
	fireWith	@	jquery.js:3368
	done	@	jquery.js:9846
	callback	@	jquery.js:10317
	XMLHttpRequest.send (async)
	send	@	jquery.js:10260
	ajax	@	jquery.js:9744
	openDialog	@	browser.js:69
	onclick	@	(index):1

Important

The bug caused by performing two requests for gallery data retrieving. Should be fixed in Magento 2 open source edition. We need to eliminate the second redundant request.

Define the error message in case when Adobe Stock API credentials are missing

Description

• Define the error message in case when Adobe Stock API credentials are missing

Documentation

Story: User accesses stock images from Magento Admin
App Design Document: Adobe Stock Image Search Design

QA notes

• User sees the message "Adobe Stock API not configured. Please, proceed to Configuration -> System -> Adobe Stock Integration" to set up integration.

[Story #12] User filters safe content images

Story

As a Merchant I want to filter stock images to exclude adult content from search result and narrow search result to images that better fit my needs

Business Value

Better stock image search relevance

Preconditions

• Admin User is logged into Admin Panel
• Admin User sees stock images

Acceptance Criteria

• User opens image grid filtering
• User sees filter Safe Search
• User sees adult content is not included in search result by default
• User updates the filter to include adult content and applies it
• User sees updated search results with images that match filtering
• User sees image grid filter collapses and selected filter displays
• If filter returns zero results, user sees the message

Admin user access stock images from Magento Media Gallery

Description

• Add button to the Media Gallery slide out panel. Button caption: "Search Adobe Stock"
• Implement Slide out panel that opens by click on the "Search Adobe Stock" button

Documentation

Story: User accesses stock images from Magento Admin
App Design Document: Adobe Stock Image Search Design

QA notes

• Button "Search Adobe Stock" is present on the Media Gallery slide out panel
• Admin user has the ability to open Adobe Stock slide out panel
• Admin user has the ability to close Adobe Stock slide out panel

Search API endpoint implementation

Description

• Define an interface for the API endpoint
• Implement request builder
• Define request builder configuration is defined in XML and extensible for 3d party developers:
  • Filters configuration
  • Sorting configuration
  • Pagination configuration
• Define GET web-api endpoint for search
• Cover endpoints with the unit, web-api integration tests

Documentation

Story: User accesses stock images from Magento Admin
Design document: Adobe Stock Image Search Design

QA notes

• User can view 32 images from Adobe Stock
• Tests are passing

Implement search filter for the "colors" attribute

Description

• Implement "colors" search filter UI element
• Implement "colors" filter for the API endpoint on the backend

Documentation

Story: User filters images by image color
App Design Document: Adobe Stock Image Search Design

QA notes

• User has the ability to filter results by "colors" attribute

[Story #6] User configures Adobe Stock integration

Story

As a Merchant I want to configure Adobe Stock integration on my Magento instance

Business Value

no need to maintain API credentials on Magento side

Preconditions

• Admin User is logged into Admin Panel
• User configured new Adobe Stock integration on adobe.io console

Acceptance Criteria

• User goes Media Gallery and opens Adobe Stock. User sees message that Adobe Stock disabled and API is missing with the link to Store-Configuration-Advanced-System. User clicks the link and navigates to Adobe Stock Integration configuration options
• User enables Adobe Stock
• User sees the following required fields in empty state:
  • API Keys (x-api-key)
• User sees a message that explains how to get these credentials with a link to Adobe.io
• User copies API key generated on Adobe.io side and inserts it into the API key field
• User sees a message that API key is valid. If user inserted wrong API key, error message displayed. Configuration can't be saved with not valid API key
• User copies name that they chose for the integration when created it on adobe.io console
• User saves configuration
• If API key is invalid, user sees message about that next the API Keys field. Configuration is saved with the wrong key
• User goes Media Gallery and opens Adobe Stock. If API key is invalid, user sees message about that. No image search possible.

https://xd.adobe.com/view/0a8fc470-497b-4fd6-4043-62560c21d8db-7cbe/screen/bf0d5d64-e91b-4b77-9926-a3ca7946d808/Configuration