diff options
Diffstat (limited to 'app/assets/javascripts/projects')
17 files changed, 476 insertions, 50 deletions
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue index a4a1cb5584d..da14b1e8470 100644 --- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue +++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue @@ -87,6 +87,7 @@ export default { <linked-pipelines-mini-list v-if="hasDownstream" :triggered="downstreamPipelines" + :pipeline-path="pipeline.path" data-testid="commit-box-mini-graph-downstream" /> </div> diff --git a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql index f7e930bb3f2..ee18c70b6fd 100644 --- a/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql +++ b/app/assets/javascripts/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql @@ -1,6 +1,7 @@ query getLinkedPipelines($fullPath: ID!, $iid: ID!) { project(fullPath: $fullPath) { pipeline(iid: $iid) { + path downstream { nodes { id diff --git a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js index 1d4ec4c110b..2505c47147f 100644 --- a/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js +++ b/app/assets/javascripts/projects/commit_box/info/init_commit_pipeline_mini_graph.js @@ -5,7 +5,12 @@ import createDefaultClient from '~/lib/graphql'; Vue.use(VueApollo); const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), + defaultClient: createDefaultClient( + {}, + { + assumeImmutableResults: true, + }, + ), }); export const initCommitPipelineMiniGraph = async (selector = '.js-commit-pipeline-mini-graph') => { diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue index d3cadcd2bd5..ecd2288eb2f 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/pipeline_charts.vue @@ -199,6 +199,16 @@ export default { }, ]; }, + chartOptions() { + return { + ...this.$options.timesChartOptions, + yAxis: { + axisLabel: { + formatter: (value) => value, + }, + }, + }; + }, }, methods: { hideAlert() { @@ -314,7 +324,7 @@ export default { <strong>{{ __('Pipeline durations for the last 30 commits') }}</strong> <gl-column-chart :height="$options.chartContainerHeight" - :option="$options.timesChartOptions" + :option="chartOptions" :bars="timesChartTransformedData" :y-axis-title="__('Minutes')" :x-axis-title="__('Commit')" diff --git a/app/assets/javascripts/projects/pipelines/charts/index.js b/app/assets/javascripts/projects/pipelines/charts/index.js index 5f5ee44c204..f7ea89068a0 100644 --- a/app/assets/javascripts/projects/pipelines/charts/index.js +++ b/app/assets/javascripts/projects/pipelines/charts/index.js @@ -7,7 +7,7 @@ import ProjectPipelinesCharts from './components/app.vue'; Vue.use(VueApollo); const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), + defaultClient: createDefaultClient({}, { assumeImmutableResults: true }), }); const mountPipelineChartsApp = (el) => { diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js index ee02f446795..ebd20583a1c 100644 --- a/app/assets/javascripts/projects/project_new.js +++ b/app/assets/javascripts/projects/project_new.js @@ -71,6 +71,17 @@ const deriveProjectPathFromUrl = ($projectImportUrl) => { } }; +const bindHowToImport = () => { + $('.how_to_import_link').on('click', (e) => { + e.preventDefault(); + $(e.currentTarget).next('.modal').show(); + }); + + $('.modal-header .close').on('click', () => { + $('.modal').hide(); + }); +}; + const bindEvents = () => { const $newProjectForm = $('#new_project'); const $projectImportUrl = $('#project_import_url'); @@ -88,14 +99,7 @@ const bindEvents = () => { return; } - $('.how_to_import_link').on('click', (e) => { - e.preventDefault(); - $(e.currentTarget).next('.modal').show(); - }); - - $('.modal-header .close').on('click', () => { - $('.modal').hide(); - }); + bindHowToImport(); $('.btn_import_gitlab_project').on('click', () => { const importHref = $('a.btn_import_gitlab_project').attr('href'); @@ -174,3 +178,5 @@ export default { onProjectNameChange, onProjectPathChange, }; + +export { bindHowToImport }; diff --git a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue index e4edb950a1e..91d8fca0487 100644 --- a/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue +++ b/app/assets/javascripts/projects/settings/components/shared_runners_toggle.vue @@ -43,6 +43,7 @@ export default { isSharedRunnerEnabled: this.isEnabled, errorMessage: null, successfulValidation: false, + ccAlertDismissed: false, }; }, computed: { @@ -50,7 +51,8 @@ export default { return ( this.isCreditCardValidationRequired && !this.isSharedRunnerEnabled && - !this.successfulValidation + !this.successfulValidation && + !this.ccAlertDismissed ); }, }, @@ -89,6 +91,7 @@ export default { class="gl-pb-5" :custom-message="$options.i18n.REQUIRES_VALIDATION_TEXT" @verifiedCreditCard="creditCardValidated" + @dismiss="ccAlertDismissed = true" /> <gl-toggle diff --git a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue index 34d53e2de0c..fe2d376f1da 100644 --- a/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue +++ b/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue @@ -1,5 +1,13 @@ <script> -import { GlButton, GlFormSelect, GlToggle, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; +import { + GlButton, + GlFormSelect, + GlToggle, + GlLoadingIcon, + GlSprintf, + GlFormInput, + GlLink, +} from '@gitlab/ui'; import { __ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; @@ -14,6 +22,8 @@ export default { GlToggle, GlLoadingIcon, GlSprintf, + GlFormInput, + GlLink, }, props: { isEnabled: { @@ -148,17 +158,37 @@ export default { <span class="sr-only">{{ __('Fetching incoming email') }}</span> </template> - <template v-if="hasProjectKeySupport"> - <label for="service-desk-project-suffix" class="mt-3"> - {{ __('Project name suffix') }} - </label> - <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" /> - <span class="form-text text-muted"> - {{ - __('A string appended to the project path to form the Service Desk email address.') - }} - </span> - </template> + <label for="service-desk-project-suffix" class="mt-3"> + {{ __('Project name suffix') }} + </label> + <gl-form-input + v-if="hasProjectKeySupport" + id="service-desk-project-suffix" + v-model.trim="projectKey" + data-testid="project-suffix" + class="form-control" + /> + <span v-if="hasProjectKeySupport" class="form-text text-muted"> + {{ __('A string appended to the project path to form the Service Desk email address.') }} + </span> + <span v-else class="form-text text-muted"> + <gl-sprintf + :message=" + __( + 'To add a custom suffix, set up a Service Desk email address. %{linkStart}Learn more.%{linkEnd}', + ) + " + > + <template #link="{ content }"> + <gl-link + href="https://docs.gitlab.com/ee/user/project/service_desk.html#using-a-custom-email-address" + target="_blank" + class="gl-text-blue-600 font-size-inherit" + >{{ content }} + </gl-link> + </template> + </gl-sprintf> + </span> <label for="service-desk-template-select" class="mt-3"> {{ __('Template to append to all Service Desk issues') }} diff --git a/app/assets/javascripts/projects/storage_counter/components/app.vue b/app/assets/javascripts/projects/storage_counter/components/app.vue new file mode 100644 index 00000000000..1a911ea3d9b --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/components/app.vue @@ -0,0 +1,106 @@ +<script> +import { GlAlert, GlLink, GlLoadingIcon } from '@gitlab/ui'; +import { sprintf } from '~/locale'; +import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue'; +import { + ERROR_MESSAGE, + LEARN_MORE_LABEL, + USAGE_QUOTAS_LABEL, + TOTAL_USAGE_TITLE, + TOTAL_USAGE_SUBTITLE, + TOTAL_USAGE_DEFAULT_TEXT, + HELP_LINK_ARIA_LABEL, +} from '../constants'; +import getProjectStorageCount from '../queries/project_storage.query.graphql'; +import { parseGetProjectStorageResults } from '../utils'; +import StorageTable from './storage_table.vue'; + +export default { + name: 'StorageCounterApp', + components: { + GlAlert, + GlLink, + GlLoadingIcon, + StorageTable, + UsageGraph, + }, + inject: ['projectPath', 'helpLinks'], + apollo: { + project: { + query: getProjectStorageCount, + variables() { + return { + fullPath: this.projectPath, + }; + }, + update(data) { + return parseGetProjectStorageResults(data, this.helpLinks); + }, + error() { + this.error = ERROR_MESSAGE; + }, + }, + }, + data() { + return { + project: {}, + error: '', + }; + }, + computed: { + totalUsage() { + return this.project?.storage?.totalUsage || TOTAL_USAGE_DEFAULT_TEXT; + }, + storageTypes() { + return this.project?.storage?.storageTypes || []; + }, + }, + methods: { + clearError() { + this.error = ''; + }, + helpLinkAriaLabel(linkTitle) { + return sprintf(HELP_LINK_ARIA_LABEL, { + linkTitle, + }); + }, + }, + LEARN_MORE_LABEL, + USAGE_QUOTAS_LABEL, + TOTAL_USAGE_TITLE, + TOTAL_USAGE_SUBTITLE, +}; +</script> +<template> + <gl-loading-icon v-if="$apollo.queries.project.loading" class="gl-mt-5" size="md" /> + <gl-alert v-else-if="error" variant="danger" @dismiss="clearError"> + {{ error }} + </gl-alert> + <div v-else> + <div class="gl-pt-5 gl-px-3"> + <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center"> + <div> + <p class="gl-m-0 gl-font-lg gl-font-weight-bold">{{ $options.TOTAL_USAGE_TITLE }}</p> + <p class="gl-m-0 gl-text-gray-400"> + {{ $options.TOTAL_USAGE_SUBTITLE }} + <gl-link + :href="helpLinks.usageQuotasHelpPagePath" + target="_blank" + :aria-label="helpLinkAriaLabel($options.USAGE_QUOTAS_LABEL)" + data-testid="usage-quotas-help-link" + > + {{ $options.LEARN_MORE_LABEL }} + </gl-link> + </p> + </div> + <p class="gl-m-0 gl-font-size-h-display gl-font-weight-bold" data-testid="total-usage"> + {{ totalUsage }} + </p> + </div> + </div> + <div v-if="project.statistics" class="gl-w-full"> + <usage-graph :root-storage-statistics="project.statistics" :limit="0" /> + </div> + <storage-table :storage-types="storageTypes" /> + </div> +</template> diff --git a/app/assets/javascripts/projects/storage_counter/components/storage_table.vue b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue new file mode 100644 index 00000000000..7047fd925fb --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/components/storage_table.vue @@ -0,0 +1,78 @@ +<script> +import { GlLink, GlIcon, GlTable, GlSprintf } from '@gitlab/ui'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { thWidthClass } from '~/lib/utils/table_utility'; +import { sprintf } from '~/locale'; +import { PROJECT_TABLE_LABELS, HELP_LINK_ARIA_LABEL } from '../constants'; + +export default { + name: 'StorageTable', + components: { + GlLink, + GlIcon, + GlTable, + GlSprintf, + }, + props: { + storageTypes: { + type: Array, + required: true, + }, + }, + methods: { + helpLinkAriaLabel(linkTitle) { + return sprintf(HELP_LINK_ARIA_LABEL, { + linkTitle, + }); + }, + }, + projectTableFields: [ + { + key: 'storageType', + label: PROJECT_TABLE_LABELS.STORAGE_TYPE, + thClass: thWidthClass(90), + sortable: true, + }, + { + key: 'value', + label: PROJECT_TABLE_LABELS.VALUE, + thClass: thWidthClass(10), + sortable: true, + formatter: (value) => { + return numberToHumanSize(value, 1); + }, + }, + ], +}; +</script> +<template> + <gl-table :items="storageTypes" :fields="$options.projectTableFields"> + <template #cell(storageType)="{ item }"> + <p class="gl-font-weight-bold gl-mb-0" :data-testid="`${item.storageType.id}-name`"> + {{ item.storageType.name }} + <gl-link + v-if="item.storageType.helpPath" + :href="item.storageType.helpPath" + target="_blank" + :aria-label="helpLinkAriaLabel(item.storageType.name)" + :data-testid="`${item.storageType.id}-help-link`" + > + <gl-icon name="question" :size="12" /> + </gl-link> + </p> + <p class="gl-mb-0" :data-testid="`${item.storageType.id}-description`"> + {{ item.storageType.description }} + </p> + <p v-if="item.storageType.warningMessage" class="gl-mb-0 gl-font-sm"> + <gl-icon name="warning" :size="12" /> + <gl-sprintf :message="item.storageType.warningMessage"> + <template #warningLink="{ content }"> + <gl-link :href="item.storageType.warningLink" target="_blank" class="gl-font-sm">{{ + content + }}</gl-link> + </template> + </gl-sprintf> + </p> + </template> + </gl-table> +</template> diff --git a/app/assets/javascripts/projects/storage_counter/constants.js b/app/assets/javascripts/projects/storage_counter/constants.js new file mode 100644 index 00000000000..d9b28abfbe7 --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/constants.js @@ -0,0 +1,61 @@ +import { s__, __ } from '~/locale'; + +export const PROJECT_STORAGE_TYPES = [ + { + id: 'buildArtifactsSize', + name: s__('UsageQuota|Artifacts'), + description: s__('UsageQuota|Pipeline artifacts and job artifacts, created with CI/CD.'), + warningMessage: s__( + 'UsageQuota|There is a known issue with Artifact storage where the total could be incorrect for some projects. More details and progress are available in %{warningLinkStart}the epic%{warningLinkEnd}.', + ), + warningLink: 'https://gitlab.com/groups/gitlab-org/-/epics/5380', + }, + { + id: 'lfsObjectsSize', + name: s__('UsageQuota|LFS Storage'), + description: s__('UsageQuota|Audio samples, videos, datasets, and graphics.'), + }, + { + id: 'packagesSize', + name: s__('UsageQuota|Packages'), + description: s__('UsageQuota|Code packages and container images.'), + }, + { + id: 'repositorySize', + name: s__('UsageQuota|Repository'), + description: s__('UsageQuota|Git repository, managed by the Gitaly service.'), + }, + { + id: 'snippetsSize', + name: s__('UsageQuota|Snippets'), + description: s__('UsageQuota|Shared bits of code and text.'), + }, + { + id: 'uploadsSize', + name: s__('UsageQuota|Uploads'), + description: s__('UsageQuota|File attachments and smaller design graphics.'), + }, + { + id: 'wikiSize', + name: s__('UsageQuota|Wiki'), + description: s__('UsageQuota|Wiki content.'), + }, +]; + +export const PROJECT_TABLE_LABELS = { + STORAGE_TYPE: s__('UsageQuota|Storage type'), + VALUE: s__('UsageQuota|Usage'), +}; + +export const ERROR_MESSAGE = s__( + 'UsageQuota|Something went wrong while fetching project storage statistics', +); + +export const LEARN_MORE_LABEL = s__('Learn more.'); +export const USAGE_QUOTAS_LABEL = s__('UsageQuota|Usage Quotas'); +export const HELP_LINK_ARIA_LABEL = s__('UsageQuota|%{linkTitle} help link'); +export const TOTAL_USAGE_DEFAULT_TEXT = __('N/A'); +export const TOTAL_USAGE_TITLE = s__('UsageQuota|Usage Breakdown'); +export const TOTAL_USAGE_SUBTITLE = s__( + 'UsageQuota|Includes project registry, artifacts, packages, wiki, uploads and other items.', +); diff --git a/app/assets/javascripts/projects/storage_counter/index.js b/app/assets/javascripts/projects/storage_counter/index.js new file mode 100644 index 00000000000..10668f08402 --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/index.js @@ -0,0 +1,51 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; +import StorageCounterApp from './components/app.vue'; + +Vue.use(VueApollo); + +export default (containerId = 'js-project-storage-count-app') => { + const el = document.getElementById(containerId); + + if (!el) { + return false; + } + + const { + projectPath, + usageQuotasHelpPagePath, + buildArtifactsHelpPagePath, + lfsObjectsHelpPagePath, + packagesHelpPagePath, + repositoryHelpPagePath, + snippetsHelpPagePath, + uploadsHelpPagePath, + wikiHelpPagePath, + } = el.dataset; + + const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient({}, { assumeImmutableResults: true }), + }); + + return new Vue({ + el, + apolloProvider, + provide: { + projectPath, + helpLinks: { + usageQuotasHelpPagePath, + buildArtifactsHelpPagePath, + lfsObjectsHelpPagePath, + packagesHelpPagePath, + repositoryHelpPagePath, + snippetsHelpPagePath, + uploadsHelpPagePath, + wikiHelpPagePath, + }, + }, + render(createElement) { + return createElement(StorageCounterApp); + }, + }); +}; diff --git a/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql b/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql new file mode 100644 index 00000000000..a4f2c529522 --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/queries/project_storage.query.graphql @@ -0,0 +1,16 @@ +query getProjectStorageCount($fullPath: ID!) { + project(fullPath: $fullPath) { + id + statistics { + buildArtifactsSize + pipelineArtifactsSize + lfsObjectsSize + packagesSize + repositorySize + snippetsSize + storageSize + uploadsSize + wikiSize + } + } +} diff --git a/app/assets/javascripts/projects/storage_counter/utils.js b/app/assets/javascripts/projects/storage_counter/utils.js new file mode 100644 index 00000000000..cb26603fff5 --- /dev/null +++ b/app/assets/javascripts/projects/storage_counter/utils.js @@ -0,0 +1,40 @@ +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { PROJECT_STORAGE_TYPES } from './constants'; + +/** + * This method parses the results from `getProjectStorageCount` call. + * + * @param {Object} data graphql result + * @returns {Object} + */ +export const parseGetProjectStorageResults = (data, helpLinks) => { + const projectStatistics = data?.project?.statistics; + if (!projectStatistics) { + return {}; + } + const { storageSize, ...storageStatistics } = projectStatistics; + const storageTypes = PROJECT_STORAGE_TYPES.reduce((types, currentType) => { + if (!storageStatistics[currentType.id]) { + return types; + } + + const helpPathKey = currentType.id.replace(`Size`, `HelpPagePath`); + const helpPath = helpLinks[helpPathKey]; + + return types.concat({ + storageType: { + ...currentType, + helpPath, + }, + value: storageStatistics[currentType.id], + }); + }, []); + + return { + storage: { + totalUsage: numberToHumanSize(storageSize, 1), + storageTypes, + }, + statistics: projectStatistics, + }; +}; diff --git a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue index 02e31d6fbb3..668cc10c454 100644 --- a/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue +++ b/app/assets/javascripts/projects/terraform_notification/components/terraform_notification.vue @@ -1,8 +1,12 @@ <script> import { GlBanner } from '@gitlab/ui'; import { helpPagePath } from '~/helpers/help_page_helper'; -import { setCookie } from '~/lib/utils/common_utils'; import { s__ } from '~/locale'; +import Tracking from '~/tracking'; +import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue'; +import { EVENT_LABEL, DISMISS_EVENT, CLICK_EVENT } from '../constants'; + +const trackingMixin = Tracking.mixin({ label: EVENT_LABEL }); export default { name: 'TerraformNotification', @@ -15,37 +19,42 @@ export default { }, components: { GlBanner, + UserCalloutDismisser, }, - inject: ['terraformImagePath', 'bannerDismissedKey'], - data() { - return { - isVisible: true, - }; - }, + mixins: [trackingMixin], + inject: ['terraformImagePath'], computed: { docsUrl() { - return helpPagePath('user/infrastructure/terraform_state'); + return helpPagePath('user/infrastructure/iac/terraform_state.md'); }, }, methods: { handleClose() { - setCookie(this.bannerDismissedKey, true); - this.isVisible = false; + this.track(DISMISS_EVENT); + this.$refs.calloutDismisser.dismiss(); + }, + buttonClick() { + this.track(CLICK_EVENT); }, }, }; </script> <template> - <div v-if="isVisible" class="gl-py-5"> - <gl-banner - :title="$options.i18n.title" - :button-text="$options.i18n.buttonText" - :button-link="docsUrl" - :svg-path="terraformImagePath" - variant="promotion" - @close="handleClose" - > - <p>{{ $options.i18n.description }}</p> - </gl-banner> - </div> + <user-callout-dismisser ref="calloutDismisser" feature-name="terraform_notification_dismissed"> + <template #default="{ shouldShowCallout }"> + <div v-if="shouldShowCallout" class="gl-py-5"> + <gl-banner + :title="$options.i18n.title" + :button-text="$options.i18n.buttonText" + :button-link="docsUrl" + :svg-path="terraformImagePath" + variant="promotion" + @primary="buttonClick" + @close="handleClose" + > + <p>{{ $options.i18n.description }}</p> + </gl-banner> + </div> + </template> + </user-callout-dismisser> </template> diff --git a/app/assets/javascripts/projects/terraform_notification/constants.js b/app/assets/javascripts/projects/terraform_notification/constants.js new file mode 100644 index 00000000000..029f40b2ab2 --- /dev/null +++ b/app/assets/javascripts/projects/terraform_notification/constants.js @@ -0,0 +1,3 @@ +export const EVENT_LABEL = 'terraform_banner'; +export const DISMISS_EVENT = 'dismiss_banner'; +export const CLICK_EVENT = 'click_button'; diff --git a/app/assets/javascripts/projects/terraform_notification/index.js b/app/assets/javascripts/projects/terraform_notification/index.js index 0a273247930..362e71ed902 100644 --- a/app/assets/javascripts/projects/terraform_notification/index.js +++ b/app/assets/javascripts/projects/terraform_notification/index.js @@ -1,12 +1,18 @@ import Vue from 'vue'; -import { parseBoolean, getCookie } from '~/lib/utils/common_utils'; +import VueApollo from 'vue-apollo'; +import createDefaultClient from '~/lib/graphql'; import TerraformNotification from './components/terraform_notification.vue'; +Vue.use(VueApollo); + +const apolloProvider = new VueApollo({ + defaultClient: createDefaultClient(), +}); + export default () => { const el = document.querySelector('.js-terraform-notification'); - const bannerDismissedKey = 'terraform_notification_dismissed'; - if (!el || parseBoolean(getCookie(bannerDismissedKey))) { + if (!el) { return false; } @@ -14,9 +20,9 @@ export default () => { return new Vue({ el, + apolloProvider, provide: { terraformImagePath, - bannerDismissedKey, }, render: (createElement) => createElement(TerraformNotification), }); |