diff options
Diffstat (limited to 'app/assets/javascripts/clusters')
11 files changed, 133 insertions, 42 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index 92517203972..a75646db162 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -237,7 +237,7 @@ export default class Clusters { } addBannerCloseHandler(el, status) { - el.querySelector('.js-close-banner').addEventListener('click', () => { + el.querySelector('.js-close').addEventListener('click', () => { el.classList.add('hidden'); this.setBannerDismissedState(status, true); }); diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index c86db28515f..412260da958 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -1,9 +1,8 @@ <script> -import { GlLink, GlModalDirective, GlSprintf } from '@gitlab/ui'; +import { GlLink, GlModalDirective, GlSprintf, GlButton, GlAlert } from '@gitlab/ui'; import { s__, __, sprintf } from '~/locale'; import eventHub from '../event_hub'; import identicon from '../../vue_shared/components/identicon.vue'; -import loadingButton from '../../vue_shared/components/loading_button.vue'; import UninstallApplicationButton from './uninstall_application_button.vue'; import UninstallApplicationConfirmationModal from './uninstall_application_confirmation_modal.vue'; import UpdateApplicationConfirmationModal from './update_application_confirmation_modal.vue'; @@ -12,9 +11,10 @@ import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants'; export default { components: { - loadingButton, + GlButton, identicon, GlLink, + GlAlert, GlSprintf, UninstallApplicationButton, UninstallApplicationConfirmationModal, @@ -382,24 +382,28 @@ export default { </template> </div> - <div + <gl-alert v-if="updateFailed && !isUpdating" - class="bs-callout bs-callout-danger cluster-application-banner mt-2 mb-0 js-cluster-application-update-details" + variant="danger" + :dismissible="false" + class="gl-mt-3 gl-mb-0 js-cluster-application-update-details" > {{ updateFailureDescription }} - </div> + </gl-alert> <template v-if="updateAvailable || updateFailed || isUpdating"> <template v-if="updatingNeedsConfirmation"> - <loading-button + <gl-button v-gl-modal-directive="updateModalId" - class="btn btn-primary js-cluster-application-update-button mt-2" + class="js-cluster-application-update-button mt-2" + variant="info" + category="primary" :loading="isUpdating" :disabled="isUpdating" - :label="updateButtonLabel" data-qa-selector="update_button_with_confirmation" :data-qa-application="id" - /> - + > + {{ updateButtonLabel }} + </gl-button> <update-application-confirmation-modal :application="id" :application-title="title" @@ -407,16 +411,19 @@ export default { /> </template> - <loading-button + <gl-button v-else - class="btn btn-primary js-cluster-application-update-button mt-2" + class="js-cluster-application-update-button mt-2" + variant="info" + category="primary" :loading="isUpdating" :disabled="isUpdating" - :label="updateButtonLabel" data-qa-selector="update_button" :data-qa-application="id" @click="updateConfirmed" - /> + > + {{ updateButtonLabel }} + </gl-button> </template> </div> </div> @@ -431,16 +438,18 @@ export default { }}</a> </div> <div class="btn-group table-action-buttons"> - <loading-button + <gl-button v-if="displayInstallButton" :loading="installButtonLoading" :disabled="disabled || installButtonDisabled" - :label="installButtonLabel" class="js-cluster-application-install-button" + variant="default" data-qa-selector="install_button" :data-qa-application="id" @click="installClicked" - /> + > + {{ installButtonLabel }} + </gl-button> <uninstall-application-button v-if="displayUninstallButton" v-gl-modal-directive="uninstallModalId" diff --git a/app/assets/javascripts/clusters/components/knative_domain_editor.vue b/app/assets/javascripts/clusters/components/knative_domain_editor.vue index 1236d2a46c9..2617ea0bdea 100644 --- a/app/assets/javascripts/clusters/components/knative_domain_editor.vue +++ b/app/assets/javascripts/clusters/components/knative_domain_editor.vue @@ -6,8 +6,8 @@ import { GlLoadingIcon, GlSearchBoxByType, GlSprintf, + GlButton, } from '@gitlab/ui'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; import { __, s__ } from '~/locale'; @@ -17,7 +17,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS; export default { components: { - LoadingButton, + GlButton, ClipboardButton, GlLoadingIcon, GlDeprecatedDropdown, @@ -130,7 +130,7 @@ export default { <gl-search-box-by-type v-model.trim="searchQuery" :placeholder="s__('ClusterIntegration|Search domains')" - class="m-2" + class="gl-m-3" /> <gl-deprecated-dropdown-item v-for="domain in filteredDomains" @@ -215,13 +215,16 @@ export default { }} </p> - <loading-button - class="btn-success js-knative-save-domain-button mt-3 ml-3" + <gl-button + class="js-knative-save-domain-button gl-mt-5 gl-ml-5" + variant="success" + category="primary" :loading="saving" :disabled="saveButtonDisabled" - :label="saveButtonLabel" @click="$emit('save')" - /> + > + {{ saveButtonLabel }} + </gl-button> </template> </div> </template> diff --git a/app/assets/javascripts/clusters/components/new_cluster.vue b/app/assets/javascripts/clusters/components/new_cluster.vue new file mode 100644 index 00000000000..2e74ad073c5 --- /dev/null +++ b/app/assets/javascripts/clusters/components/new_cluster.vue @@ -0,0 +1,34 @@ +<script> +import { GlLink, GlSprintf } from '@gitlab/ui'; +import { mapState } from 'vuex'; +import { s__ } from '~/locale'; + +export default { + i18n: { + title: s__('ClusterIntegration|Enter the details for your Kubernetes cluster'), + information: s__( + 'ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{linkStart}documentation%{linkEnd} on Kubernetes', + ), + }, + components: { + GlLink, + GlSprintf, + }, + computed: { + ...mapState(['clusterConnectHelpPath']), + }, +}; +</script> + +<template> + <div> + <h4>{{ $options.i18n.title }}</h4> + <p> + <gl-sprintf :message="$options.i18n.information"> + <template #link="{ content }"> + <gl-link :href="clusterConnectHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> +</template> diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue index 3e3b102f0aa..c157b04b4f5 100644 --- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue +++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue @@ -1,6 +1,7 @@ <script> +/* eslint-disable vue/no-v-html */ import { escape } from 'lodash'; -import { GlModal, GlButton, GlDeprecatedButton, GlFormInput, GlSprintf } from '@gitlab/ui'; +import { GlModal, GlButton, GlFormInput, GlSprintf } from '@gitlab/ui'; import SplitButton from '~/vue_shared/components/split_button.vue'; import { s__, sprintf } from '~/locale'; import csrf from '~/lib/utils/csrf'; @@ -28,7 +29,6 @@ export default { SplitButton, GlModal, GlButton, - GlDeprecatedButton, GlFormInput, GlSprintf, }, @@ -174,24 +174,31 @@ export default { }}</span> </template> <template #modal-footer> - <gl-deprecated-button variant="secondary" @click="handleCancel">{{ - s__('Cancel') - }}</gl-deprecated-button> + <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button> <template v-if="confirmCleanup"> - <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{ - s__('ClusterIntegration|Remove integration') - }}</gl-deprecated-button> - <gl-deprecated-button + <gl-button + :disabled="!canSubmit" + variant="warning" + category="primary" + @click="handleSubmit" + >{{ s__('ClusterIntegration|Remove integration') }}</gl-button + > + <gl-button :disabled="!canSubmit" variant="danger" + category="primary" @click="handleSubmit(true)" - >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-deprecated-button + >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-button > </template> <template v-else> - <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{ - s__('ClusterIntegration|Remove integration') - }}</gl-deprecated-button> + <gl-button + :disabled="!canSubmit" + variant="danger" + category="primary" + @click="handleSubmit" + >{{ s__('ClusterIntegration|Remove integration') }}</gl-button + > </template> </template> </gl-modal> diff --git a/app/assets/javascripts/clusters/components/uninstall_application_button.vue b/app/assets/javascripts/clusters/components/uninstall_application_button.vue index 8465312d84d..73191d6d84d 100644 --- a/app/assets/javascripts/clusters/components/uninstall_application_button.vue +++ b/app/assets/javascripts/clusters/components/uninstall_application_button.vue @@ -1,5 +1,5 @@ <script> -import LoadingButton from '~/vue_shared/components/loading_button.vue'; +import { GlButton } from '@gitlab/ui'; import { APPLICATION_STATUS } from '~/clusters/constants'; import { __ } from '~/locale'; @@ -7,7 +7,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS; export default { components: { - LoadingButton, + GlButton, }, props: { status: { @@ -30,5 +30,7 @@ export default { </script> <template> - <loading-button :label="label" :disabled="disabled" :loading="loading" /> + <gl-button :disabled="disabled" variant="default" :loading="loading"> + {{ label }} + </gl-button> </template> diff --git a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue index e33431d2ea1..f82f4dd5012 100644 --- a/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue +++ b/app/assets/javascripts/clusters/components/uninstall_application_confirmation_modal.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlModal } from '@gitlab/ui'; import trackUninstallButtonClickMixin from 'ee_else_ce/clusters/mixins/track_uninstall_button_click'; import { sprintf, s__ } from '~/locale'; diff --git a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue index 04aa28e9b74..0aedc6e84fa 100644 --- a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue +++ b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue @@ -1,4 +1,5 @@ <script> +/* eslint-disable vue/no-v-html */ import { GlModal } from '@gitlab/ui'; import { sprintf, s__ } from '~/locale'; import { ELASTIC_STACK } from '../constants'; diff --git a/app/assets/javascripts/clusters/new_cluster.js b/app/assets/javascripts/clusters/new_cluster.js new file mode 100644 index 00000000000..71f585fd307 --- /dev/null +++ b/app/assets/javascripts/clusters/new_cluster.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import NewCluster from './components/new_cluster.vue'; +import { createStore } from './stores/new_cluster'; + +export default () => { + const entryPoint = document.querySelector('#js-cluster-new'); + + if (!entryPoint) { + return null; + } + + return new Vue({ + el: '#js-cluster-new', + store: createStore(entryPoint.dataset), + render(createElement) { + return createElement(NewCluster); + }, + }); +}; diff --git a/app/assets/javascripts/clusters/stores/new_cluster/index.js b/app/assets/javascripts/clusters/stores/new_cluster/index.js new file mode 100644 index 00000000000..ae082c07f26 --- /dev/null +++ b/app/assets/javascripts/clusters/stores/new_cluster/index.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import state from './state'; + +Vue.use(Vuex); + +export const createStore = initialState => + new Vuex.Store({ + state: state(initialState), + }); + +export default createStore; diff --git a/app/assets/javascripts/clusters/stores/new_cluster/state.js b/app/assets/javascripts/clusters/stores/new_cluster/state.js new file mode 100644 index 00000000000..1ca1ac8de18 --- /dev/null +++ b/app/assets/javascripts/clusters/stores/new_cluster/state.js @@ -0,0 +1,3 @@ +export default (initialState = {}) => ({ + clusterConnectHelpPath: initialState.clusterConnectHelpPath, +}); |