[BUGFIX] Reintroduce DistributionWelcome image

With the change #82000 the DistributionWelcome image was removed by
accident. This patch adds the image again with a proper fallback to the
Distribution image.

Resolves: #95313
Releases: master
Change-Id: I1bfb281af43e80fa83c72e43aff95dc35fb56f7e
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/71187

Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>

Build/Sources/TypeScript/extensionmanager/Resources/Public/TypeScript/DistributionImage.ts

@@ -20,13 +20,15 @@
  * This is based on W3C custom elements ("web components") specification, see
  * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
  */
-export class DistribuitionImage extends HTMLElement {
+export class DistributionImage extends HTMLElement {
   private image: string;
+  private welcomeImage: string;
   private fallback: string;
   private imageElement: HTMLImageElement;
 
   public connectedCallback(): void {
     this.image = this.getAttribute('image') || '' as string;
+    this.welcomeImage = this.getAttribute('welcomeImage') || '' as string;
     this.fallback = this.getAttribute('fallback') || '' as string;
 
     if (!this.image.length && !this.fallback.length) {
@@ -46,7 +48,10 @@ export class DistribuitionImage extends HTMLElement {
       this.imageElement.setAttribute('title', title)
     }
 
-    if (this.image.length) {
+    if (this.welcomeImage.length) {
+      this.imageElement.addEventListener('error', this.onError);
+      this.imageElement.setAttribute('src', this.welcomeImage);
+    } else if (this.image.length) {
       this.imageElement.addEventListener('error', this.onError);
       this.imageElement.setAttribute('src', this.image);
     } else {
@@ -72,10 +77,12 @@ export class DistribuitionImage extends HTMLElement {
   }
 
   private onError = () => {
-    if (this.fallback.length) {
+    if (this.image.length && this.imageElement.getAttribute('src') === this.welcomeImage) {
+      this.imageElement.setAttribute('src', this.image);
+    } else if (this.fallback.length) {
       this.imageElement.setAttribute('src', this.fallback);
     }
   }
 }
 
-window.customElements.define('typo3-extensionmanager-distribution-image', DistribuitionImage);
+window.customElements.define('typo3-extensionmanager-distribution-image', DistributionImage);

typo3/sysext/extensionmanager/Classes/Domain/Model/Extension.php

@@ -161,6 +161,11 @@ class Extension extends AbstractEntity
      */
     protected $distributionImage = '';
 
+    /**
+     * @var string
+     */
+    protected $distributionWelcomeImage = '';
+
     /**
      * @var string
      */
@@ -689,19 +694,23 @@ class Extension extends AbstractEntity
         return $dependenciesObject;
     }
 
-    /**
-     * @param string $distributionImage
-     */
-    public function setDistributionImage(string $distributionImage): void
+    public function setDistributionImage(string $imageUrl): void
     {
-        $this->distributionImage = $distributionImage;
+        $this->distributionImage = $imageUrl;
     }
 
-    /**
-     * @return string
-     */
     public function getDistributionImage(): string
     {
         return $this->distributionImage;
     }
+
+    public function setDistributionWelcomeImage(string $imageUrl): void
+    {
+        $this->distributionWelcomeImage = $imageUrl;
+    }
+
+    public function getDistributionWelcomeImage(): string
+    {
+        return $this->distributionWelcomeImage;
+    }
 }

typo3/sysext/extensionmanager/Classes/Domain/Repository/BulkExtensionRepositoryWriter.php

@@ -78,7 +78,8 @@ class BulkExtensionRepositoryWriter implements \SplObserver
         'serialized_dependencies',
         'update_comment',
         'documentation_link',
-        'distribution_image'
+        'distribution_image',
+        'distribution_welcome_image',
     ];
 
     /**
@@ -238,6 +239,7 @@ class BulkExtensionRepositoryWriter implements \SplObserver
             $subject->getUploadcomment() ?: '',
             $subject->getDocumentationLink() ?: '',
             $subject->getDistributionImage() ?: '',
+            $subject->getDistributionWelcomeImage() ?: '',
         ];
         ++$this->sumRecords;
     }

typo3/sysext/extensionmanager/Classes/Parser/ExtensionXmlParser.php

@@ -63,6 +63,7 @@ class ExtensionXmlParser implements \SplSubject
     protected int $versionDownloadCounter = 0;
     protected string $documentationLink = '';
     protected string $distributionImage = '';
+    protected string $distributionWelcomeImage = '';
 
     public function __construct()
     {
@@ -264,6 +265,11 @@ class ExtensionXmlParser implements \SplSubject
                     $this->distributionImage = $this->elementData;
                 }
                 break;
+            case 'distributionImageWelcome':
+                if (preg_match('/^https:\/\/extensions\.typo3\.org[a-zA-Z0-9._\/]+DistributionWelcome\.png$/', $this->elementData)) {
+                    $this->distributionWelcomeImage = $this->elementData;
+                }
+                break;
         }
     }
 
@@ -277,7 +283,7 @@ class ExtensionXmlParser implements \SplSubject
         // Resetting at least class property "version" is mandatory as we need to do some magic in
         // regards to an extension's and version's child node "downloadcounter"
         $this->version = $this->authorcompany = $this->authorname = $this->authoremail = $this->category = $this->dependencies = $this->state = '';
-        $this->description = $this->ownerusername = $this->t3xfilemd5 = $this->title = $this->uploadcomment = $this->documentationLink = $this->distributionImage = '';
+        $this->description = $this->ownerusername = $this->t3xfilemd5 = $this->title = $this->uploadcomment = $this->documentationLink = $this->distributionImage = $this->distributionWelcomeImage = '';
         $this->lastuploaddate = $this->reviewstate = $this->versionDownloadCounter = 0;
         if ($resetAll) {
             $this->extensionKey = '';
@@ -476,10 +482,18 @@ class ExtensionXmlParser implements \SplSubject
     }
 
     /**
-     * Returns distribution image.
+     * Returns distribution image url.
      */
     public function getDistributionImage(): string
     {
         return $this->distributionImage;
     }
+
+    /**
+     * Returns distribution welcome image url.
+     */
+    public function getDistributionWelcomeImage(): string
+    {
+        return $this->distributionWelcomeImage;
+    }
 }

typo3/sysext/extensionmanager/Configuration/TCA/tx_extensionmanager_domain_model_extension.php

@@ -142,6 +142,12 @@ return [
                 'type' => 'input',
             ],
         ],
+        'distribution_welcome_image' => [
+            'label' => 'LLL:EXT:extensionmanager/Resources/Private/Language/locallang_db.xlf:tx_extensionmanager_domain_model_extension.distribution_welcome_image',
+            'config' => [
+                'type' => 'input',
+            ],
+        ],
         'remote' => [
             'label' => 'LLL:EXT:extensionmanager/Resources/Private/Language/locallang_db.xlf:tx_extensionmanager_domain_model_extension.remote',
             'config' => [
@@ -151,7 +157,7 @@ return [
         ]
     ],
     'types' => [
-        '0' => ['showitem' => 'extensionkey, version, integer_version, title, description, state, category, last_updated, update_comment, author_name, author_email, review_state, md5hash, serialized_dependencies, documentation_link, distribution_image']
+        '0' => ['showitem' => 'extensionkey, version, integer_version, title, description, state, category, last_updated, update_comment, author_name, author_email, review_state, md5hash, serialized_dependencies, documentation_link, distribution_image, distribution_welcome_image']
     ],
     'palettes' => [
         '1' => ['showitem' => '']

typo3/sysext/extensionmanager/Resources/Private/Language/locallang_db.xlf

@@ -54,6 +54,9 @@
 			<trans-unit id="tx_extensionmanager_domain_model_extension.distribution_image" resname="tx_extensionmanager_domain_model_extension.distribution_image">
 				<source>Distribution image URL</source>
 			</trans-unit>
+			<trans-unit id="tx_extensionmanager_domain_model_extension.distribution_welcome_image" resname="tx_extensionmanager_domain_model_extension.distribution_welcome_image">
+				<source>Distribution welcome image URL</source>
+			</trans-unit>
 			<trans-unit id="tx_extensionmanager_domain_model_extension.remote" resname="tx_extensionmanager_domain_model_extension.remote">
 				<source>Remote</source>
 			</trans-unit>

typo3/sysext/extensionmanager/Resources/Private/Templates/Distribution/Show.html

@@ -5,6 +5,7 @@
     <div class="distribution-detail">
         <div class="distribution-detail-previewpane">
             <typo3-extensionmanager-distribution-image
+                welcomeImage="{extension.distributionWelcomeImage}"
                 image="{extension.distributionImage}"
                 fallback="{f:uri.image(src: 'EXT:extensionmanager/Resources/Public/Images/Distribution.svg')}"
                 alt="{extension.title}"

typo3/sysext/extensionmanager/Resources/Public/JavaScript/DistributionImage.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports"],(function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DistribuitionImage=void 0;class i extends HTMLElement{constructor(){super(...arguments),this.onError=()=>{this.fallback.length&&this.imageElement.setAttribute("src",this.fallback)}}connectedCallback(){if(this.image=this.getAttribute("image")||"",this.fallback=this.getAttribute("fallback")||"",!this.image.length&&!this.fallback.length)return;this.attachShadow({mode:"open"}),this.imageElement=document.createElement("img");const t=this.getAttribute("alt")||"";t.length&&this.imageElement.setAttribute("alt",t);const e=this.getAttribute("title")||"";e.length&&this.imageElement.setAttribute("title",e),this.image.length?(this.imageElement.addEventListener("error",this.onError),this.imageElement.setAttribute("src",this.image)):this.imageElement.setAttribute("src",this.fallback);const i=document.createElement("style");i.textContent="\n      img {\n        display: block;\n        width: 300px;\n        height: auto;\n      }\n    ",this.shadowRoot.append(this.imageElement,i)}disconnectedCallback(){this.image.length&&null!==this.imageElement&&this.imageElement.removeEventListener("error",this.onError)}}e.DistribuitionImage=i,window.customElements.define("typo3-extensionmanager-distribution-image",i)}));
\ No newline at end of file
+define(["require","exports"],(function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DistributionImage=void 0;class i extends HTMLElement{constructor(){super(...arguments),this.onError=()=>{this.image.length&&this.imageElement.getAttribute("src")===this.welcomeImage?this.imageElement.setAttribute("src",this.image):this.fallback.length&&this.imageElement.setAttribute("src",this.fallback)}}connectedCallback(){if(this.image=this.getAttribute("image")||"",this.welcomeImage=this.getAttribute("welcomeImage")||"",this.fallback=this.getAttribute("fallback")||"",!this.image.length&&!this.fallback.length)return;this.attachShadow({mode:"open"}),this.imageElement=document.createElement("img");const t=this.getAttribute("alt")||"";t.length&&this.imageElement.setAttribute("alt",t);const e=this.getAttribute("title")||"";e.length&&this.imageElement.setAttribute("title",e),this.welcomeImage.length?(this.imageElement.addEventListener("error",this.onError),this.imageElement.setAttribute("src",this.welcomeImage)):this.image.length?(this.imageElement.addEventListener("error",this.onError),this.imageElement.setAttribute("src",this.image)):this.imageElement.setAttribute("src",this.fallback);const i=document.createElement("style");i.textContent="\n      img {\n        display: block;\n        width: 300px;\n        height: auto;\n      }\n    ",this.shadowRoot.append(this.imageElement,i)}disconnectedCallback(){this.image.length&&null!==this.imageElement&&this.imageElement.removeEventListener("error",this.onError)}}e.DistributionImage=i,window.customElements.define("typo3-extensionmanager-distribution-image",i)}));
\ No newline at end of file

typo3/sysext/extensionmanager/Tests/Unit/Domain/Model/ExtensionTest.php

@@ -215,14 +215,30 @@ class ExtensionTest extends UnitTestCase
      */
     public function getDistributionImageTest(): void
     {
-        $distributionImage = 'https://example.org/path/to/image.png';
+        $imageUrl = 'https://example.org/path/to/image.png';
 
         $extension = new Extension();
-        $extension->setDistributionImage($distributionImage);
+        $extension->setDistributionImage($imageUrl);
 
         self::assertEquals(
-            $distributionImage,
+            $imageUrl,
             $extension->getDistributionImage()
         );
     }
+
+    /**
+     * @test
+     */
+    public function getDistributionWelcomeImageTest(): void
+    {
+        $imageUrl = 'https://example.org/path/to/image.png';
+
+        $extension = new Extension();
+        $extension->setDistributionWelcomeImage($imageUrl);
+
+        self::assertEquals(
+            $imageUrl,
+            $extension->getDistributionWelcomeImage()
+        );
+    }
 }

typo3/sysext/extensionmanager/ext_tables.sql

@@ -27,6 +27,7 @@ CREATE TABLE tx_extensionmanager_domain_model_extension (
   lastreviewedversion int(3) NOT NULL default '0',
   documentation_link varchar(2048),
   distribution_image varchar(255),
+  distribution_welcome_image varchar(255),
 
   KEY index_extrepo (extension_key,remote),
   KEY index_versionrepo (integer_version,remote,extension_key),