From 97bc301bf8943c96119a5c762e79ce4359ed0673 Mon Sep 17 00:00:00 2001
From: Andy Butland <abutland73@gmail.com>
Date: Tue, 8 Jun 2021 10:08:27 +0200
Subject: [PATCH] Adds the "works on Cloud" indicator to the package list and
 details screen in the back-office.

---
 .../src/less/components/umb-packages.less        | 10 ++++++++++
 .../src/views/packages/views/repo.html           | 16 ++++++++++++++++
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml    |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml |  1 +
 4 files changed, 28 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
index 0045bed140..f660da8f8b 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -157,6 +157,16 @@
     color: @red !important;
 }
 
+.umb-package-link .umb-package-cloud {
+    margin-top: 8px;
+    font-size: 11px;
+    height: 11px; // ensures vertical space is taken up even if "works on cloud" isn't visible
+}
+
+.umb-package-link .umb-package-cloud .icon-cloud {
+    color: #2eadaf !important;
+}
+
 // Version
 .umb-package-version {
     display: inline-flex;
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
index 42b538f9ad..e92bd73535 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
@@ -62,6 +62,12 @@
                                             <strong>{{package.likes}}</strong>
                                         </small>
                                     </div>
+                                    <div class="umb-package-cloud">
+                                        <div ng-if="package.certifiedToWorkOnUmbracoCloud">
+                                            <i class="icon-cloud" aria-hidden="true"></i>
+                                            <span><localize key="packager_certifiedToWorkOnUmbracoCloud">Certified to work on Umbraco Cloud</localize></span>
+                                        </div>
+                                    </div>
 
                                 </div>
                             </div>
@@ -101,6 +107,12 @@
                                             <strong>{{ package.likes }}</strong>
                                         </small>
                                     </div>
+                                    <div class="umb-package-cloud">
+                                        <div ng-if="package.certifiedToWorkOnUmbracoCloud">
+                                            <i class="icon-cloud" aria-hidden="true"></i>
+                                            <span><localize key="packager_certifiedToWorkOnUmbracoCloud">Certified to work on Umbraco Cloud</localize></span>
+                                        </div>
+                                    </div>
 
                                 </div>
                             </div>
@@ -269,6 +281,10 @@
                                     <div class="umb-package-details__information-item-content">{{vm.package.likes}}</div>
                                 </div>
 
+                                <div class="umb-package-details__information-item" ng-if="vm.package.certifiedToWorkOnUmbracoCloud">
+                                    <div class="umb-package-details__information-item-label"><localize key="packager_certifiedToWorkOnUmbracoCloud">Certified to work on Umbraco CLoud</localize></div>
+                                </div>
+
                             </div>
                         </umb-box-content>
                     </umb-box>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index c76747c5a0..3ecafd1d67 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -1288,6 +1288,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="installStateComplete">All done, your browser will now refresh, please wait...</key>
     <key alias="installStateCompleted">Please click 'Finish' to complete installation and reload the page.</key>
     <key alias="installStateUploading">Uploading package...</key>
+    <key alias="certifiedToWorkOnUmbracoCloud">Certified to work on Umbraco Cloud</key>
   </area>
   <area alias="paste">
     <key alias="doNothing">Paste with full formatting (Not recommended)</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index ba7586dde2..ec56665a9c 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -1294,6 +1294,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="installStateComplete">All done, your browser will now refresh, please wait...</key>
     <key alias="installStateCompleted">Please click 'Finish' to complete installation and reload the page.</key>
     <key alias="installStateUploading">Uploading package...</key>
+    <key alias="certifiedToWorkOnUmbracoCloud">Certified to work on Umbraco Cloud</key>
   </area>
   <area alias="paste">
     <key alias="doNothing">Paste with full formatting (Not recommended)</key>