[BUGFIX] Changelog install tool: Duplicate ids prevent expand

Expand / collapse sections need a unique id to be properly
collapsible. The "Changelog documentation viewer" uses the
forge issue number for this, which is not unique.
The patch changes the id to use a prefix per version / section
and the loop interation index.

Change-Id: I350d404c61b989deab34bf517e2890e567cb3172
Resolves: #83376
Release: master, 8.7
Reviewed-on: https://review.typo3.org/55148


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Alexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Alexander Opitz <opitz.alexander@googlemail.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>

typo3/sysext/install/Resources/Private/Partials/Upgrade/UpgradeDocs/PanelItem.html

 <div class="panel panel-rst panel-{fileArray.class} risk-medium upgrade_analysis_item_to_filter item"
-     data-item-tags="{fileArray.tagList}" data-item-version="{version}" id="heading{issueNumber}">
+     data-item-tags="{fileArray.tagList}" data-item-version="{version}" id="heading{id}">
     <div class="panel-heading" role="tab">
         <h3 class="panel-title">
             <f:if condition="{read}">
@@ -18,13 +18,13 @@
                     </a>
                 </f:else>
             </f:if>
-            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{issueNumber}" aria-expanded="true" aria-controls="collapse{issueNumber}" class="collapsed">
+            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{id}" aria-expanded="true" aria-controls="collapse{id}" class="collapsed">
                 <span class="caret"></span>
                 <strong>{fileArray.headline}</strong>
             </a>
         </h3>
     </div>
-    <div id="collapse{issueNumber}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{issueNumber}">
+    <div id="collapse{id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{id}">
         <pre><f:format.raw>{fileArray.parsedContent}</f:format.raw></pre>
     </div>
 </div>

typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeDocsGetContent.html

@@ -54,9 +54,9 @@
 				<div class="panel-collapse collapse"
 					id="version-{iterator.index}" role="tabpanel" data-group-version="{version}">
 					<div class="panel-body" role="tablist" aria-multiselectable="false">
-						<f:for each="{versionArray}" as="fileArray" key="issueNumber">
+						<f:for each="{versionArray}" as="fileArray" iteration="fileIterator">
 							<f:render partial="Upgrade/UpgradeDocs/PanelItem"
-								arguments="{issueNumber:issueNumber, fileArray:fileArray, version:version}"/>
+								arguments="{id:'file-{iterator.index}-{fileIterator.index}', fileArray:fileArray, version:version}"/>
 						</f:for>
 					</div>
 				</div>
@@ -76,9 +76,9 @@
 		</div>
 		<div class="collapse" id="collapseRead" role="tabpanel">
 			<div class="panel-body panel-body-read" role="tablist" aria-multiselectable="false">
-				<f:for each="{upgradeDocsReadFiles}" as="fileArray" key="issueNumber">
+				<f:for each="{upgradeDocsReadFiles}" as="fileArray" iteration="fileIterator">
 					<f:render partial="Upgrade/UpgradeDocs/PanelItem"
-						arguments="{issueNumber:issueNumber, fileArray:fileArray, version:fileArray.section, read:'true'}"/>
+						arguments="{id:'read-{fileIterator.index}', fileArray:fileArray, version:fileArray.section, read:'true'}"/>
 				</f:for>
 			</div>
 		</div>
@@ -95,9 +95,9 @@
 		</div>
 		<div class="collapse" id="collapseNotAffected" role="tabpanel">
 			<div class="panel-body panel-body-not-affected" role="tablist" aria-multiselectable="false">
-				<f:for each="{upgradeDocsNotAffectedFiles}" as="fileArray" key="issueNumber">
+				<f:for each="{upgradeDocsNotAffectedFiles}" as="fileArray" iteration="fileIterator">
 					<f:render partial="Upgrade/UpgradeDocs/PanelItem"
-						arguments="{issueNumber:issueNumber, fileArray:fileArray, version:fileArray.section, read:'true'}"
+						arguments="{id:'scanner-{fileIterator.index}', fileArray:fileArray, version:fileArray.section, read:'true'}"
 					/>
 				</f:for>
 			</div>