feat(manager): adds 'if-messages' utility that only renders contents if messages exist (#1482)

* does it

* Update if_messages.ts

* address feedback and fix compilation

* Update src/server_manager/web_app/ui_components/if_messages.ts

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

* annotate converter string

---------

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

Author: daniellacosse

package-lock.json

@@ -21,7 +21,7 @@
     "jasmine": "^3.5.0",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
-    "typescript": "^4"
+    "typescript": "^4.9.5"
   },
   "engines": {
     "node": "18.x.x"

package.json

@@ -49,6 +49,7 @@
     "google-auth-library": "^8.0.2",
     "intl-messageformat": "^7",
     "jsonic": "^0.3.1",
+    "lit": "^3.1.1",
     "lit-element": "^2.3.1",
     "node-forge": "^1.3.1",
     "request": "^2.87.0",

src/server_manager/package.json

@@ -42,6 +42,8 @@ import './outline-region-picker-step';
 import './outline-server-list';
 import './outline-tos-view';
 
+import './if_messages';
+
 import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior';
 import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class';
 import {html} from '@polymer/polymer/lib/utils/html-tag';
@@ -397,13 +399,14 @@ 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>
+            <if-messages message-ids="manager-resources" localize="[[localize]]">
+              <a
+                class="manager-resources-link"
+                href="https://www.reddit.com/r/outlinevpn/wiki/index/">
+                  <span>[[localize('manager-resources')]]</span>
+                  <iron-icon icon="open-in-new" />
+              </a>
+            </if-messages>
             <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>

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

@@ -0,0 +1,46 @@
+/*
+  Copyright 2024 The Outline Authors
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import {nothing, LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('if-messages')
+export class IfMessages extends LitElement {
+  @property({
+    type: Array,
+    attribute: 'message-ids',
+    converter: (value: string) => value.split(/,\s*/),
+  })
+  messageIDs: string[] = [];
+  @property({type: Function, attribute: 'localize'}) localize: (
+    msgId: string,
+    ...params: string[]
+  ) => string;
+
+  render() {
+    if (
+      this.messageIDs.some((id) => {
+        const result = this.localize(id);
+
+        return result === id || result === undefined || result === '';
+      })
+    ) {
+      return nothing;
+    }
+
+    return html`<slot></slot>`;
+  }
+}