Add a component for the enterprise edition banner

frontend/src/app/components/enterprise-banner/enterprise-banner.component.ts

@@ -0,0 +1,38 @@
+import {Component, Input} from "@angular/core";
+import {enterpriseEditionUrl} from "core-app/globals/constants.const";
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
+
+@Component({
+  selector: 'enterprise-banner',
+  template: `
+      <div class="notification-box">
+        <div class="notification-box--content">
+          <p class="-bold" [textContent]="text.enterpriseFeature"></p>
+          <p [textContent]="textMessage"></p>
+          <a [href]="eeLink()"
+             target='blank'
+             [textContent]="linkMessage"></a>
+        </div>
+      </div>
+  `
+})
+export class EnterpriseBannerComponent {
+  @Input() public textMessage:string;
+  @Input() public linkMessage:string;
+  @Input() public opReferrer:string;
+
+  public text:any = {
+    enterpriseFeature: this.I18n.t('js.upsale.ee_only'),
+  }
+
+  constructor(protected I18n:I18nService) {
+  }
+
+  public eeLink() {
+    if (this.opReferrer) {
+      return enterpriseEditionUrl + '&op_referrer=' + this.opReferrer;
+    } else {
+      return enterpriseEditionUrl;
+    }
+  }
+}

frontend/src/app/components/filters/query-filters/query-filters.component.html

@@ -63,17 +63,12 @@
         </select>
       </div>
 
-      <div class="advanced-filters--add-filter-info"
-           *ngIf="eeShowBanners">
-        <div class="notification-box">
-          <div class="notification-box--content">
-            {{ text.upsale_for_more }}
-            <a href="https://www.openproject.org/enterprise-edition/?op_edtion=community-edition&op_referrer=wp-filter#filters"
-               target='blank'
-               [textContent]="text.upsale_link"></a>
-          </div>
-        </div>
-      </div>
+      <enterprise-banner class="advanced-filters--add-filter-info"
+                         *ngIf="eeShowBanners"
+                         [linkMessage]="text.upsale_link"
+                         [textMessage]="text.upsale_for_more"
+                         opReferrer="wp-filter#filters">
+      </enterprise-banner>
     </li>
   </ul>
 </fieldset>

frontend/src/app/components/wp-table/configuration-modal/tabs/columns-tab.component.html

@@ -12,9 +12,10 @@
     </div>
   </ng-container>
 </div>
-<div *ngIf="eeShowBanners" class="ee-relation-columns-upsale">
-  {{text.upsaleRelationColumns}}
-  <a href="https://www.openproject.org/enterprise-edition/?op_edtion=community-edition&op_referrer=wp-list-columns#relations"
-     target='blank'
-     [textContent]="text.upsaleCheckOutLink"></a>
-</div>
+
+<enterprise-banner class="ee-relation-columns-upsale"
+                   *ngIf="eeShowBanners"
+                   [linkMessage]="text.upsaleCheckOutLink"
+                   [textMessage]="text.upsaleRelationColumns"
+                   opReferrer="wp-list-columns#relations">
+</enterprise-banner>

frontend/src/app/components/wp-table/configuration-modal/tabs/highlighting-tab.component.html

@@ -1,15 +1,10 @@
 <div>
-  <div *ngIf="eeShowBanners" class="ee-attribute-highlighting-upsale notification-box -ee-upsale">
-    <div class="notification-box--content">
-      <p><strong [textContent]="text.upsaleEnterpriseOnly"></strong></p>
-      <p [textContent]="text.upsaleAttributeHighlighting"></p>
-      <p>
-        <a href="https://www.openproject.org/enterprise-edition/?op_edtion=community-edition&op_referrer=wp-attribute-highlighting#attribute-highlighting"
-           target='blank'
-           [textContent]="text.upsaleCheckOutLink"></a>
-      </p>
-    </div>
-  </div>
+  <enterprise-banner class="ee-attribute-highlighting-upsale -ee-upsale"
+                     *ngIf="eeShowBanners"
+                     [linkMessage]="text.upsaleCheckOutLink"
+                     [textMessage]="text.upsaleAttributeHighlighting"
+                     opReferrer="wp-attribute-highlighting#attribute-highlighting">
+  </enterprise-banner>
   <form>
     <p [textContent]="text.highlighting_mode.description"></p>
     <div class="form--field -full-width">

frontend/src/app/components/wp-table/configuration-modal/tabs/highlighting-tab.component.ts

@@ -37,7 +37,6 @@ export class WpTableConfigurationHighlightingTab implements TabComponent {
       priority: this.I18n.t('js.work_packages.table_configuration.highlighting_mode.priority'),
       entire_row_by: this.I18n.t('js.work_packages.table_configuration.highlighting_mode.entire_row_by'),
     },
-    upsaleEnterpriseOnly: this.I18n.t('js.upsale.ee_only'),
     upsaleAttributeHighlighting: this.I18n.t('js.work_packages.table_configuration.upsale.attribute_highlighting'),
     upsaleCheckOutLink: this.I18n.t('js.work_packages.table_configuration.upsale.check_out_link')
   };

frontend/src/app/globals/constants.const.ts

@@ -0,0 +1 @@
+export const enterpriseEditionUrl = "https://www.openproject.org/enterprise-edition/?op_edtion=community-edition";

frontend/src/app/modules/common/openproject-common.module.ts

@@ -80,6 +80,7 @@ import {EditableToolbarTitleComponent} from "core-app/modules/common/editable-to
 import {UserAvatarComponent} from "core-components/user/user-avatar/user-avatar.component";
 import {GonService} from "core-app/modules/common/gon/gon.service";
 import {BackRoutingService} from "core-app/modules/common/back-routing/back-routing.service";
+import {EnterpriseBannerComponent} from "core-components/enterprise-banner/enterprise-banner.component";
 
 export function bootstrapModule(injector:Injector) {
   return () => {
@@ -165,6 +166,9 @@ export function bootstrapModule(injector:Injector) {
 
     // User Avatar
     UserAvatarComponent,
+
+    // Enterprise Edition
+    EnterpriseBannerComponent,
   ],
   declarations: [
     OpDatePickerComponent,
@@ -218,6 +222,9 @@ export function bootstrapModule(injector:Injector) {
 
     // User Avatar
     UserAvatarComponent,
+
+    // Enterprise Edition
+    EnterpriseBannerComponent,
   ],
   entryComponents: [
     OpDateTimeComponent,