From 4e383f5501f9948e84a6d437691438976e64094e Mon Sep 17 00:00:00 2001 From: Daniel LaCosse <3759828+daniellacosse@users.noreply.github.com> Date: Thu, 25 Jan 2024 13:17:16 -0500 Subject: [PATCH] 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 * annotate converter string --------- Co-authored-by: Vinicius Fortuna --- package-lock.json | 115 ++++++++++++++++-- package.json | 2 +- src/server_manager/package.json | 1 + .../web_app/ui_components/app-root.ts | 17 +-- .../web_app/ui_components/if_messages.ts | 46 +++++++ 5 files changed, 165 insertions(+), 16 deletions(-) create mode 100644 src/server_manager/web_app/ui_components/if_messages.ts diff --git a/package-lock.json b/package-lock.json index 054ae1f2b..58344102e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,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" @@ -833,6 +833,19 @@ "dev": true, "license": "MIT" }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", + "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.3.tgz", + "integrity": "sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.2" + } + }, "node_modules/@malept/cross-spawn-promise": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz", @@ -1938,6 +1951,11 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "node_modules/@types/verror": { "version": "1.10.6", "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz", @@ -11803,6 +11821,16 @@ "node": ">=0.10.0" } }, + "node_modules/lit": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz", + "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==", + "dependencies": { + "@lit/reactive-element": "^2.0.0", + "lit-element": "^4.0.0", + "lit-html": "^3.1.0" + } + }, "node_modules/lit-element": { "version": "2.5.1", "license": "BSD-3-Clause", @@ -11814,6 +11842,24 @@ "version": "1.4.1", "license": "BSD-3-Clause" }, + "node_modules/lit/node_modules/lit-element": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.3.tgz", + "integrity": "sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.1.2", + "@lit/reactive-element": "^2.0.0", + "lit-html": "^3.1.0" + } + }, + "node_modules/lit/node_modules/lit-html": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", + "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-bmfont": { "version": "1.4.1", "dev": true, @@ -18235,9 +18281,10 @@ } }, "node_modules/typescript": { - "version": "4.4.4", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true, - "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -19669,7 +19716,7 @@ "@polymer/paper-tooltip": "^3.0.0", "@sentry/electron": "^4.14.0", "@webcomponents/webcomponentsjs": "^2.0.0", - "circle-flags": "git+ssh://git@github.com/HatScripts/circle-flags.git#a21fc224b3079631993b3b8189c490fa0899ea9f", + "circle-flags": "https://github.com/HatScripts/circle-flags", "clipboard-polyfill": "^2.4.6", "dotenv": "~8.2.0", "electron-updater": "^4.1.2", @@ -19677,6 +19724,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", @@ -19724,7 +19772,7 @@ "dependencies": { "ip-regex": "^4.1.0", "js-yaml": "^3.12.0", - "outline-shadowsocksconfig": "git+ssh://git@github.com/Jigsaw-Code/outline-shadowsocksconfig.git#add590ed57277653d02dd2031ae301500ae881e1", + "outline-shadowsocksconfig": "github:Jigsaw-Code/outline-shadowsocksconfig#v0.2.0", "prom-client": "^11.1.3", "randomstring": "^1.1.5", "restify": "^11.1.0", @@ -20324,6 +20372,19 @@ "version": "2.0.4", "dev": true }, + "@lit-labs/ssr-dom-shim": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", + "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" + }, + "@lit/reactive-element": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.3.tgz", + "integrity": "sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.2" + } + }, "@malept/cross-spawn-promise": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz", @@ -21264,6 +21325,11 @@ "version": "4.0.1", "dev": true }, + "@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" + }, "@types/verror": { "version": "1.10.6", "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz", @@ -28111,6 +28177,36 @@ } } }, + "lit": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz", + "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==", + "requires": { + "@lit/reactive-element": "^2.0.0", + "lit-element": "^4.0.0", + "lit-html": "^3.1.0" + }, + "dependencies": { + "lit-element": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.3.tgz", + "integrity": "sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==", + "requires": { + "@lit-labs/ssr-dom-shim": "^1.1.2", + "@lit/reactive-element": "^2.0.0", + "lit-html": "^3.1.0" + } + }, + "lit-html": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz", + "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + } + } + }, "lit-element": { "version": "2.5.1", "requires": { @@ -29119,7 +29215,7 @@ "@types/request": "^2.47.1", "@types/semver": "^5.5.0", "@webcomponents/webcomponentsjs": "^2.0.0", - "circle-flags": "git+ssh://git@github.com/HatScripts/circle-flags.git#a21fc224b3079631993b3b8189c490fa0899ea9f", + "circle-flags": "https://github.com/HatScripts/circle-flags", "clipboard-polyfill": "^2.4.6", "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.8.1", @@ -29142,6 +29238,7 @@ "karma-chrome-launcher": "^3.1.0", "karma-jasmine": "^4.0.1", "karma-webpack": "^5.0.0", + "lit": "^3.1.1", "lit-element": "^2.3.1", "node-forge": "^1.3.1", "node-jq": "^1.11.2", @@ -29179,7 +29276,7 @@ "@types/tmp": "^0.2.1", "ip-regex": "^4.1.0", "js-yaml": "^3.12.0", - "outline-shadowsocksconfig": "git+ssh://git@github.com/Jigsaw-Code/outline-shadowsocksconfig.git#add590ed57277653d02dd2031ae301500ae881e1", + "outline-shadowsocksconfig": "github:Jigsaw-Code/outline-shadowsocksconfig#v0.2.0", "prom-client": "^11.1.3", "randomstring": "^1.1.5", "restify": "^11.1.0", @@ -32805,7 +32902,9 @@ } }, "typescript": { - "version": "4.4.4", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index 46071f71b..cdaf1fd16 100644 --- a/package.json +++ b/package.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" diff --git a/src/server_manager/package.json b/src/server_manager/package.json index 3f981b2ed..d09d2bd58 100644 --- a/src/server_manager/package.json +++ b/src/server_manager/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", diff --git a/src/server_manager/web_app/ui_components/app-root.ts b/src/server_manager/web_app/ui_components/app-root.ts index 57699dd56..aa8b639f6 100644 --- a/src/server_manager/web_app/ui_components/app-root.ts +++ b/src/server_manager/web_app/ui_components/app-root.ts @@ -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 { - - [[localize('manager-resources')]] - - + + + [[localize('manager-resources')]] + + + [[localize('nav-data-collection')]] [[localize('nav-feedback')]] [[localize('nav-help')]] diff --git a/src/server_manager/web_app/ui_components/if_messages.ts b/src/server_manager/web_app/ui_components/if_messages.ts new file mode 100644 index 000000000..1261fffd5 --- /dev/null +++ b/src/server_manager/web_app/ui_components/if_messages.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``; + } +}