From 7fc3ec82bd4aa47377ccdbb174376712efd0bd45 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Mon, 23 Nov 2020 07:36:12 +0100
Subject: [PATCH] Help drawer adjustments (#9090)

* Format document

* Ensure help drawer can be closed using esc key

* Add rel="noopener" for security reasons

* Remove additional whitespace
---
 .../src/views/common/drawers/help/help.html   | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 6b924d0aef..04b5501846 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -2,8 +2,8 @@
     <umb-drawer-view>
 
         <umb-drawer-header
-            title="{{ vm.title }}"
-            description="{{ vm.subtitle }}">
+            title="{{vm.title}}"
+            description="{{vm.subtitle}}">
         </umb-drawer-header>
 
         <umb-drawer-content>
@@ -14,7 +14,6 @@
 
                 <div class="umb-help-list">
 
-
                     <div ng-repeat="tour in vm.docTypeTours | orderBy:'groupOrder'">
                         <div data-element="tour-{{tour.alias}}" class="umb-help-list-item">
                             <div class="umb-help-list-item__content justify-between">
@@ -22,7 +21,7 @@
                                     <span class="umb-help-list-item__title">{{ tour.name }}</span>
                                 </div>
                                 <div>
-                                    <umb-button  button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>
+                                    <umb-button button-style="primary" size="xxs" type="button" label="Start" action="vm.startTour(tour)"></umb-button>
                                 </div>
                             </div>
                         </div>
@@ -98,7 +97,7 @@
                 </h5>
                 <ul class="umb-help-list">
                     <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
-                        <a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                        <a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" rel="noopener" href="" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                             <span>
                                 <span class="umb-help-list-item__title">
                                     <span class="bold">{{topic.name}}</span>
@@ -106,50 +105,50 @@
                                 </span>
                                 <span class="umb-help-list-item__description">{{topic.description}}</span>
                             </span>
-                    </a>
-                </li>
-            </ul>
-        </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
 
-        <!--  Umbraco tv content -->
-        <div class="umb-help-section" data-element="help-videos" ng-if="vm.hasAccessToSettings">
-            <h5 class="umb-help-section__title" ng-if="vm.videos.length > 0">
-                <localize key="general_videos">Videos</localize>
-            </h5>
-            <ul class="umb-help-list">
-                <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
-                <a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                        <i class="umb-help-list-item__icon icon-tv-old" aria-hidden="true"></i>
-                        <span class="umb-help-list-item__title">{{video.title}}</span>
-                        <i class="umb-help-list-item__open-icon icon-out" aria-hidden="true"></i>
-                    </a>
-                </li>
-            </ul>
-        </div>
+            <!--  Umbraco tv content -->
+            <div class="umb-help-section" data-element="help-videos" ng-if="vm.hasAccessToSettings">
+                <h5 class="umb-help-section__title" ng-if="vm.videos.length > 0">
+                    <localize key="general_videos">Videos</localize>
+                </h5>
+                <ul class="umb-help-list">
+                    <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
+                    <a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" rel="noopener" href="" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                            <i class="umb-help-list-item__icon icon-tv-old" aria-hidden="true"></i>
+                            <span class="umb-help-list-item__title">{{video.title}}</span>
+                            <i class="umb-help-list-item__open-icon icon-out" aria-hidden="true"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
 
-        <!--  Links -->
-        <div class="umb-help-section" data-element="help-links" ng-if="vm.hasAccessToSettings">
-            <a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="https://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                <i class="umb-help-badge__icon icon-tv-old" aria-hidden="true"></i>
-                <div class="umb-help-badge__title">
-                    <localize key="help_umbracoTv">Visit umbraco.tv</localize>
-                </div>
-                <small>
-                    <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
-                </small>
-            </a>
+            <!--  Links -->
+            <div class="umb-help-section" data-element="help-links" ng-if="vm.hasAccessToSettings">
+                <a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" rel="noopener" href="https://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <i class="umb-help-badge__icon icon-tv-old" aria-hidden="true"></i>
+                    <div class="umb-help-badge__title">
+                        <localize key="help_umbracoTv">Visit umbraco.tv</localize>
+                    </div>
+                    <small>
+                        <localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize>
+                    </small>
+                </a>
 
-            <a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" href="https://our.umbraco.com?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
-                <i class="umb-help-badge__icon icon-favorite" aria-hidden="true"></i>
+                <a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" rel="noopener" href="https://our.umbraco.com?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
+                    <i class="umb-help-badge__icon icon-favorite" aria-hidden="true"></i>
 
-                <div class="umb-help-badge__title">
-                    <localize key="help_umbracoForum">Visit our.umbraco.com</localize>
-                </div>
-                <small>
-                    <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
-                </small>
-            </a>
-        </div>
+                    <div class="umb-help-badge__title">
+                        <localize key="help_umbracoForum">Visit our.umbraco.com</localize>
+                    </div>
+                    <small>
+                        <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
+                    </small>
+                </a>
+            </div>
 
         </umb-drawer-content>
 
@@ -159,6 +158,7 @@
                 <umb-button
                     alias="close"
                     type="button"
+                    shortcut="esc"
                     button-style="link"
                     label-key="general_close"
                     action="vm.closeDrawer()">