From 73a382323af8df05f16f3bdece97081ac8373c2a Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 15 Apr 2025 09:19:03 +0200 Subject: [PATCH 1/2] Replace angular CE with new Primer CollapsibleSection --- .../augmented/_collapsible_section.html.erb | 14 +++-- app/views/enterprises/_form.html.erb | 4 +- frontend/src/app/app.module.ts | 4 -- .../collapsible-section.component.ts | 62 ------------------- .../collapsible-section.html | 17 ----- frontend/src/app/shared/shared.module.ts | 2 - .../content/_collapsible_section.sass | 31 ---------- .../src/global_styles/content/_index.sass | 1 - .../content/modules/_documents.sass | 4 -- .../default.html.erb | 13 ---- .../app/views/documents/index.html.erb | 2 +- 11 files changed, 10 insertions(+), 144 deletions(-) delete mode 100644 frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts delete mode 100644 frontend/src/app/shared/components/collapsible-section/collapsible-section.html delete mode 100644 frontend/src/global_styles/content/_collapsible_section.sass delete mode 100644 lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb diff --git a/app/views/augmented/_collapsible_section.html.erb b/app/views/augmented/_collapsible_section.html.erb index 4b9986a9ffd9..f0b3716c2fbb 100644 --- a/app/views/augmented/_collapsible_section.html.erb +++ b/app/views/augmented/_collapsible_section.html.erb @@ -1,6 +1,8 @@ - - - +<%= + render(Primer::OpenProject::CollapsibleSection.new(collapsed: !initiallyExpanded, display: :block, mb: 3)) do |section| + section.with_title { title } + section.with_collapsible_content do + capture(&block) + end + end +%> diff --git a/app/views/enterprises/_form.html.erb b/app/views/enterprises/_form.html.erb index 2da2486690f3..6998e7367111 100644 --- a/app/views/enterprises/_form.html.erb +++ b/app/views/enterprises/_form.html.erb @@ -4,9 +4,7 @@ <%= labelled_tabular_form_for @token, url: { action: :create }, html: { class: 'token-form form -vertical' }, - method: :post do |f|%> - -
+ method: :post do |f| %> <%= f.text_area :encoded_token, value: nil, diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 78386494d495..87c56c762857 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -192,9 +192,6 @@ import { NoResultsComponent } from 'core-app/shared/components/no-results/no-res import { OpNonWorkingDaysListComponent, } from 'core-app/shared/components/op-non-working-days-list/op-non-working-days-list.component'; -import { - CollapsibleSectionComponent, -} from 'core-app/shared/components/collapsible-section/collapsible-section.component'; import { CopyToClipboardComponent } from 'core-app/shared/components/copy-to-clipboard/copy-to-clipboard.component'; import { GlobalSearchTitleComponent } from 'core-app/core/global_search/title/global-search-title.component'; import { ContentTabsComponent } from 'core-app/shared/components/tabs/content-tabs/content-tabs.component'; @@ -457,7 +454,6 @@ export class OpenProjectModule implements DoBootstrap { registerCustomElement('opce-enterprise-base', EnterpriseBaseComponent, { injector }); registerCustomElement('opce-no-results', NoResultsComponent, { injector }); registerCustomElement('opce-non-working-days-list', OpNonWorkingDaysListComponent, { injector }); - registerCustomElement('opce-collapsible-section-augment', CollapsibleSectionComponent, { injector }); registerCustomElement('opce-main-menu-toggle', MainMenuToggleComponent, { injector }); registerCustomElement('opce-main-menu-resizer', MainMenuResizerComponent, { injector }); registerCustomElement('opce-copy-to-clipboard', CopyToClipboardComponent, { injector }); diff --git a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts b/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts deleted file mode 100644 index 7491a52a4aba..000000000000 --- a/frontend/src/app/shared/components/collapsible-section/collapsible-section.component.ts +++ /dev/null @@ -1,62 +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. -//++ - -import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; - -@Component({ - selector: 'opce-opce-collapsible-section-augment', - templateUrl: './collapsible-section.html', -}) -export class CollapsibleSectionComponent implements OnInit { - public expanded = false; - - public sectionTitle:string; - - @ViewChild('sectionBody', { static: true }) public sectionBody:ElementRef; - - constructor(public elementRef:ElementRef) { - } - - ngOnInit():void { - const element:HTMLElement = this.elementRef.nativeElement; - - this.sectionTitle = element.getAttribute('section-title')!; - if (element.getAttribute('initially-expanded') === 'true') { - this.expanded = true; - } - - const target:HTMLElement = element.nextElementSibling as HTMLElement; - this.sectionBody.nativeElement.appendChild(target); - target.removeAttribute('hidden'); - } - - public toggle(event:Event) { - this.expanded = !this.expanded; - event.preventDefault(); - } -} diff --git a/frontend/src/app/shared/components/collapsible-section/collapsible-section.html b/frontend/src/app/shared/components/collapsible-section/collapsible-section.html deleted file mode 100644 index a9c0b45b3e03..000000000000 --- a/frontend/src/app/shared/components/collapsible-section/collapsible-section.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - -
- -
-
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index b4664769fa79..a3bc9b9eda53 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -68,7 +68,6 @@ import { ToastComponent } from './components/toaster/toast.component'; import { ToastsContainerComponent } from './components/toaster/toasts-container.component'; import { UploadProgressComponent } from './components/toaster/upload-progress.component'; import { ResizerComponent } from './components/resizer/resizer.component'; -import { CollapsibleSectionComponent } from './components/collapsible-section/collapsible-section.component'; import { NoResultsComponent } from './components/no-results/no-results.component'; import { EditableToolbarTitleComponent } from './components/editable-toolbar-title/editable-toolbar-title.component'; import { PersistentToggleComponent } from './components/persistent-toggle/persistent-toggle.component'; @@ -200,7 +199,6 @@ export function bootstrapModule(injector:Injector):void { // Add functionality to rails rendered templates CopyToClipboardComponent, - CollapsibleSectionComponent, ResizerComponent, diff --git a/frontend/src/global_styles/content/_collapsible_section.sass b/frontend/src/global_styles/content/_collapsible_section.sass deleted file mode 100644 index 3f58bfcee78d..000000000000 --- a/frontend/src/global_styles/content/_collapsible_section.sass +++ /dev/null @@ -1,31 +0,0 @@ -.collapsible-section - margin: 2rem 0 - -.collapsible-section--legend - &:before - @include icon-mixin-arrow-down1 - @include icon-common - font-size: 0.75rem - padding: 0.625rem 0.25rem 0 0.25rem - - .collapsible-section.-expanded & - @include icon-mixin-arrow-up1 - -.collapsible-section--toggle-link - @include without-link-styling - background: none - border: none - width: 100% - text-align: left - display: block - cursor: pointer - color: var(--body-font-color) - font-size: var(--body-font-size) - font-weight: var(--base-text-weight-bold) - line-height: 1.8 - text-transform: uppercase - border-bottom: 1px solid var(--gray) - - &:hover, &:focus - color: var(--body-font-color) - text-decoration: none diff --git a/frontend/src/global_styles/content/_index.sass b/frontend/src/global_styles/content/_index.sass index 78e2d636c3a8..9dc1ced64e85 100644 --- a/frontend/src/global_styles/content/_index.sass +++ b/frontend/src/global_styles/content/_index.sass @@ -9,7 +9,6 @@ @import forms @import forms_mobile @import comments -@import collapsible_section @import copy_to_clipboard @import custom_logo @import toast diff --git a/frontend/src/global_styles/content/modules/_documents.sass b/frontend/src/global_styles/content/modules/_documents.sass index 472104d5f5c6..c926e85db8dc 100644 --- a/frontend/src/global_styles/content/modules/_documents.sass +++ b/frontend/src/global_styles/content/modules/_documents.sass @@ -23,9 +23,6 @@ dt.document:before .sidebar--document-sort label:last-of-type margin-bottom: 2rem -.document-category--inner-section - padding-top: 20px - .document-category-elements display: inline @@ -37,4 +34,3 @@ dt.document:before .document-category-elements .wiki margin-bottom: 2rem - diff --git a/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb b/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb deleted file mode 100644 index 79186a66d139..000000000000 --- a/lookbook/previews/open_project/deprecated/collapsible_section_preview/default.html.erb +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - diff --git a/modules/documents/app/views/documents/index.html.erb b/modules/documents/app/views/documents/index.html.erb index e8b1f530a1f2..06ddb7df9f2e 100644 --- a/modules/documents/app/views/documents/index.html.erb +++ b/modules/documents/app/views/documents/index.html.erb @@ -59,7 +59,7 @@ See COPYRIGHT and LICENSE files for more details. <% end %> <% @grouped.keys.sort.each do |group| %> - <%= augmented_collapsible_section title: group do %> + <%= augmented_collapsible_section(title: group.name) do %>
<%= render partial: "documents/document", collection: @grouped[group] %> From 98b940220cd617cf75066b803eb06c4410f7d8f2 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Thu, 17 Apr 2025 08:20:53 +0200 Subject: [PATCH 2/2] Adapt tests to new CollapsibleSection --- .../admin/enterprise/enterprise_spec.rb | 2 +- spec/features/workflows/edit_spec.rb | 30 +++++++++++-------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/spec/features/admin/enterprise/enterprise_spec.rb b/spec/features/admin/enterprise/enterprise_spec.rb index 1b71f76e93af..73d422a14023 100644 --- a/spec/features/admin/enterprise/enterprise_spec.rb +++ b/spec/features/admin/enterprise/enterprise_spec.rb @@ -102,7 +102,7 @@ expect(EnterpriseToken.current.encoded_token).to eq("foobar") expect(page).to have_text("Successful update") - click_on "Replace your current support token" + find("h2", text: "Replace your current support token").click fill_in "enterprise_token_encoded_token", with: "blabla" submit_button.click diff --git a/spec/features/workflows/edit_spec.rb b/spec/features/workflows/edit_spec.rb index 4d4edb612cd7..8bb7d660611e 100644 --- a/spec/features/workflows/edit_spec.rb +++ b/spec/features/workflows/edit_spec.rb @@ -55,24 +55,28 @@ it "allows adding another workflow" do click_button "Edit" - check "status_#{statuses[1].id}_#{statuses[2].id}_" + within "#workflow_form_always" do + check "status_#{statuses[1].id}_#{statuses[2].id}_" + end click_button "Save" expect_flash(message: "Successful update.") - expect(page) - .to have_field "status_#{statuses[0].id}_#{statuses[1].id}_", checked: true - expect(page) - .to have_field "status_#{statuses[1].id}_#{statuses[2].id}_", checked: true + within "#workflow_form_always" do + expect(page) + .to have_field "status_#{statuses[0].id}_#{statuses[1].id}_", checked: true + expect(page) + .to have_field "status_#{statuses[1].id}_#{statuses[2].id}_", checked: true - expect(page) - .to have_field "status_#{statuses[0].id}_#{statuses[2].id}_", checked: false - expect(page) - .to have_field "status_#{statuses[1].id}_#{statuses[0].id}_", checked: false - expect(page) - .to have_field "status_#{statuses[2].id}_#{statuses[0].id}_", checked: false - expect(page) - .to have_field "status_#{statuses[2].id}_#{statuses[1].id}_", checked: false + expect(page) + .to have_field "status_#{statuses[0].id}_#{statuses[2].id}_", checked: false + expect(page) + .to have_field "status_#{statuses[1].id}_#{statuses[0].id}_", checked: false + expect(page) + .to have_field "status_#{statuses[2].id}_#{statuses[0].id}_", checked: false + expect(page) + .to have_field "status_#{statuses[2].id}_#{statuses[1].id}_", checked: false + end end end