[IMP] web_editor, web_unsplash: alternate unsplash and illustrations

Before this commit, all search result illustrations were displayed
before the Unsplash images.

This commit makes the search result images from Unsplash and the
illustrations alternate, beginning with the first Unsplash image.
The existing attachment results remain in front.

task-3060679

closes odoo/odoo#111481

Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>

addons/web_editor/static/src/components/media_dialog/image_selector.xml

@@ -11,6 +11,20 @@
     </div>
 </t>
 
+<t t-name="web_editor.ExternalImage" owl="1">
+    <t t-if="record.mediaType == 'libraryMedia'">
+        <AutoResizeImage author="record.author"
+            src="record.thumbnail_url"
+            authorLink="record.author_link"
+            title="record.tooltip"
+            altDescription="record.tooltip"
+            minRowHeight="MIN_ROW_HEIGHT"
+            selected="this.selectedMediaIds.includes(record.id)"
+            onImageClick="() => this.onClickMedia(record)"
+            onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    </t>
+</t>
+
 <t t-name="web_editor.ImagesListTemplate" owl="1">
     <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0">
         <t t-if="!hasContent and !isFetching">
@@ -42,16 +56,8 @@
                 </t>
             </t>
             <t id="o_we_media_library_images" t-if="['all', 'media-library'].includes(state.searchService)">
-                <t t-foreach="state.libraryMedia" t-as="media" t-key="media.id">
-                    <AutoResizeImage author="media.author"
-                        src="media.thumbnail_url"
-                        authorLink="media.author_link"
-                        title="media.tooltip"
-                        altDescription="media.tooltip"
-                        minRowHeight="MIN_ROW_HEIGHT"
-                        selected="this.selectedMediaIds.includes(media.id)"
-                        onImageClick="() => this.onClickMedia(media)"
-                        onLoaded="(imgEl) => this.onImageLoaded(imgEl, media)"/>
+                <t t-foreach="state.libraryMedia" t-as="record" t-key="record.id">
+                    <t t-call="web_editor.ExternalImage"/>
                 </t>
             </t>
             <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->

addons/web_unsplash/static/src/components/media_dialog/image_selector.js

@@ -107,6 +107,24 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
         return this._super() || this.state.isFetchingUnsplash;
     },
 
+    get combinedRecords() {
+        /**
+         * Creates an array with alternating elements from two arrays.
+         *
+         * @param {Array} a
+         * @param {Array} b
+         * @returns {Array} alternating elements from a and b, starting with
+         *     an element of a
+         */
+        function alternate(a, b) {
+            return [
+                a.map((v, i) => i < b.length ? [v, b[i]] : v),
+                b.slice(a.length),
+            ].flat(2);
+        }
+        return alternate(this.state.unsplashRecords, this.state.libraryMedia);
+    },
+
     // It seems that setters are mandatory when patching a component that
     // extends another component.
     set canLoadMore(_) {},

addons/web_unsplash/static/src/components/media_dialog/image_selector.xml

@@ -34,20 +34,28 @@
     </div>
 </t>
 
+<t t-inherit="web_editor.ExternalImage" t-inherit-mode="extension">
+    <xpath expr="//t[@t-if]" position="after">
+        <t t-elif="record.mediaType == 'unsplashRecord'">
+            <AutoResizeImage src="record.url"
+                author="record.user.name"
+                authorLink="record.user.links.html"
+                name="record.user.name"
+                title="record.user.name"
+                altDescription="record.alt_description"
+                selected="this.selectedRecordIds.includes(record.id)"
+                onImageClick="() => this.onClickRecord(record)"
+                minRowHeight="MIN_ROW_HEIGHT"
+                onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+        </t>
+    </xpath>
+</t>
+
 <t t-name="web_unsplash.ImagesListTemplate" t-inherit="web_editor.ImagesListTemplate" t-inherit-mode="extension">
-    <xpath expr="//t[@id='o_we_media_library_images']" position="after">
-        <t t-if="['all', 'unsplash'].includes(state.searchService)">
-            <t t-foreach="state.unsplashRecords" t-as="record" t-key="record.id">
-                <AutoResizeImage src="record.url"
-                    author="record.user.name"
-                    authorLink="record.user.links.html"
-                    name="record.user.name"
-                    title="record.user.name"
-                    altDescription="record.alt_description"
-                    selected="this.selectedRecordIds.includes(record.id)"
-                    onImageClick="() => this.onClickRecord(record)"
-                    minRowHeight="MIN_ROW_HEIGHT"
-                    onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    <xpath expr="//t[@id='o_we_media_library_images']" position="replace">
+        <t id='o_we_media_library_images' t-if="['all', 'unsplash', 'media-library'].includes(state.searchService)">
+            <t t-foreach="combinedRecords" t-as="record" t-key="record.id">
+                <t t-call="web_editor.ExternalImage"/>
             </t>
         </t>
     </xpath>