@openui5/sap.ui.support 1.94.0 → 1.97.0

package/src/sap/ui/support/supportRules/report/ReportProvider.js

@@ -7,20 +7,12 @@
 /**
  * Creates a report from data.
  */
-sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/support/supportRules/report/Archiver',
-	'sap/ui/support/supportRules/report/IssueRenderer'], function(jQuery, Handlebars, Archiver, IssueRenderer) {
+sap.ui.define(['jquery.sap.global', 'sap/ui/support/supportRules/report/Archiver',
+	'sap/ui/support/supportRules/report/IssueRenderer'], function(jQuery, Archiver, IssueRenderer) {
 	'use strict';
 
 	// Private fields
 	var resourcesBaseUrl = jQuery.sap.getResourcePath('sap/ui/support/supportRules/report/resources');
-	var resources = [
-		{ url: resourcesBaseUrl + '/ReportTemplate.html', type: 'template' },
-		{ url: resourcesBaseUrl + '/styles.css', type: 'css' },
-		{ url: resourcesBaseUrl + '/filter.css', type: 'css' },
-		{ url: resourcesBaseUrl + '/collapseExpand.css', type: 'css' },
-		{ url: resourcesBaseUrl + '/filter.js', type: 'js' },
-		{ url: resourcesBaseUrl + '/collapseExpand.js', type: 'js' }
-	];
 
 	/*
 	 * Functions taken from core.support.plugins.TechInfo.js
@@ -63,21 +55,13 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 	function getResource(resource) {
 		return jQuery.ajax({
 			type: 'GET',
-			url: resource.url,
+			url: resourcesBaseUrl + "/" + resource,
 			dataType: 'text'
 		}).then(function (text) {
-			return { content: text, type: resource.type };
+			return text;
 		});
 	}
 
-	function getResources() {
-		var deferreds = [];
-		for (var i = 0; i < resources.length; i++) {
-			deferreds.push(getResource(resources[i]));
-		}
-		return jQuery.when.apply(jQuery, deferreds);
-	}
-
 	/*
 	 * Modified version of the function onsapUiSupportTechInfoData from core.support.plugins.TechInfo.js
 	 */
@@ -85,7 +69,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 		var content = '';
 
 		if (!technicalInfo) {
-			return new Handlebars.SafeString(content);
+			return content;
 		}
 
 		try {
@@ -141,7 +125,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 			jQuery.sap.log.warning('There was a problem extracting technical info.');
 		}
 
-		return new Handlebars.SafeString(content);
+		return content;
 	}
 
 	function getComponentPart(value) {
@@ -157,7 +141,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 		var content = '';
 
 		if (!appInfo) {
-			return new Handlebars.SafeString(content);
+			return content;
 		}
 
 		content += '<table class="sapUiTable"><tr><th>Component ID</th><th>Type</th><th>Title</th><th>Subtitle</th><th>Application version</th><th>Description</th><th>BCP Component</th></tr>';
@@ -186,7 +170,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 			content = '';
 		}
 
-		return new Handlebars.SafeString(content);
+		return content;
 	}
 
 	function getGlobalScope(displaySettings) {
@@ -249,14 +233,14 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 			content = '';
 		}
 
-		return new Handlebars.SafeString(content);
+		return content;
 	}
 
 	function getRules(groups) {
 		var content = '';
 
 		if (!groups) {
-			return new Handlebars.SafeString(content);
+			return content;
 		}
 
 		try {
@@ -302,115 +286,110 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 			content = '';
 		}
 
-		return new Handlebars.SafeString(content);
+		return content;
 	}
 
-	function getResourcesHtml(resources, type) {
-		var content = '';
-
-		if (type !== 'script' && type !== 'style') {
-			return content;
-		}
+	function getIssues(issues) {
+		return IssueRenderer.render(issues, true);
+	}
 
-		for (var i = 0; i < resources.length; i++) {
-			switch (type) {
-				case 'script': content += '<script>' + resources[i] + '</script>\n'; break;
-				case 'style': content += '<style type="text/css">' + resources[i] + '</style>\n'; break;
-			}
+	function getRulePreset(oRulePreset) {
+		if (!oRulePreset) {
+			return "none";
 		}
 
-		return new Handlebars.SafeString(content);
+		return "<strong>" + oRulePreset.title + "/" + oRulePreset.id + "</strong>";
 	}
 
-	Handlebars.registerHelper('getTechnicalInformation', function (technicalInfo) {
-		return getTechnicalInformation(technicalInfo);
-	});
-	Handlebars.registerHelper('getRules', function (rules) {
-		return getRules(rules);
-	});
-	Handlebars.registerHelper('getIssues', function (issues) {
-		return new Handlebars.SafeString(IssueRenderer.render(issues, true));
-	});
-	Handlebars.registerHelper('getAppInfo', function (appInfo) {
-		return getAppInfo(appInfo);
-	});
-	Handlebars.registerHelper('getScope', function (scope) {
-		return getScope(scope);
-	});
-	Handlebars.registerHelper('getScripts', function (scripts) {
-		return getResourcesHtml(scripts, 'script');
-	});
-	Handlebars.registerHelper('getStyles', function (styles) {
-		return getResourcesHtml(styles, 'style');
-	});
-
 	// Public functions
 
 	/**
 	 * Creates an html string containing the whole report.
 	 * @param {Object} oData - the data required to create a report
-	 * @returns {String}
+	 * @param {String} [sBaseUrl] - the base path to javascript and css resources
+	 * @returns {String} the complete html.
 	 */
-	function getReportHtml(oData) {
-		return getResources().then(function () {
-			var styles = [],
-				scripts = [],
-				html = '',
-				i,
-				template = {},
-				reportContext = {};
-
-			for (i = 0; i < arguments.length; i++) {
-				switch (arguments[i].type) {
-					case 'template': html = arguments[i].content; break;
-					case 'css': styles.push(arguments[i].content); break;
-					case 'js': scripts.push(arguments[i].content); break;
-				}
-			}
+	function getReportHtml(oData, sBaseUrl) {
+		if (!sBaseUrl) {
+			sBaseUrl = resourcesBaseUrl + "/";
+		}
 
-			template = Handlebars.compile(html);
-
-			reportContext = {
-				technicalInfo: oData.technical,
-				issues: oData.issues,
-				appInfo: oData.application,
-				rules: oData.rules,
-				rulePreset: oData.rulePreset,
-				metadata: {
-					title: oData.name + ' Analysis Results',
-					title_TechnicalInfo: 'Technical Information',
-					title_Issues: 'Issues',
-					title_AppInfo: 'Application Information',
-					title_SelectedRules: 'Available and (<span class="checked"></span>) Selected Rules',
-					timestamp: new Date(),
-					scope: oData.scope,
-					analysisDuration: oData.analysisDuration,
-					analysisDurationTitle: oData.analysisDurationTitle,
-					styles: styles,
-					scripts: scripts
-				}
+		return getResource("ReportTemplate.html").then(function(sTemplate) {
+			var oContext = {
+				baseUrl: sBaseUrl,
+				technicalInfo: getTechnicalInformation(oData.technical),
+				issues: getIssues(oData.issues),
+				appInfo: getAppInfo(oData.application),
+				rules: getRules(oData.rules),
+				rulePreset: getRulePreset(oData.rulePreset),
+				metadataTitle: oData.name + ' Analysis Results',
+				metadataTitleTechnicalInfo: 'Technical Information',
+				metadataTitleIssues: 'Issues',
+				metadataTitleAppInfo: 'Application Information',
+				metadataTitleSelectedRules: 'Available and (<span class="checked"></span>) Selected Rules',
+				metadataTimestamp: new Date(),
+				metadataScope: getScope(oData.scope),
+				metadataAnalysisDuration: oData.analysisDuration,
+				metadataAnalysisDurationTitle: oData.analysisDurationTitle
 			};
 
-			return template(reportContext);
+			return replacePlaceholders(sTemplate, oContext);
 		});
 	}
 
+	/**
+	 * Replace any placeholder like {{placeholder}} with the corresponding value from oContext.
+	 * @param {String} sTemplate the string template containing the placeholders.
+	 * @param {Object} oContext the object containing the values for the placeholders.
+	 * @returns {String} the processed template.
+	 */
+	function replacePlaceholders(sTemplate, oContext) {
+		var sPlaceholder,
+			sValue;
+
+		for (sPlaceholder in oContext) {
+			sValue = oContext[sPlaceholder];
+			sTemplate = sTemplate.replace(new RegExp("\{\{" + sPlaceholder + "\}\}", "ig"), sValue);
+		}
+
+		return sTemplate;
+	}
+
 	/**
 	 * Creates a zip file containing the report.html, appInfo.json, technicalInfo.json, issues.json.
 	 * @param {Object} oData - the data required to create a report
 	 */
 	function downloadReportZip(oData) {
-		this.getReportHtml(oData).done(function (html) {
-			var report = '<!DOCTYPE HTML><html><head><title>Report</title></head><body><div id="sap-report-content">' + html + '</div></body></html>';
-			var issues = { 'issues': oData.issues };
-			var appInfos = { 'appInfos': oData.application };
-			var technicalInfo = { 'technicalInfo': oData.technical };
-			var archiver = new Archiver();
+		var aPromises = [
+			this.getReportHtml(oData, "./"),
+			getResource("styles.css"),
+			getResource("index.js"),
+			getResource("images/checked.svg"),
+			getResource("images/collapsed.svg"),
+			getResource("images/expanded.svg"),
+			getResource("images/unchecked.svg")
+		];
+
+		Promise.all(aPromises).then(function (resources) {
+			var issues = { 'issues': oData.issues },
+				appInfos = { 'appInfos': oData.application },
+				technicalInfo = { 'technicalInfo': oData.technical },
+				archiver = new Archiver();
+
 			archiver.add('technicalInfo.json', technicalInfo, 'json');
 			archiver.add('issues.json', issues, 'json');
 			archiver.add('appInfos.json', appInfos, 'json');
-			archiver.add('report.html', report);
+			archiver.add('report.html', resources[0]);
 			archiver.add('abap.json', oData.abap, 'json');
+			archiver.add('styles.css', resources[1], 'css');
+			archiver.add('index.js', resources[2], 'js');
+
+
+			archiver.add('images/checked.svg', resources[3], 'svg');
+			archiver.add('images/collapsed.svg', resources[4], 'svg');
+			archiver.add('images/expanded.svg', resources[5], 'svg');
+			archiver.add('images/unchecked.svg', resources[6], 'svg');
+
 			archiver.download("SupportAssistantReport");
 			archiver.clear();
 		});
@@ -423,21 +402,19 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/thirdparty/handlebars', 'sap/ui/supp
 	function openReport(oData) {
 		// Create a hidden anchor. Open window outside of the promise otherwise browsers blocks the window.open.
 		var content = '';
-		var a = jQuery('<a style="display: none;"></a>');
+		var a = jQuery('<a class="sapUiHidden"></a>');
 		a.on('click', function () {
 			var reportWindow = window.open('', '_blank');
 			reportWindow.opener = null;
 
 			jQuery(reportWindow.document).ready(function () {
-				// Sometimes document.write overwrites the document html and sometimes it appends to it so we need a wrapper div.
-				if (reportWindow.document.getElementById('sap-report-content')) {
-					reportWindow.document.getElementById('sap-report-content').innerHtml = content;
-				} else {
-					reportWindow.document.write('<div id="sap-report-content">' + content + '</div>');
-				}
-				reportWindow.document.title = 'Report';
+				// make sure everything is cleared before writing the new report
+				reportWindow.document.documentElement.innerHTML = '';
+
+				reportWindow.document.write(content);
 			});
 		});
+
 		jQuery('body').append(a);
 
 		this.getReportHtml(oData).then(function (html) {

package/src/sap/ui/support/supportRules/report/resources/ReportTemplate.html

@@ -1,97 +1,45 @@
-<style type="text/css">
-	body {
-		font-family: "72-Web", Arial, Helvetica, sans-serif;
-	}
-	main > header > h1 {
-		font-size: 1.8em;
-	}
-	section h1 {
-		font-size: 1.2em;
-	}
-	table {
-		font-size: 0.9em;
-	}
-	.sapUiSupportTechInfoCntnt td:first-child {
-		width: 12%;
-	}
-	.sapUiSupportTechInfoCntnt .sapUiSupportTitle td {
-		padding-top: 10px;
-	}
-	.sapUiSupportTechInfoCntnt .sapUiSupportTitle label {
-		padding-left: 4px;
-		font-size: 18px;
-		font-weight: bold;
-	}
-	.sapUiIssueGroupContent {
-		margin-top: 8px;
-	}
-	.unchecked::before {
-		vertical-align: middle;
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		content: "";
-		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23333333'><path d='M42,3 C42.8125041,3 43.515622,3.28124719 44.109375,3.84375 C44.703128,4.40625281 45,5.12499563 45,6 L45,42 C45,42.8750044 44.703128,43.5937472 44.109375,44.15625 C43.515622,44.7187528 42.8125041,45 42,45 L6,45 C5.12499563,45 4.40625281,44.7187528 3.84375,44.15625 C3.28124719,43.5937472 3,42.8750044 3,42 L3,6 C3,5.12499563 3.28124719,4.40625281 3.84375,3.84375 C4.40625281,3.28124719 5.12499563,3 6,3 L42,3 Z M42,6 L6,6 L6,42 L42,42 L42,6 Z'></path></svg>") no-repeat;
-	}
-	.checked::before {
-		vertical-align: middle;
-		display: inline-block;
-		width: 16px;
-		height: 16px;
-		content: "";
-		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23333333'><path d='M42,30 L45,30 L45,42 C45,42.8750044 44.703128,43.5937472 44.109375,44.15625 C43.515622,44.7187528 42.8125041,45 42,45 L6,45 C5.12499563,45 4.40625281,44.7187528 3.84375,44.15625 C3.28124719,43.5937472 3,42.8750044 3,42 L3,6 C3,5.18749594 3.28124719,4.48437797 3.84375,3.890625 C4.40625281,3.29687203 5.12499563,3 6,3 L18,3 L18,6 L6,6 L6,42 L42,42 L42,30 Z M47.625,2.34375 C48.0625022,2.78125219 48.1250016,3.28124719 47.8125,3.84375 L30.46875,29.34375 C30.2812491,29.7187519 29.9687522,29.9374997 29.53125,30 C29.0937478,30.0625003 28.7187516,29.9375016 28.40625,29.625 L16.6875,16.59375 C16.1249972,16.0312472 16.1249972,15.4687528 16.6875,14.90625 L18.65625,12.9375 C19.2812531,12.3124969 19.8749972,12.3124969 20.4375,12.9375 L27.9375,20.4375 C28.2500016,20.7500016 28.609373,20.8750003 29.015625,20.8125 C29.421877,20.7499997 29.7187491,20.5000022 29.90625,20.0625 L43.59375,0.65625 C43.7812509,0.281248125 44.078123,0.0625003125 44.484375,0 C44.890627,-0.0625003125 45.2499984,0.0624984375 45.5625,0.375 L47.625,2.34375 Z'></path></svg>") no-repeat;
-	}
-	td .unchecked::before,
-	td .checked::before {
-		margin-right: 8px;
-	}
-</style>
-
-{{getStyles metadata.styles}}
-
-<main>
-	<header>
-		<h1>{{metadata.title}}</h1>
-		<div>Generated on (<time>{{metadata.timestamp}}</time>)</div>
-		<div class="bottom-margin-small">{{metadata.analysisDurationTitle}}: <time>{{metadata.analysisDuration}}</time></div>
-		<div>{{getScope metadata.scope}}</div>
-	</header>
-	<div>
-		<section id="section_selected-rules">
-			<div class="expandable-control collapsed-content" data-expandableElement="selectedRulesContent"><h1 class="expandable-title">{{{metadata.title_SelectedRules}}}</h1></div>
-			<div id="selectedRulesContent">
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>Support Assistant Report</title>
+		<link rel="stylesheet" href="{{baseUrl}}styles.css">
+	</head>
+	<body>
+		<div id="sap-report-content">
+			<main>
+				<header>
+					<h1>{{metadataTitle}}</h1>
+					<div>Generated on (<time>{{metadataTimestamp}}</time>)</div>
+					<div class="bottom-margin-small">{{metadataAnalysisDurationTitle}}: <time>{{metadataAnalysisDuration}}</time></div>
+					<div>{{metadataScope}}</div>
+				</header>
 				<div>
-					Rule Preset / ID :
-					{{#if rulePreset}}
-						<strong>{{rulePreset.title}} / {{rulePreset.id}}</strong>
-					{{else}}
-						none
-					{{/if}}
+					<section id="section_selected-rules">
+						<div class="expandable-control collapsed-content" data-expandableElement="selectedRulesContent"><h1 class="expandable-title">{{metadataTitleSelectedRules}}</h1></div>
+						<div id="selectedRulesContent">
+							<div>
+								Rule Preset / ID : {{rulePreset}}
+							</div>
+							{{rules}}
+						</div>
+					</section>
+					<section id="section_technical-details">
+						<div class="expandable-control collapsed-content" data-expandableElement="technicalInfoContent"><h1 class="expandable-title">{{metadataTitleTechnicalInfo}}</h1></div>
+						<div id="technicalInfoContent">{{technicalInfo}}</div>
+					</section>
+					<section id="section_app-info">
+						<div class="expandable-control collapsed-content" data-expandableElement="appInfoContent"><h1 class="expandable-title">{{metadataTitleAppInfo}}</h1></div>
+						<div id="appInfoContent">{{appInfo}}</div>
+					</section>
+					<section id="section_issues">
+						<div class="expandable-control collapsed-content" data-expandableElement="issuesContent"><h1 class="expandable-title">{{metadataTitleIssues}}</h1></div>
+						<div id="issuesContent">{{issues}}</div>
+					</section>
 				</div>
-				{{getRules rules}}
-			</div>
-		</section>
-		<section id="section_technical-details">
-			<div class="expandable-control collapsed-content" data-expandableElement="technicalInfoContent"><h1 class="expandable-title">{{metadata.title_TechnicalInfo}}</h1></div>
-			<div id="technicalInfoContent">{{getTechnicalInformation technicalInfo}}</div>
-		</section>
-		<section id="section_app-info">
-			<div class="expandable-control collapsed-content" data-expandableElement="appInfoContent"><h1 class="expandable-title">{{metadata.title_AppInfo}}</h1></div>
-			<div id="appInfoContent">{{getAppInfo appInfo}}</div>
-		</section>
-		<section id="section_issues">
-			<div class="expandable-control collapsed-content" data-expandableElement="issuesContent"><h1 class="expandable-title">{{metadata.title_Issues}}</h1></div>
-			<div id="issuesContent">{{getIssues issues}}</div>
-		</section>
-	</div>
-	<footer>
-	</footer>
-</main>
-
-{{getScripts metadata.scripts}}
-
-<script>
-	window.sapUiSupportReport.collapseExpand.init();
-	window.sapUiSupportReport.filter.init();
-</script>
-
+				<footer>
+				</footer>
+			</main>
+		</div>
+		<script src="{{baseUrl}}index.js"></script>
+	</body>
+</html>

package/src/sap/ui/support/supportRules/report/resources/images/checked.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23333333'><path d='M42,30 L45,30 L45,42 C45,42.8750044 44.703128,43.5937472 44.109375,44.15625 C43.515622,44.7187528 42.8125041,45 42,45 L6,45 C5.12499563,45 4.40625281,44.7187528 3.84375,44.15625 C3.28124719,43.5937472 3,42.8750044 3,42 L3,6 C3,5.18749594 3.28124719,4.48437797 3.84375,3.890625 C4.40625281,3.29687203 5.12499563,3 6,3 L18,3 L18,6 L6,6 L6,42 L42,42 L42,30 Z M47.625,2.34375 C48.0625022,2.78125219 48.1250016,3.28124719 47.8125,3.84375 L30.46875,29.34375 C30.2812491,29.7187519 29.9687522,29.9374997 29.53125,30 C29.0937478,30.0625003 28.7187516,29.9375016 28.40625,29.625 L16.6875,16.59375 C16.1249972,16.0312472 16.1249972,15.4687528 16.6875,14.90625 L18.65625,12.9375 C19.2812531,12.3124969 19.8749972,12.3124969 20.4375,12.9375 L27.9375,20.4375 C28.2500016,20.7500016 28.609373,20.8750003 29.015625,20.8125 C29.421877,20.7499997 29.7187491,20.5000022 29.90625,20.0625 L43.59375,0.65625 C43.7812509,0.281248125 44.078123,0.0625003125 44.484375,0 C44.890627,-0.0625003125 45.2499984,0.0624984375 45.5625,0.375 L47.625,2.34375 Z'></path></svg>

package/src/sap/ui/support/supportRules/report/resources/images/collapsed.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23346187'><path d='M31.96875,21.84375 C32.5937531,22.4687531 32.90625,23.1874959 32.90625,24 C32.90625,24.8125041 32.5937531,25.5312469 31.96875,26.15625 L16.5,41.625 C15.7499963,42.3125034 15.0312534,42.3125034 14.34375,41.625 C13.6562466,40.9374966 13.6562466,40.2187538 14.34375,39.46875 L29.34375,24.5625 C29.7187519,24.1874981 29.7187519,23.8125019 29.34375,23.4375 L14.4375,8.53125 C14.1249984,8.21874844 13.96875,7.87500188 13.96875,7.5 C13.96875,7.12499813 14.1249984,6.78125156 14.4375,6.46875 C14.7500016,6.15624844 15.0937481,6 15.46875,6 C15.8437519,6 16.1874984,6.15624844 16.5,6.46875 L31.96875,21.84375 Z'></path></svg>

package/src/sap/ui/support/supportRules/report/resources/images/expanded.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23346187'><path d='M39.46875,17.53125 C40.1562534,16.7812462 40.8749963,16.7812462 41.625,17.53125 C41.9375016,17.8437516 42.09375,18.1874981 42.09375,18.5625 C42.09375,18.9375019 41.9375016,19.2812484 41.625,19.59375 L26.15625,35.0625 C25.5312469,35.6250028 24.8125041,35.90625 24,35.90625 C23.1874959,35.90625 22.5000028,35.6250028 21.9375,35.0625 L6.375,19.59375 C6.06249844,19.2812484 5.90625,18.921877 5.90625,18.515625 C5.90625,18.109373 6.06249844,17.7500016 6.375,17.4375 C6.68750156,17.1249984 7.04687297,16.96875 7.453125,16.96875 C7.85937703,16.96875 8.21874844,17.1249984 8.53125,17.4375 L23.53125,32.4375 C23.8437516,32.8125019 24.1874981,32.8125019 24.5625,32.4375 L39.46875,17.53125 Z'></path></svg>

package/src/sap/ui/support/supportRules/report/resources/images/unchecked.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23333333'><path d='M42,3 C42.8125041,3 43.515622,3.28124719 44.109375,3.84375 C44.703128,4.40625281 45,5.12499563 45,6 L45,42 C45,42.8750044 44.703128,43.5937472 44.109375,44.15625 C43.515622,44.7187528 42.8125041,45 42,45 L6,45 C5.12499563,45 4.40625281,44.7187528 3.84375,44.15625 C3.28124719,43.5937472 3,42.8750044 3,42 L3,6 C3,5.12499563 3.28124719,4.40625281 3.84375,3.84375 C4.40625281,3.28124719 5.12499563,3 6,3 L42,3 Z M42,6 L6,6 L6,42 L42,42 L42,6 Z'></path></svg>

package/src/sap/ui/support/supportRules/report/resources/{filter.js → index.js}

@@ -4,6 +4,59 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
+window.sapUiSupportReport = window.sapUiSupportReport || {};
+window.sapUiSupportReport.collapseExpand = (function() {
+	'use strict';
+
+	function collapseExpandClickHandler(event) {
+		var toExpandElementId = this.getAttribute('data-expandableElement');
+		var expandableElement = document.getElementById(toExpandElementId);
+		var toExpand = expandableElement.classList.contains('collapsed');
+
+		if (toExpand) {
+			expandableElement.classList.remove('collapsed');
+			expandableElement.classList.add('expanded');
+			this.classList.remove('collapsed-content');
+			this.classList.add('expanded-content');
+		} else {
+			expandableElement.classList.remove('expanded');
+			expandableElement.classList.add('collapsed');
+			this.classList.remove('expanded-content');
+			this.classList.add('collapsed-content');
+		}
+	}
+
+	function init() {
+		try {
+			var expandableElements = document.getElementsByClassName('expandable-control');
+			if (!expandableElements) {
+				return;
+			}
+
+			for (var i = 0; i < expandableElements.length; i++) {
+				expandableElements[i].addEventListener('click', collapseExpandClickHandler);
+
+				// Set the default collapsed/expanded state of the expandable content.
+				var elementToExpandId = expandableElements[i].getAttribute('data-expandableElement');
+				var elementToExpand = document.getElementById(elementToExpandId);
+				if (expandableElements[i].classList.contains('collapsed-content')) {
+					elementToExpand.classList.add('collapsed');
+				} else {
+					elementToExpand.classList.add('expanded');
+				}
+			}
+		} catch (ex) {
+			/* eslint-disable no-console */
+			console.log('There was a problem initializing collapse/expand functionality.');
+			/* eslint-enable no-console */
+		}
+	}
+
+	return {
+		init: init
+	};
+}());
+
 window.sapUiSupportReport = window.sapUiSupportReport || {};
 window.sapUiSupportReport.filter = (function () {
 	'use strict';
@@ -109,3 +162,6 @@ window.sapUiSupportReport.filter = (function () {
 		init: init
 	};
 }());
+
+window.sapUiSupportReport.collapseExpand.init();
+window.sapUiSupportReport.filter.init();

package/src/sap/ui/support/supportRules/report/resources/styles.css

@@ -1,3 +1,107 @@
+/* General */
+body {
+        font-family: "72-Web", Arial, Helvetica, sans-serif;
+}
+main > header > h1 {
+        font-size: 1.8em;
+}
+section h1 {
+        font-size: 1.2em;
+}
+table {
+        font-size: 0.9em;
+}
+.sapUiSupportTechInfoCntnt td:first-child {
+        width: 12%;
+}
+.sapUiSupportTechInfoCntnt .sapUiSupportTitle td {
+        padding-top: 10px;
+}
+.sapUiSupportTechInfoCntnt .sapUiSupportTitle label {
+        padding-left: 4px;
+        font-size: 18px;
+        font-weight: bold;
+}
+.sapUiIssueGroupContent {
+        margin-top: 8px;
+}
+.unchecked::before {
+        vertical-align: middle;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        content: "";
+        background: url("./images/unchecked.svg") no-repeat;
+}
+.checked::before {
+        vertical-align: middle;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        content: "";
+        background: url("./images/checked.svg") no-repeat;
+}
+td .unchecked::before,
+td .checked::before {
+        margin-right: 8px;
+}
+
+/* Filters functionality */
+ .filters {
+	margin: 10px;
+	font-size: 1em;
+}
+.filter {
+	padding: 5px;
+	display: inline-block;
+	cursor: pointer;
+	border-radius: 5px;
+}
+.filter-active {
+	background-color: #ddd;
+	box-shadow: 1px 1px 5px #888888;
+}
+.filtered {
+	display: none;
+}
+
+/* Expand/Collapse functionality */
+.expandable-control {
+        cursor: pointer;
+}
+.expanded {
+	padding-left: 30px;
+}
+.expanded > tr > td:first-child {
+	padding-left: 35px;
+}
+.collapsed {
+	display: none;
+}
+.expanded-content > .expandable-title::before {
+	margin-right: 8px;
+	vertical-align: middle;
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	content: "";
+	background: url("./images/expanded.svg") no-repeat;
+}
+.collapsed-content > .expandable-title::before {
+	margin-right: 8px;
+	vertical-align: middle;
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	content: "";
+	background: url("./images/collapsed.svg") no-repeat;
+}
+.expanded-content > h1.expandable-title::before,
+.collapsed-content > h1.expandable-title::before {
+	width: 22px;
+	height: 22px;
+}
+
 /* Table */
 table.sapUiTable {
         margin-top: 5px;

package/src/sap/ui/support/supportRules/ui/controllers/PresetsController.js

@@ -89,7 +89,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.support.supportRules.ui.controllers.BaseController
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @private
 	 * @alias sap.ui.support.supportRules.ui.controllers.PresetsController
 	 */