Add composer to packages contansts

- shared constants
- list constants
- utils
- unit tests
- snapshots

app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -26,6 +26,7 @@ export default {
       emptyListHelpUrl: state => state.config.emptyListHelpUrl,
       comingSoon: state => state.config.comingSoon,
       filterQuery: state => state.filterQuery,
+      selectedType: state => state.selectedType,
     }),
     tabsToRender() {
       return PACKAGE_REGISTRY_TABS;
@@ -42,11 +43,11 @@ export default {
     onPackageDeleteRequest(item) {
       return this.requestDeletePackage(item);
     },
-    tabChanged(e) {
-      const selectedType = PACKAGE_REGISTRY_TABS[e];
+    tabChanged(index) {
+      const selected = PACKAGE_REGISTRY_TABS[index];
 
-      if (selectedType) {
-        this.setSelectedType(selectedType);
+      if (selected !== this.selectedType) {
+        this.setSelectedType(selected);
         this.requestPackagesList();
       }
     },

app/assets/javascripts/packages/list/constants.js

@@ -73,10 +73,15 @@ export const PACKAGE_REGISTRY_TABS = [
     title: __('All'),
     type: null,
   },
+  {
+    title: s__('PackageRegistry|Composer'),
+    type: PackageType.COMPOSER,
+  },
   {
     title: s__('PackageRegistry|Conan'),
     type: PackageType.CONAN,
   },
+
   {
     title: s__('PackageRegistry|Maven'),
     type: PackageType.MAVEN,

app/assets/javascripts/packages/list/stores/state.js

+import { PACKAGE_REGISTRY_TABS } from '../constants';
+
 export default () => ({
   /**
    * Determine if the component is loading data from the API
@@ -48,4 +50,8 @@ export default () => ({
    * The search query that is used to filter packages by name
    */
   filterQuery: '',
+  /**
+   * The selected TAB of the package types tabs
+   */
+  selectedType: PACKAGE_REGISTRY_TABS[0],
 });

app/assets/javascripts/packages/shared/constants.js

@@ -4,6 +4,7 @@ export const PackageType = {
   NPM: 'npm',
   NUGET: 'nuget',
   PYPI: 'pypi',
+  COMPOSER: 'composer',
 };
 
 export const TrackingActions = {

app/assets/javascripts/packages/shared/utils.js

@@ -19,6 +19,8 @@ export const getPackageTypeLabel = packageType => {
       return s__('PackageType|NuGet');
     case PackageType.PYPI:
       return s__('PackageType|PyPi');
+    case PackageType.COMPOSER:
+      return s__('PackageType|Composer');
 
     default:
       return null;

changelogs/unreleased/222469-view-your-composer-dependencies-in-the-package-registry-ui.yml

+---
+title: Add composer tab and package type to package list
+merge_request: 37928
+author:
+type: changed

locale/gitlab.pot

@@ -16753,6 +16753,9 @@ msgstr ""
 msgid "PackageRegistry|Add NuGet Source"
 msgstr ""
 
+msgid "PackageRegistry|Composer"
+msgstr ""
+
 msgid "PackageRegistry|Conan"
 msgstr ""
 
@@ -16930,6 +16933,9 @@ msgstr ""
 msgid "PackageRegistry|yarn"
 msgstr ""
 
+msgid "PackageType|Composer"
+msgstr ""
+
 msgid "PackageType|Conan"
 msgstr ""
 

spec/frontend/packages/list/components/__snapshots__/packages_list_app_spec.js.snap

@@ -73,6 +73,67 @@ exports[`packages_list_app renders 1`] = `
         </div>
       </template>
     </b-tab-stub>
+    <b-tab-stub
+      tag="div"
+      title="Composer"
+      titlelinkclass="gl-tab-nav-item"
+    >
+      <template>
+        <div>
+          <section
+            class="row empty-state text-center"
+          >
+            <div
+              class="col-12"
+            >
+              <div
+                class="svg-250 svg-content"
+              >
+                <img
+                  alt="There are no Composer packages yet"
+                  class="gl-max-w-full"
+                  src="helpSvg"
+                />
+              </div>
+            </div>
+             
+            <div
+              class="col-12"
+            >
+              <div
+                class="text-content gl-mx-auto gl-my-0 gl-p-5"
+              >
+                <h1
+                  class="h4"
+                >
+                  There are no Composer packages yet
+                </h1>
+                 
+                <p>
+                  Learn how to 
+                  <b-link-stub
+                    class="gl-link"
+                    event="click"
+                    href="helpUrl"
+                    routertag="a"
+                    target="_blank"
+                  >
+                    publish and share your packages
+                  </b-link-stub>
+                   with GitLab.
+                </p>
+                 
+                <div>
+                  <!---->
+                   
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </template>
+    </b-tab-stub>
     <b-tab-stub
       tag="div"
       title="Conan"

spec/frontend/packages/list/components/packages_list_app_spec.js

@@ -54,7 +54,6 @@ describe('packages_list_app', () => {
 
   beforeEach(() => {
     createStore();
-    mountComponent();
   });
 
   afterEach(() => {
@@ -68,6 +67,8 @@ describe('packages_list_app', () => {
 
   describe('empty state', () => {
     it('generate the correct empty list link', () => {
+      mountComponent();
+
       const link = findListComponent().find(GlLink);
 
       expect(link.attributes('href')).toBe(emptyListHelpUrl);
@@ -75,6 +76,8 @@ describe('packages_list_app', () => {
     });
 
     it('includes the right content on the default tab', () => {
+      mountComponent();
+
       const heading = findEmptyState().find('h1');
 
       expect(heading.text()).toBe('There are no packages yet');
@@ -82,31 +85,47 @@ describe('packages_list_app', () => {
   });
 
   it('call requestPackagesList on page:changed', () => {
+    mountComponent();
+
     const list = findListComponent();
     list.vm.$emit('page:changed', 1);
     expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 });
   });
 
   it('call requestDeletePackage on package:delete', () => {
+    mountComponent();
+
     const list = findListComponent();
     list.vm.$emit('package:delete', 'foo');
     expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo');
   });
 
   it('calls requestPackagesList on sort:changed', () => {
+    mountComponent();
+
     const list = findListComponent();
     list.vm.$emit('sort:changed');
     expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
   });
 
+  it('does not call requestPackagesList two times on render', () => {
+    mountComponent();
+
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+  });
+
   describe('tab change', () => {
     it('calls requestPackagesList when all tab is clicked', () => {
+      mountComponent();
+
       findTabComponent().trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');
     });
 
     it('calls requestPackagesList when a package type tab is clicked', () => {
+      mountComponent();
+
       findTabComponent(1).trigger('click');
 
       expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList');

spec/frontend/packages/shared/utils_spec.js

@@ -38,6 +38,7 @@ describe('Packages shared utils', () => {
       ${'npm'}      | ${'NPM'}
       ${'nuget'}    | ${'NuGet'}
       ${'pypi'}     | ${'PyPi'}
+      ${'composer'} | ${'Composer'}
       ${'foo'}      | ${null}
     `(`package type`, ({ packageType, expectedResult }) => {
       it(`${packageType} should show as ${expectedResult}`, () => {