diff options
Diffstat (limited to 'app/assets/javascripts/packages/list')
9 files changed, 101 insertions, 318 deletions
diff --git a/app/assets/javascripts/packages/list/coming_soon/helpers.js b/app/assets/javascripts/packages/list/coming_soon/helpers.js deleted file mode 100644 index 5b6a4b3aa87..00000000000 --- a/app/assets/javascripts/packages/list/coming_soon/helpers.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * 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), - })); -}; diff --git a/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue b/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue deleted file mode 100644 index 766402d3619..00000000000 --- a/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue +++ /dev/null @@ -1,172 +0,0 @@ -<script> -import { - GlAlert, - GlEmptyState, - GlIcon, - GlLabel, - GlLink, - GlSkeletonLoader, - GlSprintf, -} from '@gitlab/ui'; -import { ApolloQuery } from 'vue-apollo'; -import Tracking from '~/tracking'; -import { TrackingActions } from '../../shared/constants'; -import { s__ } from '~/locale'; -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 gl-flex-direction-column gl-align-items-baseline" - > - <div class="table-section section-100 gl-white-space-normal text-truncate"> - <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> - - <div class="table-section section-100 gl-white-space-normal mt-md-3"> - <div class="gl-display-flex gl-text-gray-400"> - <gl-icon name="issues" class="gl-mr-2" /> - <gl-link - data-testid="issue-id-link" - :href="issue.webUrl" - class="gl-text-gray-400 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> diff --git a/app/assets/javascripts/packages/list/coming_soon/queries/issues.graphql b/app/assets/javascripts/packages/list/coming_soon/queries/issues.graphql deleted file mode 100644 index 36c27d9ad70..00000000000 --- a/app/assets/javascripts/packages/list/coming_soon/queries/issues.graphql +++ /dev/null @@ -1,20 +0,0 @@ -query getComingSoonIssues($projectPath: ID!, $labelNames: [String]) { - project(fullPath: $projectPath) { - issues(state: opened, labelName: $labelNames) { - nodes { - iid - title - webUrl - labels { - nodes { - title - color - } - } - milestone { - title - } - } - } - } -} diff --git a/app/assets/javascripts/packages/list/components/package_title.vue b/app/assets/javascripts/packages/list/components/package_title.vue new file mode 100644 index 00000000000..f94a98e4ca7 --- /dev/null +++ b/app/assets/javascripts/packages/list/components/package_title.vue @@ -0,0 +1,47 @@ +<script> +import { n__ } from '~/locale'; +import TitleArea from '~/vue_shared/components/registry/title_area.vue'; +import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue'; +import { LIST_INTRO_TEXT, LIST_TITLE_TEXT } from '../constants'; + +export default { + name: 'PackageTitle', + components: { + TitleArea, + MetadataItem, + }, + props: { + packagesCount: { + type: Number, + required: false, + default: null, + }, + packageHelpUrl: { + type: String, + required: true, + }, + }, + computed: { + showPackageCount() { + return Number.isInteger(this.packagesCount); + }, + packageAmountText() { + return n__(`%d Package`, `%d Packages`, this.packagesCount); + }, + infoMessages() { + return [{ text: LIST_INTRO_TEXT, link: this.packageHelpUrl }]; + }, + }, + i18n: { + LIST_TITLE_TEXT, + }, +}; +</script> + +<template> + <title-area :title="$options.i18n.LIST_TITLE_TEXT" :info-messages="infoMessages"> + <template #metadata-amount> + <metadata-item v-if="showPackageCount" icon="package" :text="packageAmountText" /> + </template> + </title-area> +</template> diff --git a/app/assets/javascripts/packages/list/components/packages_list_app.vue b/app/assets/javascripts/packages/list/components/packages_list_app.vue index 6304f723f6a..cbb3bfd35ac 100644 --- a/app/assets/javascripts/packages/list/components/packages_list_app.vue +++ b/app/assets/javascripts/packages/list/components/packages_list_app.vue @@ -3,13 +3,13 @@ import { mapActions, mapState } from 'vuex'; import { GlEmptyState, GlTab, GlTabs, GlLink, GlSprintf } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import createFlash from '~/flash'; +import { historyReplaceState } from '~/lib/utils/common_utils'; +import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; import PackageFilter from './packages_filter.vue'; import PackageList from './packages_list.vue'; import PackageSort from './packages_sort.vue'; import { PACKAGE_REGISTRY_TABS, DELETE_PACKAGE_SUCCESS_MESSAGE } from '../constants'; -import PackagesComingSoon from '../coming_soon/packages_coming_soon.vue'; -import { SHOW_DELETE_SUCCESS_ALERT } from '~/packages/shared/constants'; -import { historyReplaceState } from '~/lib/utils/common_utils'; +import PackageTitle from './package_title.vue'; export default { components: { @@ -21,15 +21,16 @@ export default { PackageFilter, PackageList, PackageSort, - PackagesComingSoon, + PackageTitle, }, computed: { ...mapState({ emptyListIllustration: state => state.config.emptyListIllustration, emptyListHelpUrl: state => state.config.emptyListHelpUrl, - comingSoon: state => state.config.comingSoon, filterQuery: state => state.filterQuery, selectedType: state => state.selectedType, + packageHelpUrl: state => state.config.packageHelpUrl, + packagesCount: state => state.pagination?.total, }), tabsToRender() { return PACKAGE_REGISTRY_TABS; @@ -89,39 +90,35 @@ export default { </script> <template> - <gl-tabs @input="tabChanged"> - <template #tabs-end> - <div - class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end" - > - <package-filter class="mr-1" @filter="requestPackagesList" /> - <package-sort @sort:changed="requestPackagesList" /> - </div> - </template> + <div> + <package-title :package-help-url="packageHelpUrl" :packages-count="packagesCount" /> - <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title"> - <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest"> - <template #empty-state> - <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration"> - <template #description> - <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" /> - <gl-sprintf v-else :message="$options.i18n.noResults"> - <template #noPackagesLink="{content}"> - <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </template> - </gl-empty-state> - </template> - </package-list> - </gl-tab> + <gl-tabs @input="tabChanged"> + <template #tabs-end> + <div + class="gl-display-flex gl-align-self-center gl-py-2 gl-flex-grow-1 gl-justify-content-end" + > + <package-filter class="gl-mr-2" @filter="requestPackagesList" /> + <package-sort @sort:changed="requestPackagesList" /> + </div> + </template> - <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> + <gl-tab v-for="(tab, index) in tabsToRender" :key="index" :title="tab.title"> + <package-list @page:changed="onPageChanged" @package:delete="onPackageDeleteRequest"> + <template #empty-state> + <gl-empty-state :title="emptyStateTitle(tab)" :svg-path="emptyListIllustration"> + <template #description> + <gl-sprintf v-if="filterQuery" :message="$options.i18n.widenFilters" /> + <gl-sprintf v-else :message="$options.i18n.noResults"> + <template #noPackagesLink="{content}"> + <gl-link :href="emptyListHelpUrl" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </template> + </gl-empty-state> + </template> + </package-list> + </gl-tab> + </gl-tabs> + </div> </template> diff --git a/app/assets/javascripts/packages/list/components/packages_sort.vue b/app/assets/javascripts/packages/list/components/packages_sort.vue index fa8f4f39d54..47e51bbdca5 100644 --- a/app/assets/javascripts/packages/list/components/packages_sort.vue +++ b/app/assets/javascripts/packages/list/components/packages_sort.vue @@ -51,7 +51,7 @@ export default { <gl-sorting-item v-for="item in sortableFields" ref="packageListSortItem" - :key="item.key" + :key="item.orderBy" @click="onSortItemClick(item.orderBy)" > {{ item.label }} diff --git a/app/assets/javascripts/packages/list/constants.js b/app/assets/javascripts/packages/list/constants.js index 0ff8c86362d..6a0e92bff2d 100644 --- a/app/assets/javascripts/packages/list/constants.js +++ b/app/assets/javascripts/packages/list/constants.js @@ -15,7 +15,7 @@ export const GROUP_PAGE_TYPE = 'groups'; export const LIST_KEY_NAME = 'name'; export const LIST_KEY_PROJECT = 'project_path'; export const LIST_KEY_VERSION = 'version'; -export const LIST_KEY_PACKAGE_TYPE = 'package_type'; +export const LIST_KEY_PACKAGE_TYPE = 'type'; export const LIST_KEY_CREATED_AT = 'created_at'; export const LIST_KEY_ACTIONS = 'actions'; @@ -23,47 +23,35 @@ export const LIST_LABEL_NAME = __('Name'); export const LIST_LABEL_PROJECT = __('Project'); export const LIST_LABEL_VERSION = __('Version'); export const LIST_LABEL_PACKAGE_TYPE = __('Type'); -export const LIST_LABEL_CREATED_AT = __('Created'); +export const LIST_LABEL_CREATED_AT = __('Published'); export const LIST_LABEL_ACTIONS = ''; -export const LIST_ORDER_BY_PACKAGE_TYPE = 'type'; - export const ASCENDING_ODER = 'asc'; export const DESCENDING_ORDER = 'desc'; // The following is not translated because it is used to build a JavaScript exception error message export const MISSING_DELETE_PATH_ERROR = 'Missing delete_api_path link'; -export const TABLE_HEADER_FIELDS = [ +export const SORT_FIELDS = [ { - key: LIST_KEY_NAME, - label: LIST_LABEL_NAME, orderBy: LIST_KEY_NAME, - class: ['text-left'], + label: LIST_LABEL_NAME, }, { - key: LIST_KEY_PROJECT, - label: LIST_LABEL_PROJECT, orderBy: LIST_KEY_PROJECT, - class: ['text-left'], + label: LIST_LABEL_PROJECT, }, { - key: LIST_KEY_VERSION, - label: LIST_LABEL_VERSION, orderBy: LIST_KEY_VERSION, - class: ['text-center'], + label: LIST_LABEL_VERSION, }, { - key: LIST_KEY_PACKAGE_TYPE, + orderBy: LIST_KEY_PACKAGE_TYPE, label: LIST_LABEL_PACKAGE_TYPE, - orderBy: LIST_ORDER_BY_PACKAGE_TYPE, - class: ['text-center'], }, { - key: LIST_KEY_CREATED_AT, - label: LIST_LABEL_CREATED_AT, orderBy: LIST_KEY_CREATED_AT, - class: ['text-center'], + label: LIST_LABEL_CREATED_AT, }, ]; @@ -94,7 +82,13 @@ export const PACKAGE_REGISTRY_TABS = [ type: PackageType.NUGET, }, { - title: s__('PackageRegistry|PyPi'), + title: s__('PackageRegistry|PyPI'), type: PackageType.PYPI, }, ]; + +export const LIST_TITLE_TEXT = s__('PackageRegistry|Package Registry'); + +export const LIST_INTRO_TEXT = s__( + 'PackageRegistry|Publish and share packages for a variety of common package managers. %{docLinkStart}More information%{docLinkEnd}', +); diff --git a/app/assets/javascripts/packages/list/stores/mutations.js b/app/assets/javascripts/packages/list/stores/mutations.js index a47ba356c0a..2fe7981b3d9 100644 --- a/app/assets/javascripts/packages/list/stores/mutations.js +++ b/app/assets/javascripts/packages/list/stores/mutations.js @@ -1,19 +1,12 @@ import * as types from './mutation_types'; -import { - parseIntPagination, - normalizeHeaders, - convertObjectPropsToCamelCase, -} from '~/lib/utils/common_utils'; +import { parseIntPagination, normalizeHeaders } 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 = { ...rest, - comingSoon: comingSoonObj && convertObjectPropsToCamelCase(comingSoonObj), isGroupPage: config.pageType === GROUP_PAGE_TYPE, }; }, diff --git a/app/assets/javascripts/packages/list/utils.js b/app/assets/javascripts/packages/list/utils.js index 98d78db8706..6a300d7bfe6 100644 --- a/app/assets/javascripts/packages/list/utils.js +++ b/app/assets/javascripts/packages/list/utils.js @@ -1,7 +1,6 @@ -import { LIST_KEY_PROJECT, TABLE_HEADER_FIELDS } from './constants'; +import { LIST_KEY_PROJECT, SORT_FIELDS } from './constants'; -export default isGroupPage => - TABLE_HEADER_FIELDS.filter(f => f.key !== LIST_KEY_PROJECT || isGroupPage); +export default isGroupPage => SORT_FIELDS.filter(f => f.key !== LIST_KEY_PROJECT || isGroupPage); /** * A small util function that works out if the delete action has deleted the |