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/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..e86ef1a8d5e 100644 --- a/frontend/src/global_styles/content/_autocomplete.sass +++ b/frontend/src/global_styles/content/_autocomplete.sass @@ -26,6 +26,15 @@ // 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) + font-weight: var(--base-text-weight-normal, 400) + /***** Auto-complete ****/ div.autocomplete @@ -140,12 +149,15 @@ 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 + @extend %autocomplete-description + .ng-placeholder // Fix overflow by providing a max width to the input // @@ -165,6 +177,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) 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 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/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 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