Merge branch 'admin-topic-jmiocene' into 'master'

Update admin topic page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/157848



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Paul W <19602001-paintedbicycle-gitlab@users.noreply.gitlab.com>
Approved-by: Joseph Wambua <jjoshua@gitlab.com>
Approved-by: Nataliia Radina <nradina@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Paul W <19602001-paintedbicycle-gitlab@users.noreply.gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

app/views/admin/topics/_form.html.haml

@@ -25,6 +25,7 @@
                                  supports_quick_actions: 'false',
                                  enable_autocomplete: 'false',
                                  disable_attachments: 'true',
+                                 autofocus: 'false',
                                  form_field_classes: 'note-textarea js-gfm-input markdown-area' } }
       = f.hidden_field :description
 
@@ -36,14 +37,12 @@
     - if @topic.avatar?
       .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic), name: @topic.name } }
 
-  - if @topic.new_record?
-    .form-actions
+  .gl-mt-5.gl-flex.gl-flex-wrap.gl-gap-3
+    - if @topic.new_record?
       = f.submit _('Create topic'), pajamas_button: true
       = render Pajamas::ButtonComponent.new(href: admin_topics_path) do
         = _('Cancel')
-
-  - else
-    .form-actions
+    - else
       = f.submit _('Save changes'), pajamas_button: true
       = render Pajamas::ButtonComponent.new(href: admin_topics_path) do
         = _('Cancel')

app/views/admin/topics/index.html.haml

 - page_title _("Topics")
 - add_page_specific_style 'page_bundles/search'
 
-.top-area{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_topics_pageload' } }
-  .nav-controls.gl-w-full.gl-mt-3.gl-mb-3
-    = form_tag admin_topics_path, method: :get do |f|
-      - search = params.fetch(:search, nil)
-      .search-field-holder
-        = search_field_tag :search, search, class: "form-control gl-form-input search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: _('Search by name')
-        = sprite_icon('search', css_class: 'search-icon')
-    .gl-flex-grow-1
+= render ::Layouts::PageHeadingComponent.new(_('Topics'), options: { data: { event_tracking_load: 'true', event_tracking: 'view_admin_topics_pageload' } }) do |c|
+  - c.with_actions do
     .js-merge-topics{ data: { path: merge_admin_topics_path } }
     = render Pajamas::ButtonComponent.new(href: new_admin_topic_path, variant: 'confirm') do
       = _('New topic')
+
+.gl-flex.gl-min-w-0.gl-grow.row-content-block
+  = form_tag admin_topics_path, method: :get, class: 'gl-w-full' do |f|
+    - search = params.fetch(:search, nil)
+    .search-field-holder
+      = search_field_tag :search, search, class: "form-control gl-form-input search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: _('Search by name')
+      = sprite_icon('search', css_class: 'search-icon')
+
 %ul.content-list
   = render partial: 'topic', collection: @topics
 
 = paginate_collection @topics
+
 - if @topics.empty?
   = render 'shared/empty_states/topics'

app/views/admin/topics/new.html.haml

 - page_title _("New topic")
 %h1.page-title.gl-font-size-h-display= _('New topic')
-%hr
 = render 'form', url: admin_topics_path(@topic)

app/views/shared/empty_states/_topics.html.haml

-.row.empty-state
-  .col-12
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-labels-md.svg'
-    .text-content.gl-text-center.gl-pt-0!
-      %h4= _('There are no topics to show.')
-      %p= _('Add topics to projects to help users find them.')
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-labels-md.svg',
+  title: _('There are no topics to show'))  do |c|
+
+  - c.with_description do
+    = _('Add topics to projects to help users find them.')

locale/gitlab.pot

@@ -53478,7 +53478,7 @@ msgstr ""
 msgid "There are no secure files yet."
 msgstr ""
-msgid "There are no topics to show."
+msgid "There are no topics to show"
 msgstr ""
 msgid "There are no variables yet."

spec/features/explore/topics_spec.rb

@@ -8,7 +8,7 @@
       visit topics_explore_projects_path
 
       expect(page).to have_current_path topics_explore_projects_path, ignore_query: true
-      expect(page).to have_content('There are no topics to show.')
+      expect(page).to have_content('There are no topics to show')
     end
   end