diff options
Diffstat (limited to 'app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue')
| -rw-r--r-- | app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue | 172 |
1 files changed, 172 insertions, 0 deletions
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 new file mode 100644 index 00000000000..766402d3619 --- /dev/null +++ b/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue @@ -0,0 +1,172 @@ +<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> |