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/components/list/ci_resources_list_item.vue b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
index a6218a4c5952e081bb6ee305bd6ccf171fd8a664..6fcae4041d5e169c3d1ac68bcddc85fdcde1cbfa 100644
--- a/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
+++ b/app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue
@@ -142,7 +142,17 @@ export default {
<div
class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-justify-content-space-between gl-font-sm"
>
- <span class="gl-display-flex gl-flex-basis-two-thirds">{{ resource.description }}</span>
+ <div>
+ <span class="gl-display-flex gl-flex-basis-two-thirds">{{ resource.description }}</span>
+ <div
+ v-if="hasComponents"
+ data-testid="ci-resource-component-names"
+ class="gl-font-sm gl-mt-1"
+ >
+ <span class="gl-font-weight-bold"> • {{ $options.i18n.components }} </span>
+ <span class="gl-text-gray-900">{{ componentNames }}</span>
+ </div>
+ </div>
<div class="gl-display-flex gl-justify-content-end">
<span v-if="hasReleasedVersion">
<gl-sprintf :message="$options.i18n.releasedMessage">
@@ -160,14 +170,6 @@ export default {
</span>
</div>
</div>
- <div
- v-if="hasComponents"
- data-testid="ci-resource-component-names"
- class="gl-font-sm gl-mt-1"
- >
- <span class="gl-font-weight-bold"> • {{ $options.i18n.components }} </span>
- <span class="gl-text-gray-900">{{ componentNames }}</span>
- </div>
</div>
</li>
</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 be7ddffd6fdb5d03bf075ed22f5769e63c959e30..7961d7dad736d442bd598eb788b9729b7c41c5c9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -40832,6 +40832,9 @@ msgstr ""
msgid "Released"
msgstr ""
+msgid "Released at"
+msgstr ""
+
msgid "Released date"
msgstr ""
diff --git a/spec/features/explore/catalog/catalog_spec.rb b/spec/features/explore/catalog/catalog_spec.rb
index 1ad0e9679b887e29c2cdf3e0a8e1b7ea447d9d16..7f5655e3169279d87b8381ff2fb588c2e22fafbf 100644
--- a/spec/features/explore/catalog/catalog_spec.rb
+++ b/spec/features/explore/catalog/catalog_spec.rb
@@ -136,36 +136,5 @@
end
end
end
-
- context 'when sorting' do
- context 'with the creation date option' do
- it 'sorts resources from last to first by default' do
- expect(find_all('[data-testid="catalog-resource-item"]').length).to be(3)
- expect(find_all('[data-testid="catalog-resource-item"]')[0]).to have_content(
- public_projects_with_components[2].name
- )
- expect(find_all('[data-testid="catalog-resource-item"]')[2]).to have_content(
- public_projects_with_components[0].name
- )
- end
-
- context 'when changing the sort direction' do
- before do
- find('.sorting-direction-button').click
- wait_for_requests
- end
-
- it 'sorts resources from first to last' do
- expect(find_all('[data-testid="catalog-resource-item"]').length).to be(3)
- expect(find_all('[data-testid="catalog-resource-item"]')[0]).to have_content(
- public_projects_with_components[0].name
- )
- expect(find_all('[data-testid="catalog-resource-item"]')[2]).to have_content(
- public_projects_with_components[2].name
- )
- end
- end
- end
- end
end
end
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..0242240e2e6b5971dbe3489c8a6bcf0938200ab9 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');
});
});
@@ -86,6 +91,10 @@ describe('CatalogSearch', () => {
await findSorting().vm.$emit('sortDirectionChange');
expect(findSorting().props().isAscending).toBe(true);
+
+ await findSorting().vm.$emit('sortDirectionChange');
+
+ expect(findSorting().props().isAscending).toBe(false);
});
it('emits an `update-sorting` event with the new direction', async () => {
@@ -95,10 +104,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');
+ });
+ });
});
});