From 077a95b5ccb7687ebd1b259256a95b4aa1f24f4e Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Fri, 5 Dec 2025 16:07:44 +0200 Subject: [PATCH 1/6] [#69693] Adjust the workspace badge icon style to primer https://community.openproject.org/work_packages/69693 --- ...project-autocompleter-template.component.html | 16 ++++++++-------- .../header-project-select-list.component.html | 16 ++++++++-------- .../app/spot/styles/sass/components/list.sass | 14 ++++++++++++++ .../src/global_styles/content/_autocomplete.sass | 14 ++++++++++++++ 4 files changed, 44 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component.html b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component.html index 2807149d6c2..c27a36052f8 100644 --- a/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component.html +++ b/frontend/src/app/shared/components/autocompleter/project-autocompleter/project-autocompleter-template.component.html @@ -18,14 +18,14 @@ @if (portfolioModelsEnabled) { @switch (item._type) { @case ('Portfolio') { - - + + {{ this.I18n.t('js.include_workspaces.types.portfolio') }} } @case ('Program') { - - + + {{ this.I18n.t('js.include_workspaces.types.program') }} } @@ -53,14 +53,14 @@ @if (portfolioModelsEnabled) { @switch (item._type) { @case ('Portfolio') { - - + + {{ this.I18n.t('js.include_workspaces.types.portfolio') }} } @case ('Program') { - - + + {{ this.I18n.t('js.include_workspaces.types.program') }} } diff --git a/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html b/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html index 895d8c3ccf7..37233be7a0d 100644 --- a/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html +++ b/frontend/src/app/shared/components/header-project-select/list/header-project-select-list.component.html @@ -34,14 +34,14 @@ @if (portfolioModelsEnabled) { @switch (project._type) { @case ('Portfolio') { - - + + {{ this.I18n.t('js.include_workspaces.types.portfolio') }} } @case ('Program') { - - + + {{ this.I18n.t('js.include_workspaces.types.program') }} } @@ -75,14 +75,14 @@ @if (portfolioModelsEnabled) { @switch (project._type) { @case ('Portfolio') { - - + + {{ this.I18n.t('js.include_workspaces.types.portfolio') }} } @case ('Program') { - - + + {{ this.I18n.t('js.include_workspaces.types.program') }} } diff --git a/frontend/src/app/spot/styles/sass/components/list.sass b/frontend/src/app/spot/styles/sass/components/list.sass index dd5316d92ab..339938e135a 100644 --- a/frontend/src/app/spot/styles/sass/components/list.sass +++ b/frontend/src/app/spot/styles/sass/components/list.sass @@ -1,5 +1,7 @@ @use "sass:list" +@import '../../../../../global_styles/content/_autocomplete.sass' + .spot-list display: flex flex-direction: column @@ -93,6 +95,18 @@ max-width: 100% width: 100% + &:has(.description) + display: flex + align-items: center + + > span:first-child + text-overflow: ellipsis + white-space: nowrap + overflow: hidden + + .description + @extend %autocomplete-description + &-action_disabled &-title opacity: 0.5 diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass index 9dd0c574c58..dc599920145 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -26,6 +26,14 @@ // See COPYRIGHT and LICENSE files for more details. //++ +%autocomplete-description + display: flex + align-items: center + flex-shrink: 0 + gap: var(--base-size-4, 4px) + color: var(--fgColor-muted) + font-size: var(--text-body-size-small, .75rem) + /***** Auto-complete ****/ div.autocomplete @@ -146,6 +154,9 @@ div.autocomplete .ng-value-label:has(> *) min-width: 0 + .description + @extend %autocomplete-description + .ng-placeholder // Fix overflow by providing a max width to the input // @@ -165,6 +176,9 @@ div.autocomplete .ng-option-label vertical-align: top + .description + @extend %autocomplete-description + .ng-option, .ng-optgroup line-height: 22px font-size: var(--body-font-size) From 9389c0178ec166812c02b6b787c94aa8106468a5 Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Fri, 5 Dec 2025 22:57:49 +0200 Subject: [PATCH 2/6] Change the project list workspace type badge text size and icon size --- app/components/projects/row_component.rb | 7 +++++-- frontend/src/global_styles/content/_projects_list.sass | 5 +++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/components/projects/row_component.rb b/app/components/projects/row_component.rb index 82cd05bcd02..9c08a097571 100644 --- a/app/components/projects/row_component.rb +++ b/app/components/projects/row_component.rb @@ -434,8 +434,11 @@ module Projects # Only show icon and type for non-project workspaces return unless project.workspace_type.in?(["portfolio", "program"]) - render(Primer::Beta::Text.new(color: :muted)) do - icon = render(Primer::Beta::Octicon.new(icon: helpers.workspace_icon(project.workspace_type))) + render(Primer::Beta::Text.new(classes: "description")) do + icon = render(Primer::Beta::Octicon.new( + icon: helpers.workspace_icon(project.workspace_type), + size: :xsmall + )) safe_join([icon, " ", I18n.t(:"label_#{project.workspace_type}")]) end end diff --git a/frontend/src/global_styles/content/_projects_list.sass b/frontend/src/global_styles/content/_projects_list.sass index 7c6885e7d1a..323e085f58e 100644 --- a/frontend/src/global_styles/content/_projects_list.sass +++ b/frontend/src/global_styles/content/_projects_list.sass @@ -79,8 +79,13 @@ $content-padding: 10px a white-space: nowrap + .description + @extend %autocomplete-description + td.project--hierarchy white-space: nowrap + display: flex + gap: var(--base-size-8, 8px) @for $i from 1 through 9 tr.idnt-#{$i} td.project--hierarchy From 968abeb23fb1508ca351b38e3b252d9a79669207 Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Thu, 11 Dec 2025 15:10:15 +0200 Subject: [PATCH 3/6] Add normal font weight for the badge --- frontend/src/global_styles/content/_autocomplete.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass index dc599920145..9cc6440e375 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -33,6 +33,7 @@ gap: var(--base-size-4, 4px) color: var(--fgColor-muted) font-size: var(--text-body-size-small, .75rem) + font-weight: var(--base-text-weight-normal, 400) /***** Auto-complete ****/ From c835f5292e17c4bdb522bccde10cd3460fff991a Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Thu, 11 Dec 2025 17:54:42 +0200 Subject: [PATCH 4/6] Fix slow unconstrained has selector --- frontend/src/global_styles/content/_autocomplete.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/global_styles/content/_autocomplete.sass b/frontend/src/global_styles/content/_autocomplete.sass index 9cc6440e375..e86ef1a8d5e 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -149,10 +149,10 @@ div.autocomplete height: initial !important min-height: initial !important - .ng-value-label:not(:has(> *)) + .ng-value-label:not(:has(span)) display: initial !important - .ng-value-label:has(> *) + .ng-value-label:has(span) min-width: 0 .description From 48d185c1c5337f11dff8b0c996c287823a1a1460 Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Thu, 11 Dec 2025 18:09:50 +0200 Subject: [PATCH 5/6] Fix specs, add class option for the primer text rspec matcher --- spec/support/capybara/primer_component_selectors.rb | 3 ++- spec/support/components/projects/top_menu.rb | 4 ++-- spec/support/edit_fields/project_edit_field.rb | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/spec/support/capybara/primer_component_selectors.rb b/spec/support/capybara/primer_component_selectors.rb index bcef53c037f..e84b2f9fe53 100644 --- a/spec/support/capybara/primer_component_selectors.rb +++ b/spec/support/capybara/primer_component_selectors.rb @@ -69,8 +69,9 @@ end Capybara.add_selector :primer_text, locator_type: [String] do label "Primer Text" - xpath do |locator, **| + xpath do |locator, **options| xpath = XPath.descendant(:span) + xpath = xpath[XPath.attr(:class).contains_word(options[:class])] if options[:class] unless locator.nil? locator = locator.to_s xpath = xpath[XPath.string.n.is(locator)] diff --git a/spec/support/components/projects/top_menu.rb b/spec/support/components/projects/top_menu.rb index 0af906b9088..df6468610ef 100644 --- a/spec/support/components/projects/top_menu.rb +++ b/spec/support/components/projects/top_menu.rb @@ -109,10 +109,10 @@ module Components if workspace_badge expect(item).to have_octicon - expect(item).to have_primer_text(workspace_badge, color: :muted) + expect(item).to have_primer_text(workspace_badge, class: "description") else expect(item).to have_no_octicon - expect(item).to have_no_primer_text(color: :muted) + expect(item).to have_no_primer_text(class: "description") end end end diff --git a/spec/support/edit_fields/project_edit_field.rb b/spec/support/edit_fields/project_edit_field.rb index b69dfe835bd..42dcfa00106 100644 --- a/spec/support/edit_fields/project_edit_field.rb +++ b/spec/support/edit_fields/project_edit_field.rb @@ -51,10 +51,10 @@ class ProjectEditField < SelectField if workspace_badge expect(option).to have_octicon - expect(option).to have_primer_text(workspace_badge, color: :muted) + expect(option).to have_primer_text(workspace_badge, class: "description") else expect(option).to have_no_octicon - expect(option).to have_no_primer_text(color: :muted) + expect(option).to have_no_primer_text(class: "description") end end end From 1f16deff38cf93b167a68cda8f75919e5a0d249c Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Fri, 12 Dec 2025 17:05:42 +0200 Subject: [PATCH 6/6] Fix whitespace issue in specs --- .../spec/features/storages/admin/project_storages_spec.rb | 2 +- spec/support/pages/projects/index.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/storages/spec/features/storages/admin/project_storages_spec.rb b/modules/storages/spec/features/storages/admin/project_storages_spec.rb index ea2ae066e98..56ad1a3ca36 100644 --- a/modules/storages/spec/features/storages/admin/project_storages_spec.rb +++ b/modules/storages/spec/features/storages/admin/project_storages_spec.rb @@ -383,7 +383,7 @@ RSpec.describe "Admin lists project mappings for a storage", current_page = 3 visit admin_settings_storage_project_storages_path(storage, page: current_page) - project = project_storages_index_page.project_in_first_row(column_text_separator: "\t") + project = project_storages_index_page.project_in_first_row project_storages_index_page.click_menu_item_of("Remove project", project) # The original DeleteService would try to remove actual files from actual storages, diff --git a/spec/support/pages/projects/index.rb b/spec/support/pages/projects/index.rb index a02d1794d1f..d0232ead0d9 100644 --- a/spec/support/pages/projects/index.rb +++ b/spec/support/pages/projects/index.rb @@ -49,7 +49,7 @@ module Pages project.name end - expect(page).to have_text(displayed_name) + expect(page).to have_text(displayed_name, normalize_ws: true) end end end