Commit 17606b5d authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Fix disable submit button without a selected group

Re-instates the behaviour that was initially
introduced in:
https://gitlab.com/gitlab-org/gitlab-foss/-/merge_requests/31387

Display alert for paid groups
parent d7627e71
<script>
import { GlFormGroup } from '@gitlab/ui';
import { GlAlert, GlFormGroup, GlLink, GlSprintf } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue';
......@@ -8,7 +8,10 @@ export default {
name: 'TransferGroupForm',
components: {
ConfirmDanger,
GlAlert,
GlFormGroup,
GlLink,
GlSprintf,
NamespaceSelect,
},
props: {
......@@ -16,6 +19,14 @@ export default {
type: Object,
required: true,
},
isPaidGroup: {
type: Boolean,
required: true,
},
paidGroupHelpLink: {
type: String,
required: true,
},
isDisabled: {
type: Boolean,
required: false,
......@@ -39,6 +50,9 @@ export default {
selectedNamespaceId() {
return this.selectedId;
},
disableSubmitButton() {
return this.isDisabled || !this.selectedId;
},
},
methods: {
handleSelected({ id }) {
......@@ -46,8 +60,11 @@ export default {
},
},
i18n: {
dropdownTitle: s__('GroupSettings|Select parent group'),
emptyNamespaceTitle: __('No parent group'),
dropdownTitle: s__('GroupSettings|Select parent group'),
paidGroupMessage: s__(
"GroupSettings|This group can't be transfered because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.",
),
},
};
</script>
......@@ -69,13 +86,20 @@ export default {
name="new_parent_group_id"
:value="selectedId"
/>
<confirm-danger
button-class="qa-transfer-button"
:disabled="isDisabled"
:phrase="confirmationPhrase"
:button-text="confirmButtonText"
@confirm="$emit('confirm')"
/>
</gl-form-group>
<gl-alert v-if="isPaidGroup" class="gl-mb-5">
<gl-sprintf :message="$options.i18n.paidGroupMessage">
<template #link="{ content }">
<gl-link :href="paidGroupHelpLink">{{ content }}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
<confirm-danger
button-class="qa-transfer-button"
:disabled="disableSubmitButton"
:phrase="confirmationPhrase"
:button-text="confirmButtonText"
@confirm="$emit('confirm')"
/>
</div>
</template>
import Vue from 'vue';
import { __ } from '~/locale';
import { parseBoolean } from '~/lib/utils/common_utils';
import TransferGroupForm from './components/transfer_group_form.vue';
const prepareGroups = (rawGroups) => {
......@@ -23,6 +23,8 @@ export default () => {
phrase: confirmationPhrase = '',
confirmDangerMessage = '',
parentGroups = [],
isPaidGroup,
paidGroupHelpLink,
} = el.dataset;
return new Vue({
......@@ -34,6 +36,8 @@ export default () => {
return createElement(TransferGroupForm, {
props: {
parentGroups: prepareGroups(parentGroups),
isPaidGroup: parseBoolean(isPaidGroup),
paidGroupHelpLink,
confirmButtonText,
confirmationPhrase,
},
......
export default function setupTransferEdit(formSelector, watchField, targetSelectorId) {
const transferForm = document.querySelector(formSelector);
console.log('formSelector', formSelector);
console.log('watchField', watchField);
console.log('transferForm', transferForm);
const field = transferForm.querySelector(watchField);
console.log('field', field);
const valueField = transferForm.querySelector(targetSelectorId);
console.log('valueField.value', valueField.value);
import $ from 'jquery';
field.addEventListener('click', (e) => {
console.log('event::click');
export default function setupTransferEdit(formSelector, targetSelector) {
const $transferForm = $(formSelector);
const $selectNamespace = $transferForm.find(targetSelector);
console.log('valueField', valueField, valueField.value);
console.log('e', e.currentTarget);
console.log('e', e.target);
transferForm
.querySelector("input[type='submit']")
// .querySelector("input[type='submit']")
.setAttribute('disabled', !valueField.val() ? 'disabled' : '');
$selectNamespace.on('change', () => {
$transferForm.find(':submit').prop('disabled', !$selectNamespace.val());
});
field.addEventListener('select', () => {
console.log('event::select');
// transferForm
// .querySelector("input[type='submit']")
// .setAttribute('disabled', !field.val() ? 'disabled' : '');
});
field.addEventListener('change', () => {
console.log('event::change');
// transferForm
// .querySelector("input[type='submit']")
// .setAttribute('disabled', !field.val() ? 'disabled' : '');
});
// field.trigger('change');
transferForm.querySelector("input[type='submit']").setAttribute('disabled', 'disabled');
$selectNamespace.trigger('change');
}
import { GROUP_BADGE } from '~/badges/constants';
import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
import initFilePickers from '~/file_pickers';
import TransferDropdown from '~/groups/transfer_dropdown';
import initTransferGroupForm from '~/groups/init_transfer_group_form';
import setupTransferEdit from '~/groups/transfer_edit';
import groupsSelect from '~/groups_select';
import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings';
import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
......@@ -21,7 +19,6 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),
);
mountBadgeSettings(GROUP_BADGE);
// setupTransferEdit('.js-group-transfer-form', '#new_parent_group_id');
// Initialize Subgroups selector
groupsSelect();
......@@ -30,6 +27,4 @@ document.addEventListener('DOMContentLoaded', () => {
initSearchSettings();
initCascadingSettingsLockPopovers();
return new TransferDropdown();
});
......@@ -112,12 +112,10 @@ table.pipeline-project-metrics tr td {
font-weight: $gl-font-weight-normal;
}
// TODO: Remove these
.js-groups-dropdown {
width: 100%;
}
// TODO: Remove these
.dropdown-group-transfer {
bottom: 100%;
top: initial;
......
- form_id = "transfer-group-form"
- initial_data = { button_text: s_('GroupSettings|Transfer group'), confirm_danger_message: transfer_group_message(@group), phrase: @group.name, target_form_id: form_id, qa_selector: "transfer_group_button", parent_groups: parent_group_options(group) }
- initial_data = { button_text: s_('GroupSettings|Transfer group'), confirm_danger_message: transfer_group_message(@group), phrase: @group.name, target_form_id: form_id, qa_selector: "transfer_group_button", parent_groups: parent_group_options(group), is_paid_group: group.paid?.to_s, paid_group_help_link: help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace') }
.sub-section
%h4.warning-title= s_('GroupSettings|Transfer group')
......@@ -12,12 +12,4 @@
%li= s_('GroupSettings|You can only transfer the group to a group you manage.')
%li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
%li= s_("GroupSettings|If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
-# TODO: move this all into the form
.form-group
- if group.paid?
.gl-alert.gl-alert-info.gl-mb-5
= sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
.gl-alert-body
= html_escape(_("This group can't be transfered because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
.js-transfer-group-form{ data: initial_data }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment