diff options
Diffstat (limited to 'app/assets/javascripts')
31 files changed, 964 insertions, 52 deletions
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue index ae942b2c1a7..5975cb9669e 100644 --- a/app/assets/javascripts/badges/components/badge_form.vue +++ b/app/assets/javascripts/badges/components/badge_form.vue @@ -160,7 +160,7 @@ export default { @input="debouncedPreview" /> <span - class="help-block" + class="form-text text-muted" v-html="helpText" ></span> </div> @@ -176,7 +176,7 @@ export default { @input="debouncedPreview" /> <span - class="help-block" + class="form-text text-muted" v-html="helpText" ></span> </div> diff --git a/app/assets/javascripts/ide/components/changed_file_icon.vue b/app/assets/javascripts/ide/components/changed_file_icon.vue index 1cec84706fc..a4e06bbbe3c 100644 --- a/app/assets/javascripts/ide/components/changed_file_icon.vue +++ b/app/assets/javascripts/ide/components/changed_file_icon.vue @@ -43,7 +43,7 @@ export default { return `${this.changedIcon}-solid`; }, changedIconClass() { - return `multi-${this.changedIcon} pull-left`; + return `multi-${this.changedIcon} float-left`; }, tooltipTitle() { if (!this.showTooltip) return undefined; diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index 81961fe3c57..705953c86e3 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -144,14 +144,14 @@ export default { <loading-button :loading="submitCommitLoading" :disabled="commitButtonDisabled" - container-class="btn btn-success btn-sm pull-left" + container-class="btn btn-success btn-sm float-left" :label="__('Commit')" @click="commitChanges" /> <button v-if="!discardDraftButtonDisabled" type="button" - class="btn btn-default btn-sm pull-right" + class="btn btn-default btn-sm float-right" @click="discardDraft" > {{ __('Discard draft') }} @@ -159,7 +159,7 @@ export default { <button v-else type="button" - class="btn btn-default btn-sm pull-right" + class="btn btn-default btn-sm float-right" @click="toggleIsSmall" > {{ __('Collapse') }} diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index c3ac18bfb83..1325fc993b2 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -120,7 +120,7 @@ export default { </ul> <p v-else - class="multi-file-commit-list help-block" + class="multi-file-commit-list form-text text-muted" > {{ __('No changes') }} </p> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue index dcd934f76b7..f14fcdc88ed 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue @@ -80,7 +80,7 @@ export default { {{ __('Commit Message') }} <span v-popover="$options.popoverOptions" - class="help-block prepend-left-10" + class="form-text text-muted prepend-left-10" > <icon name="question" diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index d83a90f71e1..dd2800179ff 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -72,21 +72,19 @@ export default { <form slot="body" @submit.prevent="createEntryInStore" - class="form-group row append-bottom-0" + class="form-group row" > - <fieldset class="form-group append-bottom-0"> - <label class="label-light col-form-label col-sm-3 ide-new-modal-label"> - {{ __('Name') }} - </label> - <div class="col-sm-9"> - <input - type="text" - class="form-control" - v-model="entryName" - ref="fieldName" - /> - </div> - </fieldset> + <label class="label-light col-form-label col-sm-3"> + {{ __('Name') }} + </label> + <div class="col-sm-9"> + <input + type="text" + class="form-control" + v-model="entryName" + ref="fieldName" + /> + </div> </form> </deprecated-modal> </template> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index 442697e1c80..f56aeced806 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -169,7 +169,7 @@ export default { :show-tooltip="true" :show-staged-icon="true" :force-modified-icon="true" - class="pull-right" + class="float-right" /> </span> <new-dropdown diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue index 82fec7e936b..8f3c66b0cbe 100644 --- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue +++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue @@ -48,11 +48,10 @@ export default { return `${this.job.runner.description} (#${this.job.runner.id})`; }, retryButtonClass() { - let className = 'js-retry-button pull-right btn btn-retry d-none d-md-block d-lg-block d-xl-block'; + let className = + 'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block'; className += - this.job.status && this.job.recoverable - ? ' btn-primary' - : ' btn-inverted-secondary'; + this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary'; return className; }, hasTimeout() { @@ -104,8 +103,7 @@ export default { <button type="button" :aria-label="__('Toggle Sidebar')" - class="btn btn-blank gutter-toggle pull-right - d-block d-sm-block d-md-none js-sidebar-build-toggle" + class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle" > <i aria-hidden="true" diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 3548c07aea8..bac7d966ecc 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -362,7 +362,7 @@ export default class MergeRequestTabs { // // status - Boolean, true to show, false to hide toggleLoading(status) { - $('.mr-loading-status .loading').toggleClass('hidden', status); + $('.mr-loading-status .loading').toggleClass('hidden', !status); } diffViewType() { diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index bb91ac84ffb..8737f537296 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -1,9 +1,15 @@ import groupAvatar from '~/group_avatar'; import TransferDropdown from '~/groups/transfer_dropdown'; import initConfirmDangerModal from '~/confirm_danger_modal'; +import initSettingsPanels from '~/settings_panels'; document.addEventListener('DOMContentLoaded', () => { groupAvatar(); new TransferDropdown(); // eslint-disable-line no-new initConfirmDangerModal(); }); + +document.addEventListener('DOMContentLoaded', () => { + // Initialize expandable settings panels + initSettingsPanels(); +}); diff --git a/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js new file mode 100644 index 00000000000..d4f34e32a48 --- /dev/null +++ b/app/assets/javascripts/pages/projects/clusters/gcp/new/index.js @@ -0,0 +1,5 @@ +import initGkeDropdowns from '~/projects/gke_cluster_dropdowns'; + +document.addEventListener('DOMContentLoaded', () => { + initGkeDropdowns(); +}); diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index 755a34b7348..06b0ab184ed 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -213,7 +213,7 @@ </i> </div> </div> - <span class="help-block">{{ visibilityLevelDescription }}</span> + <span class="form-text text-muted">{{ visibilityLevelDescription }}</span> <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="request-access" diff --git a/app/assets/javascripts/pages/projects/wikis/wikis.js b/app/assets/javascripts/pages/projects/wikis/wikis.js index 34a12ef76a1..dcd0b9a76ce 100644 --- a/app/assets/javascripts/pages/projects/wikis/wikis.js +++ b/app/assets/javascripts/pages/projects/wikis/wikis.js @@ -1,5 +1,7 @@ import bp from '../../../breakpoints'; import { slugify } from '../../../lib/utils/text_utility'; +import { parseQueryStringIntoObject } from '../../../lib/utils/common_utils'; +import { mergeUrlParams, redirectTo } from '../../../lib/utils/url_utility'; export default class Wikis { constructor() { @@ -28,7 +30,12 @@ export default class Wikis { if (slug.length > 0) { const wikisPath = slugInput.getAttribute('data-wikis-path'); - window.location.href = `${wikisPath}/${slug}`; + + // If the wiki is empty, we need to merge the current URL params to keep the "create" view. + const params = parseQueryStringIntoObject(window.location.search.substr(1)); + const url = mergeUrlParams(params, `${wikisPath}/${slug}`); + redirectTo(url); + e.preventDefault(); } } diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js index ca375007ec5..9404b06615e 100644 --- a/app/assets/javascripts/pages/users/user_tabs.js +++ b/app/assets/javascripts/pages/users/user_tabs.js @@ -77,10 +77,9 @@ export default class UserTabs { this.action = action || this.defaultAction; this.$parentEl = $(parentEl) || $(document); this.windowLocation = window.location; - this.$parentEl.find('.nav-links a') - .each((i, navLink) => { - this.loaded[$(navLink).attr('data-action')] = false; - }); + this.$parentEl.find('.nav-links a').each((i, navLink) => { + this.loaded[$(navLink).attr('data-action')] = false; + }); this.actions = Object.keys(this.loaded); this.bindEvents(); @@ -116,8 +115,7 @@ export default class UserTabs { } activateTab(action) { - return this.$parentEl.find(`.nav-links .js-${action}-tab a`) - .tab('show'); + return this.$parentEl.find(`.nav-links .js-${action}-tab a`).tab('show'); } setTab(action, endpoint) { @@ -137,7 +135,8 @@ export default class UserTabs { loadTab(action, endpoint) { this.toggleLoading(true); - return axios.get(endpoint) + return axios + .get(endpoint) .then(({ data }) => { const tabSelector = `div#${action}`; this.$parentEl.find(tabSelector).html(data.html); @@ -161,10 +160,11 @@ export default class UserTabs { const utcOffset = $calendarWrap.data('utcOffset'); let utcFormatted = 'UTC'; if (utcOffset !== 0) { - utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${(utcOffset / 3600)}`; + utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${utcOffset / 3600}`; } - axios.get(calendarPath) + axios + .get(calendarPath) .then(({ data }) => { $calendarWrap.html(CALENDAR_TEMPLATE); $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`); @@ -180,17 +180,20 @@ export default class UserTabs { } toggleLoading(status) { - return this.$parentEl.find('.loading-status .loading') - .toggleClass('hidden', status); + return this.$parentEl.find('.loading-status .loading').toggleClass('hidden', !status); } setCurrentAction(source) { let newState = source; newState = newState.replace(/\/+$/, ''); newState += this.windowLocation.search + this.windowLocation.hash; - history.replaceState({ - url: newState, - }, document.title, newState); + history.replaceState( + { + url: newState, + }, + document.title, + newState, + ); return newState; } diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index a7a2a7235fd..b37febe523c 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -99,7 +99,7 @@ Please update your Git repository remotes as soon as possible.`), :disabled="isRequestPending" /> </div> - <p class="help-block"> + <p class="form-text text-muted"> {{ path }} </p> </div> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js new file mode 100644 index 00000000000..c15d8ba49e1 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js @@ -0,0 +1,71 @@ +import _ from 'underscore'; +import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; +import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; +import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; +import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; + +import store from '../store'; + +export default { + store, + components: { + LoadingIcon, + DropdownButton, + DropdownSearchInput, + DropdownHiddenInput, + }, + props: { + fieldId: { + type: String, + required: true, + }, + fieldName: { + type: String, + required: true, + }, + defaultValue: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + isLoading: false, + hasErrors: false, + searchQuery: '', + gapiError: '', + }; + }, + computed: { + results() { + if (!this.items) { + return []; + } + + return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1); + }, + }, + methods: { + fetchSuccessHandler() { + if (this.defaultValue) { + const itemToSelect = _.find(this.items, item => item.name === this.defaultValue); + + if (itemToSelect) { + this.setItem(itemToSelect.name); + } + } + + this.isLoading = false; + this.hasErrors = false; + }, + fetchFailureHandler(resp) { + this.isLoading = false; + this.hasErrors = true; + + if (resp.result && resp.result.error) { + this.gapiError = resp.result.error.message; + } + }, + }, +}; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue new file mode 100644 index 00000000000..ab7d2d41ece --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue @@ -0,0 +1,142 @@ +<script> +import { sprintf, s__ } from '~/locale'; +import { mapState, mapGetters, mapActions } from 'vuex'; + +import gkeDropdownMixin from './gke_dropdown_mixin'; + +export default { + name: 'GkeMachineTypeDropdown', + mixins: [gkeDropdownMixin], + computed: { + ...mapState([ + 'isValidatingProjectBilling', + 'projectHasBillingEnabled', + 'selectedZone', + 'selectedMachineType', + ]), + ...mapState({ items: 'machineTypes' }), + ...mapGetters(['hasZone', 'hasMachineType']), + allDropdownsSelected() { + return this.projectHasBillingEnabled && this.hasZone && this.hasMachineType; + }, + isDisabled() { + return ( + this.isLoading || + this.isValidatingProjectBilling || + !this.projectHasBillingEnabled || + !this.hasZone + ); + }, + toggleText() { + if (this.isLoading) { + return s__('ClusterIntegration|Fetching machine types'); + } + + if (this.selectedMachineType) { + return this.selectedMachineType; + } + + if (!this.projectHasBillingEnabled && !this.hasZone) { + return s__('ClusterIntegration|Select project and zone to choose machine type'); + } + + return !this.hasZone + ? s__('ClusterIntegration|Select zone to choose machine type') + : s__('ClusterIntegration|Select machine type'); + }, + errorMessage() { + return sprintf( + s__( + 'ClusterIntegration|An error occured while trying to fetch zone machine types: %{error}', + ), + { error: this.gapiError }, + ); + }, + }, + watch: { + selectedZone() { + this.hasErrors = false; + + if (this.hasZone) { + this.isLoading = true; + + this.fetchMachineTypes() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + } + }, + selectedMachineType() { + this.enableSubmit(); + }, + }, + methods: { + ...mapActions(['fetchMachineTypes']), + ...mapActions({ setItem: 'setMachineType' }), + enableSubmit() { + if (this.allDropdownsSelected) { + const submitButtonEl = document.querySelector('.js-gke-cluster-creation-submit'); + + if (submitButtonEl) { + submitButtonEl.removeAttribute('disabled'); + } + } + }, + }, +}; +</script> + +<template> + <div> + <div + class="js-gcp-machine-type-dropdown dropdown" + :class="{ 'gl-show-field-errors': hasErrors }" + > + <dropdown-hidden-input + :name="fieldName" + :value="selectedMachineType" + /> + <dropdown-button + :class="{ 'gl-field-error-outline': hasErrors }" + :is-disabled="isDisabled" + :is-loading="isLoading" + :toggle-text="toggleText" + /> + <div class="dropdown-menu dropdown-select"> + <dropdown-search-input + v-model="searchQuery" + :placeholder-text="s__('ClusterIntegration|Search machine types')" + /> + <div class="dropdown-content"> + <ul> + <li v-show="!results.length"> + <span class="menu-item"> + {{ s__('ClusterIntegration|No machine types matched your search') }} + </span> + </li> + <li + v-for="result in results" + :key="result.id" + > + <button + type="button" + @click.prevent="setItem(result.name)" + > + {{ result.name }} + </button> + </li> + </ul> + </div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + </div> + </div> + <span + class="form-text text-muted" + :class="{ 'gl-field-error': hasErrors }" + v-if="hasErrors" + > + {{ errorMessage }} + </span> + </div> +</template> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue new file mode 100644 index 00000000000..25350ef0fa9 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue @@ -0,0 +1,201 @@ +<script> +import _ from 'underscore'; +import { s__, sprintf } from '~/locale'; +import { mapState, mapGetters, mapActions } from 'vuex'; + +import gkeDropdownMixin from './gke_dropdown_mixin'; + +export default { + name: 'GkeProjectIdDropdown', + mixins: [gkeDropdownMixin], + props: { + docsUrl: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['selectedProject', 'isValidatingProjectBilling', 'projectHasBillingEnabled']), + ...mapState({ items: 'projects' }), + ...mapGetters(['hasProject']), + hasOneProject() { + return this.items && this.items.length === 1; + }, + isDisabled() { + return ( + this.isLoading || this.isValidatingProjectBilling || (this.items && this.items.length < 2) + ); + }, + toggleText() { + if (this.isValidatingProjectBilling) { + return s__('ClusterIntegration|Validating project billing status'); + } + + if (this.isLoading) { + return s__('ClusterIntegration|Fetching projects'); + } + + if (this.hasProject) { + return this.selectedProject.name; + } + + if (!this.items) { + return s__('ClusterIntegration|No projects found'); + } + + return s__('ClusterIntegration|Select project'); + }, + helpText() { + let message; + if (this.hasErrors) { + return this.errorMessage; + } + + if (!this.items) { + message = + 'ClusterIntegration|We were unable to fetch any projects. Ensure that you have a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; + } + + message = + this.items && this.items.length + ? 'ClusterIntegration|To use a new project, first create one on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.' + : 'ClusterIntegration|To create a cluster, first create a project on %{docsLinkStart}Google Cloud Platform%{docsLinkEnd}.'; + + return sprintf( + s__(message), + { + docsLinkEnd: ' <i class="fa fa-external-link" aria-hidden="true"></i></a>', + docsLinkStart: `<a href="${_.escape( + this.docsUrl, + )}" target="_blank" rel="noopener noreferrer">`, + }, + false, + ); + }, + errorMessage() { + if (!this.projectHasBillingEnabled) { + if (this.gapiError) { + return s__( + 'ClusterIntegration|We could not verify that one of your projects on GCP has billing enabled. Please try again.', + ); + } + + return sprintf( + s__( + 'This project does not have billing enabled. To create a cluster, <a href=%{linkToBilling} target="_blank" rel="noopener noreferrer">enable billing <i class="fa fa-external-link" aria-hidden="true"></i></a> and try again.', + ), + { + linkToBilling: + 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', + }, + false, + ); + } + + return sprintf( + s__('ClusterIntegration|An error occured while trying to fetch your projects: %{error}'), + { error: this.gapiError }, + ); + }, + }, + watch: { + selectedProject() { + this.setIsValidatingProjectBilling(true); + + this.validateProjectBilling() + .then(this.validateProjectBillingSuccessHandler) + .catch(this.validateProjectBillingFailureHandler); + }, + }, + created() { + this.isLoading = true; + + this.fetchProjects() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + }, + methods: { + ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']), + ...mapActions({ setItem: 'setProject' }), + fetchSuccessHandler() { + if (this.defaultValue) { + const projectToSelect = _.find(this.items, item => item.projectId === this.defaultValue); + + if (projectToSelect) { + this.setItem(projectToSelect); + } + } else if (this.items.length === 1) { + this.setItem(this.items[0]); + } + + this.isLoading = false; + this.hasErrors = false; + }, + validateProjectBillingSuccessHandler() { + this.hasErrors = !this.projectHasBillingEnabled; + }, + validateProjectBillingFailureHandler(resp) { + this.hasErrors = true; + + this.gapiError = resp.result ? resp.result.error.message : resp; + }, + }, +}; +</script> + +<template> + <div> + <div + class="js-gcp-project-id-dropdown dropdown" + :class="{ 'gl-show-field-errors': hasErrors }" + > + <dropdown-hidden-input + :name="fieldName" + :value="selectedProject.projectId" + /> + <dropdown-button + :class="{ + 'gl-field-error-outline': hasErrors, + 'read-only': hasOneProject + }" + :is-disabled="isDisabled" + :is-loading="isLoading" + :toggle-text="toggleText" + /> + <div class="dropdown-menu dropdown-select"> + <dropdown-search-input + v-model="searchQuery" + :placeholder-text="s__('ClusterIntegration|Search projects')" + /> + <div class="dropdown-content"> + <ul> + <li v-show="!results.length"> + <span class="menu-item"> + {{ s__('ClusterIntegration|No projects matched your search') }} + </span> + </li> + <li + v-for="result in results" + :key="result.project_number" + > + <button + type="button" + @click.prevent="setItem(result)" + > + {{ result.name }} + </button> + </li> + </ul> + </div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + </div> + </div> + <span + class="form-text text-muted" + :class="{ 'gl-field-error': hasErrors }" + v-html="helpText" + ></span> + </div> +</template> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue new file mode 100644 index 00000000000..8ee4eefcd91 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue @@ -0,0 +1,116 @@ +<script> +import { sprintf, s__ } from '~/locale'; +import { mapState, mapActions } from 'vuex'; + +import gkeDropdownMixin from './gke_dropdown_mixin'; + +export default { + name: 'GkeZoneDropdown', + mixins: [gkeDropdownMixin], + computed: { + ...mapState([ + 'selectedProject', + 'selectedZone', + 'projects', + 'isValidatingProjectBilling', + 'projectHasBillingEnabled', + ]), + ...mapState({ items: 'zones' }), + isDisabled() { + return this.isLoading || this.isValidatingProjectBilling || !this.projectHasBillingEnabled; + }, + toggleText() { + if (this.isLoading) { + return s__('ClusterIntegration|Fetching zones'); + } + + if (this.selectedZone) { + return this.selectedZone; + } + + return !this.projectHasBillingEnabled + ? s__('ClusterIntegration|Select project to choose zone') + : s__('ClusterIntegration|Select zone'); + }, + errorMessage() { + return sprintf( + s__('ClusterIntegration|An error occured while trying to fetch project zones: %{error}'), + { error: this.gapiError }, + ); + }, + }, + watch: { + isValidatingProjectBilling(isValidating) { + this.hasErrors = false; + + if (!isValidating && this.projectHasBillingEnabled) { + this.isLoading = true; + + this.fetchZones() + .then(this.fetchSuccessHandler) + .catch(this.fetchFailureHandler); + } + }, + }, + methods: { + ...mapActions(['fetchZones']), + ...mapActions({ setItem: 'setZone' }), + }, +}; +</script> + +<template> + <div> + <div + class="js-gcp-zone-dropdown dropdown" + :class="{ 'gl-show-field-errors': hasErrors }" + > + <dropdown-hidden-input + :name="fieldName" + :value="selectedZone" + /> + <dropdown-button + :class="{ 'gl-field-error-outline': hasErrors }" + :is-disabled="isDisabled" + :is-loading="isLoading" + :toggle-text="toggleText" + /> + <div class="dropdown-menu dropdown-select"> + <dropdown-search-input + v-model="searchQuery" + :placeholder-text="s__('ClusterIntegration|Search zones')" + /> + <div class="dropdown-content"> + <ul> + <li v-show="!results.length"> + <span class="menu-item"> + {{ s__('ClusterIntegration|No zones matched your search') }} + </span> + </li> + <li + v-for="result in results" + :key="result.id" + > + <button + type="button" + @click.prevent="setItem(result.name)" + > + {{ result.name }} + </button> + </li> + </ul> + </div> + <div class="dropdown-loading"> + <loading-icon /> + </div> + </div> + </div> + <span + class="form-text text-muted" + :class="{ 'gl-field-error': hasErrors }" + v-if="hasErrors" + > + {{ errorMessage }} + </span> + </div> +</template> diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js new file mode 100644 index 00000000000..2a1c0819916 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/constants.js @@ -0,0 +1,11 @@ +import { s__ } from '~/locale'; + +export const GCP_API_ERROR = s__( + 'ClusterIntegration|An error occurred when trying to contact the Google Cloud API. Please try again later.', +); +export const GCP_API_CLOUD_BILLING_ENDPOINT = + 'https://www.googleapis.com/discovery/v1/apis/cloudbilling/v1/rest'; +export const GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT = + 'https://www.googleapis.com/discovery/v1/apis/cloudresourcemanager/v1/rest'; +export const GCP_API_COMPUTE_ENDPOINT = + 'https://www.googleapis.com/discovery/v1/apis/compute/v1/rest'; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js new file mode 100644 index 00000000000..729b9404b64 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js @@ -0,0 +1,88 @@ +/* global gapi */ +import Vue from 'vue'; +import Flash from '~/flash'; +import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue'; +import GkeZoneDropdown from './components/gke_zone_dropdown.vue'; +import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue'; +import * as CONSTANTS from './constants'; + +const mountComponent = (entryPoint, component, componentName, extraProps = {}) => { + const el = document.querySelector(entryPoint); + if (!el) return false; + + const hiddenInput = el.querySelector('input'); + + return new Vue({ + el, + components: { + [componentName]: component, + }, + render: createElement => + createElement(componentName, { + props: { + fieldName: hiddenInput.getAttribute('name'), + fieldId: hiddenInput.getAttribute('id'), + defaultValue: hiddenInput.value, + ...extraProps, + }, + }), + }); +}; + +const mountGkeProjectIdDropdown = () => { + const entryPoint = '.js-gcp-project-id-dropdown-entry-point'; + const el = document.querySelector(entryPoint); + + mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', { + docsUrl: el.dataset.docsurl, + }); +}; + +const mountGkeZoneDropdown = () => { + mountComponent('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown'); +}; + +const mountGkeMachineTypeDropdown = () => { + mountComponent( + '.js-gcp-machine-type-dropdown-entry-point', + GkeMachineTypeDropdown, + 'gke-machine-type-dropdown', + ); +}; + +const gkeDropdownErrorHandler = () => { + Flash(CONSTANTS.GCP_API_ERROR); +}; + +const initializeGapiClient = () => { + const el = document.querySelector('.js-gke-cluster-creation'); + if (!el) return false; + + return gapi.client + .init({ + discoveryDocs: [ + CONSTANTS.GCP_API_CLOUD_BILLING_ENDPOINT, + CONSTANTS.GCP_API_CLOUD_RESOURCE_MANAGER_ENDPOINT, + CONSTANTS.GCP_API_COMPUTE_ENDPOINT, + ], + }) + .then(() => { + gapi.client.setToken({ access_token: el.dataset.token }); + + mountGkeProjectIdDropdown(); + mountGkeZoneDropdown(); + mountGkeMachineTypeDropdown(); + }) + .catch(gkeDropdownErrorHandler); +}; + +const initGkeDropdowns = () => { + if (!gapi) { + gkeDropdownErrorHandler(); + return false; + } + + return gapi.load('client', initializeGapiClient); +}; + +export default initGkeDropdowns; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js new file mode 100644 index 00000000000..4834a856271 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/actions.js @@ -0,0 +1,95 @@ +/* global gapi */ +import * as types from './mutation_types'; + +const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) => + new Promise((resolve, reject) => { + const request = resource.list(params); + + return request.then( + resp => { + const { result } = resp; + + commit(mutation, result[payloadKey]); + + resolve(); + }, + resp => { + reject(resp); + }, + ); + }); + +export const setProject = ({ commit }, selectedProject) => { + commit(types.SET_PROJECT, selectedProject); +}; + +export const setZone = ({ commit }, selectedZone) => { + commit(types.SET_ZONE, selectedZone); +}; + +export const setMachineType = ({ commit }, selectedMachineType) => { + commit(types.SET_MACHINE_TYPE, selectedMachineType); +}; + +export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBilling) => { + commit(types.SET_IS_VALIDATING_PROJECT_BILLING, isValidatingProjectBilling); +}; + +export const fetchProjects = ({ commit }) => + gapiResourceListRequest({ + resource: gapi.client.cloudresourcemanager.projects, + params: {}, + commit, + mutation: types.SET_PROJECTS, + payloadKey: 'projects', + }); + +export const validateProjectBilling = ({ dispatch, commit, state }) => + new Promise((resolve, reject) => { + const request = gapi.client.cloudbilling.projects.getBillingInfo({ + name: `projects/${state.selectedProject.projectId}`, + }); + + commit(types.SET_ZONE, ''); + commit(types.SET_MACHINE_TYPE, ''); + + return request.then( + resp => { + const { billingEnabled } = resp.result; + + commit(types.SET_PROJECT_BILLING_STATUS, !!billingEnabled); + dispatch('setIsValidatingProjectBilling', false); + resolve(); + }, + resp => { + dispatch('setIsValidatingProjectBilling', false); + reject(resp); + }, + ); + }); + +export const fetchZones = ({ commit, state }) => + gapiResourceListRequest({ + resource: gapi.client.compute.zones, + params: { + project: state.selectedProject.projectId, + }, + commit, + mutation: types.SET_ZONES, + payloadKey: 'items', + }); + +export const fetchMachineTypes = ({ commit, state }) => + gapiResourceListRequest({ + resource: gapi.client.compute.machineTypes, + params: { + project: state.selectedProject.projectId, + zone: state.selectedZone, + }, + commit, + mutation: types.SET_MACHINE_TYPES, + payloadKey: 'items', + }); + +// prevent babel-plugin-rewire from generating an invalid default during karma tests +export default () => {}; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js new file mode 100644 index 00000000000..e39f02d0894 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/getters.js @@ -0,0 +1,3 @@ +export const hasProject = state => !!state.selectedProject.projectId; +export const hasZone = state => !!state.selectedZone; +export const hasMachineType = state => !!state.selectedMachineType; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js new file mode 100644 index 00000000000..5f72060633e --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/index.js @@ -0,0 +1,18 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import * as actions from './actions'; +import * as getters from './getters'; +import mutations from './mutations'; +import createState from './state'; + +Vue.use(Vuex); + +export const createStore = () => + new Vuex.Store({ + actions, + getters, + mutations, + state: createState(), + }); + +export default createStore(); diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js new file mode 100644 index 00000000000..45a91efc2d9 --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutation_types.js @@ -0,0 +1,8 @@ +export const SET_PROJECT = 'SET_PROJECT'; +export const SET_PROJECT_BILLING_STATUS = 'SET_PROJECT_BILLING_STATUS'; +export const SET_IS_VALIDATING_PROJECT_BILLING = 'SET_IS_VALIDATING_PROJECT_BILLING'; +export const SET_ZONE = 'SET_ZONE'; +export const SET_MACHINE_TYPE = 'SET_MACHINE_TYPE'; +export const SET_PROJECTS = 'SET_PROJECTS'; +export const SET_ZONES = 'SET_ZONES'; +export const SET_MACHINE_TYPES = 'SET_MACHINE_TYPES'; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js new file mode 100644 index 00000000000..88a2c1b630d --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/mutations.js @@ -0,0 +1,28 @@ +import * as types from './mutation_types'; + +export default { + [types.SET_PROJECT](state, selectedProject) { + Object.assign(state, { selectedProject }); + }, + [types.SET_IS_VALIDATING_PROJECT_BILLING](state, isValidatingProjectBilling) { + Object.assign(state, { isValidatingProjectBilling }); + }, + [types.SET_PROJECT_BILLING_STATUS](state, projectHasBillingEnabled) { + Object.assign(state, { projectHasBillingEnabled }); + }, + [types.SET_ZONE](state, selectedZone) { + Object.assign(state, { selectedZone }); + }, + [types.SET_MACHINE_TYPE](state, selectedMachineType) { + Object.assign(state, { selectedMachineType }); + }, + [types.SET_PROJECTS](state, projects) { + Object.assign(state, { projects }); + }, + [types.SET_ZONES](state, zones) { + Object.assign(state, { zones }); + }, + [types.SET_MACHINE_TYPES](state, machineTypes) { + Object.assign(state, { machineTypes }); + }, +}; diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js new file mode 100644 index 00000000000..9f3c473d4bc --- /dev/null +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/store/state.js @@ -0,0 +1,13 @@ +export default () => ({ + selectedProject: { + projectId: '', + name: '', + }, + selectedZone: '', + selectedMachineType: '', + isValidatingProjectBilling: null, + projectHasBillingEnabled: null, + projects: [], + zones: [], + machineTypes: [], +}); diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue new file mode 100644 index 00000000000..c159333d89a --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue @@ -0,0 +1,55 @@ +<script> +import { __ } from '~/locale'; +import LoadingIcon from '~/vue_shared/components/loading_icon.vue'; + +export default { + components: { + LoadingIcon, + }, + props: { + isDisabled: { + type: Boolean, + required: false, + default: false, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + toggleText: { + type: String, + required: false, + default: __('Select'), + }, + }, +}; +</script> + +<template> + <button + class="dropdown-menu-toggle dropdown-menu-full-width" + type="button" + data-toggle="dropdown" + aria-expanded="false" + :disabled="isDisabled || isLoading" + > + <loading-icon + v-show="isLoading" + :inline="true" + /> + <span class="dropdown-toggle-text"> + {{ toggleText }} + </span> + <span + class="dropdown-toggle-icon" + v-show="!isLoading" + > + <i + class="fa fa-chevron-down" + aria-hidden="true" + data-hidden="true" + ></i> + </span> + </button> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue index 1832c3c1757..1fe27eb97ab 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_hidden_input.vue +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue @@ -5,8 +5,8 @@ export default { type: String, required: true, }, - label: { - type: Object, + value: { + type: [Number, String], required: true, }, }, @@ -17,6 +17,6 @@ export default { <input type="hidden" :name="name" - :value="label.id" + :value="value" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue new file mode 100644 index 00000000000..c2145a26e64 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue @@ -0,0 +1,46 @@ +<script> +import { __ } from '~/locale'; + +export default { + props: { + placeholderText: { + type: String, + required: true, + default: __('Search'), + }, + }, + data() { + return { searchQuery: this.value }; + }, + watch: { + searchQuery(query) { + this.$emit('input', query); + }, + }, +}; +</script> + +<template> + <div class="dropdown-input"> + <input + class="dropdown-input-field" + type="search" + v-model="searchQuery" + :placeholder="placeholderText" + autocomplete="off" + /> + <i + class="fa fa-search dropdown-input-search" + aria-hidden="true" + data-hidden="true" + > + </i> + <i + class="fa fa-times dropdown-input-clear js-dropdown-input-clear" + aria-hidden="true" + data-hidden="true" + role="button" + > + </i> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue index 70b46a9c2bb..f155ac2be02 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue @@ -2,13 +2,13 @@ import $ from 'jquery'; import { __ } from '~/locale'; import LabelsSelect from '~/labels_select'; +import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; import LoadingIcon from '../../loading_icon.vue'; import DropdownTitle from './dropdown_title.vue'; import DropdownValue from './dropdown_value.vue'; import DropdownValueCollapsed from './dropdown_value_collapsed.vue'; import DropdownButton from './dropdown_button.vue'; -import DropdownHiddenInput from './dropdown_hidden_input.vue'; import DropdownHeader from './dropdown_header.vue'; import DropdownSearchInput from './dropdown_search_input.vue'; import DropdownFooter from './dropdown_footer.vue'; @@ -140,7 +140,7 @@ export default { v-for="label in context.labels" :key="label.id" :name="hiddenInputName" - :label="label" + :value="label.id" /> <div class="dropdown" |