1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
<script>
import { GlSprintf, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import { visitUrlWithAlerts } from '~/lib/utils/url_utility';
import { createAlert } from '~/alert';
import { helpPagePath } from '~/helpers/help_page_helper';
import createOrganizationMutation from '../graphql/mutations/create_organization.mutation.graphql';
import NewEditForm from '../../shared/components/new_edit_form.vue';
export default {
name: 'OrganizationNewApp',
components: { NewEditForm, GlSprintf, GlLink },
i18n: {
pageTitle: s__('Organization|New organization'),
pageDescription: s__(
'Organization|%{linkStart}Organizations%{linkEnd} are a top-level container to hold your groups and projects.',
),
errorMessage: s__('Organization|An error occurred creating an organization. Please try again.'),
successAlertTitle: s__('Organization|Organization successfully created.'),
successAlertMessage: s__('Organization|You can now start using your new organization.'),
},
data() {
return {
loading: false,
};
},
computed: {
organizationsHelpPagePath() {
return helpPagePath('user/organization/index');
},
},
methods: {
async onSubmit(formValues) {
this.loading = true;
try {
const {
data: {
createOrganization: { organization, errors },
},
} = await this.$apollo.mutate({
mutation: createOrganizationMutation,
variables: {
...formValues,
},
});
if (errors.length) {
// TODO: handle errors when using real API after https://gitlab.com/gitlab-org/gitlab/-/issues/417891 is complete.
return;
}
visitUrlWithAlerts(organization.path, [
{
id: 'organization-successfully-created',
title: this.$options.i18n.successAlertTitle,
message: this.$options.i18n.successAlertMessage,
variant: 'success',
},
]);
} catch (error) {
createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
} finally {
this.loading = false;
}
},
},
};
</script>
<template>
<div class="gl-py-6">
<h1 class="gl-mt-0 gl-font-size-h-display">{{ $options.i18n.pageTitle }}</h1>
<p>
<gl-sprintf :message="$options.i18n.pageDescription">
<template #link="{ content }"
><gl-link :href="organizationsHelpPagePath">{{ content }}</gl-link></template
>
</gl-sprintf>
</p>
<new-edit-form :loading="loading" @submit="onSubmit" />
</div>
</template>
|
