diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-17 15:10:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-08-17 15:10:12 +0300 |
commit | 4203215d542505bba491a01d637479934c8005d6 (patch) | |
tree | 000a956ac60247021ff8c36a1a17a1ea6ed1ff38 /app/assets/javascripts/clusters/forms | |
parent | 325318e2ddfcaedf0527053dd3c9bd62db547089 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters/forms')
3 files changed, 131 insertions, 15 deletions
diff --git a/app/assets/javascripts/clusters/forms/components/integration_form.vue b/app/assets/javascripts/clusters/forms/components/integration_form.vue index 1ac9a4ee59e..53e004b4fc0 100644 --- a/app/assets/javascripts/clusters/forms/components/integration_form.vue +++ b/app/assets/javascripts/clusters/forms/components/integration_form.vue @@ -1,50 +1,84 @@ <script> -import { GlFormGroup, GlToggle, GlTooltipDirective } from '@gitlab/ui'; +import { + GlFormGroup, + GlFormInput, + GlToggle, + GlTooltipDirective, + GlSprintf, + GlLink, + GlButton, +} from '@gitlab/ui'; import { mapState } from 'vuex'; export default { components: { GlFormGroup, GlToggle, + GlFormInput, + GlSprintf, + GlLink, + GlButton, }, directives: { GlTooltip: GlTooltipDirective, }, + inject: { + autoDevopsHelpPath: { + type: String, + }, + externalEndpointHelpPath: { + type: String, + }, + }, data() { return { toggleEnabled: true, + envScope: '*', + baseDomainField: '', + externalIp: '', }; }, computed: { - ...mapState(['enabled', 'editable']), + ...mapState([ + 'enabled', + 'editable', + 'environmentScope', + 'baseDomain', + 'applicationIngressExternalIp', + ]), + canSubmit() { + return ( + this.enabled !== this.toggleEnabled || + this.environmentScope !== this.envScope || + this.baseDomain !== this.baseDomainField + ); + }, }, mounted() { this.toggleEnabled = this.enabled; + this.envScope = this.environmentScope; + this.baseDomainField = this.baseDomain; + this.externalIp = this.applicationIngressExternalIp; }, }; </script> <template> - <div class="d-flex align-items-center"> + <div class="d-flex gl-flex-direction-column"> <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"> + <h4 class="gl-pr-3 gl-m-0">{{ s__('ClusterIntegration|GitLab Integration') }}</h4> + + <div class="js-cluster-enable-toggle-area"> <gl-toggle + id="toggleCluster" v-model="toggleEnabled" v-gl-tooltip:tooltipcontainer + name="cluster[enabled]" class="gl-mb-0 js-project-feature-toggle" data-qa-selector="integration_status_toggle" - :aria-describedby="__('Toggle Kubernetes cluster')" + aria-describedby="toggleCluster" :disabled="!editable" - :is_checked="toggleEnabled" :title=" s__( 'ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.', @@ -54,5 +88,76 @@ export default { </div> </div> </gl-form-group> + + <gl-form-group + :label="s__('ClusterIntegration|Environment scope')" + label-size="sm" + label-for="cluster_environment_scope" + :description=" + s__('ClusterIntegration|Choose which of your environments will use this cluster.') + " + > + <gl-form-input + id="cluster_environment_scope" + v-model="envScope" + name="cluster[environment_scope]" + class="col-md-6" + type="text" + /> + </gl-form-group> + + <gl-form-group + :label="s__('ClusterIntegration|Base domain')" + label-size="sm" + label-for="cluster_base_domain" + > + <gl-form-input + id="cluster_base_domain" + v-model="baseDomainField" + name="cluster[base_domain]" + data-qa-selector="base_domain_field" + class="col-md-6" + type="text" + /> + <div class="form-text text-muted inline"> + <gl-sprintf + :message=" + s__( + 'ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{linkStart}Auto DevOps.%{linkEnd} The domain should have a wildcard DNS configured matching the domain. ', + ) + " + > + <template #link="{ content }"> + <gl-link :href="autoDevopsHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + <div v-if="applicationIngressExternalIp" class="js-ingress-domain-help-text inline"> + {{ s__('ClusterIntegration|Alternatively, ') }} + <gl-sprintf :message="s__('ClusterIntegration|%{externalIp}.nip.io')"> + <template #externalIp>{{ externalIp }}</template> + </gl-sprintf> + {{ s__('ClusterIntegration|can be used instead of a custom domain. ') }} + </div> + <gl-sprintf + class="inline" + :message="s__('ClusterIntegration|%{linkStart}More information%{linkEnd}')" + > + <template #link="{ content }"> + <gl-link :href="externalEndpointHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> + </gl-form-group> + <div v-if="editable" class="form group gl-display-flex gl-justify-content-end"> + <gl-button + category="primary" + variant="success" + type="submit" + :disabled="!canSubmit" + :aria-disabled="!canSubmit" + data-qa-selector="save_changes_button" + >{{ s__('ClusterIntegration|Save changes') }}</gl-button + > + </div> </div> </template> diff --git a/app/assets/javascripts/clusters/forms/show/index.js b/app/assets/javascripts/clusters/forms/show/index.js index 26a6ab5f0e3..47a3016c777 100644 --- a/app/assets/javascripts/clusters/forms/show/index.js +++ b/app/assets/javascripts/clusters/forms/show/index.js @@ -9,13 +9,19 @@ export default () => { return; } + const { autoDevopsHelpPath, externalEndpointHelpPath } = entryPoint.dataset; + // eslint-disable-next-line no-new new Vue({ el: entryPoint, store: createStore(entryPoint.dataset), + provide: { + autoDevopsHelpPath, + externalEndpointHelpPath, + }, render(createElement) { - return createElement(IntegrationForm); + return createElement(IntegrationForm, {}); }, }); }; diff --git a/app/assets/javascripts/clusters/forms/stores/state.js b/app/assets/javascripts/clusters/forms/stores/state.js index a88954d5b94..2a96590b5e7 100644 --- a/app/assets/javascripts/clusters/forms/stores/state.js +++ b/app/assets/javascripts/clusters/forms/stores/state.js @@ -4,5 +4,10 @@ export default (initialState = {}) => { return { enabled: parseBoolean(initialState.enabled), editable: parseBoolean(initialState.editable), + environmentScope: initialState.environmentScope, + baseDomain: initialState.baseDomain, + applicationIngressExternalIp: initialState.applicationIngressExternalIp, + autoDevopsHelpPath: initialState.autoDevopsHelpPath, + externalEndpointHelpPath: initialState.externalEndpointHelpPath, }; }; |