Merge branch...

Merge branch '198524-add-frequently-requested-coming-soon-package-manager-formats-to-the-package-registry-ui' into 'master'

Add coming soon tab to Package Registry list

See merge request gitlab-org/gitlab!29491

ee/app/assets/javascripts/packages/list/coming_soon/helpers.js

+/**
+ * Context:
+ *   https://gitlab.com/gitlab-org/gitlab/-/issues/198524
+ *   https://gitlab.com/gitlab-org/gitlab/-/merge_requests/29491
+ *
+ */
+
+/**
+ * Constants
+ *
+ * LABEL_NAMES - an array of labels to filter issues in the GraphQL query
+ * WORKFLOW_PREFIX - the prefix for workflow labels
+ * ACCEPTING_CONTRIBUTIONS_TITLE - the accepting contributions label
+ */
+export const LABEL_NAMES = ['Package::Coming soon'];
+const WORKFLOW_PREFIX = 'workflow::';
+const ACCEPTING_CONTRIBUTIONS_TITLE = 'accepting merge requests';
+
+const setScoped = (label, scoped) => (label ? { ...label, scoped } : label);
+
+/**
+ * Finds workflow:: scoped labels and returns the first or null.
+ * @param {Object[]} labels Labels from the issue
+ */
+export const findWorkflowLabel = (labels = []) =>
+  labels.find(l => l.title.toLowerCase().includes(WORKFLOW_PREFIX.toLowerCase()));
+
+/**
+ * Determines if an issue is accepting community contributions by checking if
+ * the "Accepting merge requests" label is present.
+ * @param {Object[]} labels
+ */
+export const findAcceptingContributionsLabel = (labels = []) =>
+  labels.find(l => l.title.toLowerCase() === ACCEPTING_CONTRIBUTIONS_TITLE.toLowerCase());
+
+/**
+ * Formats the GraphQL response into the format that the view template expects.
+ * @param {Object} data GraphQL response
+ */
+export const toViewModel = data => {
+  // This just flatterns the issues -> nodes and labels -> nodes hierarchy
+  // into an array of objects.
+  const issues = (data.project?.issues?.nodes || []).map(i => ({
+    ...i,
+    labels: (i.labels?.nodes || []).map(node => node),
+  }));
+
+  return issues.map(x => ({
+    ...x,
+    labels: [
+      setScoped(findWorkflowLabel(x.labels), true),
+      setScoped(findAcceptingContributionsLabel(x.labels), false),
+    ].filter(Boolean),
+  }));
+};

ee/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue

+<script>
+import {
+  GlAlert,
+  GlEmptyState,
+  GlIcon,
+  GlLabel,
+  GlLink,
+  GlSkeletonLoader,
+  GlSprintf,
+} from '@gitlab/ui';
+import Tracking from '~/tracking';
+import { TrackingActions } from '../../shared/constants';
+import { s__ } from '~/locale';
+import { ApolloQuery } from 'vue-apollo';
+import comingSoonIssuesQuery from './queries/issues.graphql';
+import { toViewModel, LABEL_NAMES } from './helpers';
+
+export default {
+  name: 'ComingSoon',
+  components: {
+    GlAlert,
+    GlEmptyState,
+    GlIcon,
+    GlLabel,
+    GlLink,
+    GlSkeletonLoader,
+    GlSprintf,
+    ApolloQuery,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    illustration: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    suggestedContributionsPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    variables() {
+      return {
+        projectPath: this.projectPath,
+        labelNames: LABEL_NAMES,
+      };
+    },
+  },
+  mounted() {
+    this.track(TrackingActions.COMING_SOON_REQUESTED);
+  },
+  methods: {
+    onIssueLinkClick(issueIid, label) {
+      this.track(TrackingActions.COMING_SOON_LIST, {
+        label,
+        value: issueIid,
+      });
+    },
+    onDocsLinkClick() {
+      this.track(TrackingActions.COMING_SOON_HELP);
+    },
+  },
+  loadingRows: 5,
+  i18n: {
+    alertTitle: s__('PackageRegistry|Upcoming package managers'),
+    alertIntro: s__(
+      "PackageRegistry|Is your favorite package manager missing? We'd love your help in building first-class support for it into GitLab! %{contributionLinkStart}Visit the contribution documentation%{contributionLinkEnd} to learn more about how to build support for new package managers into GitLab. Below is a list of package managers that are on our radar.",
+    ),
+    emptyStateTitle: s__('PackageRegistry|No upcoming issues'),
+    emptyStateDescription: s__('PackageRegistry|There are no upcoming issues to display.'),
+  },
+  comingSoonIssuesQuery,
+  toViewModel,
+};
+</script>
+
+<template>
+  <apollo-query
+    :query="$options.comingSoonIssuesQuery"
+    :variables="variables"
+    :update="$options.toViewModel"
+  >
+    <template #default="{ result: { data }, isLoading }">
+      <div>
+        <gl-alert :title="$options.i18n.alertTitle" :dismissible="false" variant="tip">
+          <gl-sprintf :message="$options.i18n.alertIntro">
+            <template #contributionLink="{ content }">
+              <gl-link
+                :href="suggestedContributionsPath"
+                target="_blank"
+                @click="onDocsLinkClick"
+                >{{ content }}</gl-link
+              >
+            </template>
+          </gl-sprintf>
+        </gl-alert>
+      </div>
+
+      <div v-if="isLoading" class="gl-display-flex gl-flex-direction-column">
+        <gl-skeleton-loader
+          v-for="index in $options.loadingRows"
+          :key="index"
+          :width="1000"
+          :height="80"
+          preserve-aspect-ratio="xMinYMax meet"
+        >
+          <rect width="700" height="10" x="0" y="16" rx="4" />
+          <rect width="60" height="10" x="0" y="45" rx="4" />
+          <rect width="60" height="10" x="70" y="45" rx="4" />
+        </gl-skeleton-loader>
+      </div>
+
+      <template v-else-if="data && data.length">
+        <div
+          v-for="issue in data"
+          :key="issue.iid"
+          data-testid="issue-row"
+          class="gl-responsive-table-row"
+        >
+          <div
+            class="table-section section-100 align-items-md-center gl-flex-wrap gl-white-space-normal"
+          >
+            <gl-link
+              data-testid="issue-title-link"
+              :href="issue.webUrl"
+              class="gl-text-gray-900 gl-font-weight-bold"
+              @click="onIssueLinkClick(issue.iid, issue.title)"
+            >
+              {{ issue.title }}
+            </gl-link>
+
+            <div class="gl-display-flex gl-text-gray-600 gl-mt-5">
+              <gl-icon name="issues" class="gl-mr-2" />
+              <gl-link
+                data-testid="issue-id-link"
+                :href="issue.webUrl"
+                class="gl-text-gray-600 gl-mr-5"
+                @click="onIssueLinkClick(issue.iid, issue.title)"
+                >#{{ issue.iid }}</gl-link
+              >
+
+              <div v-if="issue.milestone" class="gl-display-flex gl-align-items-center gl-mr-5">
+                <gl-icon name="clock" class="gl-mr-2" />
+                <span data-testid="milestone">{{ issue.milestone.title }}</span>
+              </div>
+
+              <gl-label
+                v-for="label in issue.labels"
+                :key="label.title"
+                class="gl-mr-3"
+                size="sm"
+                :background-color="label.color"
+                :title="label.title"
+                :scoped="Boolean(label.scoped)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <gl-empty-state v-else :title="$options.i18n.emptyStateTitle" :svg-path="illustration">
+        <template #description>
+          <p>{{ $options.i18n.emptyStateDescription }}</p>
+        </template>
+      </gl-empty-state>
+    </template>
+  </apollo-query>
+</template>

ee/app/assets/javascripts/packages/list/coming_soon/queries/issues.graphql

+query getComingSoonIssues($projectPath:ID!, $labelNames:[String]) {
+  project(fullPath:$projectPath) {
+    issues(state:opened, labelName:$labelNames) {
+      nodes {
+        iid,
+        title,
+        webUrl,
+        labels {
+          nodes {
+            title,
+            color
+          }
+        },
+        milestone {
+          title
+        }
+      }
+    }
+  }
+}

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

@@ -6,6 +6,7 @@ import PackageFilter from './packages_filter.vue';
 import PackageList from './packages_list.vue';
 import PackageSort from './packages_sort.vue';
 import { PACKAGE_REGISTRY_TABS } from '../constants';
+import PackagesComingSoon from '../coming_soon/packages_coming_soon.vue';
 
 export default {
   components: {
@@ -15,11 +16,13 @@ export default {
     PackageFilter,
     PackageList,
     PackageSort,
+    PackagesComingSoon,
   },
   computed: {
     ...mapState({
       emptyListIllustration: state => state.config.emptyListIllustration,
       emptyListHelpUrl: state => state.config.emptyListHelpUrl,
+      comingSoon: state => state.config.comingSoon,
       filterQuery: state => state.filterQuery,
     }),
     emptyListText() {
@@ -56,8 +59,10 @@ export default {
     tabChanged(e) {
       const selectedType = PACKAGE_REGISTRY_TABS[e];
 
+      if (selectedType) {
         this.setSelectedType(selectedType);
         this.requestPackagesList();
+      }
     },
     emptyStateTitle({ title, type }) {
       if (this.filterQuery) {
@@ -96,5 +101,13 @@ export default {
         </template>
       </package-list>
     </gl-tab>
+
+    <gl-tab v-if="comingSoon" :title="__('Coming soon')" lazy>
+      <packages-coming-soon
+        :illustration="emptyListIllustration"
+        :project-path="comingSoon.projectPath"
+        :suggested-contributions-path="comingSoon.suggestedContributions"
+      />
+    </gl-tab>
   </gl-tabs>
 </template>

ee/app/assets/javascripts/packages/list/packages_list_app_bundle.js

@@ -2,7 +2,10 @@ import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { createStore } from './stores';
 import PackagesListApp from './components/packages_list_app.vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 
+Vue.use(VueApollo);
 Vue.use(Translate);
 
 export default () => {
@@ -10,9 +13,14 @@ export default () => {
   const store = createStore();
   store.dispatch('setInitialState', el.dataset);
 
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(),
+  });
+
   return new Vue({
     el,
     store,
+    apolloProvider,
     components: {
       PackagesListApp,
     },

ee/app/assets/javascripts/packages/list/stores/mutations.js

 import * as types from './mutation_types';
-import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import {
+  parseIntPagination,
+  normalizeHeaders,
+  convertObjectPropsToCamelCase,
+} from '~/lib/utils/common_utils';
 import { GROUP_PAGE_TYPE } from '../constants';
 
 export default {
   [types.SET_INITIAL_STATE](state, config) {
+    const { comingSoonJson, ...rest } = config;
+    const comingSoonObj = JSON.parse(comingSoonJson);
+
     state.config = {
-      ...config,
+      ...rest,
+      comingSoon: comingSoonObj && convertObjectPropsToCamelCase(comingSoonObj),
       isGroupPage: config.pageType === GROUP_PAGE_TYPE,
     };
   },

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

@@ -9,7 +9,8 @@ export default () => ({
    *  resourceId: String,
    *  pageType: String,
    *  emptyListIllustration: String,
-   *  emptyListHelpUrl: String
+   *  emptyListHelpUrl: String,
+   *  comingSoon: { projectPath: String, suggestedContributions : String } | null;
    * }
    */
   config: {},

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

@@ -11,6 +11,9 @@ export const TrackingActions = {
   REQUEST_DELETE_PACKAGE: 'request_delete_package',
   CANCEL_DELETE_PACKAGE: 'cancel_delete_package',
   PULL_PACKAGE: 'pull_package',
+  COMING_SOON_REQUESTED: 'activate_coming_soon_requested',
+  COMING_SOON_LIST: 'click_coming_soon_issue_link',
+  COMING_SOON_HELP: 'click_coming_soon_documentation_link',
 };
 
 export const TrackingCategories = {

ee/app/helpers/ee/packages_helper.rb

@@ -30,5 +30,28 @@ module EE
       full_url = expose_url(api_v4_projects_packages_pypi_simple_package_name_path({ id: project_id, package_name: '' }, true))
       full_url.sub!('://', '://__token__:<your_personal_token>@')
     end
+
+    def packages_coming_soon_enabled?(resource)
+      ::Feature.enabled?(:packages_coming_soon, resource) && ::Gitlab.dev_env_or_com?
+    end
+
+    def packages_coming_soon_data(resource)
+      return unless packages_coming_soon_enabled?(resource)
+
+      {
+        project_path: ::Gitlab.com? ? 'gitlab-org/gitlab' : 'gitlab-org/gitlab-test',
+        suggested_contributions: help_page_path('user/packages/index', anchor: 'suggested-contributions')
+      }
+    end
+
+    def packages_list_data(type, resource)
+      {
+        resource_id: resource.id,
+        page_type: type,
+        empty_list_help_url: help_page_path('administration/packages/index'),
+        empty_list_illustration: image_path('illustrations/no-packages.svg'),
+        coming_soon_json: packages_coming_soon_data(resource).to_json
+      }
+    end
   end
 end

ee/app/views/groups/packages/index.html.haml

@@ -2,7 +2,4 @@
 
 .row
   .col-12
-    #js-vue-packages-list{ data: { resource_id: @group.id,
-      page_type: 'groups',
-      empty_list_help_url: help_page_path('administration/packages/index'),
-      empty_list_illustration: image_path('illustrations/no-packages.svg') } }
+    #js-vue-packages-list{ data: packages_list_data('groups', @group) }

ee/app/views/projects/packages/packages/index.html.haml

@@ -2,7 +2,4 @@
 
 .row
   .col-12
-    #js-vue-packages-list{ data: { resource_id: @project.id,
-      page_type: 'projects',
-      empty_list_help_url: help_page_path('administration/packages/index'),
-      empty_list_illustration: image_path('illustrations/no-packages.svg') } }
+    #js-vue-packages-list{ data: packages_list_data('projects', @project) }

ee/spec/frontend/packages/list/coming_soon/helpers_spec.js

+import * as comingSoon from 'ee/packages/list/coming_soon/helpers';
+import { fakeIssues, asGraphQLResponse, asViewModel } from './mock_data';
+
+jest.mock('ee/api.js');
+
+describe('Coming Soon Helpers', () => {
+  const [noLabels, acceptingMergeRequestLabel, workflowLabel] = fakeIssues;
+
+  describe('toViewModel', () => {
+    it('formats a GraphQL response correctly', () => {
+      expect(comingSoon.toViewModel(asGraphQLResponse)).toEqual(asViewModel);
+    });
+  });
+
+  describe('findWorkflowLabel', () => {
+    it('finds a workflow label', () => {
+      expect(comingSoon.findWorkflowLabel(workflowLabel.labels)).toEqual(workflowLabel.labels[0]);
+    });
+
+    it("returns undefined when there isn't one", () => {
+      expect(comingSoon.findWorkflowLabel(noLabels.labels)).toBeUndefined();
+    });
+  });
+
+  describe('findAcceptingContributionsLabel', () => {
+    it('finds the correct label when it exists', () => {
+      expect(comingSoon.findAcceptingContributionsLabel(acceptingMergeRequestLabel.labels)).toEqual(
+        acceptingMergeRequestLabel.labels[0],
+      );
+    });
+
+    it("returns undefined when there isn't one", () => {
+      expect(comingSoon.findAcceptingContributionsLabel(noLabels.labels)).toBeUndefined();
+    });
+  });
+});

ee/spec/frontend/packages/list/coming_soon/mock_data.js

+export const fakeIssues = [
+  {
+    id: 1,
+    iid: 1,
+    title: 'issue one',
+    webUrl: 'foo',
+  },
+  {
+    id: 2,
+    iid: 2,
+    title: 'issue two',
+    labels: [{ title: 'Accepting merge requests', color: '#69d100' }],
+    milestone: {
+      title: '12.10',
+    },
+    webUrl: 'foo',
+  },
+  {
+    id: 3,
+    iid: 3,
+    title: 'issue three',
+    labels: [{ title: 'workflow::In dev', color: '#428bca' }],
+    webUrl: 'foo',
+  },
+  {
+    id: 4,
+    iid: 4,
+    title: 'issue four',
+    labels: [
+      { title: 'Accepting merge requests', color: '#69d100' },
+      { title: 'workflow::In dev', color: '#428bca' },
+    ],
+    webUrl: 'foo',
+  },
+];
+
+export const asGraphQLResponse = {
+  project: {
+    issues: {
+      nodes: fakeIssues.map(x => ({
+        ...x,
+        labels: {
+          nodes: x.labels,
+        },
+      })),
+    },
+  },
+};
+
+export const asViewModel = [
+  {
+    ...fakeIssues[0],
+    labels: [],
+  },
+  {
+    ...fakeIssues[1],
+    labels: [
+      {
+        title: 'Accepting merge requests',
+        color: '#69d100',
+        scoped: false,
+      },
+    ],
+  },
+  {
+    ...fakeIssues[2],
+    labels: [
+      {
+        title: 'workflow::In dev',
+        color: '#428bca',
+        scoped: true,
+      },
+    ],
+  },
+  {
+    ...fakeIssues[3],
+    labels: [
+      {
+        title: 'workflow::In dev',
+        color: '#428bca',
+        scoped: true,
+      },
+      {
+        title: 'Accepting merge requests',
+        color: '#69d100',
+        scoped: false,
+      },
+    ],
+  },
+];

ee/spec/frontend/packages/list/coming_soon/packages_coming_soon_spec.js

+import { GlEmptyState, GlSkeletonLoader, GlLabel } from '@gitlab/ui';
+import { mount, createLocalVue } from '@vue/test-utils';
+import ComingSoon from 'ee/packages/list/coming_soon/packages_coming_soon.vue';
+import { TrackingActions } from 'ee/packages/shared/constants';
+import { asViewModel } from './mock_data';
+import Tracking from '~/tracking';
+import VueApollo, { ApolloQuery } from 'vue-apollo';
+
+jest.mock('ee/packages/list/coming_soon/helpers.js');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('packages_coming_soon', () => {
+  let wrapper;
+
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
+  const findAllIssues = () => wrapper.findAll('[data-testid="issue-row"]');
+  const findIssuesData = () =>
+    findAllIssues().wrappers.map(x => {
+      const titleLink = x.find('[data-testid="issue-title-link"]');
+      const milestone = x.find('[data-testid="milestone"]');
+      const issueIdLink = x.find('[data-testid="issue-id-link"]');
+      const labels = x.findAll(GlLabel);
+
+      const issueId = Number(issueIdLink.text().substr(1));
+
+      return {
+        id: issueId,
+        iid: issueId,
+        title: titleLink.text(),
+        webUrl: titleLink.attributes('href'),
+        labels: labels.wrappers.map(label => ({
+          color: label.props('backgroundColor'),
+          title: label.props('title'),
+          scoped: label.props('scoped'),
+        })),
+        ...(milestone.exists() ? { milestone: { title: milestone.text() } } : {}),
+      };
+    });
+  const findIssueTitleLink = () => wrapper.find('[data-testid="issue-title-link"]');
+  const findIssueIdLink = () => wrapper.find('[data-testid="issue-id-link"]');
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+
+  const mountComponent = (testParams = {}) => {
+    const $apolloData = {
+      loading: testParams.isLoading || false,
+    };
+
+    wrapper = mount(ComingSoon, {
+      localVue,
+      propsData: {
+        illustration: 'foo',
+        projectPath: 'foo',
+        suggestedContributionsPath: 'foo',
+      },
+      stubs: {
+        ApolloQuery,
+      },
+      mocks: {
+        $apolloData,
+      },
+    });
+
+    // Mock the GraphQL query result
+    wrapper.find(ApolloQuery).setData({
+      result: {
+        data: testParams.issues || asViewModel,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => mountComponent({ isLoading: true }));
+
+    it('renders the skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are no issues', () => {
+    beforeEach(() => mountComponent({ issues: [] }));
+
+    it('renders the empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are issues', () => {
+    beforeEach(() => mountComponent());
+
+    it('renders each issue', () => {
+      expect(findIssuesData()).toEqual(asViewModel);
+    });
+  });
+
+  describe('tracking', () => {
+    const firstIssue = asViewModel[0];
+    let eventSpy;
+
+    beforeEach(() => {
+      eventSpy = jest.spyOn(Tracking, 'event');
+      mountComponent();
+    });
+
+    it('tracks when mounted', () => {
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_REQUESTED, {});
+    });
+
+    it('tracks when an issue title link is clicked', () => {
+      eventSpy.mockClear();
+
+      findIssueTitleLink().trigger('click');
+
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
+        label: firstIssue.title,
+        value: firstIssue.iid,
+      });
+    });
+
+    it('tracks when an issue id link is clicked', () => {
+      eventSpy.mockClear();
+
+      findIssueIdLink().trigger('click');
+
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
+        label: firstIssue.title,
+        value: firstIssue.iid,
+      });
+    });
+  });
+});

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

@@ -414,6 +414,8 @@ exports[`packages_list_app renders 1`] = `
         </div>
       </template>
     </b-tab-stub>
+     
+    <!---->
   </template>
   <template>
     <div

ee/spec/frontend/packages/list/stores/mutations_spec.js

@@ -18,6 +18,7 @@ describe('Mutations Registry Store', () => {
         userCanDelete: '',
         emptyListIllustration: 'foo',
         emptyListHelpUrl: 'baz',
+        comingSoonJson: '{ "project_path": "gitlab-org/gitlab-test" }',
       };
 
       const expectedState = {

ee/spec/helpers/ee/packages_helper_spec.rb

@@ -4,6 +4,7 @@ require 'spec_helper'
 
 describe EE::PackagesHelper do
   let_it_be(:base_url) { "#{Gitlab.config.gitlab.url}/api/v4/" }
+  let_it_be(:project) { create(:project) }
 
   describe 'package_registry_instance_url' do
     it 'returns conant instance url when registry_type is conant' do
@@ -42,4 +43,38 @@ describe EE::PackagesHelper do
       expect(url).to eq("#{base_url_with_token}projects/1/packages/pypi/simple")
     end
   end
+
+  describe 'packages_coming_soon_enabled?' do
+    it 'returns false when the feature flag is disabled' do
+      stub_feature_flags(packages_coming_soon: false)
+
+      expect(helper.packages_coming_soon_enabled?(project)).to eq(false)
+    end
+
+    it 'returns false when not on dev or gitlab.com' do
+      expect(helper.packages_coming_soon_enabled?(project)).to eq(false)
+    end
+  end
+
+  describe 'packages_coming_soon_data' do
+    let_it_be(:group) { create(:group) }
+
+    before do
+      allow(Gitlab).to receive(:dev_env_or_com?) { true }
+    end
+
+    it 'returns the gitlab project on gitlab.com' do
+      allow(Gitlab).to receive(:com?) { true }
+
+      expect(helper.packages_coming_soon_data(project)).to include({ project_path: 'gitlab-org/gitlab' })
+    end
+
+    it 'returns the test project when not on gitlab.com' do
+      expect(helper.packages_coming_soon_data(project)).to include({ project_path: 'gitlab-org/gitlab-test' })
+    end
+
+    it 'works correctly with a group' do
+      expect(helper.packages_coming_soon_data(group)).to include({ project_path: 'gitlab-org/gitlab-test' })
+    end
+  end
 end

locale/gitlab.pot

@@ -5375,6 +5375,9 @@ msgstr ""
 msgid "ComboSearch is not defined"
 msgstr ""
 
+msgid "Coming soon"
+msgstr ""
+
 msgid "Command"
 msgstr ""
 
@@ -14866,6 +14869,9 @@ msgstr ""
 msgid "PackageRegistry|Installation"
 msgstr ""
 
+msgid "PackageRegistry|Is your favorite package manager missing? We'd love your help in building first-class support for it into GitLab! %{contributionLinkStart}Visit the contribution documentation%{contributionLinkEnd} to learn more about how to build support for new package managers into GitLab. Below is a list of package managers that are on our radar."
+msgstr ""
+
 msgid "PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab."
 msgstr ""
 
@@ -14884,6 +14890,9 @@ msgstr ""
 msgid "PackageRegistry|NPM"
 msgstr ""
 
+msgid "PackageRegistry|No upcoming issues"
+msgstr ""
+
 msgid "PackageRegistry|NuGet"
 msgstr ""
 
@@ -14917,6 +14926,9 @@ msgstr ""
 msgid "PackageRegistry|There are no packages yet"
 msgstr ""
 
+msgid "PackageRegistry|There are no upcoming issues to display."
+msgstr ""
+
 msgid "PackageRegistry|There was a problem fetching the details for this package."
 msgstr ""
 
@@ -14926,6 +14938,9 @@ msgstr ""
 msgid "PackageRegistry|Unable to load package"
 msgstr ""
 
+msgid "PackageRegistry|Upcoming package managers"
+msgstr ""
+
 msgid "PackageRegistry|You are about to delete <b>%{packageName}</b>, this operation is irreversible, are you sure?"
 msgstr ""