diff options
Diffstat (limited to 'app/assets/javascripts/pages/groups/new')
3 files changed, 119 insertions, 13 deletions
diff --git a/app/assets/javascripts/pages/groups/new/components/app.vue b/app/assets/javascripts/pages/groups/new/components/app.vue new file mode 100644 index 00000000000..9aac364d20e --- /dev/null +++ b/app/assets/javascripts/pages/groups/new/components/app.vue @@ -0,0 +1,55 @@ +<script> +import importGroupIllustration from '@gitlab/svgs/dist/illustrations/group-import.svg'; +import newGroupIllustration from '@gitlab/svgs/dist/illustrations/group-new.svg'; + +import { s__ } from '~/locale'; +import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue'; +import createGroupDescriptionDetails from './create_group_description_details.vue'; + +const PANELS = [ + { + name: 'create-group-pane', + selector: '#create-group-pane', + title: s__('GroupsNew|Create group'), + description: s__( + 'GroupsNew|Assemble related projects together and grant members access to several projects at once.', + ), + illustration: newGroupIllustration, + details: createGroupDescriptionDetails, + }, + { + name: 'import-group-pane', + selector: '#import-group-pane', + title: s__('GroupsNew|Import group'), + description: s__( + 'GroupsNew|Export groups with all their related data and move to a new GitLab instance.', + ), + illustration: importGroupIllustration, + details: 'Migrate your existing groups from another instance of GitLab.', + }, +]; + +export default { + components: { + NewNamespacePage, + }, + props: { + hasErrors: { + type: Boolean, + required: false, + default: false, + }, + }, + PANELS, +}; +</script> + +<template> + <new-namespace-page + :jump-to-last-persisted-panel="hasErrors" + :initial-breadcrumb="s__('New group')" + :panels="$options.PANELS" + :title="s__('GroupsNew|Create new group')" + persistence-key="new_group_last_active_tab" + /> +</template> diff --git a/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue b/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue new file mode 100644 index 00000000000..ea08a0821a8 --- /dev/null +++ b/app/assets/javascripts/pages/groups/new/components/create_group_description_details.vue @@ -0,0 +1,44 @@ +<script> +import { GlSprintf, GlLink } from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; + +export default { + components: { + GlLink, + GlSprintf, + }, + paths: { + groupsHelpPath: helpPagePath('user/group/index'), + subgroupsHelpPath: helpPagePath('user/group/subgroups/index'), + }, +}; +</script> + +<template> + <div> + <p> + <gl-sprintf + :message=" + s__( + 'GroupsNew|%{linkStart}Groups%{linkEnd} allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects. Groups can also be nested by creating subgroups.', + ) + " + > + <template #link="{ content }"> + <gl-link :href="$options.paths.groupsHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <p> + <gl-sprintf + :message=" + s__('GroupsNew|Groups can also be nested by creating %{linkStart}subgroups%{linkEnd}.') + " + > + <template #link="{ content }"> + <gl-link :href="$options.paths.subgroupsHelpPath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> +</template> diff --git a/app/assets/javascripts/pages/groups/new/index.js b/app/assets/javascripts/pages/groups/new/index.js index 569b5afd676..7557edb1b49 100644 --- a/app/assets/javascripts/pages/groups/new/index.js +++ b/app/assets/javascripts/pages/groups/new/index.js @@ -1,8 +1,9 @@ -import $ from 'jquery'; +import Vue from 'vue'; import BindInOut from '~/behaviors/bind_in_out'; import initFilePickers from '~/file_pickers'; import Group from '~/group'; -import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import NewGroupCreationApp from './components/app.vue'; import GroupPathValidator from './group_path_validator'; new GroupPathValidator(); // eslint-disable-line no-new @@ -12,15 +13,21 @@ initFilePickers(); new Group(); // eslint-disable-line no-new -const CONTAINER_SELECTOR = '.group-edit-container .nav-tabs'; -const DEFAULT_ACTION = '#create-group-pane'; -// eslint-disable-next-line no-new -new LinkedTabs({ - defaultAction: DEFAULT_ACTION, - parentEl: CONTAINER_SELECTOR, - hashedTabs: true, -}); - -if (window.location.hash) { - $(CONTAINER_SELECTOR).find(`a[href="${window.location.hash}"]`).tab('show'); +function initNewGroupCreation(el) { + const { hasErrors } = el.dataset; + + const props = { + hasErrors: parseBoolean(hasErrors), + }; + + return new Vue({ + el, + render(h) { + return h(NewGroupCreationApp, { props }); + }, + }); } + +const el = document.querySelector('.js-new-group-creation'); + +initNewGroupCreation(el); |