Feature/54733 primerise the activity panel

.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: |

app/components/_index.sass

@@ -1,3 +1,9 @@
+@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"
 @import "shares/modal_body_component"
 @import "shares/invite_user_form_component"
 @import "work_packages/details/tab_component"

app/components/work_packages/activities_tab/index_component.html.erb

@@ -0,0 +1,44 @@
+<%=
+  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::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(
+            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: [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
+%>

app/components/work_packages/activities_tab/index_component.rb

@@ -0,0 +1,74 @@
+# 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:, filter: :all)
+        super
+
+        @work_package = work_package
+        @filter = filter
+      end
+
+      private
+
+      attr_reader :work_package, :filter
+
+      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-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": 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

app/components/work_packages/activities_tab/index_component.sass

@@ -0,0 +1,34 @@
+#work-packages-activities-tab-index-component
+    #journals-container
+        z-index: 10
+        padding-top: 3px
+        overflow-y: auto
+        &.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
+            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
+            bottom: 0
+            left: 0
+            right: 0
+        @media screen and (max-width: $breakpoint-xl)
+            &.sort-desc
+                order: -1

app/components/work_packages/activities_tab/journals/empty_component.html.erb

@@ -0,0 +1,11 @@
+<%=
+  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
+%>

app/components/work_packages/activities_tab/journals/empty_component.rb

@@ -0,0 +1,41 @@
+# 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 EmptyComponent < ApplicationComponent
+        include ApplicationHelper
+        include OpPrimer::ComponentHelpers
+        include OpTurbo::Streamable
+      end
+    end
+  end
+end

app/components/work_packages/activities_tab/journals/filter_and_sorting_component.html.erb

@@ -0,0 +1,75 @@
+<%=
+  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,
+          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
+          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",
+                "test_selector": "op-wp-journals-filter-show-all"
+              }
+            },
+            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",
+                "test_selector": "op-wp-journals-filter-show-only-changes"
+              }
+            },
+            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",
+                "test_selector": "op-wp-journals-filter-show-only-comments"
+              }
+            },
+            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, data: { "test_selector": "op-wp-journals-sorting-menu" }) 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, "test_selector": "op-wp-journals-sorting-desc" }
+            },
+            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, "test_selector": "op-wp-journals-sorting-asc" }
+            },
+            active: asc_sorting?
+          )
+        end
+      end
+    end
+  end
+%>

app/components/work_packages/activities_tab/journals/filter_and_sorting_component.rb

@@ -0,0 +1,76 @@
+# 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 FilterAndSortingComponent < ApplicationComponent
+        include ApplicationHelper
+        include OpPrimer::ComponentHelpers
+        include OpTurbo::Streamable
+
+        def initialize(work_package:, filter: :all)
+          super
+
+          @work_package = work_package
+          @filter = filter
+        end
+
+        private
+
+        attr_reader :work_package, :filter
+
+        def show_all?
+          filter == :all
+        end
+
+        def show_only_comments?
+          filter == :only_comments
+        end
+
+        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
+end