diff --git a/app/assets/javascripts/ci/catalog/components/list/catalog_search.vue b/app/assets/javascripts/ci/catalog/components/list/catalog_search.vue index 1319f204573c706d2b2e3d0185a7fee735d06da0..ec8d6c917d951dafa2ac148f7712b2c6f50a1c35 100644 --- a/app/assets/javascripts/ci/catalog/components/list/catalog_search.vue +++ b/app/assets/javascripts/ci/catalog/components/list/catalog_search.vue @@ -1,7 +1,7 @@ <script> import { GlSearchBoxByClick, GlSorting } from '@gitlab/ui'; import { __ } from '~/locale'; -import { SORT_ASC, SORT_DESC, SORT_OPTION_CREATED } from '../../constants'; +import { SORT_ASC, SORT_DESC, SORT_OPTION_CREATED, SORT_OPTION_RELEASED } from '../../constants'; export default { components: { @@ -10,7 +10,7 @@ export default { }, data() { return { - currentSortOption: SORT_OPTION_CREATED, + currentSortOption: SORT_OPTION_RELEASED, isAscending: false, searchTerm: '', }; @@ -48,7 +48,10 @@ export default { this.currentSortOption = sortingItem; }, }, - sortOptions: [{ value: SORT_OPTION_CREATED, text: __('Created at') }], + sortOptions: [ + { value: SORT_OPTION_RELEASED, text: __('Released at') }, + { value: SORT_OPTION_CREATED, text: __('Created at') }, + ], }; </script> <template> diff --git a/app/assets/javascripts/ci/catalog/constants.js b/app/assets/javascripts/ci/catalog/constants.js index a180aa84344529e4d1acdda5cf5af99abc26548b..2767c9d91ece9823f8f902f1869cc905bd75fd9b 100644 --- a/app/assets/javascripts/ci/catalog/constants.js +++ b/app/assets/javascripts/ci/catalog/constants.js @@ -8,6 +8,7 @@ export const SCOPE = { }; export const SORT_OPTION_CREATED = 'CREATED'; +export const SORT_OPTION_RELEASED = 'LATEST_RELEASED_AT'; export const SORT_ASC = 'ASC'; export const SORT_DESC = 'DESC'; export const DEFAULT_SORT_VALUE = `${SORT_OPTION_CREATED}_${SORT_DESC}`; diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 24f1e6a6ff39b4c7e1cdaca31edfba0f51e227ef..104f24ac75de5939d6fc6d48b5087b4b0254352f 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -40723,6 +40723,9 @@ msgstr "" msgid "Released" msgstr "" +msgid "Released at" +msgstr "" + msgid "Released date" msgstr "" diff --git a/spec/frontend/ci/catalog/components/list/catalog_search_spec.js b/spec/frontend/ci/catalog/components/list/catalog_search_spec.js index 803deeb0d45f2fc704da5b89366950d58bc5496e..f64f171481c774f729c5c5bf68d807abe9bcef9a 100644 --- a/spec/frontend/ci/catalog/components/list/catalog_search_spec.js +++ b/spec/frontend/ci/catalog/components/list/catalog_search_spec.js @@ -1,7 +1,12 @@ import { GlSearchBoxByClick, GlSorting } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import CatalogSearch from '~/ci/catalog/components/list/catalog_search.vue'; -import { SORT_ASC, SORT_DESC, SORT_OPTION_CREATED } from '~/ci/catalog/constants'; +import { + SORT_ASC, + SORT_DESC, + SORT_OPTION_CREATED, + SORT_OPTION_RELEASED, +} from '~/ci/catalog/constants'; describe('CatalogSearch', () => { let wrapper; @@ -25,12 +30,12 @@ describe('CatalogSearch', () => { it('sets sorting options', () => { const sortOptionsProp = findAllSortingItems(); - expect(sortOptionsProp).toHaveLength(1); - expect(sortOptionsProp[0].text).toBe('Created at'); + expect(sortOptionsProp).toHaveLength(2); + expect(sortOptionsProp[0].text).toBe('Released at'); }); - it('renders the `Created at` option as the default', () => { - expect(findSorting().props('text')).toBe('Created at'); + it('renders the `Released at` option as the default', () => { + expect(findSorting().props('text')).toBe('Released at'); }); }); @@ -95,10 +100,19 @@ describe('CatalogSearch', () => { await findSorting().vm.$emit('sortDirectionChange'); expect(wrapper.emitted('update-sorting')).toEqual([ - [`${SORT_OPTION_CREATED}_${SORT_ASC}`], - [`${SORT_OPTION_CREATED}_${SORT_DESC}`], + [`${SORT_OPTION_RELEASED}_${SORT_ASC}`], + [`${SORT_OPTION_RELEASED}_${SORT_DESC}`], ]); }); }); + + describe('when changing sort option', () => { + it('changes the sort option to `Created at`', async () => { + await findSorting().vm.$emit('sortByChange', SORT_OPTION_CREATED); + + expect(findSorting().props().sortBy).toBe(SORT_OPTION_CREATED); + expect(findSorting().props().text).toBe('Created at'); + }); + }); }); });