diff options
Diffstat (limited to 'app/assets/javascripts/artifacts')
6 files changed, 59 insertions, 3 deletions
diff --git a/app/assets/javascripts/artifacts/components/artifact_row.vue b/app/assets/javascripts/artifacts/components/artifact_row.vue index 8c03db2acd1..fffdfce60a7 100644 --- a/app/assets/javascripts/artifacts/components/artifact_row.vue +++ b/app/assets/javascripts/artifacts/components/artifact_row.vue @@ -11,6 +11,7 @@ export default { GlBadge, GlFriendlyWrap, }, + inject: ['canDestroyArtifacts'], props: { artifact: { type: Object, @@ -73,6 +74,7 @@ export default { data-testid="job-artifact-row-download-button" /> <gl-button + v-if="canDestroyArtifacts" category="tertiary" icon="remove" :title="$options.i18n.delete" diff --git a/app/assets/javascripts/artifacts/components/feedback_banner.vue b/app/assets/javascripts/artifacts/components/feedback_banner.vue new file mode 100644 index 00000000000..d2c96b1a201 --- /dev/null +++ b/app/assets/javascripts/artifacts/components/feedback_banner.vue @@ -0,0 +1,41 @@ +<script> +import { GlBanner } from '@gitlab/ui'; +import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue'; +import { + I18N_FEEDBACK_BANNER_TITLE, + I18N_FEEDBACK_BANNER_BODY, + I18N_FEEDBACK_BANNER_BUTTON, + FEEDBACK_URL, +} from '../constants'; + +export default { + components: { + GlBanner, + UserCalloutDismisser, + }, + inject: ['artifactsManagementFeedbackImagePath'], + FEEDBACK_URL, + i18n: { + title: I18N_FEEDBACK_BANNER_TITLE, + body: I18N_FEEDBACK_BANNER_BODY, + button: I18N_FEEDBACK_BANNER_BUTTON, + }, +}; +</script> +<template> + <user-callout-dismisser feature-name="artifacts_management_page_feedback_banner"> + <template #default="{ dismiss, shouldShowCallout }"> + <gl-banner + v-if="shouldShowCallout" + class="gl-mb-6" + :title="$options.i18n.title" + :button-text="$options.i18n.button" + :button-link="$options.FEEDBACK_URL" + :svg-path="artifactsManagementFeedbackImagePath" + @close="dismiss" + > + <p>{{ $options.i18n.body }}</p> + </gl-banner> + </template> + </user-callout-dismisser> +</template> diff --git a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue index 34e443f4e58..5743ff3ec9e 100644 --- a/app/assets/javascripts/artifacts/components/job_artifacts_table.vue +++ b/app/assets/javascripts/artifacts/components/job_artifacts_table.vue @@ -35,6 +35,7 @@ import { INITIAL_LAST_PAGE_SIZE, } from '../constants'; import ArtifactsTableRowDetails from './artifacts_table_row_details.vue'; +import FeedbackBanner from './feedback_banner.vue'; const INITIAL_PAGINATION_STATE = { currentPage: INITIAL_CURRENT_PAGE, @@ -58,8 +59,9 @@ export default { CiIcon, TimeAgo, ArtifactsTableRowDetails, + FeedbackBanner, }, - inject: ['projectPath'], + inject: ['projectPath', 'canDestroyArtifacts'], apollo: { jobArtifacts: { query: getJobArtifactsQuery, @@ -214,6 +216,7 @@ export default { </script> <template> <div> + <feedback-banner /> <gl-table :items="jobArtifacts" :fields="$options.fields" @@ -308,6 +311,7 @@ export default { data-testid="job-artifacts-browse-button" /> <gl-button + v-if="canDestroyArtifacts" icon="remove" :title="$options.i18n.delete" :aria-label="$options.i18n.delete" diff --git a/app/assets/javascripts/artifacts/constants.js b/app/assets/javascripts/artifacts/constants.js index 5fcc4f2b76e..28fd81fa641 100644 --- a/app/assets/javascripts/artifacts/constants.js +++ b/app/assets/javascripts/artifacts/constants.js @@ -43,6 +43,13 @@ export const I18N_MODAL_BODY = s__( export const I18N_MODAL_PRIMARY = s__('Artifacts|Delete artifact'); export const I18N_MODAL_CANCEL = __('Cancel'); +export const I18N_FEEDBACK_BANNER_TITLE = s__('Artifacts|Help us improve this page'); +export const I18N_FEEDBACK_BANNER_BODY = s__( + 'Artifacts|We want you to be able to use this page to easily manage your CI/CD job artifacts. We are working to improve this experience and would appreciate any feedback you have about the improvements we are making.', +); +export const I18N_FEEDBACK_BANNER_BUTTON = s__('Artifacts|Take a quick survey'); +export const FEEDBACK_URL = 'https://gitlab.fra1.qualtrics.com/jfe/form/SV_cI9rAUI20Vo2St8'; + export const INITIAL_CURRENT_PAGE = 1; export const INITIAL_PREVIOUS_PAGE_CURSOR = ''; export const INITIAL_NEXT_PAGE_CURSOR = ''; diff --git a/app/assets/javascripts/artifacts/graphql/queries/get_job_artifacts.query.graphql b/app/assets/javascripts/artifacts/graphql/queries/get_job_artifacts.query.graphql index 9777153999e..89a24d7891e 100644 --- a/app/assets/javascripts/artifacts/graphql/queries/get_job_artifacts.query.graphql +++ b/app/assets/javascripts/artifacts/graphql/queries/get_job_artifacts.query.graphql @@ -10,7 +10,6 @@ query getJobArtifacts( project(fullPath: $projectPath) { id jobs( - withArtifacts: true statuses: [SUCCESS, FAILED] first: $firstPageSize last: $lastPageSize diff --git a/app/assets/javascripts/artifacts/index.js b/app/assets/javascripts/artifacts/index.js index b5146e0f0e9..e0b2ab2bf47 100644 --- a/app/assets/javascripts/artifacts/index.js +++ b/app/assets/javascripts/artifacts/index.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; +import { parseBoolean } from '~/lib/utils/common_utils'; import JobArtifactsTable from './components/job_artifacts_table.vue'; Vue.use(VueApollo); @@ -16,13 +17,15 @@ export const initArtifactsTable = () => { return false; } - const { projectPath } = el.dataset; + const { projectPath, canDestroyArtifacts, artifactsManagementFeedbackImagePath } = el.dataset; return new Vue({ el, apolloProvider, provide: { projectPath, + canDestroyArtifacts: parseBoolean(canDestroyArtifacts), + artifactsManagementFeedbackImagePath, }, render: (createElement) => createElement(JobArtifactsTable), }); |