From 0f1a49d28c7f27ad8ea7063d7a8b90028f2a5dc7 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 13 May 2024 10:35:03 +0200 Subject: [PATCH 001/120] [#54733] Primerise the Activity panel https://community.openproject.org/work_packages/54733 From 97f28b52fdeb4f8bd2af02aee4af98946c7ce22c Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 16 May 2024 11:35:21 +0200 Subject: [PATCH 002/120] introducing primerized work package activities --- .../activities_tab/index_component.html.erb | 31 +++ .../activities_tab/index_component.rb | 81 ++++++++ .../journals/form_component.html.erb | 13 ++ .../activities_tab/journals/form_component.rb | 51 +++++ .../journals/show_component.html.erb | 20 ++ .../activities_tab/journals/show_component.rb | 51 +++++ .../activities_tab_controller.rb | 108 ++++++++++ .../activities_tab/journal_form.rb | 56 ++++++ .../activities_tab/index.html.erb | 184 ++++++++++++++++++ config/initializers/permissions.rb | 5 +- config/routes.rb | 6 + .../work-package-comment.component.html | 16 +- .../work-package-comment.component.ts | 11 +- .../wp-edit/work-package-changeset.ts | 7 + .../activities-tab/index.controller.ts | 71 +++++++ 15 files changed, 707 insertions(+), 4 deletions(-) create mode 100644 app/components/work_packages/activities_tab/index_component.html.erb create mode 100644 app/components/work_packages/activities_tab/index_component.rb create mode 100644 app/components/work_packages/activities_tab/journals/form_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/form_component.rb create mode 100644 app/components/work_packages/activities_tab/journals/show_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/show_component.rb create mode 100644 app/controllers/work_packages/activities_tab_controller.rb create mode 100644 app/forms/work_packages/activities_tab/journal_form.rb create mode 100644 app/views/work_packages/activities_tab/index.html.erb create mode 100644 frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb new file mode 100644 index 000000000000..6ab67535f891 --- /dev/null +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -0,0 +1,31 @@ +<%= + content_tag("turbo-frame", id: "work-package-activities-tab-content") do + component_wrapper(data: wrapper_data_attributes) do + flex_layout do |activties_tab_container| + if journal_sorting == "desc" + activties_tab_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::FormComponent.new(work_package:) + ) + end + end + activties_tab_container.with_row(flex_layout: true, id: insert_target_modifier_id) do |journals_container| + journals.each do |journal| + journals_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) + ) + end + end + end + if journal_sorting == "asc" + activties_tab_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::FormComponent.new(work_package:) + ) + end + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb new file mode 100644 index 000000000000..d6a151320d26 --- /dev/null +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -0,0 +1,81 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + class IndexComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(work_package:) + super + + @work_package = work_package + end + + private + + attr_reader :work_package + + def insert_target_modified? + true + end + + def insert_target_id + "work-package-journals" + end + + def wrapper_data_attributes + { + controller: "work-packages--activities-tab--index", + "application-target": "dynamic", + "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_path(work_package) + } + end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end + + def only_comments? + false # TODO: Implement this + end + + def journals + result = work_package.journals.includes(:user).reorder(version: journal_sorting) + + result = result.where.not(notes: "") if only_comments? + + result + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/form_component.html.erb b/app/components/work_packages/activities_tab/journals/form_component.html.erb new file mode 100644 index 000000000000..a8f93b076a08 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/form_component.html.erb @@ -0,0 +1,13 @@ +<%= + component_wrapper do + primer_form_with( + id: "work-package-journal-form", + model: journal, + method: :post, + data: { turbo: true, turbo_stream: true }, + url: work_package_activities_path(work_package_id: work_package.id), + ) do |f| + render(WorkPackages::ActivitiesTab::JournalForm.new(f)) + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/form_component.rb b/app/components/work_packages/activities_tab/journals/form_component.rb new file mode 100644 index 000000000000..043faa4298a0 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/form_component.rb @@ -0,0 +1,51 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class FormComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(work_package:) + super + + @work_package = work_package + end + + attr_reader :work_package + + def journal + Journal.new(journable: work_package) + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/show_component.html.erb b/app/components/work_packages/activities_tab/journals/show_component.html.erb new file mode 100644 index 000000000000..19c8f9559f68 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/show_component.html.erb @@ -0,0 +1,20 @@ +<%= + component_wrapper do + render(Primer::Box.new(border: true, border_radius: 2, p: 3, my: 3)) do + flex_layout do |journal_container| + journal_container.with_row do + render(Primer::Beta::Text.new) { @journal.notes } + end + if @journal.details.any? + journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| + @journal.details.each do |detail| + details_container.with_row do + render(Primer::Beta::Text.new) { detail.to_s } + end + end + end + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/show_component.rb b/app/components/work_packages/activities_tab/journals/show_component.rb new file mode 100644 index 000000000000..930ba21d5d18 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/show_component.rb @@ -0,0 +1,51 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class ShowComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(journal:) + super + + @journal = journal + end + + private + + def wrapper_uniq_by + @journal.id + end + end + end + end +end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb new file mode 100644 index 000000000000..ef4f4f68e61f --- /dev/null +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -0,0 +1,108 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2010-2023 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 WorkPackages::ActivitiesTabController < ApplicationController + include OpTurbo::ComponentStream + + before_action :find_work_package + before_action :find_project + before_action :authorize + + def index + render( + WorkPackages::ActivitiesTab::IndexComponent.new( + work_package: @work_package + ), + layout: false + ) + end + + def journal_streams + # TODO: only update specific journal components or append/prepend new journals based on latest client state + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::IndexComponent.new( + work_package: @work_package + ) + ) + + respond_with_turbo_streams + end + + def create + call = Journals::CreateService.new(@work_package, User.current).call( + notes: journal_params[:notes] + ) + + if call.success? + stream_config = { + target_component: WorkPackages::ActivitiesTab::IndexComponent.new( + work_package: @work_package + ), + component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new( + journal: call.result + ) + } + + # Append or prepend the new journal depending on the sorting + if journal_sorting == "asc" + append_via_turbo_stream(**stream_config) + else + prepend_via_turbo_stream(**stream_config) + end + + # Clear the form + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::FormComponent.new( + work_package: @work_package + ) + ) + end + + respond_with_turbo_streams + end + + private + + def find_work_package + @work_package = WorkPackage.find(params[:work_package_id]) + end + + def find_project + @project = @work_package.project + end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end + + def journal_params + params.require(:journal).permit(:notes) + end +end diff --git a/app/forms/work_packages/activities_tab/journal_form.rb b/app/forms/work_packages/activities_tab/journal_form.rb new file mode 100644 index 000000000000..53d48eec5328 --- /dev/null +++ b/app/forms/work_packages/activities_tab/journal_form.rb @@ -0,0 +1,56 @@ +#-- 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 WorkPackages::ActivitiesTab + class JournalForm < ApplicationForm + form do |journal_form| + journal_form.rich_text_area( + name: :notes, + label: nil, + rich_text_options: { + resource: nil, + showAttachments: false + } + ) + journal_form.submit(name: :submit, label: "Save", scheme: :primary) + end + + private + + def initialize(disabled: false) + super() + @disabled = disabled + end + + def resource + return unless object&.journal + + API::V3::Journals::JournalRepresenter + .new(object.journal, current_user: User.current, embed_links: false) + end + end +end diff --git a/app/views/work_packages/activities_tab/index.html.erb b/app/views/work_packages/activities_tab/index.html.erb new file mode 100644 index 000000000000..ca800ace383c --- /dev/null +++ b/app/views/work_packages/activities_tab/index.html.erb @@ -0,0 +1,184 @@ +<%#-- 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. + +++#%> + +<% html_title t(:label_bulk_edit_selected_work_packages) %> + +

<%= t(:label_bulk_edit_selected_work_packages) %>

+ + +<%= styled_form_tag(url_for(controller: '/work_packages/bulk', action: :update), + method: :put, class: '-wide-labels') do %> + <% @work_packages.each do |wp| %> + <%= hidden_field_tag 'ids[]', wp.id %> + <% end %> + <%= back_url_hidden_field_tag %> +
+
+ <%= t(:label_change_properties) %> +
+
+
+ <%= styled_label_tag :work_package_type_id, WorkPackage.human_attribute_name(:type) %> +
+ <%= styled_select_tag('work_package[type_id]', "".html_safe + options_from_collection_for_select(@types, :id, :name)) %> +
+
+ <% if @available_statuses.any? %> +
+ <%= styled_label_tag :work_package_status_id, WorkPackage.human_attribute_name(:status) %> +
+ <%= styled_select_tag('work_package[status_id]', "".html_safe + options_from_collection_for_select(@available_statuses, :id, :name)) %> +
+
+ <% else %> +
+ <%= styled_label_tag :work_package_status_id, WorkPackage.human_attribute_name(:status) %> +
+ <%= t('work_packages.move.no_common_statuses_exists') %> +
+
+ <% end %> +
+ <%= styled_label_tag :work_package_priority_id, WorkPackage.human_attribute_name(:priority) %> +
+ <%= styled_select_tag('work_package[priority_id]', "".html_safe + options_from_collection_for_select(IssuePriority.active, :id, :name)) %> +
+
+
+ <%= styled_label_tag :work_package_assigned_to_id, WorkPackage.human_attribute_name(:assigned_to) %> +
+ <%= styled_select_tag('work_package[assigned_to_id]', content_tag('option', t(:label_no_change_option), value: '') + + content_tag('option', t(:label_nobody), value: 'none') + + options_from_collection_for_select(@assignables, :id, :name)) %> +
+
+
+ <%= styled_label_tag :work_package_responsible_id, WorkPackage.human_attribute_name(:responsible) %> +
+ <%= styled_select_tag('work_package[responsible_id]', content_tag('option', t(:label_no_change_option), value: '') + + content_tag('option', t(:label_nobody), value: 'none') + + options_from_collection_for_select(@responsibles, :id, :name)) %> +
+
+ <% if @project %> +
+ <%= styled_label_tag :work_package_category_id, WorkPackage.human_attribute_name(:category) %> +
+ <%= styled_select_tag('work_package[category_id]', content_tag('option', t(:label_no_change_option), value: '') + + content_tag('option', t(:label_none), value: 'none') + + options_from_collection_for_select(@project.categories, :id, :name)) %> +
+
+ <% #TODO: allow editing versions when multiple projects %> +
+ <%= styled_label_tag :work_package_version_id, WorkPackage.human_attribute_name(:version) %> +
+ <%= styled_select_tag('work_package[version_id]', content_tag('option', t(:label_no_change_option), value: '') + + content_tag('option', t(:label_none), value: 'none') + + version_options_for_select(@project.shared_versions.with_status_open.order_by_semver_name)) %> +
+
+
+ <%= styled_label_tag :work_package_budget_id, Budget.model_name.human %> +
+ <%= styled_select_tag('work_package[budget_id]', + content_tag('option', t(:label_no_change_option), :value => '') + + content_tag('option', t(:label_none), :value => 'none') + + options_from_collection_for_select(@project.budgets.order(Arel.sql('subject ASC')), :id, :subject)) + %> +
+
+ <% end %> + <% @custom_fields.each do |custom_field| %> +
+ <%= blank_custom_field_label_tag('work_package', custom_field) %> +
+ <%= custom_field_tag_for_bulk_edit('work_package', custom_field, @project) %> +
+
+ <% end %> + <%= call_hook(:view_work_packages_bulk_edit_details_bottom, { work_packages: @work_packages }) %> +
+
+
+ <%= styled_label_tag :work_package_subject, WorkPackage.human_attribute_name(:subject) %> +
+ <%= styled_text_field_tag 'work_package[subject]', '', size: 10 %> +
+
+ <% if @project && User.current.allowed_in_project?(:manage_subtasks, @project) %> +
+ <%= styled_label_tag :work_package_parent_id, WorkPackage.human_attribute_name(:parent) %> +
+ <%= styled_text_field_tag 'work_package[parent_id]', '', size: 10 %> +
+
+
+ <% end %> +
+ <%= styled_label_tag :work_package_start_date, WorkPackage.human_attribute_name(:start_date) %> +
+ <%= angular_component_tag 'op-basic-single-date-picker', + inputs: { + id: "work_package_start_date", + name: "work_package[start_date]" + } + %> +
+
+
+ <%= styled_label_tag :work_package_due_date, WorkPackage.human_attribute_name(:due_date) %> +
+ <%= angular_component_tag 'op-basic-single-date-picker', + inputs: { + id: "work_package_due_date", + name: "work_package[due_date]" + } + %> +
+
+
+
+
+
+ <%= Journal.human_attribute_name(:notes) %> + <%= label_tag 'work_package_journal_notes', Journal.human_attribute_name(:notes), class: 'hidden-for-sighted' %> + <%= styled_text_area_tag 'work_package[journal_notes]', @notes, class: 'wiki-edit', with_text_formatting: true %> +

<%= send_notification_option %>

+
+
+

<%= styled_button_tag t(:button_submit), class: '-primary -with-icon icon-checkmark' %>

+<% end %> diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 4b3e6ae5d737..67611c5970a1 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -111,7 +111,7 @@ map.permission :select_project_custom_fields, { - 'projects/settings/project_custom_fields': %i[show toggle enable_all_of_section disable_all_of_section] + "projects/settings/project_custom_fields": %i[show toggle enable_all_of_section disable_all_of_section] }, permissible_on: :project, require: :member @@ -186,7 +186,8 @@ journals: %i[index], work_packages: %i[show index], work_packages_api: [:get], - "work_packages/reports": %i[report report_details] + "work_packages/reports": %i[report report_details], + "work_packages/activities_tab": %i[index create journal_streams] }, permissible_on: %i[work_package project], contract_actions: { work_packages: %i[read] } diff --git a/config/routes.rb b/config/routes.rb index e5c9878726af..ebe978da5ee1 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -528,6 +528,12 @@ end end + resources :activities, controller: "work_packages/activities_tab", only: %i[index create] do + collection do + get :journal_streams + end + end + resource :progress, only: %i[new edit update], controller: "work_packages/progress" collection do resource :progress, diff --git a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.html b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.html index d18e3d2d6a9f..3bff5b7611e2 100644 --- a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.html +++ b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.html @@ -1,4 +1,18 @@ -
+
+ + + + + + + + + + + +
+ +
diff --git a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts index 02fcc08be3de..bdfa709527b6 100644 --- a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts +++ b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts @@ -51,9 +51,11 @@ import { WorkPackagesActivityService } from 'core-app/features/work-packages/com import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource'; import { ErrorResource } from 'core-app/features/hal/resources/error-resource'; import { HalError } from 'core-app/features/hal/services/hal-error'; +import { PathHelperService } from 'core-app/core/path-helper/path-helper.service'; import { filter, take, + timeout, } from 'rxjs/operators'; @Component({ @@ -83,6 +85,10 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler public showAbove:boolean; + public primerizedActivitiesEnabled:boolean; + + public turboFrameSrc:string; + public htmlId = 'wp-comment-field'; constructor(protected elementRef:ElementRef, @@ -95,7 +101,8 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler protected workPackageNotificationService:WorkPackageNotificationService, protected toastService:ToastService, protected cdRef:ChangeDetectorRef, - protected I18n:I18nService) { + protected I18n:I18nService, + readonly PathHelper:PathHelperService) { super(elementRef, injector); } @@ -104,6 +111,8 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler this.canAddComment = !!this.workPackage.addComment; this.showAbove = this.configurationService.commentsSortedInDescendingOrder(); + this.primerizedActivitiesEnabled = true; // TODO: check for feature flag setting + this.turboFrameSrc = `${this.PathHelper.staticBase}/work_packages/${this.workPackage.id}/activities`; this.commentService.draft$ .pipe( diff --git a/frontend/src/app/features/work-packages/components/wp-edit/work-package-changeset.ts b/frontend/src/app/features/work-packages/components/wp-edit/work-package-changeset.ts index c3951ee57a68..a41c40b0a809 100644 --- a/frontend/src/app/features/work-packages/components/wp-edit/work-package-changeset.ts +++ b/frontend/src/app/features/work-packages/components/wp-edit/work-package-changeset.ts @@ -11,6 +11,13 @@ export class WorkPackageChangeset extends ResourceChangeset if (key === 'project' || key === 'type') { this.updateForm(); } + + // Emit event to notify Stimulus controller in activities tab in order to update the activities list + // TODO: emit event when change is persisted + // currently the event might be fired too early as it only reflects the client side change + document.dispatchEvent( + new CustomEvent('work-package-updated'), + ); } protected applyChanges(payload:any):any { diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts new file mode 100644 index 000000000000..0a38798d3a7f --- /dev/null +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -0,0 +1,71 @@ +/* + * -- copyright + * OpenProject is an open source project management software. + * Copyright (C) 2023 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 * as Turbo from '@hotwired/turbo'; +import { Controller } from '@hotwired/stimulus'; + +export default class IndexController extends Controller { + static values = { + journalStreamsUrl: String, + }; + + declare journalStreamsUrlValue:string; + + connect() { + this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); + document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); + } + + disconnect() { + document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); + } + + async handleWorkPackageUpdate(event:Event) { + setTimeout(() => { + this.updateActivitiesList(); + }, 2000); // TODO: wait dynamically for persisted change before updating the activities list + } + + async updateActivitiesList() { + const response = await fetch(this.journalStreamsUrlValue, { + method: 'GET', + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + Accept: 'text/vnd.turbo-stream.html', + }, + credentials: 'same-origin', + }); + + if (response.ok) { + const text = await response.text(); + Turbo.renderStreamMessage(text); + } + } +} From 932bb52dbb7c679f248bae1ca5f099578a1b95f1 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 22 May 2024 15:48:41 +0200 Subject: [PATCH 003/120] WIP: primerizing work_package activities, editing not yet implemented, tagging users not yet possible --- app/components/_index.sass | 1 + .../activities_tab/index_component.html.erb | 16 ++-- .../activities_tab/index_component.rb | 11 +-- .../journals/form_component.html.erb | 36 ++++++--- .../activities_tab/journals/form_component.rb | 12 +-- .../journals/index_component.html.erb | 13 ++++ .../journals/index_component.rb | 75 +++++++++++++++++++ .../journals/new_component.html.erb | 30 ++++++++ .../activities_tab/journals/new_component.rb | 58 ++++++++++++++ .../journals/new_component.sass | 3 + .../journals/show_component.html.erb | 74 ++++++++++++++++-- .../activities_tab/journals/show_component.rb | 67 +++++++++++++++++ .../activities_tab_controller.rb | 73 ++++++++++++------ .../notes_form.rb} | 14 +--- .../activities_tab/journals/submit.rb | 34 +++++++++ config/initializers/feature_decisions.rb | 2 + config/routes.rb | 2 +- .../work-package-comment.component.ts | 2 +- .../activities-tab/index.controller.ts | 26 +++++++ .../activities-tab/new.controller.ts | 53 +++++++++++++ .../activities-tab/show.controller.ts | 47 ++++++++++++ 21 files changed, 570 insertions(+), 79 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/index_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/index_component.rb create mode 100644 app/components/work_packages/activities_tab/journals/new_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/new_component.rb create mode 100644 app/components/work_packages/activities_tab/journals/new_component.sass rename app/forms/work_packages/activities_tab/{journal_form.rb => journals/notes_form.rb} (84%) create mode 100644 app/forms/work_packages/activities_tab/journals/submit.rb create mode 100644 frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts create mode 100644 frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts diff --git a/app/components/_index.sass b/app/components/_index.sass index df5d51df72f6..9bbe00352372 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,3 +1,4 @@ +@import "work_packages/activities_tab/journals/new_component" @import "work_packages/share/modal_body_component" @import "work_packages/share/invite_user_form_component" @import "work_packages/progress/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 6ab67535f891..cc375be53e14 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -5,23 +5,19 @@ if journal_sorting == "desc" activties_tab_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::FormComponent.new(work_package:) + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) ) end end - activties_tab_container.with_row(flex_layout: true, id: insert_target_modifier_id) do |journals_container| - journals.each do |journal| - journals_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) - ) - end - end + activties_tab_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:) + ) end if journal_sorting == "asc" activties_tab_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::FormComponent.new(work_package:) + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) ) end end diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index d6a151320d26..fd9e39468eb6 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -45,19 +45,12 @@ def initialize(work_package:) attr_reader :work_package - def insert_target_modified? - true - end - - def insert_target_id - "work-package-journals" - end - def wrapper_data_attributes { controller: "work-packages--activities-tab--index", "application-target": "dynamic", - "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_path(work_package) + "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_path(work_package), + "work-packages--activities-tab--index-sorting-value": journal_sorting } end diff --git a/app/components/work_packages/activities_tab/journals/form_component.html.erb b/app/components/work_packages/activities_tab/journals/form_component.html.erb index a8f93b076a08..c17f19237af3 100644 --- a/app/components/work_packages/activities_tab/journals/form_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/form_component.html.erb @@ -1,13 +1,31 @@ <%= - component_wrapper do - primer_form_with( - id: "work-package-journal-form", - model: journal, - method: :post, - data: { turbo: true, turbo_stream: true }, - url: work_package_activities_path(work_package_id: work_package.id), - ) do |f| - render(WorkPackages::ActivitiesTab::JournalForm.new(f)) + primer_form_with( + id: "work-package-journal-form", + model: journal, + method: :post, + data: { turbo: true, turbo_stream: true }, + url: submit_path, + ) do |f| + flex_layout do |form_container| + form_container.with_row do + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) + end + form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| + submit_container.with_column(mr: 2) do + render(Primer::Beta::Button.new( + scheme: :default, + size: :medium, + data: { + "action": "click->work-packages--activities-tab--new#hideForm" + } + )) do + render(Primer::Beta::Text.new()) { I18n.t("button_cancel") } + end + end + submit_container.with_column do + render(WorkPackages::ActivitiesTab::Journals::Submit.new(f)) + end + end end end %> diff --git a/app/components/work_packages/activities_tab/journals/form_component.rb b/app/components/work_packages/activities_tab/journals/form_component.rb index 043faa4298a0..25525fcd28c4 100644 --- a/app/components/work_packages/activities_tab/journals/form_component.rb +++ b/app/components/work_packages/activities_tab/journals/form_component.rb @@ -32,19 +32,15 @@ module Journals class FormComponent < ApplicationComponent include ApplicationHelper include OpPrimer::ComponentHelpers - include OpTurbo::Streamable - def initialize(work_package:) + def initialize(journal:, submit_path:) super - @work_package = work_package + @journal = journal + @submit_path = submit_path end - attr_reader :work_package - - def journal - Journal.new(journable: work_package) - end + attr_reader :journal, :submit_path end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb new file mode 100644 index 000000000000..c31a60b7d8ba --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -0,0 +1,13 @@ +<%= + component_wrapper do + flex_layout(id: insert_target_modifier_id) do |journals_index_container| + journals.each do |journal| + journals_index_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) + ) + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb new file mode 100644 index 000000000000..5eb71d2cbcca --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -0,0 +1,75 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + module Journals + class IndexComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(work_package:) + super + + @work_package = work_package + end + + private + + attr_reader :work_package + + def insert_target_modified? + true + end + + def insert_target_modifier_id + "work-package-journals" + end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end + + def only_comments? + false # TODO: Implement this + end + + def journals + result = work_package.journals.includes(:user).reorder(version: journal_sorting) + + result = result.where.not(notes: "") if only_comments? + + result + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb new file mode 100644 index 000000000000..31482dbb1154 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -0,0 +1,30 @@ +<%= + component_wrapper(data: wrapper_data_attributes) do + flex_layout(my: 2) do |new_form_container| + new_form_container.with_row() do + render(Primer::Beta::Button.new( + scheme: :default, + size: :medium, + block: true, + data: { + "work-packages--activities-tab--new-target": "button", + "action": "click->work-packages--activities-tab--new#showForm" + } + )) do + render(Primer::Beta::Text.new()) { I18n.t("js.label_add_comment_title") } + end + end + new_form_container.with_row( + display: :none, + data: { "work-packages--activities-tab--new-target": "form" } + ) do + render( + WorkPackages::ActivitiesTab::Journals::FormComponent.new( + journal:, + submit_path: work_package_activities_path(work_package_id: work_package.id) + ) + ) + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/new_component.rb b/app/components/work_packages/activities_tab/journals/new_component.rb new file mode 100644 index 000000000000..91a980e3190b --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/new_component.rb @@ -0,0 +1,58 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class NewComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(work_package:) + super + + @work_package = work_package + end + + attr_reader :work_package + + def journal + Journal.new(journable: work_package) + end + + def wrapper_data_attributes + { + controller: "work-packages--activities-tab--new", + "application-target": "dynamic" + } + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass new file mode 100644 index 000000000000..f21398240e09 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -0,0 +1,3 @@ +#work-packages-activities-tab-journals-new-component + #work-package-journal-new-label + cursor: pointer diff --git a/app/components/work_packages/activities_tab/journals/show_component.html.erb b/app/components/work_packages/activities_tab/journals/show_component.html.erb index 19c8f9559f68..387bcd998643 100644 --- a/app/components/work_packages/activities_tab/journals/show_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/show_component.html.erb @@ -1,15 +1,75 @@ <%= - component_wrapper do - render(Primer::Box.new(border: true, border_radius: 2, p: 3, my: 3)) do + component_wrapper(data: wrapper_data_attributes) do + render(Primer::Box.new(id: "activity-#{@journal.version}", border: true, border_radius: 2, p: 3, my: 2)) do flex_layout do |journal_container| - journal_container.with_row do - render(Primer::Beta::Text.new) { @journal.notes } + journal_container.with_row(flex_layout: true, align_items: :center, justify_content: :space_between) do |header_container| + header_container.with_column(flex_layout: true) do |header_start_container| + header_start_container.with_column(mr: 2) do + render Users::AvatarComponent.new(user: @journal.user, show_name: false) + end + header_start_container.with_column(flex_layout: true) do |header_text_container| + header_text_container.with_row do + render(Primer::Beta::Link.new( + href: user_url(@journal.user), + target: "_blank", + scheme: :primary, + underline: false, + font_weight: :bold + )) do + @journal.user.name + end + end + header_text_container.with_row(flex_layout: true) do |header_text_timestamp_container| + header_text_timestamp_container.with_column(mr: 1) do + render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) do + if updated? + I18n.t("attributes.updated_at") + else + I18n.t("attributes.created_at") + end + end + end + header_text_timestamp_container.with_column do + render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) { format_time(@journal.updated_at) } + end + end + end + end + header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| + header_end_container.with_column do + render(Primer::Beta::Link.new( + href: activity_anchor, + scheme: :secondary, + underline: false, + font_size: :small, + data: { turbo: false } + )) do + "##{@journal.version}" + end + end + header_end_container.with_column(ml: 2) do + render(Primer::Alpha::ActionMenu.new) do |menu| + menu.with_show_button(icon: "kebab-horizontal", + 'aria-label': I18n.t(:button_actions), + scheme: :invisible) + copy_url_action_item(menu) + edit_action_item(menu) if editable? + end + end + end + end + if @journal.notes.present? + journal_container.with_row(mt: 3) do + render(Primer::Box.new(mt: 1)) do + format_text(@journal, :notes) + end + end end - if @journal.details.any? + if @journal.details.any? && @journal.version != 1 journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| @journal.details.each do |detail| - details_container.with_row do - render(Primer::Beta::Text.new) { detail.to_s } + details_container.with_row(mt: 1, font_size: :small) do + render(Primer::Beta::Text.new) { @journal.render_detail(detail) } end end end diff --git a/app/components/work_packages/activities_tab/journals/show_component.rb b/app/components/work_packages/activities_tab/journals/show_component.rb index 930ba21d5d18..bad947775f79 100644 --- a/app/components/work_packages/activities_tab/journals/show_component.rb +++ b/app/components/work_packages/activities_tab/journals/show_component.rb @@ -31,6 +31,8 @@ module ActivitiesTab module Journals class ShowComponent < ApplicationComponent include ApplicationHelper + include AvatarHelper + include JournalFormatter include OpPrimer::ComponentHelpers include OpTurbo::Streamable @@ -45,6 +47,71 @@ def initialize(journal:) def wrapper_uniq_by @journal.id end + + def wrapper_data_attributes + { + controller: "work-packages--activities-tab--show", + "application-target": "dynamic", + "work-packages--activities-tab--show-activity-url-value": activity_url + } + end + + def activity_url + "#{project_work_package_url(@journal.journable.project, @journal.journable)}/activity#{activity_anchor}" + end + + def activity_anchor + "#activity-#{@journal.version}" + end + + def data_type + @journal.data_type + end + + def editable? + @journal.user == User.current + end + + def initial_version? + @journal.version == 1 + end + + def updated? + return false if initial_version? + + @journal.updated_at - @journal.created_at > 5.seconds + end + + def copy_url_action_item(menu) + menu.with_item(label: t("button_copy_link_to_clipboard"), + tag: :button, + content_arguments: { + data: { + action: "click->work-packages--activities-tab--show#copyActivityUrlToClipboard" + } + }) do |item| + item.with_leading_visual_icon(icon: :copy) + end + end + + def edit_action_item(menu) + # menu.with_item(label: t("label_edit"), + # href: edit_work_package_activity_path(@journal.journable, @journal), + # content_arguments: { + # data: { "turbo-stream": true } + # }) do |item| + # item.with_leading_visual_icon(icon: :pencil) + # end + menu.with_item(label: t("label_edit"), + tag: :button, + content_arguments: { + data: { + action: "click->work-packages--activities-tab--show#edit" + } + }) do |item| + item.with_leading_visual_icon(icon: :pencil) + end + end end end end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index ef4f4f68e61f..2d801d4df11b 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -47,7 +47,7 @@ def index def journal_streams # TODO: only update specific journal components or append/prepend new journals based on latest client state update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::IndexComponent.new( + component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package ) ) @@ -56,35 +56,18 @@ def journal_streams end def create + latest_journal_version = @work_package.journals.last.try(:version) || 0 + call = Journals::CreateService.new(@work_package, User.current).call( notes: journal_params[:notes] ) - if call.success? - stream_config = { - target_component: WorkPackages::ActivitiesTab::IndexComponent.new( - work_package: @work_package - ), - component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new( - journal: call.result - ) - } - - # Append or prepend the new journal depending on the sorting - if journal_sorting == "asc" - append_via_turbo_stream(**stream_config) - else - prepend_via_turbo_stream(**stream_config) - end - - # Clear the form - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::FormComponent.new( - work_package: @work_package - ) - ) + if call.success? && call.result + after_create_turbo_stream(call, latest_journal_version) end + clear_form_via_turbo_stream + respond_with_turbo_streams end @@ -105,4 +88,46 @@ def journal_sorting def journal_params params.require(:journal).permit(:notes) end + + def after_create_turbo_stream(call, latest_journal_version) + # journals might get merged in some cases, + # thus we need to check if the journal is already present and update it rather then ap/prepending it + if latest_journal_version < call.result.version + append_or_prepend_latest_journal_via_turbo_stream(call.result) + else + update_journal_via_turbo_stream(call.result) + end + end + + def append_or_prepend_latest_journal_via_turbo_stream(journal) + stream_config = { + target_component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package + ), + component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new( + journal: + ) + } + + # Append or prepend the new journal depending on the sorting + if journal_sorting == "asc" + append_via_turbo_stream(**stream_config) + else + prepend_via_turbo_stream(**stream_config) + end + end + + def update_journal_via_turbo_stream(journal) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) + ) + end + + def clear_form_via_turbo_stream + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::NewComponent.new( + work_package: @work_package + ) + ) + end end diff --git a/app/forms/work_packages/activities_tab/journal_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb similarity index 84% rename from app/forms/work_packages/activities_tab/journal_form.rb rename to app/forms/work_packages/activities_tab/journals/notes_form.rb index 53d48eec5328..6ec9038b92f3 100644 --- a/app/forms/work_packages/activities_tab/journal_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -25,10 +25,10 @@ # # See COPYRIGHT and LICENSE files for more details. #++ -module WorkPackages::ActivitiesTab - class JournalForm < ApplicationForm - form do |journal_form| - journal_form.rich_text_area( +module WorkPackages::ActivitiesTab::Journals + class NotesForm < ApplicationForm + form do |notes_form| + notes_form.rich_text_area( name: :notes, label: nil, rich_text_options: { @@ -36,16 +36,10 @@ class JournalForm < ApplicationForm showAttachments: false } ) - journal_form.submit(name: :submit, label: "Save", scheme: :primary) end private - def initialize(disabled: false) - super() - @disabled = disabled - end - def resource return unless object&.journal diff --git a/app/forms/work_packages/activities_tab/journals/submit.rb b/app/forms/work_packages/activities_tab/journals/submit.rb new file mode 100644 index 000000000000..4c49a840a4b5 --- /dev/null +++ b/app/forms/work_packages/activities_tab/journals/submit.rb @@ -0,0 +1,34 @@ +#-- 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 WorkPackages::ActivitiesTab::Journals + class Submit < ApplicationForm + form do |notes_form| + notes_form.submit(name: :submit, label: "Save", scheme: :primary) + end + end +end diff --git a/config/initializers/feature_decisions.rb b/config/initializers/feature_decisions.rb index e98381d9be1e..ac2c84703075 100644 --- a/config/initializers/feature_decisions.rb +++ b/config/initializers/feature_decisions.rb @@ -38,3 +38,5 @@ # initializer 'the_engine.feature_decisions' do # OpenProject::FeatureDecisions.add :some_flag # end +# +OpenProject::FeatureDecisions.add :primerized_work_package_activities diff --git a/config/routes.rb b/config/routes.rb index ebe978da5ee1..c5d6cc885b96 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -528,7 +528,7 @@ end end - resources :activities, controller: "work_packages/activities_tab", only: %i[index create] do + resources :activities, controller: "work_packages/activities_tab", only: %i[index create edit] do collection do get :journal_streams end diff --git a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts index bdfa709527b6..d85c3a9d919b 100644 --- a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts +++ b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts @@ -111,7 +111,7 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler this.canAddComment = !!this.workPackage.addComment; this.showAbove = this.configurationService.commentsSortedInDescendingOrder(); - this.primerizedActivitiesEnabled = true; // TODO: check for feature flag setting + this.primerizedActivitiesEnabled = this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities'); this.turboFrameSrc = `${this.PathHelper.staticBase}/work_packages/${this.workPackage.id}/activities`; this.commentService.draft$ diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 0a38798d3a7f..652a89230ea8 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -34,19 +34,45 @@ import { Controller } from '@hotwired/stimulus'; export default class IndexController extends Controller { static values = { journalStreamsUrl: String, + sorting: String, }; declare journalStreamsUrlValue:string; + declare sortingValue:string; connect() { this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); + + if (window.location.hash.includes('#activity-')) { + this.scrollToActivity(); + } else if (this.sortingValue === 'asc') { + this.scrollToBottom(); + } } disconnect() { document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); } + scrollToActivity() { + const activityId = window.location.hash.replace('#activity-', ''); + const activityElement = document.getElementById(`activity-${activityId}`); + if (activityElement) { + activityElement.scrollIntoView({ behavior: 'smooth' }); + } + } + + scrollToBottom():void { + // copied from frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts + const scrollableContainer = jQuery(this.element).scrollParent()[0]; + if (scrollableContainer) { + setTimeout(() => { + scrollableContainer.scrollTop = scrollableContainer.scrollHeight; + }, 400); + } + } + async handleWorkPackageUpdate(event:Event) { setTimeout(() => { this.updateActivitiesList(); diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts new file mode 100644 index 000000000000..365a88a45ae0 --- /dev/null +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts @@ -0,0 +1,53 @@ +/* + * -- copyright + * OpenProject is an open source project management software. + * Copyright (C) 2023 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 { Controller } from '@hotwired/stimulus'; + +export default class NewController extends Controller { + static targets = ['button', 'form']; + declare readonly buttonTarget:HTMLInputElement; + declare readonly formTarget:HTMLInputElement; + + showForm() { + this.buttonTarget.classList.add('d-none'); + this.formTarget.classList.remove('d-none'); + setTimeout(() => { + const ckEditorElement = this.formTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; + if (ckEditorElement) { + ckEditorElement.focus(); + } + }, 10); + } + + hideForm() { + this.buttonTarget.classList.remove('d-none'); + this.formTarget.classList.add('d-none'); + } +} diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts new file mode 100644 index 000000000000..047c04efe707 --- /dev/null +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts @@ -0,0 +1,47 @@ +/* + * -- copyright + * OpenProject is an open source project management software. + * Copyright (C) 2023 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 { Controller } from '@hotwired/stimulus'; + +export default class ShowController extends Controller { + static values = { + activityUrl: String, + }; + + declare activityUrlValue:string; + + async copyActivityUrlToClipboard() { + await navigator.clipboard.writeText(this.activityUrlValue); + } + + edit() { + alert('Not yet implemented'); + } +} From 40be17ce33afaa12b6ff92eee8a8984a3e37d7a1 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 22 May 2024 16:35:13 +0200 Subject: [PATCH 004/120] minor cleanup --- .../activities_tab/index.html.erb | 184 ------------------ 1 file changed, 184 deletions(-) delete mode 100644 app/views/work_packages/activities_tab/index.html.erb diff --git a/app/views/work_packages/activities_tab/index.html.erb b/app/views/work_packages/activities_tab/index.html.erb deleted file mode 100644 index ca800ace383c..000000000000 --- a/app/views/work_packages/activities_tab/index.html.erb +++ /dev/null @@ -1,184 +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. - -++#%> - -<% html_title t(:label_bulk_edit_selected_work_packages) %> - -

<%= t(:label_bulk_edit_selected_work_packages) %>

-
    - <% @work_packages.each do |wp| %> -
  • - <%= link_to(h("#{wp.type} ##{wp.id}"), work_package_path(wp)) %>: - <%= wp.subject %> -
    • - <% end %> -
- -<%= styled_form_tag(url_for(controller: '/work_packages/bulk', action: :update), - method: :put, class: '-wide-labels') do %> - <% @work_packages.each do |wp| %> - <%= hidden_field_tag 'ids[]', wp.id %> - <% end %> - <%= back_url_hidden_field_tag %> -
-
- <%= t(:label_change_properties) %> -
-
-
- <%= styled_label_tag :work_package_type_id, WorkPackage.human_attribute_name(:type) %> -
- <%= styled_select_tag('work_package[type_id]', "".html_safe + options_from_collection_for_select(@types, :id, :name)) %> -
-
- <% if @available_statuses.any? %> -
- <%= styled_label_tag :work_package_status_id, WorkPackage.human_attribute_name(:status) %> -
- <%= styled_select_tag('work_package[status_id]', "".html_safe + options_from_collection_for_select(@available_statuses, :id, :name)) %> -
-
- <% else %> -
- <%= styled_label_tag :work_package_status_id, WorkPackage.human_attribute_name(:status) %> -
- <%= t('work_packages.move.no_common_statuses_exists') %> -
-
- <% end %> -
- <%= styled_label_tag :work_package_priority_id, WorkPackage.human_attribute_name(:priority) %> -
- <%= styled_select_tag('work_package[priority_id]', "".html_safe + options_from_collection_for_select(IssuePriority.active, :id, :name)) %> -
-
-
- <%= styled_label_tag :work_package_assigned_to_id, WorkPackage.human_attribute_name(:assigned_to) %> -
- <%= styled_select_tag('work_package[assigned_to_id]', content_tag('option', t(:label_no_change_option), value: '') + - content_tag('option', t(:label_nobody), value: 'none') + - options_from_collection_for_select(@assignables, :id, :name)) %> -
-
-
- <%= styled_label_tag :work_package_responsible_id, WorkPackage.human_attribute_name(:responsible) %> -
- <%= styled_select_tag('work_package[responsible_id]', content_tag('option', t(:label_no_change_option), value: '') + - content_tag('option', t(:label_nobody), value: 'none') + - options_from_collection_for_select(@responsibles, :id, :name)) %> -
-
- <% if @project %> -
- <%= styled_label_tag :work_package_category_id, WorkPackage.human_attribute_name(:category) %> -
- <%= styled_select_tag('work_package[category_id]', content_tag('option', t(:label_no_change_option), value: '') + - content_tag('option', t(:label_none), value: 'none') + - options_from_collection_for_select(@project.categories, :id, :name)) %> -
-
- <% #TODO: allow editing versions when multiple projects %> -
- <%= styled_label_tag :work_package_version_id, WorkPackage.human_attribute_name(:version) %> -
- <%= styled_select_tag('work_package[version_id]', content_tag('option', t(:label_no_change_option), value: '') + - content_tag('option', t(:label_none), value: 'none') + - version_options_for_select(@project.shared_versions.with_status_open.order_by_semver_name)) %> -
-
-
- <%= styled_label_tag :work_package_budget_id, Budget.model_name.human %> -
- <%= styled_select_tag('work_package[budget_id]', - content_tag('option', t(:label_no_change_option), :value => '') + - content_tag('option', t(:label_none), :value => 'none') + - options_from_collection_for_select(@project.budgets.order(Arel.sql('subject ASC')), :id, :subject)) - %> -
-
- <% end %> - <% @custom_fields.each do |custom_field| %> -
- <%= blank_custom_field_label_tag('work_package', custom_field) %> -
- <%= custom_field_tag_for_bulk_edit('work_package', custom_field, @project) %> -
-
- <% end %> - <%= call_hook(:view_work_packages_bulk_edit_details_bottom, { work_packages: @work_packages }) %> -
-
-
- <%= styled_label_tag :work_package_subject, WorkPackage.human_attribute_name(:subject) %> -
- <%= styled_text_field_tag 'work_package[subject]', '', size: 10 %> -
-
- <% if @project && User.current.allowed_in_project?(:manage_subtasks, @project) %> -
- <%= styled_label_tag :work_package_parent_id, WorkPackage.human_attribute_name(:parent) %> -
- <%= styled_text_field_tag 'work_package[parent_id]', '', size: 10 %> -
-
-
- <% end %> -
- <%= styled_label_tag :work_package_start_date, WorkPackage.human_attribute_name(:start_date) %> -
- <%= angular_component_tag 'op-basic-single-date-picker', - inputs: { - id: "work_package_start_date", - name: "work_package[start_date]" - } - %> -
-
-
- <%= styled_label_tag :work_package_due_date, WorkPackage.human_attribute_name(:due_date) %> -
- <%= angular_component_tag 'op-basic-single-date-picker', - inputs: { - id: "work_package_due_date", - name: "work_package[due_date]" - } - %> -
-
-
-
-
-
- <%= Journal.human_attribute_name(:notes) %> - <%= label_tag 'work_package_journal_notes', Journal.human_attribute_name(:notes), class: 'hidden-for-sighted' %> - <%= styled_text_area_tag 'work_package[journal_notes]', @notes, class: 'wiki-edit', with_text_formatting: true %> -

<%= send_notification_option %>

-
-
-

<%= styled_button_tag t(:button_submit), class: '-primary -with-icon icon-checkmark' %>

-<% end %> From 46c8d5d58d4dd7e470eb56603554bab45d3ff722 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 22 May 2024 16:35:40 +0200 Subject: [PATCH 005/120] activate primierized activities in pullpreview env --- .github/workflows/pullpreview.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/pullpreview.yml b/.github/workflows/pullpreview.yml index ac546b1ff3fc..39bdcc9ad359 100644 --- a/.github/workflows/pullpreview.yml +++ b/.github/workflows/pullpreview.yml @@ -33,6 +33,7 @@ jobs: echo "OPENPROJECT_FEATURE__SHOW__CHANGES__ACTIVE=true" >> .env.pullpreview echo "OPENPROJECT_LOOKBOOK__ENABLED=true" >> .env.pullpreview echo "OPENPROJECT_HSTS=false" >> .env.pullpreview + echo "OPENPROJECT_FEATURE_PRIMERIZED_WORK_PACKAGE_ACTIVITIES_ACTIVE=true" >> .env.pullpreview - name: Boot as BIM edition if: contains(github.ref, 'bim/') || contains(github.head_ref, 'bim/') run: | From bae03172a7a129f90e0906aae39f487d0e7de4f5 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 27 May 2024 13:57:43 +0200 Subject: [PATCH 006/120] enable editing --- .../journals/form_component.html.erb | 12 +--- .../activities_tab/journals/form_component.rb | 32 ++++++++++- .../journals/index_component.html.erb | 2 +- ...onent.html.erb => item_component.html.erb} | 29 +++------- .../{show_component.rb => item_component.rb} | 57 ++++++++++--------- .../journals/item_component/edit.html.erb | 13 +++++ .../journals/item_component/edit.rb | 54 ++++++++++++++++++ .../journals/item_component/show.html.erb | 24 ++++++++ .../journals/item_component/show.rb | 55 ++++++++++++++++++ .../activities_tab_controller.rb | 50 +++++++++++++++- config/initializers/permissions.rb | 2 +- config/routes.rb | 5 +- ...{show.controller.ts => item.controller.ts} | 6 +- 13 files changed, 270 insertions(+), 71 deletions(-) rename app/components/work_packages/activities_tab/journals/{show_component.html.erb => item_component.html.erb} (70%) rename app/components/work_packages/activities_tab/journals/{show_component.rb => item_component.rb} (67%) create mode 100644 app/components/work_packages/activities_tab/journals/item_component/edit.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/item_component/edit.rb create mode 100644 app/components/work_packages/activities_tab/journals/item_component/show.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/item_component/show.rb rename frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/{show.controller.ts => item.controller.ts} (93%) diff --git a/app/components/work_packages/activities_tab/journals/form_component.html.erb b/app/components/work_packages/activities_tab/journals/form_component.html.erb index c17f19237af3..ec4bcd0a4b8f 100644 --- a/app/components/work_packages/activities_tab/journals/form_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/form_component.html.erb @@ -2,7 +2,7 @@ primer_form_with( id: "work-package-journal-form", model: journal, - method: :post, + method: method, data: { turbo: true, turbo_stream: true }, url: submit_path, ) do |f| @@ -12,15 +12,7 @@ end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| submit_container.with_column(mr: 2) do - render(Primer::Beta::Button.new( - scheme: :default, - size: :medium, - data: { - "action": "click->work-packages--activities-tab--new#hideForm" - } - )) do - render(Primer::Beta::Text.new()) { I18n.t("button_cancel") } - end + cancel_button end submit_container.with_column do render(WorkPackages::ActivitiesTab::Journals::Submit.new(f)) diff --git a/app/components/work_packages/activities_tab/journals/form_component.rb b/app/components/work_packages/activities_tab/journals/form_component.rb index 25525fcd28c4..4159f5f6a46b 100644 --- a/app/components/work_packages/activities_tab/journals/form_component.rb +++ b/app/components/work_packages/activities_tab/journals/form_component.rb @@ -33,14 +33,42 @@ class FormComponent < ApplicationComponent include ApplicationHelper include OpPrimer::ComponentHelpers - def initialize(journal:, submit_path:) + def initialize(journal:, submit_path:, cancel_path: nil) super @journal = journal @submit_path = submit_path + @cancel_path = cancel_path + @method = journal.new_record? ? :post : :put end - attr_reader :journal, :submit_path + private + + attr_reader :journal, :submit_path, :cancel_path, :method + + def cancel_button + if cancel_path + render(Primer::Beta::Button.new( + scheme: :secondary, + size: :medium, + tag: :a, + href: cancel_path, + data: { "turbo-stream": true } + )) do + t("button_cancel") + end + else + render(Primer::Beta::Button.new( + scheme: :default, + size: :medium, + data: { + action: "click->work-packages--activities-tab--new#hideForm" + } + )) do + I18n.t("button_cancel") + end + end + end end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index c31a60b7d8ba..cac5cbf0c043 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -4,7 +4,7 @@ journals.each do |journal| journals_index_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) ) end end diff --git a/app/components/work_packages/activities_tab/journals/show_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb similarity index 70% rename from app/components/work_packages/activities_tab/journals/show_component.html.erb rename to app/components/work_packages/activities_tab/journals/item_component.html.erb index 387bcd998643..0ebcf162efb4 100644 --- a/app/components/work_packages/activities_tab/journals/show_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -1,22 +1,22 @@ <%= component_wrapper(data: wrapper_data_attributes) do - render(Primer::Box.new(id: "activity-#{@journal.version}", border: true, border_radius: 2, p: 3, my: 2)) do + render(Primer::Box.new(id: "activity-#{journal.version}", border: true, border_radius: 2, p: 3, my: 2)) do flex_layout do |journal_container| journal_container.with_row(flex_layout: true, align_items: :center, justify_content: :space_between) do |header_container| header_container.with_column(flex_layout: true) do |header_start_container| header_start_container.with_column(mr: 2) do - render Users::AvatarComponent.new(user: @journal.user, show_name: false) + render Users::AvatarComponent.new(user: journal.user, show_name: false) end header_start_container.with_column(flex_layout: true) do |header_text_container| header_text_container.with_row do render(Primer::Beta::Link.new( - href: user_url(@journal.user), + href: user_url(journal.user), target: "_blank", scheme: :primary, underline: false, font_weight: :bold )) do - @journal.user.name + journal.user.name end end header_text_container.with_row(flex_layout: true) do |header_text_timestamp_container| @@ -30,7 +30,7 @@ end end header_text_timestamp_container.with_column do - render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) { format_time(@journal.updated_at) } + render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) { format_time(journal.updated_at) } end end end @@ -44,7 +44,7 @@ font_size: :small, data: { turbo: false } )) do - "##{@journal.version}" + "##{journal.version}" end end header_end_container.with_column(ml: 2) do @@ -58,21 +58,8 @@ end end end - if @journal.notes.present? - journal_container.with_row(mt: 3) do - render(Primer::Box.new(mt: 1)) do - format_text(@journal, :notes) - end - end - end - if @journal.details.any? && @journal.version != 1 - journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| - @journal.details.each do |detail| - details_container.with_row(mt: 1, font_size: :small) do - render(Primer::Beta::Text.new) { @journal.render_detail(detail) } - end - end - end + journal_container.with_row do + content end end end diff --git a/app/components/work_packages/activities_tab/journals/show_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb similarity index 67% rename from app/components/work_packages/activities_tab/journals/show_component.rb rename to app/components/work_packages/activities_tab/journals/item_component.rb index bad947775f79..bbca942ec0c1 100644 --- a/app/components/work_packages/activities_tab/journals/show_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -29,57 +29,67 @@ module WorkPackages module ActivitiesTab module Journals - class ShowComponent < ApplicationComponent + class ItemComponent < ApplicationComponent include ApplicationHelper - include AvatarHelper - include JournalFormatter include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:) + def initialize(journal:, state: :show) super @journal = journal + @state = state + end + + def content + case state + when :show + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new(**child_component_params)) + when :edit + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Edit.new(**child_component_params)) + end end private + attr_reader :journal, :state + def wrapper_uniq_by - @journal.id + journal.id + end + + def child_component_params + { journal: }.compact end def wrapper_data_attributes { - controller: "work-packages--activities-tab--show", + controller: "work-packages--activities-tab--item", "application-target": "dynamic", - "work-packages--activities-tab--show-activity-url-value": activity_url + "work-packages--activities-tab--item-activity-url-value": activity_url } end def activity_url - "#{project_work_package_url(@journal.journable.project, @journal.journable)}/activity#{activity_anchor}" + "#{project_work_package_url(journal.journable.project, journal.journable)}/activity#{activity_anchor}" end def activity_anchor - "#activity-#{@journal.version}" - end - - def data_type - @journal.data_type + "#activity-#{journal.version}" end def editable? - @journal.user == User.current + journal.user == User.current end def initial_version? - @journal.version == 1 + journal.version == 1 end def updated? return false if initial_version? - @journal.updated_at - @journal.created_at > 5.seconds + journal.updated_at - journal.created_at > 5.seconds end def copy_url_action_item(menu) @@ -87,7 +97,7 @@ def copy_url_action_item(menu) tag: :button, content_arguments: { data: { - action: "click->work-packages--activities-tab--show#copyActivityUrlToClipboard" + action: "click->work-packages--activities-tab--item#copyActivityUrlToClipboard" } }) do |item| item.with_leading_visual_icon(icon: :copy) @@ -95,19 +105,10 @@ def copy_url_action_item(menu) end def edit_action_item(menu) - # menu.with_item(label: t("label_edit"), - # href: edit_work_package_activity_path(@journal.journable, @journal), - # content_arguments: { - # data: { "turbo-stream": true } - # }) do |item| - # item.with_leading_visual_icon(icon: :pencil) - # end menu.with_item(label: t("label_edit"), - tag: :button, + href: edit_work_package_activity_path(journal.journable, journal), content_arguments: { - data: { - action: "click->work-packages--activities-tab--show#edit" - } + data: { "turbo-stream": true } }) do |item| item.with_leading_visual_icon(icon: :pencil) end diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb new file mode 100644 index 000000000000..41ccbab3dc75 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -0,0 +1,13 @@ +<%= + component_wrapper do + render(Primer::Box.new(mt: 3)) do + render( + WorkPackages::ActivitiesTab::Journals::FormComponent.new( + journal:, + submit_path: work_package_activity_path(work_package_id: work_package.id, id: journal.id), + cancel_path: cancel_edit_work_package_activity_path(work_package.id, id: journal.id) + ) + ) + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.rb b/app/components/work_packages/activities_tab/journals/item_component/edit.rb new file mode 100644 index 000000000000..8bf22a5f7a8f --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.rb @@ -0,0 +1,54 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class ItemComponent::Edit < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(journal:) + super + + @journal = journal + @work_package = journal.journable + end + + private + + attr_reader :journal, :work_package + + def wrapper_uniq_by + journal.id + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb new file mode 100644 index 000000000000..a45b3637707d --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb @@ -0,0 +1,24 @@ +<%= + component_wrapper do + if journal.notes.present? || (journal.details.any? && journal.version != 1) + flex_layout do |journal_container| + if journal.notes.present? + journal_container.with_row(mt: 3) do + render(Primer::Box.new(mt: 1)) do + format_text(journal, :notes) + end + end + end + if journal.details.any? && journal.version != 1 + journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| + journal.details.each do |detail| + details_container.with_row(mt: 1, font_size: :small) do + render(Primer::Beta::Text.new) { journal.render_detail(detail) } + end + end + end + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.rb b/app/components/work_packages/activities_tab/journals/item_component/show.rb new file mode 100644 index 000000000000..a461cd5e43ec --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/show.rb @@ -0,0 +1,55 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class ItemComponent::Show < ApplicationComponent + include ApplicationHelper + include AvatarHelper + include JournalFormatter + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(journal:) + super + + @journal = journal + end + + private + + attr_reader :journal + + def wrapper_uniq_by + journal.id + end + end + end + end +end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 2d801d4df11b..1ca6b6bfd6ba 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -33,6 +33,7 @@ class WorkPackages::ActivitiesTabController < ApplicationController before_action :find_work_package before_action :find_project + before_action :find_journal, only: %i[edit cancel_edit update] before_action :authorize def index @@ -55,6 +56,29 @@ def journal_streams respond_with_turbo_streams end + def edit + # check if allowed to edit at all + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: @journal, + state: :edit + ) + ) + + respond_with_turbo_streams + end + + def cancel_edit + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: @journal, + state: :show + ) + ) + + respond_with_turbo_streams + end + def create latest_journal_version = @work_package.journals.last.try(:version) || 0 @@ -71,6 +95,24 @@ def create respond_with_turbo_streams end + def update + call = Journals::UpdateService.new(model: @journal, user: User.current).call( + notes: journal_params[:notes] + ) + + if call.success? && call.result + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: call.result, + state: :show + ) + ) + end + # TODO: handle errors + + respond_with_turbo_streams + end + private def find_work_package @@ -81,6 +123,10 @@ def find_project @project = @work_package.project end + def find_journal + @journal = Journal.find(params[:id]) + end + def journal_sorting User.current.preference&.comments_sorting || "desc" end @@ -104,7 +150,7 @@ def append_or_prepend_latest_journal_via_turbo_stream(journal) target_component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package ), - component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: ) } @@ -119,7 +165,7 @@ def append_or_prepend_latest_journal_via_turbo_stream(journal) def update_journal_via_turbo_stream(journal) update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ShowComponent.new(journal:) + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) ) end diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 67611c5970a1..54d3881a66e0 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -187,7 +187,7 @@ work_packages: %i[show index], work_packages_api: [:get], "work_packages/reports": %i[report report_details], - "work_packages/activities_tab": %i[index create journal_streams] + "work_packages/activities_tab": %i[index create journal_streams edit cancel_edit update] }, permissible_on: %i[work_package project], contract_actions: { work_packages: %i[read] } diff --git a/config/routes.rb b/config/routes.rb index c5d6cc885b96..14c973551b83 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -528,7 +528,10 @@ end end - resources :activities, controller: "work_packages/activities_tab", only: %i[index create edit] do + resources :activities, controller: "work_packages/activities_tab", only: %i[index create edit update] do + member do + get :cancel_edit + end collection do get :journal_streams end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/item.controller.ts similarity index 93% rename from frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts rename to frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/item.controller.ts index 047c04efe707..e4e11764d28f 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/show.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/item.controller.ts @@ -30,7 +30,7 @@ import { Controller } from '@hotwired/stimulus'; -export default class ShowController extends Controller { +export default class ItemController extends Controller { static values = { activityUrl: String, }; @@ -40,8 +40,4 @@ export default class ShowController extends Controller { async copyActivityUrlToClipboard() { await navigator.clipboard.writeText(this.activityUrlValue); } - - edit() { - alert('Not yet implemented'); - } } From 1149522c05018319f4e643caa7a395f5a77a79be Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 27 May 2024 15:18:58 +0200 Subject: [PATCH 007/120] prevent edit state form being overwritten and added basic polling for evaluation as discussed with @wielinde --- .../activities_tab/index_component.rb | 5 +-- .../activities_tab_controller.rb | 17 ++++++--- .../activities-tab/index.controller.ts | 36 +++++++++++++++---- 3 files changed, 44 insertions(+), 14 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index fd9e39468eb6..9cc0353d9e59 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -49,8 +49,9 @@ def wrapper_data_attributes { controller: "work-packages--activities-tab--index", "application-target": "dynamic", - "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_path(work_package), - "work-packages--activities-tab--index-sorting-value": journal_sorting + "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_url(work_package), + "work-packages--activities-tab--index-sorting-value": journal_sorting, + "work-packages--activities-tab--index-polling-interval-in-ms-value": 5000 # protoypical implementation } end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 1ca6b6bfd6ba..c015ef1a8f6d 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -46,12 +46,19 @@ def index end def journal_streams - # TODO: only update specific journal components or append/prepend new journals based on latest client state - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( - work_package: @work_package + # TODO: prototypical implementation + @work_package.journals.where("updated_at > ?", params[:last_update_timestamp]).find_each do |journal| + update_via_turbo_stream( + # only use the show component in order not to loose an edit state + component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( + journal: + ) ) - ) + end + + @work_package.journals.where("created_at > ?", params[:last_update_timestamp]).find_each do |journal| + append_or_prepend_latest_journal_via_turbo_stream(journal) + end respond_with_turbo_streams end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 652a89230ea8..5ccfdebdaee7 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -35,12 +35,17 @@ export default class IndexController extends Controller { static values = { journalStreamsUrl: String, sorting: String, + pollingIntervalInMs: Number, }; declare journalStreamsUrlValue:string; declare sortingValue:string; + declare lastUpdateTimestamp:string; + declare intervallId:number; + declare pollingIntervalInMsValue:number; connect() { + this.lastUpdateTimestamp = new Date().toISOString(); this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); @@ -49,10 +54,13 @@ export default class IndexController extends Controller { } else if (this.sortingValue === 'asc') { this.scrollToBottom(); } + + this.intervallId = this.pollForUpdates(); } disconnect() { document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); + window.clearInterval(this.intervallId); } scrollToActivity() { @@ -80,18 +88,32 @@ export default class IndexController extends Controller { } async updateActivitiesList() { - const response = await fetch(this.journalStreamsUrlValue, { - method: 'GET', - headers: { - 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, - Accept: 'text/vnd.turbo-stream.html', + const url = new URL(this.journalStreamsUrlValue); + url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); + + const response = await fetch( + url, + { + method: 'GET', + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + Accept: 'text/vnd.turbo-stream.html', + }, + credentials: 'same-origin', }, - credentials: 'same-origin', - }); + ); if (response.ok) { const text = await response.text(); Turbo.renderStreamMessage(text); + this.lastUpdateTimestamp = new Date().toISOString(); } } + + pollForUpdates() { + // protypical implementation of polling for updates in order to evaluate if we want to have this feature + return window.setInterval(() => { + this.updateActivitiesList(); + }, this.pollingIntervalInMsValue); + } } From fc5f94b8aaa11607d8b23ff110c32fd9401c7bfe Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 31 May 2024 14:42:36 +0200 Subject: [PATCH 008/120] changed polling frequency to 1 minute --- app/components/work_packages/activities_tab/index_component.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index 9cc0353d9e59..8a721948448e 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -51,7 +51,7 @@ def wrapper_data_attributes "application-target": "dynamic", "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_url(work_package), "work-packages--activities-tab--index-sorting-value": journal_sorting, - "work-packages--activities-tab--index-polling-interval-in-ms-value": 5000 # protoypical implementation + "work-packages--activities-tab--index-polling-interval-in-ms-value": 60000 # protoypical implementation } end From a0b5141c22206e48974d40887b7693b755ef84e9 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 5 Jun 2024 10:28:55 +0200 Subject: [PATCH 009/120] added comments only filter --- app/components/_index.sass | 1 + .../activities_tab/index_component.html.erb | 10 +++- .../activities_tab/index_component.rb | 20 ++----- .../journals/filter_component.html.erb | 23 ++++++++ .../journals/filter_component.rb | 56 +++++++++++++++++++ .../journals/filter_component.sass | 3 + .../journals/index_component.html.erb | 20 +++++-- .../journals/index_component.rb | 11 ++-- .../activities_tab_controller.rb | 34 +++++++++-- config/initializers/permissions.rb | 2 +- config/locales/en.yml | 4 ++ config/routes.rb | 3 +- .../activities-tab/index.controller.ts | 17 +++++- 13 files changed, 167 insertions(+), 37 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/filter_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/filter_component.rb create mode 100644 app/components/work_packages/activities_tab/journals/filter_component.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index 9bbe00352372..6c75bec3c328 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,4 +1,5 @@ @import "work_packages/activities_tab/journals/new_component" +@import "work_packages/activities_tab/journals/filter_component" @import "work_packages/share/modal_body_component" @import "work_packages/share/invite_user_form_component" @import "work_packages/progress/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index cc375be53e14..2a30cac7d24d 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -2,6 +2,14 @@ content_tag("turbo-frame", id: "work-package-activities-tab-content") do component_wrapper(data: wrapper_data_attributes) do flex_layout do |activties_tab_container| + activties_tab_container.with_row(mb: 2) do + render( + WorkPackages::ActivitiesTab::Journals::FilterComponent.new( + work_package: work_package, + only_comments: only_comments + ) + ) + end if journal_sorting == "desc" activties_tab_container.with_row do render( @@ -11,7 +19,7 @@ end activties_tab_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:) + WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, only_comments:) ) end if journal_sorting == "asc" diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index 8a721948448e..ab448876af3f 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -35,22 +35,24 @@ class IndexComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:) + def initialize(work_package:, only_comments: false) super @work_package = work_package + @only_comments = only_comments end private - attr_reader :work_package + attr_reader :work_package, :only_comments def wrapper_data_attributes { controller: "work-packages--activities-tab--index", "application-target": "dynamic", - "work-packages--activities-tab--index-journal-streams-url-value": journal_streams_work_package_activities_url(work_package), + "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), "work-packages--activities-tab--index-sorting-value": journal_sorting, + "work-packages--activities-tab--index-only-comments-value": only_comments, "work-packages--activities-tab--index-polling-interval-in-ms-value": 60000 # protoypical implementation } end @@ -58,18 +60,6 @@ def wrapper_data_attributes def journal_sorting User.current.preference&.comments_sorting || "desc" end - - def only_comments? - false # TODO: Implement this - end - - def journals - result = work_package.journals.includes(:user).reorder(version: journal_sorting) - - result = result.where.not(notes: "") if only_comments? - - result - end end end end diff --git a/app/components/work_packages/activities_tab/journals/filter_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_component.html.erb new file mode 100644 index 000000000000..405da0094645 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/filter_component.html.erb @@ -0,0 +1,23 @@ +<%= + component_wrapper do + if journals_with_notes_present? + render(Primer::Alpha::SegmentedControl.new(id: "only-comments-filter", "aria-label": "File view")) do |component| + component.with_item( + tag: :a, + href: filter_streams_work_package_activities_url(work_package), + label: "All activities", + icon: :pulse, + selected: !only_comments, + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetOnlyComments" } + ) + component.with_item( + tag: :a, + href: filter_streams_work_package_activities_url(work_package, only_comments: true), + label: "Only comments", + icon: :"comment-discussion", selected: only_comments, + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setOnlyComments" } + ) + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/filter_component.rb b/app/components/work_packages/activities_tab/journals/filter_component.rb new file mode 100644 index 000000000000..b20558f82dc7 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/filter_component.rb @@ -0,0 +1,56 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + module Journals + class FilterComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(work_package:, only_comments: false) + super + + @work_package = work_package + @only_comments = only_comments + end + + private + + attr_reader :work_package, :only_comments + + def journals_with_notes_present? + work_package.journals.where.not(notes: "").any? + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/filter_component.sass b/app/components/work_packages/activities_tab/journals/filter_component.sass new file mode 100644 index 000000000000..8ea0ae7f2528 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/filter_component.sass @@ -0,0 +1,3 @@ +#work-packages-activities-tab-journals-filter-component + #only-comments-filter + margin-left: 0px diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index cac5cbf0c043..65ace85f92ac 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,11 +1,21 @@ <%= component_wrapper do flex_layout(id: insert_target_modifier_id) do |journals_index_container| - journals.each do |journal| - journals_index_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) - ) + if journals.any? + journals.each do |journal| + journals_index_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) + ) + end + end + else + journals_index_container.with_row(mt: 2) do + render(Primer::Beta::Blankslate.new(border: true)) do |component| + component.with_visual_icon(icon: :pulse) + component.with_heading(tag: :h2).with_content(t("activities.work_packages.activity_tab.no_results_title_text")) + component.with_description { t("activities.work_packages.activity_tab.no_results_description_text") } + end end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index 5eb71d2cbcca..bf51b4f313ea 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -36,15 +36,16 @@ class IndexComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:) + def initialize(work_package:, only_comments: false) super @work_package = work_package + @only_comments = only_comments end private - attr_reader :work_package + attr_reader :work_package, :only_comments def insert_target_modified? true @@ -58,14 +59,10 @@ def journal_sorting User.current.preference&.comments_sorting || "desc" end - def only_comments? - false # TODO: Implement this - end - def journals result = work_package.journals.includes(:user).reorder(version: journal_sorting) - result = result.where.not(notes: "") if only_comments? + result = result.where.not(notes: "") if only_comments result end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index c015ef1a8f6d..191843b3d7e3 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -39,15 +39,41 @@ class WorkPackages::ActivitiesTabController < ApplicationController def index render( WorkPackages::ActivitiesTab::IndexComponent.new( - work_package: @work_package + work_package: @work_package, + only_comments: params[:only_comments] || false ), layout: false ) end - def journal_streams + def filter_streams + only_comments = params[:only_comments] || false + + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::FilterComponent.new( + work_package: @work_package, + only_comments: + ) + ) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package, + only_comments: + ) + ) + + respond_with_turbo_streams + end + + def update_streams + journals = @work_package.journals + + if params[:only_comments] == "true" + journals = journals.where.not(notes: "") + end + # TODO: prototypical implementation - @work_package.journals.where("updated_at > ?", params[:last_update_timestamp]).find_each do |journal| + journals.where("updated_at > ?", params[:last_update_timestamp]).find_each do |journal| update_via_turbo_stream( # only use the show component in order not to loose an edit state component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( @@ -56,7 +82,7 @@ def journal_streams ) end - @work_package.journals.where("created_at > ?", params[:last_update_timestamp]).find_each do |journal| + journals.where("created_at > ?", params[:last_update_timestamp]).find_each do |journal| append_or_prepend_latest_journal_via_turbo_stream(journal) end diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 0bc235bee18b..f8601bc2a3b7 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -196,7 +196,7 @@ work_packages: %i[show index], work_packages_api: [:get], "work_packages/reports": %i[report report_details], - "work_packages/activities_tab": %i[index create journal_streams edit cancel_edit update] + "work_packages/activities_tab": %i[index create update_streams filter_streams edit cancel_edit update] }, permissible_on: %i[work_package project], contract_actions: { work_packages: %i[read] } diff --git a/config/locales/en.yml b/config/locales/en.yml index 8c3d8b8f422b..ae17335d4ed5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -32,6 +32,10 @@ en: activities: index: no_results_title_text: There has not been any activity for the project within this time frame. + work_packages: + activity_tab: + no_results_title_text: Nothing to display + no_results_description_text: "Try to update your filter to see more." admin: plugins: diff --git a/config/routes.rb b/config/routes.rb index 4066f7c6cc37..c2a4bfee921b 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -543,7 +543,8 @@ get :cancel_edit end collection do - get :journal_streams + get :filter_streams + get :update_streams end end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 5ccfdebdaee7..6421bee4eeb8 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -33,16 +33,18 @@ import { Controller } from '@hotwired/stimulus'; export default class IndexController extends Controller { static values = { - journalStreamsUrl: String, + updateStreamsUrl: String, sorting: String, pollingIntervalInMs: Number, + onlyComments: Boolean, }; - declare journalStreamsUrlValue:string; + declare updateStreamsUrlValue:string; declare sortingValue:string; declare lastUpdateTimestamp:string; declare intervallId:number; declare pollingIntervalInMsValue:number; + declare onlyCommentsValue:boolean; connect() { this.lastUpdateTimestamp = new Date().toISOString(); @@ -88,8 +90,9 @@ export default class IndexController extends Controller { } async updateActivitiesList() { - const url = new URL(this.journalStreamsUrlValue); + const url = new URL(this.updateStreamsUrlValue); url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); + url.searchParams.append('only_comments', this.onlyCommentsValue.toString()); const response = await fetch( url, @@ -116,4 +119,12 @@ export default class IndexController extends Controller { this.updateActivitiesList(); }, this.pollingIntervalInMsValue); } + + setOnlyComments() { + this.onlyCommentsValue = true; + } + + unsetOnlyComments() { + this.onlyCommentsValue = false; + } } From 7fd2ac8aca1158e639febe497547f9e3966070ca Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 5 Jun 2024 10:37:05 +0200 Subject: [PATCH 010/120] added i18n --- .../activities_tab/journals/filter_component.html.erb | 4 ++-- config/locales/en.yml | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/filter_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_component.html.erb index 405da0094645..7cb2d450e085 100644 --- a/app/components/work_packages/activities_tab/journals/filter_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/filter_component.html.erb @@ -5,7 +5,7 @@ component.with_item( tag: :a, href: filter_streams_work_package_activities_url(work_package), - label: "All activities", + label: t("activities.work_packages.activity_tab.label_activity_show_all"), icon: :pulse, selected: !only_comments, data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetOnlyComments" } @@ -13,7 +13,7 @@ component.with_item( tag: :a, href: filter_streams_work_package_activities_url(work_package, only_comments: true), - label: "Only comments", + label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), icon: :"comment-discussion", selected: only_comments, data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setOnlyComments" } ) diff --git a/config/locales/en.yml b/config/locales/en.yml index ae17335d4ed5..9cefcb72ffa1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -36,6 +36,8 @@ en: activity_tab: no_results_title_text: Nothing to display no_results_description_text: "Try to update your filter to see more." + label_activity_show_only_comments: "Only comments" + label_activity_show_all: "All activities" admin: plugins: From cb44f598fb4bb793b7e0fcf970a216ab8d7d9c2f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 5 Jun 2024 11:59:33 +0200 Subject: [PATCH 011/120] highlight journal items with unread notification, minor refactoring --- .../journals/index_component.rb | 2 +- .../journals/item_component.html.erb | 5 +++++ .../activities_tab/journals/item_component.rb | 19 ++++++++++++++----- .../journals/item_component/show.html.erb | 4 ++-- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index bf51b4f313ea..fb5eb85b3f4b 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -60,7 +60,7 @@ def journal_sorting end def journals - result = work_package.journals.includes(:user).reorder(version: journal_sorting) + result = work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) result = result.where.not(notes: "") if only_comments diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 0ebcf162efb4..9378d0daef36 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -36,6 +36,11 @@ end end header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| + if has_unread_notifications? + header_end_container.with_column(mr: 2, pt: 1) do + bubble_html + end + end header_end_container.with_column do render(Primer::Beta::Link.new( href: activity_anchor, diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index bbca942ec0c1..40734e39fd0d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -82,16 +82,16 @@ def editable? journal.user == User.current end - def initial_version? - journal.version == 1 - end - def updated? - return false if initial_version? + return false if journal.initial? journal.updated_at - journal.created_at > 5.seconds end + def has_unread_notifications? + journal.notifications.where(read_ian: false, recipient_id: User.current.id).any? + end + def copy_url_action_item(menu) menu.with_item(label: t("button_copy_link_to_clipboard"), tag: :button, @@ -113,6 +113,15 @@ def edit_action_item(menu) item.with_leading_visual_icon(icon: :pencil) end end + + def bubble_html + " + + ".html_safe + end end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb index a45b3637707d..797b27b85820 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb @@ -1,6 +1,6 @@ <%= component_wrapper do - if journal.notes.present? || (journal.details.any? && journal.version != 1) + if journal.notes.present? || (journal.details.any? && !journal.initial?) flex_layout do |journal_container| if journal.notes.present? journal_container.with_row(mt: 3) do @@ -9,7 +9,7 @@ end end end - if journal.details.any? && journal.version != 1 + if journal.details.any? && !journal.initial? journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| journal.details.each do |detail| details_container.with_row(mt: 1, font_size: :small) do From 435368f173956181921656ba700ee6bb5aaf82c3 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 7 Jun 2024 16:19:03 +0200 Subject: [PATCH 012/120] changed filter component as seen on updated mockups --- .../activities_tab/index_component.html.erb | 34 ++++++------ .../activities_tab/index_component.rb | 8 +-- .../journals/filter_component.html.erb | 54 +++++++++++++------ .../journals/filter_component.rb | 18 +++++-- .../journals/index_component.rb | 9 ++-- .../activities_tab_controller.rb | 14 +++-- .../activities_tab/journals/notes_form.rb | 5 +- config/locales/en.yml | 7 ++- .../activities-tab/index.controller.ts | 18 ++++--- 9 files changed, 106 insertions(+), 61 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 2a30cac7d24d..066336b18fb5 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -5,30 +5,30 @@ activties_tab_container.with_row(mb: 2) do render( WorkPackages::ActivitiesTab::Journals::FilterComponent.new( - work_package: work_package, - only_comments: only_comments + work_package:, + filter: ) ) end - if journal_sorting == "desc" - activties_tab_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - ) - end - end + # if journal_sorting == "desc" + # activties_tab_container.with_row do + # render( + # WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + # ) + # end + # end activties_tab_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, only_comments:) + WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end - if journal_sorting == "asc" - activties_tab_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - ) - end - end + # if journal_sorting == "asc" + # activties_tab_container.with_row do + # render( + # WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + # ) + # end + # end end end end diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index ab448876af3f..a22f51a5f2c2 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -35,16 +35,16 @@ class IndexComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:, only_comments: false) + def initialize(work_package:, filter: :all) super @work_package = work_package - @only_comments = only_comments + @filter = filter end private - attr_reader :work_package, :only_comments + attr_reader :work_package, :filter def wrapper_data_attributes { @@ -52,7 +52,7 @@ def wrapper_data_attributes "application-target": "dynamic", "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), "work-packages--activities-tab--index-sorting-value": journal_sorting, - "work-packages--activities-tab--index-only-comments-value": only_comments, + "work-packages--activities-tab--index-filter-value": filter, "work-packages--activities-tab--index-polling-interval-in-ms-value": 60000 # protoypical implementation } end diff --git a/app/components/work_packages/activities_tab/journals/filter_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_component.html.erb index 7cb2d450e085..818ad99b2692 100644 --- a/app/components/work_packages/activities_tab/journals/filter_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/filter_component.html.erb @@ -1,23 +1,43 @@ <%= component_wrapper do - if journals_with_notes_present? - render(Primer::Alpha::SegmentedControl.new(id: "only-comments-filter", "aria-label": "File view")) do |component| - component.with_item( - tag: :a, - href: filter_streams_work_package_activities_url(work_package), - label: t("activities.work_packages.activity_tab.label_activity_show_all"), - icon: :pulse, - selected: !only_comments, - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetOnlyComments" } - ) - component.with_item( - tag: :a, - href: filter_streams_work_package_activities_url(work_package, only_comments: true), - label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), - icon: :"comment-discussion", selected: only_comments, - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setOnlyComments" } - ) + render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: t("activities.work_packages.activity_tab.label_activity_filter"))) do |menu| + menu.with_show_button do |button| + button.with_trailing_action_icon(icon: :"triangle-down") + t("activities.work_packages.activity_tab.label_activity_filter") end + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_all"), + href: filter_streams_work_package_activities_url(work_package), + form_arguments: { + method: :get + }, + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter" } + }, + active: show_all? + ) + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_only_changes"), + href: filter_streams_work_package_activities_url(work_package, filter: :only_changes), + form_arguments: { + method: :get, + }, + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges" } + }, + active: show_only_changes? + ) + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), + href: filter_streams_work_package_activities_url(work_package, filter: :only_comments), + form_arguments: { + method: :get, + }, + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments" } + }, + active: show_only_comments? + ) end end %> diff --git a/app/components/work_packages/activities_tab/journals/filter_component.rb b/app/components/work_packages/activities_tab/journals/filter_component.rb index b20558f82dc7..2637f45c75d9 100644 --- a/app/components/work_packages/activities_tab/journals/filter_component.rb +++ b/app/components/work_packages/activities_tab/journals/filter_component.rb @@ -36,20 +36,32 @@ class FilterComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:, only_comments: false) + def initialize(work_package:, filter: :all) super @work_package = work_package - @only_comments = only_comments + @filter = filter end private - attr_reader :work_package, :only_comments + attr_reader :work_package, :filter def journals_with_notes_present? work_package.journals.where.not(notes: "").any? end + + def show_all? + filter == :all + end + + def show_only_comments? + filter == :only_comments + end + + def show_only_changes? + filter == :only_changes + end end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index fb5eb85b3f4b..3cff987bdde5 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -36,16 +36,16 @@ class IndexComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:, only_comments: false) + def initialize(work_package:, filter: :all) super @work_package = work_package - @only_comments = only_comments + @filter = filter end private - attr_reader :work_package, :only_comments + attr_reader :work_package, :filter def insert_target_modified? true @@ -62,7 +62,8 @@ def journal_sorting def journals result = work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) - result = result.where.not(notes: "") if only_comments + result = result.where.not(notes: "") if filter == :only_comments + result = result.where(notes: "") if filter == :only_changes result end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 191843b3d7e3..83bdcb97db94 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -40,25 +40,25 @@ def index render( WorkPackages::ActivitiesTab::IndexComponent.new( work_package: @work_package, - only_comments: params[:only_comments] || false + filter: params[:filter]&.to_sym || :all ), layout: false ) end def filter_streams - only_comments = params[:only_comments] || false + filter = params[:filter]&.to_sym || :all update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::FilterComponent.new( work_package: @work_package, - only_comments: + filter: ) ) update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package, - only_comments: + filter: ) ) @@ -68,10 +68,14 @@ def filter_streams def update_streams journals = @work_package.journals - if params[:only_comments] == "true" + if params[:filter] == "only_comments" journals = journals.where.not(notes: "") end + if params[:filter] == "only_changes" + journals = journals.where(notes: "") + end + # TODO: prototypical implementation journals.where("updated_at > ?", params[:last_update_timestamp]).find_each do |journal| update_via_turbo_stream( diff --git a/app/forms/work_packages/activities_tab/journals/notes_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb index 6ec9038b92f3..e61141595426 100644 --- a/app/forms/work_packages/activities_tab/journals/notes_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -32,8 +32,9 @@ class NotesForm < ApplicationForm name: :notes, label: nil, rich_text_options: { - resource: nil, - showAttachments: false + resource:, + showAttachments: false, + macros: "none" } ) end diff --git a/config/locales/en.yml b/config/locales/en.yml index 9cefcb72ffa1..d7afa0471cac 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -36,8 +36,11 @@ en: activity_tab: no_results_title_text: Nothing to display no_results_description_text: "Try to update your filter to see more." - label_activity_show_only_comments: "Only comments" - label_activity_show_all: "All activities" + label_activity_filter: "Show" + label_activity_show_all: "everything" + label_activity_show_only_comments: "comments only" + label_activity_show_only_changes: "changes only" + admin: plugins: diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 6421bee4eeb8..d9bb3005b23d 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -36,7 +36,7 @@ export default class IndexController extends Controller { updateStreamsUrl: String, sorting: String, pollingIntervalInMs: Number, - onlyComments: Boolean, + filter: String, }; declare updateStreamsUrlValue:string; @@ -44,7 +44,7 @@ export default class IndexController extends Controller { declare lastUpdateTimestamp:string; declare intervallId:number; declare pollingIntervalInMsValue:number; - declare onlyCommentsValue:boolean; + declare filterValue:string; connect() { this.lastUpdateTimestamp = new Date().toISOString(); @@ -92,7 +92,7 @@ export default class IndexController extends Controller { async updateActivitiesList() { const url = new URL(this.updateStreamsUrlValue); url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); - url.searchParams.append('only_comments', this.onlyCommentsValue.toString()); + url.searchParams.append('filter', this.filterValue); const response = await fetch( url, @@ -120,11 +120,15 @@ export default class IndexController extends Controller { }, this.pollingIntervalInMsValue); } - setOnlyComments() { - this.onlyCommentsValue = true; + setFilterToOnlyComments() { + this.filterValue = 'only_comments'; } - unsetOnlyComments() { - this.onlyCommentsValue = false; + setFilterToOnlyChanges() { + this.filterValue = 'only_changes'; + } + + unsetFilter() { + this.filterValue = ''; } } From 7ad0e2fb13e0f9823719e3e0c4cd971588cc8ea4 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 7 Jun 2024 17:58:06 +0200 Subject: [PATCH 013/120] added sorting update directly in activity tab --- app/components/_index.sass | 1 - .../activities_tab/index_component.html.erb | 2 +- .../filter_and_sorting_component.html.erb | 63 +++++++++++++++++++ ...ent.rb => filter_and_sorting_component.rb} | 18 ++++-- .../journals/filter_component.html.erb | 43 ------------- .../journals/filter_component.sass | 3 - .../activities_tab_controller.rb | 32 +++++++++- config/initializers/permissions.rb | 3 +- config/locales/en.yml | 9 +-- config/routes.rb | 3 +- 10 files changed, 116 insertions(+), 61 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb rename app/components/work_packages/activities_tab/journals/{filter_component.rb => filter_and_sorting_component.rb} (86%) delete mode 100644 app/components/work_packages/activities_tab/journals/filter_component.html.erb delete mode 100644 app/components/work_packages/activities_tab/journals/filter_component.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index 6c75bec3c328..9bbe00352372 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,5 +1,4 @@ @import "work_packages/activities_tab/journals/new_component" -@import "work_packages/activities_tab/journals/filter_component" @import "work_packages/share/modal_body_component" @import "work_packages/share/invite_user_form_component" @import "work_packages/progress/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 066336b18fb5..f5b617b1e0d2 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -4,7 +4,7 @@ flex_layout do |activties_tab_container| activties_tab_container.with_row(mb: 2) do render( - WorkPackages::ActivitiesTab::Journals::FilterComponent.new( + WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( work_package:, filter: ) diff --git a/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb new file mode 100644 index 000000000000..298b2fe31de9 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb @@ -0,0 +1,63 @@ +<%= + component_wrapper do + + flex_layout(justify_content: :space_between) do |container| + container.with_column do + render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true)) do |menu| + menu.with_show_button do |button| + button.with_trailing_action_icon(icon: :"triangle-down") + end + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_all"), + href: update_filter_work_package_activities_path(work_package), + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter" } + }, + active: show_all? + ) + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_only_changes"), + href: update_filter_work_package_activities_path(work_package, filter: :only_changes), + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges" } + }, + active: show_only_changes? + ) + menu.with_item( + label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), + href: update_filter_work_package_activities_path(work_package, filter: :only_comments), + content_arguments: { + data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments" } + }, + active: show_only_comments? + ) + end + end + container.with_column do + render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true)) do |menu| + menu.with_show_button(scheme: :invisible) do |button| + button.with_trailing_action_icon(icon: :"triangle-down") + end + menu.with_item( + label: t("activities.work_packages.activity_tab.label_sort_desc"), + href: update_sorting_work_package_activities_path(work_package, sorting: :desc, filter:), + form_arguments: { method: :put }, + content_arguments: { + data: { "turbo-stream": true } + }, + active: desc_sorting? + ) + menu.with_item( + label: t("activities.work_packages.activity_tab.label_sort_asc"), + href: update_sorting_work_package_activities_path(work_package, sorting: :asc, filter:), + form_arguments: { method: :put }, + content_arguments: { + data: { "turbo-stream": true } + }, + active: asc_sorting? + ) + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/filter_component.rb b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.rb similarity index 86% rename from app/components/work_packages/activities_tab/journals/filter_component.rb rename to app/components/work_packages/activities_tab/journals/filter_and_sorting_component.rb index 2637f45c75d9..02bd2bfe7234 100644 --- a/app/components/work_packages/activities_tab/journals/filter_component.rb +++ b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.rb @@ -31,7 +31,7 @@ module WorkPackages module ActivitiesTab module Journals - class FilterComponent < ApplicationComponent + class FilterAndSortingComponent < ApplicationComponent include ApplicationHelper include OpPrimer::ComponentHelpers include OpTurbo::Streamable @@ -47,10 +47,6 @@ def initialize(work_package:, filter: :all) attr_reader :work_package, :filter - def journals_with_notes_present? - work_package.journals.where.not(notes: "").any? - end - def show_all? filter == :all end @@ -62,6 +58,18 @@ def show_only_comments? def show_only_changes? filter == :only_changes end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end + + def desc_sorting? + journal_sorting == "desc" + end + + def asc_sorting? + journal_sorting == "asc" + end end end end diff --git a/app/components/work_packages/activities_tab/journals/filter_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_component.html.erb deleted file mode 100644 index 818ad99b2692..000000000000 --- a/app/components/work_packages/activities_tab/journals/filter_component.html.erb +++ /dev/null @@ -1,43 +0,0 @@ -<%= - component_wrapper do - render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: t("activities.work_packages.activity_tab.label_activity_filter"))) do |menu| - menu.with_show_button do |button| - button.with_trailing_action_icon(icon: :"triangle-down") - t("activities.work_packages.activity_tab.label_activity_filter") - end - menu.with_item( - label: t("activities.work_packages.activity_tab.label_activity_show_all"), - href: filter_streams_work_package_activities_url(work_package), - form_arguments: { - method: :get - }, - content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter" } - }, - active: show_all? - ) - menu.with_item( - label: t("activities.work_packages.activity_tab.label_activity_show_only_changes"), - href: filter_streams_work_package_activities_url(work_package, filter: :only_changes), - form_arguments: { - method: :get, - }, - content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges" } - }, - active: show_only_changes? - ) - menu.with_item( - label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), - href: filter_streams_work_package_activities_url(work_package, filter: :only_comments), - form_arguments: { - method: :get, - }, - content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments" } - }, - active: show_only_comments? - ) - end - end -%> diff --git a/app/components/work_packages/activities_tab/journals/filter_component.sass b/app/components/work_packages/activities_tab/journals/filter_component.sass deleted file mode 100644 index 8ea0ae7f2528..000000000000 --- a/app/components/work_packages/activities_tab/journals/filter_component.sass +++ /dev/null @@ -1,3 +0,0 @@ -#work-packages-activities-tab-journals-filter-component - #only-comments-filter - margin-left: 0px diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 83bdcb97db94..99e0df6d7065 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -46,11 +46,11 @@ def index ) end - def filter_streams + def update_filter filter = params[:filter]&.to_sym || :all update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::FilterComponent.new( + component: WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( work_package: @work_package, filter: ) @@ -150,6 +150,34 @@ def update respond_with_turbo_streams end + def update_sorting + filter = params[:filter]&.to_sym || :all + + # User.current.preference.update!(comments_sorting: params[:sorting]) + + call = Users::UpdateService.new(user: User.current, model: User.current).call( + pref: { comments_sorting: params[:sorting] } + ) + + if call.success? + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( + work_package: @work_package, + filter: + ) + ) + + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package, + filter: + ) + ) + end + + respond_with_turbo_streams + end + private def find_work_package diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index f8601bc2a3b7..ddc376b701c0 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -196,7 +196,8 @@ work_packages: %i[show index], work_packages_api: [:get], "work_packages/reports": %i[report report_details], - "work_packages/activities_tab": %i[index create update_streams filter_streams edit cancel_edit update] + "work_packages/activities_tab": %i[index create update_streams edit cancel_edit update + update_sorting update_filter] }, permissible_on: %i[work_package project], contract_actions: { work_packages: %i[read] } diff --git a/config/locales/en.yml b/config/locales/en.yml index d7afa0471cac..f9f3173e1a52 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -36,10 +36,11 @@ en: activity_tab: no_results_title_text: Nothing to display no_results_description_text: "Try to update your filter to see more." - label_activity_filter: "Show" - label_activity_show_all: "everything" - label_activity_show_only_comments: "comments only" - label_activity_show_only_changes: "changes only" + label_activity_show_all: "Show everything" + label_activity_show_only_comments: "Show comments only" + label_activity_show_only_changes: "Show changes only" + label_sort_asc: "Oldest on top" + label_sort_desc: "Newest on top" admin: diff --git a/config/routes.rb b/config/routes.rb index c2a4bfee921b..a93a912ed90e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -543,8 +543,9 @@ get :cancel_edit end collection do - get :filter_streams get :update_streams + get :update_filter # filter not persisted + put :update_sorting # sorting is persisted end end From 21a7eea8320227645d5ad0cc240e47b80a1639cc Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 11 Jun 2024 18:58:12 +0200 Subject: [PATCH 014/120] implemented sticky bottom editor approach, file upload and mentions not working yet via ckeditor --- app/components/_index.sass | 2 + .../activities_tab/index_component.html.erb | 21 +--- .../activities_tab/index_component.sass | 15 +++ .../journals/form_component.html.erb | 2 +- .../journals/item_component/edit.html.erb | 2 +- .../journals/item_component/edit.sass | 13 ++ .../journals/new_component.html.erb | 53 ++++++-- .../activities_tab/journals/new_component.rb | 5 + .../journals/new_component.sass | 24 +++- .../activities_tab/journals/notes_form.rb | 15 ++- config/locales/en.yml | 1 + .../ckeditor-augmented-textarea.component.ts | 5 +- .../layout/work_packages/_full_view.sass | 2 +- .../activities-tab/new.controller.ts | 117 ++++++++++++++++-- 14 files changed, 225 insertions(+), 52 deletions(-) create mode 100644 app/components/work_packages/activities_tab/index_component.sass create mode 100644 app/components/work_packages/activities_tab/journals/item_component/edit.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index 9bbe00352372..476da9ea37f3 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,4 +1,6 @@ +@import "work_packages/activities_tab/index_component" @import "work_packages/activities_tab/journals/new_component" +@import "work_packages/activities_tab/journals/item_component/edit" @import "work_packages/share/modal_body_component" @import "work_packages/share/invite_user_form_component" @import "work_packages/progress/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index f5b617b1e0d2..2ab8703fc80a 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -10,25 +10,16 @@ ) ) end - # if journal_sorting == "desc" - # activties_tab_container.with_row do - # render( - # WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - # ) - # end - # end - activties_tab_container.with_row do + activties_tab_container.with_row(id: "journals-container") do render( WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end - # if journal_sorting == "asc" - # activties_tab_container.with_row do - # render( - # WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - # ) - # end - # end + activties_tab_container.with_row(id: "input-container", mt: 3, pt: 3, pb: 3, pl: 3, pr: 2, border: :top, bg: :subtle) do + render( + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + ) + end end end end diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass new file mode 100644 index 000000000000..2a953e5acb7b --- /dev/null +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -0,0 +1,15 @@ +#work-packages-activities-tab-index-component + #journals-container + overflow-y: auto + margin-bottom: 90px // initial margin-bottom, will be increased by stimulus when opening ckeditor + &.with-input-compensation + margin-bottom: 340px + #input-container + position: absolute + min-height: 60px + bottom: 0 + left: 0 + right: 0 + @media screen and (max-width: $breakpoint-md) + width: 100vw + margin-left: -15px diff --git a/app/components/work_packages/activities_tab/journals/form_component.html.erb b/app/components/work_packages/activities_tab/journals/form_component.html.erb index ec4bcd0a4b8f..d26adad9bc56 100644 --- a/app/components/work_packages/activities_tab/journals/form_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/form_component.html.erb @@ -8,7 +8,7 @@ ) do |f| flex_layout do |form_container| form_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| submit_container.with_column(mr: 2) do diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 41ccbab3dc75..2820e6293de7 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -1,5 +1,5 @@ <%= - component_wrapper do + component_wrapper(class: "work-packages-activities-tab-journals-item-component-edit") do render(Primer::Box.new(mt: 3)) do render( WorkPackages::ActivitiesTab::Journals::FormComponent.new( diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.sass b/app/components/work_packages/activities_tab/journals/item_component/edit.sass new file mode 100644 index 000000000000..38adcf394e01 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.sass @@ -0,0 +1,13 @@ +.work-packages-activities-tab-journals-item-component-edit + // prototypical primer style adoptions + .ck-toolbar + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px!important + .document-editor__editable-container + background: var(--color-scale-white) + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium)!important + .ck-content + background: var(--color-scale-white) + overflow-y: auto + border-radius: var(--borderRadius-medium)!important + margin: 5px + diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 31482dbb1154..cdbb06ff4c3f 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -1,29 +1,58 @@ <%= component_wrapper(data: wrapper_data_attributes) do flex_layout(my: 2) do |new_form_container| - new_form_container.with_row() do - render(Primer::Beta::Button.new( + new_form_container.with_row(data: { + "work-packages--activities-tab--new-target": "buttonRow" + }) do + flex_layout(justify_content: :space_between) do |button_row| + button_row.with_column(id: "input-trigger-column", mr: 2) do + render(Primer::Beta::Button.new( + text_align: :left, scheme: :default, size: :medium, block: true, - data: { - "work-packages--activities-tab--new-target": "button", + data: { "action": "click->work-packages--activities-tab--new#showForm" } )) do - render(Primer::Beta::Text.new()) { I18n.t("js.label_add_comment_title") } + render(Primer::Beta::Text.new(color: :muted, font_weight: :normal)) { t("activities.work_packages.activity_tab.label_type_to_comment") } + end + end + button_row.with_column do + render(Primer::Beta::IconButton.new( + scheme: :default, + icon: :"paper-airplane", + "aria-label": "submit comment", + disabled: true + )) + end end end new_form_container.with_row( display: :none, - data: { "work-packages--activities-tab--new-target": "form" } + data: { "work-packages--activities-tab--new-target": "formRow" } ) do - render( - WorkPackages::ActivitiesTab::Journals::FormComponent.new( - journal:, - submit_path: work_package_activities_path(work_package_id: work_package.id) - ) - ) + primer_form_with( + id: "work-package-journal-form", + model: journal, + method: :post, + data: { turbo: true, turbo_stream: true, "work-packages--activities-tab--new-target": "form", action: "submit->work-packages--activities-tab--new#onSubmit" }, + url: work_package_activities_path(work_package_id: work_package.id), + ) do |f| + flex_layout(justify_content: :space_between, align_items: :flex_end) do |form_container| + form_container.with_column(id: "ck-editor-column", mr: 2) do + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) + end + form_container.with_column do + render(Primer::Beta::IconButton.new( + scheme: :default, + icon: :"paper-airplane", + "aria-label": "submit comment", + type: :submit + )) + end + end + end end end end diff --git a/app/components/work_packages/activities_tab/journals/new_component.rb b/app/components/work_packages/activities_tab/journals/new_component.rb index 91a980e3190b..889c16aecbe8 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.rb +++ b/app/components/work_packages/activities_tab/journals/new_component.rb @@ -49,9 +49,14 @@ def journal def wrapper_data_attributes { controller: "work-packages--activities-tab--new", + "work-packages--activities-tab--new-sorting-value": journal_sorting, "application-target": "dynamic" } end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end end end end diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index f21398240e09..27e33c901fee 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -1,3 +1,23 @@ #work-packages-activities-tab-journals-new-component - #work-package-journal-new-label - cursor: pointer + #input-trigger-column + width: 100% + button + background: var(--color-scale-white) + cursor: text + .Button-content + display: block + #ck-editor-column + width: 100% + // prototypical primer style adoptions + .ck-toolbar + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px + .document-editor__editable-container + background: var(--color-scale-white) + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-content + background: var(--color-scale-white) + height: 235px + overflow-y: auto + border-radius: var(--borderRadius-medium) + margin: 5px + diff --git a/app/forms/work_packages/activities_tab/journals/notes_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb index e61141595426..f76ba4ede8b3 100644 --- a/app/forms/work_packages/activities_tab/journals/notes_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -32,20 +32,23 @@ class NotesForm < ApplicationForm name: :notes, label: nil, rich_text_options: { - resource:, showAttachments: false, - macros: "none" + macros: "none", + resource:, + editorType: "constrained" } ) end + def initialize(journal:) + @journal = journal + end + private def resource - return unless object&.journal - - API::V3::Journals::JournalRepresenter - .new(object.journal, current_user: User.current, embed_links: false) + API::V3::Activities::ActivityRepresenter + .new(@journal, current_user: User.current, embed_links: false) end end end diff --git a/config/locales/en.yml b/config/locales/en.yml index f9f3173e1a52..f14b20010915 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -41,6 +41,7 @@ en: label_activity_show_only_changes: "Show changes only" label_sort_asc: "Oldest on top" label_sort_desc: "Newest on top" + label_type_to_comment: "Type here to comment" admin: diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts index e97081b1bff4..db7e40a6981a 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts +++ b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts @@ -170,7 +170,10 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl } if (this.turboMode) { - navigator.submitForm(this.formElement, evt?.submitter || undefined); + // If the form has a stimulus action defined, we ONLY want to submit it via stimulus + if (!this.formElement.dataset.action) { + navigator.submitForm(this.formElement, evt?.submitter || undefined); + } } else { this.formElement.requestSubmit(evt?.submitter); } diff --git a/frontend/src/global_styles/layout/work_packages/_full_view.sass b/frontend/src/global_styles/layout/work_packages/_full_view.sass index df620ed27713..6616c4a1fe81 100644 --- a/frontend/src/global_styles/layout/work_packages/_full_view.sass +++ b/frontend/src/global_styles/layout/work_packages/_full_view.sass @@ -79,7 +79,7 @@ display: grid grid-template-rows: auto auto 1fr height: 100% - padding: 5px 0 10px 15px + padding: 5px 0 0px 15px .tabcontent height: 100% diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts index 365a88a45ae0..c6e20e68b4da 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts @@ -28,26 +28,117 @@ * ++ */ +import * as Turbo from '@hotwired/turbo'; import { Controller } from '@hotwired/stimulus'; export default class NewController extends Controller { - static targets = ['button', 'form']; - declare readonly buttonTarget:HTMLInputElement; - declare readonly formTarget:HTMLInputElement; + static values = { + sorting: String, + }; + + static targets = ['buttonRow', 'formRow', 'form']; + + declare readonly buttonRowTarget:HTMLInputElement; + declare readonly formRowTarget:HTMLInputElement; + declare readonly formTarget:HTMLFormElement; + + declare sortingValue:string; + + getCkEditorElement() { + return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; + } + + addEventListenerToCkEditorElement(ckEditorElement:HTMLElement) { + ckEditorElement.addEventListener('keydown', (event) => { + this.onCtrlEnter(event); + }); + } + + onCtrlEnter(event:KeyboardEvent) { + if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { + this.onSubmit(event); + } + } + + getJournalsContainer() { + return document.querySelector('#work-packages-activities-tab-index-component #journals-container') as HTMLElement; + } + + scrollJournalContainerToBottom(journalsContainer:HTMLElement) { + const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; + if (scrollableContainer) { + scrollableContainer.scrollTop = scrollableContainer.scrollHeight; + } + } + + scrollJournalContainerToTop(journalsContainer:HTMLElement) { + const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; + if (scrollableContainer) { + scrollableContainer.scrollTop = 0; + } + } showForm() { - this.buttonTarget.classList.add('d-none'); - this.formTarget.classList.remove('d-none'); - setTimeout(() => { - const ckEditorElement = this.formTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; - if (ckEditorElement) { - ckEditorElement.focus(); + this.buttonRowTarget.classList.add('d-none'); + this.formRowTarget.classList.remove('d-none'); + + const journalsContainer = this.getJournalsContainer(); + if (journalsContainer) { + journalsContainer.classList.add('with-input-compensation'); + if (this.sortingValue === 'asc') { + this.scrollJournalContainerToBottom(journalsContainer); + } else { + // this.scrollJournalContainerToTop(journalsContainer); } - }, 10); + } + + const ckEditorElement = this.getCkEditorElement(); + if (ckEditorElement) { + this.addEventListenerToCkEditorElement(ckEditorElement); + + setTimeout(() => { + if (ckEditorElement) { + ckEditorElement.focus(); + } + }, 10); + } } - hideForm() { - this.buttonTarget.classList.remove('d-none'); - this.formTarget.classList.add('d-none'); + async onSubmit(event:Event) { + event.preventDefault(); // Prevent the native form submission + + const form = this.formTarget; + const formData = new FormData(form); + const action = form.action; + + const response = await fetch( + action, + { + method: 'POST', + body: formData, + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + Accept: 'text/vnd.turbo-stream.html', + }, + credentials: 'same-origin', + }, + ); + + if (response.ok) { + const text = await response.text(); + Turbo.renderStreamMessage(text); + + const journalsContainer = this.getJournalsContainer(); + if (journalsContainer) { + setTimeout(() => { + journalsContainer.classList.remove('with-input-compensation'); + if (this.sortingValue === 'asc') { + this.scrollJournalContainerToBottom(journalsContainer); + } else { + this.scrollJournalContainerToTop(journalsContainer); + } + }, 100); + } + } } } From 83a4948802bc75b0ae40b613a49fb9bcc52d6b21 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 13 Jun 2024 15:07:54 +0200 Subject: [PATCH 015/120] group journals by day --- .../journals/day_component.html.erb | 20 ++++++ .../activities_tab/journals/day_component.rb | 61 +++++++++++++++++++ .../journals/index_component.html.erb | 6 +- .../journals/index_component.rb | 6 +- .../activities_tab_controller.rb | 41 +++++++++---- 5 files changed, 116 insertions(+), 18 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/day_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/day_component.rb diff --git a/app/components/work_packages/activities_tab/journals/day_component.html.erb b/app/components/work_packages/activities_tab/journals/day_component.html.erb new file mode 100644 index 000000000000..b0e44ce2c339 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/day_component.html.erb @@ -0,0 +1,20 @@ +<%= + component_wrapper do + flex_layout do |day_container| + day_container.with_row(my:2) do + render(Primer::Beta::Text.new(color: :muted)) { format_activity_day(day_as_date) } + end + day_container.with_row do + flex_layout(id: insert_target_modifier_id) do |journals_of_day_container| + journals.each do |journal| + journals_of_day_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) + ) + end + end + end + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/day_component.rb b/app/components/work_packages/activities_tab/journals/day_component.rb new file mode 100644 index 000000000000..2b72d553e33c --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/day_component.rb @@ -0,0 +1,61 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + module Journals + class DayComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(day_as_date:, journals:, work_package:) + super + + @work_package = work_package + @day_as_date = day_as_date + @journals = journals + end + + private + + attr_reader :work_package, :day_as_date, :journals + + def insert_target_modified? + true + end + + def insert_target_modifier_id + "work-package-journals-day-#{day_as_date}" + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index 65ace85f92ac..fdac77e9d301 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,11 +1,11 @@ <%= component_wrapper do flex_layout(id: insert_target_modifier_id) do |journals_index_container| - if journals.any? - journals.each do |journal| + if journals_grouped_by_day.any? + journals_grouped_by_day.each do |day, journals| journals_index_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) + WorkPackages::ActivitiesTab::Journals::DayComponent.new(day_as_date: day, journals:, work_package:) ) end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index 3cff987bdde5..5dc61aedbf58 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -52,20 +52,20 @@ def insert_target_modified? end def insert_target_modifier_id - "work-package-journals" + "work-package-journal-days" end def journal_sorting User.current.preference&.comments_sorting || "desc" end - def journals + def journals_grouped_by_day result = work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) result = result.where.not(notes: "") if filter == :only_comments result = result.where(notes: "") if filter == :only_changes - result + result.group_by { |journal| journal.created_at.in_time_zone(User.current.time_zone).to_date } end end end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 99e0df6d7065..d7526eca62fe 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -86,8 +86,10 @@ def update_streams ) end + latest_journal_visible_for_user = journals.where(created_at: ..params[:last_update_timestamp]).last + journals.where("created_at > ?", params[:last_update_timestamp]).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal) + append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user) end respond_with_turbo_streams @@ -117,14 +119,14 @@ def cancel_edit end def create - latest_journal_version = @work_package.journals.last.try(:version) || 0 + latest_journal = @work_package.journals.last call = Journals::CreateService.new(@work_package, User.current).call( notes: journal_params[:notes] ) if call.success? && call.result - after_create_turbo_stream(call, latest_journal_version) + after_create_turbo_stream(call, latest_journal) end clear_form_via_turbo_stream @@ -200,24 +202,39 @@ def journal_params params.require(:journal).permit(:notes) end - def after_create_turbo_stream(call, latest_journal_version) + def after_create_turbo_stream(call, latest_journal) # journals might get merged in some cases, # thus we need to check if the journal is already present and update it rather then ap/prepending it - if latest_journal_version < call.result.version - append_or_prepend_latest_journal_via_turbo_stream(call.result) + if latest_journal.nil? || (latest_journal.present? && latest_journal.version < call.result.version) + append_or_prepend_latest_journal_via_turbo_stream(call.result, latest_journal) else update_journal_via_turbo_stream(call.result) end end - def append_or_prepend_latest_journal_via_turbo_stream(journal) - stream_config = { - target_component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( - work_package: @work_package - ), - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal) + if latest_journal.created_at.to_date == journal.created_at.to_date + target_component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( + work_package: @work_package, + day_as_date: journal.created_at.to_date, + journals: [journal] # we don't need to pass all actual journals of this day as we do not really render this component + ) + component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: ) + else + target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package + ) + component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( + work_package: @work_package, + day_as_date: journal.created_at.to_date, + journals: [journal] + ) + end + stream_config = { + target_component:, + component: } # Append or prepend the new journal depending on the sorting From 32d50a7e8f6d7d42cfbd37a4e85101f1089e2f5d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 13 Jun 2024 16:48:03 +0200 Subject: [PATCH 016/120] optimized syncing approach --- .../activities_tab/index_component.html.erb | 2 +- .../journals/form_component.html.erb | 23 --- .../activities_tab/journals/form_component.rb | 75 --------- .../journals/item_component/edit.html.erb | 36 ++++- .../journals/new_component.html.erb | 10 +- .../activities_tab/journals/new_component.rb | 12 -- .../activities_tab_controller.rb | 64 ++++---- .../activities-tab/index.controller.ts | 111 +++++++++++++- .../activities-tab/new.controller.ts | 144 ------------------ 9 files changed, 171 insertions(+), 306 deletions(-) delete mode 100644 app/components/work_packages/activities_tab/journals/form_component.html.erb delete mode 100644 app/components/work_packages/activities_tab/journals/form_component.rb delete mode 100644 frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 2ab8703fc80a..4d20443186d2 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -10,7 +10,7 @@ ) ) end - activties_tab_container.with_row(id: "journals-container") do + activties_tab_container.with_row(id: "journals-container", data: { "work-packages--activities-tab--index-target": "journalsContainer" }) do render( WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) diff --git a/app/components/work_packages/activities_tab/journals/form_component.html.erb b/app/components/work_packages/activities_tab/journals/form_component.html.erb deleted file mode 100644 index d26adad9bc56..000000000000 --- a/app/components/work_packages/activities_tab/journals/form_component.html.erb +++ /dev/null @@ -1,23 +0,0 @@ -<%= - primer_form_with( - id: "work-package-journal-form", - model: journal, - method: method, - data: { turbo: true, turbo_stream: true }, - url: submit_path, - ) do |f| - flex_layout do |form_container| - form_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) - end - form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| - submit_container.with_column(mr: 2) do - cancel_button - end - submit_container.with_column do - render(WorkPackages::ActivitiesTab::Journals::Submit.new(f)) - end - end - end - end -%> diff --git a/app/components/work_packages/activities_tab/journals/form_component.rb b/app/components/work_packages/activities_tab/journals/form_component.rb deleted file mode 100644 index 4159f5f6a46b..000000000000 --- a/app/components/work_packages/activities_tab/journals/form_component.rb +++ /dev/null @@ -1,75 +0,0 @@ -#-- copyright -# OpenProject is an open source project management software. -# Copyright (C) 2012-2023 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 WorkPackages - module ActivitiesTab - module Journals - class FormComponent < ApplicationComponent - include ApplicationHelper - include OpPrimer::ComponentHelpers - - def initialize(journal:, submit_path:, cancel_path: nil) - super - - @journal = journal - @submit_path = submit_path - @cancel_path = cancel_path - @method = journal.new_record? ? :post : :put - end - - private - - attr_reader :journal, :submit_path, :cancel_path, :method - - def cancel_button - if cancel_path - render(Primer::Beta::Button.new( - scheme: :secondary, - size: :medium, - tag: :a, - href: cancel_path, - data: { "turbo-stream": true } - )) do - t("button_cancel") - end - else - render(Primer::Beta::Button.new( - scheme: :default, - size: :medium, - data: { - action: "click->work-packages--activities-tab--new#hideForm" - } - )) do - I18n.t("button_cancel") - end - end - end - end - end - end -end diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 2820e6293de7..0e17f8952e10 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -1,13 +1,35 @@ <%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-edit") do render(Primer::Box.new(mt: 3)) do - render( - WorkPackages::ActivitiesTab::Journals::FormComponent.new( - journal:, - submit_path: work_package_activity_path(work_package_id: work_package.id, id: journal.id), - cancel_path: cancel_edit_work_package_activity_path(work_package.id, id: journal.id) - ) - ) + primer_form_with( + id: "work-package-journal-form", + model: journal, + method: :put, + data: { turbo: true, turbo_stream: true }, + url: work_package_activity_path(work_package_id: work_package.id, id: journal.id), + ) do |f| + flex_layout do |form_container| + form_container.with_row do + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) + end + form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| + submit_container.with_column(mr: 2) do + render(Primer::Beta::Button.new( + scheme: :secondary, + size: :medium, + tag: :a, + href: cancel_edit_work_package_activity_path(work_package.id, id: journal.id), + data: { "turbo-stream": true } + )) do + t("button_cancel") + end + end + submit_container.with_column do + render(WorkPackages::ActivitiesTab::Journals::Submit.new(f)) + end + end + end + end end end %> diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index cdbb06ff4c3f..9d4c53522431 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -1,8 +1,8 @@ <%= - component_wrapper(data: wrapper_data_attributes) do + component_wrapper do flex_layout(my: 2) do |new_form_container| new_form_container.with_row(data: { - "work-packages--activities-tab--new-target": "buttonRow" + "work-packages--activities-tab--index-target": "buttonRow" }) do flex_layout(justify_content: :space_between) do |button_row| button_row.with_column(id: "input-trigger-column", mr: 2) do @@ -12,7 +12,7 @@ size: :medium, block: true, data: { - "action": "click->work-packages--activities-tab--new#showForm" + "action": "click->work-packages--activities-tab--index#showForm" } )) do render(Primer::Beta::Text.new(color: :muted, font_weight: :normal)) { t("activities.work_packages.activity_tab.label_type_to_comment") } @@ -30,13 +30,13 @@ end new_form_container.with_row( display: :none, - data: { "work-packages--activities-tab--new-target": "formRow" } + data: { "work-packages--activities-tab--index-target": "formRow" } ) do primer_form_with( id: "work-package-journal-form", model: journal, method: :post, - data: { turbo: true, turbo_stream: true, "work-packages--activities-tab--new-target": "form", action: "submit->work-packages--activities-tab--new#onSubmit" }, + data: { turbo: true, turbo_stream: true, "work-packages--activities-tab--index-target": "form", action: "submit->work-packages--activities-tab--index#onSubmit" }, url: work_package_activities_path(work_package_id: work_package.id), ) do |f| flex_layout(justify_content: :space_between, align_items: :flex_end) do |form_container| diff --git a/app/components/work_packages/activities_tab/journals/new_component.rb b/app/components/work_packages/activities_tab/journals/new_component.rb index 889c16aecbe8..6468cd7d0d0b 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.rb +++ b/app/components/work_packages/activities_tab/journals/new_component.rb @@ -45,18 +45,6 @@ def initialize(work_package:) def journal Journal.new(journable: work_package) end - - def wrapper_data_attributes - { - controller: "work-packages--activities-tab--new", - "work-packages--activities-tab--new-sorting-value": journal_sorting, - "application-target": "dynamic" - } - end - - def journal_sorting - User.current.preference&.comments_sorting || "desc" - end end end end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index d7526eca62fe..4e33d4cce6c1 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -66,31 +66,7 @@ def update_filter end def update_streams - journals = @work_package.journals - - if params[:filter] == "only_comments" - journals = journals.where.not(notes: "") - end - - if params[:filter] == "only_changes" - journals = journals.where(notes: "") - end - - # TODO: prototypical implementation - journals.where("updated_at > ?", params[:last_update_timestamp]).find_each do |journal| - update_via_turbo_stream( - # only use the show component in order not to loose an edit state - component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( - journal: - ) - ) - end - - latest_journal_visible_for_user = journals.where(created_at: ..params[:last_update_timestamp]).last - - journals.where("created_at > ?", params[:last_update_timestamp]).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user) - end + generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) respond_with_turbo_streams end @@ -119,14 +95,12 @@ def cancel_edit end def create - latest_journal = @work_package.journals.last - call = Journals::CreateService.new(@work_package, User.current).call( notes: journal_params[:notes] ) if call.success? && call.result - after_create_turbo_stream(call, latest_journal) + generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) end clear_form_via_turbo_stream @@ -155,8 +129,6 @@ def update def update_sorting filter = params[:filter]&.to_sym || :all - # User.current.preference.update!(comments_sorting: params[:sorting]) - call = Users::UpdateService.new(user: User.current, model: User.current).call( pref: { comments_sorting: params[:sorting] } ) @@ -202,13 +174,31 @@ def journal_params params.require(:journal).permit(:notes) end - def after_create_turbo_stream(call, latest_journal) - # journals might get merged in some cases, - # thus we need to check if the journal is already present and update it rather then ap/prepending it - if latest_journal.nil? || (latest_journal.present? && latest_journal.version < call.result.version) - append_or_prepend_latest_journal_via_turbo_stream(call.result, latest_journal) - else - update_journal_via_turbo_stream(call.result) + def generate_time_based_update_streams(last_update_timestamp, filter) + # TODO: prototypical implementation + journals = @work_package.journals + + if filter == "only_comments" + journals = journals.where.not(notes: "") + end + + if filter == "only_changes" + journals = journals.where(notes: "") + end + + journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| + update_via_turbo_stream( + # only use the show component in order not to loose an edit state + component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( + journal: + ) + ) + end + + latest_journal_visible_for_user = journals.where(created_at: ..last_update_timestamp).last + + journals.where("created_at > ?", last_update_timestamp).find_each do |journal| + append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user) end end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index d9bb3005b23d..248b3fdf6cf0 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -39,6 +39,13 @@ export default class IndexController extends Controller { filter: String, }; + static targets = ['journalsContainer', 'buttonRow', 'formRow', 'form']; + + declare readonly journalsContainerTarget:HTMLElement; + declare readonly buttonRowTarget:HTMLInputElement; + declare readonly formRowTarget:HTMLElement; + declare readonly formTarget:HTMLFormElement; + declare updateStreamsUrlValue:string; declare sortingValue:string; declare lastUpdateTimestamp:string; @@ -47,7 +54,7 @@ export default class IndexController extends Controller { declare filterValue:string; connect() { - this.lastUpdateTimestamp = new Date().toISOString(); + this.setLastUpdateTimestamp(); this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); @@ -109,7 +116,7 @@ export default class IndexController extends Controller { if (response.ok) { const text = await response.text(); Turbo.renderStreamMessage(text); - this.lastUpdateTimestamp = new Date().toISOString(); + this.setLastUpdateTimestamp(); } } @@ -131,4 +138,104 @@ export default class IndexController extends Controller { unsetFilter() { this.filterValue = ''; } + + getCkEditorElement() { + return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; + } + + addEventListenerToCkEditorElement(ckEditorElement:HTMLElement) { + ckEditorElement.addEventListener('keydown', (event) => { + this.onCtrlEnter(event); + }); + } + + onCtrlEnter(event:KeyboardEvent) { + if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { + this.onSubmit(event); + } + } + + scrollJournalContainerToBottom(journalsContainer:HTMLElement) { + const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; + if (scrollableContainer) { + scrollableContainer.scrollTop = scrollableContainer.scrollHeight; + } + } + + scrollJournalContainerToTop(journalsContainer:HTMLElement) { + const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; + if (scrollableContainer) { + scrollableContainer.scrollTop = 0; + } + } + + showForm() { + this.buttonRowTarget.classList.add('d-none'); + this.formRowTarget.classList.remove('d-none'); + + if (this.journalsContainerTarget) { + this.journalsContainerTarget.classList.add('with-input-compensation'); + if (this.sortingValue === 'asc') { + this.scrollJournalContainerToBottom(this.journalsContainerTarget); + } else { + // this.scrollJournalContainerToTop(this.journalsContainerTarget); + } + } + + const ckEditorElement = this.getCkEditorElement(); + if (ckEditorElement) { + this.addEventListenerToCkEditorElement(ckEditorElement); + + setTimeout(() => { + if (ckEditorElement) { + ckEditorElement.focus(); + } + }, 10); + } + } + + async onSubmit(event:Event) { + event.preventDefault(); // Prevent the native form submission + + const form = this.formTarget; + const formData = new FormData(form); + formData.append('last_update_timestamp', this.lastUpdateTimestamp); + formData.append('filter', this.filterValue); + + const action = form.action; + + const response = await fetch( + action, + { + method: 'POST', + body: formData, + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + Accept: 'text/vnd.turbo-stream.html', + }, + credentials: 'same-origin', + }, + ); + + if (response.ok) { + this.setLastUpdateTimestamp(); + const text = await response.text(); + Turbo.renderStreamMessage(text); + + if (this.journalsContainerTarget) { + setTimeout(() => { + this.journalsContainerTarget.classList.remove('with-input-compensation'); + if (this.sortingValue === 'asc') { + this.scrollJournalContainerToBottom(this.journalsContainerTarget); + } else { + this.scrollJournalContainerToTop(this.journalsContainerTarget); + } + }, 100); + } + } + } + + setLastUpdateTimestamp() { + this.lastUpdateTimestamp = new Date().toISOString(); + } } diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts deleted file mode 100644 index c6e20e68b4da..000000000000 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/new.controller.ts +++ /dev/null @@ -1,144 +0,0 @@ -/* - * -- copyright - * OpenProject is an open source project management software. - * Copyright (C) 2023 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 * as Turbo from '@hotwired/turbo'; -import { Controller } from '@hotwired/stimulus'; - -export default class NewController extends Controller { - static values = { - sorting: String, - }; - - static targets = ['buttonRow', 'formRow', 'form']; - - declare readonly buttonRowTarget:HTMLInputElement; - declare readonly formRowTarget:HTMLInputElement; - declare readonly formTarget:HTMLFormElement; - - declare sortingValue:string; - - getCkEditorElement() { - return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; - } - - addEventListenerToCkEditorElement(ckEditorElement:HTMLElement) { - ckEditorElement.addEventListener('keydown', (event) => { - this.onCtrlEnter(event); - }); - } - - onCtrlEnter(event:KeyboardEvent) { - if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { - this.onSubmit(event); - } - } - - getJournalsContainer() { - return document.querySelector('#work-packages-activities-tab-index-component #journals-container') as HTMLElement; - } - - scrollJournalContainerToBottom(journalsContainer:HTMLElement) { - const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; - if (scrollableContainer) { - scrollableContainer.scrollTop = scrollableContainer.scrollHeight; - } - } - - scrollJournalContainerToTop(journalsContainer:HTMLElement) { - const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; - if (scrollableContainer) { - scrollableContainer.scrollTop = 0; - } - } - - showForm() { - this.buttonRowTarget.classList.add('d-none'); - this.formRowTarget.classList.remove('d-none'); - - const journalsContainer = this.getJournalsContainer(); - if (journalsContainer) { - journalsContainer.classList.add('with-input-compensation'); - if (this.sortingValue === 'asc') { - this.scrollJournalContainerToBottom(journalsContainer); - } else { - // this.scrollJournalContainerToTop(journalsContainer); - } - } - - const ckEditorElement = this.getCkEditorElement(); - if (ckEditorElement) { - this.addEventListenerToCkEditorElement(ckEditorElement); - - setTimeout(() => { - if (ckEditorElement) { - ckEditorElement.focus(); - } - }, 10); - } - } - - async onSubmit(event:Event) { - event.preventDefault(); // Prevent the native form submission - - const form = this.formTarget; - const formData = new FormData(form); - const action = form.action; - - const response = await fetch( - action, - { - method: 'POST', - body: formData, - headers: { - 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, - Accept: 'text/vnd.turbo-stream.html', - }, - credentials: 'same-origin', - }, - ); - - if (response.ok) { - const text = await response.text(); - Turbo.renderStreamMessage(text); - - const journalsContainer = this.getJournalsContainer(); - if (journalsContainer) { - setTimeout(() => { - journalsContainer.classList.remove('with-input-compensation'); - if (this.sortingValue === 'asc') { - this.scrollJournalContainerToBottom(journalsContainer); - } else { - this.scrollJournalContainerToTop(journalsContainer); - } - }, 100); - } - } - } -} From a9e56757f53b8c7950e37790f05eb6137c1426b2 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 18 Jun 2024 15:26:17 +0200 Subject: [PATCH 017/120] implemented dynamic heights/margins of editor and journals container --- .../activities_tab/index_component.html.erb | 4 ++-- .../activities_tab/index_component.sass | 5 +++-- .../activities_tab/journals/new_component.html.erb | 4 ++-- .../activities_tab/journals/new_component.sass | 4 +++- config/locales/en.yml | 1 + .../activities-tab/index.controller.ts | 14 +++++++++----- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 4d20443186d2..3849b33359f6 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -10,12 +10,12 @@ ) ) end - activties_tab_container.with_row(id: "journals-container", data: { "work-packages--activities-tab--index-target": "journalsContainer" }) do + activties_tab_container.with_row(id: "journals-container", classes: "with-initial-input-compensation", data: { "work-packages--activities-tab--index-target": "journalsContainer" }) do render( WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end - activties_tab_container.with_row(id: "input-container", mt: 3, pt: 3, pb: 3, pl: 3, pr: 2, border: :top, bg: :subtle) do + activties_tab_container.with_row(id: "input-container", mt: 3, pt: 2, pb: 2, pl: 3, pr: 2, border: :top, bg: :subtle) do render( WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) ) diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index 2a953e5acb7b..1ad476c1f66e 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -1,9 +1,10 @@ #work-packages-activities-tab-index-component #journals-container overflow-y: auto - margin-bottom: 90px // initial margin-bottom, will be increased by stimulus when opening ckeditor + &.with-initial-input-compensation + margin-bottom: 75px // initial margin-bottom, will be increased by stimulus when opening ckeditor &.with-input-compensation - margin-bottom: 340px + margin-bottom: 190px #input-container position: absolute min-height: 60px diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 9d4c53522431..f14375d05a88 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -22,7 +22,7 @@ render(Primer::Beta::IconButton.new( scheme: :default, icon: :"paper-airplane", - "aria-label": "submit comment", + "aria-label": t("activities.work_packages.activity_tab.label_submit_comment"), disabled: true )) end @@ -47,7 +47,7 @@ render(Primer::Beta::IconButton.new( scheme: :default, icon: :"paper-airplane", - "aria-label": "submit comment", + "aria-label": t("activities.work_packages.activity_tab.label_submit_comment"), type: :submit )) end diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index 27e33c901fee..4dfc10965760 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -8,6 +8,8 @@ display: block #ck-editor-column width: 100% + @media screen and (max-width: $breakpoint-md) + width: calc(100% - 40px) // prototypical primer style adoptions .ck-toolbar border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px @@ -16,7 +18,7 @@ border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) .ck-content background: var(--color-scale-white) - height: 235px + max-height: 40vh overflow-y: auto border-radius: var(--borderRadius-medium) margin: 5px diff --git a/config/locales/en.yml b/config/locales/en.yml index f14b20010915..0cf82993968d 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -42,6 +42,7 @@ en: label_sort_asc: "Oldest on top" label_sort_desc: "Newest on top" label_type_to_comment: "Type here to comment" + label_submit_comment: "Submit comment" admin: diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 248b3fdf6cf0..923576013520 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -147,6 +147,13 @@ export default class IndexController extends Controller { ckEditorElement.addEventListener('keydown', (event) => { this.onCtrlEnter(event); }); + ckEditorElement.addEventListener('keyup', () => { + this.adjustJournalContainerMargin(); + }); + } + + adjustJournalContainerMargin() { + this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 40}px`; } onCtrlEnter(event:KeyboardEvent) { @@ -175,11 +182,6 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { this.journalsContainerTarget.classList.add('with-input-compensation'); - if (this.sortingValue === 'asc') { - this.scrollJournalContainerToBottom(this.journalsContainerTarget); - } else { - // this.scrollJournalContainerToTop(this.journalsContainerTarget); - } } const ckEditorElement = this.getCkEditorElement(); @@ -224,6 +226,8 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { setTimeout(() => { + this.journalsContainerTarget.style.marginBottom = ''; + this.journalsContainerTarget.classList.add('with-initial-input-compensation'); this.journalsContainerTarget.classList.remove('with-input-compensation'); if (this.sortingValue === 'asc') { this.scrollJournalContainerToBottom(this.journalsContainerTarget); From 78ca627db50665d1f0d48b9b8d85f738555a04de Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 19 Jun 2024 12:40:38 +0200 Subject: [PATCH 018/120] minor adjustments towards resource injection, not restricting the editor type --- .../journals/item_component/edit.html.erb | 2 +- .../activities_tab/journals/new_component.html.erb | 2 +- .../activities_tab/journals/notes_form.rb | 13 ++++++------- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 0e17f8952e10..3fae4360c280 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -10,7 +10,7 @@ ) do |f| flex_layout do |form_container| form_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| submit_container.with_column(mr: 2) do diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index f14375d05a88..42ff11c03bc6 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -41,7 +41,7 @@ ) do |f| flex_layout(justify_content: :space_between, align_items: :flex_end) do |form_container| form_container.with_column(id: "ck-editor-column", mr: 2) do - render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f, journal:)) + render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_column do render(Primer::Beta::IconButton.new( diff --git a/app/forms/work_packages/activities_tab/journals/notes_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb index f76ba4ede8b3..9d28b86b8ba6 100644 --- a/app/forms/work_packages/activities_tab/journals/notes_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -27,6 +27,8 @@ #++ module WorkPackages::ActivitiesTab::Journals class NotesForm < ApplicationForm + delegate :object, to: :@builder + form do |notes_form| notes_form.rich_text_area( name: :notes, @@ -34,21 +36,18 @@ class NotesForm < ApplicationForm rich_text_options: { showAttachments: false, macros: "none", - resource:, - editorType: "constrained" + resource: } ) end - def initialize(journal:) - @journal = journal - end - private def resource + return unless object + API::V3::Activities::ActivityRepresenter - .new(@journal, current_user: User.current, embed_links: false) + .new(object, current_user: User.current, embed_links: false) end end end From 7ae79e81066ae2bda897e40556d0a840eb8e575b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 19 Jun 2024 16:50:57 +0200 Subject: [PATCH 019/120] support mentions and uploads based on feedback from @oliverguenther --- .../work_packages/activities_tab_controller.rb | 10 +++++++--- .../activities_tab/journals/notes_form.rb | 8 ++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 4e33d4cce6c1..a8fdc66e1158 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -95,9 +95,13 @@ def cancel_edit end def create - call = Journals::CreateService.new(@work_package, User.current).call( - notes: journal_params[:notes] - ) + ### taken from ActivitiesByWorkPackageAPI + call = AddWorkPackageNoteService + .new(user: User.current, + work_package: @work_package) + .call(journal_params[:notes], + send_notifications: !(params.has_key?(:notify) && params[:notify] == "false")) + ### if call.success? && call.result generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) diff --git a/app/forms/work_packages/activities_tab/journals/notes_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb index 9d28b86b8ba6..9dbd30cf14e1 100644 --- a/app/forms/work_packages/activities_tab/journals/notes_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -35,8 +35,8 @@ class NotesForm < ApplicationForm label: nil, rich_text_options: { showAttachments: false, - macros: "none", - resource: + resource:, + editor_type: "constrained" } ) end @@ -46,8 +46,8 @@ class NotesForm < ApplicationForm def resource return unless object - API::V3::Activities::ActivityRepresenter - .new(object, current_user: User.current, embed_links: false) + API::V3::WorkPackages::WorkPackageRepresenter + .create(object.journable, current_user: User.current, embed_links: false) end end end From 971bcd430b99fa328bd33c3d2834f98ca93b39fe Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 20 Jun 2024 16:08:30 +0200 Subject: [PATCH 020/120] added quoting --- .../journals/item_component.html.erb | 1 + .../activities_tab/journals/item_component.rb | 16 ++++++++- .../activities-tab/index.controller.ts | 34 +++++++++++++++++++ 3 files changed, 50 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 9378d0daef36..7b92abdd9a44 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -59,6 +59,7 @@ scheme: :invisible) copy_url_action_item(menu) edit_action_item(menu) if editable? + quote_action_item(menu) if journal.notes.present? end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 40734e39fd0d..94dc2dacc63d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -105,7 +105,7 @@ def copy_url_action_item(menu) end def edit_action_item(menu) - menu.with_item(label: t("label_edit"), + menu.with_item(label: t("js.label_edit_comment"), href: edit_work_package_activity_path(journal.journable, journal), content_arguments: { data: { "turbo-stream": true } @@ -114,6 +114,20 @@ def edit_action_item(menu) end end + def quote_action_item(menu) + menu.with_item(label: t("js.label_quote_comment"), + tag: :button, + content_arguments: { + data: { + action: "click->work-packages--activities-tab--index#quote", + "content-param": journal.notes, + "user-name-param": I18n.t(:text_user_wrote, value: ERB::Util.html_escape(journal.user)) + } + }) do |item| + item.with_leading_visual_icon(icon: :quote) + end + end + def bubble_html " `\n> ${line}`) + .join(''); + + return `${userName}\n${quoted}`; + } + + openEditorWithQuotedText(quotedText:string) { + this.showForm(); + const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); + if (AngularCkEditorElement) { + const ckeditorInstance = jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance; + if (ckeditorInstance) { + const currentData = ckeditorInstance.getData({ trim: false }); + // only quote if the editor is empty + if (currentData.length === 0) { + ckeditorInstance.setData(quotedText); + } + } + } + } + async onSubmit(event:Event) { event.preventDefault(); // Prevent the native form submission From 66fca73655a4188289e9a20bc9f9f9aa9767896b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 1 Jul 2024 13:54:39 +0200 Subject: [PATCH 021/120] fixed sass imports --- app/components/_index.sass | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/components/_index.sass b/app/components/_index.sass index 40514e4cd972..0c708e0fab37 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,8 +1,6 @@ @import "work_packages/activities_tab/index_component" @import "work_packages/activities_tab/journals/new_component" @import "work_packages/activities_tab/journals/item_component/edit" -@import "work_packages/share/modal_body_component" -@import "work_packages/share/invite_user_form_component" @import "shares/modal_body_component" @import "shares/invite_user_form_component" @import "work_packages/progress/modal_body_component" From dc350dd73db629aa883944c2c43944351997c07c Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 1 Jul 2024 16:36:43 +0200 Subject: [PATCH 022/120] fixed bg colors of inputs --- .../activities_tab/journals/new_component.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index 4dfc10965760..8802763923cb 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -2,7 +2,7 @@ #input-trigger-column width: 100% button - background: var(--color-scale-white) + background: var(--bgColor-default) cursor: text .Button-content display: block @@ -14,10 +14,10 @@ .ck-toolbar border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px .document-editor__editable-container - background: var(--color-scale-white) + background: var(--bgColor-default) border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) .ck-content - background: var(--color-scale-white) + background: var(--bgColor-default) max-height: 40vh overflow-y: auto border-radius: var(--borderRadius-medium) From a1a25779009d03ac8ed5bae7572958b87cadc78a Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 1 Jul 2024 20:01:02 +0200 Subject: [PATCH 023/120] close editor on blur and keep editor open after submit for a more chat like interface as requested by @wielinde --- .../activities_tab_controller.rb | 4 +- .../ckeditor/op-ckeditor.component.ts | 2 +- .../activities-tab/index.controller.ts | 259 ++++++++---------- 3 files changed, 123 insertions(+), 142 deletions(-) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index a8fdc66e1158..986839f641b2 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -98,7 +98,7 @@ def create ### taken from ActivitiesByWorkPackageAPI call = AddWorkPackageNoteService .new(user: User.current, - work_package: @work_package) + work_package: @work_package) .call(journal_params[:notes], send_notifications: !(params.has_key?(:notify) && params[:notify] == "false")) ### @@ -107,7 +107,7 @@ def create generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) end - clear_form_via_turbo_stream + # clear_form_via_turbo_stream respond_with_turbo_streams end diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts index dc3a772d790d..239c43c31deb 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts +++ b/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts @@ -247,7 +247,7 @@ export class OpCkeditorComponent implements OnInit, OnDestroy { if ((data.ctrlKey || data.metaKey) && data.keyCode === KeyCodes.ENTER) { debugLog('Sending save request from CKEditor.'); this.saveRequested.emit(); - evt.stop(); + // evt.stop(); } }, { priority: 'highest' }, diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index b6522cbd2756..f464f20da61e 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -1,38 +1,9 @@ -/* - * -- copyright - * OpenProject is an open source project management software. - * Copyright (C) 2023 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 * as Turbo from '@hotwired/turbo'; import { Controller } from '@hotwired/stimulus'; import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; +import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; export default class IndexController extends Controller { static values = { @@ -58,33 +29,36 @@ export default class IndexController extends Controller { connect() { this.setLastUpdateTimestamp(); + this.setupEventListeners(); + this.handleInitialScroll(); + this.intervallId = this.pollForUpdates(); + } + + disconnect() { + document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); + window.clearInterval(this.intervallId); + } + + private setupEventListeners() { this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); + } + private handleInitialScroll() { if (window.location.hash.includes('#activity-')) { this.scrollToActivity(); } else if (this.sortingValue === 'asc') { this.scrollToBottom(); } - - this.intervallId = this.pollForUpdates(); - } - - disconnect() { - document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); - window.clearInterval(this.intervallId); } - scrollToActivity() { + private scrollToActivity() { const activityId = window.location.hash.replace('#activity-', ''); const activityElement = document.getElementById(`activity-${activityId}`); - if (activityElement) { - activityElement.scrollIntoView({ behavior: 'smooth' }); - } + activityElement?.scrollIntoView({ behavior: 'smooth' }); } - scrollToBottom():void { - // copied from frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts + private scrollToBottom() { const scrollableContainer = jQuery(this.element).scrollParent()[0]; if (scrollableContainer) { setTimeout(() => { @@ -94,9 +68,7 @@ export default class IndexController extends Controller { } async handleWorkPackageUpdate(event:Event) { - setTimeout(() => { - this.updateActivitiesList(); - }, 2000); // TODO: wait dynamically for persisted change before updating the activities list + setTimeout(() => this.updateActivitiesList(), 2000); } async updateActivitiesList() { @@ -104,17 +76,7 @@ export default class IndexController extends Controller { url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); url.searchParams.append('filter', this.filterValue); - const response = await fetch( - url, - { - method: 'GET', - headers: { - 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, - Accept: 'text/vnd.turbo-stream.html', - }, - credentials: 'same-origin', - }, - ); + const response = await this.fetchWithCSRF(url, 'GET'); if (response.ok) { const text = await response.text(); @@ -123,91 +85,101 @@ export default class IndexController extends Controller { } } - pollForUpdates() { - // protypical implementation of polling for updates in order to evaluate if we want to have this feature - return window.setInterval(() => { - this.updateActivitiesList(); - }, this.pollingIntervalInMsValue); + private pollForUpdates() { + return window.setInterval(() => this.updateActivitiesList(), this.pollingIntervalInMsValue); } - setFilterToOnlyComments() { - this.filterValue = 'only_comments'; - } + setFilterToOnlyComments() { this.filterValue = 'only_comments'; } + setFilterToOnlyChanges() { this.filterValue = 'only_changes'; } + unsetFilter() { this.filterValue = ''; } - setFilterToOnlyChanges() { - this.filterValue = 'only_changes'; + private getCkEditorElement():HTMLElement | null { + return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; } - unsetFilter() { - this.filterValue = ''; + private getCkEditorInstance():ICKEditorInstance | null { + const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); + return AngularCkEditorElement ? jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance : null; } - getCkEditorElement() { - return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; + private addEventListenersToCkEditorInstance() { + const editor = this.getCkEditorInstance(); + if (editor) { + this.addKeydownListener(editor); + this.addKeyupListener(editor); + this.addBlurListener(editor); + } } - addEventListenerToCkEditorElement(ckEditorElement:HTMLElement) { - ckEditorElement.addEventListener('keydown', (event) => { - this.onCtrlEnter(event); - }); - ckEditorElement.addEventListener('keyup', () => { - this.adjustJournalContainerMargin(); - }); + private addKeydownListener(editor:ICKEditorInstance) { + editor.listenTo( + editor.editing.view.document, + 'keydown', + (event, data) => { + if ((data.ctrlKey || data.metaKey) && data.keyCode === KeyCodes.ENTER) { + this.onSubmit(); + event.stop(); + } + }, + { priority: 'highest' }, + ); } - adjustJournalContainerMargin() { - this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 40}px`; + private addKeyupListener(editor:ICKEditorInstance) { + editor.listenTo( + editor.editing.view.document, + 'keyup', + (event) => { + this.adjustJournalContainerMargin(); + event.stop(); + }, + { priority: 'highest' }, + ); } - onCtrlEnter(event:KeyboardEvent) { - if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { - this.onSubmit(event); - } + private addBlurListener(editor:ICKEditorInstance) { + editor.listenTo( + editor.editing.view.document, + 'blur', + () => this.hideEditorIfEmpty(), + { priority: 'highest' }, + ); } - scrollJournalContainerToBottom(journalsContainer:HTMLElement) { - const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; - if (scrollableContainer) { - scrollableContainer.scrollTop = scrollableContainer.scrollHeight; - } + private adjustJournalContainerMargin() { + this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 40}px`; } - scrollJournalContainerToTop(journalsContainer:HTMLElement) { + private scrollJournalContainer(journalsContainer:HTMLElement, toBottom:boolean) { const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; if (scrollableContainer) { - scrollableContainer.scrollTop = 0; + scrollableContainer.scrollTop = toBottom ? scrollableContainer.scrollHeight : 0; } } showForm() { this.buttonRowTarget.classList.add('d-none'); this.formRowTarget.classList.remove('d-none'); + this.journalsContainerTarget?.classList.add('with-input-compensation'); - if (this.journalsContainerTarget) { - this.journalsContainerTarget.classList.add('with-input-compensation'); - } + this.addEventListenersToCkEditorInstance(); const ckEditorElement = this.getCkEditorElement(); if (ckEditorElement) { - this.addEventListenerToCkEditorElement(ckEditorElement); - - setTimeout(() => { - if (ckEditorElement) { - ckEditorElement.focus(); - } - }, 10); + setTimeout(() => ckEditorElement.focus(), 10); } } quote(event:Event) { event.preventDefault(); - const userName = (event.currentTarget as HTMLElement).dataset.userNameParam as string; - const content = (event.currentTarget as HTMLElement).dataset.contentParam as string; + const target = event.currentTarget as HTMLElement; + const userName = target.dataset.userNameParam as string; + const content = target.dataset.contentParam as string; this.openEditorWithQuotedText(this.quotedText(content, userName)); } - quotedText(rawComment:string, userName:string) { + private quotedText(rawComment:string, userName:string) { const quoted = rawComment.split('\n') .map((line:string) => `\n> ${line}`) .join(''); @@ -217,41 +189,41 @@ export default class IndexController extends Controller { openEditorWithQuotedText(quotedText:string) { this.showForm(); - const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); - if (AngularCkEditorElement) { - const ckeditorInstance = jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance; - if (ckeditorInstance) { - const currentData = ckeditorInstance.getData({ trim: false }); - // only quote if the editor is empty - if (currentData.length === 0) { - ckeditorInstance.setData(quotedText); - } + const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance && ckEditorInstance.getData({ trim: false }).length === 0) { + ckEditorInstance.setData(quotedText); + } + } + + clearEditor() { + this.getCkEditorInstance()?.setData(''); + } + + hideEditorIfEmpty() { + const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance && ckEditorInstance.getData({ trim: false }).length === 0) { + this.buttonRowTarget.classList.remove('d-none'); + this.formRowTarget.classList.add('d-none'); + + if (this.journalsContainerTarget) { + this.journalsContainerTarget.style.marginBottom = ''; + this.journalsContainerTarget.classList.add('with-initial-input-compensation'); + this.journalsContainerTarget.classList.remove('with-input-compensation'); } } } - async onSubmit(event:Event) { - event.preventDefault(); // Prevent the native form submission + async onSubmit(event:Event | null = null) { + event?.preventDefault(); + const ckEditorInstance = this.getCkEditorInstance(); + const data = ckEditorInstance ? ckEditorInstance.getData({ trim: false }) : ''; - const form = this.formTarget; - const formData = new FormData(form); + const formData = new FormData(this.formTarget); formData.append('last_update_timestamp', this.lastUpdateTimestamp); formData.append('filter', this.filterValue); + formData.append('journal[notes]', data); - const action = form.action; - - const response = await fetch( - action, - { - method: 'POST', - body: formData, - headers: { - 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, - Accept: 'text/vnd.turbo-stream.html', - }, - credentials: 'same-origin', - }, - ); + const response = await this.fetchWithCSRF(this.formTarget.action, 'POST', formData); if (response.ok) { this.setLastUpdateTimestamp(); @@ -259,20 +231,29 @@ export default class IndexController extends Controller { Turbo.renderStreamMessage(text); if (this.journalsContainerTarget) { + this.clearEditor(); setTimeout(() => { - this.journalsContainerTarget.style.marginBottom = ''; - this.journalsContainerTarget.classList.add('with-initial-input-compensation'); - this.journalsContainerTarget.classList.remove('with-input-compensation'); - if (this.sortingValue === 'asc') { - this.scrollJournalContainerToBottom(this.journalsContainerTarget); - } else { - this.scrollJournalContainerToTop(this.journalsContainerTarget); - } + this.scrollJournalContainer( + this.journalsContainerTarget, + this.sortingValue === 'asc', + ); }, 100); } } } + private async fetchWithCSRF(url:string | URL, method:string, body?:FormData) { + return fetch(url, { + method, + body, + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + Accept: 'text/vnd.turbo-stream.html', + }, + credentials: 'same-origin', + }); + } + setLastUpdateTimestamp() { this.lastUpdateTimestamp = new Date().toISOString(); } From 0c127d910bda7fa3d941b32d1cc8d0ce0bd920d1 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 12:12:47 +0200 Subject: [PATCH 024/120] fixed blur event listener --- .../work-packages/activities-tab/index.controller.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index f464f20da61e..1293a45374ff 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -4,6 +4,7 @@ import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; +import { set } from 'lodash'; export default class IndexController extends Controller { static values = { @@ -140,8 +141,15 @@ export default class IndexController extends Controller { private addBlurListener(editor:ICKEditorInstance) { editor.listenTo( editor.editing.view.document, - 'blur', - () => this.hideEditorIfEmpty(), + 'change:isFocused', + () => { + // without the timeout `isFocused` is still true even if the editor was blurred + // current limitation: + // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore + setTimeout(() => { + if (!editor.ui.focusTracker.isFocused) { this.hideEditorIfEmpty(); } + }, 100); + }, { priority: 'highest' }, ); } From d2ade88df09fe18b959ba7e0a6c5940b16d8e8b5 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 12:21:01 +0200 Subject: [PATCH 025/120] decreased timeout as much as possible --- .../dynamic/work-packages/activities-tab/index.controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 1293a45374ff..b21ccc94dcbf 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -148,7 +148,7 @@ export default class IndexController extends Controller { // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore setTimeout(() => { if (!editor.ui.focusTracker.isFocused) { this.hideEditorIfEmpty(); } - }, 100); + }, 0); }, { priority: 'highest' }, ); From ce38f768050664c5815fdb2757de9f5ea2440c5b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 12:34:44 +0200 Subject: [PATCH 026/120] fixed rendering after sorting update --- .../work_packages/activities_tab_controller.rb | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 986839f641b2..307d1ab2f394 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -138,15 +138,10 @@ def update_sorting ) if call.success? - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( - work_package: @work_package, - filter: - ) - ) - - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + # update the whole tab to reflect the new sorting in all components + # we need to call replace in order to properly re-init the index stimulus component + replace_via_turbo_stream( + component: WorkPackages::ActivitiesTab::IndexComponent.new( work_package: @work_package, filter: ) From d7bd52b5bfdf4d5a66f2550e0f2bed5b6046f38f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 18:19:40 +0200 Subject: [PATCH 027/120] mobile adjustments following iteration made for the mobile concept --- .../activities_tab/index_component.html.erb | 36 ++++++++++++++----- .../activities_tab/index_component.sass | 21 ++++++----- .../activities-tab/index.controller.ts | 13 ++++--- 3 files changed, 46 insertions(+), 24 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 3849b33359f6..322eb20f6d22 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -10,15 +10,33 @@ ) ) end - activties_tab_container.with_row(id: "journals-container", classes: "with-initial-input-compensation", data: { "work-packages--activities-tab--index-target": "journalsContainer" }) do - render( - WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) - ) - end - activties_tab_container.with_row(id: "input-container", mt: 3, pt: 2, pb: 2, pl: 3, pr: 2, border: :top, bg: :subtle) do - render( - WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - ) + activties_tab_container.with_row(flex_layout: true) do |journals_wrapper_container| + journals_wrapper_container.with_row( + id: "journals-container", + classes: "with-initial-input-compensation", + data: { "work-packages--activities-tab--index-target": "journalsContainer" } + ) do + render( + WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) + ) + end + journals_wrapper_container.with_row( + id: "input-container", + classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position + mt: 3, + mb: [3, nil, nil, nil, 0], + pt: 2, + pb: 2, + pl: 3, + pr: 2, + border: [nil, nil, nil, nil, :top], + border_radius: [2, nil, nil, nil, 0], + bg: :subtle + ) do + render( + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + ) + end end end end diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index 1ad476c1f66e..6a5a5d6e282b 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -3,14 +3,19 @@ overflow-y: auto &.with-initial-input-compensation margin-bottom: 75px // initial margin-bottom, will be increased by stimulus when opening ckeditor + @media screen and (max-width: $breakpoint-xl) + margin-bottom: 0 &.with-input-compensation margin-bottom: 190px + @media screen and (max-width: $breakpoint-xl) + margin-bottom: 0 #input-container - position: absolute - min-height: 60px - bottom: 0 - left: 0 - right: 0 - @media screen and (max-width: $breakpoint-md) - width: 100vw - margin-left: -15px + @media screen and (min-width: $breakpoint-xl) + position: absolute + min-height: 60px + bottom: 0 + left: 0 + right: 0 + @media screen and (max-width: $breakpoint-xl) + &.sort-desc + order: -1 \ No newline at end of file diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index b21ccc94dcbf..d356ba95a762 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -94,10 +94,6 @@ export default class IndexController extends Controller { setFilterToOnlyChanges() { this.filterValue = 'only_changes'; } unsetFilter() { this.filterValue = ''; } - private getCkEditorElement():HTMLElement | null { - return this.formRowTarget.querySelectorAll('.document-editor__editable')[0] as HTMLElement; - } - private getCkEditorInstance():ICKEditorInstance | null { const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); return AngularCkEditorElement ? jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance : null; @@ -155,6 +151,9 @@ export default class IndexController extends Controller { } private adjustJournalContainerMargin() { + // don't do this on mobile screens + // TODO: get rid of static width value and reach for a more CSS based solution + if (window.innerWidth < 1279) { return; } this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 40}px`; } @@ -172,9 +171,9 @@ export default class IndexController extends Controller { this.addEventListenersToCkEditorInstance(); - const ckEditorElement = this.getCkEditorElement(); - if (ckEditorElement) { - setTimeout(() => ckEditorElement.focus(), 10); + const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance) { + setTimeout(() => ckEditorInstance.editing.view.focus(), 10); } } From e3e80c21ac1f331003b7043be9fff963e0f42e4d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 18:27:57 +0200 Subject: [PATCH 028/120] adjusted max height of editor as requested and fixed margin adjustment --- .../work_packages/activities_tab/journals/new_component.sass | 2 +- .../dynamic/work-packages/activities-tab/index.controller.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index 8802763923cb..b6ce4937ca25 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -18,7 +18,7 @@ border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) .ck-content background: var(--bgColor-default) - max-height: 40vh + max-height: 30vh overflow-y: auto border-radius: var(--borderRadius-medium) margin: 5px diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index d356ba95a762..0ff411fe5c13 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -239,6 +239,10 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { this.clearEditor(); + if (this.journalsContainerTarget) { + this.journalsContainerTarget.style.marginBottom = ''; + this.journalsContainerTarget.classList.add('with-input-compensation'); + } setTimeout(() => { this.scrollJournalContainer( this.journalsContainerTarget, From 9a855c55f20e4fd41ecf9d8ea974fb04d9e83b32 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 19:10:43 +0200 Subject: [PATCH 029/120] decreased polling interval as requested by @wielinde, optimization based on user activtity pending --- app/components/work_packages/activities_tab/index_component.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index a22f51a5f2c2..9abed8e499e0 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -53,7 +53,7 @@ def wrapper_data_attributes "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), "work-packages--activities-tab--index-sorting-value": journal_sorting, "work-packages--activities-tab--index-filter-value": filter, - "work-packages--activities-tab--index-polling-interval-in-ms-value": 60000 # protoypical implementation + "work-packages--activities-tab--index-polling-interval-in-ms-value": 10000 # protoypical implementation } end From b3754c5c79ebe3fefbd22eab1ee3a72c4d124ca0 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 2 Jul 2024 19:16:31 +0200 Subject: [PATCH 030/120] fixed paddings --- .../work_packages/activities_tab/index_component.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 322eb20f6d22..811b7cc4aa05 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -28,7 +28,7 @@ pt: 2, pb: 2, pl: 3, - pr: 2, + pr: [3, nil, nil, nil, 2], border: [nil, nil, nil, nil, :top], border_radius: [2, nil, nil, nil, 0], bg: :subtle From ec8367cfb8592b6af2b95e9dc5a8469352ca98c7 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 8 Jul 2024 11:07:38 +0200 Subject: [PATCH 031/120] optimized polling approach in order to avoid unnecessary requests --- .../activities-tab/index.controller.ts | 77 ++++++++++++++----- 1 file changed, 56 insertions(+), 21 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 0ff411fe5c13..5cd753d2aee3 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -32,40 +32,48 @@ export default class IndexController extends Controller { this.setLastUpdateTimestamp(); this.setupEventListeners(); this.handleInitialScroll(); - this.intervallId = this.pollForUpdates(); + this.startPolling(); } disconnect() { - document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); - window.clearInterval(this.intervallId); + this.removeEventListeners(); + this.stopPolling(); } private setupEventListeners() { this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); + this.handleVisibilityChange = this.handleVisibilityChange.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); + document.addEventListener('visibilitychange', this.handleVisibilityChange); } - private handleInitialScroll() { - if (window.location.hash.includes('#activity-')) { - this.scrollToActivity(); - } else if (this.sortingValue === 'asc') { - this.scrollToBottom(); + private removeEventListeners() { + this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); + this.handleVisibilityChange = this.handleVisibilityChange.bind(this); + document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); + document.removeEventListener('visibilitychange', this.handleVisibilityChange); + } + + private handleVisibilityChange() { + if (document.hidden) { + this.stopPolling(); + } else { + this.updateActivitiesList(); + this.startPolling(); } } - private scrollToActivity() { - const activityId = window.location.hash.replace('#activity-', ''); - const activityElement = document.getElementById(`activity-${activityId}`); - activityElement?.scrollIntoView({ behavior: 'smooth' }); + private startPolling() { + if (this.intervallId) window.clearInterval(this.intervallId); + this.intervallId = this.pollForUpdates(); } - private scrollToBottom() { - const scrollableContainer = jQuery(this.element).scrollParent()[0]; - if (scrollableContainer) { - setTimeout(() => { - scrollableContainer.scrollTop = scrollableContainer.scrollHeight; - }, 400); - } + private stopPolling() { + window.clearInterval(this.intervallId); + } + + private pollForUpdates() { + return window.setInterval(() => this.updateActivitiesList(), this.pollingIntervalInMsValue); } async handleWorkPackageUpdate(event:Event) { @@ -86,8 +94,27 @@ export default class IndexController extends Controller { } } - private pollForUpdates() { - return window.setInterval(() => this.updateActivitiesList(), this.pollingIntervalInMsValue); + private handleInitialScroll() { + if (window.location.hash.includes('#activity-')) { + this.scrollToActivity(); + } else if (this.sortingValue === 'asc') { + this.scrollToBottom(); + } + } + + private scrollToActivity() { + const activityId = window.location.hash.replace('#activity-', ''); + const activityElement = document.getElementById(`activity-${activityId}`); + activityElement?.scrollIntoView({ behavior: 'smooth' }); + } + + private scrollToBottom() { + const scrollableContainer = jQuery(this.element).scrollParent()[0]; + if (scrollableContainer) { + setTimeout(() => { + scrollableContainer.scrollTop = scrollableContainer.scrollHeight; + }, 400); + } } setFilterToOnlyComments() { this.filterValue = 'only_comments'; } @@ -177,6 +204,13 @@ export default class IndexController extends Controller { } } + focusEditor() { + const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance) { + setTimeout(() => ckEditorInstance.editing.view.focus(), 10); + } + } + quote(event:Event) { event.preventDefault(); const target = event.currentTarget as HTMLElement; @@ -239,6 +273,7 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { this.clearEditor(); + this.focusEditor(); if (this.journalsContainerTarget) { this.journalsContainerTarget.style.marginBottom = ''; this.journalsContainerTarget.classList.add('with-input-compensation'); From 8b4b138bc09a11912f8ea1901d9a2e269941ec67 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 8 Jul 2024 12:12:42 +0200 Subject: [PATCH 032/120] avoid editor data loss on tab change or other browser events unmounting the stimulus component --- .../activities_tab/index_component.rb | 2 + .../activities-tab/index.controller.ts | 42 +++++++++++++++++-- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index 9abed8e499e0..00295568de8b 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -53,6 +53,8 @@ def wrapper_data_attributes "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), "work-packages--activities-tab--index-sorting-value": journal_sorting, "work-packages--activities-tab--index-filter-value": filter, + "work-packages--activities-tab--index-user-id-value": User.current.id, + "work-packages--activities-tab--index-work-package-id-value": work_package.id, "work-packages--activities-tab--index-polling-interval-in-ms-value": 10000 # protoypical implementation } end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 5cd753d2aee3..014769294a0e 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -4,7 +4,7 @@ import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; -import { set } from 'lodash'; +import { workPackageFilesCount } from 'core-app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-files-count.function'; export default class IndexController extends Controller { static values = { @@ -12,6 +12,8 @@ export default class IndexController extends Controller { sorting: String, pollingIntervalInMs: Number, filter: String, + userId: Number, + workPackageId: Number, }; static targets = ['journalsContainer', 'buttonRow', 'formRow', 'form']; @@ -27,31 +29,47 @@ export default class IndexController extends Controller { declare intervallId:number; declare pollingIntervalInMsValue:number; declare filterValue:string; + declare userIdValue:number; + declare workPackageIdValue:number; + declare localStorageKey:string; connect() { + this.setLocalStorageKey(); this.setLastUpdateTimestamp(); this.setupEventListeners(); this.handleInitialScroll(); this.startPolling(); + this.populateRescuedEditorContent(); } disconnect() { + this.rescueEditorContent(); this.removeEventListeners(); this.stopPolling(); } + private setLocalStorageKey() { + // scoped by user id in order to avoid data leakage when a user logs out and another user logs in on the same browser + // TODO: when a user logs out, the data should be removed anyways in order to avoid data leakage + this.localStorageKey = `work-package-${this.workPackageIdValue}-rescued-editor-data-${this.userIdValue}`; + } + private setupEventListeners() { this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); this.handleVisibilityChange = this.handleVisibilityChange.bind(this); + this.rescueEditorContent = this.rescueEditorContent.bind(this); document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); document.addEventListener('visibilitychange', this.handleVisibilityChange); + document.addEventListener('beforeunload', this.rescueEditorContent); } private removeEventListeners() { this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); this.handleVisibilityChange = this.handleVisibilityChange.bind(this); + this.rescueEditorContent = this.rescueEditorContent.bind(this); document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); document.removeEventListener('visibilitychange', this.handleVisibilityChange); + document.removeEventListener('beforeunload', this.rescueEditorContent); } private handleVisibilityChange() { @@ -94,6 +112,24 @@ export default class IndexController extends Controller { } } + private rescueEditorContent() { + const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance) { + const data = ckEditorInstance.getData({ trim: false }); + if (data.length > 0) { + localStorage.setItem(this.localStorageKey, data); + } + } + } + + private populateRescuedEditorContent() { + const rescuedEditorContent = localStorage.getItem(this.localStorageKey); + if (rescuedEditorContent) { + this.openEditorWithInitialData(rescuedEditorContent); + localStorage.removeItem(this.localStorageKey); + } + } + private handleInitialScroll() { if (window.location.hash.includes('#activity-')) { this.scrollToActivity(); @@ -217,7 +253,7 @@ export default class IndexController extends Controller { const userName = target.dataset.userNameParam as string; const content = target.dataset.contentParam as string; - this.openEditorWithQuotedText(this.quotedText(content, userName)); + this.openEditorWithInitialData(this.quotedText(content, userName)); } private quotedText(rawComment:string, userName:string) { @@ -228,7 +264,7 @@ export default class IndexController extends Controller { return `${userName}\n${quoted}`; } - openEditorWithQuotedText(quotedText:string) { + openEditorWithInitialData(quotedText:string) { this.showForm(); const ckEditorInstance = this.getCkEditorInstance(); if (ckEditorInstance && ckEditorInstance.getData({ trim: false }).length === 0) { From 66bab815e42bc51d8c836d12b72f92ea1b23172b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 10 Jul 2024 12:59:26 +0200 Subject: [PATCH 033/120] implemented github PR style --- app/components/_index.sass | 1 + .../activities_tab/index_component.html.erb | 2 +- .../journals/day_component.html.erb | 8 +- .../journals/item_component.html.erb | 123 +++++++------- .../activities_tab/journals/item_component.rb | 4 + .../journals/item_component/details.html.erb | 19 +++ .../journals/item_component/details.rb | 157 ++++++++++++++++++ .../journals/item_component/details.sass | 30 ++++ .../journals/item_component/edit.html.erb | 2 +- .../journals/item_component/show.html.erb | 11 +- .../activities_tab_controller.rb | 11 ++ config/locales/en.yml | 3 + .../activities-tab/index.controller.ts | 16 ++ 13 files changed, 313 insertions(+), 74 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/item_component/details.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/item_component/details.rb create mode 100644 app/components/work_packages/activities_tab/journals/item_component/details.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index 0c708e0fab37..887a4542f489 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,6 +1,7 @@ @import "work_packages/activities_tab/index_component" @import "work_packages/activities_tab/journals/new_component" @import "work_packages/activities_tab/journals/item_component/edit" +@import "work_packages/activities_tab/journals/item_component/details" @import "shares/modal_body_component" @import "shares/invite_user_form_component" @import "work_packages/progress/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 811b7cc4aa05..10af70e19db3 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -10,7 +10,7 @@ ) ) end - activties_tab_container.with_row(flex_layout: true) do |journals_wrapper_container| + activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container| journals_wrapper_container.with_row( id: "journals-container", classes: "with-initial-input-compensation", diff --git a/app/components/work_packages/activities_tab/journals/day_component.html.erb b/app/components/work_packages/activities_tab/journals/day_component.html.erb index b0e44ce2c339..3b5470894476 100644 --- a/app/components/work_packages/activities_tab/journals/day_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/day_component.html.erb @@ -1,9 +1,9 @@ <%= - component_wrapper do + component_wrapper(class: "work-packages-activities-tab-journals-day-component") do flex_layout do |day_container| - day_container.with_row(my:2) do - render(Primer::Beta::Text.new(color: :muted)) { format_activity_day(day_as_date) } - end + # day_container.with_row(my:2) do + # render(Primer::Beta::Text.new(color: :muted)) { format_activity_day(day_as_date) } + # end day_container.with_row do flex_layout(id: insert_target_modifier_id) do |journals_of_day_container| journals.each do |journal| diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 7b92abdd9a44..0a8d45e5a9df 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -1,72 +1,79 @@ <%= - component_wrapper(data: wrapper_data_attributes) do - render(Primer::Box.new(id: "activity-#{journal.version}", border: true, border_radius: 2, p: 3, my: 2)) do - flex_layout do |journal_container| - journal_container.with_row(flex_layout: true, align_items: :center, justify_content: :space_between) do |header_container| - header_container.with_column(flex_layout: true) do |header_start_container| - header_start_container.with_column(mr: 2) do - render Users::AvatarComponent.new(user: journal.user, show_name: false) - end - header_start_container.with_column(flex_layout: true) do |header_text_container| - header_text_container.with_row do - render(Primer::Beta::Link.new( - href: user_url(journal.user), - target: "_blank", - scheme: :primary, - underline: false, - font_weight: :bold - )) do - journal.user.name - end - end - header_text_container.with_row(flex_layout: true) do |header_text_timestamp_container| - header_text_timestamp_container.with_column(mr: 1) do - render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) do - if updated? - I18n.t("attributes.updated_at") + component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-journals-item-component") do + flex_layout do |journal_container| + if journal.notes.present? + journal_container.with_row do + render(border_box_container(id: "activity-#{journal.version}", padding: :condensed)) do |border_box_component| + border_box_component.with_header(px: 2, py: 0) do + flex_layout(align_items: :center, justify_content: :space_between) do |header_container| + header_container.with_column(flex_layout: true) do |header_start_container| + header_start_container.with_column(mr: 2) do + render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) + end + header_start_container.with_column(mr: 1) do + render(Primer::Beta::Link.new( + href: user_url(journal.user), + target: "_blank", + scheme: :primary, + underline: false, + font_weight: :bold + )) do + journal.user.name + end + end + header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do + if journal.initial? + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + t("activities.work_packages.activity_tab.created_on") + end else - I18n.t("attributes.created_at") + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + t("activities.work_packages.activity_tab.commented_on") + end end end + header_start_container.with_column(mr: 1) do + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end end - header_text_timestamp_container.with_column do - render(Primer::Beta::Text.new(color: :subtle, mt: 1, font_size: :small)) { format_time(journal.updated_at) } + header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| + if has_unread_notifications? + header_end_container.with_column(mr: 2, pt: 1) do + bubble_html + end + end + header_end_container.with_column do + render(Primer::Beta::Link.new( + href: activity_anchor, + scheme: :secondary, + underline: false, + font_size: :small, + data: { turbo: false } + )) do + "##{journal.version}" + end + end + header_end_container.with_column(ml: 2) do + render(Primer::Alpha::ActionMenu.new) do |menu| + menu.with_show_button(icon: "kebab-horizontal", + 'aria-label': I18n.t(:button_actions), + scheme: :invisible) + copy_url_action_item(menu) + edit_action_item(menu) if editable? + quote_action_item(menu) if journal.notes.present? + end + end end end end - end - header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| - if has_unread_notifications? - header_end_container.with_column(mr: 2, pt: 1) do - bubble_html - end - end - header_end_container.with_column do - render(Primer::Beta::Link.new( - href: activity_anchor, - scheme: :secondary, - underline: false, - font_size: :small, - data: { turbo: false } - )) do - "##{journal.version}" - end - end - header_end_container.with_column(ml: 2) do - render(Primer::Alpha::ActionMenu.new) do |menu| - menu.with_show_button(icon: "kebab-horizontal", - 'aria-label': I18n.t(:button_actions), - scheme: :invisible) - copy_url_action_item(menu) - edit_action_item(menu) if editable? - quote_action_item(menu) if journal.notes.present? - end + border_box_component.with_body do + content end end end - journal_container.with_row do - content - end + end + journal_container.with_row do + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new(journal:, has_unread_notifications: notification_on_details?)) end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 94dc2dacc63d..7b7042b8231e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -92,6 +92,10 @@ def has_unread_notifications? journal.notifications.where(read_ian: false, recipient_id: User.current.id).any? end + def notification_on_details? + has_unread_notifications? && journal.notes.blank? + end + def copy_url_action_item(menu) menu.with_item(label: t("button_copy_link_to_clipboard"), tag: :button, diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb new file mode 100644 index 000000000000..384c3c0a5322 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -0,0 +1,19 @@ +<%= + component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do + if journal.details.any? + flex_layout(my: 0, border: :left, classes: "details-container") do |details_container| + if journal.notes.present? + render_details(details_container) + else + render_details_header(details_container) + render_details(details_container) + end + end + else + flex_layout(my: 0, border: :left, classes: "details-container details-container--empty--#{journal_sorting}") do |details_container| + # empty row to render the flex layout with its minimal height + render_empty_line(details_container) + end + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb new file mode 100644 index 000000000000..776d8db809e8 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -0,0 +1,157 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2012-2023 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 WorkPackages + module ActivitiesTab + module Journals + class ItemComponent::Details < ApplicationComponent + include ApplicationHelper + include AvatarHelper + include JournalFormatter + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(journal:, has_unread_notifications: false) + super + + @journal = journal + @has_unread_notifications = has_unread_notifications + end + + private + + attr_reader :journal, :has_unread_notifications + + def wrapper_uniq_by + journal.id + end + + def render_details_header(details_container) + details_container.with_row(flex_layout: true, align_items: :center, + justify_content: :space_between, classes: "details-header-container") do |header_container| + header_container.with_column(flex_layout: true, align_items: :center) do |header_start_container| + header_start_container.with_column(mr: 2, classes: "timeline-icon") do + if journal.initial? + render Primer::Beta::Octicon.new(icon: "diff-added", size: :small, "aria-label": "Add", color: :subtle) + else + render Primer::Beta::Octicon.new(icon: "diff-modified", size: :small, "aria-label": "Change", color: :subtle) + end + end + header_start_container.with_column(mr: 2) do + render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) + end + header_start_container.with_column(mr: 1) do + render(Primer::Beta::Link.new( + href: user_url(journal.user), + target: "_blank", + scheme: :primary, + underline: false, + font_weight: :bold + )) do + journal.user.name + end + end + header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do + if journal.initial? + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + t("activities.work_packages.activity_tab.created_on") + end + else + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + t("activities.work_packages.activity_tab.changed_on") + end + end + end + header_start_container.with_column(mr: 1) do + render(Primer::Beta::Text.new(color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end + end + header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| + if has_unread_notifications + header_end_container.with_column(mr: 2, pt: 1) do + bubble_html + end + end + header_end_container.with_column(pr: 3) do + render(Primer::Beta::Link.new( + href: activity_anchor, + scheme: :secondary, + underline: false, + font_size: :small, + data: { turbo: false } + )) do + "##{journal.version}" + end + end + end + end + end + + def render_details(details_container) + return if journal.initial? && journal_sorting == "desc" + + details_container.with_row(flex_layout: true, pt: 1, pb: 3) do |details_container_inner| + if journal.initial? + render_empty_line(details_container_inner) + else + journal.details.each do |detail| + details_container_inner.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| + detail_container.with_column(classes: "detail-stem-line") + detail_container.with_column(pl: 1, font_size: :small) do + render(Primer::Beta::Text.new) { journal.render_detail(detail) } + end + end + end + end + end + end + + def render_empty_line(details_container) + details_container.with_row(my: 1, font_size: :small, classes: "empty-line") + end + + def bubble_html + " + + ".html_safe + end + + def activity_anchor + "#activity-#{journal.version}" + end + + def journal_sorting + User.current.preference&.comments_sorting || "desc" + end + end + end + end +end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass new file mode 100644 index 000000000000..8e838bfd807c --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -0,0 +1,30 @@ +.work-packages-activities-tab-journals-item-component-details + .details-container + margin-left: 19px + min-height: 20px + .details-container--empty--last--asc + display: none!important + .details-header-container + margin-left: -14px + .timeline-icon + background-color: var(--bgColor-muted) + border-radius: 50% + width: 28px + height: 28px + text-align: center + padding-top: 3px + .empty-line + margin-top: 0px!important + margin-bottom: 0px!important + .detail-stem-line + position: relative + width: 20px + .detail-stem-line::before + content: "" + position: absolute + top: 10px + left: 0 + width: 100% + height: var(--borderWidth-thin, 1px) + background-color: var(--borderColor-default) + transform: translateY(-50%) \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 3fae4360c280..47bbd8e0bf88 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -1,6 +1,6 @@ <%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-edit") do - render(Primer::Box.new(mt: 3)) do + render(Primer::Box.new(my: 3)) do primer_form_with( id: "work-package-journal-form", model: journal, diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb index 797b27b85820..e633da638406 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb @@ -3,21 +3,12 @@ if journal.notes.present? || (journal.details.any? && !journal.initial?) flex_layout do |journal_container| if journal.notes.present? - journal_container.with_row(mt: 3) do + journal_container.with_row do render(Primer::Box.new(mt: 1)) do format_text(journal, :notes) end end end - if journal.details.any? && !journal.initial? - journal_container.with_row(flex_layout: true, border_radius: 2, p: 3, my: 3, bg: :subtle) do |details_container| - journal.details.each do |detail| - details_container.with_row(mt: 1, font_size: :small) do - render(Primer::Beta::Text.new) { journal.render_detail(detail) } - end - end - end - end end end end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 307d1ab2f394..1f750a604bdd 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -104,6 +104,17 @@ def create ### if call.success? && call.result + if call.result.initial? + # we need to update the whole item component for an initial journal entry + # and not just the show part as happens in the time based update + # as this part is not rendered for initial journal + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: call.result, + state: :show + ) + ) + end generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) end diff --git a/config/locales/en.yml b/config/locales/en.yml index 881420c0bb73..40672ae75b21 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -43,6 +43,9 @@ en: label_sort_desc: "Newest on top" label_type_to_comment: "Type here to comment" label_submit_comment: "Submit comment" + commented_on: "commented on" + changed_on: "made changes on" + created_on: "created on" admin: diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 014769294a0e..097eb712e878 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -36,6 +36,7 @@ export default class IndexController extends Controller { connect() { this.setLocalStorageKey(); this.setLastUpdateTimestamp(); + this.hideLastPartOfTimeLineStem(); this.setupEventListeners(); this.handleInitialScroll(); this.startPolling(); @@ -109,6 +110,7 @@ export default class IndexController extends Controller { const text = await response.text(); Turbo.renderStreamMessage(text); this.setLastUpdateTimestamp(); + this.hideLastPartOfTimeLineStem(); } } @@ -319,6 +321,7 @@ export default class IndexController extends Controller { this.journalsContainerTarget, this.sortingValue === 'asc', ); + this.hideLastPartOfTimeLineStem(); }, 100); } } @@ -339,4 +342,17 @@ export default class IndexController extends Controller { setLastUpdateTimestamp() { this.lastUpdateTimestamp = new Date().toISOString(); } + + hideLastPartOfTimeLineStem() { + // TODO: I wasn't able to find a pure CSS solution + // Didn't want to identify on server-side which element is last in the list in order to avoid n+1 queries + // happy to get rid of this hacky JS solution! + this.element.querySelectorAll('.details-container--empty--last--asc').forEach((container) => container.classList.remove('details-container--empty--last--asc')); + + const containers = this.element.querySelectorAll('.details-container--empty--asc'); + if (containers.length > 0) { + const lastContainer = containers[containers.length - 1] as HTMLElement; + lastContainer.classList.add('details-container--empty--last--asc'); + } + } } From 674ffae0cf1172bd6a053676e2aacc540f83ec1f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 10 Jul 2024 14:14:06 +0200 Subject: [PATCH 034/120] fixed detail update streams --- app/controllers/work_packages/activities_tab_controller.rb | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 1f750a604bdd..f304d4abc294 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -203,6 +203,12 @@ def generate_time_based_update_streams(last_update_timestamp, filter) journal: ) ) + update_via_turbo_stream( + # only use the show component in order not to loose an edit state + component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new( + journal: + ) + ) end latest_journal_visible_for_user = journals.where(created_at: ..last_update_timestamp).last From b09c50d0288e241aa7f96588dc12d67efbf73628 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 10 Jul 2024 15:32:55 +0200 Subject: [PATCH 035/120] fixed filter behavior --- .../journals/day_component.html.erb | 2 +- .../activities_tab/journals/day_component.rb | 5 +- .../journals/index_component.html.erb | 2 +- .../journals/index_component.rb | 1 - .../journals/item_component.html.erb | 6 +- .../activities_tab/journals/item_component.rb | 13 +++-- .../journals/item_component/details.html.erb | 11 +++- .../journals/item_component/details.rb | 5 +- .../journals/item_component/edit.html.erb | 4 +- .../journals/item_component/edit.rb | 5 +- .../journals/item_component/show.rb | 5 +- .../activities_tab_controller.rb | 57 ++++++++----------- .../activities-tab/index.controller.ts | 21 ++++--- 13 files changed, 75 insertions(+), 62 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/day_component.html.erb b/app/components/work_packages/activities_tab/journals/day_component.html.erb index 3b5470894476..f221b92151bb 100644 --- a/app/components/work_packages/activities_tab/journals/day_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/day_component.html.erb @@ -9,7 +9,7 @@ journals.each do |journal| journals_of_day_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) ) end end diff --git a/app/components/work_packages/activities_tab/journals/day_component.rb b/app/components/work_packages/activities_tab/journals/day_component.rb index 2b72d553e33c..5ddc32cc8a3b 100644 --- a/app/components/work_packages/activities_tab/journals/day_component.rb +++ b/app/components/work_packages/activities_tab/journals/day_component.rb @@ -36,17 +36,18 @@ class DayComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(day_as_date:, journals:, work_package:) + def initialize(day_as_date:, journals:, work_package:, filter:) super @work_package = work_package @day_as_date = day_as_date @journals = journals + @filter = filter end private - attr_reader :work_package, :day_as_date, :journals + attr_reader :work_package, :day_as_date, :journals, :filter def insert_target_modified? true diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index fdac77e9d301..6eed26bc5451 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -5,7 +5,7 @@ journals_grouped_by_day.each do |day, journals| journals_index_container.with_row do render( - WorkPackages::ActivitiesTab::Journals::DayComponent.new(day_as_date: day, journals:, work_package:) + WorkPackages::ActivitiesTab::Journals::DayComponent.new(day_as_date: day, journals:, work_package:, filter:) ) end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index 5dc61aedbf58..d2dfa17857e0 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -63,7 +63,6 @@ def journals_grouped_by_day result = work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) result = result.where.not(notes: "") if filter == :only_comments - result = result.where(notes: "") if filter == :only_changes result.group_by { |journal| journal.created_at.in_time_zone(User.current.time_zone).to_date } end diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 0a8d45e5a9df..50613ac10212 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -1,8 +1,8 @@ <%= component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-journals-item-component") do flex_layout do |journal_container| - if journal.notes.present? - journal_container.with_row do + if show_comment_container? + journal_container.with_row(classes: "comment-border-box") do render(border_box_container(id: "activity-#{journal.version}", padding: :condensed)) do |border_box_component| border_box_component.with_header(px: 2, py: 0) do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| @@ -73,7 +73,7 @@ end end journal_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new(journal:, has_unread_notifications: notification_on_details?)) + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new(journal:, has_unread_notifications: notification_on_details?, filter:)) end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 7b7042b8231e..670480235002 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -34,11 +34,12 @@ class ItemComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:, state: :show) + def initialize(journal:, filter:, state: :show) super @journal = journal @state = state + @filter = filter end def content @@ -52,14 +53,14 @@ def content private - attr_reader :journal, :state + attr_reader :journal, :state, :filter def wrapper_uniq_by journal.id end def child_component_params - { journal: }.compact + { journal:, filter: }.compact end def wrapper_data_attributes @@ -70,6 +71,10 @@ def wrapper_data_attributes } end + def show_comment_container? + journal.notes.present? && filter != :only_changes + end + def activity_url "#{project_work_package_url(journal.journable.project, journal.journable)}/activity#{activity_anchor}" end @@ -110,7 +115,7 @@ def copy_url_action_item(menu) def edit_action_item(menu) menu.with_item(label: t("js.label_edit_comment"), - href: edit_work_package_activity_path(journal.journable, journal), + href: edit_work_package_activity_path(journal.journable, journal, filter:), content_arguments: { data: { "turbo-stream": true } }) do |item| diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 384c3c0a5322..561ee79a8635 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -1,14 +1,21 @@ <%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do - if journal.details.any? + if journal.details.any? && filter != :only_comments flex_layout(my: 0, border: :left, classes: "details-container") do |details_container| - if journal.notes.present? + if journal.notes.present? && filter != :only_changes render_details(details_container) else render_details_header(details_container) render_details(details_container) end end + elsif journal.details.empty? + unless filter == :only_changes + flex_layout(my: 0, border: :left, classes: "details-container details-container--empty--#{journal_sorting}") do |details_container| + # empty row to render the flex layout with its minimal height + render_empty_line(details_container) + end + end else flex_layout(my: 0, border: :left, classes: "details-container details-container--empty--#{journal_sorting}") do |details_container| # empty row to render the flex layout with its minimal height diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 776d8db809e8..1152bc0ddca7 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -36,16 +36,17 @@ class ItemComponent::Details < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:, has_unread_notifications: false) + def initialize(journal:, filter:, has_unread_notifications: false) super @journal = journal @has_unread_notifications = has_unread_notifications + @filter = filter end private - attr_reader :journal, :has_unread_notifications + attr_reader :journal, :has_unread_notifications, :filter def wrapper_uniq_by journal.id diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 47bbd8e0bf88..a17fb186d2f1 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -6,7 +6,7 @@ model: journal, method: :put, data: { turbo: true, turbo_stream: true }, - url: work_package_activity_path(work_package_id: work_package.id, id: journal.id), + url: work_package_activity_path(work_package_id: work_package.id, id: journal.id, filter:), ) do |f| flex_layout do |form_container| form_container.with_row do @@ -18,7 +18,7 @@ scheme: :secondary, size: :medium, tag: :a, - href: cancel_edit_work_package_activity_path(work_package.id, id: journal.id), + href: cancel_edit_work_package_activity_path(work_package.id, id: journal.id, filter:), data: { "turbo-stream": true } )) do t("button_cancel") diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.rb b/app/components/work_packages/activities_tab/journals/item_component/edit.rb index 8bf22a5f7a8f..a6bc75b22072 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.rb @@ -34,16 +34,17 @@ class ItemComponent::Edit < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:) + def initialize(journal:, filter:) super @journal = journal @work_package = journal.journable + @filter = filter end private - attr_reader :journal, :work_package + attr_reader :journal, :work_package, :filter def wrapper_uniq_by journal.id diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.rb b/app/components/work_packages/activities_tab/journals/item_component/show.rb index a461cd5e43ec..e3abc2222065 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/show.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/show.rb @@ -36,15 +36,16 @@ class ItemComponent::Show < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:) + def initialize(journal:, filter:) super @journal = journal + @filter = filter end private - attr_reader :journal + attr_reader :journal, :filter def wrapper_uniq_by journal.id diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index f304d4abc294..3c2c42c722c7 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -76,7 +76,8 @@ def edit update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: @journal, - state: :edit + state: :edit, + filter: params[:filter]&.to_sym || :all ) ) @@ -87,7 +88,8 @@ def cancel_edit update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: @journal, - state: :show + state: :show, + filter: params[:filter]&.to_sym || :all ) ) @@ -111,15 +113,14 @@ def create update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: call.result, - state: :show + state: :show, + filter: params[:filter]&.to_sym || :all ) ) end generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) end - # clear_form_via_turbo_stream - respond_with_turbo_streams end @@ -132,7 +133,8 @@ def update update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: call.result, - state: :show + state: :show, + filter: params[:filter]&.to_sym || :all ) ) end @@ -185,28 +187,27 @@ def journal_params end def generate_time_based_update_streams(last_update_timestamp, filter) + filter = filter&.to_sym || :all # TODO: prototypical implementation journals = @work_package.journals - if filter == "only_comments" + if filter == :only_comments journals = journals.where.not(notes: "") end - if filter == "only_changes" - journals = journals.where(notes: "") - end - journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| update_via_turbo_stream( # only use the show component in order not to loose an edit state component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( - journal: + journal:, + filter: ) ) update_via_turbo_stream( # only use the show component in order not to loose an edit state component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new( - journal: + journal:, + filter: ) ) end @@ -214,28 +215,32 @@ def generate_time_based_update_streams(last_update_timestamp, filter) latest_journal_visible_for_user = journals.where(created_at: ..last_update_timestamp).last journals.where("created_at > ?", last_update_timestamp).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user) + append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user, filter) end end - def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal) + def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal, filter) if latest_journal.created_at.to_date == journal.created_at.to_date target_component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( work_package: @work_package, day_as_date: journal.created_at.to_date, - journals: [journal] # we don't need to pass all actual journals of this day as we do not really render this component + journals: [journal], # we don't need to pass all actual journals of this day as we do not really render this component + filter: ) component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: + journal:, + filter: ) else target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( - work_package: @work_package + work_package: @work_package, + filter: ) component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( work_package: @work_package, day_as_date: journal.created_at.to_date, - journals: [journal] + journals: [journal], + filter: ) end stream_config = { @@ -250,18 +255,4 @@ def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal) prepend_via_turbo_stream(**stream_config) end end - - def update_journal_via_turbo_stream(journal) - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:) - ) - end - - def clear_form_via_turbo_stream - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::NewComponent.new( - work_package: @work_package - ) - ) - end end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 097eb712e878..aff02ebe9129 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -347,12 +347,19 @@ export default class IndexController extends Controller { // TODO: I wasn't able to find a pure CSS solution // Didn't want to identify on server-side which element is last in the list in order to avoid n+1 queries // happy to get rid of this hacky JS solution! - this.element.querySelectorAll('.details-container--empty--last--asc').forEach((container) => container.classList.remove('details-container--empty--last--asc')); - - const containers = this.element.querySelectorAll('.details-container--empty--asc'); - if (containers.length > 0) { - const lastContainer = containers[containers.length - 1] as HTMLElement; - lastContainer.classList.add('details-container--empty--last--asc'); - } + // + // Note: below works but not if filter is changed, skipping for now + // + // this.element.querySelectorAll('.details-container--empty--last--asc').forEach((container) => container.classList.remove('details-container--empty--last--asc')); + + // const containers = this.element.querySelectorAll('.details-container--empty--asc'); + // if (containers.length > 0) { + // const lastContainer = containers[containers.length - 1] as HTMLElement; + // // only apply for stem part after comment box + // if (lastContainer?.parentElement?.parentElement?.previousElementSibling?.classList.contains('comment-border-box')) { + // lastContainer.classList.add('details-container--empty--last--asc'); + // } + // // lastContainer.classList.add('details-container--empty--last--asc'); + // } } } From 0c48308ff99c232ab9dd03d5fdb3ef65d285d5a9 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 10 Jul 2024 15:40:51 +0200 Subject: [PATCH 036/120] quickly adjusted font rendering of detail descriptions, refactoring required --- .../activities_tab/journals/item_component/details.rb | 2 +- .../activities_tab/journals/item_component/details.sass | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 1152bc0ddca7..93931b5799bf 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -124,7 +124,7 @@ def render_details(details_container) details_container_inner.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| detail_container.with_column(classes: "detail-stem-line") detail_container.with_column(pl: 1, font_size: :small) do - render(Primer::Beta::Text.new) { journal.render_detail(detail) } + render(Primer::Beta::Text.new(classes: "detail-description")) { journal.render_detail(detail) } end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index 8e838bfd807c..d6d5884747a3 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -27,4 +27,9 @@ width: 100% height: var(--borderWidth-thin, 1px) background-color: var(--borderColor-default) - transform: translateY(-50%) \ No newline at end of file + transform: translateY(-50%) + .detail-description + // quick hack to adapt the current detail rendering to desired primerised design + i + font-style: normal + color: var(--fgColor-muted, var(--color-fg-subtle)) \ No newline at end of file From f8915bfe764bc6300aa51a471cb1be5927114bf1 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 18 Jul 2024 17:50:19 +0200 Subject: [PATCH 037/120] added first specs for primerized workpackage activities --- .../activities_tab/index_component.rb | 7 +- .../filter_and_sorting_component.html.erb | 26 +- .../journals/index_component.html.erb | 2 +- .../journals/item_component.html.erb | 13 +- .../journals/item_component/details.html.erb | 6 +- .../journals/item_component/details.rb | 9 +- .../journals/item_component/details.sass | 12 +- .../journals/new_component.html.erb | 4 +- .../work_package/activities_spec.rb | 368 ++++++++++++++++++ .../components/work_packages/activities.rb | 90 +++++ .../pages/work_packages/full_work_package.rb | 4 + 11 files changed, 513 insertions(+), 28 deletions(-) create mode 100644 spec/features/activities/work_package/activities_spec.rb diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index 00295568de8b..e957fcb19f49 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -48,6 +48,7 @@ def initialize(work_package:, filter: :all) def wrapper_data_attributes { + test_selector: "op-wp-activity-tab", controller: "work-packages--activities-tab--index", "application-target": "dynamic", "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), @@ -55,13 +56,17 @@ def wrapper_data_attributes "work-packages--activities-tab--index-filter-value": filter, "work-packages--activities-tab--index-user-id-value": User.current.id, "work-packages--activities-tab--index-work-package-id-value": work_package.id, - "work-packages--activities-tab--index-polling-interval-in-ms-value": 10000 # protoypical implementation + "work-packages--activities-tab--index-polling-interval-in-ms-value": polling_interval # protoypical implementation } end def journal_sorting User.current.preference&.comments_sorting || "desc" end + + def polling_interval + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] || 10000 + end end end end diff --git a/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb index 298b2fe31de9..e237db625964 100644 --- a/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb @@ -3,7 +3,10 @@ flex_layout(justify_content: :space_between) do |container| container.with_column do - render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true)) do |menu| + render(Primer::Alpha::ActionMenu.new( + select_variant: :single, dynamic_label: true, + data: { "test_selector": "op-wp-journals-filter-menu" } + )) do |menu| menu.with_show_button do |button| button.with_trailing_action_icon(icon: :"triangle-down") end @@ -11,7 +14,10 @@ label: t("activities.work_packages.activity_tab.label_activity_show_all"), href: update_filter_work_package_activities_path(work_package), content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter" } + data: { + "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter", + "test_selector": "op-wp-journals-filter-show-all" + } }, active: show_all? ) @@ -19,7 +25,10 @@ label: t("activities.work_packages.activity_tab.label_activity_show_only_changes"), href: update_filter_work_package_activities_path(work_package, filter: :only_changes), content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges" } + data: { + "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges", + "test_selector": "op-wp-journals-filter-show-only-changes" + } }, active: show_only_changes? ) @@ -27,7 +36,10 @@ label: t("activities.work_packages.activity_tab.label_activity_show_only_comments"), href: update_filter_work_package_activities_path(work_package, filter: :only_comments), content_arguments: { - data: { "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments" } + data: { + "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments", + "test_selector": "op-wp-journals-filter-show-only-comments" + } }, active: show_only_comments? ) @@ -35,7 +47,7 @@ end container.with_column do render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true)) do |menu| - menu.with_show_button(scheme: :invisible) do |button| + menu.with_show_button(scheme: :invisible, data: { "test_selector": "op-wp-journals-sorting-menu" }) do |button| button.with_trailing_action_icon(icon: :"triangle-down") end menu.with_item( @@ -43,7 +55,7 @@ href: update_sorting_work_package_activities_path(work_package, sorting: :desc, filter:), form_arguments: { method: :put }, content_arguments: { - data: { "turbo-stream": true } + data: { "turbo-stream": true, "test_selector": "op-wp-journals-sorting-desc" } }, active: desc_sorting? ) @@ -52,7 +64,7 @@ href: update_sorting_work_package_activities_path(work_package, sorting: :asc, filter:), form_arguments: { method: :put }, content_arguments: { - data: { "turbo-stream": true } + data: { "turbo-stream": true, "test_selector": "op-wp-journals-sorting-asc" } }, active: asc_sorting? ) diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index 6eed26bc5451..78abb395ebf2 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,6 +1,6 @@ <%= component_wrapper do - flex_layout(id: insert_target_modifier_id) do |journals_index_container| + flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| if journals_grouped_by_day.any? journals_grouped_by_day.each do |day, journals| journals_index_container.with_row do diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 50613ac10212..b602ca21b9b1 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -1,10 +1,13 @@ <%= component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-journals-item-component") do - flex_layout do |journal_container| + flex_layout(data: { "test_selector": "op-wp-journal-entry-#{journal.id}" }) do |journal_container| if show_comment_container? - journal_container.with_row(classes: "comment-border-box") do - render(border_box_container(id: "activity-#{journal.version}", padding: :condensed)) do |border_box_component| - border_box_component.with_header(px: 2, py: 0) do + journal_container.with_row(classes: "journal-notes-border-box") do + render(border_box_container( + id: "activity-#{journal.version}", + padding: :condensed + )) do |border_box_component| + border_box_component.with_header(px: 2, py: 0, classes: "journal-notes-header") do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| header_container.with_column(flex_layout: true) do |header_start_container| header_start_container.with_column(mr: 2) do @@ -66,7 +69,7 @@ end end end - border_box_component.with_body do + border_box_component.with_body(classes: "journal-notes-body") do content end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 561ee79a8635..5d1420533426 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -1,7 +1,7 @@ <%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do if journal.details.any? && filter != :only_comments - flex_layout(my: 0, border: :left, classes: "details-container") do |details_container| + flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| if journal.notes.present? && filter != :only_changes render_details(details_container) else @@ -11,13 +11,13 @@ end elsif journal.details.empty? unless filter == :only_changes - flex_layout(my: 0, border: :left, classes: "details-container details-container--empty--#{journal_sorting}") do |details_container| + flex_layout(my: 0, border: :left, classes: "journal-details-container journal-details-container--empty--#{journal_sorting}") do |details_container| # empty row to render the flex layout with its minimal height render_empty_line(details_container) end end else - flex_layout(my: 0, border: :left, classes: "details-container details-container--empty--#{journal_sorting}") do |details_container| + flex_layout(my: 0, border: :left, classes: "journal-details-container journal-details-container--empty--#{journal_sorting}") do |details_container| # empty row to render the flex layout with its minimal height render_empty_line(details_container) end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 93931b5799bf..ff8a8794b64f 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -54,8 +54,9 @@ def wrapper_uniq_by def render_details_header(details_container) details_container.with_row(flex_layout: true, align_items: :center, - justify_content: :space_between, classes: "details-header-container") do |header_container| - header_container.with_column(flex_layout: true, align_items: :center) do |header_start_container| + justify_content: :space_between, classes: "journal-details-header-container") do |header_container| + header_container.with_column(flex_layout: true, align_items: :center, + classes: "journal-details-header") do |header_start_container| header_start_container.with_column(mr: 2, classes: "timeline-icon") do if journal.initial? render Primer::Beta::Octicon.new(icon: "diff-added", size: :small, "aria-label": "Add", color: :subtle) @@ -122,9 +123,9 @@ def render_details(details_container) else journal.details.each do |detail| details_container_inner.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| - detail_container.with_column(classes: "detail-stem-line") + detail_container.with_column(classes: "journal-detail-stem-line") detail_container.with_column(pl: 1, font_size: :small) do - render(Primer::Beta::Text.new(classes: "detail-description")) { journal.render_detail(detail) } + render(Primer::Beta::Text.new(classes: "journal-detail-description")) { journal.render_detail(detail) } end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index d6d5884747a3..c949752129e0 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -1,10 +1,10 @@ .work-packages-activities-tab-journals-item-component-details - .details-container + .journal-details-container margin-left: 19px min-height: 20px - .details-container--empty--last--asc + .journal-details-container--empty--last--asc display: none!important - .details-header-container + .journal-details-header-container margin-left: -14px .timeline-icon background-color: var(--bgColor-muted) @@ -16,10 +16,10 @@ .empty-line margin-top: 0px!important margin-bottom: 0px!important - .detail-stem-line + .journal-detail-stem-line position: relative width: 20px - .detail-stem-line::before + .journal-detail-stem-line::before content: "" position: absolute top: 10px @@ -28,7 +28,7 @@ height: var(--borderWidth-thin, 1px) background-color: var(--borderColor-default) transform: translateY(-50%) - .detail-description + .journal-detail-description // quick hack to adapt the current detail rendering to desired primerised design i font-style: normal diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 42ff11c03bc6..267ce19a7c2e 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -7,6 +7,7 @@ flex_layout(justify_content: :space_between) do |button_row| button_row.with_column(id: "input-trigger-column", mr: 2) do render(Primer::Beta::Button.new( + id: "open-work-package-journal-form", text_align: :left, scheme: :default, size: :medium, @@ -48,7 +49,8 @@ scheme: :default, icon: :"paper-airplane", "aria-label": t("activities.work_packages.activity_tab.label_submit_comment"), - type: :submit + type: :submit, + data: { "test_selector": "op-submit-work-package-journal-form" } )) end end diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb new file mode 100644 index 000000000000..5e8d0ad7ef65 --- /dev/null +++ b/spec/features/activities/work_package/activities_spec.rb @@ -0,0 +1,368 @@ +#-- 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. +#++ + +require "spec_helper" + +RSpec.describe "Work package activity", :js, :with_cuprite do + let(:project) { create(:project) } + let(:admin) { create(:admin) } + let(:member_role) do + create(:project_role, + permissions: %i[view_work_packages edit_work_packages add_work_packages work_package_assigned]) + end + let(:member) do + create(:user, + firstname: "A", + lastname: "Member", + member_with_roles: { project => member_role }) + end + + let(:wp_page) { Pages::FullWorkPackage.new(work_package, project) } + let(:activity_tab) { Components::WorkPackages::Activities.new(work_package) } + + context "when a workpackage is created and visited by the same user" do + current_user { admin } + let(:work_package) { create(:work_package, project:, author: admin) } + + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "shows and merges activities and comments correctly", :aggregate_failures do + first_journal = work_package.journals.first + + # initial journal entry is shown without changeset or comment + activity_tab.within_journal_entry(first_journal) do + activity_tab.expect_journal_details_header(text: "created") + activity_tab.expect_journal_details_header(text: admin.name) + activity_tab.expect_no_journal_notes + activity_tab.expect_no_journal_changed_attribute + end + + wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + # even when attributes are changed, the initial journal entry is still not showing any changeset + activity_tab.within_journal_entry(first_journal) do + activity_tab.expect_no_journal_changed_attribute + end + + # merges the initial journal entry with the first comment when a comment is added right after the work package is created + activity_tab.add_comment(text: "First comment") + + activity_tab.within_journal_entry(first_journal) do + activity_tab.expect_no_journal_details_header + activity_tab.expect_journal_notes_header(text: "created") + activity_tab.expect_journal_notes_header(text: admin.name) + activity_tab.expect_journal_notes(text: "First comment") + activity_tab.expect_no_journal_changed_attribute + end + + # changing the work package attributes after the first comment is added + wp_page.update_attributes(subject: "A new subject!!!") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + # the changeset is still not shown in the journal entry + activity_tab.within_journal_entry(first_journal) do + activity_tab.expect_no_journal_changed_attribute + end + + # adding a second comment + activity_tab.add_comment(text: "Second comment") + + second_journal = work_package.journals.second + + activity_tab.within_journal_entry(second_journal) do + activity_tab.expect_no_journal_changed_attribute + end + + # changing the work package attributes after the first comment is added + wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + # the changeset is shown for the second journal entry (all but initial) + activity_tab.within_journal_entry(second_journal) do + activity_tab.expect_journal_changed_attribute(text: "Subject") + end + + wp_page.update_attributes(assignee: member.name) # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + # the changeset is merged for the second journal entry + activity_tab.within_journal_entry(second_journal) do + activity_tab.expect_journal_changed_attribute(text: "Subject") + activity_tab.expect_journal_changed_attribute(text: "Assignee") + end + end + end + + context "when a workpackage is created and visited by different users" do + current_user { member } + let(:work_package) { create(:work_package, project:, author: admin) } + + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "shows and merges activities and comments correctly", :aggregate_failures do + first_journal = work_package.journals.first + + # initial journal entry is shown without changeset or comment + activity_tab.within_journal_entry(first_journal) do + activity_tab.expect_journal_details_header(text: "created") + activity_tab.expect_journal_details_header(text: admin.name) + activity_tab.expect_no_journal_notes + activity_tab.expect_no_journal_changed_attribute + end + + wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + second_journal = work_package.journals.second + # even when attributes are changed, the initial journal entry is still not showing any changeset + activity_tab.within_journal_entry(second_journal) do + activity_tab.expect_journal_details_header(text: "change") + activity_tab.expect_journal_details_header(text: member.name) + activity_tab.expect_journal_changed_attribute(text: "Subject") + end + + # merges the second journal entry with the comment made by the user right afterwards + activity_tab.add_comment(text: "First comment") + + activity_tab.within_journal_entry(second_journal) do + activity_tab.expect_no_journal_details_header + activity_tab.expect_journal_notes_header(text: "commented") + activity_tab.expect_journal_notes_header(text: member.name) + activity_tab.expect_journal_notes(text: "First comment") + end + + travel_to 1.hour.from_now + + # the journals will not be merged due to the time difference + + wp_page.update_attributes(subject: "A new subject!!!") # rubocop:disable Rails/ActiveRecordAliases + + third_journal = work_package.journals.third + + activity_tab.within_journal_entry(third_journal) do + activity_tab.expect_journal_details_header(text: "change") + activity_tab.expect_journal_details_header(text: member.name) + activity_tab.expect_journal_changed_attribute(text: "Subject") + end + end + end + + context "when multiple users are commenting on a workpackage" do + current_user { admin } + let(:work_package) { create(:work_package, project:, author: admin) } + + before do + # set WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS to 1000 + # to speed up the polling interval for test duration + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] = "1000" + + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + after do + ENV.delete("WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS") + end + + it "shows the comment of another user without browser reload", :aggregate_failures do + # simulate member creating a comment + sleep 1 # the comment needs to be created after the component is mounted + first_journal = create(:work_package_journal, user: member, notes: "First comment by member", journable: work_package, + version: 2) + + # the comment is shown without browser reload + activity_tab.expect_journal_notes(text: "First comment by member") + + # simulate comments made within the polling interval + create(:work_package_journal, user: member, notes: "Second comment by member", journable: work_package, version: 3) + create(:work_package_journal, user: member, notes: "Third comment by member", journable: work_package, version: 4) + + activity_tab.add_comment(text: "First comment by admin") + + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "First comment by member", + "Second comment by member", + "Third comment by member", + "First comment by admin" + ]) + + first_journal.update!(notes: "First comment by member updated") + + # properly updates the comment when the comment is updated + activity_tab.expect_journal_notes(text: "First comment by member updated") + end + end + + describe "filtering" do + current_user { admin } + let(:work_package) { create(:work_package, project:, author: admin) } + + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) + + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + create(:work_package_journal, user: admin, notes: "Second comment by admin", journable: work_package, version: 3) + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "filters the activities based on type", :aggregate_failures do + # add a non-comment journal entry by changing the work package attributes + wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + # expect all journal entries + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:only_comments) + + # expect only the comments + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_no_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:only_changes) + + # expect only the changes + activity_tab.expect_no_journal_notes(text: "First comment by admin") + activity_tab.expect_no_journal_notes(text: "Second comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:all) + + # expect all journal entries + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + + # strip journal entries with comments and changesets down to the comments + + # creating a journal entry with both a comment and a changeset + activity_tab.add_comment(text: "Third comment by admin") + wp_page.update_attributes(subject: "A new subject!!!") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + latest_journal = work_package.journals.last + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_journal_notes_header(text: "commented") + activity_tab.expect_journal_notes_header(text: admin.name) + activity_tab.expect_journal_notes(text: "Third comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + activity_tab.expect_no_journal_details_header + end + + activity_tab.filter_journals(:only_comments) + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_journal_notes_header(text: "commented") + activity_tab.expect_journal_notes_header(text: admin.name) + activity_tab.expect_journal_notes(text: "Third comment by admin") + activity_tab.expect_no_journal_changed_attribute + activity_tab.expect_no_journal_details_header + end + + activity_tab.filter_journals(:only_changes) + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_no_journal_notes_header + activity_tab.expect_no_journal_notes + activity_tab.expect_journal_details_header(text: "change") + activity_tab.expect_journal_details_header(text: admin.name) + activity_tab.expect_journal_changed_attribute(text: "Subject") + end + end + end + + describe "sorting" do + current_user { admin } + let(:work_package) { create(:work_package, project:, author: admin) } + + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) + + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + create(:work_package_journal, user: admin, notes: "Second comment by admin", journable: work_package, version: 3) + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "sorts the activities based on the sorting preference", :aggregate_failures do + # expect the default sorting to be asc + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "First comment by admin", + "Second comment by admin" + ]) + activity_tab.set_journal_sorting(:desc) + + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "Second comment by admin", + "First comment by admin" + ]) + + activity_tab.set_journal_sorting(:asc) + + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "First comment by admin", + "Second comment by admin" + ]) + end + end +end diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index 0757b07b1da0..e62a1a52c8c7 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -68,6 +68,96 @@ def hover_action(journal_id, action) end end end + + # helpers for new primerized activities + + def within_journal_entry(journal, &) + page.within_test_selector("op-wp-journal-entry-#{journal.id}", &) + end + + def expect_journal_changed_attribute(text:) + expect(page).to have_css(".journal-detail-description", text:) + end + + def expect_no_journal_changed_attribute(text: nil) + expect(page).to have_no_css(".journal-detail-description", text:) + end + + def expect_no_journal_notes(text: nil) + expect(page).to have_no_css(".journal-notes-body", text:) + end + + def expect_journal_details_header(text: nil) + expect(page).to have_css(".journal-details-header", text:) + end + + def expect_no_journal_details_header(text: nil) + expect(page).to have_no_css(".journal-details-header", text:) + end + + def expect_journal_notes_header(text: nil) + expect(page).to have_css(".journal-notes-header", text:) + end + + def expect_no_journal_notes_header(text: nil) + expect(page).to have_no_css(".journal-notes-header", text:) + end + + def expect_journal_notes(text: nil) + expect(page).to have_css(".journal-notes-body", text:) + end + + def add_comment(text: nil) + # TODO: get rid of static sleep + sleep 1 # otherwise the stimulus component is not mounted yet and the click does not work + + if page.has_css?("#open-work-package-journal-form") + page.find_by_id("open-work-package-journal-form").click + else + expect(page).to have_css("#work-package-journal-form") + end + + within("#work-package-journal-form") do + FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) + page.find_test_selector("op-submit-work-package-journal-form").click + end + + page.within_test_selector("op-wp-journals-container") do + expect(page).to have_text(text) + end + end + + def get_all_comments_as_arrary + page.all(".journal-notes-body").map(&:text) + end + + def filter_journals(filter) + page.find_test_selector("op-wp-journals-filter-menu").click + + case filter + when :all + page.find_test_selector("op-wp-journals-filter-show-all").click + when :only_comments + page.find_test_selector("op-wp-journals-filter-show-only-comments").click + when :only_changes + page.find_test_selector("op-wp-journals-filter-show-only-changes").click + end + + sleep 1 # wait for the journals to be reloaded, TODO: get rid of static sleep + end + + def set_journal_sorting(sorting) + page.find_test_selector("op-wp-journals-sorting-menu").click + + case sorting + when :asc + page.find_test_selector("op-wp-journals-sorting-asc").click + when :desc + page.find_test_selector("op-wp-journals-sorting-desc").click + end + + sleep 1 # wait for the journals to be reloaded, TODO: get rid of static sleep + end end end end diff --git a/spec/support/pages/work_packages/full_work_package.rb b/spec/support/pages/work_packages/full_work_package.rb index a235fc0bead0..4dfc2239fd67 100644 --- a/spec/support/pages/work_packages/full_work_package.rb +++ b/spec/support/pages/work_packages/full_work_package.rb @@ -56,6 +56,10 @@ def expect_share_button_count(count) end end + def wait_for_activity_tab + expect(page).to have_test_selector("op-wp-activity-tab", wait: 10) + end + private def container From eb4ac8f580430c5f357f70d0388d0563fe5015d3 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 6 Aug 2024 22:22:21 +0200 Subject: [PATCH 038/120] implemented feedback from product team and adjusted micro behaviors, needs refactoring --- app/components/_index.sass | 1 + .../activities_tab/index_component.sass | 9 +- .../journals/item_component.html.erb | 34 +++---- .../activities_tab/journals/item_component.rb | 1 + .../journals/item_component.sass | 7 ++ .../journals/item_component/details.rb | 32 ++++--- .../journals/item_component/details.sass | 5 +- .../activities_tab/shared_helpers.rb | 58 ++++++++++++ config/locales/en.yml | 3 +- .../activities-tab/index.controller.ts | 89 +++++++++++++++++-- 10 files changed, 185 insertions(+), 54 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/item_component.sass create mode 100644 app/components/work_packages/activities_tab/shared_helpers.rb diff --git a/app/components/_index.sass b/app/components/_index.sass index 887a4542f489..b5ddb6fd7b4f 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,5 +1,6 @@ @import "work_packages/activities_tab/index_component" @import "work_packages/activities_tab/journals/new_component" +@import "work_packages/activities_tab/journals/item_component" @import "work_packages/activities_tab/journals/item_component/edit" @import "work_packages/activities_tab/journals/item_component/details" @import "shares/modal_body_component" diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index 6a5a5d6e282b..2b34f85e084e 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -1,14 +1,15 @@ #work-packages-activities-tab-index-component #journals-container + padding-top: 3px overflow-y: auto &.with-initial-input-compensation - margin-bottom: 75px // initial margin-bottom, will be increased by stimulus when opening ckeditor + margin-bottom: 65px // initial margin-bottom, will be increased by stimulus when opening ckeditor @media screen and (max-width: $breakpoint-xl) - margin-bottom: 0 + margin-bottom: -16px &.with-input-compensation - margin-bottom: 190px + margin-bottom: 180px @media screen and (max-width: $breakpoint-xl) - margin-bottom: 0 + margin-bottom: -16px #input-container @media screen and (min-width: $breakpoint-xl) position: absolute diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index b602ca21b9b1..5c540315e7d3 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -7,41 +7,27 @@ id: "activity-#{journal.version}", padding: :condensed )) do |border_box_component| - border_box_component.with_header(px: 2, py: 0, classes: "journal-notes-header") do + border_box_component.with_header(px: 2, py: 1, classes: "journal-notes-header") do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| header_container.with_column(flex_layout: true) do |header_start_container| header_start_container.with_column(mr: 2) do render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) end - header_start_container.with_column(mr: 1) do - render(Primer::Beta::Link.new( - href: user_url(journal.user), - target: "_blank", - scheme: :primary, - underline: false, - font_weight: :bold - )) do - journal.user.name + header_start_container.with_column(mr: 1, flex_layout: true) do |user_name_container| + user_name_container.with_row do + truncated_user_name(journal.user) end + user_name_container.with_row(classes: "hidden-for-desktop") do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } + end end header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do - if journal.initial? - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do - t("activities.work_packages.activity_tab.created_on") - end - else - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do - t("activities.work_packages.activity_tab.commented_on") - end - end - end - header_start_container.with_column(mr: 1) do - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) { format_time(journal.updated_at) } + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } end end header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? - header_end_container.with_column(mr: 2, pt: 1) do + header_end_container.with_column(mr: 2, pt: 1, classes: "bubble-container") do bubble_html end end @@ -56,7 +42,7 @@ "##{journal.version}" end end - header_end_container.with_column(ml: 2) do + header_end_container.with_column(ml: 1) do render(Primer::Alpha::ActionMenu.new) do |menu| menu.with_show_button(icon: "kebab-horizontal", 'aria-label': I18n.t(:button_actions), diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 670480235002..c2b5a1aab72b 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -31,6 +31,7 @@ module ActivitiesTab module Journals class ItemComponent < ApplicationComponent include ApplicationHelper + include WorkPackages::ActivitiesTab::SharedHelpers include OpPrimer::ComponentHelpers include OpTurbo::Streamable diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass new file mode 100644 index 000000000000..d02c5bc4d0c4 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -0,0 +1,7 @@ +.work-packages-activities-tab-journals-item-component + action-menu + button + padding-top: 3px // for whatever reason, the dots in the action menu are not perfectly aligned in center vertically by default + .bubble-container: + padding-top: 2px + diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index ff8a8794b64f..5e9778570bbe 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -33,6 +33,7 @@ class ItemComponent::Details < ApplicationComponent include ApplicationHelper include AvatarHelper include JournalFormatter + include WorkPackages::ActivitiesTab::SharedHelpers include OpPrimer::ComponentHelpers include OpTurbo::Streamable @@ -53,9 +54,9 @@ def wrapper_uniq_by end def render_details_header(details_container) - details_container.with_row(flex_layout: true, align_items: :center, + details_container.with_row(flex_layout: true, justify_content: :space_between, classes: "journal-details-header-container") do |header_container| - header_container.with_column(flex_layout: true, align_items: :center, + header_container.with_column(flex_layout: true, classes: "journal-details-header") do |header_start_container| header_start_container.with_column(mr: 2, classes: "timeline-icon") do if journal.initial? @@ -67,35 +68,32 @@ def render_details_header(details_container) header_start_container.with_column(mr: 2) do render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) end - header_start_container.with_column(mr: 1) do - render(Primer::Beta::Link.new( - href: user_url(journal.user), - target: "_blank", - scheme: :primary, - underline: false, - font_weight: :bold - )) do - journal.user.name + header_start_container.with_column(mr: 1, flex_layout: true) do |user_name_container| + user_name_container.with_row do + truncated_user_name(journal.user) + end + user_name_container.with_row(classes: "hidden-for-desktop") do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } end end header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do if journal.initial? - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do t("activities.work_packages.activity_tab.created_on") end else - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do t("activities.work_packages.activity_tab.changed_on") end end end - header_start_container.with_column(mr: 1) do - render(Primer::Beta::Text.new(color: :subtle, mt: 1)) { format_time(journal.updated_at) } + header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } end end - header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| + header_container.with_column(flex_layout: true) do |header_end_container| if has_unread_notifications - header_end_container.with_column(mr: 2, pt: 1) do + header_end_container.with_column(mr: 2, classes: "bubble-container") do bubble_html end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index c949752129e0..d9e7766d57f7 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -13,6 +13,7 @@ height: 28px text-align: center padding-top: 3px + margin-top: -2px .empty-line margin-top: 0px!important margin-bottom: 0px!important @@ -32,4 +33,6 @@ // quick hack to adapt the current detail rendering to desired primerised design i font-style: normal - color: var(--fgColor-muted, var(--color-fg-subtle)) \ No newline at end of file + color: var(--fgColor-muted, var(--color-fg-subtle)) + .bubble-container + padding-top: 2px \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/shared_helpers.rb b/app/components/work_packages/activities_tab/shared_helpers.rb new file mode 100644 index 000000000000..10ed02e84500 --- /dev/null +++ b/app/components/work_packages/activities_tab/shared_helpers.rb @@ -0,0 +1,58 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + module SharedHelpers + def truncated_user_name(user) + render(Primer::Beta::Link.new( + href: user_url(user), + target: "_blank", + scheme: :primary, + underline: false, + font_weight: :bold + )) do + component_collection do |collection| + collection.with_component(Primer::Beta::Truncate.new(classes: "hidden-for-mobile")) do |component| + component.with_item(max_width: 180) do + user.name + end + end + collection.with_component(Primer::Beta::Truncate.new(classes: "hidden-for-desktop")) do |component| + component.with_item(max_width: 220) do + user.name + end + end + end + end + end + end + end +end diff --git a/config/locales/en.yml b/config/locales/en.yml index f733165cdeb5..c3088e25f0b1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -43,9 +43,8 @@ en: label_sort_desc: "Newest on top" label_type_to_comment: "Type here to comment" label_submit_comment: "Submit comment" - commented_on: "commented on" changed_on: "made changes on" - created_on: "created on" + created_on: "created this on" admin: diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index aff02ebe9129..b73667e7e6c8 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -5,6 +5,7 @@ import { } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; import { workPackageFilesCount } from 'core-app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-files-count.function'; +import { set } from 'lodash'; export default class IndexController extends Controller { static values = { @@ -100,6 +101,7 @@ export default class IndexController extends Controller { } async updateActivitiesList() { + const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); const url = new URL(this.updateStreamsUrlValue); url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); url.searchParams.append('filter', this.filterValue); @@ -111,6 +113,16 @@ export default class IndexController extends Controller { Turbo.renderStreamMessage(text); this.setLastUpdateTimestamp(); this.hideLastPartOfTimeLineStem(); + setTimeout(() => { + if (this.sortingValue === 'asc' && journalsContainerAtBottom) { + // scroll to (new) bottom if sorting is ascending and journals container was already at bottom before a new activity was added + if (this.isMobile()) { + this.scrollInputContainerIntoView(300); + } else { + this.scrollJournalContainer(this.journalsContainerTarget, true); + } + } + }, 100); } } @@ -164,6 +176,25 @@ export default class IndexController extends Controller { return AngularCkEditorElement ? jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance : null; } + private getInputContainer():HTMLElement | null { + return this.element.querySelector('#input-container'); + } + + // TODO: get rid of static width value and reach for a more CSS based solution + private isMobile():boolean { + return window.innerWidth < 1279; + } + + // TODO: get rid of static width value and reach for a more CSS based solution + private isSmViewPort():boolean { + return window.innerWidth < 543; + } + + // TODO: get rid of static width value and reach for a more CSS based solution + private isMdViewPort():boolean { + return window.innerWidth >= 543 && window.innerWidth < 1279; + } + private addEventListenersToCkEditorInstance() { const editor = this.getCkEditorInstance(); if (editor) { @@ -208,7 +239,10 @@ export default class IndexController extends Controller { // current limitation: // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore setTimeout(() => { - if (!editor.ui.focusTracker.isFocused) { this.hideEditorIfEmpty(); } + if (!editor.ui.focusTracker.isFocused) { + this.hideEditorIfEmpty(); + if (this.isMobile()) { this.scrollInputContainerIntoView(300); } + } }, 0); }, { priority: 'highest' }, @@ -217,9 +251,27 @@ export default class IndexController extends Controller { private adjustJournalContainerMargin() { // don't do this on mobile screens - // TODO: get rid of static width value and reach for a more CSS based solution - if (window.innerWidth < 1279) { return; } - this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 40}px`; + if (this.isMobile()) { return; } + this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 33}px`; + } + + private isJournalsContainerScrolledToBottom(journalsContainer:HTMLElement) { + let atBottom = false; + // we have to handle different scrollable containers for different viewports in order to idenfity if the user is at the bottom of the journals + // seems way to hacky for me, but I couldn't find a better solution + if (this.isSmViewPort()) { + atBottom = (window.scrollY + window.outerHeight) >= document.body.scrollHeight; + } else if (this.isMdViewPort()) { + const scrollableContainer = document.querySelector('#content') as HTMLElement; + + atBottom = (scrollableContainer.scrollTop + scrollableContainer.clientHeight + 10) >= scrollableContainer.scrollHeight; + } else { + const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; + + atBottom = (scrollableContainer.scrollTop + scrollableContainer.clientHeight + 10) >= scrollableContainer.scrollHeight; + } + + return atBottom; } private scrollJournalContainer(journalsContainer:HTMLElement, toBottom:boolean) { @@ -229,13 +281,31 @@ export default class IndexController extends Controller { } } + private scrollInputContainerIntoView(timeout:number = 0) { + const inputContainer = this.getInputContainer() as HTMLElement; + setTimeout(() => { + if (inputContainer) { + inputContainer.scrollIntoView({ behavior: 'smooth' }); + } + }, timeout); + } + showForm() { + const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); + this.buttonRowTarget.classList.add('d-none'); this.formRowTarget.classList.remove('d-none'); this.journalsContainerTarget?.classList.add('with-input-compensation'); this.addEventListenersToCkEditorInstance(); + if (this.isMobile()) { + this.scrollInputContainerIntoView(300); + } else if (this.sortingValue === 'asc' && journalsContainerAtBottom) { + // scroll to (new) bottom if sorting is ascending and journals container was already at bottom before showing the form + this.scrollJournalContainer(this.journalsContainerTarget, true); + } + const ckEditorInstance = this.getCkEditorInstance(); if (ckEditorInstance) { setTimeout(() => ckEditorInstance.editing.view.focus(), 10); @@ -311,7 +381,11 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { this.clearEditor(); - this.focusEditor(); + if (this.isMobile()) { + this.hideEditorIfEmpty(); + } else { + this.focusEditor(); + } if (this.journalsContainerTarget) { this.journalsContainerTarget.style.marginBottom = ''; this.journalsContainerTarget.classList.add('with-input-compensation'); @@ -322,7 +396,10 @@ export default class IndexController extends Controller { this.sortingValue === 'asc', ); this.hideLastPartOfTimeLineStem(); - }, 100); + if (this.isMobile()) { + this.scrollInputContainerIntoView(300); + } + }, 10); } } } From 9521a2cbfada03c5ba0edfced854eaa418cd5aee Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 7 Aug 2024 12:24:06 +0200 Subject: [PATCH 039/120] fixed bottom detection for md viewports --- .../dynamic/work-packages/activities-tab/index.controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index b73667e7e6c8..62f7df394253 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -262,7 +262,7 @@ export default class IndexController extends Controller { if (this.isSmViewPort()) { atBottom = (window.scrollY + window.outerHeight) >= document.body.scrollHeight; } else if (this.isMdViewPort()) { - const scrollableContainer = document.querySelector('#content') as HTMLElement; + const scrollableContainer = document.querySelector('#content-body') as HTMLElement; atBottom = (scrollableContainer.scrollTop + scrollableContainer.clientHeight + 10) >= scrollableContainer.scrollHeight; } else { From 0f276c783f05cc022dfdf52f329cb9b1f60b5eb4 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 14:54:30 +0200 Subject: [PATCH 040/120] implemented feedback from product team, finalized new specs, cleanup, bugfixing --- .../activities_tab/index_component.html.erb | 1 + .../activities_tab/index_component.sass | 12 + .../journals/day_component.html.erb | 20 - .../journals/empty_component.html.erb | 9 + .../{day_component.rb => empty_component.rb} | 21 +- .../journals/index_component.html.erb | 25 +- .../journals/index_component.rb | 10 +- .../journals/item_component.html.erb | 2 +- .../activities_tab/journals/item_component.rb | 5 +- .../journals/item_component/details.rb | 4 +- .../activities_tab_controller.rb | 59 +- .../activities_tab/journals/submit.rb | 3 +- .../activities-tab/index.controller.ts | 49 +- .../work_package/activities_spec.rb | 521 +++++++++++++++--- .../components/work_packages/activities.rb | 74 ++- 15 files changed, 616 insertions(+), 199 deletions(-) delete mode 100644 app/components/work_packages/activities_tab/journals/day_component.html.erb create mode 100644 app/components/work_packages/activities_tab/journals/empty_component.html.erb rename app/components/work_packages/activities_tab/journals/{day_component.rb => empty_component.rb} (74%) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 10af70e19db3..d1638b38766f 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -20,6 +20,7 @@ WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end + journals_wrapper_container.with_row(id: "stem-connection") journals_wrapper_container.with_row( id: "input-container", classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index 2b34f85e084e..b7d54104b9a6 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -1,5 +1,6 @@ #work-packages-activities-tab-index-component #journals-container + z-index: 10 padding-top: 3px overflow-y: auto &.with-initial-input-compensation @@ -10,7 +11,18 @@ margin-bottom: 180px @media screen and (max-width: $breakpoint-xl) margin-bottom: -16px + #stem-connection + @media screen and (min-width: $breakpoint-xl) + position: absolute + z-index: 9 + border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-default) + margin-left: 19px + margin-top: 20px + height: 100vh + @media screen and (max-width: $breakpoint-xl) + display: none #input-container + z-index: 10 @media screen and (min-width: $breakpoint-xl) position: absolute min-height: 60px diff --git a/app/components/work_packages/activities_tab/journals/day_component.html.erb b/app/components/work_packages/activities_tab/journals/day_component.html.erb deleted file mode 100644 index f221b92151bb..000000000000 --- a/app/components/work_packages/activities_tab/journals/day_component.html.erb +++ /dev/null @@ -1,20 +0,0 @@ -<%= - component_wrapper(class: "work-packages-activities-tab-journals-day-component") do - flex_layout do |day_container| - # day_container.with_row(my:2) do - # render(Primer::Beta::Text.new(color: :muted)) { format_activity_day(day_as_date) } - # end - day_container.with_row do - flex_layout(id: insert_target_modifier_id) do |journals_of_day_container| - journals.each do |journal| - journals_of_day_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) - ) - end - end - end - end - end - end -%> diff --git a/app/components/work_packages/activities_tab/journals/empty_component.html.erb b/app/components/work_packages/activities_tab/journals/empty_component.html.erb new file mode 100644 index 000000000000..44ca1c5e5386 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/empty_component.html.erb @@ -0,0 +1,9 @@ +<%= + component_wrapper do + render(Primer::Beta::Blankslate.new(border: true, data: { test_selector: "op-wp-journals-container-empty "})) do |component| + component.with_visual_icon(icon: :pulse) + component.with_heading(tag: :h2).with_content(t("activities.work_packages.activity_tab.no_results_title_text")) + component.with_description { t("activities.work_packages.activity_tab.no_results_description_text") } + end + end +%> diff --git a/app/components/work_packages/activities_tab/journals/day_component.rb b/app/components/work_packages/activities_tab/journals/empty_component.rb similarity index 74% rename from app/components/work_packages/activities_tab/journals/day_component.rb rename to app/components/work_packages/activities_tab/journals/empty_component.rb index 5ddc32cc8a3b..65e96f34c834 100644 --- a/app/components/work_packages/activities_tab/journals/day_component.rb +++ b/app/components/work_packages/activities_tab/journals/empty_component.rb @@ -31,30 +31,13 @@ module WorkPackages module ActivitiesTab module Journals - class DayComponent < ApplicationComponent + class EmptyComponent < ApplicationComponent include ApplicationHelper include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(day_as_date:, journals:, work_package:, filter:) + def initialize super - - @work_package = work_package - @day_as_date = day_as_date - @journals = journals - @filter = filter - end - - private - - attr_reader :work_package, :day_as_date, :journals, :filter - - def insert_target_modified? - true - end - - def insert_target_modifier_id - "work-package-journals-day-#{day_as_date}" end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index 78abb395ebf2..3efbaa9db68e 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,21 +1,18 @@ <%= component_wrapper do flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| - if journals_grouped_by_day.any? - journals_grouped_by_day.each do |day, journals| - journals_index_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::DayComponent.new(day_as_date: day, journals:, work_package:, filter:) - ) - end - end - else + if filter == :only_comments && journal_with_notes.empty? journals_index_container.with_row(mt: 2) do - render(Primer::Beta::Blankslate.new(border: true)) do |component| - component.with_visual_icon(icon: :pulse) - component.with_heading(tag: :h2).with_content(t("activities.work_packages.activity_tab.no_results_title_text")) - component.with_description { t("activities.work_packages.activity_tab.no_results_description_text") } - end + render( + WorkPackages::ActivitiesTab::Journals::EmptyComponent.new() + ) + end + end + journals.each do |journal| + journals_index_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) + ) end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index d2dfa17857e0..43ed24ab5ecd 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -59,12 +59,12 @@ def journal_sorting User.current.preference&.comments_sorting || "desc" end - def journals_grouped_by_day - result = work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) - - result = result.where.not(notes: "") if filter == :only_comments + def journals + work_package.journals.includes(:user, :notifications).reorder(version: journal_sorting) + end - result.group_by { |journal| journal.created_at.in_time_zone(User.current.time_zone).to_date } + def journal_with_notes + journals.where.not(notes: "") end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 5c540315e7d3..e3928b9cc3cb 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -43,7 +43,7 @@ end end header_end_container.with_column(ml: 1) do - render(Primer::Alpha::ActionMenu.new) do |menu| + render(Primer::Alpha::ActionMenu.new(data: { "test_selector": "op-wp-journal-#{journal.id}-action-menu" })) do |menu| menu.with_show_button(icon: "kebab-horizontal", 'aria-label': I18n.t(:button_actions), scheme: :invisible) diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index c2b5a1aab72b..91ee523f9f11 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -118,7 +118,7 @@ def edit_action_item(menu) menu.with_item(label: t("js.label_edit_comment"), href: edit_work_package_activity_path(journal.journable, journal, filter:), content_arguments: { - data: { "turbo-stream": true } + data: { "turbo-stream": true, test_selector: "op-wp-journal-#{journal.id}-edit" } }) do |item| item.with_leading_visual_icon(icon: :pencil) end @@ -131,7 +131,8 @@ def quote_action_item(menu) data: { action: "click->work-packages--activities-tab--index#quote", "content-param": journal.notes, - "user-name-param": I18n.t(:text_user_wrote, value: ERB::Util.html_escape(journal.user)) + "user-name-param": I18n.t(:text_user_wrote, value: ERB::Util.html_escape(journal.user)), + test_selector: "op-wp-journal-#{journal.id}-quote" } }) do |item| item.with_leading_visual_icon(icon: :quote) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 5e9778570bbe..ca2bca1fb979 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -55,7 +55,9 @@ def wrapper_uniq_by def render_details_header(details_container) details_container.with_row(flex_layout: true, - justify_content: :space_between, classes: "journal-details-header-container") do |header_container| + justify_content: :space_between, + classes: "journal-details-header-container", + id: "activity-#{journal.version}") do |header_container| header_container.with_column(flex_layout: true, classes: "journal-details-header") do |header_start_container| header_start_container.with_column(mr: 2, classes: "timeline-icon") do diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 3c2c42c722c7..d435bdddbb0f 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -197,52 +197,32 @@ def generate_time_based_update_streams(last_update_timestamp, filter) journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| update_via_turbo_stream( - # only use the show component in order not to loose an edit state - component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new( - journal:, - filter: - ) - ) - update_via_turbo_stream( - # only use the show component in order not to loose an edit state - component: WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new( + # we need to update the whole component as the show part is not rendered for journals which originally have no notes + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal:, filter: ) ) + # TODO: is it possible to loose an edit state this way? end - latest_journal_visible_for_user = journals.where(created_at: ..last_update_timestamp).last - journals.where("created_at > ?", last_update_timestamp).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal_visible_for_user, filter) + append_or_prepend_latest_journal_via_turbo_stream(journal, filter) end - end - def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal, filter) - if latest_journal.created_at.to_date == journal.created_at.to_date - target_component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( - work_package: @work_package, - day_as_date: journal.created_at.to_date, - journals: [journal], # we don't need to pass all actual journals of this day as we do not really render this component - filter: - ) - component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal:, - filter: - ) - else - target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( - work_package: @work_package, - filter: - ) - component = WorkPackages::ActivitiesTab::Journals::DayComponent.new( - work_package: @work_package, - day_as_date: journal.created_at.to_date, - journals: [journal], - filter: - ) + if journals.any? + remove_potential_empty_state end + end + + def append_or_prepend_latest_journal_via_turbo_stream(journal, filter) + target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package, + filter: + ) + + component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) + stream_config = { target_component:, component: @@ -255,4 +235,11 @@ def append_or_prepend_latest_journal_via_turbo_stream(journal, latest_journal, f prepend_via_turbo_stream(**stream_config) end end + + def remove_potential_empty_state + # remove the empty state if it is present + remove_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::EmptyComponent.new + ) + end end diff --git a/app/forms/work_packages/activities_tab/journals/submit.rb b/app/forms/work_packages/activities_tab/journals/submit.rb index 4c49a840a4b5..08bce83ed9ea 100644 --- a/app/forms/work_packages/activities_tab/journals/submit.rb +++ b/app/forms/work_packages/activities_tab/journals/submit.rb @@ -28,7 +28,8 @@ module WorkPackages::ActivitiesTab::Journals class Submit < ApplicationForm form do |notes_form| - notes_form.submit(name: :submit, label: "Save", scheme: :primary) + notes_form.submit(name: :submit, label: "Save", scheme: :primary, + data: { test_selector: "op-submit-work-package-journal-form" }) end end end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 62f7df394253..31786be007da 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -34,10 +34,13 @@ export default class IndexController extends Controller { declare workPackageIdValue:number; declare localStorageKey:string; + private handleWorkPackageUpdateBound:EventListener; + private handleVisibilityChangeBound:EventListener; + private rescueEditorContentBound:EventListener; + connect() { this.setLocalStorageKey(); this.setLastUpdateTimestamp(); - this.hideLastPartOfTimeLineStem(); this.setupEventListeners(); this.handleInitialScroll(); this.startPolling(); @@ -57,21 +60,19 @@ export default class IndexController extends Controller { } private setupEventListeners() { - this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); - this.handleVisibilityChange = this.handleVisibilityChange.bind(this); - this.rescueEditorContent = this.rescueEditorContent.bind(this); - document.addEventListener('work-package-updated', this.handleWorkPackageUpdate); - document.addEventListener('visibilitychange', this.handleVisibilityChange); - document.addEventListener('beforeunload', this.rescueEditorContent); + this.handleWorkPackageUpdateBound = this.handleWorkPackageUpdate.bind(this); + this.handleVisibilityChangeBound = this.handleVisibilityChange.bind(this); + this.rescueEditorContentBound = this.rescueEditorContent.bind(this); + + document.addEventListener('work-package-updated', this.handleWorkPackageUpdateBound); + document.addEventListener('visibilitychange', this.handleVisibilityChangeBound); + document.addEventListener('beforeunload', this.rescueEditorContentBound); } private removeEventListeners() { - this.handleWorkPackageUpdate = this.handleWorkPackageUpdate.bind(this); - this.handleVisibilityChange = this.handleVisibilityChange.bind(this); - this.rescueEditorContent = this.rescueEditorContent.bind(this); - document.removeEventListener('work-package-updated', this.handleWorkPackageUpdate); - document.removeEventListener('visibilitychange', this.handleVisibilityChange); - document.removeEventListener('beforeunload', this.rescueEditorContent); + document.removeEventListener('work-package-updated', this.handleWorkPackageUpdateBound); + document.removeEventListener('visibilitychange', this.handleVisibilityChangeBound); + document.removeEventListener('beforeunload', this.rescueEditorContentBound); } private handleVisibilityChange() { @@ -112,7 +113,6 @@ export default class IndexController extends Controller { const text = await response.text(); Turbo.renderStreamMessage(text); this.setLastUpdateTimestamp(); - this.hideLastPartOfTimeLineStem(); setTimeout(() => { if (this.sortingValue === 'asc' && journalsContainerAtBottom) { // scroll to (new) bottom if sorting is ascending and journals container was already at bottom before a new activity was added @@ -395,7 +395,6 @@ export default class IndexController extends Controller { this.journalsContainerTarget, this.sortingValue === 'asc', ); - this.hideLastPartOfTimeLineStem(); if (this.isMobile()) { this.scrollInputContainerIntoView(300); } @@ -419,24 +418,4 @@ export default class IndexController extends Controller { setLastUpdateTimestamp() { this.lastUpdateTimestamp = new Date().toISOString(); } - - hideLastPartOfTimeLineStem() { - // TODO: I wasn't able to find a pure CSS solution - // Didn't want to identify on server-side which element is last in the list in order to avoid n+1 queries - // happy to get rid of this hacky JS solution! - // - // Note: below works but not if filter is changed, skipping for now - // - // this.element.querySelectorAll('.details-container--empty--last--asc').forEach((container) => container.classList.remove('details-container--empty--last--asc')); - - // const containers = this.element.querySelectorAll('.details-container--empty--asc'); - // if (containers.length > 0) { - // const lastContainer = containers[containers.length - 1] as HTMLElement; - // // only apply for stem part after comment box - // if (lastContainer?.parentElement?.parentElement?.previousElementSibling?.classList.contains('comment-border-box')) { - // lastContainer.classList.add('details-container--empty--last--asc'); - // } - // // lastContainer.classList.add('details-container--empty--last--asc'); - // } - } } diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 5e8d0ad7ef65..1250f08ecb8c 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -64,7 +64,6 @@ # initial journal entry is shown without changeset or comment activity_tab.within_journal_entry(first_journal) do - activity_tab.expect_journal_details_header(text: "created") activity_tab.expect_journal_details_header(text: admin.name) activity_tab.expect_no_journal_notes activity_tab.expect_no_journal_changed_attribute @@ -83,7 +82,6 @@ activity_tab.within_journal_entry(first_journal) do activity_tab.expect_no_journal_details_header - activity_tab.expect_journal_notes_header(text: "created") activity_tab.expect_journal_notes_header(text: admin.name) activity_tab.expect_journal_notes(text: "First comment") activity_tab.expect_no_journal_changed_attribute @@ -146,7 +144,6 @@ # initial journal entry is shown without changeset or comment activity_tab.within_journal_entry(first_journal) do - activity_tab.expect_journal_details_header(text: "created") activity_tab.expect_journal_details_header(text: admin.name) activity_tab.expect_no_journal_notes activity_tab.expect_no_journal_changed_attribute @@ -168,7 +165,6 @@ activity_tab.within_journal_entry(second_journal) do activity_tab.expect_no_journal_details_header - activity_tab.expect_journal_notes_header(text: "commented") activity_tab.expect_journal_notes_header(text: member.name) activity_tab.expect_journal_notes(text: "First comment") end @@ -244,85 +240,142 @@ current_user { admin } let(:work_package) { create(:work_package, project:, author: admin) } - before do - # for some reason the journal is set to the "Anonymous" - # although the work_package is created by the admin - # so we need to update the journal to the admin manually to simulate the real world case - work_package.journals.first.update!(user: admin) + it "is true" do + expect(true).to be_truthy + end - create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) - create(:work_package_journal, user: admin, notes: "Second comment by admin", journable: work_package, version: 3) + context "when the work package has no comments" do + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) - wp_page.visit! - wp_page.wait_for_activity_tab - end + wp_page.visit! + wp_page.wait_for_activity_tab + end - it "filters the activities based on type", :aggregate_failures do - # add a non-comment journal entry by changing the work package attributes - wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases - wp_page.expect_and_dismiss_toaster(message: "Successful update.") + it "filters the activities based on type and shows an empty state", :aggregate_failures do + expect(true).to be_truthy + # sleep 60 + # # add a non-comment journal entry by changing the work package attributes + # wp_page.update_attributes(subject: "A new subject") + # wp_page.expect_and_dismiss_toaster(message: "Successful update.") - # expect all journal entries - activity_tab.expect_journal_notes(text: "First comment by admin") - activity_tab.expect_journal_notes(text: "Second comment by admin") - activity_tab.expect_journal_changed_attribute(text: "Subject") + # # expect all journal entries + # activity_tab.expect_journal_changed_attribute(text: "Subject") - activity_tab.filter_journals(:only_comments) + # activity_tab.filter_journals(:only_comments) - # expect only the comments - activity_tab.expect_journal_notes(text: "First comment by admin") - activity_tab.expect_journal_notes(text: "Second comment by admin") - activity_tab.expect_no_journal_changed_attribute(text: "Subject") + # # expect empty state + # activity_tab.expect_empty_state + # activity_tab.expect_no_journal_changed_attribute - activity_tab.filter_journals(:only_changes) + # activity_tab.filter_journals(:only_changes) - # expect only the changes - activity_tab.expect_no_journal_notes(text: "First comment by admin") - activity_tab.expect_no_journal_notes(text: "Second comment by admin") - activity_tab.expect_journal_changed_attribute(text: "Subject") + # # expect only the changes + # activity_tab.expect_no_empty_state + # activity_tab.expect_journal_changed_attribute(text: "Subject") - activity_tab.filter_journals(:all) + # activity_tab.filter_journals(:all) - # expect all journal entries - activity_tab.expect_journal_notes(text: "First comment by admin") - activity_tab.expect_journal_notes(text: "Second comment by admin") - activity_tab.expect_journal_changed_attribute(text: "Subject") + # # expect all journal entries + # activity_tab.expect_no_empty_state + # activity_tab.expect_journal_changed_attribute(text: "Subject") - # strip journal entries with comments and changesets down to the comments + # # filter for comments again + # activity_tab.filter_journals(:only_comments) - # creating a journal entry with both a comment and a changeset - activity_tab.add_comment(text: "Third comment by admin") - wp_page.update_attributes(subject: "A new subject!!!") # rubocop:disable Rails/ActiveRecordAliases - wp_page.expect_and_dismiss_toaster(message: "Successful update.") + # # expect empty state again + # activity_tab.expect_empty_state - latest_journal = work_package.journals.last + # # add a comment + # activity_tab.add_comment(text: "First comment by admin") - activity_tab.within_journal_entry(latest_journal) do - activity_tab.expect_journal_notes_header(text: "commented") - activity_tab.expect_journal_notes_header(text: admin.name) - activity_tab.expect_journal_notes(text: "Third comment by admin") - activity_tab.expect_journal_changed_attribute(text: "Subject") - activity_tab.expect_no_journal_details_header + # # the empty state should be removed + # activity_tab.expect_no_empty_state end + end - activity_tab.filter_journals(:only_comments) + context "when the work package has comments and changesets" do + before do + # for some reason the journal is set to the "Anonymous" + # although the work_package is created by the admin + # so we need to update the journal to the admin manually to simulate the real world case + work_package.journals.first.update!(user: admin) - activity_tab.within_journal_entry(latest_journal) do - activity_tab.expect_journal_notes_header(text: "commented") - activity_tab.expect_journal_notes_header(text: admin.name) - activity_tab.expect_journal_notes(text: "Third comment by admin") - activity_tab.expect_no_journal_changed_attribute - activity_tab.expect_no_journal_details_header + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + create(:work_package_journal, user: admin, notes: "Second comment by admin", journable: work_package, version: 3) + + wp_page.visit! + wp_page.wait_for_activity_tab end - activity_tab.filter_journals(:only_changes) + it "filters the activities based on type", :aggregate_failures do + # add a non-comment journal entry by changing the work package attributes + wp_page.update_attributes(subject: "A new subject") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") - activity_tab.within_journal_entry(latest_journal) do - activity_tab.expect_no_journal_notes_header - activity_tab.expect_no_journal_notes - activity_tab.expect_journal_details_header(text: "change") - activity_tab.expect_journal_details_header(text: admin.name) + # expect all journal entries + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:only_comments) + + # expect only the comments + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_no_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:only_changes) + + # expect only the changes + activity_tab.expect_no_journal_notes(text: "First comment by admin") + activity_tab.expect_no_journal_notes(text: "Second comment by admin") activity_tab.expect_journal_changed_attribute(text: "Subject") + + activity_tab.filter_journals(:all) + + # expect all journal entries + activity_tab.expect_journal_notes(text: "First comment by admin") + activity_tab.expect_journal_notes(text: "Second comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + + # strip journal entries with comments and changesets down to the comments + + # creating a journal entry with both a comment and a changeset + activity_tab.add_comment(text: "Third comment by admin") + wp_page.update_attributes(subject: "A new subject!!!") # rubocop:disable Rails/ActiveRecordAliases + wp_page.expect_and_dismiss_toaster(message: "Successful update.") + + latest_journal = work_package.journals.last + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_journal_notes_header(text: admin.name) + activity_tab.expect_journal_notes(text: "Third comment by admin") + activity_tab.expect_journal_changed_attribute(text: "Subject") + activity_tab.expect_no_journal_details_header + end + + activity_tab.filter_journals(:only_comments) + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_journal_notes_header(text: admin.name) + activity_tab.expect_journal_notes(text: "Third comment by admin") + activity_tab.expect_no_journal_changed_attribute + activity_tab.expect_no_journal_details_header + end + + activity_tab.filter_journals(:only_changes) + + activity_tab.within_journal_entry(latest_journal) do + activity_tab.expect_no_journal_notes_header + activity_tab.expect_no_journal_notes + activity_tab.expect_journal_details_header(text: "change") + activity_tab.expect_journal_details_header(text: admin.name) + activity_tab.expect_journal_changed_attribute(text: "Subject") + end end end end @@ -363,6 +416,350 @@ "First comment by admin", "Second comment by admin" ]) + + # expect a new comment to be added at the bottom + # when the sorting is set to asc + # + # creating a new comment + activity_tab.add_comment(text: "Third comment by admin") + + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "First comment by admin", + "Second comment by admin", + "Third comment by admin" + ]) + + activity_tab.set_journal_sorting(:desc) + activity_tab.add_comment(text: "Fourth comment by admin") + + expect(activity_tab.get_all_comments_as_arrary).to eq([ + "Fourth comment by admin", + "Third comment by admin", + "Second comment by admin", + "First comment by admin" + ]) + end + end + + describe "notification bubble" do + let(:work_package) { create(:work_package, project:, author: admin) } + let!(:first_comment_by_admin) do + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + end + let!(:journal_mentioning_admin) do + create(:work_package_journal, user: member, notes: "First comment by member mentioning @#{admin.name}", + journable: work_package, version: 3) + end + let!(:notificaton_for_admin) do + create(:notification, recipient: admin, resource: work_package, journal: journal_mentioning_admin, reason: :mentioned) + end + + context "when admin is visiting the work package" do + current_user { admin } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "shows the notification bubble", :aggregate_failures do + activity_tab.within_journal_entry(journal_mentioning_admin) do + activity_tab.expect_notification_bubble + end + end + + it "removes the notification bubble after the comment is read", :aggregate_failures do + notificaton_for_admin.update!(read_ian: true) + + wp_page.visit! + wp_page.wait_for_activity_tab + + activity_tab.within_journal_entry(journal_mentioning_admin) do + activity_tab.expect_no_notification_bubble + end + end end + + context "when member is visiting the work package" do + current_user { member } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does not show the notification bubble", :aggregate_failures do + activity_tab.within_journal_entry(journal_mentioning_admin) do + activity_tab.expect_no_notification_bubble + end + end + end + end + + describe "edit comments" do + let(:work_package) { create(:work_package, project:, author: admin) } + let!(:first_comment_by_admin) do + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + end + let!(:first_comment_by_member) do + create(:work_package_journal, user: member, notes: "First comment by member", journable: work_package, version: 3) + end + + context "when admin is visiting the work package" do + current_user { admin } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "can edit own comments", :aggregate_failures do + # edit own comment + activity_tab.edit_comment(first_comment_by_admin, text: "First comment by admin edited") + + # expect the edited comment to be shown + activity_tab.within_journal_entry(first_comment_by_admin) do + activity_tab.expect_journal_notes(text: "First comment by admin edited") + end + + # cannot edit other user's comment + # the edit button should not be shown + activity_tab.within_journal_entry(first_comment_by_member) do + page.find_test_selector("op-wp-journal-#{first_comment_by_member.id}-action-menu").click + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment_by_member.id}-edit") + end + end + end + end + + describe "quote comments" do + let(:work_package) { create(:work_package, project:, author: admin) } + let!(:first_comment_by_admin) do + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + end + let!(:first_comment_by_member) do + create(:work_package_journal, user: member, notes: "First comment by member", journable: work_package, version: 3) + end + + context "when admin is visiting the work package" do + current_user { admin } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "can quote other user's comments", :aggregate_failures do + # quote other user's comment + # not adding additional text in this spec to the spec as I didn't find a way to add text the editor component + activity_tab.quote_comment(first_comment_by_member) + + # expect the quoted comment to be shown + activity_tab.expect_journal_notes(text: "A Member wrote:\nFirst comment by member") + end + end + end + + describe "rescue editor content" do + let(:work_package) { create(:work_package, project:, author: admin) } + let(:second_work_package) { create(:work_package, project:, author: admin) } + + current_user { admin } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "rescues the editor content when navigating to another workpackage tab", :aggregate_failures do + # add a comment, but do not save it + activity_tab.add_comment(text: "First comment by admin", save: false) + + # navigate to another tab and back + page.find("li[data-tab-id=\"relations\"]").click + page.find("li[data-tab-id=\"activity\"]").click + + # expect the editor content to be rescued on the client side + within("#work-package-journal-form") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + editor.expect_value("First comment by admin") + # save the comment, which was rescued on the client side + page.find_test_selector("op-submit-work-package-journal-form").click + end + + # expect the comment to be added properly + activity_tab.expect_journal_notes(text: "First comment by admin") + end + + it "scopes the rescued content to the work package", :aggregate_failures do + # add a comment to the first work package, but do not save it + activity_tab.add_comment(text: "First comment by admin", save: false) + + # navigate to another tab in order to prevent the browser native confirm dialog of the unsaved changes + page.find("li[data-tab-id=\"relations\"]").click + + # navigate to the second work package + wp_page = Pages::FullWorkPackage.new(second_work_package, project) + wp_page.visit! + wp_page.wait_for_activity_tab + + # wait for the stimulus component to be mounted, TODO: get rid of static sleep + sleep 1 + # open the editor + page.find_by_id("open-work-package-journal-form").click + + # expect the editor content to be empty + within("#work-package-journal-form") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + editor.expect_value("") + end + end + + it "scopes the rescued content to the user", :aggregate_failures do + # add a comment to the first work package, but do not save it + activity_tab.add_comment(text: "First comment by admin", save: false) + + # navigate to another tab in order to prevent the browser native confirm dialog of the unsaved changes + page.find("li[data-tab-id=\"relations\"]").click + + logout + login_as(member) + + # navigate to the same workpackage, but as a different user + wp_page.visit! + wp_page.wait_for_activity_tab + + # wait for the stimulus component to be mounted, TODO: get rid of static sleep + sleep 1 + # open the editor + page.find_by_id("open-work-package-journal-form").click + + # expect the editor content to be empty + within("#work-package-journal-form") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + editor.expect_value("") + end + + logout + login_as(admin) + + # navigate to the same workpackage, but as a different user + wp_page.visit! + wp_page.wait_for_activity_tab + + # wait for the stimulus component to be mounted, TODO: get rid of static sleep + sleep 1 + + # expect the editor to be opened and content to be rescued for the correct user + within("#work-package-journal-form") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + editor.expect_value("First comment by admin") + end + end + end + + describe "auto scrolling" do + current_user { admin } + let(:work_package) { create(:work_package, project:, author: admin) } + + # create enough comments to make the journal container scrollable + 20.times do |i| + let!(:"comment_#{i + 1}") do + create(:work_package_journal, user: admin, notes: "Comment #{i + 1}", journable: work_package, version: i + 2) + end + end + + describe "scrolls to comment specified in the URL" do + context "when sorting set to asc" do + let!(:admin_preferences) { create(:user_preference, user: admin, others: { comments_sorting: :asc }) } + + before do + visit project_work_package_path(project, work_package.id, "activity", anchor: "activity-1") + wp_page.wait_for_activity_tab + end + + it "scrolls to the comment specified in the URL", :aggregate_failures do + sleep 1 # wait for auto scrolling to finish + activity_tab.expect_journal_container_at_position(50) # would be at the bottom if no anchor would be provided + end + end + + context "when sorting set to desc" do + let!(:admin_preferences) { create(:user_preference, user: admin, others: { comments_sorting: :desc }) } + + before do + visit project_work_package_path(project, work_package.id, "activity", anchor: "activity-1") + wp_page.wait_for_activity_tab + end + + it "scrolls to the comment specified in the URL", :aggregate_failures do + sleep 1 # wait for auto scrolling to finish + activity_tab.expect_journal_container_at_bottom # would be at the top if no anchor would be provided + end + end + end + + context "when sorting set to asc" do + let!(:admin_preferences) { create(:user_preference, user: admin, others: { comments_sorting: :asc }) } + + before do + # set WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS to 1000 + # to speed up the polling interval for test duration + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] = "1000" + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "scrolls to the bottom when the newest journal entry is on the bottom", :aggregate_failures do + sleep 1 # wait for auto scrolling to finish + activity_tab.expect_journal_container_at_bottom + + # auto-scrolls to the bottom when a new comment is added by the user + # add a comment + activity_tab.add_comment(text: "New comment by admin") + activity_tab.expect_journal_notes(text: "New comment by admin") # wait for the comment to be added + activity_tab.expect_journal_container_at_bottom + + # auto-scrolls to the bottom when a new comment is added by another user + # add a comment + latest_journal_version = work_package.journals.last.version + create(:work_package_journal, user: member, notes: "New comment by member", journable: work_package, + version: latest_journal_version + 1) + activity_tab.expect_journal_notes(text: "New comment by member") # wait for the comment to be added + sleep 1 # wait for auto scrolling to finish + activity_tab.expect_journal_container_at_bottom + end + end + + context "when sorting set to desc" do + let!(:admin_preferences) { create(:user_preference, user: admin, others: { comments_sorting: :desc }) } + + before do + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does not scroll to the bottom as the newest journal entry is on the top", :aggregate_failures do + sleep 1 # wait for auto scrolling to finish + activity_tab.expect_journal_container_at_top + end + end + + # describe "scrolling to the bottom when sorting set to asc" do + # it "scrolls to the bottom when the oldest journal entry is on top", :aggregate_failures do + # # add a comment + # activity_tab.add_comment(text: "First comment by admin") + + # # scroll to the top + # page.execute_script("document.querySelector('.op-wp-journals-container').scrollTop = 0") + + # # add another comment + # activity_tab.add_comment(text: "Second comment by admin") + + # # expect the oldest comment to be at the bottom + # activity_tab.expect_journal_notes(text: "First comment by admin") + # end + # end end end diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index 10ae9058ee66..5bc96894f167 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -107,7 +107,43 @@ def expect_journal_notes(text: nil) expect(page).to have_css(".journal-notes-body", text:) end - def add_comment(text: nil) + def expect_notification_bubble + expect(page).to have_test_selector("user-activity-bubble") + end + + def expect_no_notification_bubble + expect(page).not_to have_test_selector("user-activity-bubble") + end + + def expect_journal_container_at_bottom + scroll_position = page.evaluate_script('document.querySelector(".tabcontent").scrollTop') + scroll_height = page.evaluate_script('document.querySelector(".tabcontent").scrollHeight') + client_height = page.evaluate_script('document.querySelector(".tabcontent").clientHeight') + + expect(scroll_position).to be_within(10).of(scroll_height - client_height) + end + + def expect_journal_container_at_top + scroll_position = page.evaluate_script('document.querySelector(".tabcontent").scrollTop') + + expect(scroll_position).to eq(0) + end + + def expect_journal_container_at_position(position) + scroll_position = page.evaluate_script('document.querySelector(".tabcontent").scrollTop') + + expect(scroll_position).to be_within(50).of(scroll_position - position) + end + + def expect_empty_state + expect(page).to have_test_selector("op-wp-journals-container-empty") + end + + def expect_no_empty_state + expect(page).not_to have_test_selector("op-wp-journals-container-empty") + end + + def add_comment(text: nil, save: true) # TODO: get rid of static sleep sleep 1 # otherwise the stimulus component is not mounted yet and the click does not work @@ -119,14 +155,46 @@ def add_comment(text: nil) within("#work-package-journal-form") do FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) - page.find_test_selector("op-submit-work-package-journal-form").click + page.find_test_selector("op-submit-work-package-journal-form").click if save end - page.within_test_selector("op-wp-journals-container") do + if save + page.within_test_selector("op-wp-journals-container") do + expect(page).to have_text(text) + end + end + end + + def edit_comment(journal, text: nil) + within_journal_entry(journal) do + page.find_test_selector("op-wp-journal-#{journal.id}-action-menu").click + page.find_test_selector("op-wp-journal-#{journal.id}-edit").click + + within("#work-package-journal-form") do + FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) + page.find_test_selector("op-submit-work-package-journal-form").click + end + expect(page).to have_text(text) end end + def quote_comment(journal) + # TODO: get rid of static sleep + sleep 1 # otherwise the stimulus component is not mounted yet and the click does not work + + within_journal_entry(journal) do + page.find_test_selector("op-wp-journal-#{journal.id}-action-menu").click + page.find_test_selector("op-wp-journal-#{journal.id}-quote").click + end + + expect(page).to have_css("#work-package-journal-form") + + within("#work-package-journal-form") do + page.find_test_selector("op-submit-work-package-journal-form").click + end + end + def get_all_comments_as_arrary page.all(".journal-notes-body").map(&:text) end From 8c4811ce11724e78473b60359a5e9e4bc6fb8387 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 14:58:17 +0200 Subject: [PATCH 041/120] cleanup temp test code --- spec/features/activities/work_package/activities_spec.rb | 4 ---- 1 file changed, 4 deletions(-) diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 1250f08ecb8c..851aede3fee3 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -240,10 +240,6 @@ current_user { admin } let(:work_package) { create(:work_package, project:, author: admin) } - it "is true" do - expect(true).to be_truthy - end - context "when the work package has no comments" do before do # for some reason the journal is set to the "Anonymous" From 228f95aedf26fa55134b4d8d8307403347fefe6b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 15:52:43 +0200 Subject: [PATCH 042/120] fixing eslint issues --- .../work-package-comment.component.ts | 4 ++-- .../work-packages/activities-tab/index.controller.ts | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts index 151b984fa50a..c2876c5c0387 100644 --- a/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts +++ b/frontend/src/app/features/work-packages/components/work-package-comment/work-package-comment.component.ts @@ -55,7 +55,6 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service import { filter, take, - timeout, } from 'rxjs/operators'; @Component({ @@ -102,7 +101,8 @@ export class WorkPackageCommentComponent extends WorkPackageCommentFieldHandler protected toastService:ToastService, protected cdRef:ChangeDetectorRef, protected I18n:I18nService, - readonly PathHelper:PathHelperService) { + readonly PathHelper:PathHelperService, + ) { super(elementRef, injector); } diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 31786be007da..cddfd54c27cb 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -4,8 +4,6 @@ import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; -import { workPackageFilesCount } from 'core-app/features/work-packages/components/wp-tabs/services/wp-tabs/wp-files-count.function'; -import { set } from 'lodash'; export default class IndexController extends Controller { static values = { @@ -79,7 +77,7 @@ export default class IndexController extends Controller { if (document.hidden) { this.stopPolling(); } else { - this.updateActivitiesList(); + void this.updateActivitiesList(); this.startPolling(); } } @@ -97,7 +95,7 @@ export default class IndexController extends Controller { return window.setInterval(() => this.updateActivitiesList(), this.pollingIntervalInMsValue); } - async handleWorkPackageUpdate(event:Event) { + handleWorkPackageUpdate(_event:Event):void { setTimeout(() => this.updateActivitiesList(), 2000); } @@ -209,8 +207,10 @@ export default class IndexController extends Controller { editor.editing.view.document, 'keydown', (event, data) => { + // taken from op-ck-editor.component.ts + // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison if ((data.ctrlKey || data.metaKey) && data.keyCode === KeyCodes.ENTER) { - this.onSubmit(); + void this.onSubmit(); event.stop(); } }, @@ -239,6 +239,7 @@ export default class IndexController extends Controller { // current limitation: // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore setTimeout(() => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access if (!editor.ui.focusTracker.isFocused) { this.hideEditorIfEmpty(); if (this.isMobile()) { this.scrollInputContainerIntoView(300); } From 128843556cbc149091938caae87d47eec59130b6 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 15:56:02 +0200 Subject: [PATCH 043/120] enable primerized workpackages feature flag in ci --- spec/features/activities/work_package/activities_spec.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 851aede3fee3..e47d1ac0590d 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -28,7 +28,7 @@ require "spec_helper" -RSpec.describe "Work package activity", :js, :with_cuprite do +RSpec.describe "Work package activity", :js, :with_cuprite, with_flag: { primerized_work_package_activities: true } do let(:project) { create(:project) } let(:admin) { create(:admin) } let(:member_role) do From 2717246c9ae3a61e092b5f47251bbfe95bb50efa Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 18:46:14 +0200 Subject: [PATCH 044/120] reenabled and fixed failing spec --- .../journals/empty_component.html.erb | 2 +- .../work_package/activities_spec.rb | 55 +++++++++---------- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/empty_component.html.erb b/app/components/work_packages/activities_tab/journals/empty_component.html.erb index 44ca1c5e5386..8cf6a4360240 100644 --- a/app/components/work_packages/activities_tab/journals/empty_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/empty_component.html.erb @@ -1,6 +1,6 @@ <%= component_wrapper do - render(Primer::Beta::Blankslate.new(border: true, data: { test_selector: "op-wp-journals-container-empty "})) do |component| + render(Primer::Beta::Blankslate.new(border: true, data: { test_selector: "op-wp-journals-container-empty"})) do |component| component.with_visual_icon(icon: :pulse) component.with_heading(tag: :h2).with_content(t("activities.work_packages.activity_tab.no_results_title_text")) component.with_description { t("activities.work_packages.activity_tab.no_results_description_text") } diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index e47d1ac0590d..2024bbb1ce44 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -251,45 +251,42 @@ wp_page.wait_for_activity_tab end - it "filters the activities based on type and shows an empty state", :aggregate_failures do - expect(true).to be_truthy - # sleep 60 - # # add a non-comment journal entry by changing the work package attributes - # wp_page.update_attributes(subject: "A new subject") - # wp_page.expect_and_dismiss_toaster(message: "Successful update.") + it "filters the activities based on type and shows an empty state" do + # expect no empty state due to the initial journal entry + activity_tab.expect_no_empty_state + # expect the initial journal entry to be shown + activity_tab.expect_journal_details_header(text: "created") - # # expect all journal entries - # activity_tab.expect_journal_changed_attribute(text: "Subject") - - # activity_tab.filter_journals(:only_comments) + activity_tab.filter_journals(:only_comments) - # # expect empty state - # activity_tab.expect_empty_state - # activity_tab.expect_no_journal_changed_attribute + # expect empty state + activity_tab.expect_empty_state + activity_tab.expect_no_journal_details_header(text: "created") - # activity_tab.filter_journals(:only_changes) + activity_tab.filter_journals(:only_changes) - # # expect only the changes - # activity_tab.expect_no_empty_state - # activity_tab.expect_journal_changed_attribute(text: "Subject") + # expect only the changes + activity_tab.expect_no_empty_state + activity_tab.expect_journal_details_header(text: "created") - # activity_tab.filter_journals(:all) + activity_tab.filter_journals(:all) - # # expect all journal entries - # activity_tab.expect_no_empty_state - # activity_tab.expect_journal_changed_attribute(text: "Subject") + # expect all journal entries + activity_tab.expect_no_empty_state + activity_tab.expect_journal_details_header(text: "created") - # # filter for comments again - # activity_tab.filter_journals(:only_comments) + # filter for comments again + activity_tab.filter_journals(:only_comments) - # # expect empty state again - # activity_tab.expect_empty_state + # expect empty state again + activity_tab.expect_empty_state + activity_tab.expect_no_journal_details_header(text: "created") - # # add a comment - # activity_tab.add_comment(text: "First comment by admin") + # add a comment + activity_tab.add_comment(text: "First comment by admin") - # # the empty state should be removed - # activity_tab.expect_no_empty_state + # the empty state should be removed + activity_tab.expect_no_empty_state end end From 87ec0dab32fff513e6b0c6b8e39f8b14187c758c Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 19:05:20 +0200 Subject: [PATCH 045/120] refactored to resolve rubocop issues --- .../activities_tab/index_component.rb | 4 +- .../journals/empty_component.rb | 4 - .../activities_tab/journals/item_component.rb | 2 +- .../journals/item_component/details.rb | 167 +++++++++++------- .../activities_tab_controller.rb | 44 ++--- 5 files changed, 133 insertions(+), 88 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index e957fcb19f49..b6db9d8bf169 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -51,7 +51,9 @@ def wrapper_data_attributes test_selector: "op-wp-activity-tab", controller: "work-packages--activities-tab--index", "application-target": "dynamic", - "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url(work_package), + "work-packages--activities-tab--index-update-streams-url-value": update_streams_work_package_activities_url( + work_package + ), "work-packages--activities-tab--index-sorting-value": journal_sorting, "work-packages--activities-tab--index-filter-value": filter, "work-packages--activities-tab--index-user-id-value": User.current.id, diff --git a/app/components/work_packages/activities_tab/journals/empty_component.rb b/app/components/work_packages/activities_tab/journals/empty_component.rb index 65e96f34c834..dc3c28904ba9 100644 --- a/app/components/work_packages/activities_tab/journals/empty_component.rb +++ b/app/components/work_packages/activities_tab/journals/empty_component.rb @@ -35,10 +35,6 @@ class EmptyComponent < ApplicationComponent include ApplicationHelper include OpPrimer::ComponentHelpers include OpTurbo::Streamable - - def initialize - super - end end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 91ee523f9f11..b134ae47264c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -145,7 +145,7 @@ def bubble_html class=\"comments-number--bubble op-bubble op-bubble_mini\" data-test-selector=\"user-activity-bubble\" > - ".html_safe + ".html_safe # rubocop:disable Rails/OutputSafety end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index ca2bca1fb979..f6ae6bfd4ec1 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -58,81 +58,126 @@ def render_details_header(details_container) justify_content: :space_between, classes: "journal-details-header-container", id: "activity-#{journal.version}") do |header_container| - header_container.with_column(flex_layout: true, - classes: "journal-details-header") do |header_start_container| - header_start_container.with_column(mr: 2, classes: "timeline-icon") do - if journal.initial? - render Primer::Beta::Octicon.new(icon: "diff-added", size: :small, "aria-label": "Add", color: :subtle) - else - render Primer::Beta::Octicon.new(icon: "diff-modified", size: :small, "aria-label": "Change", color: :subtle) - end - end - header_start_container.with_column(mr: 2) do - render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) - end - header_start_container.with_column(mr: 1, flex_layout: true) do |user_name_container| - user_name_container.with_row do - truncated_user_name(journal.user) - end - user_name_container.with_row(classes: "hidden-for-desktop") do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } - end - end - header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do - if journal.initial? - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do - t("activities.work_packages.activity_tab.created_on") - end - else - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do - t("activities.work_packages.activity_tab.changed_on") - end - end - end - header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } - end + render_header_start(header_container) + render_header_end(header_container) + end + end + + def render_header_start(header_container) + header_container.with_column(flex_layout: true, classes: "journal-details-header") do |header_start_container| + render_timeline_icon(header_start_container) + render_user_avatar(header_start_container) + render_user_name_and_time(header_start_container) + render_created_or_changed_on_text(header_start_container) + render_updated_time(header_start_container) + end + end + + def render_timeline_icon(container) + container.with_column(mr: 2, classes: "timeline-icon") do + icon_name = journal.initial? ? "diff-added" : "diff-modified" + render Primer::Beta::Octicon.new(icon: icon_name, size: :small, "aria-label": icon_aria_label, color: :subtle) + end + end + + def render_user_avatar(container) + container.with_column(mr: 2) do + render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) + end + end + + def render_user_name_and_time(container) + container.with_column(mr: 1, flex_layout: true) do |user_name_container| + user_name_container.with_row { truncated_user_name(journal.user) } + user_name_container.with_row(classes: "hidden-for-desktop") do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } end - header_container.with_column(flex_layout: true) do |header_end_container| - if has_unread_notifications - header_end_container.with_column(mr: 2, classes: "bubble-container") do - bubble_html - end - end - header_end_container.with_column(pr: 3) do - render(Primer::Beta::Link.new( - href: activity_anchor, - scheme: :secondary, - underline: false, - font_size: :small, - data: { turbo: false } - )) do - "##{journal.version}" - end - end + end + end + + def render_created_or_changed_on_text(container) + container.with_column(mr: 1, classes: "hidden-for-mobile") do + text_key = journal.initial? ? "activities.work_packages.activity_tab.created_on" : "activities.work_packages.activity_tab.changed_on" + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { t(text_key) } + end + end + + def render_updated_time(container) + container.with_column(mr: 1, classes: "hidden-for-mobile") do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end + end + + def render_header_end(header_container) + header_container.with_column(flex_layout: true) do |header_end_container| + render_notification_bubble(header_end_container) if has_unread_notifications + render_activity_link(header_end_container) + end + end + + def render_notification_bubble(container) + container.with_column(mr: 2, classes: "bubble-container") do + bubble_html + end + end + + def render_activity_link(container) + container.with_column(pr: 3) do + render(Primer::Beta::Link.new( + href: activity_anchor, + scheme: :secondary, + underline: false, + font_size: :small, + data: { turbo: false } + )) do + "##{journal.version}" end end end + def icon_aria_label + journal.initial? ? "Add" : "Change" + end + def render_details(details_container) - return if journal.initial? && journal_sorting == "desc" + return if skip_rendering_details? details_container.with_row(flex_layout: true, pt: 1, pb: 3) do |details_container_inner| if journal.initial? render_empty_line(details_container_inner) else - journal.details.each do |detail| - details_container_inner.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| - detail_container.with_column(classes: "journal-detail-stem-line") - detail_container.with_column(pl: 1, font_size: :small) do - render(Primer::Beta::Text.new(classes: "journal-detail-description")) { journal.render_detail(detail) } - end - end - end + render_journal_details(details_container_inner) end end end + def skip_rendering_details? + journal.initial? && journal_sorting == "desc" + end + + def render_journal_details(details_container_inner) + journal.details.each do |detail| + render_single_detail(details_container_inner, detail) + end + end + + def render_single_detail(container, detail) + container.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| + render_stem_line(detail_container) + render_detail_description(detail_container, detail) + end + end + + def render_stem_line(container) + container.with_column(classes: "journal-detail-stem-line") + end + + def render_detail_description(container, detail) + container.with_column(pl: 1, font_size: :small) do + render(Primer::Beta::Text.new(classes: "journal-detail-description")) { journal.render_detail(detail) } + end + end + def render_empty_line(details_container) details_container.with_row(my: 1, font_size: :small, classes: "empty-line") end @@ -143,7 +188,7 @@ def bubble_html class=\"comments-number--bubble op-bubble op-bubble_mini\" data-test-selector=\"user-activity-bubble\" > - ".html_safe + ".html_safe # rubocop:disable Rails/OutputSafety end def activity_anchor diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index d435bdddbb0f..ca135be1a8fa 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -97,26 +97,14 @@ def cancel_edit end def create - ### taken from ActivitiesByWorkPackageAPI - call = AddWorkPackageNoteService - .new(user: User.current, - work_package: @work_package) - .call(journal_params[:notes], - send_notifications: !(params.has_key?(:notify) && params[:notify] == "false")) - ### + call = create_notification_service_call if call.success? && call.result if call.result.initial? # we need to update the whole item component for an initial journal entry # and not just the show part as happens in the time based update # as this part is not rendered for initial journal - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: call.result, - state: :show, - filter: params[:filter]&.to_sym || :all - ) - ) + update_item_component(call.result, state: :show, filter: params[:filter]&.to_sym || :all) end generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) end @@ -130,13 +118,7 @@ def update ) if call.success? && call.result - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: call.result, - state: :show, - filter: params[:filter]&.to_sym || :all - ) - ) + update_item_component(call.result, state: :show, filter: params[:filter]&.to_sym || :all) end # TODO: handle errors @@ -186,6 +168,26 @@ def journal_params params.require(:journal).permit(:notes) end + def create_notification_service_call + ### taken from ActivitiesByWorkPackageAPI + call = AddWorkPackageNoteService + .new(user: User.current, + work_package: @work_package) + .call(journal_params[:notes], + send_notifications: !(params.has_key?(:notify) && params[:notify] == "false")) + ### + end + + def update_item_component(journal, state: :show, filter: :all) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal:, + state:, + filter: + ) + ) + end + def generate_time_based_update_streams(last_update_timestamp, filter) filter = filter&.to_sym || :all # TODO: prototypical implementation From 75a358fc9298bec7f83b8ee8e214f1e7b275ace8 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 20 Aug 2024 19:14:58 +0200 Subject: [PATCH 046/120] more refactorings to resolve rubocop issues --- .../activities_tab/journals/item_component/details.rb | 6 +++++- app/controllers/work_packages/activities_tab_controller.rb | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index f6ae6bfd4ec1..1a6a3e624caa 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -97,7 +97,11 @@ def render_user_name_and_time(container) def render_created_or_changed_on_text(container) container.with_column(mr: 1, classes: "hidden-for-mobile") do - text_key = journal.initial? ? "activities.work_packages.activity_tab.created_on" : "activities.work_packages.activity_tab.changed_on" + text_key = if journal.initial? + "activities.work_packages.activity_tab.created_on" + else + "activities.work_packages.activity_tab.changed_on" + end render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { t(text_key) } end end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index ca135be1a8fa..e98ee8e828ac 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -170,7 +170,7 @@ def journal_params def create_notification_service_call ### taken from ActivitiesByWorkPackageAPI - call = AddWorkPackageNoteService + AddWorkPackageNoteService .new(user: User.current, work_package: @work_package) .call(journal_params[:notes], From d5ca1a5fee201b541b6edf19b6955b33d839c4e5 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 12:14:57 +0200 Subject: [PATCH 047/120] fixed ckeditor bottom margin --- .../work_packages/activities_tab/journals/new_component.sass | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index b6ce4937ca25..da0585d71b16 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -22,4 +22,7 @@ overflow-y: auto border-radius: var(--borderRadius-medium) margin: 5px + // overwrites margin bottom defined in _ckeditor.sass:13 + opce-ckeditor-augmented-textarea .op-ckeditor--wrapper + margin-bottom: 0px From 6759bd9528efd75dac9cddaeaedbf83633d993a4 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 13:58:33 +0200 Subject: [PATCH 048/120] hide stem connection when empty --- app/components/_index.sass | 1 + .../activities_tab/index_component.html.erb | 1 - .../journals/empty_component.html.erb | 4 ++- .../journals/index_component.html.erb | 31 +++++++++++-------- .../journals/index_component.rb | 4 +++ .../journals/index_component.sass | 14 +++++++++ 6 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 app/components/work_packages/activities_tab/journals/index_component.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index 81bcd67ecd62..e48d5a692ae7 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -1,5 +1,6 @@ @import "work_packages/activities_tab/index_component" @import "work_packages/activities_tab/journals/new_component" +@import "work_packages/activities_tab/journals/index_component" @import "work_packages/activities_tab/journals/item_component" @import "work_packages/activities_tab/journals/item_component/edit" @import "work_packages/activities_tab/journals/item_component/details" diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index d1638b38766f..10af70e19db3 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -20,7 +20,6 @@ WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end - journals_wrapper_container.with_row(id: "stem-connection") journals_wrapper_container.with_row( id: "input-container", classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position diff --git a/app/components/work_packages/activities_tab/journals/empty_component.html.erb b/app/components/work_packages/activities_tab/journals/empty_component.html.erb index 8cf6a4360240..e5fbf2c325f1 100644 --- a/app/components/work_packages/activities_tab/journals/empty_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/empty_component.html.erb @@ -1,6 +1,8 @@ <%= component_wrapper do - render(Primer::Beta::Blankslate.new(border: true, data: { test_selector: "op-wp-journals-container-empty"})) do |component| + render(Primer::Beta::Blankslate.new( + border: true, + data: { test_selector: "op-wp-journals-container-empty"})) do |component| component.with_visual_icon(icon: :pulse) component.with_heading(tag: :h2).with_content(t("activities.work_packages.activity_tab.no_results_title_text")) component.with_description { t("activities.work_packages.activity_tab.no_results_description_text") } diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index 3efbaa9db68e..f58f56041290 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,20 +1,25 @@ <%= component_wrapper do - flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| - if filter == :only_comments && journal_with_notes.empty? - journals_index_container.with_row(mt: 2) do - render( - WorkPackages::ActivitiesTab::Journals::EmptyComponent.new() - ) - end - end - journals.each do |journal| - journals_index_container.with_row do - render( - WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) - ) + flex_layout do |journals_index_wrapper_container| + journals_index_wrapper_container.with_row(id: "wp-journals-inner-container") do + flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| + if empty_state? + journals_index_container.with_row(mt: 2) do + render( + WorkPackages::ActivitiesTab::Journals::EmptyComponent.new() + ) + end + end + journals.each do |journal| + journals_index_container.with_row do + render( + WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) + ) + end + end end end + journals_index_wrapper_container.with_row(id: "wp-stem-connection") unless empty_state? end end %> diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index 43ed24ab5ecd..bcb495345324 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -66,6 +66,10 @@ def journals def journal_with_notes journals.where.not(notes: "") end + + def empty_state? + filter == :only_comments && journal_with_notes.empty? + end end end end diff --git a/app/components/work_packages/activities_tab/journals/index_component.sass b/app/components/work_packages/activities_tab/journals/index_component.sass new file mode 100644 index 000000000000..bc33e929f1f3 --- /dev/null +++ b/app/components/work_packages/activities_tab/journals/index_component.sass @@ -0,0 +1,14 @@ +#work-packages-activities-tab-journals-index-component + #wp-journals-inner-container + z-index: 10 + #wp-stem-connection + @media screen and (min-width: $breakpoint-xl) + position: absolute + z-index: 9 + border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-default) + margin-left: 19px + margin-top: 20px + height: 100vh + @media screen and (max-width: $breakpoint-xl) + display: none + From 64c6494e3afb6a3dbdf583b026d3d7f75d5a3ee2 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 14:24:22 +0200 Subject: [PATCH 049/120] refactored and fixed stem behaviour for filter states --- .../journals/index_component.html.erb | 2 +- .../journals/item_component/details.html.erb | 35 +++++++++++-------- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index f58f56041290..b61c695ab059 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -4,7 +4,7 @@ journals_index_wrapper_container.with_row(id: "wp-journals-inner-container") do flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| if empty_state? - journals_index_container.with_row(mt: 2) do + journals_index_container.with_row(mt: 2, mb: 3) do render( WorkPackages::ActivitiesTab::Journals::EmptyComponent.new() ) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 5d1420533426..2740ce426bc9 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -1,26 +1,31 @@ -<%= - component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do - if journal.details.any? && filter != :only_comments +<%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do + case filter + when :only_comments + flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| + render_empty_line(details_container) unless journal.initial? + end + when :only_changes + if journal.details.any? flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| - if journal.notes.present? && filter != :only_changes + render_details_header(details_container) + render_details(details_container) + end + end + else # :all or any other state + flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| + if journal.details.any? + if journal.notes.present? render_details(details_container) else render_details_header(details_container) render_details(details_container) end - end - elsif journal.details.empty? - unless filter == :only_changes - flex_layout(my: 0, border: :left, classes: "journal-details-container journal-details-container--empty--#{journal_sorting}") do |details_container| - # empty row to render the flex layout with its minimal height - render_empty_line(details_container) - end - end - else - flex_layout(my: 0, border: :left, classes: "journal-details-container journal-details-container--empty--#{journal_sorting}") do |details_container| + elsif journal.notes.present? + render_details(details_container) + else # empty row to render the flex layout with its minimal height render_empty_line(details_container) end end end -%> +end %> \ No newline at end of file From 47ae87f8d08658947c2ff682cfc6ea6266d16139 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 16:11:36 +0200 Subject: [PATCH 050/120] auto-reset filter when adding a comment which would not be visible, minor refactoring --- .../activities_tab_controller.rb | 89 ++++++++++++------- .../work_package/activities_spec.rb | 14 +++ 2 files changed, 69 insertions(+), 34 deletions(-) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index e98ee8e828ac..eef44720a279 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -34,31 +34,30 @@ class WorkPackages::ActivitiesTabController < ApplicationController before_action :find_work_package before_action :find_project before_action :find_journal, only: %i[edit cancel_edit update] + before_action :set_filter before_action :authorize def index render( WorkPackages::ActivitiesTab::IndexComponent.new( work_package: @work_package, - filter: params[:filter]&.to_sym || :all + filter: @filter ), layout: false ) end def update_filter - filter = params[:filter]&.to_sym || :all - update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( work_package: @work_package, - filter: + filter: @filter ) ) update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package, - filter: + filter: @filter ) ) @@ -66,7 +65,7 @@ def update_filter end def update_streams - generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) + generate_time_based_update_streams(params[:last_update_timestamp]) respond_with_turbo_streams end @@ -77,7 +76,7 @@ def edit component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: @journal, state: :edit, - filter: params[:filter]&.to_sym || :all + filter: @filter ) ) @@ -89,7 +88,7 @@ def cancel_edit component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal: @journal, state: :show, - filter: params[:filter]&.to_sym || :all + filter: @filter ) ) @@ -100,13 +99,7 @@ def create call = create_notification_service_call if call.success? && call.result - if call.result.initial? - # we need to update the whole item component for an initial journal entry - # and not just the show part as happens in the time based update - # as this part is not rendered for initial journal - update_item_component(call.result, state: :show, filter: params[:filter]&.to_sym || :all) - end - generate_time_based_update_streams(params[:last_update_timestamp], params[:filter]) + handle_successful_create_call(call) end respond_with_turbo_streams @@ -118,7 +111,7 @@ def update ) if call.success? && call.result - update_item_component(call.result, state: :show, filter: params[:filter]&.to_sym || :all) + update_item_component(call.result, state: :show) end # TODO: handle errors @@ -126,8 +119,6 @@ def update end def update_sorting - filter = params[:filter]&.to_sym || :all - call = Users::UpdateService.new(user: User.current, model: User.current).call( pref: { comments_sorting: params[:sorting] } ) @@ -135,12 +126,7 @@ def update_sorting if call.success? # update the whole tab to reflect the new sorting in all components # we need to call replace in order to properly re-init the index stimulus component - replace_via_turbo_stream( - component: WorkPackages::ActivitiesTab::IndexComponent.new( - work_package: @work_package, - filter: - ) - ) + replace_whole_tab end respond_with_turbo_streams @@ -160,6 +146,10 @@ def find_journal @journal = Journal.find(params[:id]) end + def set_filter + @filter = params[:filter]&.to_sym || :all + end + def journal_sorting User.current.preference&.comments_sorting || "desc" end @@ -168,6 +158,38 @@ def journal_params params.require(:journal).permit(:notes) end + def handle_successful_create_call(call) + if @filter == :only_changes + handle_only_changes_filter_on_create + else + handle_other_filters_on_create(call) + end + end + + def handle_only_changes_filter_on_create + @filter = :all # reset filter + # we need to update the whole tab in order to reset the filter + # as the added journal would not be shown otherwise + replace_whole_tab + end + + def handle_other_filters_on_create(call) + if call.result.initial? + update_item_component(call.result, state: :show) + else + generate_time_based_update_streams(params[:last_update_timestamp]) + end + end + + def replace_whole_tab + replace_via_turbo_stream( + component: WorkPackages::ActivitiesTab::IndexComponent.new( + work_package: @work_package, + filter: @filter + ) + ) + end + def create_notification_service_call ### taken from ActivitiesByWorkPackageAPI AddWorkPackageNoteService @@ -178,22 +200,21 @@ def create_notification_service_call ### end - def update_item_component(journal, state: :show, filter: :all) + def update_item_component(journal, state: :show) update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal:, state:, - filter: + filter: @filter ) ) end - def generate_time_based_update_streams(last_update_timestamp, filter) - filter = filter&.to_sym || :all + def generate_time_based_update_streams(last_update_timestamp) # TODO: prototypical implementation journals = @work_package.journals - if filter == :only_comments + if @filter == :only_comments journals = journals.where.not(notes: "") end @@ -202,14 +223,14 @@ def generate_time_based_update_streams(last_update_timestamp, filter) # we need to update the whole component as the show part is not rendered for journals which originally have no notes component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal:, - filter: + filter: @filter ) ) # TODO: is it possible to loose an edit state this way? end journals.where("created_at > ?", last_update_timestamp).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal, filter) + append_or_prepend_latest_journal_via_turbo_stream(journal) end if journals.any? @@ -217,13 +238,13 @@ def generate_time_based_update_streams(last_update_timestamp, filter) end end - def append_or_prepend_latest_journal_via_turbo_stream(journal, filter) + def append_or_prepend_latest_journal_via_turbo_stream(journal) target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package, - filter: + filter: @filter ) - component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter:) + component = WorkPackages::ActivitiesTab::Journals::ItemComponent.new(journal:, filter: @filter) stream_config = { target_component:, diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 2024bbb1ce44..771a5bfe3c68 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -370,6 +370,20 @@ activity_tab.expect_journal_changed_attribute(text: "Subject") end end + + it "resets an only_changes filter if a comment is added by the user", :aggregate_failures do + activity_tab.filter_journals(:only_changes) + + # expect only the changes + activity_tab.expect_no_journal_notes(text: "First comment by admin") + activity_tab.expect_no_journal_notes(text: "Second comment by admin") + + # add a comment + activity_tab.add_comment(text: "Third comment by admin") + + # the only_changes filter should be reset + activity_tab.expect_journal_notes(text: "Third comment by admin") + end end end From 66014cd76a11495b56f6465e1426c9ba696210f6 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 16:18:12 +0200 Subject: [PATCH 051/120] text adjustments as requested by Parimal --- config/locales/en.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index 56561033ff73..ffc91b2b6d92 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -34,8 +34,8 @@ en: no_results_title_text: There has not been any activity for the project within this time frame. work_packages: activity_tab: - no_results_title_text: Nothing to display - no_results_description_text: "Try to update your filter to see more." + no_results_title_text: No activity to display + no_results_description_text: "Choose \"Show everything\" to show all activity and comments" label_activity_show_all: "Show everything" label_activity_show_only_comments: "Show comments only" label_activity_show_only_changes: "Show changes only" From 077593fd727f25dcbac655d955533cb1dff14834 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 27 Aug 2024 18:03:09 +0200 Subject: [PATCH 052/120] fixed margin bottom for desc sorting --- .../activities_tab/journals/index_component.html.erb | 2 +- .../activities_tab/journals/index_component.rb | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index b61c695ab059..c600de950bac 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,7 +1,7 @@ <%= component_wrapper do flex_layout do |journals_index_wrapper_container| - journals_index_wrapper_container.with_row(id: "wp-journals-inner-container") do + journals_index_wrapper_container.with_row(id: "wp-journals-inner-container", mb: inner_container_margin_bottom) do flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| if empty_state? journals_index_container.with_row(mt: 2, mb: 3) do diff --git a/app/components/work_packages/activities_tab/journals/index_component.rb b/app/components/work_packages/activities_tab/journals/index_component.rb index bcb495345324..3e503df4334b 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.rb +++ b/app/components/work_packages/activities_tab/journals/index_component.rb @@ -70,6 +70,14 @@ def journal_with_notes def empty_state? filter == :only_comments && journal_with_notes.empty? end + + def inner_container_margin_bottom + if journal_sorting == "desc" + 3 + else + 0 + end + end end end end From 205af10a4a4e91af4bdd68e1acc77077e0100def Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 28 Aug 2024 12:38:24 +0200 Subject: [PATCH 053/120] fixed permissions, handle permissions on UI, added permission specs --- .../activities_tab/index_component.html.erb | 34 ++-- .../activities_tab/index_component.rb | 4 + .../journals/item_component.html.erb | 4 +- .../activities_tab/journals/item_component.rb | 21 ++- .../journals/new_component.html.erb | 2 +- .../activities_tab/journals/new_component.rb | 2 + config/initializers/permissions.rb | 14 +- .../work_package/activities_spec.rb | 176 +++++++++++++++++- .../components/work_packages/activities.rb | 8 + 9 files changed, 236 insertions(+), 29 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 10af70e19db3..bfd5bc31fa5e 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -20,22 +20,24 @@ WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) ) end - journals_wrapper_container.with_row( - id: "input-container", - classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position - mt: 3, - mb: [3, nil, nil, nil, 0], - pt: 2, - pb: 2, - pl: 3, - pr: [3, nil, nil, nil, 2], - border: [nil, nil, nil, nil, :top], - border_radius: [2, nil, nil, nil, 0], - bg: :subtle - ) do - render( - WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) - ) + if adding_comment_allowed? + journals_wrapper_container.with_row( + id: "input-container", + classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position + mt: 3, + mb: [3, nil, nil, nil, 0], + pt: 2, + pb: 2, + pl: 3, + pr: [3, nil, nil, nil, 2], + border: [nil, nil, nil, nil, :top], + border_radius: [2, nil, nil, nil, 0], + bg: :subtle + ) do + render( + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + ) + end end end end diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index b6db9d8bf169..c08331b9d62b 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -69,6 +69,10 @@ def journal_sorting def polling_interval ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] || 10000 end + + def adding_comment_allowed? + User.current.allowed_in_project?(:add_work_package_notes, @work_package.project) + end end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index e3928b9cc3cb..35292b2e3f06 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -48,8 +48,8 @@ 'aria-label': I18n.t(:button_actions), scheme: :invisible) copy_url_action_item(menu) - edit_action_item(menu) if editable? - quote_action_item(menu) if journal.notes.present? + edit_action_item(menu) if allowed_to_edit? + quote_action_item(menu) if journal.notes.present? && allowed_to_quote? end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index b134ae47264c..6d4c3e33fe7e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -84,10 +84,6 @@ def activity_anchor "#activity-#{journal.version}" end - def editable? - journal.user == User.current - end - def updated? return false if journal.initial? @@ -102,6 +98,23 @@ def notification_on_details? has_unread_notifications? && journal.notes.blank? end + def allowed_to_edit? + allowed_to_edit_others? || allowed_to_edit_own? + end + + def allowed_to_edit_others? + User.current.allowed_in_project?(:edit_work_package_notes, journal.journable.project) + end + + def allowed_to_edit_own? + journal.user == User.current && User.current.allowed_in_project?(:edit_own_work_package_notes, + journal.journable.project) + end + + def allowed_to_quote? + User.current.allowed_in_project?(:add_work_package_notes, journal.journable.project) + end + def copy_url_action_item(menu) menu.with_item(label: t("button_copy_link_to_clipboard"), tag: :button, diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 267ce19a7c2e..49a0236e70d2 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -1,6 +1,6 @@ <%= component_wrapper do - flex_layout(my: 2) do |new_form_container| + flex_layout(my: 2, data: { test_selector: "op-work-package-journal-form" }) do |new_form_container| new_form_container.with_row(data: { "work-packages--activities-tab--index-target": "buttonRow" }) do diff --git a/app/components/work_packages/activities_tab/journals/new_component.rb b/app/components/work_packages/activities_tab/journals/new_component.rb index 6468cd7d0d0b..3b513e81a2ea 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.rb +++ b/app/components/work_packages/activities_tab/journals/new_component.rb @@ -40,6 +40,8 @@ def initialize(work_package:) @work_package = work_package end + private + attr_reader :work_package def journal diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 86ba6b19835d..14916a7d5b99 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -217,8 +217,7 @@ work_packages: %i[show index], work_packages_api: [:get], "work_packages/reports": %i[report report_details], - "work_packages/activities_tab": %i[index create update_streams edit cancel_edit update - update_sorting update_filter], + "work_packages/activities_tab": %i[index update_streams update_sorting update_filter], "work_packages/menus": %i[show] }, permissible_on: %i[work_package project], @@ -256,19 +255,24 @@ { # FIXME: Although the endpoint is removed, the code checking whether a user # is eligible to add work packages through the API still seems to rely on this. - journals: [:new] + journals: [:new], + "work_packages/activities_tab": %i[create] }, permissible_on: %i[work_package project], dependencies: :view_work_packages wpt.permission :edit_work_package_notes, - {}, + { + "work_packages/activities_tab": %i[edit cancel_edit update] + }, permissible_on: :project, require: :loggedin, dependencies: :view_work_packages wpt.permission :edit_own_work_package_notes, - {}, + { + "work_packages/activities_tab": %i[edit cancel_edit update] + }, permissible_on: %i[work_package project], require: :loggedin, dependencies: :view_work_packages diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 771a5bfe3c68..3cdb2e7e20f1 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -33,7 +33,7 @@ let(:admin) { create(:admin) } let(:member_role) do create(:project_role, - permissions: %i[view_work_packages edit_work_packages add_work_packages work_package_assigned]) + permissions: %i[view_work_packages edit_work_packages add_work_packages work_package_assigned add_work_package_notes]) end let(:member) do create(:user, @@ -45,6 +45,180 @@ let(:wp_page) { Pages::FullWorkPackage.new(work_package, project) } let(:activity_tab) { Components::WorkPackages::Activities.new(work_package) } + describe "permission checks" do + let(:viewer_role) do + create(:project_role, + permissions: %i[view_work_packages]) + end + let(:viewer) do + create(:user, + firstname: "A", + lastname: "Viewer", + member_with_roles: { project => viewer_role }) + end + + let(:viewer_role_with_commenting_permission) do + create(:project_role, + permissions: %i[view_work_packages add_work_package_notes edit_own_work_package_notes]) + end + let(:viewer_with_commenting_permission) do + create(:user, + firstname: "A", + lastname: "Viewer", + member_with_roles: { project => viewer_role_with_commenting_permission }) + end + + let(:user_role_with_editing_permission) do + create(:project_role, + permissions: %i[view_work_packages add_work_package_notes edit_work_package_notes]) + end + let(:user_with_editing_permission) do + create(:user, + firstname: "A", + lastname: "Viewer", + member_with_roles: { project => user_role_with_editing_permission }) + end + + let(:work_package) { create(:work_package, project:, author: admin) } + let(:first_comment) do + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, + version: 2) + end + + context "when project is public", with_settings: { login_required: false } do + let(:project) { create(:project, public: true) } + let!(:anonymous_role) do + create(:anonymous_role, permissions: %i[view_project view_work_packages]) + end + + context "when visited by an anonymous visitor" do + before do + first_comment + + login_as User.anonymous + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does show comments but does not enable adding, editing or quoting comments" do + activity_tab.expect_journal_notes(text: "First comment by admin") + + activity_tab.within_journal_entry(first_comment) do + page.find_test_selector("op-wp-journal-#{first_comment.id}-action-menu").click + + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment.id}-edit") + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment.id}-quote") + end + + activity_tab.expect_no_input_field + end + end + end + + context "when a user has only view_work_packages permission" do + current_user { viewer } + + before do + first_comment + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does show comments but does not enable adding comments" do + activity_tab.expect_journal_notes(text: "First comment by admin") + + activity_tab.within_journal_entry(first_comment) do + page.find_test_selector("op-wp-journal-#{first_comment.id}-action-menu").click + + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment.id}-edit") + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment.id}-quote") + end + + activity_tab.expect_no_input_field + end + end + + context "when a user has add_work_package_notes and edit_own_work_package_notes permission" do + current_user { viewer_with_commenting_permission } + + before do + first_comment + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does show comments and enable adding and quoting comments and editing own comments" do + activity_tab.expect_journal_notes(text: "First comment by admin") + + activity_tab.within_journal_entry(first_comment) do + page.find_test_selector("op-wp-journal-#{first_comment.id}-action-menu").click + + # not allowed to edit other user's comments + expect(page).not_to have_test_selector("op-wp-journal-#{first_comment.id}-edit") + # allowed to quote other user's comments + expect(page).to have_test_selector("op-wp-journal-#{first_comment.id}-quote") + end + + activity_tab.expect_input_field + + activity_tab.add_comment(text: "First comment by viewer with commenting permission") + + second_comment = work_package.journals.reload.last + + activity_tab.within_journal_entry(second_comment) do + # for some reason only opens on the second click in the test + # probably due to the previous click on the first comment + 2.times { page.find_test_selector("op-wp-journal-#{second_comment.id}-action-menu").click } + + expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-edit") + expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-quote") + end + end + end + + context "when a user has add_work_package_notes and general edit_work_package_notes permission" do + current_user { user_with_editing_permission } + + before do + first_comment + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "does show comments and enable adding and quoting comments and editing own comments" do + activity_tab.expect_journal_notes(text: "First comment by admin") + + activity_tab.within_journal_entry(first_comment) do + page.find_test_selector("op-wp-journal-#{first_comment.id}-action-menu").click + + # allowed to edit other user's comments + expect(page).to have_test_selector("op-wp-journal-#{first_comment.id}-edit") + # allowed to quote other user's comments + expect(page).to have_test_selector("op-wp-journal-#{first_comment.id}-quote") + end + + activity_tab.expect_input_field + + activity_tab.add_comment(text: "First comment by viewer with editing permission") + + second_comment = work_package.journals.reload.last + + activity_tab.within_journal_entry(second_comment) do + # for some reason only opens on the second click in the test + # probably due to the previous click on the first comment + 2.times { page.find_test_selector("op-wp-journal-#{second_comment.id}-action-menu").click } + + expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-edit") + expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-quote") + end + end + end + end + context "when a workpackage is created and visited by the same user" do current_user { admin } let(:work_package) { create(:work_package, project:, author: admin) } diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index 97204b2f979b..7200cbc7df54 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -135,6 +135,14 @@ def expect_no_empty_state expect(page).not_to have_test_selector("op-wp-journals-container-empty") end + def expect_input_field + expect(page).to have_test_selector("op-work-package-journal-form") + end + + def expect_no_input_field + expect(page).not_to have_test_selector("op-work-package-journal-form") + end + def add_comment(text: nil, save: true) # TODO: get rid of static sleep sleep 1 # otherwise the stimulus component is not mounted yet and the click does not work From 9f121c8df416298309a2dfb0c4cc0619c503e833 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 28 Aug 2024 12:59:12 +0200 Subject: [PATCH 054/120] added and refactore permission specs --- .../edit_own_work_package_notes.rb | 38 +++++++++++++++++++ ...pec.rb => edit_project_attributes_spec.rb} | 5 +-- spec/permissions/edit_work_package_notes.rb | 38 +++++++++++++++++++ ...b => select_project_custom_fields_spec.rb} | 2 +- .../view_project_attributes_spec.rb | 38 +++++++++++++++++++ spec/permissions/view_work_packages_spec.rb | 9 +++++ 6 files changed, 125 insertions(+), 5 deletions(-) create mode 100644 spec/permissions/edit_own_work_package_notes.rb rename spec/permissions/{manage_project_custom_values_spec.rb => edit_project_attributes_spec.rb} (86%) create mode 100644 spec/permissions/edit_work_package_notes.rb rename spec/permissions/{manage_project_custom_field_mappings_spec.rb => select_project_custom_fields_spec.rb} (97%) create mode 100644 spec/permissions/view_project_attributes_spec.rb diff --git a/spec/permissions/edit_own_work_package_notes.rb b/spec/permissions/edit_own_work_package_notes.rb new file mode 100644 index 000000000000..5ec44eb585d5 --- /dev/null +++ b/spec/permissions/edit_own_work_package_notes.rb @@ -0,0 +1,38 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 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. +#++ + +require "spec_helper" +require File.expand_path("../support/permission_specs", __dir__) + +RSpec.describe WorkPackages::ActivitiesTabController, "edit_own_work_package_notes permission", type: :controller do + include PermissionSpecs + + check_permission_required_for("work_packages/activities_tab#edit", :edit_work_package_notes) + check_permission_required_for("work_packages/activities_tab#cancel_edit", :edit_work_package_notes) + check_permission_required_for("work_packages/activities_tab#update", :edit_work_package_notes) +end diff --git a/spec/permissions/manage_project_custom_values_spec.rb b/spec/permissions/edit_project_attributes_spec.rb similarity index 86% rename from spec/permissions/manage_project_custom_values_spec.rb rename to spec/permissions/edit_project_attributes_spec.rb index 19461ef958fd..b0fadf7cba28 100644 --- a/spec/permissions/manage_project_custom_values_spec.rb +++ b/spec/permissions/edit_project_attributes_spec.rb @@ -29,13 +29,10 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe Overviews::OverviewsController, "manage_project_custom_values permission", +RSpec.describe Overviews::OverviewsController, "edit_project_attributes permission", type: :controller do include PermissionSpecs - # render sidebar on project overview page with view_project permission - check_permission_required_for("overviews/overviews#project_custom_fields_sidebar", :view_project_attributes) - # render dialog with inputs for editing project attributes with edit_project permission check_permission_required_for("overviews/overviews#project_custom_field_section_dialog", :edit_project_attributes) diff --git a/spec/permissions/edit_work_package_notes.rb b/spec/permissions/edit_work_package_notes.rb new file mode 100644 index 000000000000..c40309dbc6c4 --- /dev/null +++ b/spec/permissions/edit_work_package_notes.rb @@ -0,0 +1,38 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 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. +#++ + +require "spec_helper" +require File.expand_path("../support/permission_specs", __dir__) + +RSpec.describe WorkPackages::ActivitiesTabController, "edit_work_package_notes permission", type: :controller do + include PermissionSpecs + + check_permission_required_for("work_packages/activities_tab#edit", :edit_work_package_notes) + check_permission_required_for("work_packages/activities_tab#cancel_edit", :edit_work_package_notes) + check_permission_required_for("work_packages/activities_tab#update", :edit_work_package_notes) +end diff --git a/spec/permissions/manage_project_custom_field_mappings_spec.rb b/spec/permissions/select_project_custom_fields_spec.rb similarity index 97% rename from spec/permissions/manage_project_custom_field_mappings_spec.rb rename to spec/permissions/select_project_custom_fields_spec.rb index 0ed856ecad88..13f5d6974e75 100644 --- a/spec/permissions/manage_project_custom_field_mappings_spec.rb +++ b/spec/permissions/select_project_custom_fields_spec.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe Projects::Settings::ProjectCustomFieldsController, "manage_project_custom_field mappings permission", +RSpec.describe Projects::Settings::ProjectCustomFieldsController, "select_project_custom_fields mappings permission", type: :controller do include PermissionSpecs diff --git a/spec/permissions/view_project_attributes_spec.rb b/spec/permissions/view_project_attributes_spec.rb new file mode 100644 index 000000000000..d1121041cdd4 --- /dev/null +++ b/spec/permissions/view_project_attributes_spec.rb @@ -0,0 +1,38 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 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. +#++ + +require "spec_helper" +require File.expand_path("../support/permission_specs", __dir__) + +RSpec.describe Overviews::OverviewsController, "view_project_attributes permission", + type: :controller do + include PermissionSpecs + + # render sidebar on project overview page with view_project permission + check_permission_required_for("overviews/overviews#project_custom_fields_sidebar", :view_project_attributes) +end diff --git a/spec/permissions/view_work_packages_spec.rb b/spec/permissions/view_work_packages_spec.rb index 63a444c4da7a..05358d38b44a 100644 --- a/spec/permissions/view_work_packages_spec.rb +++ b/spec/permissions/view_work_packages_spec.rb @@ -35,3 +35,12 @@ check_permission_required_for("work_packages#show", :view_work_packages) check_permission_required_for("work_packages#index", :view_work_packages) end + +RSpec.describe WorkPackages::ActivitiesTabController, "view_work_packages permission", type: :controller do + include PermissionSpecs + + check_permission_required_for("work_packages/activities_tab#index", :view_work_packages) + check_permission_required_for("work_packages/activities_tab#update_streams", :view_work_packages) + check_permission_required_for("work_packages/activities_tab#update_sorting", :view_work_packages) + check_permission_required_for("work_packages/activities_tab#update_filter", :view_work_packages) +end From aa79dee706fdcbecb7b68f913ef1ddc3cac2c557 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 28 Aug 2024 15:55:27 +0200 Subject: [PATCH 055/120] WIP: adding controller spec and exception handling --- .../activities_tab_controller.rb | 43 +- .../activities_tab_controller_spec.rb | 408 ++++++++++++++++++ 2 files changed, 431 insertions(+), 20 deletions(-) create mode 100644 spec/controllers/work_packages/activities_tab_controller_spec.rb diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index eef44720a279..e5911ce9edfd 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -47,6 +47,12 @@ def index ) end + def update_streams + generate_time_based_update_streams(params[:last_update_timestamp]) + + respond_with_turbo_streams + end + def update_filter update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( @@ -64,8 +70,16 @@ def update_filter respond_with_turbo_streams end - def update_streams - generate_time_based_update_streams(params[:last_update_timestamp]) + def update_sorting + call = Users::UpdateService.new(user: User.current, model: User.current).call( + pref: { comments_sorting: params[:sorting] } + ) + + if call.success? + # update the whole tab to reflect the new sorting in all components + # we need to call replace in order to properly re-init the index stimulus component + replace_whole_tab + end respond_with_turbo_streams end @@ -96,10 +110,13 @@ def cancel_edit end def create - call = create_notification_service_call + call = create_journal_service_call if call.success? && call.result handle_successful_create_call(call) + else + # TODO: respond with bad request + # respond with call.errors, status: :bad_request end respond_with_turbo_streams @@ -113,23 +130,9 @@ def update if call.success? && call.result update_item_component(call.result, state: :show) end - # TODO: handle errors - - respond_with_turbo_streams - end - - def update_sorting - call = Users::UpdateService.new(user: User.current, model: User.current).call( - pref: { comments_sorting: params[:sorting] } - ) - - if call.success? - # update the whole tab to reflect the new sorting in all components - # we need to call replace in order to properly re-init the index stimulus component - replace_whole_tab - end - respond_with_turbo_streams + # TODO: handle errors + respond_with_turbo_streams(status: call.success? ? :ok : :forbidden) end private @@ -190,7 +193,7 @@ def replace_whole_tab ) end - def create_notification_service_call + def create_journal_service_call ### taken from ActivitiesByWorkPackageAPI AddWorkPackageNoteService .new(user: User.current, diff --git a/spec/controllers/work_packages/activities_tab_controller_spec.rb b/spec/controllers/work_packages/activities_tab_controller_spec.rb new file mode 100644 index 000000000000..dec4bfd63491 --- /dev/null +++ b/spec/controllers/work_packages/activities_tab_controller_spec.rb @@ -0,0 +1,408 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 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. +#++ + +require "spec_helper" + +RSpec.describe WorkPackages::ActivitiesTabController do + let(:project) { create(:project) } + let(:viewer_role) do + create(:project_role, + permissions: [:view_work_packages]) + end + let(:viewer) do + create(:user, + member_with_roles: { project => viewer_role }) + end + let(:commenter_role) do + create(:project_role, + permissions: %i[view_work_packages add_work_package_notes edit_own_work_package_notes]) + end + let(:commenter) do + create(:user, + member_with_roles: { project => commenter_role }) + end + let(:full_privileges_role) do + create(:project_role, + permissions: %i[view_work_packages edit_work_packages add_work_package_notes edit_own_work_package_notes + edit_work_package_notes]) + end + let(:user_with_full_privileges) do + create(:user, + member_with_roles: { project => full_privileges_role }) + end + let(:work_package) do + create(:work_package, + project:) + end + let(:comment_by_user) do + # sequencing of version in factory seems not to be working in this case + # throws database constraint errors + # so we manually set the version to the last journal version + 1 + # TODO: investigate why sequencing is not working + create(:work_package_journal, user:, notes: "A comment by user", journable: work_package, + version: work_package.journals.last.version + 1) + end + + let(:comment_by_another_user) do + # sequencing of version in factory seems not to be working in this case + # throws database constraint errors + # so we manually set the version to the last journal version + 1 + # TODO: investigate why sequencing is not working + create(:work_package_journal, user: create(:user), notes: "A comment by another user", journable: work_package, + version: work_package.journals.last.version + 1) + end + + shared_examples_for "successful index action response" do + it { is_expected.to be_successful } + + it "renders a turbo frame" do + expect(response.body).to include("") + end + end + + shared_examples_for "successful update_streams action response" do + it { is_expected.to be_successful } + end + + shared_examples_for "successful update_filter action response" do + it { is_expected.to be_successful } + end + + shared_examples_for "successful update_sorting action response" do + it { is_expected.to be_successful } + end + + shared_examples_for "successful edit action response" do + it { is_expected.to be_successful } + end + + shared_examples_for "successful cancel_edit action response" do + it { is_expected.to be_successful } + end + + shared_examples_for "successful create action response" do + it { is_expected.to be_successful } + + it "includes the posted comment" do + expect(response.body).to include(notes) + end + end + + shared_examples_for "successful update action response" do + it { is_expected.to be_successful } + + it "includes the updated comment" do + expect(response.body).to include(notes) + end + end + + before do + allow(User).to receive(:current).and_return user + + work_package + comment_by_user + end + + describe "#index" do + before do + get :index, + params: { work_package_id: work_package.id, project_id: project.id } + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it_behaves_like "successful index action response" + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful index action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful index action response" + end + end + + describe "#update_streams" do + before do + get :update_streams, + params: { work_package_id: work_package.id, project_id: project.id }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it_behaves_like "successful update_streams action response" + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful update_streams action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful update_streams action response" + end + end + + describe "#update_filter" do + before do + get :update_filter, + params: { work_package_id: work_package.id, project_id: project.id }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it_behaves_like "successful update_filter action response" + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful update_filter action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful update_filter action response" + end + end + + describe "#update_sorting" do + before do + get :update_sorting, + params: { work_package_id: work_package.id, project_id: project.id }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it_behaves_like "successful update_sorting action response" + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful update_sorting action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful update_sorting action response" + end + end + + describe "#edit" do + before do + get :edit, + params: { work_package_id: work_package.id, project_id: project.id, id: comment_by_user.id }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful edit action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful edit action response" + end + end + + describe "#cancel_edit" do + before do + get :cancel_edit, + params: { work_package_id: work_package.id, project_id: project.id, id: comment_by_user.id }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful cancel_edit action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful cancel_edit action response" + end + end + + describe "#create" do + let(:notes) { "A new comment posted!" } + + before do + post :create, + params: { + work_package_id: work_package.id, + project_id: project.id, + last_update_timestamp: Time.now.utc, + journal: { notes: } + }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + it_behaves_like "successful create action response" + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful create action response" + end + end + + describe "#update" do + let(:notes) { "An updated comment!" } + let(:journal) { comment_by_user } + + before do + put :update, + params: { + work_package_id: work_package.id, + project_id: project.id, + id: journal.id, + journal: { notes: } + }, + format: :turbo_stream + end + + context "when a viewer is logged in" do + let(:user) { viewer } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a commenter is logged in" do + let(:user) { commenter } + + subject { response } + + context "when the commenter is the author of the comment" do + it_behaves_like "successful update action response" + end + + context "when the commenter is not the author of the comment" do + let(:journal) { comment_by_another_user } + + it { is_expected.to be_forbidden } + end + end + + context "when a user with full privileges is logged in" do + let(:user) { user_with_full_privileges } + + subject { response } + + it_behaves_like "successful update action response" + end + end +end From 045aabde67360ea459c5f7bbf5e73475d76ed702 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 2 Sep 2024 16:29:43 +0200 Subject: [PATCH 056/120] added exception handling and controller specs --- .../activities_tab/journals/item_component.rb | 11 +- .../journals/new_component.html.erb | 6 +- .../activities_tab/journals/new_component.rb | 16 +- .../concerns/accounts/current_user.rb | 2 +- .../activities_tab_controller.rb | 119 +++++--- .../activities_tab_controller_spec.rb | 254 ++++++++++++++++-- 6 files changed, 338 insertions(+), 70 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 6d4c3e33fe7e..8bdb2a4c1380 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -99,16 +99,7 @@ def notification_on_details? end def allowed_to_edit? - allowed_to_edit_others? || allowed_to_edit_own? - end - - def allowed_to_edit_others? - User.current.allowed_in_project?(:edit_work_package_notes, journal.journable.project) - end - - def allowed_to_edit_own? - journal.user == User.current && User.current.allowed_in_project?(:edit_own_work_package_notes, - journal.journable.project) + journal.editable_by?(User.current) end def allowed_to_quote? diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 49a0236e70d2..29c6da285a9b 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -1,7 +1,9 @@ <%= component_wrapper do flex_layout(my: 2, data: { test_selector: "op-work-package-journal-form" }) do |new_form_container| - new_form_container.with_row(data: { + new_form_container.with_row( + display: button_row_display_value, + data: { "work-packages--activities-tab--index-target": "buttonRow" }) do flex_layout(justify_content: :space_between) do |button_row| @@ -30,7 +32,7 @@ end end new_form_container.with_row( - display: :none, + display: form_row_display_value, data: { "work-packages--activities-tab--index-target": "formRow" } ) do primer_form_with( diff --git a/app/components/work_packages/activities_tab/journals/new_component.rb b/app/components/work_packages/activities_tab/journals/new_component.rb index 3b513e81a2ea..a718c6d8dd0a 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.rb +++ b/app/components/work_packages/activities_tab/journals/new_component.rb @@ -34,18 +34,28 @@ class NewComponent < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(work_package:) + def initialize(work_package:, journal: nil, form_hidden_initially: true) super @work_package = work_package + @journal = journal + @form_hidden_initially = form_hidden_initially end private - attr_reader :work_package + attr_reader :work_package, :form_hidden_initially def journal - Journal.new(journable: work_package) + @journal || Journal.new(journable: work_package) + end + + def button_row_display_value + form_hidden_initially ? :block : :none + end + + def form_row_display_value + form_hidden_initially ? :none : :block end end end diff --git a/app/controllers/concerns/accounts/current_user.rb b/app/controllers/concerns/accounts/current_user.rb index e6bf353a8df9..caef0490a355 100644 --- a/app/controllers/concerns/accounts/current_user.rb +++ b/app/controllers/concerns/accounts/current_user.rb @@ -181,7 +181,7 @@ def require_login auth_header = OpenProject::Authentication::WWWAuthenticate.response_header(request_headers: request.headers) - format.any(:xml, :js, :json) do + format.any(:xml, :js, :json, :turbo_stream) do head :unauthorized, "X-Reason" => "login needed", "WWW-Authenticate" => auth_header diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index e5911ce9edfd..15c7cee6bbcc 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -48,9 +48,13 @@ def index end def update_streams - generate_time_based_update_streams(params[:last_update_timestamp]) + if params[:last_update_timestamp].present? + generate_time_based_update_streams(params[:last_update_timestamp]) + else + status = :bad_request + end - respond_with_turbo_streams + respond_with_turbo_streams(status: status || :ok) end def update_filter @@ -71,42 +75,55 @@ def update_filter end def update_sorting - call = Users::UpdateService.new(user: User.current, model: User.current).call( - pref: { comments_sorting: params[:sorting] } - ) + if params[:sorting].present? + call = Users::UpdateService.new(user: User.current, model: User.current).call( + pref: { comments_sorting: params[:sorting] } + ) - if call.success? - # update the whole tab to reflect the new sorting in all components - # we need to call replace in order to properly re-init the index stimulus component - replace_whole_tab + if call.success? + # update the whole tab to reflect the new sorting in all components + # we need to call replace in order to properly re-init the index stimulus component + replace_whole_tab + else + status = :bad_request + end + else + status = :bad_request end - respond_with_turbo_streams + respond_with_turbo_streams(status: status || :ok) end def edit - # check if allowed to edit at all - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: @journal, - state: :edit, - filter: @filter + if allowed_to_edit?(@journal) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: @journal, + state: :edit, + filter: @filter + ) ) - ) + else + status = :forbidden + end - respond_with_turbo_streams + respond_with_turbo_streams(status: status || :ok) end def cancel_edit - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: @journal, - state: :show, - filter: @filter + if allowed_to_edit?(@journal) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal: @journal, + state: :show, + filter: @filter + ) ) - ) + else + status = :forbidden + end - respond_with_turbo_streams + respond_with_turbo_streams(status: status || :ok) end def create @@ -115,24 +132,31 @@ def create if call.success? && call.result handle_successful_create_call(call) else - # TODO: respond with bad request - # respond with call.errors, status: :bad_request + handle_failed_create_call(call) # errors should be rendered in the form + status = :bad_request end - respond_with_turbo_streams + respond_with_turbo_streams(status: status || :created) end def update - call = Journals::UpdateService.new(model: @journal, user: User.current).call( - notes: journal_params[:notes] - ) + if journal_params[:notes].present? + call = Journals::UpdateService.new(model: @journal, user: User.current).call( + notes: journal_params[:notes] + ) - if call.success? && call.result - update_item_component(call.result, state: :show) + if call.success? && call.result + update_item_component(call.result, state: :show) + else + status = handle_failed_update_call(call) + end + else + # disallow empty notes + status = :bad_request + update_item_component(@journal, state: :edit) # rerender form with initial values end - # TODO: handle errors - respond_with_turbo_streams(status: call.success? ? :ok : :forbidden) + respond_with_turbo_streams(status: status || :ok) end private @@ -184,6 +208,27 @@ def handle_other_filters_on_create(call) end end + def handle_failed_create_call(call) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::NewComponent.new( + work_package: @work_package, + journal: call.result, + form_hidden_initially: false + ) + ) + end + + def handle_failed_update_call(call) + status = if call.errors&.first&.type == :error_unauthorized + :forbidden + else + :bad_request + end + update_item_component(call.result, state: :edit) # errors should be rendered in the form + + status + end + def replace_whole_tab replace_via_turbo_stream( component: WorkPackages::ActivitiesTab::IndexComponent.new( @@ -268,4 +313,8 @@ def remove_potential_empty_state component: WorkPackages::ActivitiesTab::Journals::EmptyComponent.new ) end + + def allowed_to_edit?(journal) + journal.editable_by?(User.current) + end end diff --git a/spec/controllers/work_packages/activities_tab_controller_spec.rb b/spec/controllers/work_packages/activities_tab_controller_spec.rb index dec4bfd63491..769083fe4aca 100644 --- a/spec/controllers/work_packages/activities_tab_controller_spec.rb +++ b/spec/controllers/work_packages/activities_tab_controller_spec.rb @@ -93,8 +93,28 @@ it { is_expected.to be_successful } end + shared_examples_for "successful update_sorting action response for asc and desc sorting" do + context "when asc" do + let(:sorting) { "asc" } + + it { is_expected.to be_successful } + + it_behaves_like "successful update_sorting action response" + end + + context "when desc" do + let(:sorting) { "desc" } + + it { is_expected.to be_successful } + + it_behaves_like "successful update_sorting action response" + end + end + shared_examples_for "successful update_sorting action response" do - it { is_expected.to be_successful } + it "changes the user's sorting preference" do + expect(User.current.preference.comments_sorting).to eq(sorting) + end end shared_examples_for "successful edit action response" do @@ -121,6 +141,72 @@ end end + shared_examples_for "redirect to login" do + it { is_expected.to redirect_to signin_path(back_url: work_package_activities_url(work_package_id: work_package.id)) } + end + + shared_examples_for "does not grant access for anonymous users unless project is public and no login required" do + context "when no user is logged in" do + let(:user) { User.anonymous } + + context "when the project is not public" do + let(:project) { create(:project, public: false) } + + subject { response } + + it { is_expected.to be_unauthorized } + end + + context "when the project is public and login is required", with_settings: { login_required: true } do + let(:project) { create(:public_project) } + + subject { response } + + it { is_expected.to be_unauthorized } + end + + # TODO: investigate why this test is failing, it should be successful! + # + # context "when the project is public and no login is required", with_settings: { login_required: false } do + # let(:project) { create(:public_project) } + + # subject { response } + + # it { is_expected.to be_successful } + # end + end + end + + shared_examples_for "does not grant access for anonymous users in all cases" do + context "when no user is logged in" do + let(:user) { User.anonymous } + + context "when the project is not public" do + let(:project) { create(:project, public: false) } + + subject { response } + + it { is_expected.to be_unauthorized } + end + + context "when the project is public and login is required", with_settings: { login_required: true } do + let(:project) { create(:public_project) } + + subject { response } + + it { is_expected.to be_unauthorized } + end + + context "when the project is public and no login is required", with_settings: { login_required: false } do + let(:project) { create(:public_project) } + + subject { response } + + it { is_expected.to be_unauthorized } + end + end + end + before do allow(User).to receive(:current).and_return user @@ -134,6 +220,36 @@ params: { work_package_id: work_package.id, project_id: project.id } end + context "when no user is logged in" do + let(:user) { User.anonymous } + + context "when the project is not public" do + let(:project) { create(:project, public: false) } + + subject { response } + + it_behaves_like "redirect to login" + end + + context "when the project is public and login is required", with_settings: { login_required: true } do + let(:project) { create(:public_project) } + + subject { response } + + it_behaves_like "redirect to login" + end + + # TODO: investigate why this test is failing, it should be successful! + # + # context "when the project is public and no login is required", with_settings: { login_required: false } do + # let(:project) { create(:public_project) } + + # subject { response } + + # it_behaves_like "successful index action response" + # end + end + context "when a viewer is logged in" do let(:user) { viewer } @@ -162,10 +278,12 @@ describe "#update_streams" do before do get :update_streams, - params: { work_package_id: work_package.id, project_id: project.id }, + params: { work_package_id: work_package.id, project_id: project.id, last_update_timestamp: Time.now.utc }, format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users unless project is public and no login required" + context "when a viewer is logged in" do let(:user) { viewer } @@ -189,6 +307,20 @@ it_behaves_like "successful update_streams action response" end + + context "when request is invalid" do + let(:user) { user_with_full_privileges } + + before do + get :update_streams, + params: { work_package_id: work_package.id, project_id: project.id }, # missing last_update_timestamp + format: :turbo_stream + end + + subject { response } + + it { is_expected.to be_bad_request } + end end describe "#update_filter" do @@ -198,6 +330,8 @@ format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users unless project is public and no login required" + context "when a viewer is logged in" do let(:user) { viewer } @@ -225,8 +359,8 @@ describe "#update_sorting" do before do - get :update_sorting, - params: { work_package_id: work_package.id, project_id: project.id }, + put :update_sorting, + params: { work_package_id: work_package.id, project_id: project.id, sorting: }, format: :turbo_stream end @@ -235,7 +369,7 @@ subject { response } - it_behaves_like "successful update_sorting action response" + it_behaves_like "successful update_sorting action response for asc and desc sorting" end context "when a commenter is logged in" do @@ -243,7 +377,7 @@ subject { response } - it_behaves_like "successful update_sorting action response" + it_behaves_like "successful update_sorting action response for asc and desc sorting" end context "when a user with full privileges is logged in" do @@ -251,17 +385,30 @@ subject { response } - it_behaves_like "successful update_sorting action response" + it_behaves_like "successful update_sorting action response for asc and desc sorting" + end + + context "when request is invalid" do + let(:user) { user_with_full_privileges } + let(:sorting) { nil } # missing sorting param + + subject { response } + + it { is_expected.to be_bad_request } end end describe "#edit" do + let(:journal) { comment_by_user } + before do get :edit, - params: { work_package_id: work_package.id, project_id: project.id, id: comment_by_user.id }, + params: { work_package_id: work_package.id, project_id: project.id, id: journal.id }, format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users in all cases" + context "when a viewer is logged in" do let(:user) { viewer } @@ -273,27 +420,51 @@ context "when a commenter is logged in" do let(:user) { commenter } - subject { response } + context "when the commenter is the author of the comment" do + subject { response } + + it_behaves_like "successful edit action response" + end + + context "when the commenter is not the author of the comment" do + let(:journal) { comment_by_another_user } + + subject { response } - it_behaves_like "successful edit action response" + it { is_expected.to be_forbidden } + end end context "when a user with full privileges is logged in" do let(:user) { user_with_full_privileges } - subject { response } + context "when the user is the author of the comment" do + subject { response } - it_behaves_like "successful edit action response" + it_behaves_like "successful edit action response" + end + + context "when the user is not the author of the comment" do + let(:journal) { comment_by_another_user } + + subject { response } + + it_behaves_like "successful edit action response" + end end end describe "#cancel_edit" do + let(:journal) { comment_by_user } + before do get :cancel_edit, - params: { work_package_id: work_package.id, project_id: project.id, id: comment_by_user.id }, + params: { work_package_id: work_package.id, project_id: project.id, id: journal.id }, format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users in all cases" + context "when a viewer is logged in" do let(:user) { viewer } @@ -305,17 +476,37 @@ context "when a commenter is logged in" do let(:user) { commenter } - subject { response } + context "when the commenter is the author of the comment" do + subject { response } - it_behaves_like "successful cancel_edit action response" + it_behaves_like "successful cancel_edit action response" + end + + context "when the commenter is not the author of the comment" do + let(:journal) { comment_by_another_user } + + subject { response } + + it { is_expected.to be_forbidden } + end end context "when a user with full privileges is logged in" do let(:user) { user_with_full_privileges } - subject { response } + context "when the user is the author of the comment" do + subject { response } + + it_behaves_like "successful cancel_edit action response" + end - it_behaves_like "successful cancel_edit action response" + context "when the user is not the author of the comment" do + let(:journal) { comment_by_another_user } + + subject { response } + + it_behaves_like "successful cancel_edit action response" + end end end @@ -333,6 +524,8 @@ format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users in all cases" + context "when a viewer is logged in" do let(:user) { viewer } @@ -356,6 +549,17 @@ it_behaves_like "successful create action response" end + + # TODO: this test is failing as the creation call seems not to have an issues with an empty notes params + # + # context "when request is invalid" do + # let(:user) { user_with_full_privileges } + # let(:notes) { nil } # missing notes param + + # subject { response } + + # it { is_expected.to be_bad_request } + # end end describe "#update" do @@ -373,6 +577,8 @@ format: :turbo_stream end + it_behaves_like "does not grant access for anonymous users in all cases" + context "when a viewer is logged in" do let(:user) { viewer } @@ -400,9 +606,19 @@ context "when a user with full privileges is logged in" do let(:user) { user_with_full_privileges } - subject { response } + context "when the commenter is the author of the comment" do + subject { response } + + it_behaves_like "successful update action response" + end + + context "when the commenter is not the author of the comment" do + let(:journal) { comment_by_another_user } + + subject { response } - it_behaves_like "successful update action response" + it_behaves_like "successful update action response" + end end end end From 3d22248b64b77e8f438eeed11b48dfdebeb72f50 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 11:43:59 +0200 Subject: [PATCH 057/120] refactored CSS and applied BEM notations --- .../activities_tab/index_component.html.erb | 10 ++--- .../activities_tab/index_component.sass | 30 +++++-------- .../journals/index_component.html.erb | 6 +-- .../journals/index_component.sass | 6 +-- .../journals/item_component.html.erb | 8 ++-- .../journals/item_component.sass | 6 ++- .../journals/item_component/details.html.erb | 6 +-- .../journals/item_component/details.rb | 28 ++++++++---- .../journals/item_component/details.sass | 18 ++++---- .../journals/item_component/edit.html.erb | 4 +- .../journals/item_component/edit.sass | 30 ++++++++----- .../journals/new_component.html.erb | 24 +++++++--- .../journals/new_component.sass | 44 +++++++++++-------- .../activities-tab/index.controller.ts | 8 ++-- .../work_package/activities_spec.rb | 16 +++---- .../components/work_packages/activities.rb | 20 ++++----- 16 files changed, 147 insertions(+), 117 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index bfd5bc31fa5e..0235914aa290 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -1,6 +1,6 @@ <%= content_tag("turbo-frame", id: "work-package-activities-tab-content") do - component_wrapper(data: wrapper_data_attributes) do + component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-index-component") do flex_layout do |activties_tab_container| activties_tab_container.with_row(mb: 2) do render( @@ -12,8 +12,7 @@ end activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container| journals_wrapper_container.with_row( - id: "journals-container", - classes: "with-initial-input-compensation", + classes: "work-packages-activities-tab-index-component--journals-container work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation", data: { "work-packages--activities-tab--index-target": "journalsContainer" } ) do render( @@ -22,8 +21,7 @@ end if adding_comment_allowed? journals_wrapper_container.with_row( - id: "input-container", - classes: "sort-#{journal_sorting}", # css order attribute will take care of correct position + classes: "work-packages-activities-tab-index-component--input-container work-packages-activities-tab-index-component--input-container_sort-#{journal_sorting}", mt: 3, mb: [3, nil, nil, nil, 0], pt: 2, @@ -43,4 +41,4 @@ end end end -%> +%> \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index b7d54104b9a6..febca87c159f 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -1,27 +1,20 @@ -#work-packages-activities-tab-index-component - #journals-container +.work-packages-activities-tab-index-component + &--journals-container z-index: 10 padding-top: 3px overflow-y: auto - &.with-initial-input-compensation + + &_with-initial-input-compensation margin-bottom: 65px // initial margin-bottom, will be increased by stimulus when opening ckeditor @media screen and (max-width: $breakpoint-xl) margin-bottom: -16px - &.with-input-compensation + + &_with-input-compensation margin-bottom: 180px @media screen and (max-width: $breakpoint-xl) margin-bottom: -16px - #stem-connection - @media screen and (min-width: $breakpoint-xl) - position: absolute - z-index: 9 - border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-default) - margin-left: 19px - margin-top: 20px - height: 100vh - @media screen and (max-width: $breakpoint-xl) - display: none - #input-container + + &--input-container z-index: 10 @media screen and (min-width: $breakpoint-xl) position: absolute @@ -29,6 +22,7 @@ bottom: 0 left: 0 right: 0 - @media screen and (max-width: $breakpoint-xl) - &.sort-desc - order: -1 \ No newline at end of file + + &_sort-desc + @media screen and (max-width: $breakpoint-xl) + order: -1 diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index c600de950bac..ee160af50bdd 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -1,7 +1,7 @@ <%= - component_wrapper do + component_wrapper(class: "work-packages-activities-tab-journals-index-component") do flex_layout do |journals_index_wrapper_container| - journals_index_wrapper_container.with_row(id: "wp-journals-inner-container", mb: inner_container_margin_bottom) do + journals_index_wrapper_container.with_row(classes: "work-packages-activities-tab-journals-index-component--journals-inner-container", mb: inner_container_margin_bottom) do flex_layout(id: insert_target_modifier_id, data: { "test_selector": "op-wp-journals-container" }) do |journals_index_container| if empty_state? journals_index_container.with_row(mt: 2, mb: 3) do @@ -19,7 +19,7 @@ end end end - journals_index_wrapper_container.with_row(id: "wp-stem-connection") unless empty_state? + journals_index_wrapper_container.with_row(classes: "work-packages-activities-tab-journals-index-component--stem-connection") unless empty_state? end end %> diff --git a/app/components/work_packages/activities_tab/journals/index_component.sass b/app/components/work_packages/activities_tab/journals/index_component.sass index bc33e929f1f3..2087798b5272 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.sass +++ b/app/components/work_packages/activities_tab/journals/index_component.sass @@ -1,7 +1,7 @@ -#work-packages-activities-tab-journals-index-component - #wp-journals-inner-container +.work-packages-activities-tab-journals-index-component + &--journals-inner-container z-index: 10 - #wp-stem-connection + &--stem-connection @media screen and (min-width: $breakpoint-xl) position: absolute z-index: 9 diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 35292b2e3f06..d51e6c0fb371 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -2,12 +2,12 @@ component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-journals-item-component") do flex_layout(data: { "test_selector": "op-wp-journal-entry-#{journal.id}" }) do |journal_container| if show_comment_container? - journal_container.with_row(classes: "journal-notes-border-box") do + journal_container.with_row do render(border_box_container( id: "activity-#{journal.version}", padding: :condensed )) do |border_box_component| - border_box_component.with_header(px: 2, py: 1, classes: "journal-notes-header") do + border_box_component.with_header(px: 2, py: 1, data: { test_selector: "op-journal-notes-header" }) do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| header_container.with_column(flex_layout: true) do |header_start_container| header_start_container.with_column(mr: 2) do @@ -27,7 +27,7 @@ end header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? - header_end_container.with_column(mr: 2, pt: 1, classes: "bubble-container") do + header_end_container.with_column(mr: 2, pt: 1, classes: "work-packages-activities-tab-journals-item-component--bubble-container") do bubble_html end end @@ -55,7 +55,7 @@ end end end - border_box_component.with_body(classes: "journal-notes-body") do + border_box_component.with_body(classes: "work-packages-activities-tab-journals-item-component--journal-notes-body") do content end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index d02c5bc4d0c4..137934f33f5c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -1,7 +1,9 @@ .work-packages-activities-tab-journals-item-component + &--bubble-container + padding-top: 2px action-menu + // TODO: primer style adjustments, needs refactoring button padding-top: 3px // for whatever reason, the dots in the action menu are not perfectly aligned in center vertically by default - .bubble-container: - padding-top: 2px + diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 2740ce426bc9..0c4960475966 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -1,18 +1,18 @@ <%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do case filter when :only_comments - flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| + flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| render_empty_line(details_container) unless journal.initial? end when :only_changes if journal.details.any? - flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| + flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| render_details_header(details_container) render_details(details_container) end end else # :all or any other state - flex_layout(my: 0, border: :left, classes: "journal-details-container") do |details_container| + flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| if journal.details.any? if journal.notes.present? render_details(details_container) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 1a6a3e624caa..33424259864d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -54,17 +54,22 @@ def wrapper_uniq_by end def render_details_header(details_container) - details_container.with_row(flex_layout: true, - justify_content: :space_between, - classes: "journal-details-header-container", - id: "activity-#{journal.version}") do |header_container| + details_container.with_row( + flex_layout: true, + justify_content: :space_between, + classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header-container", + id: "activity-#{journal.version}" + ) do |header_container| render_header_start(header_container) render_header_end(header_container) end end def render_header_start(header_container) - header_container.with_column(flex_layout: true, classes: "journal-details-header") do |header_start_container| + header_container.with_column( + flex_layout: true, + classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header" + ) do |header_start_container| render_timeline_icon(header_start_container) render_user_avatar(header_start_container) render_user_name_and_time(header_start_container) @@ -74,7 +79,7 @@ def render_header_start(header_container) end def render_timeline_icon(container) - container.with_column(mr: 2, classes: "timeline-icon") do + container.with_column(mr: 2, classes: "work-packages-activities-tab-journals-item-component-details--timeline-icon") do icon_name = journal.initial? ? "diff-added" : "diff-modified" render Primer::Beta::Octicon.new(icon: icon_name, size: :small, "aria-label": icon_aria_label, color: :subtle) end @@ -120,7 +125,8 @@ def render_header_end(header_container) end def render_notification_bubble(container) - container.with_column(mr: 2, classes: "bubble-container") do + container.with_column(mr: 2, + classes: "work-packages-activities-tab-journals-item-component-details--bubble-container") do bubble_html end end @@ -173,12 +179,16 @@ def render_single_detail(container, detail) end def render_stem_line(container) - container.with_column(classes: "journal-detail-stem-line") + container.with_column(classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-stem-line") end def render_detail_description(container, detail) container.with_column(pl: 1, font_size: :small) do - render(Primer::Beta::Text.new(classes: "journal-detail-description")) { journal.render_detail(detail) } + render(Primer::Beta::Text.new( + classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-description" + )) do + journal.render_detail(detail) + end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index d9e7766d57f7..96cead666a77 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -1,12 +1,12 @@ .work-packages-activities-tab-journals-item-component-details - .journal-details-container + &--journal-details-container margin-left: 19px min-height: 20px - .journal-details-container--empty--last--asc + &--journal-details-container--empty--last--asc display: none!important - .journal-details-header-container + &--journal-details-header-container margin-left: -14px - .timeline-icon + &--timeline-icon background-color: var(--bgColor-muted) border-radius: 50% width: 28px @@ -14,13 +14,13 @@ text-align: center padding-top: 3px margin-top: -2px - .empty-line + &--empty-line margin-top: 0px!important margin-bottom: 0px!important - .journal-detail-stem-line + &--journal-detail-stem-line position: relative width: 20px - .journal-detail-stem-line::before + &--journal-detail-stem-line::before content: "" position: absolute top: 10px @@ -29,10 +29,10 @@ height: var(--borderWidth-thin, 1px) background-color: var(--borderColor-default) transform: translateY(-50%) - .journal-detail-description + &--journal-detail-description // quick hack to adapt the current detail rendering to desired primerised design i font-style: normal color: var(--fgColor-muted, var(--color-fg-subtle)) - .bubble-container + &--bubble-container padding-top: 2px \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index a17fb186d2f1..b1144aa3913e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -2,14 +2,14 @@ component_wrapper(class: "work-packages-activities-tab-journals-item-component-edit") do render(Primer::Box.new(my: 3)) do primer_form_with( - id: "work-package-journal-form", + id: "work-package-journal-form", # required for specs model: journal, method: :put, data: { turbo: true, turbo_stream: true }, url: work_package_activity_path(work_package_id: work_package.id, id: journal.id, filter:), ) do |f| flex_layout do |form_container| - form_container.with_row do + form_container.with_row(id: "ck-editor-adjustment-container") do render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.sass b/app/components/work_packages/activities_tab/journals/item_component/edit.sass index 38adcf394e01..db9b6228a98e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.sass @@ -1,13 +1,21 @@ .work-packages-activities-tab-journals-item-component-edit - // prototypical primer style adoptions - .ck-toolbar - border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px!important - .document-editor__editable-container - background: var(--color-scale-white) - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium)!important - .ck-content - background: var(--color-scale-white) - overflow-y: auto - border-radius: var(--borderRadius-medium)!important - margin: 5px + // prototypical primer style adoptions, using ID in order to get higher priority, needs refactoring + #ck-editor-adjustment-container + .ck-toolbar + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px + .document-editor__editable-container + background: var(--bgColor-default) + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-content + background: var(--bgColor-default) + overflow-y: auto + border-radius: var(--borderRadius-medium) + margin: 5px + .CodeMirror + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-editor__preview + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + // overwrites margin bottom defined in _ckeditor.sass:13 + opce-ckeditor-augmented-textarea .op-ckeditor--wrapper + margin-bottom: 0px diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 29c6da285a9b..ed205021aeec 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -1,5 +1,5 @@ <%= - component_wrapper do + component_wrapper(class: "work-packages-activities-tab-journals-new-component") do flex_layout(my: 2, data: { test_selector: "op-work-package-journal-form" }) do |new_form_container| new_form_container.with_row( display: button_row_display_value, @@ -7,15 +7,15 @@ "work-packages--activities-tab--index-target": "buttonRow" }) do flex_layout(justify_content: :space_between) do |button_row| - button_row.with_column(id: "input-trigger-column", mr: 2) do + button_row.with_column(classes: "work-packages-activities-tab-journals-new-component--input-trigger-column", mr: 2) do render(Primer::Beta::Button.new( - id: "open-work-package-journal-form", text_align: :left, scheme: :default, size: :medium, block: true, data: { - "action": "click->work-packages--activities-tab--index#showForm" + "action": "click->work-packages--activities-tab--index#showForm", + "test_selector": "op-open-work-package-journal-form-trigger" } )) do render(Primer::Beta::Text.new(color: :muted, font_weight: :normal)) { t("activities.work_packages.activity_tab.label_type_to_comment") } @@ -36,14 +36,24 @@ data: { "work-packages--activities-tab--index-target": "formRow" } ) do primer_form_with( - id: "work-package-journal-form", + id: "work-package-journal-form-element", # required for specs model: journal, method: :post, - data: { turbo: true, turbo_stream: true, "work-packages--activities-tab--index-target": "form", action: "submit->work-packages--activities-tab--index#onSubmit" }, + data: { + turbo: true, + turbo_stream: true, + "work-packages--activities-tab--index-target": "form", + action: "submit->work-packages--activities-tab--index#onSubmit", + "test_selector": "op-work-package-journal-form-element" + }, url: work_package_activities_path(work_package_id: work_package.id), ) do |f| flex_layout(justify_content: :space_between, align_items: :flex_end) do |form_container| - form_container.with_column(id: "ck-editor-column", mr: 2) do + form_container.with_column( + id: "ck-editor-adjustment-container", + classes: "work-packages-activities-tab-journals-new-component--ck-editor-column", + mr: 2 + ) do render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_column do diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index da0585d71b16..f4e406c58a28 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -1,28 +1,36 @@ -#work-packages-activities-tab-journals-new-component - #input-trigger-column +.work-packages-activities-tab-journals-new-component + &--input-trigger-column width: 100% button background: var(--bgColor-default) cursor: text .Button-content display: block - #ck-editor-column + &--ck-editor-column width: 100% @media screen and (max-width: $breakpoint-md) width: calc(100% - 40px) - // prototypical primer style adoptions - .ck-toolbar - border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px - .document-editor__editable-container - background: var(--bgColor-default) - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) - .ck-content - background: var(--bgColor-default) - max-height: 30vh - overflow-y: auto - border-radius: var(--borderRadius-medium) - margin: 5px - // overwrites margin bottom defined in _ckeditor.sass:13 - opce-ckeditor-augmented-textarea .op-ckeditor--wrapper - margin-bottom: 0px + // prototypical primer style adoptions, using ID in order to get higher priority, needs refactoring + #ck-editor-adjustment-container + .ck-toolbar + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px + .document-editor__editable-container + background: var(--bgColor-default) + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-content + background: var(--bgColor-default) + max-height: 30vh + overflow-y: auto + border-radius: var(--borderRadius-medium) + margin: 5px + .ck-editor__source + max-height: 30vh + .CodeMirror + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-editor__preview + max-height: 30vh + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + // overwrites margin bottom defined in _ckeditor.sass:13 + opce-ckeditor-augmented-textarea .op-ckeditor--wrapper + margin-bottom: 0px diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index cddfd54c27cb..fc41600399ca 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -296,7 +296,7 @@ export default class IndexController extends Controller { this.buttonRowTarget.classList.add('d-none'); this.formRowTarget.classList.remove('d-none'); - this.journalsContainerTarget?.classList.add('with-input-compensation'); + this.journalsContainerTarget?.classList.add('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); this.addEventListenersToCkEditorInstance(); @@ -357,8 +357,8 @@ export default class IndexController extends Controller { if (this.journalsContainerTarget) { this.journalsContainerTarget.style.marginBottom = ''; - this.journalsContainerTarget.classList.add('with-initial-input-compensation'); - this.journalsContainerTarget.classList.remove('with-input-compensation'); + this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation'); + this.journalsContainerTarget.classList.remove('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); } } } @@ -389,7 +389,7 @@ export default class IndexController extends Controller { } if (this.journalsContainerTarget) { this.journalsContainerTarget.style.marginBottom = ''; - this.journalsContainerTarget.classList.add('with-input-compensation'); + this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); } setTimeout(() => { this.scrollJournalContainer( diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 3cdb2e7e20f1..358f78291d7b 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -761,8 +761,8 @@ page.find("li[data-tab-id=\"activity\"]").click # expect the editor content to be rescued on the client side - within("#work-package-journal-form") do - editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + within_test_selector("op-work-package-journal-form-element") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element") editor.expect_value("First comment by admin") # save the comment, which was rescued on the client side page.find_test_selector("op-submit-work-package-journal-form").click @@ -790,8 +790,8 @@ page.find_by_id("open-work-package-journal-form").click # expect the editor content to be empty - within("#work-package-journal-form") do - editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + within_test_selector("op-work-package-journal-form-element") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element") editor.expect_value("") end end @@ -816,8 +816,8 @@ page.find_by_id("open-work-package-journal-form").click # expect the editor content to be empty - within("#work-package-journal-form") do - editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + within_test_selector("op-work-package-journal-form-element") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element") editor.expect_value("") end @@ -832,8 +832,8 @@ sleep 1 # expect the editor to be opened and content to be rescued for the correct user - within("#work-package-journal-form") do - editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form") + within_test_selector("op-work-package-journal-form-element") do + editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element") editor.expect_value("First comment by admin") end end diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index 7200cbc7df54..e0c9f2a536f9 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -88,11 +88,11 @@ def expect_no_journal_details_header(text: nil) end def expect_journal_notes_header(text: nil) - expect(page).to have_css(".journal-notes-header", text:) + expect(page).to have_test_selector("op-journal-notes-header", text:) end def expect_no_journal_notes_header(text: nil) - expect(page).to have_no_css(".journal-notes-header", text:) + expect(page).to have_test_selector("op-journal-notes-header", text:) end def expect_journal_notes(text: nil) @@ -147,13 +147,13 @@ def add_comment(text: nil, save: true) # TODO: get rid of static sleep sleep 1 # otherwise the stimulus component is not mounted yet and the click does not work - if page.has_css?("#open-work-package-journal-form") - page.find_by_id("open-work-package-journal-form").click + if page.find_test_selector("op-open-work-package-journal-form-trigger") + page.find_test_selector("op-open-work-package-journal-form-trigger").click else - expect(page).to have_css("#work-package-journal-form") + expect(page).to have_test_selector("op-work-package-journal-form-element") end - within("#work-package-journal-form") do + within_test_selector("op-work-package-journal-form-element") do FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) page.find_test_selector("op-submit-work-package-journal-form").click if save end @@ -170,7 +170,7 @@ def edit_comment(journal, text: nil) page.find_test_selector("op-wp-journal-#{journal.id}-action-menu").click page.find_test_selector("op-wp-journal-#{journal.id}-edit").click - within("#work-package-journal-form") do + within_test_selector("op-work-package-journal-form-element") do FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) page.find_test_selector("op-submit-work-package-journal-form").click end @@ -188,15 +188,15 @@ def quote_comment(journal) page.find_test_selector("op-wp-journal-#{journal.id}-quote").click end - expect(page).to have_css("#work-package-journal-form") + expect(page).to have_test_selector("op-work-package-journal-form-element") - within("#work-package-journal-form") do + within_test_selector("op-work-package-journal-form-element") do page.find_test_selector("op-submit-work-package-journal-form").click end end def get_all_comments_as_arrary - page.all(".journal-notes-body").map(&:text) + page.all(".work-packages-activities-tab-journals-item-component--journal-notes-body").map(&:text) end def filter_journals(filter) From ed653dfcc41fd599cfacb4fb35a8317ae1a5ce8d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 12:46:08 +0200 Subject: [PATCH 058/120] fixed specs after refactoring --- .../journals/item_component.html.erb | 5 +++- .../journals/item_component/details.rb | 6 +++-- .../journals/item_component/edit.html.erb | 4 ++-- .../work_package/activities_spec.rb | 12 +++++----- .../components/work_packages/activities.rb | 24 +++++++++---------- 5 files changed, 28 insertions(+), 23 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index d51e6c0fb371..46d405ec9bf6 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -55,7 +55,10 @@ end end end - border_box_component.with_body(classes: "work-packages-activities-tab-journals-item-component--journal-notes-body") do + border_box_component.with_body( + classes: "work-packages-activities-tab-journals-item-component--journal-notes-body", + data: { "test_selector": "op-journal-notes-body" } + ) do content end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 33424259864d..f5231f4ff90e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -68,7 +68,8 @@ def render_details_header(details_container) def render_header_start(header_container) header_container.with_column( flex_layout: true, - classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header" + classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header", + data: { "test-selector": "op-journal-details-header" } ) do |header_start_container| render_timeline_icon(header_start_container) render_user_avatar(header_start_container) @@ -185,7 +186,8 @@ def render_stem_line(container) def render_detail_description(container, detail) container.with_column(pl: 1, font_size: :small) do render(Primer::Beta::Text.new( - classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-description" + classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-description", + data: { "test-selector": "op-journal-detail-description" } )) do journal.render_detail(detail) end diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index b1144aa3913e..62ef4c4713bf 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -2,10 +2,10 @@ component_wrapper(class: "work-packages-activities-tab-journals-item-component-edit") do render(Primer::Box.new(my: 3)) do primer_form_with( - id: "work-package-journal-form", # required for specs + id: "work-package-journal-form-element", # required for specs model: journal, method: :put, - data: { turbo: true, turbo_stream: true }, + data: { turbo: true, turbo_stream: true, test_selector: "op-work-package-journal-form-element" }, url: work_package_activity_path(work_package_id: work_package.id, id: journal.id, filter:), ) do |f| flex_layout do |form_container| diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 358f78291d7b..774610ea0121 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -703,11 +703,11 @@ activity_tab.expect_journal_notes(text: "First comment by admin edited") end - # cannot edit other user's comment - # the edit button should not be shown + # can edit other user's comments due to the permission + activity_tab.edit_comment(first_comment_by_member, text: "First comment by member edited") + activity_tab.within_journal_entry(first_comment_by_member) do - page.find_test_selector("op-wp-journal-#{first_comment_by_member.id}-action-menu").click - expect(page).not_to have_test_selector("op-wp-journal-#{first_comment_by_member.id}-edit") + activity_tab.expect_journal_notes(text: "First comment by member edited") end end end @@ -787,7 +787,7 @@ # wait for the stimulus component to be mounted, TODO: get rid of static sleep sleep 1 # open the editor - page.find_by_id("open-work-package-journal-form").click + page.find_test_selector("op-open-work-package-journal-form-trigger").click # expect the editor content to be empty within_test_selector("op-work-package-journal-form-element") do @@ -813,7 +813,7 @@ # wait for the stimulus component to be mounted, TODO: get rid of static sleep sleep 1 # open the editor - page.find_by_id("open-work-package-journal-form").click + page.find_test_selector("op-open-work-package-journal-form-trigger").click # expect the editor content to be empty within_test_selector("op-work-package-journal-form-element") do diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index e0c9f2a536f9..e093c3290f38 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -68,23 +68,23 @@ def within_journal_entry(journal, &) end def expect_journal_changed_attribute(text:) - expect(page).to have_css(".journal-detail-description", text:) + expect(page).to have_test_selector("op-journal-detail-description", text:) end def expect_no_journal_changed_attribute(text: nil) - expect(page).to have_no_css(".journal-detail-description", text:) + expect(page).not_to have_test_selector("op-journal-detail-description", text:) end def expect_no_journal_notes(text: nil) - expect(page).to have_no_css(".journal-notes-body", text:) + expect(page).not_to have_test_selector("op-journal-notes-body", text:) end def expect_journal_details_header(text: nil) - expect(page).to have_css(".journal-details-header", text:) + expect(page).to have_test_selector("op-journal-details-header", text:) end def expect_no_journal_details_header(text: nil) - expect(page).to have_no_css(".journal-details-header", text:) + expect(page).not_to have_test_selector("op-journal-details-header", text:) end def expect_journal_notes_header(text: nil) @@ -92,11 +92,11 @@ def expect_journal_notes_header(text: nil) end def expect_no_journal_notes_header(text: nil) - expect(page).to have_test_selector("op-journal-notes-header", text:) + expect(page).not_to have_test_selector("op-journal-notes-header", text:) end def expect_journal_notes(text: nil) - expect(page).to have_css(".journal-notes-body", text:) + expect(page).to have_test_selector("op-journal-notes-body", text:) end def expect_notification_bubble @@ -153,8 +153,8 @@ def add_comment(text: nil, save: true) expect(page).to have_test_selector("op-work-package-journal-form-element") end - within_test_selector("op-work-package-journal-form-element") do - FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) + page.within_test_selector("op-work-package-journal-form-element") do + FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element").set_value(text) page.find_test_selector("op-submit-work-package-journal-form").click if save end @@ -170,8 +170,8 @@ def edit_comment(journal, text: nil) page.find_test_selector("op-wp-journal-#{journal.id}-action-menu").click page.find_test_selector("op-wp-journal-#{journal.id}-edit").click - within_test_selector("op-work-package-journal-form-element") do - FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form").set_value(text) + page.within_test_selector("op-work-package-journal-form-element") do + FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element").set_value(text) page.find_test_selector("op-submit-work-package-journal-form").click end @@ -190,7 +190,7 @@ def quote_comment(journal) expect(page).to have_test_selector("op-work-package-journal-form-element") - within_test_selector("op-work-package-journal-form-element") do + page.within_test_selector("op-work-package-journal-form-element") do page.find_test_selector("op-submit-work-package-journal-form").click end end From d308500badc7aabc899d0d02dd0e5a812881f115 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 13:05:30 +0200 Subject: [PATCH 059/120] fixed stem for filter states --- .../activities_tab/journals/item_component/details.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 0c4960475966..355308c8fb51 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -2,7 +2,7 @@ case filter when :only_comments flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| - render_empty_line(details_container) unless journal.initial? + render_empty_line(details_container) unless journal.notes.blank? end when :only_changes if journal.details.any? From bca765cb4718a1e727e35ddd2aa74126060cf285 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 13:30:20 +0200 Subject: [PATCH 060/120] mobile UX fixes --- .../work-packages/activities-tab/index.controller.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index fc41600399ca..38f20372bb77 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -175,7 +175,7 @@ export default class IndexController extends Controller { } private getInputContainer():HTMLElement | null { - return this.element.querySelector('#input-container'); + return this.element.querySelector('#work-package-journal-form-element'); } // TODO: get rid of static width value and reach for a more CSS based solution @@ -242,7 +242,6 @@ export default class IndexController extends Controller { // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access if (!editor.ui.focusTracker.isFocused) { this.hideEditorIfEmpty(); - if (this.isMobile()) { this.scrollInputContainerIntoView(300); } } }, 0); }, @@ -261,7 +260,7 @@ export default class IndexController extends Controller { // we have to handle different scrollable containers for different viewports in order to idenfity if the user is at the bottom of the journals // seems way to hacky for me, but I couldn't find a better solution if (this.isSmViewPort()) { - atBottom = (window.scrollY + window.outerHeight) >= document.body.scrollHeight; + atBottom = (window.scrollY + window.outerHeight + 10) >= document.body.scrollHeight; } else if (this.isMdViewPort()) { const scrollableContainer = document.querySelector('#content-body') as HTMLElement; @@ -360,6 +359,8 @@ export default class IndexController extends Controller { this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation'); this.journalsContainerTarget.classList.remove('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); } + + if (this.isMobile()) { this.scrollInputContainerIntoView(300); } } } From 9ebdc7eb2c2e2d31a25ea92c7f114d78a7a96a70 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 13:51:58 +0200 Subject: [PATCH 061/120] temporarly removed meta data as its consuming too much width with long date format settings, clarification with product team needed --- .../activities_tab/journals/item_component/details.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index f5231f4ff90e..7260c9bc19a8 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -74,7 +74,7 @@ def render_header_start(header_container) render_timeline_icon(header_start_container) render_user_avatar(header_start_container) render_user_name_and_time(header_start_container) - render_created_or_changed_on_text(header_start_container) + # render_created_or_changed_on_text(header_start_container) render_updated_time(header_start_container) end end From f203d9ad92fc00e312554a6dcfa768bb5fb9f62a Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 3 Sep 2024 14:06:13 +0200 Subject: [PATCH 062/120] ckeditor fixes due to more toolbar items, open editor when dragover, ckeditor still not accepting dropping files --- .../activities_tab/journals/new_component.html.erb | 2 +- .../work_packages/activities_tab/journals/new_component.sass | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index ed205021aeec..2b72154b522c 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -14,7 +14,7 @@ size: :medium, block: true, data: { - "action": "click->work-packages--activities-tab--index#showForm", + "action": "click->work-packages--activities-tab--index#showForm dragover->work-packages--activities-tab--index#showForm", "test_selector": "op-open-work-package-journal-form-trigger" } )) do diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index f4e406c58a28..48f40e9d9957 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -7,9 +7,7 @@ .Button-content display: block &--ck-editor-column - width: 100% - @media screen and (max-width: $breakpoint-md) - width: calc(100% - 40px) + width: calc(100% - 40px) // prototypical primer style adoptions, using ID in order to get higher priority, needs refactoring #ck-editor-adjustment-container .ck-toolbar From 518dbe74c16a19e80176b190838508a538053ea6 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 4 Sep 2024 11:42:43 +0200 Subject: [PATCH 063/120] fixed positioning issues caused by anchor scrolls via url and click on journal version --- .../journals/item_component.html.erb | 10 ++++-- .../journals/item_component/details.rb | 11 +++---- .../activities-tab/index.controller.ts | 33 ++++++++++++++----- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 46d405ec9bf6..5b945076288d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -4,7 +4,7 @@ if show_comment_container? journal_container.with_row do render(border_box_container( - id: "activity-#{journal.version}", + id: "activity-anchor-#{journal.version}", padding: :condensed )) do |border_box_component| border_box_component.with_header(px: 2, py: 1, data: { test_selector: "op-journal-notes-header" }) do @@ -33,11 +33,15 @@ end header_end_container.with_column do render(Primer::Beta::Link.new( - href: activity_anchor, + href: "#", scheme: :secondary, underline: false, font_size: :small, - data: { turbo: false } + data: { + turbo: false, + action: "click->work-packages--activities-tab--index#setAnchor:prevent", + "work-packages--activities-tab--index-id-param": journal.version + } )) do "##{journal.version}" end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 7260c9bc19a8..fcfed00b4bff 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -58,7 +58,7 @@ def render_details_header(details_container) flex_layout: true, justify_content: :space_between, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header-container", - id: "activity-#{journal.version}" + id: "activity-anchor-#{journal.version}" ) do |header_container| render_header_start(header_container) render_header_end(header_container) @@ -135,11 +135,12 @@ def render_notification_bubble(container) def render_activity_link(container) container.with_column(pr: 3) do render(Primer::Beta::Link.new( - href: activity_anchor, + href: "#", scheme: :secondary, underline: false, font_size: :small, - data: { turbo: false } + data: { turbo: false, action: "click->work-packages--activities-tab--index#setAnchor:prevent", + "work-packages--activities-tab--index-id-param": journal.version } )) do "##{journal.version}" end @@ -207,10 +208,6 @@ def bubble_html ".html_safe # rubocop:disable Rails/OutputSafety end - def activity_anchor - "#activity-#{journal.version}" - end - def journal_sorting User.current.preference&.comments_sorting || "desc" end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 38f20372bb77..cafa4dc7bb3c 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -5,6 +5,12 @@ import { } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; +interface CustomEventWithIdParam extends Event { + params:{ + id:string; + }; +} + export default class IndexController extends Controller { static values = { updateStreamsUrl: String, @@ -144,24 +150,26 @@ export default class IndexController extends Controller { private handleInitialScroll() { if (window.location.hash.includes('#activity-')) { - this.scrollToActivity(); + const activityId = window.location.hash.replace('#activity-', ''); + this.scrollToActivity(activityId); } else if (this.sortingValue === 'asc') { this.scrollToBottom(); } } - private scrollToActivity() { - const activityId = window.location.hash.replace('#activity-', ''); - const activityElement = document.getElementById(`activity-${activityId}`); - activityElement?.scrollIntoView({ behavior: 'smooth' }); + private scrollToActivity(activityId:string) { + const scrollableContainer = jQuery(this.element).scrollParent()[0]; + const activityElement = document.getElementById(`activity-anchor-${activityId}`); + + if (activityElement && scrollableContainer) { + scrollableContainer.scrollTop = activityElement.offsetTop-70; + } } private scrollToBottom() { const scrollableContainer = jQuery(this.element).scrollParent()[0]; if (scrollableContainer) { - setTimeout(() => { - scrollableContainer.scrollTop = scrollableContainer.scrollHeight; - }, 400); + scrollableContainer.scrollTop = scrollableContainer.scrollHeight; } } @@ -169,6 +177,15 @@ export default class IndexController extends Controller { setFilterToOnlyChanges() { this.filterValue = 'only_changes'; } unsetFilter() { this.filterValue = ''; } + setAnchor(event:CustomEventWithIdParam) { + // native anchor scroll is causing positioning issues + event.preventDefault(); + const activityId = event.params.id; + + this.scrollToActivity(activityId); + window.location.hash = `#activity-${activityId}`; + } + private getCkEditorInstance():ICKEditorInstance | null { const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); return AngularCkEditorElement ? jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance : null; From 27e5956d196b3c0461374a60a185515f3521449a Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 4 Sep 2024 12:18:21 +0200 Subject: [PATCH 064/120] added support for retracted journal entries --- .../journals/item_component.html.erb | 6 +++- .../activities_tab/journals/item_component.rb | 6 +++- .../journals/item_component/details.html.erb | 2 +- .../work_package/activities_spec.rb | 33 ++++++++++++------- 4 files changed, 32 insertions(+), 15 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 5b945076288d..09f463e25513 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -63,7 +63,11 @@ classes: "work-packages-activities-tab-journals-item-component--journal-notes-body", data: { "test_selector": "op-journal-notes-body" } ) do - content + unless noop? + content + else + render(Primer::Beta::Text.new(font_style: :italic, color: :subtle, mt: 1)) { I18n.t(:"journals.changes_retracted") } + end end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 8bdb2a4c1380..15c512a57053 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -73,7 +73,11 @@ def wrapper_data_attributes end def show_comment_container? - journal.notes.present? && filter != :only_changes + (journal.notes.present? || noop?) && filter != :only_changes + end + + def noop? + journal.noop? end def activity_url diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 355308c8fb51..868fc847b828 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -2,7 +2,7 @@ case filter when :only_comments flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| - render_empty_line(details_container) unless journal.notes.blank? + render_empty_line(details_container) unless journal.notes.blank? && !journal.noop? end when :only_changes if journal.details.any? diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 774610ea0121..4aaf8df7ae56 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -926,21 +926,30 @@ activity_tab.expect_journal_container_at_top end end + end - # describe "scrolling to the bottom when sorting set to asc" do - # it "scrolls to the bottom when the oldest journal entry is on top", :aggregate_failures do - # # add a comment - # activity_tab.add_comment(text: "First comment by admin") + describe "retracted journal entries" do + let(:work_package) { create(:work_package, project:, author: admin) } + let!(:first_comment_by_admin) do + create(:work_package_journal, user: admin, notes: "First comment by admin", journable: work_package, version: 2) + end + let!(:second_comment_by_admin) do + create(:work_package_journal, user: admin, notes: "Second comment by admin", journable: work_package, version: 3) + end - # # scroll to the top - # page.execute_script("document.querySelector('.op-wp-journals-container').scrollTop = 0") + current_user { admin } - # # add another comment - # activity_tab.add_comment(text: "Second comment by admin") + before do + second_comment_by_admin.update!(notes: "") - # # expect the oldest comment to be at the bottom - # activity_tab.expect_journal_notes(text: "First comment by admin") - # end - # end + wp_page.visit! + wp_page.wait_for_activity_tab + end + + it "shows rectracted journal entries", :aggregate_failures do + activity_tab.within_journal_entry(second_comment_by_admin) do + expect(page).to have_text(I18n.t(:"journals.changes_retracted")) + end + end end end From db65e97037c0159edcf0dc52ec7d73230e09f90d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 4 Sep 2024 12:32:07 +0200 Subject: [PATCH 065/120] disabling some rubocop checks as the permission specs seem not to follow them in general --- spec/permissions/edit_own_work_package_notes.rb | 2 +- spec/permissions/edit_project_attributes_spec.rb | 2 +- spec/permissions/edit_work_package_notes.rb | 2 +- spec/permissions/select_project_custom_fields_spec.rb | 2 +- spec/permissions/view_project_attributes_spec.rb | 2 +- spec/permissions/view_work_packages_spec.rb | 4 ++-- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/spec/permissions/edit_own_work_package_notes.rb b/spec/permissions/edit_own_work_package_notes.rb index 5ec44eb585d5..40774680c835 100644 --- a/spec/permissions/edit_own_work_package_notes.rb +++ b/spec/permissions/edit_own_work_package_notes.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe WorkPackages::ActivitiesTabController, "edit_own_work_package_notes permission", type: :controller do +RSpec.describe WorkPackages::ActivitiesTabController, "edit_own_work_package_notes permission", type: :controller do # rubocop:disable RSpec/EmptyExampleGroup include PermissionSpecs check_permission_required_for("work_packages/activities_tab#edit", :edit_work_package_notes) diff --git a/spec/permissions/edit_project_attributes_spec.rb b/spec/permissions/edit_project_attributes_spec.rb index b0fadf7cba28..4e35f7adaba9 100644 --- a/spec/permissions/edit_project_attributes_spec.rb +++ b/spec/permissions/edit_project_attributes_spec.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe Overviews::OverviewsController, "edit_project_attributes permission", +RSpec.describe Overviews::OverviewsController, "edit_project_attributes permission", # rubocop:disable RSpec/EmptyExampleGroup,RSpec/SpecFilePathFormat type: :controller do include PermissionSpecs diff --git a/spec/permissions/edit_work_package_notes.rb b/spec/permissions/edit_work_package_notes.rb index c40309dbc6c4..8c24c5f970c1 100644 --- a/spec/permissions/edit_work_package_notes.rb +++ b/spec/permissions/edit_work_package_notes.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe WorkPackages::ActivitiesTabController, "edit_work_package_notes permission", type: :controller do +RSpec.describe WorkPackages::ActivitiesTabController, "edit_work_package_notes permission", type: :controller do # rubocop:disable RSpec/EmptyExampleGroup include PermissionSpecs check_permission_required_for("work_packages/activities_tab#edit", :edit_work_package_notes) diff --git a/spec/permissions/select_project_custom_fields_spec.rb b/spec/permissions/select_project_custom_fields_spec.rb index 13f5d6974e75..cf2a98a4d8f8 100644 --- a/spec/permissions/select_project_custom_fields_spec.rb +++ b/spec/permissions/select_project_custom_fields_spec.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe Projects::Settings::ProjectCustomFieldsController, "select_project_custom_fields mappings permission", +RSpec.describe Projects::Settings::ProjectCustomFieldsController, "select_project_custom_fields mappings permission", # rubocop:disable RSpec/EmptyExampleGroup,RSpec/SpecFilePathFormat type: :controller do include PermissionSpecs diff --git a/spec/permissions/view_project_attributes_spec.rb b/spec/permissions/view_project_attributes_spec.rb index d1121041cdd4..530a5c04559f 100644 --- a/spec/permissions/view_project_attributes_spec.rb +++ b/spec/permissions/view_project_attributes_spec.rb @@ -29,7 +29,7 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe Overviews::OverviewsController, "view_project_attributes permission", +RSpec.describe Overviews::OverviewsController, "view_project_attributes permission", # rubocop:disable RSpec/EmptyExampleGroup,RSpec/SpecFilePathFormat type: :controller do include PermissionSpecs diff --git a/spec/permissions/view_work_packages_spec.rb b/spec/permissions/view_work_packages_spec.rb index 05358d38b44a..b953cd8cd282 100644 --- a/spec/permissions/view_work_packages_spec.rb +++ b/spec/permissions/view_work_packages_spec.rb @@ -29,14 +29,14 @@ require "spec_helper" require File.expand_path("../support/permission_specs", __dir__) -RSpec.describe WorkPackagesController, "view_work_packages permission", type: :controller do +RSpec.describe WorkPackagesController, "view_work_packages permission", type: :controller do # rubocop:disable RSpec/EmptyExampleGroup,RSpec/MultipleDescribes include PermissionSpecs check_permission_required_for("work_packages#show", :view_work_packages) check_permission_required_for("work_packages#index", :view_work_packages) end -RSpec.describe WorkPackages::ActivitiesTabController, "view_work_packages permission", type: :controller do +RSpec.describe WorkPackages::ActivitiesTabController, "view_work_packages permission", type: :controller do # rubocop:disable RSpec/EmptyExampleGroup include PermissionSpecs check_permission_required_for("work_packages/activities_tab#index", :view_work_packages) From a609070abbe11399d0223a1a1962330d5309c35d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 5 Sep 2024 18:23:14 +0200 Subject: [PATCH 066/120] WIP: implementing review feedback from @oliverguenther --- .../filter_and_sorting_component.html.erb | 10 ++++---- .../journals/item_component.html.erb | 13 ++++++---- .../activities_tab/journals/item_component.rb | 24 +------------------ .../journals/item_component.sass | 5 +--- .../journals/item_component/details.rb | 14 ++--------- .../journals/item_component/details.sass | 4 +--- .../journals/item_component/edit.html.erb | 2 +- 7 files changed, 20 insertions(+), 52 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb index e237db625964..e24c77508991 100644 --- a/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb @@ -15,7 +15,7 @@ href: update_filter_work_package_activities_path(work_package), content_arguments: { data: { - "turbo-stream": true, "action": "click->work-packages--activities-tab--index#unsetFilter", + turbo_stream: true, "action": "click->work-packages--activities-tab--index#unsetFilter", "test_selector": "op-wp-journals-filter-show-all" } }, @@ -26,7 +26,7 @@ href: update_filter_work_package_activities_path(work_package, filter: :only_changes), content_arguments: { data: { - "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges", + turbo_stream: true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyChanges", "test_selector": "op-wp-journals-filter-show-only-changes" } }, @@ -37,7 +37,7 @@ href: update_filter_work_package_activities_path(work_package, filter: :only_comments), content_arguments: { data: { - "turbo-stream": true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments", + turbo_stream: true, "action": "click->work-packages--activities-tab--index#setFilterToOnlyComments", "test_selector": "op-wp-journals-filter-show-only-comments" } }, @@ -55,7 +55,7 @@ href: update_sorting_work_package_activities_path(work_package, sorting: :desc, filter:), form_arguments: { method: :put }, content_arguments: { - data: { "turbo-stream": true, "test_selector": "op-wp-journals-sorting-desc" } + data: { turbo_stream: true, "test_selector": "op-wp-journals-sorting-desc" } }, active: desc_sorting? ) @@ -64,7 +64,7 @@ href: update_sorting_work_package_activities_path(work_package, sorting: :asc, filter:), form_arguments: { method: :put }, content_arguments: { - data: { "turbo-stream": true, "test_selector": "op-wp-journals-sorting-asc" } + data: { turbo_stream: true, "test_selector": "op-wp-journals-sorting-asc" } }, active: asc_sorting? ) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 09f463e25513..f14a0921b404 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -27,8 +27,8 @@ end header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? - header_end_container.with_column(mr: 2, pt: 1, classes: "work-packages-activities-tab-journals-item-component--bubble-container") do - bubble_html + header_end_container.with_column(mr: 2, pt: 1) do + render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium)) end end header_end_container.with_column do @@ -46,7 +46,7 @@ "##{journal.version}" end end - header_end_container.with_column(ml: 1) do + header_end_container.with_column(ml: 1, classes: "work-packages-activities-tab-journals-item-component--action-menu") do render(Primer::Alpha::ActionMenu.new(data: { "test_selector": "op-wp-journal-#{journal.id}-action-menu" })) do |menu| menu.with_show_button(icon: "kebab-horizontal", 'aria-label': I18n.t(:button_actions), @@ -64,7 +64,12 @@ data: { "test_selector": "op-journal-notes-body" } ) do unless noop? - content + case state + when :show + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new(journal:, filter:)) + when :edit + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Edit.new(journal:, filter:)) + end else render(Primer::Beta::Text.new(font_style: :italic, color: :subtle, mt: 1)) { I18n.t(:"journals.changes_retracted") } end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index 15c512a57053..e79ecc2c7662 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -43,15 +43,6 @@ def initialize(journal:, filter:, state: :show) @filter = filter end - def content - case state - when :show - render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Show.new(**child_component_params)) - when :edit - render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Edit.new(**child_component_params)) - end - end - private attr_reader :journal, :state, :filter @@ -60,10 +51,6 @@ def wrapper_uniq_by journal.id end - def child_component_params - { journal:, filter: }.compact - end - def wrapper_data_attributes { controller: "work-packages--activities-tab--item", @@ -126,7 +113,7 @@ def edit_action_item(menu) menu.with_item(label: t("js.label_edit_comment"), href: edit_work_package_activity_path(journal.journable, journal, filter:), content_arguments: { - data: { "turbo-stream": true, test_selector: "op-wp-journal-#{journal.id}-edit" } + data: { turbo_stream: true, test_selector: "op-wp-journal-#{journal.id}-edit" } }) do |item| item.with_leading_visual_icon(icon: :pencil) end @@ -146,15 +133,6 @@ def quote_action_item(menu) item.with_leading_visual_icon(icon: :quote) end end - - def bubble_html - " - - ".html_safe # rubocop:disable Rails/OutputSafety - end end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index 137934f33f5c..dcff2c3132aa 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -1,8 +1,5 @@ .work-packages-activities-tab-journals-item-component - &--bubble-container - padding-top: 2px - action-menu - // TODO: primer style adjustments, needs refactoring + &--action-menu button padding-top: 3px // for whatever reason, the dots in the action menu are not perfectly aligned in center vertically by default diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index fcfed00b4bff..9227eb0b56a9 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -126,9 +126,8 @@ def render_header_end(header_container) end def render_notification_bubble(container) - container.with_column(mr: 2, - classes: "work-packages-activities-tab-journals-item-component-details--bubble-container") do - bubble_html + container.with_column(mr: 2) do + render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium)) end end @@ -199,15 +198,6 @@ def render_empty_line(details_container) details_container.with_row(my: 1, font_size: :small, classes: "empty-line") end - def bubble_html - " - - ".html_safe # rubocop:disable Rails/OutputSafety - end - def journal_sorting User.current.preference&.comments_sorting || "desc" end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index 96cead666a77..42119d658f85 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -33,6 +33,4 @@ // quick hack to adapt the current detail rendering to desired primerised design i font-style: normal - color: var(--fgColor-muted, var(--color-fg-subtle)) - &--bubble-container - padding-top: 2px \ No newline at end of file + color: var(--fgColor-muted, var(--color-fg-subtle)) \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 62ef4c4713bf..95cfac1bec87 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -19,7 +19,7 @@ size: :medium, tag: :a, href: cancel_edit_work_package_activity_path(work_package.id, id: journal.id, filter:), - data: { "turbo-stream": true } + data: { turbo_stream: true } )) do t("button_cancel") end From 867aebceeea784314d1b7dc63d38f4532173e33f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Thu, 5 Sep 2024 19:01:05 +0200 Subject: [PATCH 067/120] make ckeditor primer adjustments reusable following input from @oliverguenther --- .../journals/item_component/edit.html.erb | 2 +- .../journals/item_component/edit.sass | 20 ++----------------- .../journals/new_component.html.erb | 1 - .../journals/new_component.sass | 17 +--------------- .../activities_tab/journals/notes_form.rb | 1 + .../src/global_styles/primer/_overrides.sass | 17 ++++++++++++++++ .../forms/dsl/rich_text_area_input.rb | 3 ++- .../forms/rich_text_area.html.erb | 5 +++-- 8 files changed, 27 insertions(+), 39 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 95cfac1bec87..7fee7fcb273c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -9,7 +9,7 @@ url: work_package_activity_path(work_package_id: work_package.id, id: journal.id, filter:), ) do |f| flex_layout do |form_container| - form_container.with_row(id: "ck-editor-adjustment-container") do + form_container.with_row(classes: "work-packages-activities-tab-journals-item-component-edit--ck-editor-adjustments") do render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.sass b/app/components/work_packages/activities_tab/journals/item_component/edit.sass index db9b6228a98e..2abc1c30d20c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.sass @@ -1,21 +1,5 @@ .work-packages-activities-tab-journals-item-component-edit - // prototypical primer style adoptions, using ID in order to get higher priority, needs refactoring - #ck-editor-adjustment-container - .ck-toolbar - border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px - .document-editor__editable-container - background: var(--bgColor-default) - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) - .ck-content - background: var(--bgColor-default) - overflow-y: auto - border-radius: var(--borderRadius-medium) - margin: 5px - .CodeMirror - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) - .ck-editor__preview - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + &--ck-editor-adjustments // overwrites margin bottom defined in _ckeditor.sass:13 opce-ckeditor-augmented-textarea .op-ckeditor--wrapper - margin-bottom: 0px - + margin-bottom: 0px \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/new_component.html.erb b/app/components/work_packages/activities_tab/journals/new_component.html.erb index 2b72154b522c..5ec55df8e037 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/new_component.html.erb @@ -50,7 +50,6 @@ ) do |f| flex_layout(justify_content: :space_between, align_items: :flex_end) do |form_container| form_container.with_column( - id: "ck-editor-adjustment-container", classes: "work-packages-activities-tab-journals-new-component--ck-editor-column", mr: 2 ) do diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index 48f40e9d9957..fe203c323480 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -8,26 +8,11 @@ display: block &--ck-editor-column width: calc(100% - 40px) - // prototypical primer style adoptions, using ID in order to get higher priority, needs refactoring - #ck-editor-adjustment-container - .ck-toolbar - border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px - .document-editor__editable-container - background: var(--bgColor-default) - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + // specific ck editor adjustments .ck-content - background: var(--bgColor-default) - max-height: 30vh - overflow-y: auto - border-radius: var(--borderRadius-medium) - margin: 5px - .ck-editor__source max-height: 30vh - .CodeMirror - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) .ck-editor__preview max-height: 30vh - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) // overwrites margin bottom defined in _ckeditor.sass:13 opce-ckeditor-augmented-textarea .op-ckeditor--wrapper margin-bottom: 0px diff --git a/app/forms/work_packages/activities_tab/journals/notes_form.rb b/app/forms/work_packages/activities_tab/journals/notes_form.rb index 9dbd30cf14e1..d1639045691e 100644 --- a/app/forms/work_packages/activities_tab/journals/notes_form.rb +++ b/app/forms/work_packages/activities_tab/journals/notes_form.rb @@ -31,6 +31,7 @@ class NotesForm < ApplicationForm form do |notes_form| notes_form.rich_text_area( + classes: "ck-editor-primer-adjusted", name: :notes, label: nil, rich_text_options: { diff --git a/frontend/src/global_styles/primer/_overrides.sass b/frontend/src/global_styles/primer/_overrides.sass index e74b5c0e2690..3619814449ee 100644 --- a/frontend/src/global_styles/primer/_overrides.sass +++ b/frontend/src/global_styles/primer/_overrides.sass @@ -93,3 +93,20 @@ sub-header, &:hover background: var(--header-item-bg-hover-color) color: var(--header-item-font-hover-color) + +// Prototypical CKEditor adjustments to better match Primer styles +.ck-editor-primer-adjusted + .ck-toolbar + border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0px 0px!important + .document-editor__editable-container + background: var(--bgColor-default) + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-content + background: var(--bgColor-default) + overflow-y: auto + border-radius: var(--borderRadius-medium)!important + margin: 5px + .CodeMirror + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .ck-editor__preview + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) \ No newline at end of file diff --git a/lib/primer/open_project/forms/dsl/rich_text_area_input.rb b/lib/primer/open_project/forms/dsl/rich_text_area_input.rb index 5cf58d9abd28..4ae4facfa02f 100644 --- a/lib/primer/open_project/forms/dsl/rich_text_area_input.rb +++ b/lib/primer/open_project/forms/dsl/rich_text_area_input.rb @@ -5,12 +5,13 @@ module OpenProject module Forms module Dsl class RichTextAreaInput < Primer::Forms::Dsl::Input - attr_reader :name, :label + attr_reader :name, :label, :classes def initialize(name:, label:, rich_text_options:, **system_arguments) @name = name @label = label @rich_text_options = rich_text_options + @classes = system_arguments[:classes] super(**system_arguments) end diff --git a/lib/primer/open_project/forms/rich_text_area.html.erb b/lib/primer/open_project/forms/rich_text_area.html.erb index 671274e3f04d..fc34cef585c5 100644 --- a/lib/primer/open_project/forms/rich_text_area.html.erb +++ b/lib/primer/open_project/forms/rich_text_area.html.erb @@ -2,13 +2,14 @@ <%= content_tag(:div, hidden: true) do %> <%= builder.text_area(@input.name, **@input.input_arguments) %> <% end %> - <%= angular_component_tag 'opce-ckeditor-augmented-textarea', + <%= angular_component_tag "opce-ckeditor-augmented-textarea", inputs: @rich_text_options.reverse_merge( { textareaSelector: "##{builder.field_id(@input.name)}", macros: false, turboMode: true } - ) + ), + class: @input.classes %> <% end %> From 2c3cf42c94d1fc769974ddfd3ad0125c78c043c9 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 6 Sep 2024 16:28:16 +0200 Subject: [PATCH 068/120] WIP implementing review feedback from Oliver --- app/components/_index.sass | 1 - .../journals/item_component.html.erb | 11 +++-- .../journals/item_component.sass | 5 ++ .../journals/item_component/details.html.erb | 46 +++++++++---------- .../journals/item_component/details.rb | 35 +++++++------- .../journals/item_component/details.sass | 5 ++ .../journals/item_component/edit.html.erb | 2 +- .../journals/item_component/edit.sass | 5 -- .../journals/item_component/show.html.erb | 10 ++-- .../journals/new_component.sass | 4 -- .../activities_tab/shared_helpers.rb | 13 +----- .../src/global_styles/primer/_overrides.sass | 4 +- 12 files changed, 66 insertions(+), 75 deletions(-) delete mode 100644 app/components/work_packages/activities_tab/journals/item_component/edit.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index e48d5a692ae7..f93fc2f6f20a 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -2,7 +2,6 @@ @import "work_packages/activities_tab/journals/new_component" @import "work_packages/activities_tab/journals/index_component" @import "work_packages/activities_tab/journals/item_component" -@import "work_packages/activities_tab/journals/item_component/edit" @import "work_packages/activities_tab/journals/item_component/details" @import "shares/modal_body_component" @import "shares/invite_user_form_component" diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index f14a0921b404..28122035f35c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -9,18 +9,21 @@ )) do |border_box_component| border_box_component.with_header(px: 2, py: 1, data: { test_selector: "op-journal-notes-header" }) do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| - header_container.with_column(flex_layout: true) do |header_start_container| + header_container.with_column(flex_layout: true, classes: "ellipsis") do |header_start_container| header_start_container.with_column(mr: 2) do render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) end - header_start_container.with_column(mr: 1, flex_layout: true) do |user_name_container| - user_name_container.with_row do + header_start_container.with_column(mr: 1, flex_layout: true, classes: "work-packages-activities-tab-journals-item-component--user-name-container hidden-for-desktop") do |user_name_container| + user_name_container.with_row(classes: "work-packages-activities-tab-journals-item-component--user-name ellipsis") do truncated_user_name(journal.user) end - user_name_container.with_row(classes: "hidden-for-desktop") do + user_name_container.with_row do render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } end end + header_start_container.with_column(mr: 1, classes: "work-packages-activities-tab-journals-item-component--user-name ellipsis hidden-for-mobile") do + truncated_user_name(journal.user) + end header_start_container.with_column(mr: 1, classes: "hidden-for-mobile") do render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } end diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index dcff2c3132aa..9d32dd8f26e7 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -2,5 +2,10 @@ &--action-menu button padding-top: 3px // for whatever reason, the dots in the action menu are not perfectly aligned in center vertically by default + &--user-name-container + max-width: 80% + &--user-name + @media screen and (min-width: $breakpoint-sm) + max-width: 40% diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb index 868fc847b828..04e3144a0aa2 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.html.erb @@ -1,31 +1,29 @@ -<%= component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do - case filter - when :only_comments +<%= + component_wrapper(class: "work-packages-activities-tab-journals-item-component-details") do flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| - render_empty_line(details_container) unless journal.notes.blank? && !journal.noop? - end - when :only_changes - if journal.details.any? - flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| - render_details_header(details_container) - render_details(details_container) - end - end - else # :all or any other state - flex_layout(my: 0, border: :left, classes: "work-packages-activities-tab-journals-item-component-details--journal-details-container") do |details_container| - if journal.details.any? - if journal.notes.present? - render_details(details_container) - else + case filter + when :only_comments + render_empty_line(details_container) unless journal.notes.blank? && !journal.noop? + when :only_changes + if journal.details.any? render_details_header(details_container) render_details(details_container) end - elsif journal.notes.present? - render_details(details_container) else - # empty row to render the flex layout with its minimal height - render_empty_line(details_container) + if journal.details.any? + if journal.notes.present? + render_details(details_container) + else + render_details_header(details_container) + render_details(details_container) + end + elsif journal.notes.present? + render_details(details_container) + else + # empty row to render the flex layout with its minimal height + render_empty_line(details_container) + end end end - end -end %> \ No newline at end of file + end +%> \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 9227eb0b56a9..ebbe8cc3335a 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -68,13 +68,13 @@ def render_details_header(details_container) def render_header_start(header_container) header_container.with_column( flex_layout: true, - classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header", + classes: "work-packages-activities-tab-journals-item-component-details--journal-details-header ellipsis", data: { "test-selector": "op-journal-details-header" } ) do |header_start_container| render_timeline_icon(header_start_container) render_user_avatar(header_start_container) - render_user_name_and_time(header_start_container) - # render_created_or_changed_on_text(header_start_container) + render_user_name_for_desktop(header_start_container) + render_user_name_and_time_for_mobile(header_start_container) render_updated_time(header_start_container) end end @@ -92,23 +92,24 @@ def render_user_avatar(container) end end - def render_user_name_and_time(container) - container.with_column(mr: 1, flex_layout: true) do |user_name_container| - user_name_container.with_row { truncated_user_name(journal.user) } - user_name_container.with_row(classes: "hidden-for-desktop") do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.created_at) } - end + def render_user_name_for_desktop(container) + container.with_column(mr: 1, + classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis hidden-for-mobile") do + truncated_user_name(journal.user) end end - def render_created_or_changed_on_text(container) - container.with_column(mr: 1, classes: "hidden-for-mobile") do - text_key = if journal.initial? - "activities.work_packages.activity_tab.created_on" - else - "activities.work_packages.activity_tab.changed_on" - end - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { t(text_key) } + def render_user_name_and_time_for_mobile(container) + container.with_column( + mr: 1, classes: "work-packages-activities-tab-journals-item-component-details--user-name-container hidden-for-desktop", + flex_layout: true + ) do |user_name_and_time_container| + user_name_and_time_container.with_row(classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis") do + truncated_user_name(journal.user) + end + user_name_and_time_container.with_row do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index 42119d658f85..a5bc331b4889 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -14,6 +14,11 @@ text-align: center padding-top: 3px margin-top: -2px + &--user-name-container + max-width: 60% + &--user-name + @media screen and (min-width: $breakpoint-sm) + max-width: 40% &--empty-line margin-top: 0px!important margin-bottom: 0px!important diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb index 7fee7fcb273c..3e06b98ddd12 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/edit.html.erb @@ -9,7 +9,7 @@ url: work_package_activity_path(work_package_id: work_package.id, id: journal.id, filter:), ) do |f| flex_layout do |form_container| - form_container.with_row(classes: "work-packages-activities-tab-journals-item-component-edit--ck-editor-adjustments") do + form_container.with_row do render(WorkPackages::ActivitiesTab::Journals::NotesForm.new(f)) end form_container.with_row(flex_layout: true, mt: 3, justify_content: :flex_end) do |submit_container| diff --git a/app/components/work_packages/activities_tab/journals/item_component/edit.sass b/app/components/work_packages/activities_tab/journals/item_component/edit.sass deleted file mode 100644 index 2abc1c30d20c..000000000000 --- a/app/components/work_packages/activities_tab/journals/item_component/edit.sass +++ /dev/null @@ -1,5 +0,0 @@ -.work-packages-activities-tab-journals-item-component-edit - &--ck-editor-adjustments - // overwrites margin bottom defined in _ckeditor.sass:13 - opce-ckeditor-augmented-textarea .op-ckeditor--wrapper - margin-bottom: 0px \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb index e633da638406..4a71f71166e0 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/show.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component/show.html.erb @@ -1,12 +1,10 @@ <%= component_wrapper do - if journal.notes.present? || (journal.details.any? && !journal.initial?) + if journal.notes.present? flex_layout do |journal_container| - if journal.notes.present? - journal_container.with_row do - render(Primer::Box.new(mt: 1)) do - format_text(journal, :notes) - end + journal_container.with_row do + render(Primer::Box.new(mt: 1)) do + format_text(journal, :notes) end end end diff --git a/app/components/work_packages/activities_tab/journals/new_component.sass b/app/components/work_packages/activities_tab/journals/new_component.sass index fe203c323480..2deebf6c581e 100644 --- a/app/components/work_packages/activities_tab/journals/new_component.sass +++ b/app/components/work_packages/activities_tab/journals/new_component.sass @@ -13,7 +13,3 @@ max-height: 30vh .ck-editor__preview max-height: 30vh - // overwrites margin bottom defined in _ckeditor.sass:13 - opce-ckeditor-augmented-textarea .op-ckeditor--wrapper - margin-bottom: 0px - diff --git a/app/components/work_packages/activities_tab/shared_helpers.rb b/app/components/work_packages/activities_tab/shared_helpers.rb index 10ed02e84500..af35384e2b09 100644 --- a/app/components/work_packages/activities_tab/shared_helpers.rb +++ b/app/components/work_packages/activities_tab/shared_helpers.rb @@ -39,18 +39,7 @@ def truncated_user_name(user) underline: false, font_weight: :bold )) do - component_collection do |collection| - collection.with_component(Primer::Beta::Truncate.new(classes: "hidden-for-mobile")) do |component| - component.with_item(max_width: 180) do - user.name - end - end - collection.with_component(Primer::Beta::Truncate.new(classes: "hidden-for-desktop")) do |component| - component.with_item(max_width: 220) do - user.name - end - end - end + user.name end end end diff --git a/frontend/src/global_styles/primer/_overrides.sass b/frontend/src/global_styles/primer/_overrides.sass index 3619814449ee..1715874f6619 100644 --- a/frontend/src/global_styles/primer/_overrides.sass +++ b/frontend/src/global_styles/primer/_overrides.sass @@ -109,4 +109,6 @@ sub-header, .CodeMirror border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) .ck-editor__preview - border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) \ No newline at end of file + border-radius: 0px 0px var(--borderRadius-medium) var(--borderRadius-medium) + .op-ckeditor--wrapper + margin-bottom: 0px \ No newline at end of file From 9ef7760168091f2b6f3ad6be07ecbf281fca0f6b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 9 Sep 2024 19:14:28 +0200 Subject: [PATCH 069/120] added generic error handling for initial and subsequent requests --- .../error_frame_component.html.erb | 7 ++ .../activities_tab/error_frame_component.rb | 46 ++++++++++ .../error_stream_component.html.erb | 7 ++ .../activities_tab/error_stream_component.rb | 47 ++++++++++ .../activities_tab/index_component.html.erb | 75 +++++++++------- .../activities_tab/index_component.sass | 8 ++ .../activities_tab_controller.rb | 89 ++++++++++++------- 7 files changed, 214 insertions(+), 65 deletions(-) create mode 100644 app/components/work_packages/activities_tab/error_frame_component.html.erb create mode 100644 app/components/work_packages/activities_tab/error_frame_component.rb create mode 100644 app/components/work_packages/activities_tab/error_stream_component.html.erb create mode 100644 app/components/work_packages/activities_tab/error_stream_component.rb diff --git a/app/components/work_packages/activities_tab/error_frame_component.html.erb b/app/components/work_packages/activities_tab/error_frame_component.html.erb new file mode 100644 index 000000000000..6d97c63bf8e2 --- /dev/null +++ b/app/components/work_packages/activities_tab/error_frame_component.html.erb @@ -0,0 +1,7 @@ +<%= + content_tag("turbo-frame", id: "work-package-activities-tab-content") do + unless error_message.blank? + render(Primer::Alpha::Banner.new(scheme: :danger)) { error_message } + end + end +%> \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/error_frame_component.rb b/app/components/work_packages/activities_tab/error_frame_component.rb new file mode 100644 index 000000000000..4f18eb400ee2 --- /dev/null +++ b/app/components/work_packages/activities_tab/error_frame_component.rb @@ -0,0 +1,46 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + class ErrorFrameComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + + def initialize(error_message: nil) + super + + @error_message = error_message + end + + attr_reader :error_message + end + end +end diff --git a/app/components/work_packages/activities_tab/error_stream_component.html.erb b/app/components/work_packages/activities_tab/error_stream_component.html.erb new file mode 100644 index 000000000000..bf1996f98052 --- /dev/null +++ b/app/components/work_packages/activities_tab/error_stream_component.html.erb @@ -0,0 +1,7 @@ +<%= + component_wrapper do + unless error_message.blank? + render(Primer::Alpha::Banner.new(scheme: :danger, dismiss_scheme: :hide)) { error_message } + end + end +%> \ No newline at end of file diff --git a/app/components/work_packages/activities_tab/error_stream_component.rb b/app/components/work_packages/activities_tab/error_stream_component.rb new file mode 100644 index 000000000000..b39a22e2d201 --- /dev/null +++ b/app/components/work_packages/activities_tab/error_stream_component.rb @@ -0,0 +1,47 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2023 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 WorkPackages + module ActivitiesTab + class ErrorStreamComponent < ApplicationComponent + include ApplicationHelper + include OpPrimer::ComponentHelpers + include OpTurbo::Streamable + + def initialize(error_message: nil) + super + + @error_message = error_message + end + + attr_reader :error_message + end + end +end diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 0235914aa290..927969fe0a7d 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -1,41 +1,50 @@ <%= content_tag("turbo-frame", id: "work-package-activities-tab-content") do - component_wrapper(data: wrapper_data_attributes, class: "work-packages-activities-tab-index-component") do - flex_layout do |activties_tab_container| - activties_tab_container.with_row(mb: 2) do - render( - WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( - work_package:, - filter: - ) - ) - end - activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container| - journals_wrapper_container.with_row( - classes: "work-packages-activities-tab-index-component--journals-container work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation", - data: { "work-packages--activities-tab--index-target": "journalsContainer" } - ) do - render( - WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) - ) - end - if adding_comment_allowed? - journals_wrapper_container.with_row( - classes: "work-packages-activities-tab-index-component--input-container work-packages-activities-tab-index-component--input-container_sort-#{journal_sorting}", - mt: 3, - mb: [3, nil, nil, nil, 0], - pt: 2, - pb: 2, - pl: 3, - pr: [3, nil, nil, nil, 2], - border: [nil, nil, nil, nil, :top], - border_radius: [2, nil, nil, nil, 0], - bg: :subtle - ) do + flex_layout(classes: "work-packages-activities-tab-index-component") do |activties_tab_wrapper_container| + activties_tab_wrapper_container.with_row(classes: "work-packages-activities-tab-index-component--errors") do + render( + WorkPackages::ActivitiesTab::ErrorStreamComponent.new + ) + end + activties_tab_wrapper_container.with_row do + component_wrapper(data: wrapper_data_attributes) do + flex_layout do |activties_tab_container| + activties_tab_container.with_row(mb: 2) do render( - WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new( + work_package:, + filter: + ) ) end + activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container| + journals_wrapper_container.with_row( + classes: "work-packages-activities-tab-index-component--journals-container work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation", + data: { "work-packages--activities-tab--index-target": "journalsContainer" } + ) do + render( + WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:) + ) + end + if adding_comment_allowed? + journals_wrapper_container.with_row( + classes: "work-packages-activities-tab-index-component--input-container work-packages-activities-tab-index-component--input-container_sort-#{journal_sorting}", + mt: 3, + mb: [3, nil, nil, nil, 0], + pt: 2, + pb: 2, + pl: 3, + pr: [3, nil, nil, nil, 2], + border: [nil, nil, nil, nil, :top], + border_radius: [2, nil, nil, nil, 0], + bg: :subtle + ) do + render( + WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:) + ) + end + end + end end end end diff --git a/app/components/work_packages/activities_tab/index_component.sass b/app/components/work_packages/activities_tab/index_component.sass index febca87c159f..d4c6750a2db6 100644 --- a/app/components/work_packages/activities_tab/index_component.sass +++ b/app/components/work_packages/activities_tab/index_component.sass @@ -1,4 +1,12 @@ .work-packages-activities-tab-index-component + &--errors + position: absolute + width: calc(100% - 22px) + z-index: 11 + @media screen and (max-width: $breakpoint-xl) + position: fixed + bottom: 20px + width: calc(100% - 30px) &--journals-container z-index: 10 padding-top: 3px diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 15c7cee6bbcc..bac9f428171f 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -51,10 +51,10 @@ def update_streams if params[:last_update_timestamp].present? generate_time_based_update_streams(params[:last_update_timestamp]) else - status = :bad_request + @turbo_status = :bad_request end - respond_with_turbo_streams(status: status || :ok) + respond_with_turbo_streams end def update_filter @@ -85,13 +85,13 @@ def update_sorting # we need to call replace in order to properly re-init the index stimulus component replace_whole_tab else - status = :bad_request + @turbo_status = :bad_request end else - status = :bad_request + @turbo_status = :bad_request end - respond_with_turbo_streams(status: status || :ok) + respond_with_turbo_streams end def edit @@ -104,10 +104,10 @@ def edit ) ) else - status = :forbidden + @turbo_status = :forbidden end - respond_with_turbo_streams(status: status || :ok) + respond_with_turbo_streams end def cancel_edit @@ -120,10 +120,10 @@ def cancel_edit ) ) else - status = :forbidden + @turbo_status = :forbidden end - respond_with_turbo_streams(status: status || :ok) + respond_with_turbo_streams end def create @@ -133,44 +133,72 @@ def create handle_successful_create_call(call) else handle_failed_create_call(call) # errors should be rendered in the form - status = :bad_request + @turbo_status = :bad_request end - respond_with_turbo_streams(status: status || :created) + respond_with_turbo_streams end def update - if journal_params[:notes].present? - call = Journals::UpdateService.new(model: @journal, user: User.current).call( - notes: journal_params[:notes] - ) + call = Journals::UpdateService.new(model: @journal, user: User.current).call( + notes: journal_params[:notes] + ) - if call.success? && call.result - update_item_component(call.result, state: :show) - else - status = handle_failed_update_call(call) - end + if call.success? && call.result + update_item_component(call.result, state: :show) else - # disallow empty notes - status = :bad_request - update_item_component(@journal, state: :edit) # rerender form with initial values + handle_failed_update_call(call) end - respond_with_turbo_streams(status: status || :ok) + respond_with_turbo_streams end private + def respond_with_error(error_message) + respond_to do |format| + # turbo_frame requests (tab is initially rendered and an error occured) are handled below + format.html do + render( + WorkPackages::ActivitiesTab::ErrorFrameComponent.new( + error_message: + ), + layout: false, + status: :not_found + ) + end + # turbo_stream requests (tab is already rendered and an error occured in subsequent requests) are handled below + format.turbo_stream do + @turbo_status = :not_found + render_error_banner_via_turbo_stream(error_message) + end + end + end + + def render_error_banner_via_turbo_stream(error_message) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::ErrorStreamComponent.new( + error_message: + ) + ) + end + def find_work_package @work_package = WorkPackage.find(params[:work_package_id]) + rescue ActiveRecord::RecordNotFound + respond_with_error(I18n.t("label_not_found")) end def find_project @project = @work_package.project + rescue ActiveRecord::RecordNotFound + respond_with_error(I18n.t("label_not_found")) end def find_journal @journal = Journal.find(params[:id]) + rescue ActiveRecord::RecordNotFound + respond_with_error(I18n.t("label_not_found")) end def set_filter @@ -219,14 +247,11 @@ def handle_failed_create_call(call) end def handle_failed_update_call(call) - status = if call.errors&.first&.type == :error_unauthorized - :forbidden - else - :bad_request - end - update_item_component(call.result, state: :edit) # errors should be rendered in the form - - status + @turbo_status = if call.errors&.first&.type == :error_unauthorized + :forbidden + else + :bad_request + end end def replace_whole_tab From 0481ed3aee042dd550744dabef22dd334703ed81 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 10 Sep 2024 16:37:00 +0200 Subject: [PATCH 070/120] moved ckeditor code as requested by @oliverguenther --- .../ckeditor-augmented-textarea.component.ts | 14 ++- .../ckeditor-augmented-textarea.html | 2 + .../ckeditor/op-ckeditor.component.ts | 45 +++++++++- .../activities-tab/index.controller.ts | 88 +++++++------------ 4 files changed, 91 insertions(+), 58 deletions(-) diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts index 5ddd211c826e..5857b0b8e307 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts +++ b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts @@ -26,7 +26,7 @@ // See COPYRIGHT and LICENSE files for more details. //++ -import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, OnInit, ViewChild } from '@angular/core'; import { PathHelperService } from 'core-app/core/path-helper/path-helper.service'; import { HalResource } from 'core-app/features/hal/resources/hal-resource'; import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service'; @@ -72,6 +72,15 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl @Input() public showAttachments = true; + // Output save requests (ctrl+enter and cmd+enter) + @Output() saveRequested = new EventEmitter(); + + // Output keyup events + @Output() editorKeyup = new EventEmitter(); + + // Output blur events + @Output() editorBlur = new EventEmitter(); + // Which template to include public element:HTMLElement; @@ -159,6 +168,7 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl } public async saveForm(evt?:SubmitEvent):Promise { + this.saveRequested.emit(); // Provide a hook for the parent component to do something before the form is submitted this.inFlight = true; this.syncToTextarea(); @@ -180,6 +190,8 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl }); } + + public setup(editor:ICKEditorInstance) { // Have a hacky way to access the editor from outside of angular. // This is e.g. employed to set the text from outside to reuse the same editor for different languages. diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.html b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.html index 771c286e38fa..fa8ffc51dc59 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.html +++ b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.html @@ -5,6 +5,8 @@ (initializeDone)="setup($event)" (contentChanged)="markEdited()" (saveRequested)="saveForm()" + (editorKeyup)="editorKeyup.emit()" + (editorBlur)="editorBlur.emit()" >
diff --git a/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts index d3e3ba883b07..e1716d82a2ac 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts +++ b/frontend/src/app/shared/components/editor/components/ckeditor/op-ckeditor.component.ts @@ -71,6 +71,12 @@ export class OpCkeditorComponent extends UntilDestroyedMixin implements OnInit, // Output save requests (ctrl+enter and cmd+enter) @Output() saveRequested = new EventEmitter(); + // Output key up events + @Output() editorKeyup = new EventEmitter(); + + // Output blur events + @Output() editorBlur = new EventEmitter(); + // View container of the replacement used to initialize CKEditor5 @ViewChild('opCkeditorReplacementContainer', { static: true }) opCkeditorReplacementContainer:ElementRef; @@ -235,6 +241,12 @@ export class OpCkeditorComponent extends UntilDestroyedMixin implements OnInit, // Capture CTRL+ENTER commands this.interceptModifiedEnterKeystrokes(editor); + // Capture and emit key up events + this.interceptKeyup(editor); + + // Capture and emit blur events + this.interceptBlur(editor); + // Emit global dragend events for other drop zones to react. // This is needed, as CKEditor does not bubble any drag events const model = watchdog.editor.model; @@ -257,13 +269,44 @@ export class OpCkeditorComponent extends UntilDestroyedMixin implements OnInit, if ((data.ctrlKey || data.metaKey) && data.keyCode === KeyCodes.ENTER) { debugLog('Sending save request from CKEditor.'); this.saveRequested.emit(); - // evt.stop(); + evt.stop(); } }, { priority: 'highest' }, ); } + private interceptKeyup(editor:ICKEditorInstance) { + editor.listenTo( + editor.editing.view.document, + 'keyup', + (event) => { + this.editorKeyup.emit(); + event.stop(); + }, + { priority: 'highest' }, + ); + } + + private interceptBlur(editor:ICKEditorInstance) { + editor.listenTo( + editor.editing.view.document, + 'change:isFocused', + () => { + // without the timeout `isFocused` is still true even if the editor was blurred + // current limitation: + // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore + setTimeout(() => { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + if (!editor.ui.focusTracker.isFocused) { + this.editorBlur.emit(); + } + }, 0); + }, + { priority: 'highest' }, + ); + } + /** * Disable the manual mode, kill the codeMirror instance and switch back to CKEditor */ diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index cafa4dc7bb3c..e2176862308d 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -3,7 +3,6 @@ import { Controller } from '@hotwired/stimulus'; import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; -import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum'; interface CustomEventWithIdParam extends Event { params:{ @@ -42,6 +41,10 @@ export default class IndexController extends Controller { private handleVisibilityChangeBound:EventListener; private rescueEditorContentBound:EventListener; + private onSubmitBound:EventListener; + private adjustMarginBound:EventListener; + private hideEditorBound:EventListener; + connect() { this.setLocalStorageKey(); this.setLastUpdateTimestamp(); @@ -64,9 +67,9 @@ export default class IndexController extends Controller { } private setupEventListeners() { - this.handleWorkPackageUpdateBound = this.handleWorkPackageUpdate.bind(this); - this.handleVisibilityChangeBound = this.handleVisibilityChange.bind(this); - this.rescueEditorContentBound = this.rescueEditorContent.bind(this); + this.handleWorkPackageUpdateBound = () => { void this.handleWorkPackageUpdate(); }; + this.handleVisibilityChangeBound = () => { void this.handleVisibilityChange(); }; + this.rescueEditorContentBound = () => { void this.rescueEditorContent(); }; document.addEventListener('work-package-updated', this.handleWorkPackageUpdateBound); document.addEventListener('visibilitychange', this.handleVisibilityChangeBound); @@ -101,7 +104,7 @@ export default class IndexController extends Controller { return window.setInterval(() => this.updateActivitiesList(), this.pollingIntervalInMsValue); } - handleWorkPackageUpdate(_event:Event):void { + handleWorkPackageUpdate(_event?:Event):void { setTimeout(() => this.updateActivitiesList(), 2000); } @@ -186,8 +189,12 @@ export default class IndexController extends Controller { window.location.hash = `#activity-${activityId}`; } + private getCkEditorElement():HTMLElement | null { + return this.element.querySelector('opce-ckeditor-augmented-textarea'); + } + private getCkEditorInstance():ICKEditorInstance | null { - const AngularCkEditorElement = this.element.querySelector('opce-ckeditor-augmented-textarea'); + const AngularCkEditorElement = this.getCkEditorElement(); return AngularCkEditorElement ? jQuery(AngularCkEditorElement).data('editor') as ICKEditorInstance : null; } @@ -211,59 +218,25 @@ export default class IndexController extends Controller { } private addEventListenersToCkEditorInstance() { - const editor = this.getCkEditorInstance(); - if (editor) { - this.addKeydownListener(editor); - this.addKeyupListener(editor); - this.addBlurListener(editor); + this.onSubmitBound = () => { void this.onSubmit(); }; + this.adjustMarginBound = () => { void this.adjustJournalContainerMargin(); }; + this.hideEditorBound = () => { void this.hideEditorIfEmpty(); }; + + const editorElement = this.getCkEditorElement(); + if (editorElement) { + editorElement.addEventListener('saveRequested', this.onSubmitBound); + editorElement.addEventListener('editorKeyup', this.adjustMarginBound); + editorElement.addEventListener('editorBlur', this.hideEditorBound); } } - private addKeydownListener(editor:ICKEditorInstance) { - editor.listenTo( - editor.editing.view.document, - 'keydown', - (event, data) => { - // taken from op-ck-editor.component.ts - // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison - if ((data.ctrlKey || data.metaKey) && data.keyCode === KeyCodes.ENTER) { - void this.onSubmit(); - event.stop(); - } - }, - { priority: 'highest' }, - ); - } - - private addKeyupListener(editor:ICKEditorInstance) { - editor.listenTo( - editor.editing.view.document, - 'keyup', - (event) => { - this.adjustJournalContainerMargin(); - event.stop(); - }, - { priority: 'highest' }, - ); - } - - private addBlurListener(editor:ICKEditorInstance) { - editor.listenTo( - editor.editing.view.document, - 'change:isFocused', - () => { - // without the timeout `isFocused` is still true even if the editor was blurred - // current limitation: - // clicking on empty toolbar space and the somewhere else on the page does not trigger the blur anymore - setTimeout(() => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - if (!editor.ui.focusTracker.isFocused) { - this.hideEditorIfEmpty(); - } - }, 0); - }, - { priority: 'highest' }, - ); + private removeEventListenersFromCkEditorInstance() { + const editorElement = this.getCkEditorElement(); + if (editorElement) { + editorElement.removeEventListener('saveRequested', this.onSubmitBound); + editorElement.removeEventListener('editorKeyup', this.adjustMarginBound); + editorElement.removeEventListener('editorBlur', this.hideEditorBound); + } } private adjustJournalContainerMargin() { @@ -367,7 +340,10 @@ export default class IndexController extends Controller { hideEditorIfEmpty() { const ckEditorInstance = this.getCkEditorInstance(); + if (ckEditorInstance && ckEditorInstance.getData({ trim: false }).length === 0) { + this.clearEditor(); // remove potentially empty lines + this.removeEventListenersFromCkEditorInstance(); this.buttonRowTarget.classList.remove('d-none'); this.formRowTarget.classList.add('d-none'); From fc45e41df6ee3330fb4525f2d2308f90f60c9bd2 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 10 Sep 2024 16:47:41 +0200 Subject: [PATCH 071/120] js refactoring as requested by @oliverguenther --- .../activities-tab/index.controller.ts | 73 ++++++++++++------- 1 file changed, 48 insertions(+), 25 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index e2176862308d..e94cf1f744d5 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -359,6 +359,16 @@ export default class IndexController extends Controller { async onSubmit(event:Event | null = null) { event?.preventDefault(); + + const formData = this.prepareFormData(); + const response = await this.submitForm(formData); + + if (!response.ok) return; + + await this.handleSuccessfulSubmission(response); + } + + private prepareFormData():FormData { const ckEditorInstance = this.getCkEditorInstance(); const data = ckEditorInstance ? ckEditorInstance.getData({ trim: false }) : ''; @@ -367,37 +377,50 @@ export default class IndexController extends Controller { formData.append('filter', this.filterValue); formData.append('journal[notes]', data); - const response = await this.fetchWithCSRF(this.formTarget.action, 'POST', formData); + return formData; + } - if (response.ok) { - this.setLastUpdateTimestamp(); - const text = await response.text(); - Turbo.renderStreamMessage(text); + private async submitForm(formData:FormData):Promise { + return this.fetchWithCSRF(this.formTarget.action, 'POST', formData); + } - if (this.journalsContainerTarget) { - this.clearEditor(); - if (this.isMobile()) { - this.hideEditorIfEmpty(); - } else { - this.focusEditor(); - } - if (this.journalsContainerTarget) { - this.journalsContainerTarget.style.marginBottom = ''; - this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); - } - setTimeout(() => { - this.scrollJournalContainer( - this.journalsContainerTarget, - this.sortingValue === 'asc', - ); - if (this.isMobile()) { - this.scrollInputContainerIntoView(300); - } - }, 10); + private async handleSuccessfulSubmission(response:Response):Promise { + this.setLastUpdateTimestamp(); + const text = await response.text(); + Turbo.renderStreamMessage(text); + + if (!this.journalsContainerTarget) return; + + this.clearEditor(); + this.handleEditorVisibility(); + this.adjustJournalsContainer(); + + setTimeout(() => { + this.scrollJournalContainer( + this.journalsContainerTarget, + this.sortingValue === 'asc', + ); + if (this.isMobile()) { + this.scrollInputContainerIntoView(300); } + }, 10); + } + + private handleEditorVisibility():void { + if (this.isMobile()) { + this.hideEditorIfEmpty(); + } else { + this.focusEditor(); } } + private adjustJournalsContainer():void { + if (!this.journalsContainerTarget) return; + + this.journalsContainerTarget.style.marginBottom = ''; + this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); + } + private async fetchWithCSRF(url:string | URL, method:string, body?:FormData) { return fetch(url, { method, From 4cc43ff532960b61b563ee1d47b02e4cd60b7aab Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 10 Sep 2024 17:40:46 +0200 Subject: [PATCH 072/120] extended permission controller specs --- .../activities_tab_controller_spec.rb | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/spec/controllers/work_packages/activities_tab_controller_spec.rb b/spec/controllers/work_packages/activities_tab_controller_spec.rb index 769083fe4aca..0fa3b6475819 100644 --- a/spec/controllers/work_packages/activities_tab_controller_spec.rb +++ b/spec/controllers/work_packages/activities_tab_controller_spec.rb @@ -30,6 +30,7 @@ RSpec.describe WorkPackages::ActivitiesTabController do let(:project) { create(:project) } + let(:other_project) { create(:project) } let(:viewer_role) do create(:project_role, permissions: [:view_work_packages]) @@ -38,6 +39,10 @@ create(:user, member_with_roles: { project => viewer_role }) end + let(:viewer_with_no_access_to_project) do + create(:user, + member_with_roles: { other_project => viewer_role }) + end let(:commenter_role) do create(:project_role, permissions: %i[view_work_packages add_work_package_notes edit_own_work_package_notes]) @@ -46,6 +51,10 @@ create(:user, member_with_roles: { project => commenter_role }) end + let(:commenter_with_no_access_to_project) do + create(:user, + member_with_roles: { other_project => commenter_role }) + end let(:full_privileges_role) do create(:project_role, permissions: %i[view_work_packages edit_work_packages add_work_package_notes edit_own_work_package_notes @@ -55,6 +64,10 @@ create(:user, member_with_roles: { project => full_privileges_role }) end + let(:user_with_full_privileges_with_no_access_to_project) do + create(:user, + member_with_roles: { other_project => full_privileges_role }) + end let(:work_package) do create(:work_package, project:) @@ -207,6 +220,32 @@ end end + shared_examples_for "does not grant access for users with no access to the project" do + context "when a viewer is logged in who has no access to the project" do + let(:user) { viewer_with_no_access_to_project } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a commenter is logged in who has no access to the project" do + let(:user) { commenter_with_no_access_to_project } + + subject { response } + + it { is_expected.to be_forbidden } + end + + context "when a user with full privileges is logged in who has no access to the project" do + let(:user) { user_with_full_privileges_with_no_access_to_project } + + subject { response } + + it { is_expected.to be_forbidden } + end + end + before do allow(User).to receive(:current).and_return user @@ -250,6 +289,8 @@ # end end + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } @@ -284,6 +325,8 @@ it_behaves_like "does not grant access for anonymous users unless project is public and no login required" + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } @@ -332,6 +375,8 @@ it_behaves_like "does not grant access for anonymous users unless project is public and no login required" + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } @@ -364,6 +409,12 @@ format: :turbo_stream end + context "when no access to the project" do + let(:sorting) { "asc" } + + it_behaves_like "does not grant access for users with no access to the project" + end + context "when a viewer is logged in" do let(:user) { viewer } @@ -409,6 +460,8 @@ it_behaves_like "does not grant access for anonymous users in all cases" + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } @@ -465,6 +518,8 @@ it_behaves_like "does not grant access for anonymous users in all cases" + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } @@ -526,6 +581,8 @@ it_behaves_like "does not grant access for anonymous users in all cases" + it_behaves_like "does not grant access for users with no access to the project" + context "when a viewer is logged in" do let(:user) { viewer } From a86e4b97215511711a67c4fdf97ddb34dd12f237 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 10 Sep 2024 17:44:33 +0200 Subject: [PATCH 073/120] rubocop fixes --- .../journals/item_component/details.rb | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index ebbe8cc3335a..2810a2d82c8b 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -93,18 +93,23 @@ def render_user_avatar(container) end def render_user_name_for_desktop(container) - container.with_column(mr: 1, - classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis hidden-for-mobile") do + container.with_column( + mr: 1, + classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis hidden-for-mobile" + ) do truncated_user_name(journal.user) end end def render_user_name_and_time_for_mobile(container) container.with_column( - mr: 1, classes: "work-packages-activities-tab-journals-item-component-details--user-name-container hidden-for-desktop", + mr: 1, + classes: "work-packages-activities-tab-journals-item-component-details--user-name-container hidden-for-desktop", flex_layout: true ) do |user_name_and_time_container| - user_name_and_time_container.with_row(classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis") do + user_name_and_time_container.with_row( + classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis" + ) do truncated_user_name(journal.user) end user_name_and_time_container.with_row do From cfd4a13c3b966ff1c623865ef9eaf7fd030ceb47 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 10 Sep 2024 18:01:43 +0200 Subject: [PATCH 074/120] styling fixes --- .../activities_tab/journals/item_component/details.sass | 2 ++ frontend/src/global_styles/layout/work_packages/_full_view.sass | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index a5bc331b4889..20c962ddc25e 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -6,6 +6,8 @@ display: none!important &--journal-details-header-container margin-left: -14px + &--journal-details-header + padding-top: 2px &--timeline-icon background-color: var(--bgColor-muted) border-radius: 50% diff --git a/frontend/src/global_styles/layout/work_packages/_full_view.sass b/frontend/src/global_styles/layout/work_packages/_full_view.sass index b1596932e31b..f80f657b2c8a 100644 --- a/frontend/src/global_styles/layout/work_packages/_full_view.sass +++ b/frontend/src/global_styles/layout/work_packages/_full_view.sass @@ -80,7 +80,7 @@ display: grid grid-template-rows: auto auto 1fr height: 100% - padding: 5px 0 0px 15px + padding: 5px 0 10px 15px .tabcontent height: 100% From 52d8fcf99e08e5b68d5ebbfbb9ef73a34dc589e9 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 11 Sep 2024 15:44:01 +0200 Subject: [PATCH 075/120] fixed specs, eslint errors and prevent multi form submission --- .../journals/item_component/details.rb | 2 +- .../work_packages/activities_tab_controller.rb | 11 ++++++++++- .../ckeditor-augmented-textarea.component.ts | 2 -- .../activities-tab/index.controller.ts | 13 ++++++++++++- .../activities/work_package/activities_spec.rb | 9 +-------- 5 files changed, 24 insertions(+), 13 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 2810a2d82c8b..dc81e4f0e77b 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -161,7 +161,7 @@ def render_details(details_container) details_container.with_row(flex_layout: true, pt: 1, pb: 3) do |details_container_inner| if journal.initial? - render_empty_line(details_container_inner) + render_empty_line(details_container_inner) if filter == :only_changes else render_journal_details(details_container_inner) end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index bac9f428171f..d2c15b228493 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -230,7 +230,7 @@ def handle_only_changes_filter_on_create def handle_other_filters_on_create(call) if call.result.initial? - update_item_component(call.result, state: :show) + update_index_component # update the whole index component to reset empty state else generate_time_based_update_streams(params[:last_update_timestamp]) end @@ -263,6 +263,15 @@ def replace_whole_tab ) end + def update_index_component + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::IndexComponent.new( + work_package: @work_package, + filter: @filter + ) + ) + end + def create_journal_service_call ### taken from ActivitiesByWorkPackageAPI AddWorkPackageNoteService diff --git a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts index 5857b0b8e307..2a1baff4c477 100644 --- a/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts +++ b/frontend/src/app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component.ts @@ -190,8 +190,6 @@ export class CkeditorAugmentedTextareaComponent extends UntilDestroyedMixin impl }); } - - public setup(editor:ICKEditorInstance) { // Have a hacky way to access the editor from outside of angular. // This is e.g. employed to set the text from outside to reuse the same editor for different languages. diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index e94cf1f744d5..a1ff4a3f2f46 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -45,6 +45,8 @@ export default class IndexController extends Controller { private adjustMarginBound:EventListener; private hideEditorBound:EventListener; + private saveInProgress:boolean; + connect() { this.setLocalStorageKey(); this.setLastUpdateTimestamp(); @@ -358,12 +360,19 @@ export default class IndexController extends Controller { } async onSubmit(event:Event | null = null) { + if (this.saveInProgress === true) return; + + this.saveInProgress = true; + event?.preventDefault(); const formData = this.prepareFormData(); const response = await this.submitForm(formData); - if (!response.ok) return; + if (!response.ok) { + this.saveInProgress = false; + return; + } await this.handleSuccessfulSubmission(response); } @@ -404,6 +413,8 @@ export default class IndexController extends Controller { this.scrollInputContainerIntoView(300); } }, 10); + + this.saveInProgress = false; } private handleEditorVisibility():void { diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 4aaf8df7ae56..54531de1b7fe 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -329,7 +329,6 @@ second_journal = work_package.journals.second # even when attributes are changed, the initial journal entry is still not showing any changeset activity_tab.within_journal_entry(second_journal) do - activity_tab.expect_journal_details_header(text: "change") activity_tab.expect_journal_details_header(text: member.name) activity_tab.expect_journal_changed_attribute(text: "Subject") end @@ -352,7 +351,6 @@ third_journal = work_package.journals.third activity_tab.within_journal_entry(third_journal) do - activity_tab.expect_journal_details_header(text: "change") activity_tab.expect_journal_details_header(text: member.name) activity_tab.expect_journal_changed_attribute(text: "Subject") end @@ -429,32 +427,27 @@ # expect no empty state due to the initial journal entry activity_tab.expect_no_empty_state # expect the initial journal entry to be shown - activity_tab.expect_journal_details_header(text: "created") activity_tab.filter_journals(:only_comments) # expect empty state activity_tab.expect_empty_state - activity_tab.expect_no_journal_details_header(text: "created") activity_tab.filter_journals(:only_changes) # expect only the changes activity_tab.expect_no_empty_state - activity_tab.expect_journal_details_header(text: "created") activity_tab.filter_journals(:all) # expect all journal entries activity_tab.expect_no_empty_state - activity_tab.expect_journal_details_header(text: "created") # filter for comments again activity_tab.filter_journals(:only_comments) # expect empty state again activity_tab.expect_empty_state - activity_tab.expect_no_journal_details_header(text: "created") # add a comment activity_tab.add_comment(text: "First comment by admin") @@ -539,7 +532,7 @@ activity_tab.within_journal_entry(latest_journal) do activity_tab.expect_no_journal_notes_header activity_tab.expect_no_journal_notes - activity_tab.expect_journal_details_header(text: "change") + activity_tab.expect_journal_details_header(text: admin.name) activity_tab.expect_journal_changed_attribute(text: "Subject") end From 0a7537aa83c0ae089b28f71b520c1bde4b4fb89d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 11 Sep 2024 18:11:12 +0200 Subject: [PATCH 076/120] fixed flaky specs --- .../work_packages/activities_tab/index_component.rb | 2 +- .../work-packages/activities-tab/index.controller.ts | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index c08331b9d62b..dc6f3f703e33 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -67,7 +67,7 @@ def journal_sorting end def polling_interval - ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] || 10000 + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"].presence || 10000 end def adding_comment_allowed? diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index a1ff4a3f2f46..721007749460 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -46,6 +46,7 @@ export default class IndexController extends Controller { private hideEditorBound:EventListener; private saveInProgress:boolean; + private updateInProgress:boolean; connect() { this.setLocalStorageKey(); @@ -111,6 +112,9 @@ export default class IndexController extends Controller { } async updateActivitiesList() { + if (this.updateInProgress === true) return; + + this.updateInProgress = true; const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); const url = new URL(this.updateStreamsUrlValue); url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); @@ -133,6 +137,8 @@ export default class IndexController extends Controller { } }, 100); } + + this.updateInProgress = false; } private rescueEditorContent() { From 8329d1ba5166602dab8a7eef7d1d26c58d962726 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 11 Sep 2024 18:16:18 +0200 Subject: [PATCH 077/120] fixed flaky specs and styling fixes --- .../journals/item_component.html.erb | 2 +- .../journals/item_component/details.rb | 7 ++++-- .../work_package/activities_spec.rb | 25 ++++--------------- .../components/work_packages/activities.rb | 4 +-- 4 files changed, 13 insertions(+), 25 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 28122035f35c..75ea47a133ca 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -31,7 +31,7 @@ header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? header_end_container.with_column(mr: 2, pt: 1) do - render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium)) + render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium, data: { test_selector: "op-journal-unread-notification" })) end end header_end_container.with_column do diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index dc81e4f0e77b..9b4f84a61fd8 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -133,7 +133,10 @@ def render_header_end(header_container) def render_notification_bubble(container) container.with_column(mr: 2) do - render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium)) + render(Primer::Beta::Octicon.new( + :"dot-fill", color: :accent, size: :medium, + data: { test_selector: "op-journal-unread-notification" } + )) end end @@ -161,7 +164,7 @@ def render_details(details_container) details_container.with_row(flex_layout: true, pt: 1, pb: 3) do |details_container_inner| if journal.initial? - render_empty_line(details_container_inner) if filter == :only_changes + details_container.with_row(mb: 3, font_size: :small, classes: "empty-line") else render_journal_details(details_container_inner) end diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 54531de1b7fe..1e822b5be9d8 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -150,7 +150,7 @@ wp_page.wait_for_activity_tab end - it "does show comments and enable adding and quoting comments and editing own comments" do + it "does show comments but does NOT enable editing other users comments" do activity_tab.expect_journal_notes(text: "First comment by admin") activity_tab.within_journal_entry(first_comment) do @@ -161,7 +161,9 @@ # allowed to quote other user's comments expect(page).to have_test_selector("op-wp-journal-#{first_comment.id}-quote") end + end + it "enable adding and quoting comments and editing OWN comments" do activity_tab.expect_input_field activity_tab.add_comment(text: "First comment by viewer with commenting permission") @@ -169,9 +171,7 @@ second_comment = work_package.journals.reload.last activity_tab.within_journal_entry(second_comment) do - # for some reason only opens on the second click in the test - # probably due to the previous click on the first comment - 2.times { page.find_test_selector("op-wp-journal-#{second_comment.id}-action-menu").click } + page.find_test_selector("op-wp-journal-#{second_comment.id}-action-menu").click expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-edit") expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-quote") @@ -189,7 +189,7 @@ wp_page.wait_for_activity_tab end - it "does show comments and enable adding and quoting comments and editing own comments" do + it "does show comments and enable adding and quoting comments and editing of other users comments" do activity_tab.expect_journal_notes(text: "First comment by admin") activity_tab.within_journal_entry(first_comment) do @@ -200,21 +200,6 @@ # allowed to quote other user's comments expect(page).to have_test_selector("op-wp-journal-#{first_comment.id}-quote") end - - activity_tab.expect_input_field - - activity_tab.add_comment(text: "First comment by viewer with editing permission") - - second_comment = work_package.journals.reload.last - - activity_tab.within_journal_entry(second_comment) do - # for some reason only opens on the second click in the test - # probably due to the previous click on the first comment - 2.times { page.find_test_selector("op-wp-journal-#{second_comment.id}-action-menu").click } - - expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-edit") - expect(page).to have_test_selector("op-wp-journal-#{second_comment.id}-quote") - end end end end diff --git a/spec/support/components/work_packages/activities.rb b/spec/support/components/work_packages/activities.rb index e093c3290f38..1dd2f9ea3173 100644 --- a/spec/support/components/work_packages/activities.rb +++ b/spec/support/components/work_packages/activities.rb @@ -100,11 +100,11 @@ def expect_journal_notes(text: nil) end def expect_notification_bubble - expect(page).to have_test_selector("user-activity-bubble") + expect(page).to have_test_selector("op-journal-unread-notification") end def expect_no_notification_bubble - expect(page).not_to have_test_selector("user-activity-bubble") + expect(page).not_to have_test_selector("op-journal-unread-notification") end def expect_journal_container_at_bottom From 73a87f83a3a53f21c1093a5ca50974c65a6a415f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 16:57:47 +0200 Subject: [PATCH 078/120] refactored http request as requested by @oliverguenther --- .../app/features/plugins/plugin-context.ts | 2 + .../activities-tab/index.controller.ts | 128 ++++++++++-------- 2 files changed, 77 insertions(+), 53 deletions(-) diff --git a/frontend/src/app/features/plugins/plugin-context.ts b/frontend/src/app/features/plugins/plugin-context.ts index 20371f50c4cc..8b15f1968b9a 100644 --- a/frontend/src/app/features/plugins/plugin-context.ts +++ b/frontend/src/app/features/plugins/plugin-context.ts @@ -32,6 +32,7 @@ import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom- import { AttachmentsResourceService } from 'core-app/core/state/attachments/attachments.service'; import { HttpClient } from '@angular/common/http'; import { TimezoneService } from 'core-app/core/datetime/timezone.service'; +import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; /** * Plugin context bridge for plugins outside the CLI compiler context @@ -67,6 +68,7 @@ export class OpenProjectPluginContext { configurationService: this.injector.get(ConfigurationService), attachmentsResourceService: this.injector.get(AttachmentsResourceService), http: this.injector.get(HttpClient), + turboRequests: this.injector.get(TurboRequestsService), }; public readonly helpers = { diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 721007749460..a588c4053fcb 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -1,8 +1,8 @@ -import * as Turbo from '@hotwired/turbo'; import { Controller } from '@hotwired/stimulus'; import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; +import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; interface CustomEventWithIdParam extends Event { params:{ @@ -47,14 +47,18 @@ export default class IndexController extends Controller { private saveInProgress:boolean; private updateInProgress:boolean; + private turboRequests:TurboRequestsService; - connect() { + async connect() { this.setLocalStorageKey(); this.setLastUpdateTimestamp(); this.setupEventListeners(); this.handleInitialScroll(); this.startPolling(); this.populateRescuedEditorContent(); + + const context = await window.OpenProject.getPluginContext(); + this.turboRequests = context.services.turboRequests; } disconnect() { @@ -112,33 +116,49 @@ export default class IndexController extends Controller { } async updateActivitiesList() { - if (this.updateInProgress === true) return; - + if (this.updateInProgress) return; this.updateInProgress = true; - const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); + + void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()).then(() => { + this.handleUpdateStreamsResponse(); + }).catch((error) => { + console.error('Error updating activities list:', error); + }).finally(() => { + this.updateInProgress = false; + }); + } + + private prepareUpdateStreamsUrl():string { const url = new URL(this.updateStreamsUrlValue); - url.searchParams.append('last_update_timestamp', this.lastUpdateTimestamp); - url.searchParams.append('filter', this.filterValue); - - const response = await this.fetchWithCSRF(url, 'GET'); - - if (response.ok) { - const text = await response.text(); - Turbo.renderStreamMessage(text); - this.setLastUpdateTimestamp(); - setTimeout(() => { - if (this.sortingValue === 'asc' && journalsContainerAtBottom) { - // scroll to (new) bottom if sorting is ascending and journals container was already at bottom before a new activity was added - if (this.isMobile()) { - this.scrollInputContainerIntoView(300); - } else { - this.scrollJournalContainer(this.journalsContainerTarget, true); - } - } - }, 100); - } + url.searchParams.set('sortBy', this.sortingValue); + url.searchParams.set('filter', this.filterValue); + url.searchParams.set('last_update_timestamp', this.lastUpdateTimestamp); + return url.toString(); + } - this.updateInProgress = false; + private performUpdateStreamsRequest(url:string):Promise { + return this.turboRequests.request(url, { + method: 'GET', + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + }, + }); + } + + private handleUpdateStreamsResponse() { + const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); + this.setLastUpdateTimestamp(); + // the timeout is require in order to give the Turb.renderStream method enough time to render the new journals + setTimeout(() => { + if (this.sortingValue === 'asc' && journalsContainerAtBottom) { + // scroll to (new) bottom if sorting is ascending and journals container was already at bottom before a new activity was added + if (this.isMobile()) { + this.scrollInputContainerIntoView(300); + } else { + this.scrollJournalContainer(this.journalsContainerTarget, true, true); + } + } + }, 100); } private rescueEditorContent() { @@ -272,10 +292,17 @@ export default class IndexController extends Controller { return atBottom; } - private scrollJournalContainer(journalsContainer:HTMLElement, toBottom:boolean) { + private scrollJournalContainer(journalsContainer:HTMLElement, toBottom:boolean, smooth:boolean = false) { const scrollableContainer = jQuery(journalsContainer).scrollParent()[0]; if (scrollableContainer) { - scrollableContainer.scrollTop = toBottom ? scrollableContainer.scrollHeight : 0; + if (smooth) { + scrollableContainer.scrollTo({ + top: toBottom ? scrollableContainer.scrollHeight : 0, + behavior: 'smooth', + }); + } else { + scrollableContainer.scrollTop = toBottom ? scrollableContainer.scrollHeight : 0; + } } } @@ -373,14 +400,16 @@ export default class IndexController extends Controller { event?.preventDefault(); const formData = this.prepareFormData(); - const response = await this.submitForm(formData); - - if (!response.ok) { - this.saveInProgress = false; - return; - } - - await this.handleSuccessfulSubmission(response); + void this.submitForm(formData) + .then(() => { + this.handleSuccessfulSubmission(); + }) + .catch((error) => { + console.error('Error saving activity:', error); + }) + .finally(() => { + this.saveInProgress = false; + }); } private prepareFormData():FormData { @@ -395,14 +424,18 @@ export default class IndexController extends Controller { return formData; } - private async submitForm(formData:FormData):Promise { - return this.fetchWithCSRF(this.formTarget.action, 'POST', formData); + private async submitForm(formData:FormData):Promise { + return this.turboRequests.request(this.formTarget.action, { + method: 'POST', + body: formData, + headers: { + 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, + }, + }); } - private async handleSuccessfulSubmission(response:Response):Promise { + private handleSuccessfulSubmission() { this.setLastUpdateTimestamp(); - const text = await response.text(); - Turbo.renderStreamMessage(text); if (!this.journalsContainerTarget) return; @@ -414,6 +447,7 @@ export default class IndexController extends Controller { this.scrollJournalContainer( this.journalsContainerTarget, this.sortingValue === 'asc', + true, ); if (this.isMobile()) { this.scrollInputContainerIntoView(300); @@ -438,18 +472,6 @@ export default class IndexController extends Controller { this.journalsContainerTarget.classList.add('work-packages-activities-tab-index-component--journals-container_with-input-compensation'); } - private async fetchWithCSRF(url:string | URL, method:string, body?:FormData) { - return fetch(url, { - method, - body, - headers: { - 'X-CSRF-Token': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content, - Accept: 'text/vnd.turbo-stream.html', - }, - credentials: 'same-origin', - }); - } - setLastUpdateTimestamp() { this.lastUpdateTimestamp = new Date().toISOString(); } From 7663f2cee42249c47224a00c183960f53b2bc610 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 17:07:08 +0200 Subject: [PATCH 079/120] note future required code maintenance on js based view port checks --- .../work-packages/activities-tab/index.controller.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index a588c4053fcb..b235f13fb386 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -230,17 +230,17 @@ export default class IndexController extends Controller { return this.element.querySelector('#work-package-journal-form-element'); } - // TODO: get rid of static width value and reach for a more CSS based solution + // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts private isMobile():boolean { return window.innerWidth < 1279; } - // TODO: get rid of static width value and reach for a more CSS based solution + // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts private isSmViewPort():boolean { return window.innerWidth < 543; } - // TODO: get rid of static width value and reach for a more CSS based solution + // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts private isMdViewPort():boolean { return window.innerWidth >= 543 && window.innerWidth < 1279; } From de1498827e78143bf0e43421bac5a64c09ad55db Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 17:08:04 +0200 Subject: [PATCH 080/120] fix stem rendering as requested by @psatyal --- .../activities_tab/journals/index_component.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/index_component.html.erb b/app/components/work_packages/activities_tab/journals/index_component.html.erb index ee160af50bdd..d6aa9ddc56c8 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/index_component.html.erb @@ -19,7 +19,7 @@ end end end - journals_index_wrapper_container.with_row(classes: "work-packages-activities-tab-journals-index-component--stem-connection") unless empty_state? + journals_index_wrapper_container.with_row(classes: "work-packages-activities-tab-journals-index-component--stem-connection") unless empty_state? || journal_sorting == "desc" end end %> From 72d4a3f8ec79fea26967022a6aabeb65be6cbc68 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 17:16:49 +0200 Subject: [PATCH 081/120] adjusted notification dot color as requested by @psatyal --- .../activities_tab/journals/item_component.html.erb | 7 ++++++- .../activities_tab/journals/item_component.sass | 2 ++ .../activities_tab/journals/item_component/details.rb | 6 ++++-- .../activities_tab/journals/item_component/details.sass | 4 +++- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 75ea47a133ca..95a14a1a3e02 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -31,7 +31,12 @@ header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? header_end_container.with_column(mr: 2, pt: 1) do - render(Primer::Beta::Octicon.new(:"dot-fill", color: :accent, size: :medium, data: { test_selector: "op-journal-unread-notification" })) + render(Primer::Beta::Octicon.new( + :"dot-fill", # color is set via CSS as requested by UI/UX Team + classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", + size: :medium, + data: { test_selector: "op-journal-unread-notification" } + )) end end header_end_container.with_column do diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index 9d32dd8f26e7..0fc00ea2e01a 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -7,5 +7,7 @@ &--user-name @media screen and (min-width: $breakpoint-sm) max-width: 40% + &--notification-dot-icon + color: var(--bgColor-accent-emphasis) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 9b4f84a61fd8..6cb3546250fe 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -134,8 +134,10 @@ def render_header_end(header_container) def render_notification_bubble(container) container.with_column(mr: 2) do render(Primer::Beta::Octicon.new( - :"dot-fill", color: :accent, size: :medium, - data: { test_selector: "op-journal-unread-notification" } + :"dot-fill", # color is set via CSS as requested by UI/UX Team + classes: "work-packages-activities-tab-journals-item-component-details--notification-dot-icon", + size: :medium, + data: { test_selector: "op-journal-unread-notification" } )) end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index 20c962ddc25e..185bf390c85d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -40,4 +40,6 @@ // quick hack to adapt the current detail rendering to desired primerised design i font-style: normal - color: var(--fgColor-muted, var(--color-fg-subtle)) \ No newline at end of file + color: var(--fgColor-muted, var(--color-fg-subtle)) + &--notification-dot-icon + color: var(--bgColor-accent-emphasis) \ No newline at end of file From 7f5f1f85f905c0106b1e2e75d5ef7adec6218961 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 17:56:23 +0200 Subject: [PATCH 082/120] fixed scrolling behaviour on mobile screens --- .../work-packages/activities-tab/index.controller.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index b235f13fb386..8298575570fc 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -119,8 +119,10 @@ export default class IndexController extends Controller { if (this.updateInProgress) return; this.updateInProgress = true; + const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); + void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()).then(() => { - this.handleUpdateStreamsResponse(); + this.handleUpdateStreamsResponse(journalsContainerAtBottom); }).catch((error) => { console.error('Error updating activities list:', error); }).finally(() => { @@ -145,8 +147,7 @@ export default class IndexController extends Controller { }); } - private handleUpdateStreamsResponse() { - const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); + private handleUpdateStreamsResponse(journalsContainerAtBottom:boolean) { this.setLastUpdateTimestamp(); // the timeout is require in order to give the Turb.renderStream method enough time to render the new journals setTimeout(() => { @@ -227,7 +228,7 @@ export default class IndexController extends Controller { } private getInputContainer():HTMLElement | null { - return this.element.querySelector('#work-package-journal-form-element'); + return this.element.querySelector('.work-packages-activities-tab-journals-new-component'); } // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts From 97656e0ce991ae8289059cf725825ad06a29ff42 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 17:59:08 +0200 Subject: [PATCH 083/120] restrict polling interval env to test env --- .../work_packages/activities_tab/index_component.rb | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index dc6f3f703e33..4a1cce474ff9 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -67,7 +67,12 @@ def journal_sorting end def polling_interval - ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"].presence || 10000 + # Polling interval should only be adjustable in test environment + if Rails.env.test? + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"].presence || 10000 + else + 10000 + end end def adding_comment_allowed? From 541cbaae8467977dea4dd3737a61d9f98ed3da97 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 18:38:15 +0200 Subject: [PATCH 084/120] fixed ellipsis --- .../work_packages/activities_tab/journals/index_component.sass | 1 - .../activities_tab/journals/item_component.html.erb | 2 +- .../work_packages/activities_tab/journals/item_component.sass | 2 ++ 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/index_component.sass b/app/components/work_packages/activities_tab/journals/index_component.sass index 2087798b5272..1dc5b0064eb0 100644 --- a/app/components/work_packages/activities_tab/journals/index_component.sass +++ b/app/components/work_packages/activities_tab/journals/index_component.sass @@ -11,4 +11,3 @@ height: 100vh @media screen and (max-width: $breakpoint-xl) display: none - diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 95a14a1a3e02..4eae5fe7b404 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -9,7 +9,7 @@ )) do |border_box_component| border_box_component.with_header(px: 2, py: 1, data: { test_selector: "op-journal-notes-header" }) do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| - header_container.with_column(flex_layout: true, classes: "ellipsis") do |header_start_container| + header_container.with_column(flex_layout: true, classes: "work-packages-activities-tab-journals-item-component--header-start-container ellipsis") do |header_start_container| header_start_container.with_column(mr: 2) do render Users::AvatarComponent.new(user: journal.user, show_name: false, size: :mini) end diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index 0fc00ea2e01a..31c091423042 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -9,5 +9,7 @@ max-width: 40% &--notification-dot-icon color: var(--bgColor-accent-emphasis) + &--header-start-container + flex-grow: 1 From 352e4b73b38caa127051605fdef26803064beefb Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 16 Sep 2024 18:41:32 +0200 Subject: [PATCH 085/120] trying to avoid flaky spec --- spec/features/activities/work_package/activities_spec.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 1e822b5be9d8..4fc189a4b6d8 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -525,6 +525,7 @@ it "resets an only_changes filter if a comment is added by the user", :aggregate_failures do activity_tab.filter_journals(:only_changes) + sleep 0.5 # avoid flaky test # expect only the changes activity_tab.expect_no_journal_notes(text: "First comment by admin") @@ -532,6 +533,7 @@ # add a comment activity_tab.add_comment(text: "Third comment by admin") + sleep 0.5 # avoid flaky test # the only_changes filter should be reset activity_tab.expect_journal_notes(text: "Third comment by admin") From 6082e6dd8b1e453aca8b4c5418ec608a84abe54b Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 17 Sep 2024 11:28:52 +0200 Subject: [PATCH 086/120] trying to fix flaky spec through a more dynamic waiting approach --- .../work-packages/activities-tab/index.controller.ts | 10 ++++++++++ .../activities/work_package/activities_spec.rb | 1 - spec/support/pages/work_packages/full_work_package.rb | 2 ++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 8298575570fc..3d698c35ea8a 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -56,6 +56,7 @@ export default class IndexController extends Controller { this.handleInitialScroll(); this.startPolling(); this.populateRescuedEditorContent(); + this.markAsConnected(); const context = await window.OpenProject.getPluginContext(); this.turboRequests = context.services.turboRequests; @@ -65,6 +66,15 @@ export default class IndexController extends Controller { this.rescueEditorContent(); this.removeEventListeners(); this.stopPolling(); + this.markAsDisconnected(); + } + + private markAsConnected() { + (this.element as HTMLElement).dataset.stimulusControllerConnected = 'true'; + } + + private markAsDisconnected() { + (this.element as HTMLElement).dataset.stimulusControllerConnected = 'false'; } private setLocalStorageKey() { diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 4fc189a4b6d8..22860f151150 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -366,7 +366,6 @@ it "shows the comment of another user without browser reload", :aggregate_failures do # simulate member creating a comment - sleep 1 # the comment needs to be created after the component is mounted first_journal = create(:work_package_journal, user: member, notes: "First comment by member", journable: work_package, version: 2) diff --git a/spec/support/pages/work_packages/full_work_package.rb b/spec/support/pages/work_packages/full_work_package.rb index d131a234e926..8fd650b0c975 100644 --- a/spec/support/pages/work_packages/full_work_package.rb +++ b/spec/support/pages/work_packages/full_work_package.rb @@ -58,6 +58,8 @@ def expect_share_button_count(count) def wait_for_activity_tab expect(page).to have_test_selector("op-wp-activity-tab", wait: 10) + # wait for stimulus js component to be mounted + expect(page).to have_css('[data-test-selector="op-wp-activity-tab"][data-stimulus-controller-connected="true"]') end private From 274faed921391a582e188abd4430a32cc328d51e Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 17 Sep 2024 11:30:31 +0200 Subject: [PATCH 087/120] removed obsolete sleeps --- spec/features/activities/work_package/activities_spec.rb | 8 -------- 1 file changed, 8 deletions(-) diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 22860f151150..51022d5a90ed 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -763,8 +763,6 @@ wp_page.visit! wp_page.wait_for_activity_tab - # wait for the stimulus component to be mounted, TODO: get rid of static sleep - sleep 1 # open the editor page.find_test_selector("op-open-work-package-journal-form-trigger").click @@ -789,8 +787,6 @@ wp_page.visit! wp_page.wait_for_activity_tab - # wait for the stimulus component to be mounted, TODO: get rid of static sleep - sleep 1 # open the editor page.find_test_selector("op-open-work-package-journal-form-trigger").click @@ -806,10 +802,6 @@ # navigate to the same workpackage, but as a different user wp_page.visit! wp_page.wait_for_activity_tab - - # wait for the stimulus component to be mounted, TODO: get rid of static sleep - sleep 1 - # expect the editor to be opened and content to be rescued for the correct user within_test_selector("op-work-package-journal-form-element") do editor = FormFields::Primerized::EditorFormField.new("notes", selector: "#work-package-journal-form-element") From b575b02c4c326f984b1b7a78e9b21a264456128e Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 17 Sep 2024 13:52:52 +0200 Subject: [PATCH 088/120] fixing auto-scrollings due to content wrapper changes resolving anchor menu positions on mobile --- .../activities-tab/index.controller.ts | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 3d698c35ea8a..6367f76149b7 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -241,19 +241,13 @@ export default class IndexController extends Controller { return this.element.querySelector('.work-packages-activities-tab-journals-new-component'); } - // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts + // Code Maintenance: Get rid of this JS based view port checks when activities are rendered in fully primierized activity tab in all contexts private isMobile():boolean { return window.innerWidth < 1279; } - // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts - private isSmViewPort():boolean { - return window.innerWidth < 543; - } - - // Code Maintenance: Get rid of these JS based view port checks when activities are rendered in fully primierized activity tab in all contexts - private isMdViewPort():boolean { - return window.innerWidth >= 543 && window.innerWidth < 1279; + private isWithinNotificationCenter():boolean { + return location.pathname.includes('notifications'); } private addEventListenersToCkEditorInstance() { @@ -281,16 +275,15 @@ export default class IndexController extends Controller { private adjustJournalContainerMargin() { // don't do this on mobile screens if (this.isMobile()) { return; } - this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 33}px`; + this.journalsContainerTarget.style.marginBottom = `${this.formRowTarget.clientHeight + 29}px`; } private isJournalsContainerScrolledToBottom(journalsContainer:HTMLElement) { let atBottom = false; - // we have to handle different scrollable containers for different viewports in order to idenfity if the user is at the bottom of the journals + // we have to handle different scrollable containers for different viewports/pages in order to idenfity if the user is at the bottom of the journals + // DOM structure different for notification center and workpackage detail view as well // seems way to hacky for me, but I couldn't find a better solution - if (this.isSmViewPort()) { - atBottom = (window.scrollY + window.outerHeight + 10) >= document.body.scrollHeight; - } else if (this.isMdViewPort()) { + if (this.isMobile() && !this.isWithinNotificationCenter()) { const scrollableContainer = document.querySelector('#content-body') as HTMLElement; atBottom = (scrollableContainer.scrollTop + scrollableContainer.clientHeight + 10) >= scrollableContainer.scrollHeight; From 6107dcd158bc1ccc59cbc3e71d01fd5026ab4879 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 17 Sep 2024 14:12:47 +0200 Subject: [PATCH 089/120] only perform scrolling when really required --- frontend/src/app/core/turbo/turbo-requests.service.ts | 6 +++++- .../work-packages/activities-tab/index.controller.ts | 10 +++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/core/turbo/turbo-requests.service.ts b/frontend/src/app/core/turbo/turbo-requests.service.ts index 30d83c7dda9f..f5dfb7364c0d 100644 --- a/frontend/src/app/core/turbo/turbo-requests.service.ts +++ b/frontend/src/app/core/turbo/turbo-requests.service.ts @@ -19,7 +19,11 @@ export class TurboRequestsService { return response.text(); }) - .then((html) => renderStreamMessage(html)) + .then((html) => { + renderStreamMessage(html); + + return html; // enable further processing wherever this is called + }) .catch((error) => this.toast.addError(error as string)); } diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 6367f76149b7..302895dc2e80 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -131,8 +131,8 @@ export default class IndexController extends Controller { const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); - void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()).then(() => { - this.handleUpdateStreamsResponse(journalsContainerAtBottom); + void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()).then((html) => { + this.handleUpdateStreamsResponse(html as string, journalsContainerAtBottom); }).catch((error) => { console.error('Error updating activities list:', error); }).finally(() => { @@ -157,8 +157,12 @@ export default class IndexController extends Controller { }); } - private handleUpdateStreamsResponse(journalsContainerAtBottom:boolean) { + private handleUpdateStreamsResponse(html:string, journalsContainerAtBottom:boolean) { this.setLastUpdateTimestamp(); + // only process append and prepend actions + if (!(html.includes('action="append"') || html.includes('action="prepend"'))) { + return; + } // the timeout is require in order to give the Turb.renderStream method enough time to render the new journals setTimeout(() => { if (this.sortingValue === 'asc' && journalsContainerAtBottom) { From 2f9c64ebcf2ab5f0665d058efde2e9aec0098c8e Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 17 Sep 2024 14:32:23 +0200 Subject: [PATCH 090/120] fixed eslint error --- .../work_packages/activities_tab/index_component.rb | 3 ++- .../dynamic/work-packages/activities-tab/index.controller.ts | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/index_component.rb b/app/components/work_packages/activities_tab/index_component.rb index 4a1cce474ff9..acad2fe5006e 100644 --- a/app/components/work_packages/activities_tab/index_component.rb +++ b/app/components/work_packages/activities_tab/index_component.rb @@ -58,7 +58,8 @@ def wrapper_data_attributes "work-packages--activities-tab--index-filter-value": filter, "work-packages--activities-tab--index-user-id-value": User.current.id, "work-packages--activities-tab--index-work-package-id-value": work_package.id, - "work-packages--activities-tab--index-polling-interval-in-ms-value": polling_interval # protoypical implementation + "work-packages--activities-tab--index-polling-interval-in-ms-value": polling_interval, + "work-packages--activities-tab--index-notification-center-path-name-value": notifications_path } end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 302895dc2e80..ca82eafa6074 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -18,6 +18,7 @@ export default class IndexController extends Controller { filter: String, userId: Number, workPackageId: Number, + notificationCenterPathName: String, }; static targets = ['journalsContainer', 'buttonRow', 'formRow', 'form']; @@ -32,6 +33,7 @@ export default class IndexController extends Controller { declare lastUpdateTimestamp:string; declare intervallId:number; declare pollingIntervalInMsValue:number; + declare notificationCenterPathNameValue:string; declare filterValue:string; declare userIdValue:number; declare workPackageIdValue:number; @@ -251,7 +253,7 @@ export default class IndexController extends Controller { } private isWithinNotificationCenter():boolean { - return location.pathname.includes('notifications'); + return window.location.pathname.includes(this.notificationCenterPathNameValue); } private addEventListenersToCkEditorInstance() { From ca0e80f0a4c34c18ddfdb47f56caf194fa0292ba Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 15:08:38 +0200 Subject: [PATCH 091/120] update workpackage attributes on main workpackage section when changeset was polled --- .../journals/item_component/details.rb | 7 ++- .../activities-tab/index.controller.ts | 51 +++++++++++++++++-- .../work_package/activities_spec.rb | 45 ++++++++++++++++ 3 files changed, 98 insertions(+), 5 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 6cb3546250fe..b83e58eeeb5a 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -184,7 +184,12 @@ def render_journal_details(details_container_inner) end def render_single_detail(container, detail) - container.with_row(flex_layout: true, my: 1, align_items: :flex_start) do |detail_container| + container.with_row( + flex_layout: true, + my: 1, + align_items: :flex_start, + classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-container" + ) do |detail_container| render_stem_line(detail_container) render_detail_description(detail_container, detail) end diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index ca82eafa6074..09a826e09bdf 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -3,6 +3,8 @@ import { ICKEditorInstance, } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; +import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service'; +import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource'; interface CustomEventWithIdParam extends Event { params:{ @@ -51,7 +53,13 @@ export default class IndexController extends Controller { private updateInProgress:boolean; private turboRequests:TurboRequestsService; + private apiV3Service:ApiV3Service; + async connect() { + const context = await window.OpenProject.getPluginContext(); + this.turboRequests = context.services.turboRequests; + this.apiV3Service = context.services.apiV3Service; + this.setLocalStorageKey(); this.setLastUpdateTimestamp(); this.setupEventListeners(); @@ -60,8 +68,24 @@ export default class IndexController extends Controller { this.populateRescuedEditorContent(); this.markAsConnected(); - const context = await window.OpenProject.getPluginContext(); - this.turboRequests = context.services.turboRequests; + // Towards using updateDisplayedWorkPackageAttributes here: + // + // this ideally only is triggered when switched back to the activities tab from e.g. the "Files" tab + // in order to make sure that the state of the displayed work package attributes is aligned with the state of the refreshed journal entries + // + // this is necessary because the polling for updates (and related work package attribute updates) only happens when the activity tab is connected + // + // without any further checks, this update is currently triggered even after the very first rendering of the activity tab + // + // this is not ideal but I don't want to introduce another hacky "ui-state-check" for now + this.updateDisplayedWorkPackageAttributes(); + + // something like below could be used to check for the ui state in the disconnect method + // in order to identify if the activity tab was connected at least once + // and then call updateDisplayedWorkPackageAttributes accordingly after an "implicit" tab change: + // + // const workPackageContainer = document.getElementsByTagName('wp-full-view-entry')[0] as HTMLElement; + // workPackageContainer.dataset.activityTabWasConnected = 'true'; } disconnect() { @@ -72,10 +96,12 @@ export default class IndexController extends Controller { } private markAsConnected() { + // used in specs for timing (this.element as HTMLElement).dataset.stimulusControllerConnected = 'true'; } private markAsDisconnected() { + // used in specs for timing (this.element as HTMLElement).dataset.stimulusControllerConnected = 'false'; } @@ -129,6 +155,7 @@ export default class IndexController extends Controller { async updateActivitiesList() { if (this.updateInProgress) return; + this.updateInProgress = true; const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); @@ -161,8 +188,24 @@ export default class IndexController extends Controller { private handleUpdateStreamsResponse(html:string, journalsContainerAtBottom:boolean) { this.setLastUpdateTimestamp(); - // only process append and prepend actions - if (!(html.includes('action="append"') || html.includes('action="prepend"'))) { + this.checkForAndHandleWorkPackageUpdate(html); + this.performAutoScrolling(html, journalsContainerAtBottom); + } + + private checkForAndHandleWorkPackageUpdate(html:string) { + if (html.includes('work-packages-activities-tab-journals-item-component-details--journal-detail-container')) { + this.updateDisplayedWorkPackageAttributes(); + } + } + + private updateDisplayedWorkPackageAttributes() { + const wp = this.apiV3Service.work_packages.id(this.workPackageIdValue); + void wp.refresh(); + } + + private performAutoScrolling(html:string, journalsContainerAtBottom:boolean) { + // only process append, prepend and update actions + if (!(html.includes('action="append"') || html.includes('action="prepend"') || html.includes('action="update"'))) { return; } // the timeout is require in order to give the Turb.renderStream method enough time to render the new journals diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 51022d5a90ed..6f697d627ede 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -923,4 +923,49 @@ end end end + + describe "work package attribute updates" do + let(:work_package) { create(:work_package, project:, author: admin) } + + let!(:first_comment_by_member) do + create(:work_package_journal, user: member, notes: "First comment by member", journable: work_package, version: 2) + end + + current_user { admin } + + before do + # set WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS to 1000 + # to speed up the polling interval for test duration + ENV["WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS"] = "1000" + + wp_page.visit! + wp_page.wait_for_activity_tab + end + + after do + ENV.delete("WORK_PACKAGES_ACTIVITIES_TAB_POLLING_INTERVAL_IN_MS") + end + + it "shows the updated work package attribute without reload", :aggregate_failures do + # wait for the latest comments to be loaded before proceeding! + activity_tab.expect_journal_notes(text: "First comment by member") + wp_page.expect_attributes(subject: work_package.subject) + + # we need to wait a bit before triggering the update below + # otherwise the update is already picked up by the initial (async) workpackage attributes update called in the connect hook + # and we wouldn't test the polling based update below + sleep 2 + wp_page.expect_attributes(subject: work_package.subject) # check if the initial update picked up the original subject + + # simulate another user is updating the work package subject + # this btw does behave very strangely in test env and will not assign the change to the specified user + WorkPackages::UpdateService.new(user: admin, model: work_package).call(subject: "Subject updated") + + # activity tab should show the updated attribute + activity_tab.expect_journal_changed_attribute(text: "Subject updated") + + # work package page should also show the updated attribute + wp_page.expect_attributes(subject: "Subject updated") + end + end end From 2f05a531d47b953c29ecb5013bc5c16c602931a9 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 15:20:48 +0200 Subject: [PATCH 092/120] fixed attachement links in changesets --- .../activities_tab/journals/item_component/details.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index b83e58eeeb5a..2c45b252391f 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -188,7 +188,8 @@ def render_single_detail(container, detail) flex_layout: true, my: 1, align_items: :flex_start, - classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-container" + classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-container", + data: { turbo: false } ) do |detail_container| render_stem_line(detail_container) render_detail_description(detail_container, detail) From f087bf771639a1b2fb127b9184dcbf44eee79221 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 16:04:54 +0200 Subject: [PATCH 093/120] added missing labels and aria-labels, adjusted username width in order not break UI on smallest possible side pane width --- .../journals/item_component.html.erb | 3 +- .../journals/item_component/details.rb | 29 +++++++++++++++++-- .../journals/item_component/details.sass | 6 ++-- config/locales/en.yml | 5 +++- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 4eae5fe7b404..c1c0f60d7db5 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -5,7 +5,8 @@ journal_container.with_row do render(border_box_container( id: "activity-anchor-#{journal.version}", - padding: :condensed + padding: :condensed, + "aria-label": I18n.t("activities.work_packages.activity_tab.commented") )) do |border_box_component| border_box_component.with_header(px: 2, py: 1, data: { test_selector: "op-journal-notes-header" }) do flex_layout(align_items: :center, justify_content: :space_between) do |header_container| diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 2c45b252391f..1771f8d2a577 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -74,6 +74,7 @@ def render_header_start(header_container) render_timeline_icon(header_start_container) render_user_avatar(header_start_container) render_user_name_for_desktop(header_start_container) + render_journal_type_for_desktop(header_start_container) render_user_name_and_time_for_mobile(header_start_container) render_updated_time(header_start_container) end @@ -101,6 +102,23 @@ def render_user_name_for_desktop(container) end end + def render_journal_type_for_desktop(container) + container.with_column( + mr: 1, + classes: "work-packages-activities-tab-journals-item-component-details--journal-type hidden-for-mobile" + ) do + if journal.initial? + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do + I18n.t("activities.work_packages.activity_tab.created_on") + end + else + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do + I18n.t("activities.work_packages.activity_tab.changed_on") + end + end + end + end + def render_user_name_and_time_for_mobile(container) container.with_column( mr: 1, @@ -143,7 +161,10 @@ def render_notification_bubble(container) end def render_activity_link(container) - container.with_column(pr: 3) do + container.with_column( + pr: 3, + classes: "work-packages-activities-tab-journals-item-component-details--activity-link-container" + ) do render(Primer::Beta::Link.new( href: "#", scheme: :secondary, @@ -158,7 +179,11 @@ def render_activity_link(container) end def icon_aria_label - journal.initial? ? "Add" : "Change" + if journal.initial? + I18n.t("activities.work_packages.activity_tab.created") + else + I18n.t("activities.work_packages.activity_tab.changed") + end end def render_details(details_container) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index 185bf390c85d..d2863424716b 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -20,7 +20,7 @@ max-width: 60% &--user-name @media screen and (min-width: $breakpoint-sm) - max-width: 40% + max-width: 30% &--empty-line margin-top: 0px!important margin-bottom: 0px!important @@ -42,4 +42,6 @@ font-style: normal color: var(--fgColor-muted, var(--color-fg-subtle)) &--notification-dot-icon - color: var(--bgColor-accent-emphasis) \ No newline at end of file + color: var(--bgColor-accent-emphasis) + &--activity-link-container + padding-top: 2px \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index fa050ba41155..efbaca78b8d2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -43,8 +43,11 @@ en: label_sort_desc: "Newest on top" label_type_to_comment: "Type here to comment" label_submit_comment: "Submit comment" - changed_on: "made changes on" + changed_on: "changed on" created_on: "created this on" + changed: "changed" + created: "created" + commented: "commented" admin: From 65e0211802aefa3b4498097eb7cf08c6e345bdeb Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 16:13:45 +0200 Subject: [PATCH 094/120] fixed stem styling --- .../activities_tab/journals/item_component/details.rb | 6 +++++- .../activities_tab/journals/item_component/details.sass | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 1771f8d2a577..4fd23af862be 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -226,7 +226,11 @@ def render_stem_line(container) end def render_detail_description(container, detail) - container.with_column(pl: 1, font_size: :small) do + container.with_column( + pl: 1, + font_size: :small, + classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-description-container" + ) do render(Primer::Beta::Text.new( classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-description", data: { "test-selector": "op-journal-detail-description" } diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index d2863424716b..e43800f3fae7 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -44,4 +44,6 @@ &--notification-dot-icon color: var(--bgColor-accent-emphasis) &--activity-link-container - padding-top: 2px \ No newline at end of file + padding-top: 2px + &--journal-detail-description-container + max-width: 95% // otherwise the stem branch might get too short for long descriptions \ No newline at end of file From 4890d014c88ba9971dc60fd67db97ac554f2f861 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 16:49:28 +0200 Subject: [PATCH 095/120] rename sorting labels as requested --- config/locales/en.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index efbaca78b8d2..3bf28de9fd31 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -39,7 +39,7 @@ en: label_activity_show_all: "Show everything" label_activity_show_only_comments: "Show comments only" label_activity_show_only_changes: "Show changes only" - label_sort_asc: "Oldest on top" + label_sort_asc: "Newest at the bottom" label_sort_desc: "Newest on top" label_type_to_comment: "Type here to comment" label_submit_comment: "Submit comment" From 453a2a7367f56835c804fcc9cbbb81c2148ec15c Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 17:02:04 +0200 Subject: [PATCH 096/120] removed latest activties from overview tab as requested by @wielinde in WP #58017 --- .../overview-tab/overview-tab.component.ts | 6 ++++++ .../wp-single-view-tabs/overview-tab/overview-tab.html | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component.ts b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component.ts index ea20e3c598bc..11766a4197b2 100644 --- a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component.ts +++ b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.component.ts @@ -32,6 +32,7 @@ import { WorkPackageResource } from 'core-app/features/hal/resources/work-packag import { I18nService } from 'core-app/core/i18n/i18n.service'; import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin'; import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service'; +import { ConfigurationService } from 'core-app/core/config/configuration.service'; @Component({ templateUrl: './overview-tab.html', @@ -44,10 +45,13 @@ export class WorkPackageOverviewTabComponent extends UntilDestroyedMixin impleme public tabName = this.I18n.t('js.label_latest_activity'); + public primerizedActivitiesEnabled:boolean; + public constructor( readonly I18n:I18nService, readonly $state:StateService, readonly apiV3Service:ApiV3Service, + readonly configurationService:ConfigurationService, ) { super(); } @@ -55,6 +59,8 @@ export class WorkPackageOverviewTabComponent extends UntilDestroyedMixin impleme ngOnInit() { this.workPackageId = this.workPackage?.id || this.$state.params.workPackageId as string; + this.primerizedActivitiesEnabled = this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities'); + this .apiV3Service .work_packages diff --git a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.html b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.html index a0d7a0a121ac..60d4cac5e695 100644 --- a/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.html +++ b/frontend/src/app/features/work-packages/components/wp-single-view-tabs/overview-tab/overview-tab.html @@ -1,7 +1,7 @@ -
+

From ecfdb3954c73d195d0bde3549692371f637c959d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Wed, 25 Sep 2024 17:39:41 +0200 Subject: [PATCH 097/120] update the count in the primerized activty tab header when new activity is polled --- .../work_packages/activities_tab_controller.rb | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index d2c15b228493..6aec4724d5f6 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -317,6 +317,7 @@ def generate_time_based_update_streams(last_update_timestamp) if journals.any? remove_potential_empty_state + update_activity_counter end end @@ -348,6 +349,14 @@ def remove_potential_empty_state ) end + def update_activity_counter + # update the activity counter in the primerized tabs + # not targeting the legacy tab! + replace_via_turbo_stream( + component: WorkPackages::Details::UpdateCounterComponent.new(work_package: @work_package, menu_name: "activity") + ) + end + def allowed_to_edit?(journal) journal.editable_by?(User.current) end From 66aa22978ba5a57c4ddc5fc5455e556f8b6b0ab7 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 1 Oct 2024 20:33:31 +0200 Subject: [PATCH 098/120] prototypical implementation of the toggle singel notifications feature, specs and refactoring required --- .../journals/item_component.html.erb | 43 ++++++++++-- .../activities_tab/journals/item_component.rb | 8 ++- .../journals/item_component.sass | 3 +- .../journals/item_component/details.rb | 56 ++++++++++++--- .../notifications/update_contract.rb | 33 +++++++++ .../activities_tab_controller.rb | 69 +++++++++++++++---- config/initializers/permissions.rb | 4 +- config/routes.rb | 4 +- 8 files changed, 184 insertions(+), 36 deletions(-) create mode 100644 app/contracts/notifications/update_contract.rb diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index c1c0f60d7db5..8707ca13da83 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -32,11 +32,38 @@ header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? header_end_container.with_column(mr: 2, pt: 1) do - render(Primer::Beta::Octicon.new( - :"dot-fill", # color is set via CSS as requested by UI/UX Team + render(Primer::Beta::IconButton.new( + scheme: :invisible, # color is set via CSS as requested by UI/UX Team classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", - size: :medium, - data: { test_selector: "op-journal-unread-notification" } + icon: "dot-fill", + "aria-label": "mark notification as read", + show_tooltip: true, + href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, id: journal.id ), + tag: :a, + data: { + test_selector: "op-journal-unread-notification", + turbo: true, + turbo_stream: true, + turbo_method: :put + } + )) + end + end + if has_read_notifications? + header_end_container.with_column(mr: 2, pt: 1) do + render(Primer::Beta::IconButton.new( + scheme: :invisible, # color is set via CSS as requested by UI/UX Team + icon: "dot-fill", + "aria-label": "mark notification as unread", + show_tooltip: true, + href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, id: journal.id ), + tag: :a, + data: { + test_selector: "op-journal-read-notification", + turbo: true, + turbo_stream: true, + turbo_method: :put + } )) end end @@ -87,7 +114,13 @@ end end journal_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new(journal:, has_unread_notifications: notification_on_details?, filter:)) + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new( + journal:, + show_notifications: show_notification_on_details?, + has_unread_notifications: has_unread_notifications?, + has_read_notifications: has_read_notifications?, + filter: + )) end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index e79ecc2c7662..e9366749cf5d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -85,8 +85,12 @@ def has_unread_notifications? journal.notifications.where(read_ian: false, recipient_id: User.current.id).any? end - def notification_on_details? - has_unread_notifications? && journal.notes.blank? + def has_read_notifications? + journal.notifications.where(read_ian: true, recipient_id: User.current.id).any? + end + + def show_notification_on_details? + journal.notes.blank? end def allowed_to_edit? diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index 31c091423042..f1568cdd5a4c 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -8,7 +8,8 @@ @media screen and (min-width: $breakpoint-sm) max-width: 40% &--notification-dot-icon - color: var(--bgColor-accent-emphasis) + svg + color: var(--bgColor-accent-emphasis)!important &--header-start-container flex-grow: 1 diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 4fd23af862be..a9d7206475bd 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -37,17 +37,20 @@ class ItemComponent::Details < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:, filter:, has_unread_notifications: false) + def initialize(journal:, filter:, show_notifications: false, has_unread_notifications: false, + has_read_notifications: false) super @journal = journal + @show_notifications = show_notifications @has_unread_notifications = has_unread_notifications + @has_read_notifications = has_read_notifications @filter = filter end private - attr_reader :journal, :has_unread_notifications, :filter + attr_reader :journal, :show_notifications, :has_unread_notifications, :has_read_notifications, :filter def wrapper_uniq_by journal.id @@ -144,19 +147,52 @@ def render_updated_time(container) def render_header_end(header_container) header_container.with_column(flex_layout: true) do |header_end_container| - render_notification_bubble(header_end_container) if has_unread_notifications + render_notification_bubble(header_end_container) render_activity_link(header_end_container) end end def render_notification_bubble(container) - container.with_column(mr: 2) do - render(Primer::Beta::Octicon.new( - :"dot-fill", # color is set via CSS as requested by UI/UX Team - classes: "work-packages-activities-tab-journals-item-component-details--notification-dot-icon", - size: :medium, - data: { test_selector: "op-journal-unread-notification" } - )) + return unless show_notifications + + if has_unread_notifications + container.with_column(mr: 2) do + render(Primer::Beta::IconButton.new( + scheme: :invisible, # color is set via CSS as requested by UI/UX Team + classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", + icon: "dot-fill", + "aria-label": "mark notification as read", + show_tooltip: true, + href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, + id: journal.id), + tag: :a, + data: { + test_selector: "op-journal-unread-notification", + turbo: true, + turbo_stream: true, + turbo_method: :put + } + )) + end + end + if has_read_notifications + container.with_column(mr: 2) do + render(Primer::Beta::IconButton.new( + scheme: :invisible, # color is set via CSS as requested by UI/UX Team + icon: "dot-fill", + "aria-label": "mark notification as unread", + show_tooltip: true, + href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, + id: journal.id), + tag: :a, + data: { + test_selector: "op-journal-read-notification", + turbo: true, + turbo_stream: true, + turbo_method: :put + } + )) + end end end diff --git a/app/contracts/notifications/update_contract.rb b/app/contracts/notifications/update_contract.rb new file mode 100644 index 000000000000..921b3cfee488 --- /dev/null +++ b/app/contracts/notifications/update_contract.rb @@ -0,0 +1,33 @@ +#-- copyright +# OpenProject is an open source project management software. +# Copyright (C) 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 UpdateContract < ::ModelContract + attribute :read_ian + end +end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 6aec4724d5f6..11087e726b36 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -33,7 +33,7 @@ class WorkPackages::ActivitiesTabController < ApplicationController before_action :find_work_package before_action :find_project - before_action :find_journal, only: %i[edit cancel_edit update] + before_action :find_journal, only: %i[edit cancel_edit update toggle_notification_read_status] before_action :set_filter before_action :authorize @@ -153,6 +153,23 @@ def update respond_with_turbo_streams end + def toggle_notification_read_status + notification = Notification.find_by(recipient: User.current, journal: @journal) + + call = Notifications::UpdateService.new(model: notification, user: User.current).call( + read_ian: !notification.read_ian + ) + + if call.success? + update_item_component(@journal.reload, state: :show) + update_activity_counter + else + handle_failed_update_call(call) + end + + respond_with_turbo_streams + end + private def respond_with_error(error_message) @@ -293,27 +310,17 @@ def update_item_component(journal, state: :show) end def generate_time_based_update_streams(last_update_timestamp) - # TODO: prototypical implementation journals = @work_package.journals if @filter == :only_comments journals = journals.where.not(notes: "") end - journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| - update_via_turbo_stream( - # we need to update the whole component as the show part is not rendered for journals which originally have no notes - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal:, - filter: @filter - ) - ) - # TODO: is it possible to loose an edit state this way? - end + rerender_updated_journals(journals, last_update_timestamp) - journals.where("created_at > ?", last_update_timestamp).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal) - end + rerender_journals_with_updated_notification(journals, last_update_timestamp) + + append_or_prepend_new_journals(journals, last_update_timestamp) if journals.any? remove_potential_empty_state @@ -321,6 +328,28 @@ def generate_time_based_update_streams(last_update_timestamp) end end + def rerender_updated_journals(journals, last_update_timestamp) + journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| + # we need to update the whole component as the show part is not rendered for journals which originally have no notes + update_journal_item(journal:) + end + end + + def rerender_journals_with_updated_notification(journals, last_update_timestamp) + journals + .joins(:notifications) + .where("notifications.updated_at > ?", last_update_timestamp) + .find_each do |journal| + update_journal_item(journal:) + end + end + + def append_or_prepend_new_journals(journals, last_update_timestamp) + journals.where("created_at > ?", last_update_timestamp).find_each do |journal| + append_or_prepend_latest_journal_via_turbo_stream(journal) + end + end + def append_or_prepend_latest_journal_via_turbo_stream(journal) target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package, @@ -357,6 +386,16 @@ def update_activity_counter ) end + def update_journal_item(journal:, filter: @filter, state: :show) + update_via_turbo_stream( + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal:, + filter:, + state: + ) + ) + end + def allowed_to_edit?(journal) journal.editable_by?(User.current) end diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 4860440a10da..8afa0bc5e18b 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -263,7 +263,7 @@ wpt.permission :edit_work_package_notes, { - "work_packages/activities_tab": %i[edit cancel_edit update] + "work_packages/activities_tab": %i[edit cancel_edit update toggle_notification_read_status] }, permissible_on: :project, require: :loggedin, @@ -271,7 +271,7 @@ wpt.permission :edit_own_work_package_notes, { - "work_packages/activities_tab": %i[edit cancel_edit update] + "work_packages/activities_tab": %i[edit cancel_edit update toggle_notification_read_status] }, permissible_on: %i[work_package project], require: :loggedin, diff --git a/config/routes.rb b/config/routes.rb index dff7f9c1449a..aeba8365da0b 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -577,9 +577,11 @@ # states managed by client-side routing on work_package#index get "details/*state" => "work_packages#index", on: :collection, as: :details - resources :activities, controller: "work_packages/activities_tab", only: %i[index create edit update] do + resources :activities, controller: "work_packages/activities_tab", + only: %i[index create edit update] do member do get :cancel_edit + put :toggle_notification_read_status end collection do get :update_streams From a5a17baf3233a847dee5c67ec82ec1eb5d2eb501 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 1 Oct 2024 20:34:23 +0200 Subject: [PATCH 099/120] prototypical changes to the notification center and its behaviour when new notifications are polled --- .../in-app-notifications.actions.ts | 5 + .../bell/state/ian-bell.query.ts | 6 + .../bell/state/ian-bell.service.ts | 4 + .../in-app-notification-center.component.ts | 42 ++- .../center/state/ian-center.service.ts | 239 ++++++++++++++++-- .../center/state/ian-center.store.ts | 3 + public/favicon_notification.ico | Bin 0 -> 4286 bytes 7 files changed, 273 insertions(+), 26 deletions(-) create mode 100644 public/favicon_notification.ico diff --git a/frontend/src/app/core/state/in-app-notifications/in-app-notifications.actions.ts b/frontend/src/app/core/state/in-app-notifications/in-app-notifications.actions.ts index 16498830cbe1..017600bc266d 100644 --- a/frontend/src/app/core/state/in-app-notifications/in-app-notifications.actions.ts +++ b/frontend/src/app/core/state/in-app-notifications/in-app-notifications.actions.ts @@ -54,6 +54,11 @@ export const notificationCountIncreased = action( props<{ origin:string, count:number }>(), ); +export const notificationCountChanged = action( + '[IAN] The backend sent a notification count that was different to the last known', + props<{ origin:string, count:number }>(), +); + export const centerUpdatedInPlace = action( '[IAN] The notification center updated the notification list without a full page refresh', props<{ origin:string }>(), diff --git a/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.query.ts b/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.query.ts index 6748f4f7be98..b763d40caa5a 100644 --- a/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.query.ts +++ b/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.query.ts @@ -8,6 +8,12 @@ import { export class IanBellQuery extends Query { unread$ = this.select('totalUnread'); + unreadCountChanged$ = this.unread$.pipe( + pairwise(), + filter(([last, curr]) => curr !== last), + map(([, curr]) => curr), + ); + unreadCountIncreased$ = this.unread$.pipe( pairwise(), filter(([last, curr]) => curr > last), diff --git a/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.service.ts b/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.service.ts index 671ed2e95997..9a511306d103 100644 --- a/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.service.ts +++ b/frontend/src/app/features/in-app-notifications/bell/state/ian-bell.service.ts @@ -43,6 +43,7 @@ import { IanBellQuery } from 'core-app/features/in-app-notifications/bell/state/ import { EffectCallback, EffectHandler } from 'core-app/core/state/effects/effect-handler.decorator'; import { notificationCountIncreased, + notificationCountChanged, notificationsMarkedRead, } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions'; import { ActionsService } from 'core-app/core/state/actions/actions.service'; @@ -68,6 +69,9 @@ export class IanBellService { readonly actions$:ActionsService, readonly resourceService:InAppNotificationsResourceService, ) { + this.query.unreadCountChanged$.subscribe((count) => { + this.actions$.dispatch(notificationCountChanged({ origin: this.id, count })); + }); this.query.unreadCountIncreased$.pipe(skip(1)).subscribe((count) => { this.actions$.dispatch(notificationCountIncreased({ origin: this.id, count })); }); diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts index 641983075d1f..8507250baf20 100644 --- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts +++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts @@ -26,7 +26,7 @@ // See COPYRIGHT and LICENSE files for more details. //++ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy } from '@angular/core'; import { I18nService } from 'core-app/core/i18n/i18n.service'; import { filter, map } from 'rxjs/operators'; import { StateService } from '@uirouter/angular'; @@ -50,7 +50,7 @@ import { styleUrls: ['./in-app-notification-center.component.sass'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class InAppNotificationCenterComponent implements OnInit { +export class InAppNotificationCenterComponent implements OnInit, OnDestroy { maxSize = NOTIFICATIONS_MAX_SIZE; hasMoreThanPageSize$ = this.storeService.hasMoreThanPageSize$; @@ -76,6 +76,8 @@ export class InAppNotificationCenterComponent implements OnInit { selectedWorkPackage$ = this.storeService.selectedWorkPackage$; + handleVisibilityChangeBound:EventListener; + reasonMenuItems = [ { key: 'mentioned', @@ -158,6 +160,29 @@ export class InAppNotificationCenterComponent implements OnInit { filter: this.urlParams.get('filter'), name: this.urlParams.get('name'), }); + this.checkNotificationPermissions(); + this.setupEventListeners(); + } + + ngOnDestroy():void { + this.removeEventListeners(); + } + + setupEventListeners():void { + this.handleVisibilityChangeBound = () => { void this.handleVisibilityChange(); }; + document.addEventListener('visibilitychange', this.handleVisibilityChangeBound); + } + + removeEventListeners():void { + document.removeEventListener('visibilitychange', this.handleVisibilityChangeBound); + } + + handleVisibilityChange() { + if (document.hidden) { + this.storeService.setCenterHidden(true); + } else { + this.storeService.setCenterHidden(false); + } } noNotificationText(hasNotifications:boolean):string { @@ -171,4 +196,17 @@ export class InAppNotificationCenterComponent implements OnInit { return this.text.no_notification_for_filter; } + + checkNotificationPermissions():void { + // Check if the browser supports notifications + if (!('Notification' in window)) { + return; + } + // if so, ask for permission if not already denied + if (Notification.permission !== 'denied') { + Notification.requestPermission().catch((error) => { + console.error(error); + }); + } + } } diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 4c215a07cbc1..054ac6a32c3b 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -39,6 +39,7 @@ import { markNotificationsAsRead, notificationCountIncreased, notificationsMarkedRead, + notificationCountChanged, } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions'; import { INotification } from 'core-app/core/state/in-app-notifications/in-app-notification.model'; import { EffectCallback, EffectHandler } from 'core-app/core/state/effects/effect-handler.decorator'; @@ -223,13 +224,25 @@ export class IanCenterService extends UntilDestroyedMixin { this.reload.next(true); } + setCenterHidden(hidden:boolean):void { + this.store.update({ centerHidden: hidden }); + + if (!hidden) { + this.removeNotificationIndicatorInIcon(); + } + } + markAsRead(notifications:ID[]):void { + this.hideNewNotifcationToast(); + this.actions$.dispatch( markNotificationsAsRead({ origin: this.id, notifications }), ); } openSplitScreen(workPackageId:string, tabIdentifier:string = 'activity'):void { + this.hideNewNotifcationToast(); + const link = this.pathHelper.notificationsDetailsPath(workPackageId, tabIdentifier) + window.location.search; Turbo.visit(link, { frame: 'content-bodyRight', action: 'advance' }); } @@ -244,6 +257,8 @@ export class IanCenterService extends UntilDestroyedMixin { } showNextNotification():void { + this.hideNewNotifcationToast(); + void this .notifications$ .pipe(take(1)) @@ -259,44 +274,220 @@ export class IanCenterService extends UntilDestroyedMixin { }); } + // /** + // * Check for updates after bell count increased + // */ + // @EffectCallback(notificationCountIncreased) + // private checkForNewNotifications() { + // this.onReload.pipe(take(1)).subscribe((collection) => { + // const { activeCollection } = this.query.getValue(); + // const hasNewNotifications = !collection.ids.reduce( + // (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), + // true, + // ); + + // if (!hasNewNotifications) { + // return; + // } + + // if (this.activeReloadToast) { + // this.toastService.remove(this.activeReloadToast); + // this.activeReloadToast = null; + // } + + // this.activeReloadToast = this.toastService.add({ + // type: 'info', + // icon: 'bell', + // message: this.I18n.t('js.notifications.center.new_notifications.message'), + // link: { + // text: this.I18n.t('js.notifications.center.new_notifications.link_text'), + // target: () => { + // this.store.update({ activeCollection: collection }); + // this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + // this.activeReloadToast = null; + // }, + // }, + // }); + // }); + // this.reload.next(false); + // } + /** - * Check for updates after bell count increased + * Handle updates after bell count changed */ - @EffectCallback(notificationCountIncreased) - private checkForNewNotifications() { - this.onReload.pipe(take(1)).subscribe((collection) => { + @EffectCallback(notificationCountChanged) + private handleChangedNotificationCount() { + // update the UI state for increased AND decreased notifications + // decreasing the notification count could happen when the user + // itself marks notifications as read in the split view or on another tab + this.onReload.pipe( + take(1), + switchMap((collection) => { + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + return this.selectNotifications$.pipe( + map((notifications) => ({ notifications, collection })), + ); + }), + switchMap(({ notifications, collection }) => { + return this.selectedWorkPackage$.pipe( + take(1), + map((selectedWpId) => ({ notifications, collection, selectedWpId })), + ); + }), + ).subscribe(({ notifications, collection, selectedWpId }) => { const { activeCollection } = this.query.getValue(); - const hasNewNotifications = !collection.ids.reduce( - (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), - true, + const newNotificationIds = activeCollection.ids.filter( + (id) => !collection.ids.includes(id), ); + const hasNewNotifications = newNotificationIds.length > 0; if (!hasNewNotifications) { return; } + const newNotifications = notifications.filter((n) => newNotificationIds.includes(n.id)); + const newNotificationsForOtherWPs = newNotifications.filter((notification) => { + const wpId = this.getWorkPackageIdFromNotification(notification); + return wpId && wpId !== selectedWpId; + }); - if (this.activeReloadToast) { - this.toastService.remove(this.activeReloadToast); - this.activeReloadToast = null; - } + const hasNewNotificationsForOtherThanSelectedWp = newNotificationsForOtherWPs.length > 0; - this.activeReloadToast = this.toastService.add({ - type: 'info', - icon: 'bell', - message: this.I18n.t('js.notifications.center.new_notifications.message'), - link: { - text: this.I18n.t('js.notifications.center.new_notifications.link_text'), - target: () => { - this.store.update({ activeCollection: collection }); - this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); - this.activeReloadToast = null; - }, - }, - }); + this.informAboutUnreadNotification(hasNewNotificationsForOtherThanSelectedWp); }); + this.reload.next(false); } + private getWorkPackageIdFromNotification(notification:INotification):string | null { + if (notification._links.resource && notification._links.resource.href) { + return idFromLink(notification._links.resource.href); + } + return null; + } + + private informAboutUnreadNotification(hasNewNotificationsForOtherThanSelectedWp:boolean):void { + const state = this.store.getValue(); + + if (state.centerHidden) { + // notification center is not visible (as far as it can be determined - e.g. another browser tab is selected) + // try to notify user even when notification is associated with selected workpackage + if (this.browserNotificationsEnabled()) { + this.createBrowserNotification(); + } + + this.showNotificationIndicatorInIcon(); + this.showNewNotificationToast(); + } else if (hasNewNotificationsForOtherThanSelectedWp) { + // notification center is visible (as far as it can be determined) + // then do not trigger the browser notification or such + // just render the toast in case the notifications are associated with a workpackage other than the selected + this.showNewNotificationToast(); + } + } + + private showNewNotificationToast():void { + this.hideNewNotifcationToast(); + this.activeReloadToast = this.toastService.add({ + type: 'info', + icon: 'bell', + message: this.I18n.t('js.notifications.center.new_notifications.message'), + }); + } + + private hideNewNotifcationToast():void { + if (this.activeReloadToast) { + this.toastService.remove(this.activeReloadToast); + this.activeReloadToast = null; + } + } + + private browserNotificationsEnabled():boolean { + let disabled = false; + // Check if the browser supports notifications + if (!('Notification' in window)) { + disabled = true; + } + + if (Notification.permission === 'denied') { + disabled = true; + } + + return !disabled; + } + + private createBrowserNotification():void { + const notification = new Notification('OpenProject', { + body: this.I18n.t('js.notifications.center.new_notifications.message'), + tag: 'opNewNotification', // important: without a tag the notifications would sum up which would be highly annoying + }); + + notification.onclick = () => { + window.focus(); + notification.close(); + this.removeNotificationIndicatorInIcon(); + }; + } + + private showNotificationIndicatorInIcon():void { + const iconLink = window.document.querySelector("link[rel*='icon']"); + if (iconLink) { + (iconLink as HTMLLinkElement).href = 'favicon_notification.ico'; + } + } + + private removeNotificationIndicatorInIcon():void { + const iconLink = window.document.querySelector("link[rel*='icon']"); + if (iconLink) { + (iconLink as HTMLLinkElement).href = 'favicon.ico'; + } + } + + private playNotificationSound():void { + const audioContext = new window.AudioContext(); + + const createOscillator = (freq:number, type:OscillatorType = 'sine') => { + const osc = audioContext.createOscillator(); + osc.type = type; + osc.frequency.setValueAtTime(freq, audioContext.currentTime); + return osc; + }; + + const createEnvelope = () => { + const gain = audioContext.createGain(); + gain.gain.setValueAtTime(0, audioContext.currentTime); + gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.005); + gain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5); + return gain; + }; + + const oscillators = [ + createOscillator(880), // A5 + createOscillator(1108.73), // C#6 + createOscillator(1318.51), // E6 + createOscillator(1760, 'triangle'), // A6 (overtone) + ]; + + const masterGain = audioContext.createGain(); + masterGain.gain.setValueAtTime(0.7, audioContext.currentTime); + + oscillators.forEach((osc) => { + const envelope = createEnvelope(); + osc.connect(envelope); + envelope.connect(masterGain); + osc.start(); + osc.stop(audioContext.currentTime + 0.5); + }); + + masterGain.connect(audioContext.destination); + + // Clean up + setTimeout(() => { + masterGain.disconnect(); + void audioContext.close(); + }, 1000); + } + /** * Reload after notifications were successfully marked as read */ diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts index 00c3c04ef1e6..5adc94a6bee1 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts @@ -20,6 +20,8 @@ export interface IanCenterState { /** Number of elements not showing after max values loaded */ notLoaded:number; + + centerHidden:boolean; } export const IAN_FACET_FILTERS:Record = { @@ -37,6 +39,7 @@ export function createInitialState():IanCenterState { activeCollection: { ids: [] }, activeFacet: 'unread', notLoaded: 0, + centerHidden: false, }; } diff --git a/public/favicon_notification.ico b/public/favicon_notification.ico new file mode 100644 index 0000000000000000000000000000000000000000..f6a1bb6f203ec1794a58ab24e84a6f06bccbafae GIT binary patch literal 4286 zcmeH~e`p(J7{{M1Vu!;uY1g%P*VRzwHa4BIj1I*~{X-{1QE(0%vleOY&cd7w(K3s> zCg+OGF(&>o5to{zI`pq0I1pti6?BYjh={1jIz>>X*jcCDI(_{s2jre@`Y#rjmugL!LamWy4KgBb9 zDVEtmO__TrZgm9ZkvH4A^M*15j;JO%QyslB2e4!I4P{Qu{s8(1aHk-b!2KPc&*A^Z}jGn?QdzT#`Hcz4#Q3kU@x|oQ`{Z~<6FoKMEJ;`u>Ao!Mvc~bcMb(Z&AJ&m zLw&bkDBJV8`XEcr&<4G8Q|Qy$%Q^6z$1~4DEN2P`#SZx)0kHtpO@wL8GiN`SeKNH5B5dLFPPeW((cvp`Lg0?C>h@8 zcdY9@1il}qip~BNxgL`75tH|NdEZsz=M3e9^vmnYZmzLAlf5UROP{a8@|zQT8vLVv zd|q#9_iC_9bNHz5wQG!VY90#9zl{0+P{v2h%J@U^(OcHttQR9KR!BbTGM;|VkDoKz zH%q%$qXxJS{j*N$LGEjtZ+oQJpbUoP|At;LBI6@wW&h<(ZL73`?_aX)kM1^U66f~g*4`+RaZ)$!u4`@6H9H}2$`zKk4#=7H_pqe{rvMDMs(^0U2( zh2a0_&LPbG8@eX;Z0QmkZs`-PiKhkEV`K^TWK&vjZ7gWnBNn$0h|U!|&%lQDb=Wco z^s^2yKM%uo`*IEk9$hW;O`F8sUE9U_wJEV?b-%dvCPQ>59~0Z|dO&2hCdJ{tj!NB0 zwp*juo7fLW5qrEw;j>zvnNuSv?W0$ER(t|hY4D*9r_&E7zk0c6r5H&qlRnUj?q>d* zdp-wT{Ez)&fp;%_oEp>Bul@Y$v7sghT>O(kF)*iZIeyAakY89kp94-@wG{MyPmNs& z@(XLPm5(*p@5*y3EGNjnRzCLifve5u^Eoh2L)~{Z_;_C$s>IdRPiy2~4Dt(W$G&=| z!si<6Z(r^g1MB~p Date: Tue, 1 Oct 2024 20:53:46 +0200 Subject: [PATCH 100/120] decrease polling interval via env var for pullpreview --- .github/workflows/pullpreview.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/pullpreview.yml b/.github/workflows/pullpreview.yml index c143ad52ef45..23364897f05f 100644 --- a/.github/workflows/pullpreview.yml +++ b/.github/workflows/pullpreview.yml @@ -34,6 +34,7 @@ jobs: echo "OPENPROJECT_LOOKBOOK__ENABLED=true" >> .env.pullpreview echo "OPENPROJECT_HSTS=false" >> .env.pullpreview echo "OPENPROJECT_FEATURE_PRIMERIZED_WORK_PACKAGE_ACTIVITIES_ACTIVE=true" >> .env.pullpreview + echo "OPENPROJECT_NOTIFICATIONS_POLLING_INTERVAL=10000" >> .env.pullpreview - name: Boot as BIM edition if: contains(github.ref, 'bim/') || contains(github.head_ref, 'bim/') run: | From 0f6070419c3f6810610b929822cabfdf106ff3cb Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 16:07:08 +0200 Subject: [PATCH 101/120] Revert "prototypical implementation of the toggle singel notifications feature, specs and refactoring required" This reverts commit 66aa22978ba5a57c4ddc5fc5455e556f8b6b0ab7. --- .../journals/item_component.html.erb | 43 ++---------- .../activities_tab/journals/item_component.rb | 8 +-- .../journals/item_component.sass | 3 +- .../journals/item_component/details.rb | 56 +++------------ .../notifications/update_contract.rb | 33 --------- .../activities_tab_controller.rb | 69 ++++--------------- config/initializers/permissions.rb | 4 +- config/routes.rb | 4 +- 8 files changed, 36 insertions(+), 184 deletions(-) delete mode 100644 app/contracts/notifications/update_contract.rb diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index 8707ca13da83..c1c0f60d7db5 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -32,38 +32,11 @@ header_container.with_column(flex_layout: true, align_items: :center) do |header_end_container| if has_unread_notifications? header_end_container.with_column(mr: 2, pt: 1) do - render(Primer::Beta::IconButton.new( - scheme: :invisible, # color is set via CSS as requested by UI/UX Team + render(Primer::Beta::Octicon.new( + :"dot-fill", # color is set via CSS as requested by UI/UX Team classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", - icon: "dot-fill", - "aria-label": "mark notification as read", - show_tooltip: true, - href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, id: journal.id ), - tag: :a, - data: { - test_selector: "op-journal-unread-notification", - turbo: true, - turbo_stream: true, - turbo_method: :put - } - )) - end - end - if has_read_notifications? - header_end_container.with_column(mr: 2, pt: 1) do - render(Primer::Beta::IconButton.new( - scheme: :invisible, # color is set via CSS as requested by UI/UX Team - icon: "dot-fill", - "aria-label": "mark notification as unread", - show_tooltip: true, - href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, id: journal.id ), - tag: :a, - data: { - test_selector: "op-journal-read-notification", - turbo: true, - turbo_stream: true, - turbo_method: :put - } + size: :medium, + data: { test_selector: "op-journal-unread-notification" } )) end end @@ -114,13 +87,7 @@ end end journal_container.with_row do - render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new( - journal:, - show_notifications: show_notification_on_details?, - has_unread_notifications: has_unread_notifications?, - has_read_notifications: has_read_notifications?, - filter: - )) + render(WorkPackages::ActivitiesTab::Journals::ItemComponent::Details.new(journal:, has_unread_notifications: notification_on_details?, filter:)) end end end diff --git a/app/components/work_packages/activities_tab/journals/item_component.rb b/app/components/work_packages/activities_tab/journals/item_component.rb index e9366749cf5d..e79ecc2c7662 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.rb +++ b/app/components/work_packages/activities_tab/journals/item_component.rb @@ -85,12 +85,8 @@ def has_unread_notifications? journal.notifications.where(read_ian: false, recipient_id: User.current.id).any? end - def has_read_notifications? - journal.notifications.where(read_ian: true, recipient_id: User.current.id).any? - end - - def show_notification_on_details? - journal.notes.blank? + def notification_on_details? + has_unread_notifications? && journal.notes.blank? end def allowed_to_edit? diff --git a/app/components/work_packages/activities_tab/journals/item_component.sass b/app/components/work_packages/activities_tab/journals/item_component.sass index f1568cdd5a4c..31c091423042 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.sass +++ b/app/components/work_packages/activities_tab/journals/item_component.sass @@ -8,8 +8,7 @@ @media screen and (min-width: $breakpoint-sm) max-width: 40% &--notification-dot-icon - svg - color: var(--bgColor-accent-emphasis)!important + color: var(--bgColor-accent-emphasis) &--header-start-container flex-grow: 1 diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index a9d7206475bd..4fd23af862be 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -37,20 +37,17 @@ class ItemComponent::Details < ApplicationComponent include OpPrimer::ComponentHelpers include OpTurbo::Streamable - def initialize(journal:, filter:, show_notifications: false, has_unread_notifications: false, - has_read_notifications: false) + def initialize(journal:, filter:, has_unread_notifications: false) super @journal = journal - @show_notifications = show_notifications @has_unread_notifications = has_unread_notifications - @has_read_notifications = has_read_notifications @filter = filter end private - attr_reader :journal, :show_notifications, :has_unread_notifications, :has_read_notifications, :filter + attr_reader :journal, :has_unread_notifications, :filter def wrapper_uniq_by journal.id @@ -147,52 +144,19 @@ def render_updated_time(container) def render_header_end(header_container) header_container.with_column(flex_layout: true) do |header_end_container| - render_notification_bubble(header_end_container) + render_notification_bubble(header_end_container) if has_unread_notifications render_activity_link(header_end_container) end end def render_notification_bubble(container) - return unless show_notifications - - if has_unread_notifications - container.with_column(mr: 2) do - render(Primer::Beta::IconButton.new( - scheme: :invisible, # color is set via CSS as requested by UI/UX Team - classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", - icon: "dot-fill", - "aria-label": "mark notification as read", - show_tooltip: true, - href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, - id: journal.id), - tag: :a, - data: { - test_selector: "op-journal-unread-notification", - turbo: true, - turbo_stream: true, - turbo_method: :put - } - )) - end - end - if has_read_notifications - container.with_column(mr: 2) do - render(Primer::Beta::IconButton.new( - scheme: :invisible, # color is set via CSS as requested by UI/UX Team - icon: "dot-fill", - "aria-label": "mark notification as unread", - show_tooltip: true, - href: toggle_notification_read_status_work_package_activity_path(work_package_id: journal.journable_id, - id: journal.id), - tag: :a, - data: { - test_selector: "op-journal-read-notification", - turbo: true, - turbo_stream: true, - turbo_method: :put - } - )) - end + container.with_column(mr: 2) do + render(Primer::Beta::Octicon.new( + :"dot-fill", # color is set via CSS as requested by UI/UX Team + classes: "work-packages-activities-tab-journals-item-component-details--notification-dot-icon", + size: :medium, + data: { test_selector: "op-journal-unread-notification" } + )) end end diff --git a/app/contracts/notifications/update_contract.rb b/app/contracts/notifications/update_contract.rb deleted file mode 100644 index 921b3cfee488..000000000000 --- a/app/contracts/notifications/update_contract.rb +++ /dev/null @@ -1,33 +0,0 @@ -#-- copyright -# OpenProject is an open source project management software. -# Copyright (C) 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 UpdateContract < ::ModelContract - attribute :read_ian - end -end diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 11087e726b36..6aec4724d5f6 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -33,7 +33,7 @@ class WorkPackages::ActivitiesTabController < ApplicationController before_action :find_work_package before_action :find_project - before_action :find_journal, only: %i[edit cancel_edit update toggle_notification_read_status] + before_action :find_journal, only: %i[edit cancel_edit update] before_action :set_filter before_action :authorize @@ -153,23 +153,6 @@ def update respond_with_turbo_streams end - def toggle_notification_read_status - notification = Notification.find_by(recipient: User.current, journal: @journal) - - call = Notifications::UpdateService.new(model: notification, user: User.current).call( - read_ian: !notification.read_ian - ) - - if call.success? - update_item_component(@journal.reload, state: :show) - update_activity_counter - else - handle_failed_update_call(call) - end - - respond_with_turbo_streams - end - private def respond_with_error(error_message) @@ -310,44 +293,32 @@ def update_item_component(journal, state: :show) end def generate_time_based_update_streams(last_update_timestamp) + # TODO: prototypical implementation journals = @work_package.journals if @filter == :only_comments journals = journals.where.not(notes: "") end - rerender_updated_journals(journals, last_update_timestamp) - - rerender_journals_with_updated_notification(journals, last_update_timestamp) - - append_or_prepend_new_journals(journals, last_update_timestamp) - - if journals.any? - remove_potential_empty_state - update_activity_counter - end - end - - def rerender_updated_journals(journals, last_update_timestamp) journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| - # we need to update the whole component as the show part is not rendered for journals which originally have no notes - update_journal_item(journal:) - end - end - - def rerender_journals_with_updated_notification(journals, last_update_timestamp) - journals - .joins(:notifications) - .where("notifications.updated_at > ?", last_update_timestamp) - .find_each do |journal| - update_journal_item(journal:) + update_via_turbo_stream( + # we need to update the whole component as the show part is not rendered for journals which originally have no notes + component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( + journal:, + filter: @filter + ) + ) + # TODO: is it possible to loose an edit state this way? end - end - def append_or_prepend_new_journals(journals, last_update_timestamp) journals.where("created_at > ?", last_update_timestamp).find_each do |journal| append_or_prepend_latest_journal_via_turbo_stream(journal) end + + if journals.any? + remove_potential_empty_state + update_activity_counter + end end def append_or_prepend_latest_journal_via_turbo_stream(journal) @@ -386,16 +357,6 @@ def update_activity_counter ) end - def update_journal_item(journal:, filter: @filter, state: :show) - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal:, - filter:, - state: - ) - ) - end - def allowed_to_edit?(journal) journal.editable_by?(User.current) end diff --git a/config/initializers/permissions.rb b/config/initializers/permissions.rb index 8afa0bc5e18b..4860440a10da 100644 --- a/config/initializers/permissions.rb +++ b/config/initializers/permissions.rb @@ -263,7 +263,7 @@ wpt.permission :edit_work_package_notes, { - "work_packages/activities_tab": %i[edit cancel_edit update toggle_notification_read_status] + "work_packages/activities_tab": %i[edit cancel_edit update] }, permissible_on: :project, require: :loggedin, @@ -271,7 +271,7 @@ wpt.permission :edit_own_work_package_notes, { - "work_packages/activities_tab": %i[edit cancel_edit update toggle_notification_read_status] + "work_packages/activities_tab": %i[edit cancel_edit update] }, permissible_on: %i[work_package project], require: :loggedin, diff --git a/config/routes.rb b/config/routes.rb index aeba8365da0b..dff7f9c1449a 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -577,11 +577,9 @@ # states managed by client-side routing on work_package#index get "details/*state" => "work_packages#index", on: :collection, as: :details - resources :activities, controller: "work_packages/activities_tab", - only: %i[index create edit update] do + resources :activities, controller: "work_packages/activities_tab", only: %i[index create edit update] do member do get :cancel_edit - put :toggle_notification_read_status end collection do get :update_streams From f1b6620fea7e7e469e45cef853e2c743979ea9fd Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 16:13:57 +0200 Subject: [PATCH 102/120] reverted browser notification experiment --- .../in-app-notification-center.component.ts | 14 ---- .../center/state/ian-center.service.ts | 77 ------------------- 2 files changed, 91 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts index 8507250baf20..30bb76ba7977 100644 --- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts +++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts @@ -160,7 +160,6 @@ export class InAppNotificationCenterComponent implements OnInit, OnDestroy { filter: this.urlParams.get('filter'), name: this.urlParams.get('name'), }); - this.checkNotificationPermissions(); this.setupEventListeners(); } @@ -196,17 +195,4 @@ export class InAppNotificationCenterComponent implements OnInit, OnDestroy { return this.text.no_notification_for_filter; } - - checkNotificationPermissions():void { - // Check if the browser supports notifications - if (!('Notification' in window)) { - return; - } - // if so, ask for permission if not already denied - if (Notification.permission !== 'denied') { - Notification.requestPermission().catch((error) => { - console.error(error); - }); - } - } } diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 054ac6a32c3b..00189e1cd8ba 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -371,11 +371,6 @@ export class IanCenterService extends UntilDestroyedMixin { if (state.centerHidden) { // notification center is not visible (as far as it can be determined - e.g. another browser tab is selected) - // try to notify user even when notification is associated with selected workpackage - if (this.browserNotificationsEnabled()) { - this.createBrowserNotification(); - } - this.showNotificationIndicatorInIcon(); this.showNewNotificationToast(); } else if (hasNewNotificationsForOtherThanSelectedWp) { @@ -402,33 +397,6 @@ export class IanCenterService extends UntilDestroyedMixin { } } - private browserNotificationsEnabled():boolean { - let disabled = false; - // Check if the browser supports notifications - if (!('Notification' in window)) { - disabled = true; - } - - if (Notification.permission === 'denied') { - disabled = true; - } - - return !disabled; - } - - private createBrowserNotification():void { - const notification = new Notification('OpenProject', { - body: this.I18n.t('js.notifications.center.new_notifications.message'), - tag: 'opNewNotification', // important: without a tag the notifications would sum up which would be highly annoying - }); - - notification.onclick = () => { - window.focus(); - notification.close(); - this.removeNotificationIndicatorInIcon(); - }; - } - private showNotificationIndicatorInIcon():void { const iconLink = window.document.querySelector("link[rel*='icon']"); if (iconLink) { @@ -443,51 +411,6 @@ export class IanCenterService extends UntilDestroyedMixin { } } - private playNotificationSound():void { - const audioContext = new window.AudioContext(); - - const createOscillator = (freq:number, type:OscillatorType = 'sine') => { - const osc = audioContext.createOscillator(); - osc.type = type; - osc.frequency.setValueAtTime(freq, audioContext.currentTime); - return osc; - }; - - const createEnvelope = () => { - const gain = audioContext.createGain(); - gain.gain.setValueAtTime(0, audioContext.currentTime); - gain.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.005); - gain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.5); - return gain; - }; - - const oscillators = [ - createOscillator(880), // A5 - createOscillator(1108.73), // C#6 - createOscillator(1318.51), // E6 - createOscillator(1760, 'triangle'), // A6 (overtone) - ]; - - const masterGain = audioContext.createGain(); - masterGain.gain.setValueAtTime(0.7, audioContext.currentTime); - - oscillators.forEach((osc) => { - const envelope = createEnvelope(); - osc.connect(envelope); - envelope.connect(masterGain); - osc.start(); - osc.stop(audioContext.currentTime + 0.5); - }); - - masterGain.connect(audioContext.destination); - - // Clean up - setTimeout(() => { - masterGain.disconnect(); - void audioContext.close(); - }, 1000); - } - /** * Reload after notifications were successfully marked as read */ From 54b0ca0c6197502a7b5952fc97a298307fe5bb3f Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 17:01:16 +0200 Subject: [PATCH 103/120] not using a flash message anymore as decided with product team, workpackage relation check not required anymore --- .../center/state/ian-center.service.ts | 136 ++++-------------- 1 file changed, 30 insertions(+), 106 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 00189e1cd8ba..41896b2c271e 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -233,16 +233,12 @@ export class IanCenterService extends UntilDestroyedMixin { } markAsRead(notifications:ID[]):void { - this.hideNewNotifcationToast(); - this.actions$.dispatch( markNotificationsAsRead({ origin: this.id, notifications }), ); } openSplitScreen(workPackageId:string, tabIdentifier:string = 'activity'):void { - this.hideNewNotifcationToast(); - const link = this.pathHelper.notificationsDetailsPath(workPackageId, tabIdentifier) + window.location.search; Turbo.visit(link, { frame: 'content-bodyRight', action: 'advance' }); } @@ -257,8 +253,6 @@ export class IanCenterService extends UntilDestroyedMixin { } showNextNotification():void { - this.hideNewNotifcationToast(); - void this .notifications$ .pipe(take(1)) @@ -274,128 +268,58 @@ export class IanCenterService extends UntilDestroyedMixin { }); } - // /** - // * Check for updates after bell count increased - // */ - // @EffectCallback(notificationCountIncreased) - // private checkForNewNotifications() { - // this.onReload.pipe(take(1)).subscribe((collection) => { - // const { activeCollection } = this.query.getValue(); - // const hasNewNotifications = !collection.ids.reduce( - // (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), - // true, - // ); - - // if (!hasNewNotifications) { - // return; - // } - - // if (this.activeReloadToast) { - // this.toastService.remove(this.activeReloadToast); - // this.activeReloadToast = null; - // } - - // this.activeReloadToast = this.toastService.add({ - // type: 'info', - // icon: 'bell', - // message: this.I18n.t('js.notifications.center.new_notifications.message'), - // link: { - // text: this.I18n.t('js.notifications.center.new_notifications.link_text'), - // target: () => { - // this.store.update({ activeCollection: collection }); - // this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); - // this.activeReloadToast = null; - // }, - // }, - // }); - // }); - // this.reload.next(false); - // } - /** - * Handle updates after bell count changed + * Handle updates after bell count changed (+/-) */ @EffectCallback(notificationCountChanged) private handleChangedNotificationCount() { - // update the UI state for increased AND decreased notifications - // decreasing the notification count could happen when the user - // itself marks notifications as read in the split view or on another tab - this.onReload.pipe( - take(1), - switchMap((collection) => { - this.store.update({ activeCollection: collection }); - this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); - return this.selectNotifications$.pipe( - map((notifications) => ({ notifications, collection })), - ); - }), - switchMap(({ notifications, collection }) => { - return this.selectedWorkPackage$.pipe( - take(1), - map((selectedWpId) => ({ notifications, collection, selectedWpId })), - ); - }), - ).subscribe(({ notifications, collection, selectedWpId }) => { + this.onReload.pipe(take(1)).subscribe((collection) => { + // check for new notifications and inform the user via desired notification method: currently red dot in icon const { activeCollection } = this.query.getValue(); - const newNotificationIds = activeCollection.ids.filter( - (id) => !collection.ids.includes(id), + const hasNewNotifications = !collection.ids.reduce( + (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), + true, ); - const hasNewNotifications = newNotificationIds.length > 0; - if (!hasNewNotifications) { - return; + if (hasNewNotifications) { + this.informAboutUnreadNotification(); } - const newNotifications = notifications.filter((n) => newNotificationIds.includes(n.id)); - const newNotificationsForOtherWPs = newNotifications.filter((notification) => { - const wpId = this.getWorkPackageIdFromNotification(notification); - return wpId && wpId !== selectedWpId; - }); - - const hasNewNotificationsForOtherThanSelectedWp = newNotificationsForOtherWPs.length > 0; - this.informAboutUnreadNotification(hasNewNotificationsForOtherThanSelectedWp); + // update the UI state for increased AND decreased notifications, not only increased count + // decreasing the notification count could happen when the user itself + // marks notifications as read in the split view or on another tab + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); }); - this.reload.next(false); } - private getWorkPackageIdFromNotification(notification:INotification):string | null { - if (notification._links.resource && notification._links.resource.href) { - return idFromLink(notification._links.resource.href); - } - return null; - } - - private informAboutUnreadNotification(hasNewNotificationsForOtherThanSelectedWp:boolean):void { + private informAboutUnreadNotification():void { const state = this.store.getValue(); if (state.centerHidden) { // notification center is not visible (as far as it can be determined - e.g. another browser tab is selected) this.showNotificationIndicatorInIcon(); - this.showNewNotificationToast(); - } else if (hasNewNotificationsForOtherThanSelectedWp) { - // notification center is visible (as far as it can be determined) - // then do not trigger the browser notification or such - // just render the toast in case the notifications are associated with a workpackage other than the selected - this.showNewNotificationToast(); } } - private showNewNotificationToast():void { - this.hideNewNotifcationToast(); - this.activeReloadToast = this.toastService.add({ - type: 'info', - icon: 'bell', - message: this.I18n.t('js.notifications.center.new_notifications.message'), - }); - } + // Leaving this here for future reference, currently we decided not to use this flash message anymore + // + // private showNewNotificationToast():void { + // this.hideNewNotifcationToast(); + // this.activeReloadToast = this.toastService.add({ + // type: 'info', + // icon: 'bell', + // message: this.I18n.t('js.notifications.center.new_notifications.message'), + // }); + // } - private hideNewNotifcationToast():void { - if (this.activeReloadToast) { - this.toastService.remove(this.activeReloadToast); - this.activeReloadToast = null; - } - } + // private hideNewNotifcationToast():void { + // if (this.activeReloadToast) { + // this.toastService.remove(this.activeReloadToast); + // this.activeReloadToast = null; + // } + // } private showNotificationIndicatorInIcon():void { const iconLink = window.document.querySelector("link[rel*='icon']"); From 81e8c83f7948b7324e0079c5b90fc4020204bbdd Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 17:01:51 +0200 Subject: [PATCH 104/120] adjusted notification bubble color in favicon as requested --- public/favicon_notification.ico | Bin 4286 -> 4286 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/public/favicon_notification.ico b/public/favicon_notification.ico index f6a1bb6f203ec1794a58ab24e84a6f06bccbafae..3c97f3f2f4bc790b4f57147a4736b387130200bd 100644 GIT binary patch literal 4286 zcmeH~U1$_n6vrp55FbSA?5^(2hO*iu?uP*bqA#^g1tr*)3I-n}21T72^H4-fX+oh9 zu?a{iS}6EMWOwsXv=2p8RCGUPKtzLx2#SaaVnIb%iET|%xc#4X@9yk$X0x;4i@4$B zY|fl}erL|T=gdS9>hKc^3G`bS{Xh^F34#!Yz$COm$e#b;+PnUV`BU?vq7e&=ne{O- z+Y$8}nW?Gd?8UIx=%GA9LTavEjD!|wOQ_NeIINPyHF?Oqp4j1q znHI!90_HOavzP3vh?qUMOw`-0ISh9D1C^N8YsjIW=Ro&eVE=8;Ez4&bzE`3PjWv8d z>7*(Tni+9bKATjf&V(XwB#EoR@2#~-?hH22e&=gm@xIIWs14P@INlh@`gsoEzuuoPop(d?qtOZXeElBQbn*CzSv-FUEx4K6t(xXvQjzwM3~7N?G*j0$jr_XYm!7IR2T_Nw z@q5IdY2xuw^C$eipvO{u!W@2WHcd64xdwhU=kVW%sNaF_RzYBOJT}cU6Q5xoJW6Wv zVY1IACw4R)+P6;o?b9Wv$Cp>=g{U_>oo9>2o<{Nfe9k64xGgjn{HNv|+|&sA+u>8{F-3l0=U0mjJ^7u9f5RyTYC2N#lV+U! z+}i0mP>L&$Ijy(!*k4Y5Ztd0bu?Ihy@|<+baq_R0k8}O=+vd~r*)dO5KJ+&DcwgFI zjEi2Yl0W6-=hlvM^=*+)J=WdOXcq(ff2ZUpy|nYG#Wt+S;ZofE9D0s9x0l`{@}dU2 zz)qF>NT+LIIjunrhRWj?=OLeqWqMExgq&j4YXAQ|+T|e4RC>RumCe`DdkN}5?}+pq zFp2aKdvcWizvI5|HQs>opWK36ecChb>8nfEK~NZd9Fnt_4C@o%Lw+8(d0yi?WBnP( WguNVqy$?QV$he2GT>Tp^WB&mv_b)U6 delta 1079 zcmb7DT}V@57=F)|nU(Yx1WQiL*oO52D=lS0Ed!HF~M%_J| zlvOPr%|z}i738{9MGn1&oVu4}O(wc)&bHRF15yN}07#oBoFGI=PM-qCfor5>CP>Z< zk|VR16wS9Ha)PCJU>A54OoKaC%!-8{Ux4PNlAAIJ&T&UV?+?z zw0ctXNf6!vzX4tZe^C1cJR-XmDi|0hRV^GYI#x30fgeCI@#@-VOm&OwlYSOA3lnsK zkvDlR&Z9kX(rQ7mZ}9Zj7%#~TVS>wzwI!xtQjEMtP5+7mr&xRgOt77JF!9{HWpoWe zvF`LmnA~TEFu{6T8V8<`bG%fOWsEbsVuF0MHK+1YrB-AQ@**pV=A-_g(Awdc54 zvE;(#I?`Nh%2YYVZPmlv-!SwRwcdg-T7IZW2(OX2 cw12TKm>0}>DKBZ1Cyn*U^<{V=iH*wYKOks!xBvhE From 9668e6b85eed628e4fab7c16b47244878bf04a59 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 17:02:43 +0200 Subject: [PATCH 105/120] cleanup --- .../in-app-notifications/center/state/ian-center.service.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 41896b2c271e..b218e377801b 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -37,7 +37,6 @@ import { IToast, ToastService } from 'core-app/shared/components/toaster/toast.s import { centerUpdatedInPlace, markNotificationsAsRead, - notificationCountIncreased, notificationsMarkedRead, notificationCountChanged, } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions'; From 5efae3d4e9a57261c7a58e92695ccf53501b0d15 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 18:58:27 +0200 Subject: [PATCH 106/120] enable immediate notification center and bell update through ianCenterService usage and enhancement --- .../journals/item_component.html.erb | 2 +- .../journals/item_component/details.rb | 2 +- .../center/state/ian-center.service.ts | 9 +++++++++ .../app/features/plugins/plugin-context.ts | 3 ++- .../activities-tab/index.controller.ts | 19 +++++++++++++++++-- 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component.html.erb b/app/components/work_packages/activities_tab/journals/item_component.html.erb index c1c0f60d7db5..9419133d8029 100644 --- a/app/components/work_packages/activities_tab/journals/item_component.html.erb +++ b/app/components/work_packages/activities_tab/journals/item_component.html.erb @@ -36,7 +36,7 @@ :"dot-fill", # color is set via CSS as requested by UI/UX Team classes: "work-packages-activities-tab-journals-item-component--notification-dot-icon", size: :medium, - data: { test_selector: "op-journal-unread-notification" } + data: { test_selector: "op-journal-unread-notification", "op-ian-center-update-immediate": true } )) end end diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 4fd23af862be..c6e3838f0f9d 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -155,7 +155,7 @@ def render_notification_bubble(container) :"dot-fill", # color is set via CSS as requested by UI/UX Team classes: "work-packages-activities-tab-journals-item-component-details--notification-dot-icon", size: :medium, - data: { test_selector: "op-journal-unread-notification" } + data: { test_selector: "op-journal-unread-notification", "op-ian-center-update-immediate": true } )) end end diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index b218e377801b..a567c0bbd3fd 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -61,6 +61,7 @@ import { ApiV3ListFilter, ApiV3ListParameters } from 'core-app/core/apiv3/paths/ import { FrameElement } from '@hotwired/turbo'; import { PathHelperService } from 'core-app/core/path-helper/path-helper.service'; import { UrlParamsService } from 'core-app/core/navigation/url-params.service'; +import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service'; export interface INotificationPageQueryParameters { filter?:string|null; @@ -192,6 +193,7 @@ export class IanCenterService extends UntilDestroyedMixin { readonly state:StateService, readonly deviceService:DeviceService, readonly pathHelper:PathHelperService, + readonly ianBellService:IanBellService, ) { super(); this.reload.subscribe(); @@ -267,6 +269,13 @@ export class IanCenterService extends UntilDestroyedMixin { }); } + /** + * Pull latest notifications from API directly and trigger all related UI updates + */ + updateImmediate() { + this.ianBellService.fetchUnread().subscribe(); + } + /** * Handle updates after bell count changed (+/-) */ diff --git a/frontend/src/app/features/plugins/plugin-context.ts b/frontend/src/app/features/plugins/plugin-context.ts index 8b15f1968b9a..56550723912b 100644 --- a/frontend/src/app/features/plugins/plugin-context.ts +++ b/frontend/src/app/features/plugins/plugin-context.ts @@ -33,7 +33,7 @@ import { AttachmentsResourceService } from 'core-app/core/state/attachments/atta import { HttpClient } from '@angular/common/http'; import { TimezoneService } from 'core-app/core/datetime/timezone.service'; import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; - +import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service'; /** * Plugin context bridge for plugins outside the CLI compiler context * in order to access services and parts of the core application @@ -69,6 +69,7 @@ export class OpenProjectPluginContext { attachmentsResourceService: this.injector.get(AttachmentsResourceService), http: this.injector.get(HttpClient), turboRequests: this.injector.get(TurboRequestsService), + ianCenter: this.injector.get(IanCenterService), }; public readonly helpers = { diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 09a826e09bdf..6197e3ccf03d 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -4,7 +4,8 @@ import { } from 'core-app/shared/components/editor/components/ckeditor/ckeditor.types'; import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service'; -import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource'; +import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service'; +import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service'; interface CustomEventWithIdParam extends Event { params:{ @@ -54,11 +55,13 @@ export default class IndexController extends Controller { private turboRequests:TurboRequestsService; private apiV3Service:ApiV3Service; + private ianCenterService:IanCenterService; async connect() { const context = await window.OpenProject.getPluginContext(); this.turboRequests = context.services.turboRequests; this.apiV3Service = context.services.apiV3Service; + this.ianCenterService = context.services.ianCenter; this.setLocalStorageKey(); this.setLastUpdateTimestamp(); @@ -160,7 +163,8 @@ export default class IndexController extends Controller { const journalsContainerAtBottom = this.isJournalsContainerScrolledToBottom(this.journalsContainerTarget); - void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()).then((html) => { + void this.performUpdateStreamsRequest(this.prepareUpdateStreamsUrl()) + .then((html) => { this.handleUpdateStreamsResponse(html as string, journalsContainerAtBottom); }).catch((error) => { console.error('Error updating activities list:', error); @@ -189,6 +193,7 @@ export default class IndexController extends Controller { private handleUpdateStreamsResponse(html:string, journalsContainerAtBottom:boolean) { this.setLastUpdateTimestamp(); this.checkForAndHandleWorkPackageUpdate(html); + this.checkForNewNotifications(html); this.performAutoScrolling(html, journalsContainerAtBottom); } @@ -198,11 +203,21 @@ export default class IndexController extends Controller { } } + private checkForNewNotifications(html:string) { + if (html.includes('data-op-ian-center-update-immediate')) { + this.updateNotificationCenter(); + } + } + private updateDisplayedWorkPackageAttributes() { const wp = this.apiV3Service.work_packages.id(this.workPackageIdValue); void wp.refresh(); } + private updateNotificationCenter() { + this.ianCenterService.updateImmediate(); + } + private performAutoScrolling(html:string, journalsContainerAtBottom:boolean) { // only process append, prepend and update actions if (!(html.includes('action="append"') || html.includes('action="prepend"') || html.includes('action="update"'))) { From c570df7c804b483570a1b3f62ab8588287fae723 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Fri, 4 Oct 2024 19:13:36 +0200 Subject: [PATCH 107/120] display labels as requested --- .../journals/item_component/details.rb | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index c6e3838f0f9d..0b9c9d7f8fd5 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -111,10 +111,6 @@ def render_journal_type_for_desktop(container) render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do I18n.t("activities.work_packages.activity_tab.created_on") end - else - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do - I18n.t("activities.work_packages.activity_tab.changed_on") - end end end end @@ -130,8 +126,17 @@ def render_user_name_and_time_for_mobile(container) ) do truncated_user_name(journal.user) end - user_name_and_time_container.with_row do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } + user_name_and_time_container.with_row(flex_layout: true) do |time_container| + if journal.initial? + time_container.with_column(mr: 1) do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do + I18n.t("activities.work_packages.activity_tab.created_on") + end + end + end + time_container.with_column do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end end end end From 69551f0a380110d2e469678655fdf462adacac7c Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 15:33:00 +0200 Subject: [PATCH 108/120] put changes in notification center behind feature flag as well --- .../center/state/ian-center.service.ts | 73 ++++++++++++------- 1 file changed, 48 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index a567c0bbd3fd..b96832b168bb 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -62,6 +62,7 @@ import { FrameElement } from '@hotwired/turbo'; import { PathHelperService } from 'core-app/core/path-helper/path-helper.service'; import { UrlParamsService } from 'core-app/core/navigation/url-params.service'; import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service'; +import { ConfigurationService } from 'core-app/core/config/configuration.service'; export interface INotificationPageQueryParameters { filter?:string|null; @@ -194,6 +195,7 @@ export class IanCenterService extends UntilDestroyedMixin { readonly deviceService:DeviceService, readonly pathHelper:PathHelperService, readonly ianBellService:IanBellService, + readonly configurationService:ConfigurationService, ) { super(); this.reload.subscribe(); @@ -281,6 +283,9 @@ export class IanCenterService extends UntilDestroyedMixin { */ @EffectCallback(notificationCountChanged) private handleChangedNotificationCount() { + // update the UI state for increased AND decreased notifications, not only increased count + // decreasing the notification count could happen when the user itself + // marks notifications as read in the split view or on another tab this.onReload.pipe(take(1)).subscribe((collection) => { // check for new notifications and inform the user via desired notification method: currently red dot in icon const { activeCollection } = this.query.getValue(); @@ -289,15 +294,35 @@ export class IanCenterService extends UntilDestroyedMixin { true, ); - if (hasNewNotifications) { - this.informAboutUnreadNotification(); + if (this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities')) { + // new concept for notification center: + if (hasNewNotifications) { + this.informAboutUnreadNotification(); + } + // directly update the UI state in both cases (count increased or decreased) + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + } else { + // old concept for notification center: + // only proceed if there are actually new notifications (count increased) + if (!hasNewNotifications) { + return; + } + // show toast with and ask user to update the UI state explicitly + this.activeReloadToast = this.toastService.add({ + type: 'info', + icon: 'bell', + message: this.I18n.t('js.notifications.center.new_notifications.message'), + link: { + text: this.I18n.t('js.notifications.center.new_notifications.link_text'), + target: () => { + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + this.activeReloadToast = null; + }, + }, + }); } - - // update the UI state for increased AND decreased notifications, not only increased count - // decreasing the notification count could happen when the user itself - // marks notifications as read in the split view or on another tab - this.store.update({ activeCollection: collection }); - this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); }); this.reload.next(false); } @@ -311,23 +336,21 @@ export class IanCenterService extends UntilDestroyedMixin { } } - // Leaving this here for future reference, currently we decided not to use this flash message anymore - // - // private showNewNotificationToast():void { - // this.hideNewNotifcationToast(); - // this.activeReloadToast = this.toastService.add({ - // type: 'info', - // icon: 'bell', - // message: this.I18n.t('js.notifications.center.new_notifications.message'), - // }); - // } - - // private hideNewNotifcationToast():void { - // if (this.activeReloadToast) { - // this.toastService.remove(this.activeReloadToast); - // this.activeReloadToast = null; - // } - // } + private showNewNotificationToast():void { + this.hideNewNotifcationToast(); + this.activeReloadToast = this.toastService.add({ + type: 'info', + icon: 'bell', + message: this.I18n.t('js.notifications.center.new_notifications.message'), + }); + } + + private hideNewNotifcationToast():void { + if (this.activeReloadToast) { + this.toastService.remove(this.activeReloadToast); + this.activeReloadToast = null; + } + } private showNotificationIndicatorInIcon():void { const iconLink = window.document.querySelector("link[rel*='icon']"); From 10c1ed1e23dcc9d9d3163493431b8784e393d1c8 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 16:28:27 +0200 Subject: [PATCH 109/120] fixed too short ellipsis --- .../activities_tab/journals/item_component/details.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.sass b/app/components/work_packages/activities_tab/journals/item_component/details.sass index e43800f3fae7..26c4b535a6a4 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.sass +++ b/app/components/work_packages/activities_tab/journals/item_component/details.sass @@ -8,6 +8,7 @@ margin-left: -14px &--journal-details-header padding-top: 2px + width: 100% &--timeline-icon background-color: var(--bgColor-muted) border-radius: 50% From 75afa65df40529c6f36d6c9b290de039e83f3b1a Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 16:50:17 +0200 Subject: [PATCH 110/120] trying to fix flaky spec --- spec/features/activities/work_package/activities_spec.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/spec/features/activities/work_package/activities_spec.rb b/spec/features/activities/work_package/activities_spec.rb index 6f697d627ede..5460fbd0c27d 100644 --- a/spec/features/activities/work_package/activities_spec.rb +++ b/spec/features/activities/work_package/activities_spec.rb @@ -387,6 +387,8 @@ first_journal.update!(notes: "First comment by member updated") + sleep 1 # avoid flaky test + # properly updates the comment when the comment is updated activity_tab.expect_journal_notes(text: "First comment by member updated") end From c80efd4f52c189cda896518afe10a9182c9e191d Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 16:50:33 +0200 Subject: [PATCH 111/120] fix eslint issues on CI --- .../dynamic/work-packages/activities-tab/index.controller.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 6197e3ccf03d..3174beeb4c84 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -5,7 +5,6 @@ import { import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service'; import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service'; import { IanCenterService } from 'core-app/features/in-app-notifications/center/state/ian-center.service'; -import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service'; interface CustomEventWithIdParam extends Event { params:{ From aaf47f57d857ffb7bd997161d415edd43c74bb76 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 16:50:44 +0200 Subject: [PATCH 112/120] fix rubocop issues on CI --- .../journals/item_component/details.rb | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/app/components/work_packages/activities_tab/journals/item_component/details.rb b/app/components/work_packages/activities_tab/journals/item_component/details.rb index 0b9c9d7f8fd5..22893aeb8924 100644 --- a/app/components/work_packages/activities_tab/journals/item_component/details.rb +++ b/app/components/work_packages/activities_tab/journals/item_component/details.rb @@ -116,31 +116,47 @@ def render_journal_type_for_desktop(container) end def render_user_name_and_time_for_mobile(container) - container.with_column( + container.with_column(**mobile_container_options) do |user_name_and_time_container| + render_mobile_user_name(user_name_and_time_container) + render_mobile_time_info(user_name_and_time_container) + end + end + + def mobile_container_options + { mr: 1, classes: "work-packages-activities-tab-journals-item-component-details--user-name-container hidden-for-desktop", flex_layout: true - ) do |user_name_and_time_container| - user_name_and_time_container.with_row( - classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis" - ) do - truncated_user_name(journal.user) - end - user_name_and_time_container.with_row(flex_layout: true) do |time_container| - if journal.initial? - time_container.with_column(mr: 1) do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do - I18n.t("activities.work_packages.activity_tab.created_on") - end - end - end - time_container.with_column do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } - end + } + end + + def render_mobile_user_name(container) + container.with_row(classes: "work-packages-activities-tab-journals-item-component-details--user-name ellipsis") do + truncated_user_name(journal.user) + end + end + + def render_mobile_time_info(container) + container.with_row(flex_layout: true) do |time_container| + render_mobile_journal_type(time_container) if journal.initial? + render_mobile_updated_time(time_container) + end + end + + def render_mobile_journal_type(container) + container.with_column(mr: 1) do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) do + I18n.t("activities.work_packages.activity_tab.created_on") end end end + def render_mobile_updated_time(container) + container.with_column do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } + end + end + def render_updated_time(container) container.with_column(mr: 1, classes: "hidden-for-mobile") do render(Primer::Beta::Text.new(font_size: :small, color: :subtle, mt: 1)) { format_time(journal.updated_at) } From 6b8aa9cab26eeabd68ddd747430e8d3355db1993 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Mon, 7 Oct 2024 17:10:58 +0200 Subject: [PATCH 113/120] fix scroll behavior on mobile --- .../work-packages/activities-tab/index.controller.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts index 3174beeb4c84..c5dc0af346cf 100644 --- a/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts @@ -377,7 +377,17 @@ export default class IndexController extends Controller { const inputContainer = this.getInputContainer() as HTMLElement; setTimeout(() => { if (inputContainer) { - inputContainer.scrollIntoView({ behavior: 'smooth' }); + if (this.sortingValue === 'desc') { + inputContainer.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + }); + } else { + inputContainer.scrollIntoView({ + behavior: 'smooth', + block: 'start', + }); + } } }, timeout); } From 990c4bdd56c64b032c8d9c423796b4950a681e95 Mon Sep 17 00:00:00 2001 From: Jonas Jabari Date: Tue, 8 Oct 2024 11:38:24 +0200 Subject: [PATCH 114/120] reapplied refactoring previously reverted --- .../activities_tab_controller.rb | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/app/controllers/work_packages/activities_tab_controller.rb b/app/controllers/work_packages/activities_tab_controller.rb index 6aec4724d5f6..48929162060c 100644 --- a/app/controllers/work_packages/activities_tab_controller.rb +++ b/app/controllers/work_packages/activities_tab_controller.rb @@ -96,13 +96,7 @@ def update_sorting def edit if allowed_to_edit?(@journal) - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: @journal, - state: :edit, - filter: @filter - ) - ) + update_item_component(journal: @journal, state: :edit) else @turbo_status = :forbidden end @@ -112,13 +106,7 @@ def edit def cancel_edit if allowed_to_edit?(@journal) - update_via_turbo_stream( - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal: @journal, - state: :show, - filter: @filter - ) - ) + update_item_component(journal: @journal, state: :show) else @turbo_status = :forbidden end @@ -145,7 +133,7 @@ def update ) if call.success? && call.result - update_item_component(call.result, state: :show) + update_item_component(journal: call.result, state: :show) else handle_failed_update_call(call) end @@ -282,38 +270,28 @@ def create_journal_service_call ### end - def update_item_component(journal, state: :show) + def update_item_component(journal:, filter: @filter, state: :show) update_via_turbo_stream( component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( journal:, state:, - filter: @filter + filter: ) ) end def generate_time_based_update_streams(last_update_timestamp) - # TODO: prototypical implementation journals = @work_package.journals if @filter == :only_comments journals = journals.where.not(notes: "") end - journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| - update_via_turbo_stream( - # we need to update the whole component as the show part is not rendered for journals which originally have no notes - component: WorkPackages::ActivitiesTab::Journals::ItemComponent.new( - journal:, - filter: @filter - ) - ) - # TODO: is it possible to loose an edit state this way? - end + rerender_updated_journals(journals, last_update_timestamp) - journals.where("created_at > ?", last_update_timestamp).find_each do |journal| - append_or_prepend_latest_journal_via_turbo_stream(journal) - end + rerender_journals_with_updated_notification(journals, last_update_timestamp) + + append_or_prepend_journals(journals, last_update_timestamp) if journals.any? remove_potential_empty_state @@ -321,6 +299,28 @@ def generate_time_based_update_streams(last_update_timestamp) end end + def rerender_updated_journals(journals, last_update_timestamp) + journals.where("updated_at > ?", last_update_timestamp).find_each do |journal| + update_item_component(journal:) + end + end + + def rerender_journals_with_updated_notification(journals, last_update_timestamp) + # Case: the user marked the journal as read somewhere else and expects the bubble to disappear + journals + .joins(:notifications) + .where("notifications.updated_at > ?", last_update_timestamp) + .find_each do |journal| + update_item_component(journal:) + end + end + + def append_or_prepend_journals(journals, last_update_timestamp) + journals.where("created_at > ?", last_update_timestamp).find_each do |journal| + append_or_prepend_latest_journal_via_turbo_stream(journal) + end + end + def append_or_prepend_latest_journal_via_turbo_stream(journal) target_component = WorkPackages::ActivitiesTab::Journals::IndexComponent.new( work_package: @work_package, From f5d0e8da72c4e8a06a8bcbec703325203f4c6ef4 Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Wed, 16 Oct 2024 08:55:10 +0300 Subject: [PATCH 115/120] chore[Op#54733]: add missing newlines --- .../activities_tab/error_frame_component.html.erb | 2 +- .../activities_tab/error_stream_component.html.erb | 2 +- .../work_packages/activities_tab/index_component.html.erb | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/work_packages/activities_tab/error_frame_component.html.erb b/app/components/work_packages/activities_tab/error_frame_component.html.erb index 6d97c63bf8e2..8d9bd2395398 100644 --- a/app/components/work_packages/activities_tab/error_frame_component.html.erb +++ b/app/components/work_packages/activities_tab/error_frame_component.html.erb @@ -4,4 +4,4 @@ render(Primer::Alpha::Banner.new(scheme: :danger)) { error_message } end end -%> \ No newline at end of file +%> diff --git a/app/components/work_packages/activities_tab/error_stream_component.html.erb b/app/components/work_packages/activities_tab/error_stream_component.html.erb index bf1996f98052..675995b9c9fd 100644 --- a/app/components/work_packages/activities_tab/error_stream_component.html.erb +++ b/app/components/work_packages/activities_tab/error_stream_component.html.erb @@ -4,4 +4,4 @@ render(Primer::Alpha::Banner.new(scheme: :danger, dismiss_scheme: :hide)) { error_message } end end -%> \ No newline at end of file +%> diff --git a/app/components/work_packages/activities_tab/index_component.html.erb b/app/components/work_packages/activities_tab/index_component.html.erb index 927969fe0a7d..6bf30eafaf41 100644 --- a/app/components/work_packages/activities_tab/index_component.html.erb +++ b/app/components/work_packages/activities_tab/index_component.html.erb @@ -6,7 +6,7 @@ WorkPackages::ActivitiesTab::ErrorStreamComponent.new ) end - activties_tab_wrapper_container.with_row do + activties_tab_wrapper_container.with_row do component_wrapper(data: wrapper_data_attributes) do flex_layout do |activties_tab_container| activties_tab_container.with_row(mb: 2) do @@ -50,4 +50,4 @@ end end end -%> \ No newline at end of file +%> From c1575f3d808fff7c7aaa7e1b5397be12474f81df Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Wed, 16 Oct 2024 13:50:36 +0300 Subject: [PATCH 116/120] fix[Op#54733]: restore old concept to bind to `notificationCountIncreased` In the original flow, which still exists- a blue banner is shown anytime there are new notifications based on unreadCountIncreased$ - however, when based on a generic unreadCountChanged$ it is not dismissible --- .../center/state/ian-center.service.ts | 67 +++++++++++++------ 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index b96832b168bb..524626c88e82 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -37,8 +37,9 @@ import { IToast, ToastService } from 'core-app/shared/components/toaster/toast.s import { centerUpdatedInPlace, markNotificationsAsRead, - notificationsMarkedRead, + notificationCountIncreased, notificationCountChanged, + notificationsMarkedRead } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions'; import { INotification } from 'core-app/core/state/in-app-notifications/in-app-notification.model'; import { EffectCallback, EffectHandler } from 'core-app/core/state/effects/effect-handler.decorator'; @@ -302,31 +303,55 @@ export class IanCenterService extends UntilDestroyedMixin { // directly update the UI state in both cases (count increased or decreased) this.store.update({ activeCollection: collection }); this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); - } else { - // old concept for notification center: - // only proceed if there are actually new notifications (count increased) - if (!hasNewNotifications) { - return; - } - // show toast with and ask user to update the UI state explicitly - this.activeReloadToast = this.toastService.add({ - type: 'info', - icon: 'bell', - message: this.I18n.t('js.notifications.center.new_notifications.message'), - link: { - text: this.I18n.t('js.notifications.center.new_notifications.link_text'), - target: () => { - this.store.update({ activeCollection: collection }); - this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); - this.activeReloadToast = null; - }, - }, - }); } }); this.reload.next(false); } + /** + * Check for updates after bell count increased + */ + @EffectCallback(notificationCountIncreased) + private checkForNewNotifications() { + this.onReload.pipe(take(1)).subscribe((collection) => { + // There is a new concept for primerized work package activities bound to notificationCountChanged + // See @EffectCallback(notificationCountChanged) + if (this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities')) { + return; + } + + const { activeCollection } = this.query.getValue(); + const hasNewNotifications = !collection.ids.reduce( + (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), + true, + ); + + if (!hasNewNotifications) { + return; + } + + if (this.activeReloadToast) { + this.toastService.remove(this.activeReloadToast); + this.activeReloadToast = null; + } + + this.activeReloadToast = this.toastService.add({ + type: 'info', + icon: 'bell', + message: this.I18n.t('js.notifications.center.new_notifications.message'), + link: { + text: this.I18n.t('js.notifications.center.new_notifications.link_text'), + target: () => { + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + this.activeReloadToast = null; + }, + }, + }); + }); + this.reload.next(false); + } + private informAboutUnreadNotification():void { const state = this.store.getValue(); From dc24573acb036099bfc5570ac167e842ecb00cdd Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Thu, 17 Oct 2024 10:50:44 +0300 Subject: [PATCH 117/120] chore[Op#54733]: extract feature flag check to function --- .../center/state/ian-center.service.ts | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 524626c88e82..7080c6dfa459 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -284,6 +284,8 @@ export class IanCenterService extends UntilDestroyedMixin { */ @EffectCallback(notificationCountChanged) private handleChangedNotificationCount() { + if (!this.primerizedActivitiesEnabled) return; + // update the UI state for increased AND decreased notifications, not only increased count // decreasing the notification count could happen when the user itself // marks notifications as read in the split view or on another tab @@ -295,15 +297,13 @@ export class IanCenterService extends UntilDestroyedMixin { true, ); - if (this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities')) { - // new concept for notification center: - if (hasNewNotifications) { - this.informAboutUnreadNotification(); - } - // directly update the UI state in both cases (count increased or decreased) - this.store.update({ activeCollection: collection }); - this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); + // new concept for notification center: + if (hasNewNotifications) { + this.informAboutUnreadNotification(); } + // directly update the UI state in both cases (count increased or decreased) + this.store.update({ activeCollection: collection }); + this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); }); this.reload.next(false); } @@ -313,13 +313,11 @@ export class IanCenterService extends UntilDestroyedMixin { */ @EffectCallback(notificationCountIncreased) private checkForNewNotifications() { - this.onReload.pipe(take(1)).subscribe((collection) => { - // There is a new concept for primerized work package activities bound to notificationCountChanged - // See @EffectCallback(notificationCountChanged) - if (this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities')) { - return; - } + // There is a new concept for primerized work package activities bound to notificationCountChanged + // See @EffectCallback(notificationCountChanged) + if (this.primerizedActivitiesEnabled) return; + this.onReload.pipe(take(1)).subscribe((collection) => { const { activeCollection } = this.query.getValue(); const hasNewNotifications = !collection.ids.reduce( (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), @@ -361,6 +359,10 @@ export class IanCenterService extends UntilDestroyedMixin { } } + private get primerizedActivitiesEnabled():boolean { + return this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities'); + } + private showNewNotificationToast():void { this.hideNewNotifcationToast(); this.activeReloadToast = this.toastService.add({ From 651c3e8e2d11026e6a3816c27a5e6c71baa8ae64 Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Thu, 17 Oct 2024 11:11:59 +0300 Subject: [PATCH 118/120] chore[Op#54733]: remove red dot favicon- out of scope --- .../in-app-notification-center.component.ts | 26 +------- .../center/state/ian-center.service.ts | 59 +----------------- .../center/state/ian-center.store.ts | 3 - public/favicon_notification.ico | Bin 4286 -> 0 bytes 4 files changed, 3 insertions(+), 85 deletions(-) delete mode 100644 public/favicon_notification.ico diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts index 30bb76ba7977..1c1f2c3801c9 100644 --- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts +++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts @@ -26,7 +26,7 @@ // See COPYRIGHT and LICENSE files for more details. //++ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy } 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 { StateService } from '@uirouter/angular'; @@ -50,7 +50,7 @@ import { styleUrls: ['./in-app-notification-center.component.sass'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class InAppNotificationCenterComponent implements OnInit, OnDestroy { +export class InAppNotificationCenterComponent implements OnInit { maxSize = NOTIFICATIONS_MAX_SIZE; hasMoreThanPageSize$ = this.storeService.hasMoreThanPageSize$; @@ -160,28 +160,6 @@ export class InAppNotificationCenterComponent implements OnInit, OnDestroy { filter: this.urlParams.get('filter'), name: this.urlParams.get('name'), }); - this.setupEventListeners(); - } - - ngOnDestroy():void { - this.removeEventListeners(); - } - - setupEventListeners():void { - this.handleVisibilityChangeBound = () => { void this.handleVisibilityChange(); }; - document.addEventListener('visibilitychange', this.handleVisibilityChangeBound); - } - - removeEventListeners():void { - document.removeEventListener('visibilitychange', this.handleVisibilityChangeBound); - } - - handleVisibilityChange() { - if (document.hidden) { - this.storeService.setCenterHidden(true); - } else { - this.storeService.setCenterHidden(false); - } } noNotificationText(hasNotifications:boolean):string { diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 7080c6dfa459..954000d08581 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -228,14 +228,6 @@ export class IanCenterService extends UntilDestroyedMixin { this.reload.next(true); } - setCenterHidden(hidden:boolean):void { - this.store.update({ centerHidden: hidden }); - - if (!hidden) { - this.removeNotificationIndicatorInIcon(); - } - } - markAsRead(notifications:ID[]):void { this.actions$.dispatch( markNotificationsAsRead({ origin: this.id, notifications }), @@ -290,21 +282,11 @@ export class IanCenterService extends UntilDestroyedMixin { // decreasing the notification count could happen when the user itself // marks notifications as read in the split view or on another tab this.onReload.pipe(take(1)).subscribe((collection) => { - // check for new notifications and inform the user via desired notification method: currently red dot in icon - const { activeCollection } = this.query.getValue(); - const hasNewNotifications = !collection.ids.reduce( - (allInOldCollection, id) => allInOldCollection && activeCollection.ids.includes(id), - true, - ); - - // new concept for notification center: - if (hasNewNotifications) { - this.informAboutUnreadNotification(); - } // directly update the UI state in both cases (count increased or decreased) this.store.update({ activeCollection: collection }); this.actions$.dispatch(centerUpdatedInPlace({ origin: this.id })); }); + this.reload.next(false); } @@ -350,49 +332,10 @@ export class IanCenterService extends UntilDestroyedMixin { this.reload.next(false); } - private informAboutUnreadNotification():void { - const state = this.store.getValue(); - - if (state.centerHidden) { - // notification center is not visible (as far as it can be determined - e.g. another browser tab is selected) - this.showNotificationIndicatorInIcon(); - } - } - private get primerizedActivitiesEnabled():boolean { return this.configurationService.activeFeatureFlags.includes('primerizedWorkPackageActivities'); } - private showNewNotificationToast():void { - this.hideNewNotifcationToast(); - this.activeReloadToast = this.toastService.add({ - type: 'info', - icon: 'bell', - message: this.I18n.t('js.notifications.center.new_notifications.message'), - }); - } - - private hideNewNotifcationToast():void { - if (this.activeReloadToast) { - this.toastService.remove(this.activeReloadToast); - this.activeReloadToast = null; - } - } - - private showNotificationIndicatorInIcon():void { - const iconLink = window.document.querySelector("link[rel*='icon']"); - if (iconLink) { - (iconLink as HTMLLinkElement).href = 'favicon_notification.ico'; - } - } - - private removeNotificationIndicatorInIcon():void { - const iconLink = window.document.querySelector("link[rel*='icon']"); - if (iconLink) { - (iconLink as HTMLLinkElement).href = 'favicon.ico'; - } - } - /** * Reload after notifications were successfully marked as read */ diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts index 5adc94a6bee1..00c3c04ef1e6 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.store.ts @@ -20,8 +20,6 @@ export interface IanCenterState { /** Number of elements not showing after max values loaded */ notLoaded:number; - - centerHidden:boolean; } export const IAN_FACET_FILTERS:Record = { @@ -39,7 +37,6 @@ export function createInitialState():IanCenterState { activeCollection: { ids: [] }, activeFacet: 'unread', notLoaded: 0, - centerHidden: false, }; } diff --git a/public/favicon_notification.ico b/public/favicon_notification.ico deleted file mode 100644 index 3c97f3f2f4bc790b4f57147a4736b387130200bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmeH~U1$_n6vrp55FbSA?5^(2hO*iu?uP*bqA#^g1tr*)3I-n}21T72^H4-fX+oh9 zu?a{iS}6EMWOwsXv=2p8RCGUPKtzLx2#SaaVnIb%iET|%xc#4X@9yk$X0x;4i@4$B zY|fl}erL|T=gdS9>hKc^3G`bS{Xh^F34#!Yz$COm$e#b;+PnUV`BU?vq7e&=ne{O- z+Y$8}nW?Gd?8UIx=%GA9LTavEjD!|wOQ_NeIINPyHF?Oqp4j1q znHI!90_HOavzP3vh?qUMOw`-0ISh9D1C^N8YsjIW=Ro&eVE=8;Ez4&bzE`3PjWv8d z>7*(Tni+9bKATjf&V(XwB#EoR@2#~-?hH22e&=gm@xIIWs14P@INlh@`gsoEzuuoPop(d?qtOZXeElBQbn*CzSv-FUEx4K6t(xXvQjzwM3~7N?G*j0$jr_XYm!7IR2T_Nw z@q5IdY2xuw^C$eipvO{u!W@2WHcd64xdwhU=kVW%sNaF_RzYBOJT}cU6Q5xoJW6Wv zVY1IACw4R)+P6;o?b9Wv$Cp>=g{U_>oo9>2o<{Nfe9k64xGgjn{HNv|+|&sA+u>8{F-3l0=U0mjJ^7u9f5RyTYC2N#lV+U! z+}i0mP>L&$Ijy(!*k4Y5Ztd0bu?Ihy@|<+baq_R0k8}O=+vd~r*)dO5KJ+&DcwgFI zjEi2Yl0W6-=hlvM^=*+)J=WdOXcq(ff2ZUpy|nYG#Wt+S;ZofE9D0s9x0l`{@}dU2 zz)qF>NT+LIIjunrhRWj?=OLeqWqMExgq&j4YXAQ|+T|e4RC>RumCe`DdkN}5?}+pq zFp2aKdvcWizvI5|HQs>opWK36ecChb>8nfEK~NZd9Fnt_4C@o%Lw+8(d0yi?WBnP( WguNVqy$?QV$he2GT>Tp^WB&mv_b)U6 From 9c1d601dc6ba84e7fbab49b2dfcb7d5f54f31038 Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Thu, 17 Oct 2024 12:13:44 +0300 Subject: [PATCH 119/120] chore[Op#54733]: remove leftover var --- .../center/in-app-notification-center.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts index 1c1f2c3801c9..641983075d1f 100644 --- a/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts +++ b/frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts @@ -76,8 +76,6 @@ export class InAppNotificationCenterComponent implements OnInit { selectedWorkPackage$ = this.storeService.selectedWorkPackage$; - handleVisibilityChangeBound:EventListener; - reasonMenuItems = [ { key: 'mentioned', From 26ba6cbee57e7916178ff44ccd1db956d70f422b Mon Sep 17 00:00:00 2001 From: Kabiru Mwenja Date: Thu, 17 Oct 2024 12:20:19 +0300 Subject: [PATCH 120/120] chore[Op#54733]: resolve eslint missing comma --- .../in-app-notifications/center/state/ian-center.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts index 954000d08581..0979826f6503 100644 --- a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts +++ b/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts @@ -39,7 +39,7 @@ import { markNotificationsAsRead, notificationCountIncreased, notificationCountChanged, - notificationsMarkedRead + notificationsMarkedRead, } from 'core-app/core/state/in-app-notifications/in-app-notifications.actions'; import { INotification } from 'core-app/core/state/in-app-notifications/in-app-notification.model'; import { EffectCallback, EffectHandler } from 'core-app/core/state/effects/effect-handler.decorator';