feat(manager/web): add manager resources link (#1463)

* mostly done, still need to test link #2

* Update outline-server-settings.ts to add margin-top and margin-bottom to documentation-link

* remove api documentation, and use iron-icon

* use iron icon icon

* add shouldShowDocumentationLink

* Update src/server_manager/web_app/ui_components/app-root.ts

Co-authored-by: Vinicius Fortuna <fortuna@users.noreply.github.com>

* make hasTranslation better

* update message id and indentation

---------

Co-authored-by: Vinicius Fortuna <fortuna@users.noreply.github.com>

src/server_manager/messages/en.json

@@ -143,6 +143,7 @@
   "gcp-type-network-tag": "Type 'outline' in the 'Network tags' field.",
   "gcp-type-outline-server": "Type 'outline-server' in the 'Name' field.",
   "key": "Key {keyId}",
+  "manager-resources": "Manager Resources",
   "manual-server-assign-firewall": "Assign firewall rule",
   "manual-server-assign-group": "Assign Security Group",
   "manual-server-create-firewall": "Create a firewall rule",

src/server_manager/messages/master_messages.json

@@ -714,6 +714,10 @@
       }
     }
   },
+  "manager_resources": {
+    "message": "Manager Resources",
+    "description": "This string appears within the manager sidebar as a link to the manager documentation."
+  },
   "manual_server_assign_firewall": {
     "message": "Assign firewall rule",
     "description": "This string appears in the server setup view as a sub-header of a section that provides instructions to configure the server's firewall."

src/server_manager/web_app/ui_components/app-root.ts

@@ -274,6 +274,12 @@ export class AppRoot extends polymerElementWithLocalize {
       #links-footer {
         margin-top: 36px;
       }
+      #appDrawer .manager-resources-link {
+        color: var(--primary-green);
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
       .legal-links {
         margin: 0 -6px;
       }
@@ -391,6 +397,13 @@ export class AppRoot extends polymerElementWithLocalize {
 
           <!-- Links section -->
           <paper-listbox>
+            <a
+              class="manager-resources-link"
+              hidden$="[[!showManagerResourcesLink]]"
+              href="https://www.reddit.com/r/outlinevpn/wiki/index/">
+                <span>[[localize('manager-resources')]]</span>
+                <iron-icon icon="open-in-new" />
+            </a>
             <span on-tap="maybeCloseDrawer"><a href="https://support.getoutline.org/s/article/Data-collection">[[localize('nav-data-collection')]]</a></span>
             <span on-tap="submitFeedbackTapped">[[localize('nav-feedback')]]</span>
             <span on-tap="maybeCloseDrawer"><a href="https://s3.amazonaws.com/outline-vpn/index.html#/en/support/">[[localize('nav-help')]]</a></span>
@@ -697,10 +710,7 @@ export class AppRoot extends polymerElementWithLocalize {
         observer: '_currentPageChanged',
       },
       shouldShowSideBar: {type: Boolean},
-      sideBarMarginClass: {
-        type: String,
-        computed: '_computeSideBarMarginClass(shouldShowSideBar)',
-      },
+      showManagerResourcesLink: {type: Boolean},
     };
   }
 
@@ -714,6 +724,7 @@ export class AppRoot extends polymerElementWithLocalize {
   outlineVersion = '';
   currentPage = 'intro';
   shouldShowSideBar = false;
+  showManagerResourcesLink = false;
 
   constructor() {
     super();
@@ -769,6 +780,21 @@ export class AppRoot extends polymerElementWithLocalize {
     (this.$.appDrawer as AppDrawerElement).align = alignDir;
     (this.$.sideBar as AppDrawerElement).align = alignDir;
     this.language = language;
+
+    this.showManagerResourcesLink = this.hasTranslation('manager-resources');
+  }
+
+  hasTranslation(key: string) {
+    let message;
+
+    try {
+      message = this.localize(key);
+    } catch (e) {
+      // failed to find translation
+      message = '';
+    }
+
+    return message !== key && message !== '';
   }
 
   showIntro() {