Merge branch 'add-empty-search-result-component' into 'master'

Add EmptyResult vue and rails component

See merge request !164368



Merged-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Vamsi Vempati <vvempati@gitlab.com>
Approved-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Vamsi Vempati <vvempati@gitlab.com>
Reviewed-by: Lorena Ciutacu <lciutacu@gitlab.com>
Co-authored-by: Julia Miocene <jmiocene@gitlab.com>

app/assets/javascripts/vue_shared/components/empty_result.stories.js

+import EmptyResult, { TYPES } from './empty_result.vue';
+
+export default {
+  component: EmptyResult,
+  title: 'vue_shared/empty_result',
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.values(TYPES),
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { EmptyResult },
+  props: Object.keys(argTypes),
+  template: `<empty-result v-bind="$props" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  type: TYPES.search,
+};

app/assets/javascripts/vue_shared/components/empty_result.vue

+<script>
+import emptyStateSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-search-md.svg';
+import { GlEmptyState } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export const TYPES = {
+  search: 'search',
+  filter: 'filter',
+};
+
+export default {
+  i18n: {
+    titleSearch: __('No results found'),
+    descriptionSearch: __('Edit your search and try again.'),
+    titleFilter: __('No results found'),
+    descriptionFilter: __('To widen your search, change or remove filters above.'),
+  },
+  components: {
+    GlEmptyState,
+  },
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: TYPES.search,
+      validator: (type) => Object.values(TYPES).includes(type),
+    },
+  },
+  computed: {
+    title() {
+      return this.type === TYPES.search
+        ? this.$options.i18n.titleSearch
+        : this.$options.i18n.titleFilter;
+    },
+    description() {
+      return this.type === TYPES.search
+        ? this.$options.i18n.descriptionSearch
+        : this.$options.i18n.descriptionFilter;
+    },
+  },
+  emptyStateSvgPath,
+};
+</script>
+
+<template>
+  <gl-empty-state
+    :svg-path="$options.emptyStateSvgPath"
+    :title="title"
+    :description="description"
+  />
+</template>

app/components/layouts/empty_result_component.haml

+- title = _('No results found')
+- description = filter? ? _('To widen your search, change or remove filters above.') : _('Edit your search and try again.')
+- svg_path = 'illustrations/empty-state/empty-search-md.svg'
+
+= render Pajamas::EmptyStateComponent.new(svg_path: svg_path,
+  title: title,
+  empty_state_options: { **@html_options })  do |c|
+
+  - c.with_description do
+    = description

app/components/layouts/empty_result_component.rb

+# frozen_string_literal: true
+
+module Layouts
+  class EmptyResultComponent < Pajamas::Component
+    TYPE_OPTIONS = [:search, :filter].freeze
+
+    # @param [Symbol] type
+    # @param [Hash] html_options
+    def initialize(
+      type: :search,
+      **html_options
+    )
+      @type = filter_attribute(type.to_sym, TYPE_OPTIONS, default: :search)
+      @html_options = html_options
+    end
+
+    def filter?
+      @type == :filter
+    end
+
+    def html_options
+      format_options(options: @html_options)
+    end
+  end
+end

locale/gitlab.pot

@@ -20484,6 +20484,9 @@ msgstr ""
 msgid "Edit your search and try again"
 msgstr ""
+msgid "Edit your search and try again."
+msgstr ""
+
 msgid "Edit your search filter and try again."
 msgstr ""

spec/components/layouts/empty_result_component_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe Layouts::EmptyResultComponent, type: :component, feature_category: :shared do
+  let(:type) { :search }
+  let(:html_options) { { data: { testid: 'empty-result-test-id' } } }
+
+  before do
+    render_inline described_class.new(type: type, **html_options)
+  end
+
+  it 'renders search empty result' do
+    expect(page).to have_css('.gl-empty-state', text: 'No results found')
+    expect(page).to have_css('.gl-empty-state', text: 'Edit your search and try again.')
+  end
+
+  it 'renders custom attributes' do
+    expect(page).to have_css('[data-testid="empty-result-test-id"]')
+  end
+
+  context 'when type is filter' do
+    let(:type) { :filter }
+
+    it 'renders empty result' do
+      expect(page).to have_css('.gl-empty-state', text: 'No results found')
+      expect(page).to have_css('.gl-empty-state', text: 'To widen your search, change or remove filters above.')
+    end
+  end
+end

spec/components/previews/layouts/empty_result_component_preview.rb

+# frozen_string_literal: true
+
+module Layouts
+  class EmptyResultComponentPreview < ViewComponent::Preview
+    # @param type select {{ Layouts::EmptyResultComponent::TYPE_OPTIONS }}
+
+    def default(type: :search)
+      render(::Layouts::EmptyResultComponent.new(
+        type: type
+      ))
+    end
+  end
+end

spec/frontend/vue_shared/components/empty_result_spec.js

+import emptyStateSvgPath from '@gitlab/svgs/dist/illustrations/empty-state/empty-search-md.svg';
+import { GlEmptyState } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import EmptyResult from '~/vue_shared/components/empty_result.vue';
+
+describe('Empty result', () => {
+  let wrapper;
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(EmptyResult, {
+      propsData: props,
+    });
+  };
+
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+
+  it('renders empty search state', () => {
+    createComponent({ type: 'search' });
+
+    expect(findEmptyState().props()).toMatchObject({
+      svgPath: emptyStateSvgPath,
+      title: 'No results found',
+      description: 'Edit your search and try again.',
+    });
+  });
+
+  it('renders empty filter state', () => {
+    createComponent({ type: 'filter' });
+
+    expect(findEmptyState().props()).toMatchObject({
+      svgPath: emptyStateSvgPath,
+      title: 'No results found',
+      description: 'To widen your search, change or remove filters above.',
+    });
+  });
+});