diff options
Diffstat (limited to 'app/assets')
14 files changed, 202 insertions, 68 deletions
diff --git a/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js b/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js index c4cc6939121..da09852a7f4 100644 --- a/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js +++ b/app/assets/javascripts/ci/pipeline_details/pipeline_details_bundle.js @@ -33,10 +33,16 @@ export default async function initPipelineDetailsBundle() { if (tabsEl) { const { dataset } = tabsEl; + const dismissalDescriptions = JSON.parse(dataset.dismissalDescriptions || '{}'); const { createAppOptions } = await import('ee_else_ce/ci/pipeline_details/pipeline_tabs'); const { createPipelineTabs } = await import('./pipeline_tabs'); const { routes } = await import('ee_else_ce/ci/pipeline_details/routes'); + const securityRoute = routes.find((route) => route.path === '/security'); + if (securityRoute) { + securityRoute.props = { dismissalDescriptions }; + } + const router = new VueRouter({ mode: 'history', base: dataset.pipelinePath, diff --git a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue index da165413341..20b42e26f08 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue @@ -52,7 +52,7 @@ export default { }; </script> <template> - <div class="gl-display-flex gl-flex-wrap gl-gap-3"> + <div class="gl-display-flex gl-flex-wrap gl-gap-3 gl-mb-4"> <gl-button v-if="showFileTreeToggle" id="file-tree-toggle" diff --git a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue index eecf8e42f4b..665ca907ed9 100644 --- a/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue +++ b/app/assets/javascripts/ci/pipeline_editor/components/header/pipeline_editor_header.vue @@ -33,7 +33,7 @@ export default { </script> <template> <gl-card - class="gl-new-card gl-mb-3" + class="gl-new-card gl-mb-3 gl-mt-0" header-class="gl-new-card-header" body-class="gl-new-card-body gl-py-4 gl-px-5" > diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue index 8e02048f494..20c95174989 100644 --- a/app/assets/javascripts/merge_requests/components/compare_app.vue +++ b/app/assets/javascripts/merge_requests/components/compare_app.vue @@ -23,9 +23,6 @@ export default { currentProject: { default: () => ({}), }, - currentBranch: { - default: () => ({}), - }, inputs: { default: () => ({}), }, @@ -39,6 +36,13 @@ export default { default: '', }, }, + props: { + currentBranch: { + type: Object, + required: false, + default: () => ({}), + }, + }, data() { return { selectedProject: this.currentProject, @@ -57,6 +61,12 @@ export default { return this.commitHtml || this.loading || !this.selectedBranch.value; }, }, + watch: { + currentBranch(newVal) { + this.selectedBranch = newVal; + this.fetchCommit(); + }, + }, mounted() { this.fetchCommit(); }, @@ -67,6 +77,7 @@ export default { selectBranch(branch) { this.selectedBranch = branch; this.fetchCommit(); + this.$emit('select-branch', branch.value); }, async fetchCommit() { if (!this.selectedBranch.value) return; @@ -109,6 +120,7 @@ export default { :default="currentBranch" :toggle-class="toggleClass.branch" :qa-selector="branchQaSelector" + data-testid="compare-dropdown" @selected="selectBranch" /> </div> diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue index a5a4e683214..6f46b41ee5b 100644 --- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue +++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue @@ -70,6 +70,12 @@ export default { ); }, }, + watch: { + default(newVal) { + this.current = newVal; + this.selected = newVal.value; + }, + }, methods: { async fetchData() { if (!this.endpoint) return; diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/branch_finder.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/branch_finder.js new file mode 100644 index 00000000000..ee84f54978a --- /dev/null +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/branch_finder.js @@ -0,0 +1 @@ +export const findTargetBranch = async () => {}; diff --git a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js index f71a1041068..9db400b3b0a 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js @@ -2,6 +2,8 @@ import Vue from 'vue'; import { mountMarkdownEditor } from 'ee_else_ce/vue_shared/components/markdown/mount_markdown_editor'; +import { findTargetBranch } from 'ee_else_ce/pages/projects/merge_requests/creations/new/branch_finder'; + import initPipelines from '~/commit/pipelines/pipelines_bundle'; import MergeRequest from '~/merge_request'; import CompareApp from '~/merge_requests/components/compare_app.vue'; @@ -13,14 +15,15 @@ if (mrNewCompareNode) { const targetCompareEl = document.getElementById('js-target-project-dropdown'); const sourceCompareEl = document.getElementById('js-source-project-dropdown'); const compareEl = document.querySelector('.js-merge-request-new-compare'); + const targetBranch = Vue.observable({ name: '' }); + const currentSourceBranch = JSON.parse(sourceCompareEl.dataset.currentBranch); // eslint-disable-next-line no-new new Vue({ el: sourceCompareEl, name: 'SourceCompareApp', provide: { currentProject: JSON.parse(sourceCompareEl.dataset.currentProject), - currentBranch: JSON.parse(sourceCompareEl.dataset.currentBranch), branchCommitPath: compareEl.dataset.sourceBranchUrl, inputs: { project: { @@ -42,18 +45,34 @@ if (mrNewCompareNode) { }, branchQaSelector: 'source_branch_dropdown', }, + methods: { + async selectedBranch(branchName) { + const targetBranchName = await findTargetBranch(branchName); + + if (targetBranchName) { + targetBranch.name = targetBranchName; + } + }, + }, render(h) { - return h(CompareApp); + return h(CompareApp, { + props: { + currentBranch: currentSourceBranch, + }, + on: { + 'select-branch': this.selectedBranch, + }, + }); }, }); + const currentTargetBranch = JSON.parse(targetCompareEl.dataset.currentBranch); // eslint-disable-next-line no-new new Vue({ el: targetCompareEl, name: 'TargetCompareApp', provide: { currentProject: JSON.parse(targetCompareEl.dataset.currentProject), - currentBranch: JSON.parse(targetCompareEl.dataset.currentBranch), projectsPath: targetCompareEl.dataset.targetProjectsPath, branchCommitPath: compareEl.dataset.targetBranchUrl, inputs: { @@ -75,8 +94,17 @@ if (mrNewCompareNode) { branch: 'js-target-branch gl-font-monospace', }, }, + computed: { + currentBranch() { + if (targetBranch.name) { + return { text: targetBranch.name, value: targetBranch.name }; + } + + return currentTargetBranch; + }, + }, render(h) { - return h(CompareApp); + return h(CompareApp, { props: { currentBranch: this.currentBranch } }); }, }); } else { diff --git a/app/assets/javascripts/projects/settings_service_desk/components/custom_email_form.vue b/app/assets/javascripts/projects/settings_service_desk/components/custom_email_form.vue index 3ce41121100..09bc275cbd4 100644 --- a/app/assets/javascripts/projects/settings_service_desk/components/custom_email_form.vue +++ b/app/assets/javascripts/projects/settings_service_desk/components/custom_email_form.vue @@ -1,5 +1,14 @@ <script> -import { GlButton, GlForm, GlFormGroup, GlFormInputGroup, GlFormInput } from '@gitlab/ui'; +import { + GlButton, + GlForm, + GlFormGroup, + GlFormInputGroup, + GlFormInput, + GlLink, + GlSprintf, +} from '@gitlab/ui'; +import { helpPagePath } from '~/helpers/help_page_helper'; import { isEmptyValue, hasMinimumLength, isIntegerGreaterThan, isEmail } from '~/lib/utils/forms'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { @@ -23,6 +32,9 @@ import { } from '../custom_email_constants'; export default { + customEmailHelpUrl: helpPagePath('user/project/service_desk/configure.html', { + anchor: 'custom-email-address', + }), components: { ClipboardButton, GlButton, @@ -30,6 +42,8 @@ export default { GlFormGroup, GlFormInputGroup, GlFormInput, + GlLink, + GlSprintf, }, I18N_FORM_INTRODUCTION_PARAGRAPH, I18N_FORM_CUSTOM_EMAIL_LABEL, @@ -137,7 +151,19 @@ export default { <template> <div> - <p>{{ $options.I18N_FORM_INTRODUCTION_PARAGRAPH }}</p> + <p> + <gl-sprintf :message="$options.I18N_FORM_INTRODUCTION_PARAGRAPH"> + <template #link="{ content }"> + <gl-link + :href="$options.customEmailHelpUrl" + class="gl-display-inline-block" + target="_blank" + > + {{ content }} + </gl-link> + </template> + </gl-sprintf> + </p> <gl-form class="js-quick-submit" @submit.prevent="onSubmit"> <gl-form-group :label="$options.I18N_FORM_FORWARDING_LABEL" diff --git a/app/assets/javascripts/projects/settings_service_desk/components/custom_email_wrapper.vue b/app/assets/javascripts/projects/settings_service_desk/components/custom_email_wrapper.vue index 7e040e6001a..03ba99bcf71 100644 --- a/app/assets/javascripts/projects/settings_service_desk/components/custom_email_wrapper.vue +++ b/app/assets/javascripts/projects/settings_service_desk/components/custom_email_wrapper.vue @@ -233,6 +233,7 @@ export default { <gl-link :href="$options.FEEDBACK_ISSUE_URL" target="_blank" + data-testid="feedback-link" class="gl-text-blue-600 font-size-inherit" >{{ content }} </gl-link> diff --git a/app/assets/javascripts/projects/settings_service_desk/custom_email_constants.js b/app/assets/javascripts/projects/settings_service_desk/custom_email_constants.js index cdf2e53982e..aafd77bd25e 100644 --- a/app/assets/javascripts/projects/settings_service_desk/custom_email_constants.js +++ b/app/assets/javascripts/projects/settings_service_desk/custom_email_constants.js @@ -17,7 +17,7 @@ export const I18N_TOAST_ENABLED = s__('ServiceDesk|Custom email enabled.'); export const I18N_TOAST_DISABLED = s__('ServiceDesk|Custom email disabled.'); export const I18N_FORM_INTRODUCTION_PARAGRAPH = s__( - 'ServiceDesk|Connect a custom email address your customers can use to create Service Desk issues. Forward all emails from your custom email address to the Service Desk email address of this project. GitLab will send Service Desk emails from the custom address on your behalf using your SMTP credentials.', + 'ServiceDesk|Connect a custom email address your customers can use to create Service Desk issues. Forward all emails from your custom email address to the Service Desk email address of this project. GitLab will send Service Desk emails from the custom address on your behalf using your SMTP credentials. %{linkStart}Learn more about prerequisites and the verification process%{linkEnd}.', ); export const I18N_FORM_FORWARDING_LABEL = s__( 'ServiceDesk|Service Desk email address to forward emails to', diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue index 93e004f0328..46735c2c70a 100644 --- a/app/assets/javascripts/super_sidebar/components/nav_item.vue +++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue @@ -1,6 +1,6 @@ <script> import { GlAvatar, GlButton, GlIcon, GlBadge, GlTooltipDirective } from '@gitlab/ui'; -import { s__ } from '~/locale'; +import { s__, sprintf } from '~/locale'; import { CLICK_MENU_ITEM_ACTION, CLICK_PINNED_MENU_ITEM_ACTION, @@ -12,7 +12,9 @@ import NavItemRouterLink from './nav_item_router_link.vue'; export default { i18n: { + pin: s__('Navigation|Pin %{title}'), pinItem: s__('Navigation|Pin item'), + unpin: s__('Navigation|Unpin %{title}'), unpinItem: s__('Navigation|Unpin item'), }, name: 'NavItem', @@ -143,6 +145,16 @@ export default { avatarShape() { return this.item.avatar_shape || 'rect'; }, + pinAriaLabel() { + return sprintf(this.$options.i18n.pin, { + title: this.item.title, + }); + }, + unpinAriaLabel() { + return sprintf(this.$options.i18n.unpin, { + title: this.item.title, + }); + }, }, mounted() { if (this.item.is_active) { @@ -151,26 +163,27 @@ export default { }, methods: { togglePointerEvents() { - if (this.isMouseIn) { - this.canClickPinButton = true; - } else { - this.canClickPinButton = false; - } + this.canClickPinButton = this.isMouseIn; }, }, }; </script> <template> - <li @mouseenter="isMouseIn = true" @mouseleave="isMouseIn = false"> + <li + class="gl-relative show-on-focus-or-hover--context hide-on-focus-or-hover--context transition-opacity-on-hover--context" + data-testid="nav-item" + @mouseenter="isMouseIn = true" + @mouseleave="isMouseIn = false" + > <component :is="navItemLinkComponent" #default="{ isActive }" v-bind="linkProps" - class="nav-item-link gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-focus--focus show-on-focus-or-hover--context" + class="gl-relative gl-display-flex gl-align-items-center gl-min-h-7 gl-gap-3 gl-mb-1 gl-py-2 gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-focus--focus show-on-focus-or-hover--control hide-on-focus-or-hover--control" :class="computedLinkClasses" - data-qa-selector="nav_item_link" data-testid="nav-item-link" + data-qa-selector="nav_item_link" > <div :class="[isActive ? 'gl-opacity-10' : 'gl-opacity-0']" @@ -204,41 +217,47 @@ export default { </div> </div> <slot name="actions"></slot> - <span v-if="hasPill || isPinnable" class="gl-text-right gl-relative gl-min-w-8"> + <span v-if="hasPill" class="gl-text-right gl-relative gl-min-w-8"> <gl-badge v-if="hasPill" size="sm" variant="neutral" class="gl-bg-t-gray-a-08!" - :class="{ 'nav-item-badge gl-absolute gl-right-0 gl-top-2': isPinnable }" + :class="{ + 'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable, + }" > {{ pillData }} </gl-badge> - <gl-button - v-if="isPinnable && !isPinned" - v-gl-tooltip.ds500.right.viewport="$options.i18n.pinItem" - size="small" - category="tertiary" - icon="thumbtack" - class="show-on-focus-or-hover--target" - :class="{ 'gl-pointer-events-none': !canClickPinButton }" - :aria-label="$options.i18n.pinItem" - @click.prevent="$emit('pin-add', item.id)" - @transitionend="togglePointerEvents" - /> - <gl-button - v-else-if="isPinnable && isPinned" - v-gl-tooltip.ds500.right.viewport="$options.i18n.unpinItem" - size="small" - category="tertiary" - :aria-label="$options.i18n.unpinItem" - icon="thumbtack-solid" - class="show-on-focus-or-hover--target" - :class="{ 'gl-pointer-events-none': !canClickPinButton }" - @click.prevent="$emit('pin-remove', item.id)" - @transitionend="togglePointerEvents" - /> </span> </component> + <template v-if="isPinnable"> + <gl-button + v-if="isPinned" + v-gl-tooltip.noninteractive.ds500.right.viewport="$options.i18n.unpinItem" + :aria-label="unpinAriaLabel" + category="tertiary" + class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-top-2" + :class="{ 'gl-pointer-events-none': !canClickPinButton }" + data-testid="nav-item-unpin" + icon="thumbtack-solid" + size="small" + @click="$emit('pin-remove', item.id)" + @transitionend="togglePointerEvents" + /> + <gl-button + v-else + v-gl-tooltip.noninteractive.ds500.right.viewport="$options.i18n.pinItem" + :aria-label="pinAriaLabel" + category="tertiary" + class="show-on-focus-or-hover--target transition-opacity-on-hover--target always-animate gl-absolute gl-right-3 gl-top-2" + :class="{ 'gl-pointer-events-none': !canClickPinButton }" + data-testid="nav-item-pin" + icon="thumbtack" + size="small" + @click="$emit('pin-add', item.id)" + @transitionend="togglePointerEvents" + /> + </template> </li> </template> diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue index 2c939487784..83c0419664a 100644 --- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue +++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue @@ -150,7 +150,7 @@ export default { <user-bar :has-collapse-button="!showOverlay" :sidebar-data="sidebarData" /> <div v-if="showTrialStatusWidget" class="gl-px-2 gl-py-2"> <trial-status-widget - class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! nav-item-link gl-py-3" + class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none! gl-py-3" /> <trial-status-popover /> </div> diff --git a/app/assets/stylesheets/disable_animations.scss b/app/assets/stylesheets/disable_animations.scss index 1566425ad42..7472340896f 100644 --- a/app/assets/stylesheets/disable_animations.scss +++ b/app/assets/stylesheets/disable_animations.scss @@ -1,6 +1,6 @@ *:not( /* Keep transition enabled where it would otherwise break specs */ - .nav-item-link .show-on-focus-or-hover--target /* for spec/features/nav/pinned_nav_items_spec.rb */ + .always-animate ) { /* stylelint-disable property-no-vendor-prefix */ -o-transition: none !important; diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 75031cac416..a4ad8635c3e 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -158,23 +158,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } - .nav-item-link { - button.show-on-focus-or-hover--target { - transition: opacity $gl-transition-duration-fast; - } - - &:hover, - &:focus-within { - .nav-item-badge { - opacity: 0; - } - - button.show-on-focus-or-hover--target { - transition-delay: $gl-transition-duration-slow; - } - } - } - #trial-status-sidebar-widget:hover { text-decoration: none; @include gl-text-contrast-light; @@ -320,19 +303,71 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.transition-opacity-on-hover--context { + .transition-opacity-on-hover--target { + transition: opacity $gl-transition-duration-fast linear; + + &:hover { + transition-delay: $gl-transition-duration-slow; + } + } + + &:hover { + .transition-opacity-on-hover--target { + transition-delay: $gl-transition-duration-slow; + } + } +} + .show-on-focus-or-hover--context { .show-on-focus-or-hover--target { opacity: 0; + + &:hover, + &:focus { + opacity: 1; + } } &:hover, - &:focus { + &:focus-within { + .show-on-focus-or-hover--control { + @include gl-bg-t-gray-a-08; + } + .show-on-focus-or-hover--target { opacity: 1; } } - .show-on-focus-or-hover--target:focus { + .show-on-focus-or-hover--control { + &:hover, + &:focus { + + .show-on-focus-or-hover--target { + opacity: 1; + } + } + } +} + +.hide-on-focus-or-hover--context { + .hide-on-focus-or-hover--target { opacity: 1; } + + &:hover, + &:focus-within { + .hide-on-focus-or-hover--target { + opacity: 0; + } + } + + .hide-on-focus-or-hover--control { + &:hover, + &:focus { + .hide-on-focus-or-hover--target { + opacity: 0; + } + } + } } |