Replace notifications

app/components/notifications/index_page_header_component.html.erb

@@ -0,0 +1,24 @@
+<%= render(Primer::OpenProject::PageHeader.new) do |header|
+  header.with_title { page_title }
+  header.with_breadcrumbs(breadcrumb_items)
+
+  header.with_action_button(tag: :a,
+                            mobile_icon: :'op-read-all',
+                            mobile_label: I18n.t("js.notifications.center.mark_all_read"),
+                            href: notifications_path,
+                            size: :medium,
+                            aria: { label: I18n.t("js.notifications.center.mark_all_read") }) do |button|
+    button.with_leading_visual_icon(icon: :'op-read-all')
+    I18n.t("js.notifications.center.mark_all_read")
+  end
+
+  header.with_action_button(tag: :a,
+                            mobile_icon: :gear,
+                            mobile_label: I18n.t("js.notifications.settings.title"),
+                            href: notifications_path,
+                            size: :medium,
+                            aria: { label: I18n.t("js.notifications.settings.title") }) do |button|
+    button.with_leading_visual_icon(icon: :gear)
+    I18n.t("js.notifications.settings.title")
+  end
+end %>

app/components/notifications/index_page_header_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2010-2024 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+
+module Notifications
+  class IndexPageHeaderComponent < ApplicationComponent
+    include ApplicationHelper
+
+    def initialize(project: nil)
+      super
+      @project = project
+    end
+
+    def page_title
+      I18n.t("js.notifications.title")
+    end
+
+    def breadcrumb_items
+      [page_title]
+    end
+  end
+end

app/controllers/notifications_controller.rb

@@ -0,0 +1,38 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2024 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+class NotificationsController < ApplicationController
+  before_action :require_login
+  no_authorization_required! :index
+
+  def index
+    # Frontend will handle rendering
+    # but we will need to render with notification specific layout
+    render layout: "angular/notifications"
+  end
+end

app/helpers/menus/notifications.rb

@@ -0,0 +1,102 @@
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 2012-2024 the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module Menus
+  class Notifications
+    include Rails.application.routes.url_helpers
+
+    attr_reader :controller_path, :params, :current_user
+
+    def initialize(controller_path:, params:, current_user:)
+      # rubocop:disable Rails/HelperInstanceVariable
+      @controller_path = controller_path
+      @params = params
+      @current_user = current_user
+      # rubocop:enable Rails/HelperInstanceVariable
+    end
+
+    def first_level_menu_items
+      [
+        OpenProject::Menu::MenuGroup.new(header: nil,
+                                         children: [inbox_menu]),
+        OpenProject::Menu::MenuGroup.new(header: I18n.t("js.notifications.menu.by_reason"),
+                                         children: reason_filters),
+        OpenProject::Menu::MenuGroup.new(header: I18n.t("js.notifications.menu.by_project"),
+                                         children: project_filters),
+      ]
+    end
+
+    private
+
+    def inbox_menu
+      OpenProject::Menu::MenuItem.new(title: I18n.t("js.notifications.menu.inbox"),
+                                      icon: :inbox,
+                                      href: notifications_path,
+                                      selected: !(params[:name] && params[:filter]))
+    end
+
+    def selected?(filter, name)
+      params[:filter] == filter && params[:name] == name
+    end
+
+    def reason_filters
+      [
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.notifications.menu.mentioned'),
+                                        icon: :mention,
+                                        href: notifications_path(filter: 'reason', name: 'mentioned'),
+                                        selected: selected?('reason', 'mentioned')),
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.label_assignee'),
+                                        icon: :assigned,
+                                        href: notifications_path(filter: 'reason', name: 'assigned'),
+                                        selected: selected?('reason', 'assigned')),
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.notifications.menu.accountable'),
+                                        icon: :accountable,
+                                        href: notifications_path(filter: 'reason', name: 'responsible'),
+                                        selected: selected?('reason', 'responsible')),
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.notifications.menu.watched'),
+                                        icon: :watching,
+                                        href: notifications_path(filter: 'reason', name: 'watched'),
+                                        selected: selected?('reason', 'watched')),
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.notifications.menu.date_alert'),
+                                        icon: :"date-alert", # TODO ee icon
+                                        href: notifications_path(filter: 'reason', name: 'dateAlert'),
+                                        selected: selected?('reason', 'dateAlert')),
+        OpenProject::Menu::MenuItem.new(title: I18n.t('js.notifications.menu.shared'),
+                                        icon: :share, # TODO ee icon
+                                        href: notifications_path(filter: 'reason', name: 'shared'),
+                                        selected: selected?('reason', 'shared')),
+      ]
+    end
+
+    def project_filters
+      # TODO
+      []
+    end
+
+  end
+end

app/views/layouts/angular/notifications.html.erb

@@ -28,8 +28,5 @@ See docs/COPYRIGHT.rdoc for more details.
 ++#%>
 
 <% write_augur_to_gon %>
-<%= content_for :content_body do %>
-  <openproject-base></openproject-base>
-<% end -%>
 
 <%= render template: "layouts/base", locals: local_assigns.merge({ menu_name: :notifications_menu }) %>

app/views/notifications/index.html.erb

@@ -0,0 +1,4 @@
+<% html_title t("js.notifications.title") %>
+<%= render(Notifications::IndexPageHeaderComponent.new) %>
+
+<%= angular_component_tag "opce-notification-center" %>

config/routes.rb

@@ -699,9 +699,22 @@ Rails.application.routes.draw do
 
   root to: "account#login"
 
+  concern :with_split_view do |options|
+    get "details/:id(/:tab)", on: :collection, action: options.fetch(:action, :index)
+  end
+
+  resources :notifications, only: :index do
+    concerns :with_split_view
+
+    collection do
+      resource :menu, module: :notifications, only: %i[show], as: :notifications_menu
+    end
+  end
+
   namespace :notifications do
     resource :menu, only: %i[show]
   end
+
   scope :notifications do
     get "/share_upsale" => "angular#notifications_layout", as: "notifications_share_upsale"
     get "/date_alerts" => "angular#notifications_layout", as: "notifications_date_alert_upsale"

frontend/src/app/app.module.ts

@@ -165,6 +165,9 @@ import {
 } from 'core-app/features/user-preferences/reminder-settings/page/reminder-settings-page.component';
 import { OpenProjectMyAccountModule } from 'core-app/features/user-preferences/user-preferences.module';
 import { OpAttachmentsComponent } from 'core-app/shared/components/attachments/attachments.component';
+import {
+  InAppNotificationCenterComponent,
+} from 'core-app/features/in-app-notifications/center/in-app-notification-center.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -362,5 +365,6 @@ export class OpenProjectModule {
     registerCustomElement('opce-display-job-status-page', DisplayJobPageComponent, { injector });
     registerCustomElement('opce-notification-settings', NotificationsSettingsPageComponent, { injector });
     registerCustomElement('opce-reminder-settings', ReminderSettingsPageComponent, { injector });
+    registerCustomElement('opce-notification-center', InAppNotificationCenterComponent, { injector });
   }
 }

frontend/src/app/core/routing/openproject.routes.ts

@@ -34,7 +34,6 @@ import { FirstRouteService } from 'core-app/core/routing/first-route-service';
 import { Ng2StateDeclaration, StatesModule } from '@uirouter/angular';
 import { appBaseSelector, ApplicationBaseComponent } from 'core-app/core/routing/base/application-base.component';
 import { BackRoutingService } from 'core-app/features/work-packages/components/back-routing/back-routing.service';
-import { IAN_LAZY_ROUTES } from 'core-app/features/in-app-notifications/in-app-notifications.lazy-routes';
 import { StateObject } from '@uirouter/core/lib/state/stateObject';
 import {
   mobileGuardActivated,
@@ -81,13 +80,6 @@ export const OPENPROJECT_ROUTES:Ng2StateDeclaration[] = [
     url: '/bcf',
     loadChildren: () => import('../../features/bim/ifc_models/openproject-ifc-models.module').then((m) => m.OpenprojectIFCModelsModule),
   },
-  {
-    name: 'reporting.**',
-    parent: 'optional_project',
-    url: '/cost_reports',
-    loadChildren: () => import('../../features/reporting/openproject-reporting.module').then((m) => m.OpenprojectReportingModule),
-  },
-  ...IAN_LAZY_ROUTES,
   ...TEAM_PLANNER_LAZY_ROUTES,
   ...CALENDAR_LAZY_ROUTES,
 ];

frontend/src/app/features/in-app-notifications/center/in-app-notification-center-page.component.ts

@@ -1,27 +1,22 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Injector,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import {
   ToolbarButtonComponentDefinition,
   ViewPartitionState,
 } from 'core-app/features/work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component';
-import {
-  StateService,
-  TransitionService,
-} from '@uirouter/core';
+import { StateService, TransitionService } from '@uirouter/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
-import { NotificationSettingsButtonComponent } from 'core-app/features/in-app-notifications/center/toolbar/settings/notification-settings-button.component';
-import { ActivateFacetButtonComponent } from 'core-app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component';
-import { MarkAllAsReadButtonComponent } from 'core-app/features/in-app-notifications/center/toolbar/mark-all-as-read/mark-all-as-read-button.component';
+import {
+  NotificationSettingsButtonComponent,
+} from 'core-app/features/in-app-notifications/center/toolbar/settings/notification-settings-button.component';
+import {
+  ActivateFacetButtonComponent,
+} from 'core-app/features/in-app-notifications/center/toolbar/facet/activate-facet-button.component';
+import {
+  MarkAllAsReadButtonComponent,
+} from 'core-app/features/in-app-notifications/center/toolbar/mark-all-as-read/mark-all-as-read-button.component';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { BackRoutingService } from 'core-app/features/work-packages/components/back-routing/back-routing.service';
-import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service';
 import { OpTitleService } from 'core-app/core/html/op-title.service';
 
 @Component({
@@ -29,9 +24,6 @@ import { OpTitleService } from 'core-app/core/html/op-title.service';
   styleUrls: [
     '../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.sass',
   ],
-  providers: [
-    IanCenterService,
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InAppNotificationCenterPageComponent extends UntilDestroyedMixin implements OnInit, OnDestroy {

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts

@@ -26,18 +26,9 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import {
-  filter,
-  map,
-} from 'rxjs/operators';
+import { filter, map } from 'rxjs/operators';
 import { StateService } from '@uirouter/angular';
 import { UIRouterGlobals } from '@uirouter/core';
 import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service';
@@ -51,7 +42,6 @@ import { IanBellService } from 'core-app/features/in-app-notifications/bell/stat
 import { imagePath } from 'core-app/shared/helpers/images/path-helper';
 
 @Component({
-  selector: 'op-in-app-notification-center',
   templateUrl: './in-app-notification-center.component.html',
   styleUrls: ['./in-app-notification-center.component.sass'],
   changeDetection: ChangeDetectionStrategy.OnPush,

frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts

@@ -39,12 +39,7 @@ import {
   take,
   tap,
 } from 'rxjs/operators';
-import {
-  forkJoin,
-  from,
-  Observable,
-  Subject,
-} from 'rxjs';
+import { forkJoin, from, Observable, Subject } from 'rxjs';
 import { ID, Query } from '@datorama/akita';
 import { UIRouterGlobals } from '@uirouter/core';
 import { StateService } from '@uirouter/angular';
@@ -67,7 +62,6 @@ import {
   InAppNotificationsResourceService,
 } from 'core-app/core/state/in-app-notifications/in-app-notifications.service';
 import { mapHALCollectionToIDCollection } from 'core-app/core/state/resource-store';
-import { INotificationPageQueryParameters } from 'core-app/features/in-app-notifications/in-app-notifications.routes';
 import {
   IAN_FACET_FILTERS,
   IanCenterStore,
@@ -79,7 +73,12 @@ import { DeviceService } from 'core-app/core/browser/device.service';
 import { ApiV3ListFilter, ApiV3ListParameters } from 'core-app/core/apiv3/paths/apiv3-list-resource.interface';
 import { FrameElement } from '@hotwired/turbo';
 
-@Injectable()
+export interface INotificationPageQueryParameters {
+  filter?:string;
+  name?:string;
+}
+
+@Injectable({ providedIn: 'root' })
 @EffectHandler
 export class IanCenterService extends UntilDestroyedMixin {
   readonly id = 'ian-center';

frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts

@@ -2,7 +2,9 @@ import { Store, StoreConfig } from '@datorama/akita';
 import { CollectionResponse } from 'core-app/core/state/resource-store';
 import { ApiV3ListFilter } from 'core-app/core/apiv3/paths/apiv3-list-resource.interface';
 import { NOTIFICATIONS_MAX_SIZE } from 'core-app/core/state/in-app-notifications/in-app-notification.model';
-import { INotificationPageQueryParameters } from 'core-app/features/in-app-notifications/in-app-notifications.routes';
+import {
+  INotificationPageQueryParameters,
+} from 'core-app/features/in-app-notifications/center/state/ian-center.service';
 
 export type InAppNotificationFacet = 'unread'|'all';
 

frontend/src/app/features/in-app-notifications/in-app-notifications.lazy-routes.ts

@@ -1,37 +0,0 @@
-// -- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) 2012-2024 the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-//++
-
-import { Ng2StateDeclaration } from '@uirouter/angular';
-
-export const IAN_LAZY_ROUTES:Ng2StateDeclaration[] = [
-  {
-    name: 'notifications.**',
-    url: '/notifications',
-    loadChildren: () => import('./in-app-notifications.module').then((m) => m.OpenProjectInAppNotificationsModule),
-  },
-];

frontend/src/app/features/in-app-notifications/in-app-notifications.routes.ts

@@ -1,85 +0,0 @@
-// -- copyright
-// OpenProject is an open source project management software.
-// Copyright (C) 2012-2024 the OpenProject GmbH
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License version 3.
-//
-// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
-// Copyright (C) 2006-2013 Jean-Philippe Lang
-// Copyright (C) 2010-2013 the ChiliProject Team
-//
-// This program is free software; you can redistribute it and/or
-// modify it under the terms of the GNU General Public License
-// as published by the Free Software Foundation; either version 2
-// of the License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with this program; if not, write to the Free Software
-// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-//
-// See COPYRIGHT and LICENSE files for more details.
-//++
-
-import { Ng2StateDeclaration } from '@uirouter/angular';
-import { makeSplitViewRoutes } from 'core-app/features/work-packages/routing/split-view-routes.template';
-import { WorkPackageSplitViewComponent } from 'core-app/features/work-packages/routing/wp-split-view/wp-split-view.component';
-import { InAppNotificationCenterComponent } from 'core-app/features/in-app-notifications/center/in-app-notification-center.component';
-import { InAppNotificationCenterPageComponent } from 'core-app/features/in-app-notifications/center/in-app-notification-center-page.component';
-import { WorkPackagesBaseComponent } from 'core-app/features/work-packages/routing/wp-base/wp--base.component';
-import { InAppNotificationsDateAlertsUpsaleComponent } from 'core-app/features/in-app-notifications/date-alerts-upsale/ian-date-alerts-upsale.component';
-import { ShareUpsaleComponent } from 'core-app/features/enterprise/share-upsale/share-upsale.component';
-
-export interface INotificationPageQueryParameters {
-  filter?:string;
-  name?:string;
-}
-
-export const IAN_ROUTES:Ng2StateDeclaration[] = [
-  {
-    name: 'notifications',
-    parent: 'root',
-    url: '/notifications?{filter:string}&{name:string}',
-    data: {
-      bodyClasses: 'router--work-packages-base',
-    },
-    redirectTo: 'notifications.center.show',
-    views: {
-      '!$default': { component: WorkPackagesBaseComponent },
-    },
-  },
-  {
-    url: '/date_alerts',
-    name: 'notifications.date_alerts_upsale',
-    component: InAppNotificationsDateAlertsUpsaleComponent,
-  },
-  {
-    url: '/share_upsale',
-    name: 'notifications.share_upsale',
-    component: ShareUpsaleComponent,
-  },
-  {
-    name: 'notifications.center',
-    component: InAppNotificationCenterPageComponent,
-    redirectTo: 'notifications.center.show',
-  },
-  {
-    name: 'notifications.center.show',
-    data: {
-      baseRoute: 'notifications.center.show',
-    },
-    views: {
-      'content-left': { component: InAppNotificationCenterComponent },
-    },
-  },
-  ...makeSplitViewRoutes(
-    'notifications.center.show',
-    undefined,
-    WorkPackageSplitViewComponent,
-  ),
-];