From 88dd091d81f98187d9283d577e93f1df8e184489 Mon Sep 17 00:00:00 2001 From: Julia Miocene Date: Mon, 4 Mar 2024 19:31:36 +0100 Subject: [PATCH] Update commits empty state Migrate to Pajamas component and update illustration. Changelog: changed --- .../stylesheets/page_bundles/commits.scss | 4 ---- .../page_bundles/merge_request.scss | 13 ------------ .../merge_requests/_commits.html.haml | 12 +++++------ .../creations/_new_submit.html.haml | 2 +- .../shared/icons/_illustration_no_commits.svg | 1 - .../__snapshots__/empty_state_spec.js.snap | 2 +- .../corpus_management_spec.js | 2 +- .../corpus_management/empty_state_spec.js | 2 +- locale/gitlab.pot | 3 +++ .../merge_requests/_commits.html.haml_spec.rb | 20 +++++++++++++++++++ 10 files changed, 32 insertions(+), 29 deletions(-) delete mode 100644 app/views/shared/icons/_illustration_no_commits.svg diff --git a/app/assets/stylesheets/page_bundles/commits.scss b/app/assets/stylesheets/page_bundles/commits.scss index 589cc7988f9712..e43f99914f7b35 100644 --- a/app/assets/stylesheets/page_bundles/commits.scss +++ b/app/assets/stylesheets/page_bundles/commits.scss @@ -4,10 +4,6 @@ + .commits-row { border-top: 1px solid var(--gray-50, $gray-50); } - - + .commits-empty { - display: none; - } } .add-review-item { diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss index 68abb1c980f22a..4219bd25f91672 100644 --- a/app/assets/stylesheets/page_bundles/merge_request.scss +++ b/app/assets/stylesheets/page_bundles/merge_request.scss @@ -60,19 +60,6 @@ $comparison-empty-state-height: 62px; min-height: $comparison-empty-state-height; } -.commits-empty { - text-align: center; - - h4 { - padding-top: 20px; - padding-bottom: 10px; - } - - svg { - width: 230px; - } -} - .nothing-here-block { img { width: 230px; diff --git a/app/views/projects/merge_requests/_commits.html.haml b/app/views/projects/merge_requests/_commits.html.haml index ee0ab984d6fb60..b4d62a200d3351 100644 --- a/app/views/projects/merge_requests/_commits.html.haml +++ b/app/views/projects/merge_requests/_commits.html.haml @@ -1,13 +1,11 @@ - can_update_merge_request = can?(current_user, :update_merge_request, @merge_request) - if @commits.empty? && @context_commits.empty? - .commits-empty.mt-5 - = custom_icon ('illustration_no_commits') - %h4 - = _('There are no commits yet.') - - if can_update_merge_request - %p - = _('Push commits to the source branch or add previously merged commits to review them.') + = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-commit-md.svg', + title: _('There are no commits yet')) do |c| + + - c.with_description do + %p= _('Push commits to the source branch or add previously merged commits to review them.') = render Pajamas::ButtonComponent.new(variant: 'confirm', button_options: { class: 'add-review-item-modal-trigger', data: { commits_empty: 'true', context_commits_empty: 'true' } }) do = _('Add previously merged commits') - else diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml index 996928ba377815..2d0807b82f9613 100644 --- a/app/views/projects/merge_requests/creations/_new_submit.html.haml +++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml @@ -28,7 +28,7 @@ #diff-notes-app.tab-content #new.commits.tab-pane.active - .commits-empty.gl-text-left.gl-my-5.gl-text-gray-500 + .gl-text-left.gl-my-5.gl-text-gray-500 %p = _("There are no commits yet.") - else diff --git a/app/views/shared/icons/_illustration_no_commits.svg b/app/views/shared/icons/_illustration_no_commits.svg deleted file mode 100644 index 34f177d7efad10..00000000000000 --- a/app/views/shared/icons/_illustration_no_commits.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/empty_state_spec.js.snap b/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/empty_state_spec.js.snap index 636885b899a0ae..2404ff380c0ad7 100644 --- a/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/empty_state_spec.js.snap +++ b/ee/spec/frontend/security_configuration/corpus_management/__snapshots__/empty_state_spec.js.snap @@ -11,7 +11,7 @@ exports[`EE - CorpusManagement - EmptyState should render correct content 1`] = alt="" class="gl-dark-invert-keep-hue gl-max-w-full" height="144" - src="/illustrations/no_commits.svg" + src="/illustrations/empty-state/empty-commit-md.svg" />
{ let wrapper; diff --git a/ee/spec/frontend/security_configuration/corpus_management/empty_state_spec.js b/ee/spec/frontend/security_configuration/corpus_management/empty_state_spec.js index f8cfe288f07c2c..a56c81de56c6aa 100644 --- a/ee/spec/frontend/security_configuration/corpus_management/empty_state_spec.js +++ b/ee/spec/frontend/security_configuration/corpus_management/empty_state_spec.js @@ -4,7 +4,7 @@ import { shallowMount } from '@vue/test-utils'; import EmptyState from 'ee/security_configuration/corpus_management/components/empty_state.vue'; const TEST_CORPUS_HELP_PATH = '/docs/corpus-management'; -const TEST_EMPTY_STATE_SVG_PATH = '/illustrations/no_commits.svg'; +const TEST_EMPTY_STATE_SVG_PATH = '/illustrations/empty-state/empty-commit-md.svg'; describe('EE - CorpusManagement - EmptyState', () => { let wrapper; diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 0ec9466fe93078..62f4e644833cb2 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -50693,6 +50693,9 @@ msgstr "" msgid "There are no closed merge requests" msgstr "" +msgid "There are no commits yet" +msgstr "" + msgid "There are no commits yet." msgstr "" diff --git a/spec/views/projects/merge_requests/_commits.html.haml_spec.rb b/spec/views/projects/merge_requests/_commits.html.haml_spec.rb index 4ce6755b89d208..346cf203c67e55 100644 --- a/spec/views/projects/merge_requests/_commits.html.haml_spec.rb +++ b/spec/views/projects/merge_requests/_commits.html.haml_spec.rb @@ -39,4 +39,24 @@ expect(rendered).to have_css('.js-loading-signature-badge') end + + context 'when MR has no commits' do + let(:merge_request) { create(:merge_request, source_project: create(:project, :custom_repo)) } + + it 'renders empty state' do + assign(:context_commits, []) + + render + + expect(rendered).to have_css('.gl-empty-state') + end + + it 'renders the svg' do + assign(:context_commits, []) + + render + + expect(rendered).to include('empty-commit-md') + end + end end -- GitLab