diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-21 21:09:45 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-21 21:09:45 +0300 |
commit | 36b0a5b87569e1b0e9f193630e50d1a376a71a4a (patch) | |
tree | 149dc553a092cd184bd196877d98964b4f8b3825 /app/assets/javascripts/clusters/forms | |
parent | a6578252111f8ce77de356eca6fd55c470893d54 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters/forms')
4 files changed, 99 insertions, 0 deletions
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue new file mode 100644 index 00000000000..1ac9a4ee59e --- /dev/null +++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue @@ -0,0 +1,58 @@ +<script> +import { GlFormGroup, GlToggle, GlTooltipDirective } from '@gitlab/ui'; +import { mapState } from 'vuex'; + +export default { + components: { + GlFormGroup, + GlToggle, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + data() { + return { + toggleEnabled: true, + }; + }, + computed: { + ...mapState(['enabled', 'editable']), + }, + mounted() { + this.toggleEnabled = this.enabled; + }, +}; +</script> + +<template> + <div class="d-flex align-items-center"> + <gl-form-group> + <div class="gl-display-flex gl-align-items-center"> + <h4 class="gl-pr-3 gl-m-0 ">{{ s__('ClusterIntegration|GitLab Integration') }}</h4> + <input + id="cluster_enabled" + class="js-project-feature-toggle-input" + type="hidden" + :value="toggleEnabled" + name="cluster[enabled]" + /> + <div id="tooltipcontainer" class="js-cluster-enable-toggle-area"> + <gl-toggle + v-model="toggleEnabled" + v-gl-tooltip:tooltipcontainer + class="gl-mb-0 js-project-feature-toggle" + data-qa-selector="integration_status_toggle" + :aria-describedby="__('Toggle Kubernetes cluster')" + :disabled="!editable" + :is_checked="toggleEnabled" + :title=" + s__( + 'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.', + ) + " + /> + </div> + </div> + </gl-form-group> + </div> +</template> diff --git a/app/assets/javascripts/clusters/forms/show/index.js b/app/assets/javascripts/clusters/forms/show/index.js new file mode 100644 index 00000000000..26a6ab5f0e3 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/show/index.js @@ -0,0 +1,21 @@ +import Vue from 'vue'; +import IntegrationForm from '../components/integration_form.vue'; +import { createStore } from '../stores'; + +export default () => { + const entryPoint = document.querySelector('#js-cluster-integration-form'); + + if (!entryPoint) { + return; + } + + // eslint-disable-next-line no-new + new Vue({ + el: entryPoint, + store: createStore(entryPoint.dataset), + + render(createElement) { + return createElement(IntegrationForm); + }, + }); +}; diff --git a/app/assets/javascripts/clusters/forms/stores/index.js b/app/assets/javascripts/clusters/forms/stores/index.js new file mode 100644 index 00000000000..ae082c07f26 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/stores/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/forms/stores/state.js b/app/assets/javascripts/clusters/forms/stores/state.js new file mode 100644 index 00000000000..a88954d5b94 --- /dev/null +++ b/app/assets/javascripts/clusters/forms/stores/state.js @@ -0,0 +1,8 @@ +import { parseBoolean } from '../../../lib/utils/common_utils'; + +export default (initialState = {}) => { + return { + enabled: parseBoolean(initialState.enabled), + editable: parseBoolean(initialState.editable), + }; +}; |