diff options
Diffstat (limited to 'app/assets')
14 files changed, 104 insertions, 127 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue index ed6c41e85c6..891e883b6c0 100644 --- a/app/assets/javascripts/super_sidebar/components/user_menu.vue +++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue @@ -12,7 +12,7 @@ import NewNavToggle from '~/nav/components/new_nav_toggle.vue'; import Tracking from '~/tracking'; import PersistentUserCallout from '~/persistent_user_callout'; import { USER_MENU_TRACKING_DEFAULTS, DROPDOWN_Y_OFFSET, IMPERSONATING_OFFSET } from '../constants'; -import UserNameGroup from './user_name_group.vue'; +import UserMenuProfileItem from './user_menu_profile_item.vue'; // Left offset required for the dropdown to be aligned with the super sidebar const DROPDOWN_X_OFFSET_BASE = -211; @@ -40,7 +40,7 @@ export default { GlDisclosureDropdownItem, GlButton, NewNavToggle, - UserNameGroup, + UserMenuProfileItem, }, directives: { SafeHtml, @@ -247,7 +247,10 @@ export default { </gl-button> </template> - <user-name-group :user="data" /> + <gl-disclosure-dropdown-group> + <user-menu-profile-item :user="data" /> + </gl-disclosure-dropdown-group> + <gl-disclosure-dropdown-group bordered> <gl-disclosure-dropdown-item v-if="data.status.can_update" diff --git a/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue new file mode 100644 index 00000000000..95255ce3d8e --- /dev/null +++ b/app/assets/javascripts/super_sidebar/components/user_menu_profile_item.vue @@ -0,0 +1,83 @@ +<script> +import { GlBadge, GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import { s__ } from '~/locale'; +import { USER_MENU_TRACKING_DEFAULTS } from '../constants'; + +export default { + i18n: { + user: { + busy: s__('UserProfile|Busy'), + }, + }, + components: { + GlBadge, + GlDisclosureDropdownItem, + GlTooltip, + }, + directives: { + SafeHtml, + }, + props: { + user: { + required: true, + type: Object, + }, + }, + computed: { + menuItem() { + const item = { + text: this.user.name, + }; + if (this.user.has_link_to_profile) { + item.href = this.user.link_to_profile; + + item.extraAttrs = { + ...USER_MENU_TRACKING_DEFAULTS, + 'data-track-label': 'user_profile', + 'data-testid': 'user-profile-link', + }; + } + + return item; + }, + }, +}; +</script> + +<template> + <gl-disclosure-dropdown-item :item="menuItem"> + <template #list-item> + <span class="gl-display-flex gl-flex-direction-column"> + <span> + <span class="gl-font-weight-bold"> + {{ user.name }} + </span> + <gl-badge v-if="user.status.busy" size="sm" variant="warning"> + {{ $options.i18n.user.busy }} + </gl-badge> + </span> + + <span class="gl-text-gray-400 gl-word-break-all">@{{ user.username }}</span> + + <span + v-if="user.status.customized" + ref="statusTooltipTarget" + data-testid="user-menu-status" + class="gl-display-flex gl-align-items-baseline gl-mt-2 gl-font-sm" + > + <gl-emoji :data-name="user.status.emoji" class="gl-mr-1" /> + <span v-safe-html="user.status.message_html" class="gl-text-truncate"></span> + <gl-tooltip + v-if="user.status.message_html" + :target="() => $refs.statusTooltipTarget" + boundary="viewport" + placement="bottom" + > + <span v-safe-html="user.status.message_html"></span> + </gl-tooltip> + </span> + </span> + </template> + </gl-disclosure-dropdown-item> +</template> diff --git a/app/assets/javascripts/super_sidebar/components/user_name_group.vue b/app/assets/javascripts/super_sidebar/components/user_name_group.vue deleted file mode 100644 index 29cc340116b..00000000000 --- a/app/assets/javascripts/super_sidebar/components/user_name_group.vue +++ /dev/null @@ -1,91 +0,0 @@ -<script> -import { - GlBadge, - GlDisclosureDropdownGroup, - GlDisclosureDropdownItem, - GlTooltip, -} from '@gitlab/ui'; -import SafeHtml from '~/vue_shared/directives/safe_html'; -import { s__ } from '~/locale'; -import { USER_MENU_TRACKING_DEFAULTS } from '../constants'; - -export default { - i18n: { - user: { - busy: s__('UserProfile|Busy'), - }, - }, - components: { - GlBadge, - GlDisclosureDropdownGroup, - GlDisclosureDropdownItem, - GlTooltip, - }, - directives: { - SafeHtml, - }, - props: { - user: { - required: true, - type: Object, - }, - }, - computed: { - menuItem() { - const item = { - text: this.user.name, - }; - if (this.user.has_link_to_profile) { - item.href = this.user.link_to_profile; - - item.extraAttrs = { - ...USER_MENU_TRACKING_DEFAULTS, - 'data-track-label': 'user_profile', - 'data-testid': 'user-profile-link', - }; - } - - return item; - }, - }, -}; -</script> - -<template> - <gl-disclosure-dropdown-group> - <gl-disclosure-dropdown-item :item="menuItem"> - <template #list-item> - <span class="gl-display-flex gl-flex-direction-column"> - <span> - <span class="gl-font-weight-bold"> - {{ user.name }} - </span> - <gl-badge v-if="user.status.busy" size="sm" variant="warning"> - {{ $options.i18n.user.busy }} - </gl-badge> - </span> - - <span class="gl-text-gray-400 gl-word-break-all">@{{ user.username }}</span> - - <span - v-if="user.status.customized" - ref="statusTooltipTarget" - data-testid="user-menu-status" - class="gl-display-flex gl-align-items-baseline gl-mt-2 gl-font-sm" - > - <gl-emoji :data-name="user.status.emoji" class="gl-mr-1" /> - <span v-safe-html="user.status.message_html" class="gl-text-truncate"></span> - <gl-tooltip - v-if="user.status.message_html" - :target="() => $refs.statusTooltipTarget" - boundary="viewport" - placement="bottom" - > - <span v-safe-html="user.status.message_html"></span> - </gl-tooltip> - </span> - </span> - </template> - </gl-disclosure-dropdown-item> - </gl-disclosure-dropdown-group> -</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue index c49c1316b1b..619f141144d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/action_buttons.vue @@ -83,12 +83,6 @@ export default { return btn.tooltipText; }, - actionButtonQaSelector(btn) { - if (btn.dataQaSelector) { - return btn.dataQaSelector; - } - return 'mr_widget_extension_actions_button'; - }, }, }; </script> @@ -105,7 +99,6 @@ export default { :target="btn.target" :class="[{ 'gl-mr-3': index !== tertiaryButtons.length - 1 }, btn.class]" :data-clipboard-text="btn.dataClipboardText" - :data-qa-selector="actionButtonQaSelector(btn)" :data-method="btn.dataMethod" :icon="btn.icon" :data-testid="btn.testId || 'extension-actions-button'" @@ -159,7 +152,6 @@ export default { :target="btn.target" :class="[{ 'gl-mr-1': index !== tertiaryButtons.length - 1 }, btn.class]" :data-clipboard-text="btn.dataClipboardText" - :data-qa-selector="actionButtonQaSelector(btn)" :data-method="btn.dataMethod" :icon="btn.icon" :data-testid="btn.testId || 'extension-actions-button'" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue index 6299f0fcbb8..ec72b74daa2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue @@ -75,7 +75,6 @@ export default { actions.push({ text: this.cancelButtonText, loading: this.isCancellingAutoMerge, - dataQaSelector: 'cancel_auto_merge_button', class: 'js-cancel-auto-merge', testId: 'cancelAutomaticMergeButton', onClick: () => this.cancelAutomaticMerge(), diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue index 4d906f29cb0..4454718a647 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue @@ -67,7 +67,7 @@ export default { actions.push({ text: this.revertLabel, tooltipText: this.revertTitle, - dataQaSelector: 'revert_button', + testId: 'revert-button', onClick: () => this.openRevertModal(), }); } else if (this.mr.revertInForkPath) { @@ -75,7 +75,7 @@ export default { text: this.revertLabel, tooltipText: this.revertTitle, href: this.mr.revertInForkPath, - dataQaSelector: 'revert_button', + testId: 'revert-button', dataMethod: 'post', }); } @@ -84,7 +84,7 @@ export default { actions.push({ text: this.cherryPickLabel, tooltipText: this.cherryPickTitle, - dataQaSelector: 'cherry_pick_button', + testId: 'cherry-pick-button', onClick: () => this.openCherryPickModal(), }); } else if (this.mr.cherryPickInForkPath) { @@ -92,7 +92,7 @@ export default { text: this.cherryPickLabel, tooltipText: this.cherryPickTitle, href: this.mr.cherryPickInForkPath, - dataQaSelector: 'cherry_pick_button', + testId: 'cherry-pick-button', dataMethod: 'post', }); } diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index 415f58ea8e6..a4afdee4d49 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -230,7 +230,6 @@ export default { v-if="!rebasingError" class="gl-w-100 gl-md-w-auto gl-flex-grow-1 gl-ml-0! gl-text-body! gl-md-mr-3" data-testid="rebase-message" - data-qa-selector="no_fast_forward_message_content" > <bold-text :message="$options.i18n.rebaseError" /> </span> @@ -247,7 +246,6 @@ export default { :loading="isMakingRequest" variant="confirm" size="small" - data-qa-selector="mr_rebase_button" data-testid="standard-rebase-button" class="gl-align-self-start" @click="tryRebase" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue index 9da754d01fc..00383418f2d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue @@ -32,7 +32,7 @@ export default { > <span class="gl-md-mr-3 gl-flex-grow-1 gl-ml-0! gl-text-body!" - data-qa-selector="head_mismatch_content" + data-testid="head-mismatch-content" > <bold-text :message="$options.i18n.I18N_SHA_MISMATCH.warningMessage" /> </span> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue index 97ef96fe382..f1bd5bb25bb 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue @@ -46,7 +46,7 @@ export default { :disabled="isDisabled" name="squash" class="js-squash-checkbox gl-mr-2" - data-qa-selector="squash_checkbox" + data-testid="squash-checkbox" :title="tooltipTitle" @change="(checked) => $emit('input', checked)" > diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue index 55eeb9d0e63..5b7657f15d9 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue @@ -80,12 +80,6 @@ export default { return btn.tooltipText; }, - actionButtonQaSelector(btn) { - if (btn.dataQaSelector) { - return btn.dataQaSelector; - } - return 'mr_widget_extension_actions_button'; - }, }, }; </script> @@ -121,7 +115,6 @@ export default { :target="btn.target" :class="[{ 'gl-mr-3': index !== tertiaryButtons.length - 1 }, btn.class]" :data-clipboard-text="btn.dataClipboardText" - :data-qa-selector="actionButtonQaSelector(btn)" :data-method="btn.dataMethod" :icon="btn.icon || btn.iconName" :data-testid="btn.testId || 'extension-actions-button'" diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index 175a0b0563f..b55b59fe581 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -576,7 +576,7 @@ export default { </mr-widget-alert-message> </div> - <div class="mr-widget-section" data-qa-selector="mr_widget_content"> + <div class="mr-widget-section" data-testid="mr-widget-content"> <component :is="componentName" :mr="mr" :service="service" /> <ready-to-merge v-if="mr.commitsCount" diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue index 05ce007e615..4ebd8861a67 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue @@ -60,7 +60,7 @@ export default { <template> <gl-disclosure-dropdown - data-qa-selector="apply_suggestion_dropdown" + data-testid="apply-suggestion-dropdown" fluid-width placement="right" size="small" @@ -81,7 +81,7 @@ export default { class="apply-suggestions-input-min-width" :placeholder="defaultCommitMessage" submit-on-enter - data-qa-selector="commit_message_field" + data-testid="commit-message-field" @submit="onApply" /> @@ -93,7 +93,7 @@ export default { class="gl-w-auto! gl-mt-3 gl-align-self-end" category="primary" variant="confirm" - data-qa-selector="commit_with_custom_message_button" + data-testid="commit-with-custom-message-button" @click="onApply" > {{ __('Apply') }} diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index a569b4ea9a7..741bdfd211b 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -281,7 +281,7 @@ export default { :tag-content="lineContent" tracking-property="codeSuggestion" icon="doc-code" - data-qa-selector="suggestion_button" + data-testid="suggestion-button" class="js-suggestion-btn" @click="handleSuggestDismissed" /> @@ -305,7 +305,7 @@ export default { variant="confirm" category="primary" size="small" - data-qa-selector="dismiss_suggestion_popover_button" + data-testid="dismiss-suggestion-popover-button" @click="handleSuggestDismissed" > {{ __('Got it') }} diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue index 8a0ca8ebac1..a822e2a6151 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -144,13 +144,13 @@ export default { <gl-icon name="question-o" css-classes="link-highlight" /> </a> </div> - <gl-badge v-if="isApplied" variant="success" data-qa-selector="applied_badge"> + <gl-badge v-if="isApplied" variant="success" data-testid="applied-badge"> {{ __('Applied') }} </gl-badge> <div v-else-if="isApplying" class="gl-display-flex gl-align-items-center text-secondary" - data-qa-selector="applying_badge" + data-testid="applying-badge" > <gl-loading-icon size="sm" class="gl-align-items-center gl-justify-content-center gl-mr-3" /> <span>{{ applyingSuggestionsMessage }}</span> @@ -169,7 +169,7 @@ export default { <div v-else-if="!isDisableButton && suggestionsCount > 1"> <gl-button class="btn-inverted js-add-to-batch-btn btn-grouped" - data-qa-selector="add_suggestion_batch_button" + data-testid="add-suggestion-batch-button" :disabled="isDisableButton" size="small" @click="addSuggestionToBatch" |