147 lines
3.7 KiB
Vue
147 lines
3.7 KiB
Vue
<script>
|
|
import { GlButton, GlForm, GlFormGroup, GlFormInput, GlLink, GlSprintf } from '@gitlab/ui';
|
|
import { helpPagePath } from '~/helpers/help_page_helper';
|
|
import { isAbsolute } from '~/lib/utils/url_utility';
|
|
import { __ } from '~/locale';
|
|
|
|
export default {
|
|
components: {
|
|
GlButton,
|
|
GlForm,
|
|
GlFormGroup,
|
|
GlFormInput,
|
|
GlLink,
|
|
GlSprintf,
|
|
},
|
|
props: {
|
|
environment: {
|
|
required: true,
|
|
type: Object,
|
|
},
|
|
title: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
cancelPath: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
loading: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
i18n: {
|
|
header: __('Environments'),
|
|
helpMessage: __(
|
|
'Environments allow you to track deployments of your application. %{linkStart}More information%{linkEnd}.',
|
|
),
|
|
nameLabel: __('Name'),
|
|
nameFeedback: __('This field is required'),
|
|
urlLabel: __('External URL'),
|
|
urlFeedback: __('The URL should start with http:// or https://'),
|
|
save: __('Save'),
|
|
cancel: __('Cancel'),
|
|
},
|
|
helpPagePath: helpPagePath('ci/environments/index.md'),
|
|
data() {
|
|
return {
|
|
visited: {
|
|
name: null,
|
|
url: null,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
valid() {
|
|
return {
|
|
name: this.visited.name && this.environment.name !== '',
|
|
url: this.visited.url && isAbsolute(this.environment.externalUrl),
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
onChange(env) {
|
|
this.$emit('change', env);
|
|
},
|
|
visit(field) {
|
|
this.visited[field] = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<h3 class="page-title">
|
|
{{ title }}
|
|
</h3>
|
|
<hr />
|
|
<div class="row gl-mt-3 gl-mb-3">
|
|
<div class="col-lg-3">
|
|
<h4 class="gl-mt-0">
|
|
{{ $options.i18n.header }}
|
|
</h4>
|
|
<p>
|
|
<gl-sprintf :message="$options.i18n.helpMessage">
|
|
<template #link="{ content }">
|
|
<gl-link :href="$options.helpPagePath">{{ content }}</gl-link>
|
|
</template>
|
|
</gl-sprintf>
|
|
</p>
|
|
</div>
|
|
<gl-form
|
|
id="new_environment"
|
|
:aria-label="title"
|
|
class="col-lg-9"
|
|
@submit.prevent="$emit('submit')"
|
|
>
|
|
<gl-form-group
|
|
:label="$options.i18n.nameLabel"
|
|
label-for="environment_name"
|
|
:state="valid.name"
|
|
:invalid-feedback="$options.i18n.nameFeedback"
|
|
>
|
|
<gl-form-input
|
|
id="environment_name"
|
|
:value="environment.name"
|
|
:state="valid.name"
|
|
name="environment[name]"
|
|
required
|
|
@input="onChange({ ...environment, name: $event })"
|
|
@blur="visit('name')"
|
|
/>
|
|
</gl-form-group>
|
|
<gl-form-group
|
|
:label="$options.i18n.urlLabel"
|
|
:state="valid.url"
|
|
:invalid-feedback="$options.i18n.urlFeedback"
|
|
label-for="environment_external_url"
|
|
>
|
|
<gl-form-input
|
|
id="environment_external_url"
|
|
:value="environment.externalUrl"
|
|
:state="valid.url"
|
|
name="environment[external_url]"
|
|
type="url"
|
|
@input="onChange({ ...environment, externalUrl: $event })"
|
|
@blur="visit('url')"
|
|
/>
|
|
</gl-form-group>
|
|
|
|
<div class="form-actions">
|
|
<gl-button
|
|
:loading="loading"
|
|
type="submit"
|
|
variant="confirm"
|
|
name="commit"
|
|
class="js-no-auto-disable"
|
|
>{{ $options.i18n.save }}</gl-button
|
|
>
|
|
<gl-button :href="cancelPath">{{ $options.i18n.cancel }}</gl-button>
|
|
</div>
|
|
</gl-form>
|
|
</div>
|
|
</div>
|
|
</template>
|