feat(Announcements Menu): Build announcements menu (#27011)

* #25737 Build announcements menu * #25737 Build announcements menu * #25737 Adding UI for announcements menu * Fixing test
dotCMS · Dec 14, 2023 · e2fa3ef · e2fa3ef
1 parent eee69a5
commit e2fa3ef
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 5 deletions.
diff --git a/...cms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.scss b/...cms-ui/src/app/view/components/_common/dot-dropdown-component/dot-dropdown.component.scss
@@ -12,7 +12,7 @@
         color: $black;
         overflow: hidden;
         position: absolute;
-        top: 25px;
+        top: $spacing-7;
         z-index: 100;
     }
 }
diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html
@@ -0,0 +1,28 @@
+<h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
+<ul class="announcements__list">
+    <li class="announcements__list-item" *ngFor="let announcement of announcementsData">
+        <span class="announcements__image pi" [ngClass]="announcement.iconClass"></span>
+        <div class="announcements__content">
+            <span class="announcements__label">{{ announcement.label }}</span>
+            <span class="announcements__date">{{ announcement.date }}</span>
+        </div>
+    </li>
+</ul>
+
+<div class="announcements__container">
+    <a class="announcements__link" data-testId="announcement_link" href="#/starter">{{
+        'announcements_show_all' | dm
+    }}</a>
+</div>
+
+<h5 class="announcements__title">{{ 'announcements_knowledge_center' | dm }}</h5>
+<div class="announcements__about">
+    <a *ngFor="let link of knowledgeCenterLinks" [href]="link.url" target="_blank">{{
+        link.label
+    }}</a>
+</div>
+
+<h5 class="announcements__title">{{ 'announcements_knowledge_contact_us' | dm }}</h5>
+<div class="announcements__about">
+    <a *ngFor="let link of contactLinks" [href]="link.url" target="_blank">{{ link.label }}</a>
+</div>
diff --git a/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss b/...dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.scss
@@ -0,0 +1,76 @@
+@use "variables" as *;
+
+:host {
+    max-height: 37rem;
+    overflow: scroll;
+    display: block;
+}
+
+.announcements__list {
+    list-style: none;
+    padding: 0;
+}
+
+.announcements__container {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.announcements__list-item {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-3;
+    padding: $spacing-3 $spacing-1;
+
+    &:hover {
+        border-radius: $spacing-0;
+        background-color: $color-palette-primary-100;
+    }
+}
+
+.announcements__title {
+    margin: 0;
+    padding-bottom: $spacing-1;
+    border-bottom: 1px solid $color-palette-gray-300;
+    font-size: $font-size-xl;
+}
+
+.announcements__content {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-0;
+}
+
+.announcements__date {
+    color: $color-palette-gray-800;
+    font-size: $font-size-sm;
+}
+
+.announcements__image {
+    height: 2.5rem;
+    width: 2.5rem;
+    background-color: var(--color-palette-secondary-200);
+    color: var(--color-palette-secondary-500);
+    border-radius: 50%;
+}
+
+.announcements__label {
+    font-weight: $font-weight-semi-bold;
+}
+
+.announcements__about {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-3;
+    margin: $spacing-3 0;
+}
+
+.announcements__link {
+    color: $color-palette-primary;
+    padding: $spacing-1;
+    border-radius: $border-radius-lg;
+    text-decoration: none;
+    &:hover {
+        background-color: $color-palette-primary-100;
+    }
+}
diff --git a/...-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.spec.ts b/...-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.spec.ts
@@ -0,0 +1,50 @@
+import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator';
+
+import { NgClass, NgForOf } from '@angular/common';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+import { DotMessageService } from '@dotcms/data-access';
+import { DotMessagePipe } from '@dotcms/ui';
+import { MockDotMessageService } from '@dotcms/utils-testing';
+
+import { DotToolbarAnnouncementsComponent } from './dot-toolbar-announcements.component';
+
+describe('DotToolbarAnnouncementsComponent', () => {
+    let spectator: Spectator<DotToolbarAnnouncementsComponent>;
+
+    const messageServiceMock = new MockDotMessageService({
+        announcements: 'Announcements',
+        announcements_show_all: 'Show All',
+        announcements_knowledge_center: 'Knowledge Center',
+        announcements_knowledge_contact_us: 'Contact Us'
+    });
+
+    const createComponent = createComponentFactory({
+        component: DotToolbarAnnouncementsComponent,
+        providers: [
+            HttpClientTestingModule,
+            DotMessagePipe,
+            { provide: DotMessageService, useValue: messageServiceMock }
+        ],
+        imports: [NgForOf, NgClass, DotMessagePipe]
+    });
+    beforeEach(() => {
+        spectator = createComponent();
+    });
+
+    it('should create', () => {
+        expect(spectator.component).toBeTruthy();
+    });
+
+    it('should display announcements', () => {
+        spectator.detectChanges();
+        const announcements = spectator.queryAll('.announcements__list-item');
+        expect(announcements.length).toBe(spectator.component.announcementsData.length);
+    });
+
+    it('should have a "Show All" link', () => {
+        spectator.detectChanges();
+        const showAllLink = spectator.query(byTestId('announcement_link'));
+        expect(showAllLink).toBeTruthy();
+    });
+});
diff --git a/...s/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.ts b/...s/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.ts
@@ -0,0 +1,60 @@
+import { NgClass, NgForOf } from '@angular/common';
+import { Component } from '@angular/core';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+@Component({
+    selector: 'dot-toolbar-announcements',
+    templateUrl: './dot-toolbar-announcements.component.html',
+    styleUrls: ['./dot-toolbar-announcements.component.scss'],
+    standalone: true,
+    imports: [NgForOf, NgClass, DotMessagePipe]
+})
+export class DotToolbarAnnouncementsComponent {
+    announcementsData = [
+        {
+            iconClass: 'pi pi-comment',
+            label: 'Get more out of the Block Editor',
+            date: '20 Jul 2023'
+        },
+        {
+            iconClass: 'pi pi-book',
+            label: '12 Reasons You Should Migrate to dotCMS Cloud.',
+            date: '27 Jul 2023'
+        },
+        {
+            iconClass: 'pi pi-megaphone',
+            label: 'Release 22.03 Designated as LTS Release',
+            date: '17 Jul 2023'
+        },
+        {
+            iconClass: 'pi pi-comment',
+            label: 'Which page rendering strategy is right for you?',
+            date: '10 Feb 2023'
+        },
+        { iconClass: 'pi pi-megaphone', label: 'New in Release 22.01', date: '07 Jan 2023' }
+    ];
+
+    knowledgeCenterLinks = [
+        {
+            label: 'Documentation',
+            url: 'https://www.dotcms.com/docs/latest/table-of-contents?utm_source=dotcms&utm_medium=application&utm_campaign=announcement_menu'
+        },
+        {
+            label: 'Blog',
+            url: 'https://www.dotcms.com/blog/?utm_source=dotcms&utm_medium=application&utm_campaign=announcement_menu'
+        },
+        { label: 'User Forums', url: 'https://groups.google.com/g/dotcms' }
+    ];
+
+    contactLinks = [
+        {
+            label: 'Customer Support',
+            url: 'https://www.dotcms.com/services/support/?utm_source=dotcms&utm_medium=application&utm_campaign=announcement_menu'
+        },
+        {
+            label: 'Professional Services',
+            url: 'https://www.dotcms.com/services/professional-services/?utm_source=dotcms&utm_medium=application&utm_campaign=announcement_menu'
+        }
+    ];
+}
diff --git a/...-toolbar-notifications/components/dot-notifications/dot-notifications-item.component.scss b/...-toolbar-notifications/components/dot-notifications/dot-notifications-item.component.scss
@@ -10,6 +10,7 @@ $notification-icon-size: 16px;
 dot-custom-time {
     color: $color-palette-gray-700;
     display: block;
+    font-size: $font-size-sm;
 }
 
 a {
@@ -42,7 +43,7 @@ a {
     display: flex;
     flex-direction: row;
     justify-content: center;
-    padding: $spacing-5 0;
+    padding: $spacing-3 0;
     align-items: self-start;
     gap: $spacing-3;
 }

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html
@@ -2,6 +2,17 @@
     notificationsUnreadCount
 }}</span>
 
+<ng-container *dotShowHideFeature="featureFlagAnnouncements">
+    <p-button
+        (click)="op.toggle($event)"
+        icon="pi pi-megaphone"
+        styleClass="p-button-rounded p-button-text"></p-button>
+
+    <p-overlayPanel #op>
+        <dot-toolbar-announcements />
+    </p-overlayPanel>
+</ng-container>
+
 <dot-dropdown-component
     id="dot-toolbar-notifications"
     [disabled]="!notifications.length"

diff --git a/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss b/...dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.scss
@@ -4,6 +4,7 @@ $notification-padding: $spacing-3;
 
 :host {
     position: relative;
+    display: flex;
 
     .badge {
         background-color: $color-palette-primary;

diff --git a/...s/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.ts b/...s/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.ts
@@ -3,6 +3,7 @@ import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { DotDropdownComponent } from '@components/_common/dot-dropdown-component/dot-dropdown.component';
 import { NotificationsService } from '@dotcms/app/api/services/notifications-service';
 import { DotcmsEventsService, LoginService } from '@dotcms/dotcms-js';
+import { FeaturedFlags } from '@dotcms/dotcms-models';
 import { INotification } from '@models/notifications';
 
 import { IframeOverlayService } from '../../../_common/iframe/service/iframe-overlay.service';
@@ -18,6 +19,7 @@ export class DotToolbarNotificationsComponent implements OnInit {
     existsMoreToLoad = false;
     notifications: INotification[] = [];
     notificationsUnreadCount = 0;
+    featureFlagAnnouncements = FeaturedFlags.FEATURE_FLAG_ANNOUNCEMENTS;
 
     private isNotificationsMarkedAsRead = false;
     private showNotifications = false;

diff --git a/...ents/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.module.ts b/...ents/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.module.ts
@@ -2,9 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
 
 import { DotCustomTimeModule } from '@components/_common/dot-custom-time.component/dot-custom-time.module';
 import { DotDropdownModule } from '@components/_common/dot-dropdown-component/dot-dropdown.module';
+import { DotShowHideFeatureDirective } from '@dotcms/app/shared/directives/dot-show-hide-feature/dot-show-hide-feature.directive';
 import { DotMessagePipe } from '@dotcms/ui';
 import { DotPipesModule } from '@pipes/dot-pipes.module';
 
@@ -14,14 +17,20 @@ import {
 } from './components/dot-notifications/dot-notifications.component';
 import { DotToolbarNotificationsComponent } from './dot-toolbar-notifications.component';
 
+import { DotToolbarAnnouncementsComponent } from '../dot-toolbar-announcements/dot-toolbar-announcements.component';
+
 @NgModule({
     imports: [
         CommonModule,
         DotDropdownModule,
         ButtonModule,
         DotCustomTimeModule,
         DotPipesModule,
-        DotMessagePipe
+        DotMessagePipe,
+        OverlayPanelModule,
+        DividerModule,
+        DotToolbarAnnouncementsComponent,
+        DotShowHideFeatureDirective
     ],
     exports: [DotToolbarNotificationsComponent],
     declarations: [

diff --git a/...p/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.scss b/...p/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.scss
@@ -7,6 +7,7 @@
 
 p-avatar {
     cursor: pointer;
+    padding: $spacing-2 0;
 }
 
 ::ng-deep #toolbar-header:hover {
@@ -29,6 +30,10 @@ p-avatar {
 }
 
 :host::ng-deep {
+    .p-menu {
+        margin-top: $spacing-0;
+    }
+
     .p-menu .p-menu-separator {
         margin: $spacing-1;
     }

diff --git a/core-web/libs/dotcms-models/src/lib/shared-models.ts b/core-web/libs/dotcms-models/src/lib/shared-models.ts
@@ -23,7 +23,8 @@ export const enum FeaturedFlags {
     FEATURE_FLAG_SEO_PAGE_TOOLS = 'FEATURE_FLAG_SEO_PAGE_TOOLS',
     FEATURE_FLAG_EDIT_URL_CONTENT_MAP = 'FEATURE_FLAG_EDIT_URL_CONTENT_MAP',
     FEATURE_FLAG_CONTENT_EDITOR2_ENABLED = 'CONTENT_EDITOR2_ENABLED',
-    FEATURE_FLAG_CONTENT_EDITOR2_CONTENT_TYPE = 'CONTENT_EDITOR2_CONTENT_TYPE'
+    FEATURE_FLAG_CONTENT_EDITOR2_CONTENT_TYPE = 'CONTENT_EDITOR2_CONTENT_TYPE',
+    FEATURE_FLAG_ANNOUNCEMENTS = 'FEATURE_FLAG_ANNOUNCEMENTS'
 }
 
 export type DotDropdownGroupSelectOption<T> = {

diff --git a/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java b/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java
@@ -65,7 +65,7 @@ public class ConfigurationResource implements Serializable {
 					new String[] {"EMAIL_SYSTEM_ADDRESS", "CHARSET","CONTENT_PALETTE_HIDDEN_CONTENT_TYPES",
 					"FEATURE_FLAG_EXPERIMENTS", "DOTFAVORITEPAGE_FEATURE_ENABLE", "FEATURE_FLAG_TEMPLATE_BUILDER_2",
 					"SHOW_VIDEO_THUMBNAIL", "EXPERIMENTS_MIN_DURATION", "EXPERIMENTS_MAX_DURATION", "EXPERIMENTS_DEFAULT_DURATION", "FEATURE_FLAG_SEO_IMPROVEMENTS",
-					"FEATURE_FLAG_SEO_PAGE_TOOLS", "FEATURE_FLAG_EDIT_URL_CONTENT_MAP", "CONTENT_EDITOR2_ENABLED", "CONTENT_EDITOR2_CONTENT_TYPE", "FEATURE_FLAG_NEW_BINARY_FIELD" }));
+					"FEATURE_FLAG_SEO_PAGE_TOOLS", "FEATURE_FLAG_EDIT_URL_CONTENT_MAP", "CONTENT_EDITOR2_ENABLED", "CONTENT_EDITOR2_CONTENT_TYPE", "FEATURE_FLAG_NEW_BINARY_FIELD", "FEATURE_FLAG_ANNOUNCEMENTS"  }));
 
 
 	private boolean isOnBlackList(final String key) {

diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -2936,6 +2936,10 @@ notifications_structure_identifiers_updated=All Identifiers were successfully up
 notifications_title=Notifications
 notify-new-users=Notify New Users
 notify=Notify
+announcements=Announcements
+announcements_show_all=Show All
+announcements_knowledge_center=Knowledge Center
+announcements_knowledge_contact_us=Contact Us
 November=November
 num-of-hits=# of Hits
 num-of-votes=# of Votes