diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-14 21:08:55 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-03-14 21:08:55 +0300 |
commit | 3828d19ab2d68dd6cafa6f08221e1eee572671e7 (patch) | |
tree | afd36fcf20499d876493bf24bd9f0ee926454547 /app/assets | |
parent | 3e764061b3209d4deee2a55851d5d564a9f19d8b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
72 files changed, 253 insertions, 342 deletions
diff --git a/app/assets/javascripts/admin/users/components/actions/activate.vue b/app/assets/javascripts/admin/users/components/actions/activate.vue index 3a54035c587..0099c8da8e6 100644 --- a/app/assets/javascripts/admin/users/components/actions/activate.vue +++ b/app/assets/javascripts/admin/users/components/actions/activate.vue @@ -41,7 +41,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.activate, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/approve.vue b/app/assets/javascripts/admin/users/components/actions/approve.vue index 5a8c675822d..52560ebe5b1 100644 --- a/app/assets/javascripts/admin/users/components/actions/approve.vue +++ b/app/assets/javascripts/admin/users/components/actions/approve.vue @@ -43,7 +43,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.approve, - attributes: [{ variant: 'confirm', 'data-qa-selector': 'approve_user_confirm_button' }], + attributes: { variant: 'confirm', 'data-qa-selector': 'approve_user_confirm_button' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/ban.vue b/app/assets/javascripts/admin/users/components/actions/ban.vue index 898a688c203..203d076914f 100644 --- a/app/assets/javascripts/admin/users/components/actions/ban.vue +++ b/app/assets/javascripts/admin/users/components/actions/ban.vue @@ -56,7 +56,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.ban, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/block.vue b/app/assets/javascripts/admin/users/components/actions/block.vue index d25dd400f9b..d50b76aaa92 100644 --- a/app/assets/javascripts/admin/users/components/actions/block.vue +++ b/app/assets/javascripts/admin/users/components/actions/block.vue @@ -42,7 +42,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.block, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/deactivate.vue b/app/assets/javascripts/admin/users/components/actions/deactivate.vue index c85f3f01675..ab1069601d2 100644 --- a/app/assets/javascripts/admin/users/components/actions/deactivate.vue +++ b/app/assets/javascripts/admin/users/components/actions/deactivate.vue @@ -51,7 +51,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.deactivate, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/reject.vue b/app/assets/javascripts/admin/users/components/actions/reject.vue index bac08de1d5e..2b9c4acfcb5 100644 --- a/app/assets/javascripts/admin/users/components/actions/reject.vue +++ b/app/assets/javascripts/admin/users/components/actions/reject.vue @@ -54,7 +54,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.reject, - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/unban.vue b/app/assets/javascripts/admin/users/components/actions/unban.vue index beede2d37d7..42b6fb3bdd4 100644 --- a/app/assets/javascripts/admin/users/components/actions/unban.vue +++ b/app/assets/javascripts/admin/users/components/actions/unban.vue @@ -37,7 +37,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.unban, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, messageHtml, }, diff --git a/app/assets/javascripts/admin/users/components/actions/unblock.vue b/app/assets/javascripts/admin/users/components/actions/unblock.vue index 720f2efd932..f94e128a945 100644 --- a/app/assets/javascripts/admin/users/components/actions/unblock.vue +++ b/app/assets/javascripts/admin/users/components/actions/unblock.vue @@ -32,7 +32,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.unblock, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, }, }); diff --git a/app/assets/javascripts/admin/users/components/actions/unlock.vue b/app/assets/javascripts/admin/users/components/actions/unlock.vue index 55ea3e0aba7..c78c260b4fe 100644 --- a/app/assets/javascripts/admin/users/components/actions/unlock.vue +++ b/app/assets/javascripts/admin/users/components/actions/unlock.vue @@ -31,7 +31,7 @@ export default { }, actionPrimary: { text: I18N_USER_ACTIONS.unlock, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, }, }); diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue index 416e4fcecc7..09f997d73aa 100644 --- a/app/assets/javascripts/badges/components/badge_settings.vue +++ b/app/assets/javascripts/badges/components/badge_settings.vue @@ -26,7 +26,7 @@ export default { primaryProps() { return { text: __('Delete badge'), - attributes: [{ category: 'primary' }, { variant: 'danger' }], + attributes: { category: 'primary', variant: 'danger' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue index 896810bfb3a..9ea801dc9a2 100644 --- a/app/assets/javascripts/boards/components/board_form.vue +++ b/app/assets/javascripts/boards/components/board_form.vue @@ -128,14 +128,12 @@ export default { primaryProps() { return { text: this.buttonText, - attributes: [ - { - variant: this.buttonKind, - disabled: this.submitDisabled, - loading: this.isLoading, - 'data-qa-selector': 'save_changes_button', - }, - ], + attributes: { + variant: this.buttonKind, + disabled: this.submitDisabled, + loading: this.isLoading, + 'data-qa-selector': 'save_changes_button', + }, }; }, cancelProps() { diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue index c0c2699b63d..afa20f63913 100644 --- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue +++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue @@ -136,11 +136,11 @@ export default { size="sm" :action-primary="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { text: $options.i18n.modalAction, - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" :action-secondary="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { text: $options.i18n.modalCancel, - attributes: [{ variant: 'default' }], + attributes: { variant: 'default' }, } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" @primary="handleModalPrimary" > diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/delete_pipeline_schedule_modal.vue b/app/assets/javascripts/ci/pipeline_schedules/components/delete_pipeline_schedule_modal.vue index 16bfc7f3abe..92c824fb5a1 100644 --- a/app/assets/javascripts/ci/pipeline_schedules/components/delete_pipeline_schedule_modal.vue +++ b/app/assets/javascripts/ci/pipeline_schedules/components/delete_pipeline_schedule_modal.vue @@ -10,11 +10,11 @@ export default { ), actionPrimary: { text: s__('PipelineSchedules|Delete pipeline schedule'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, actionCancel: { text: __('Cancel'), - attributes: [], + attributes: {}, }, }, components: { diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal.vue b/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal.vue index 3ac52d4735d..7863b0e3ef0 100644 --- a/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal.vue +++ b/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal.vue @@ -27,12 +27,10 @@ export default { actionPrimary() { return { text: this.$options.i18n.takeOwnership, - attributes: [ - { - variant: 'confirm', - category: 'primary', - }, - ], + attributes: { + variant: 'confirm', + category: 'primary', + }, }; }, }, diff --git a/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal_legacy.vue b/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal_legacy.vue index 7ded3945a32..b4d84309c5f 100644 --- a/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal_legacy.vue +++ b/app/assets/javascripts/ci/pipeline_schedules/components/take_ownership_modal_legacy.vue @@ -27,14 +27,12 @@ export default { actionPrimary() { return { text: this.$options.i18n.takeOwnership, - attributes: [ - { - variant: 'confirm', - category: 'primary', - href: this.ownershipUrl, - 'data-method': 'post', - }, - ], + attributes: { + variant: 'confirm', + category: 'primary', + href: this.ownershipUrl, + 'data-method': 'post', + }, }; }, }, diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_token_reset_dropdown_item.vue b/app/assets/javascripts/ci/runner/components/registration/registration_token_reset_dropdown_item.vue index db8c953ce3c..6ce88fc54de 100644 --- a/app/assets/javascripts/ci/runner/components/registration/registration_token_reset_dropdown_item.vue +++ b/app/assets/javascripts/ci/runner/components/registration/registration_token_reset_dropdown_item.vue @@ -73,13 +73,13 @@ export default { actionPrimary() { return { text: i18n.modalAction, - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }; }, actionSecondary() { return { text: i18n.modalCancel, - attributes: [{ variant: 'default' }], + attributes: { variant: 'default' }, }; }, }, diff --git a/app/assets/javascripts/clusters/agents/components/revoke_token_button.vue b/app/assets/javascripts/clusters/agents/components/revoke_token_button.vue index f0af0da4bb4..697162b50ae 100644 --- a/app/assets/javascripts/clusters/agents/components/revoke_token_button.vue +++ b/app/assets/javascripts/clusters/agents/components/revoke_token_button.vue @@ -78,16 +78,17 @@ export default { primaryModalProps() { return { text: this.$options.i18n.revokeButton, - attributes: [ - { disabled: this.loading || this.disableModalSubmit, loading: this.loading }, - { variant: 'danger' }, - ], + attributes: { + disabled: this.loading || this.disableModalSubmit, + loading: this.loading, + variant: 'danger', + }, }; }, cancelModalProps() { return { text: this.$options.i18n.modalCancel, - attributes: [], + attributes: {}, }; }, disableModalSubmit() { diff --git a/app/assets/javascripts/clusters_list/components/delete_agent_button.vue b/app/assets/javascripts/clusters_list/components/delete_agent_button.vue index 7a028858d10..913db87f019 100644 --- a/app/assets/javascripts/clusters_list/components/delete_agent_button.vue +++ b/app/assets/javascripts/clusters_list/components/delete_agent_button.vue @@ -77,16 +77,17 @@ export default { primaryModalProps() { return { text: this.$options.i18n.modalAction, - attributes: [ - { disabled: this.loading || this.disableModalSubmit, loading: this.loading }, - { variant: 'danger' }, - ], + attributes: { + disabled: this.loading || this.disableModalSubmit, + loading: this.loading, + variant: 'danger', + }, }; }, cancelModalProps() { return { text: this.$options.i18n.modalCancel, - attributes: [], + attributes: {}, }; }, disableModalSubmit() { diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue index c67b544eacd..b13b0ede9f0 100644 --- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue +++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue @@ -48,15 +48,13 @@ export default { addDeployFreezeButton() { return { text: this.isEditing ? __('Save deploy freeze') : __('Add deploy freeze'), - attributes: [ - { variant: 'confirm' }, - { - disabled: - !isValidCron(this.freezeStartCron) || - !isValidCron(this.freezeEndCron) || - !this.selectedTimezone, - }, - ], + attributes: { + variant: 'confirm', + disabled: + !isValidCron(this.freezeStartCron) || + !isValidCron(this.freezeEndCron) || + !this.selectedTimezone, + }, }; }, invalidFreezeStartCron() { diff --git a/app/assets/javascripts/deploy_keys/components/confirm_modal.vue b/app/assets/javascripts/deploy_keys/components/confirm_modal.vue index 1932435c42a..25551d7b5cb 100644 --- a/app/assets/javascripts/deploy_keys/components/confirm_modal.vue +++ b/app/assets/javascripts/deploy_keys/components/confirm_modal.vue @@ -22,11 +22,11 @@ export default { title: __('Do you want to remove this deploy key?'), actionPrimary: { text: __('Remove deploy key'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, actionSecondary: { text: __('Cancel'), - attributes: [{ category: 'tertiary' }], + attributes: { category: 'tertiary' }, }, static: true, modalId: 'confirm-remove-deploy-key', diff --git a/app/assets/javascripts/environments/components/canary_update_modal.vue b/app/assets/javascripts/environments/components/canary_update_modal.vue index cacd868bed0..aff7d34f191 100644 --- a/app/assets/javascripts/environments/components/canary_update_modal.vue +++ b/app/assets/javascripts/environments/components/canary_update_modal.vue @@ -42,7 +42,7 @@ export default { modalId: CANARY_UPDATE_MODAL, actionPrimary: { text: s__('CanaryIngress|Change ratio'), - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, actionCancel: { text: __('Cancel') }, static: true, diff --git a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue index 8259574f8e3..53a93bbce30 100644 --- a/app/assets/javascripts/environments/components/confirm_rollback_modal.vue +++ b/app/assets/javascripts/environments/components/confirm_rollback_modal.vue @@ -135,7 +135,7 @@ export default { csrf, cancelProps: { text: __('Cancel'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, docsPath: helpPagePath('ci/environments/index.md', { anchor: 'retry-or-roll-back-a-deployment' }), }; diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue index f91d288a54c..47f38980acc 100644 --- a/app/assets/javascripts/environments/components/delete_environment_modal.vue +++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue @@ -29,7 +29,7 @@ export default { primaryProps() { return { text: s__('Environments|Delete environment'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue index 162ad598c8c..dc0c5dc0f46 100644 --- a/app/assets/javascripts/environments/components/stop_environment_modal.vue +++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue @@ -33,7 +33,7 @@ export default { primaryProps() { return { text: s__('Environments|Stop environment'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue index 366ee6bb05b..9fb5d9f0943 100644 --- a/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue +++ b/app/assets/javascripts/feature_flags/components/configure_feature_flags_modal.vue @@ -84,11 +84,9 @@ export default { cancelActionProps() { return { text: this.$options.translations.cancelActionLabel, - attributes: [ - { - category: 'secondary', - }, - ], + attributes: { + category: 'secondary', + }, }; }, canRegenerateInstanceId() { @@ -98,14 +96,12 @@ export default { return this.canUserRotateToken ? { text: this.$options.translations.instanceIdRegenerateActionLabel, - attributes: [ - { - category: 'secondary', - disabled: !this.canRegenerateInstanceId, - loading: this.isRotating, - variant: 'danger', - }, - ], + attributes: { + category: 'secondary', + disabled: !this.canRegenerateInstanceId, + loading: this.isRotating, + variant: 'danger', + }, } : null; }, diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 7c2339dac71..82eddf5603f 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -59,7 +59,7 @@ export default { primaryProps() { return { text: __('Leave group'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index d250552742e..4d728bd35d4 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -50,13 +50,13 @@ export default { actionPrimary() { return { text: this.buttonLabel, - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }; }, actionCancel() { return { text: i18n.cancelButtonText, - attributes: [{ variant: 'default' }], + attributes: { variant: 'default' }, }; }, isCreatingNewFile() { diff --git a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue index bc6aa231a93..024f562b71d 100644 --- a/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/confirmation_modal.vue @@ -11,7 +11,7 @@ export default { primaryProps() { return { text: __('Save'), - attributes: [{ variant: 'confirm' }, { category: 'primary' }], + attributes: { variant: 'confirm', category: 'primary' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue index 41cd650f932..e766064a69b 100644 --- a/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue +++ b/app/assets/javascripts/integrations/edit/components/reset_confirmation_modal.vue @@ -9,7 +9,7 @@ export default { }, primaryProps: { text: __('Reset'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, cancelProps: { text: __('Cancel'), diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue index 91a52c36e41..6d1a3ceba16 100644 --- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue +++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue @@ -1,17 +1,16 @@ <script> -import { GlButton, GlLink, GlIcon, GlDropdownItem } from '@gitlab/ui'; +import { GlButton, GlLink, GlDropdownItem } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; import { TRIGGER_ELEMENT_BUTTON, - TRIGGER_ELEMENT_SIDE_NAV, TRIGGER_DEFAULT_QA_SELECTOR, TRIGGER_ELEMENT_WITH_EMOJI, TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI, } from '../constants'; export default { - components: { GlButton, GlLink, GlIcon, GlDropdownItem }, + components: { GlButton, GlLink, GlDropdownItem }, props: { displayText: { type: String, @@ -66,7 +65,6 @@ export default { }, }, TRIGGER_ELEMENT_BUTTON, - TRIGGER_ELEMENT_SIDE_NAV, TRIGGER_ELEMENT_WITH_EMOJI, TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI, }; @@ -83,17 +81,6 @@ export default { {{ displayText }} </gl-button> <gl-link - v-else-if="checkTrigger($options.TRIGGER_ELEMENT_SIDE_NAV)" - v-bind="componentAttributes" - data-is-link="true" - @click="openModal" - > - <span class="nav-icon-container"> - <gl-icon :name="icon" /> - </span> - <span class="nav-item-name"> {{ displayText }} </span> - </gl-link> - <gl-link v-else-if="checkTrigger($options.TRIGGER_ELEMENT_WITH_EMOJI)" v-bind="componentAttributes" @click="openModal" diff --git a/app/assets/javascripts/invite_members/constants.js b/app/assets/javascripts/invite_members/constants.js index 34b4e436392..86badd16d6c 100644 --- a/app/assets/javascripts/invite_members/constants.js +++ b/app/assets/javascripts/invite_members/constants.js @@ -19,7 +19,6 @@ export const GROUP_FILTERS = { export const USERS_FILTER_ALL = 'all'; export const USERS_FILTER_SAML_PROVIDER_ID = 'saml_provider_id'; export const TRIGGER_ELEMENT_BUTTON = 'button'; -export const TRIGGER_ELEMENT_SIDE_NAV = 'side-nav'; export const TOP_NAV_INVITE_MEMBERS_COMPONENT = 'invite_members'; export const TRIGGER_ELEMENT_WITH_EMOJI = 'text-emoji'; export const TRIGGER_ELEMENT_DROPDOWN_WITH_EMOJI = 'dropdown-text-emoji'; diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue index 608c1deac64..ded54d60d1d 100644 --- a/app/assets/javascripts/issuable/components/related_issuable_item.vue +++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue @@ -101,26 +101,22 @@ export default { :class="{ 'issuable-info-container': !canReorder, 'card-body': canReorder, - 'gl-pr-2': canRemove, }" - class="item-body d-flex align-items-center gl-py-3 gl-px-5" + class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-px-3 gl-py-2 py-xl-0 gl-mx-n2" > <div - class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 flex-xl-nowrap gl-min-h-7" + class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 flex-xl-nowrap gl-min-h-7" > <!-- Title area: Status icon (XL) and title --> - <div class="item-title d-flex align-items-xl-center mb-xl-0 gl-min-w-0"> - <div ref="iconElementXL"> - <gl-icon - v-if="hasState" - ref="iconElementXL" - class="gl-mr-3" - :class="iconClasses" - :name="iconName" - :title="stateTitle" - :aria-label="state" - /> - </div> + <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0"> + <gl-icon + v-if="hasState" + ref="iconElementXL" + :class="iconClasses" + :name="iconName" + :title="stateTitle" + :aria-label="state" + /> <gl-tooltip :target="() => $refs.iconElementXL"> <span v-safe-html="stateTitle"></span> </gl-tooltip> @@ -129,42 +125,46 @@ export default { v-gl-tooltip name="eye-slash" :title="__('Confidential')" - class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0" + class="confidential-icon" :aria-label="__('Confidential')" /> - <gl-link - :href="computedPath" - class="sortable-link gl-font-weight-normal" - @click="handleTitleClick" - > + <gl-link :href="computedPath" class="sortable-link" @click="handleTitleClick"> {{ title }} </gl-link> </div> <!-- Info area: meta, path, and assignees --> - <div class="item-info-area d-flex flex-xl-grow-1 flex-shrink-0"> + <div + class="item-info-area gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-gap-3 gl-ml-6 ml-xl-0" + > <!-- Meta area: path and attributes --> <!-- If there is no room beside the path, meta attributes are put ABOVE it (flex-wrap-reverse). --> <!-- See design: https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%2383-issue-mr-rows-cards-spec-previews/#artboard16 --> <div - class="item-meta d-flex flex-wrap-reverse justify-content-start justify-content-md-between" + class="item-meta gl-display-flex gl-md-justify-content-space-between gl-gap-3 gl-flex-wrap-wrap-reverse" > <!-- Path area: status icon (<XL), path, issue # --> <div - class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2" + class="item-path-area item-path-id gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3" > <gl-tooltip :target="() => $refs.iconElement"> <span v-safe-html="stateTitle"></span> </gl-tooltip> - <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{ - itemPath - }}</span> + <span + v-if="itemPath" + v-gl-tooltip + :title="itemPath" + class="path-id-text d-inline-block" + >{{ itemPath }}</span + > <span>{{ pathIdSeparator }}{{ itemId }}</span> </div> <!-- Attributes area: CI, epic count, weight, milestone --> <!-- They have a different order on large screen sizes --> - <div class="item-attributes-area d-flex align-items-center mt-2 mt-xl-0"> + <div + class="item-attributes-area gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3" + > <span v-if="hasPipeline" class="mr-ci-status order-md-last"> <a :href="pipelineStatus.details_path"> <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" /> @@ -174,7 +174,7 @@ export default { <issue-milestone v-if="hasMilestone" :milestone="milestone" - class="d-flex align-items-center item-milestone order-md-first ml-md-0" + class="item-milestone gl-font-sm gl-display-flex gl-align-items-center order-md-first" /> <!-- Flex order for slots is defined in the parent component: e.g. related_issues_block.vue --> @@ -198,24 +198,17 @@ export default { <issue-assignees v-if="hasAssignees" :assignees="assignees" - class="item-assignees align-items-center align-self-end flex-shrink-0 order-md-2 d-none d-md-flex" + class="item-assignees gl-display-flex gl-align-items-center gl-align-self-end gl-flex-shrink-0 order-md-2" /> </div> </div> - - <!-- Assignees. On small layouts, these are put here, at the end of the card. --> - <issue-assignees - v-if="assignees.length !== 0" - :assignees="assignees" - class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none gl-ml-3" - /> </div> </div> <span v-if="isLocked" v-gl-tooltip - class="gl-px-3 gl-display-inline-block gl-cursor-not-allowed" + class="gl-display-inline-block gl-cursor-not-allowed" :title="lockedMessage" data-testid="lockIcon" > @@ -226,8 +219,9 @@ export default { v-gl-tooltip icon="close" category="tertiary" + size="small" :disabled="removeDisabled" - class="js-issue-item-remove-button gl-ml-3" + class="js-issue-item-remove-button" data-qa-selector="remove_related_issue_button" :title="__('Remove')" :aria-label="__('Remove')" diff --git a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue index a9274be0c4c..af06884bbb4 100644 --- a/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue +++ b/app/assets/javascripts/issues/related_merge_requests/components/related_merge_requests.vue @@ -65,7 +65,7 @@ export default { <template> <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)"> - <div class="card card-slim gl-mt-5 gl-mb-0"> + <div class="card card-slim gl-mt-5 gl-mb-0 gl-bg-gray-10"> <div class="card-header gl-px-5 gl-py-4 gl-bg-white"> <div class="card-title gl-relative gl-display-flex gl-align-items-center gl-line-height-20 gl-font-weight-bold gl-m-0" @@ -88,10 +88,10 @@ export default { v-if="isFetchingMergeRequests" size="sm" label="Fetching related merge requests" - class="gl-py-3" + class="gl-py-4" /> - <ul v-else class="content-list related-items-list gl-bg-gray-10"> - <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-p-0!"> + <ul v-else class="content-list related-items-list"> + <li v-for="mr in mergeRequests" :key="mr.id" class="list-item gl-m-0! gl-px-4! gl-py-3!"> <related-issuable-item :id-key="mr.id" :display-reference="mr.reference" diff --git a/app/assets/javascripts/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue b/app/assets/javascripts/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue index 913924cc7b1..a3f1a2c4be8 100644 --- a/app/assets/javascripts/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue +++ b/app/assets/javascripts/jobs/components/job/sidebar/job_retry_forward_deployment_modal.vue @@ -30,18 +30,16 @@ export default { return { primaryProps: { text: this.$options.i18n.primaryText, - attributes: [ - { - 'data-method': 'post', - 'data-testid': 'retry-button-modal', - href: this.href, - variant: 'danger', - }, - ], + attributes: { + 'data-method': 'post', + 'data-testid': 'retry-button-modal', + href: this.href, + variant: 'danger', + }, }, cancelProps: { text: this.$options.i18n.cancel, - attributes: [{ category: 'secondary', variant: 'default' }], + attributes: { category: 'secondary', variant: 'default' }, }, }; }, diff --git a/app/assets/javascripts/labels/components/promote_label_modal.vue b/app/assets/javascripts/labels/components/promote_label_modal.vue index 890cad26ee8..298cc20ab35 100644 --- a/app/assets/javascripts/labels/components/promote_label_modal.vue +++ b/app/assets/javascripts/labels/components/promote_label_modal.vue @@ -9,7 +9,7 @@ import eventHub from '../event_hub'; export default { primaryProps: { text: s__('Labels|Promote Label'), - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, cancelProps: { text: __('Cancel'), diff --git a/app/assets/javascripts/milestones/components/delete_milestone_modal.vue b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue index 7f46456b78f..8e7428089e2 100644 --- a/app/assets/javascripts/milestones/components/delete_milestone_modal.vue +++ b/app/assets/javascripts/milestones/components/delete_milestone_modal.vue @@ -103,7 +103,7 @@ Once deleted, it cannot be undone or recovered.`), }, primaryProps: { text: s__('Milestones|Delete milestone'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, cancelProps: { text: __('Cancel'), diff --git a/app/assets/javascripts/milestones/components/promote_milestone_modal.vue b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue index bd3896d1a8d..63791dcd011 100644 --- a/app/assets/javascripts/milestones/components/promote_milestone_modal.vue +++ b/app/assets/javascripts/milestones/components/promote_milestone_modal.vue @@ -80,11 +80,11 @@ export default { }, primaryAction: { text: s__('Milestones|Promote Milestone'), - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, cancelAction: { text: __('Cancel'), - attributes: [], + attributes: {}, }, }; </script> diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue index 2da8ca2d8a8..0757ac5522a 100644 --- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue +++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/delete_modal.vue @@ -85,7 +85,7 @@ export default { size="sm" :action-primary="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { text: __('Delete'), - attributes: [{ variant: 'danger' }, { disabled: disablePrimaryButton }], + attributes: { variant: 'danger', disabled: disablePrimaryButton }, } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" :action-cancel="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { text: __('Cancel'), diff --git a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue index 45dc217b9e3..b24ec65464f 100644 --- a/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue +++ b/app/assets/javascripts/packages_and_registries/dependency_proxy/app.vue @@ -55,7 +55,7 @@ export default { modalButtons: { primary: { text: s__('DependencyProxy|Clear cache'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, secondary: { text: __('Cancel'), diff --git a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue index fd099ee4e69..fdc58e4bd05 100644 --- a/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue +++ b/app/assets/javascripts/packages_and_registries/infrastructure_registry/details/components/app.vue @@ -122,15 +122,15 @@ export default { modal: { packageDeletePrimaryAction: { text: __('Delete'), - attributes: [ - { variant: 'danger' }, - { category: 'primary' }, - { 'data-qa-selector': 'delete_modal_button' }, - ], + attributes: { + variant: 'danger', + category: 'primary', + 'data-qa-selector': 'delete_modal_button', + }, }, fileDeletePrimaryAction: { text: __('Delete'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, cancelAction: { text: __('Cancel'), diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue index 011a2668a8b..b167fff26b0 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/components/delete_modal.vue @@ -32,7 +32,7 @@ export default { modal: { packagesDeletePrimaryAction: { text: DELETE_PACKAGE_MODAL_PRIMARY_ACTION, - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, cancelAction: { text: __('Cancel'), diff --git a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue index a5eda6cb47a..1ce2140894e 100644 --- a/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue +++ b/app/assets/javascripts/packages_and_registries/package_registry/pages/details.vue @@ -314,19 +314,19 @@ export default { modal: { packageDeletePrimaryAction: { text: s__('PackageRegistry|Permanently delete'), - attributes: [ - { variant: 'danger' }, - { category: 'primary' }, - { 'data-qa-selector': 'delete_modal_button' }, - ], + attributes: { + variant: 'danger', + category: 'primary', + 'data-qa-selector': 'delete_modal_button', + }, }, fileDeletePrimaryAction: { text: __('Delete'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, filesDeletePrimaryAction: { text: s__('PackageRegistry|Permanently delete assets'), - attributes: [{ variant: 'danger' }, { category: 'primary' }], + attributes: { variant: 'danger', category: 'primary' }, }, cancelAction: { text: __('Cancel'), diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/cancel_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/cancel_jobs_modal.vue index 2aff20a1928..3bc785ee1b6 100644 --- a/app/assets/javascripts/pages/admin/jobs/index/components/cancel_jobs_modal.vue +++ b/app/assets/javascripts/pages/admin/jobs/index/components/cancel_jobs_modal.vue @@ -43,7 +43,7 @@ export default { }, primaryAction: { text: PRIMARY_ACTION_TEXT, - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }, cancelAction: { text: CANCEL_TEXT, diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue index 48241a213ef..3a91f8e2c55 100644 --- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue +++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue @@ -72,7 +72,7 @@ export default { primaryProps() { return { text: __('Delete project'), - attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }], + attributes: { variant: 'danger', category: 'primary', disabled: !this.canSubmit }, }; }, }, diff --git a/app/assets/javascripts/pages/profiles/password_prompt/password_prompt_modal.vue b/app/assets/javascripts/pages/profiles/password_prompt/password_prompt_modal.vue index 44728ea9cdf..7db94ea435e 100644 --- a/app/assets/javascripts/pages/profiles/password_prompt/password_prompt_modal.vue +++ b/app/assets/javascripts/pages/profiles/password_prompt/password_prompt_modal.vue @@ -33,7 +33,7 @@ export default { primaryProps() { return { text: I18N_PASSWORD_PROMPT_CONFIRM_BUTTON, - attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.isValid }], + attributes: { variant: 'danger', category: 'primary', disabled: !this.isValid }, }; }, }, diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue index eb70b5fbb7a..9f38be668f2 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_stop_modal.vue @@ -42,7 +42,7 @@ export default { primaryProps() { return { text: s__('Pipeline|Stop pipeline'), - attributes: [{ variant: 'danger' }], + attributes: { variant: 'danger' }, }; }, cancelProps() { diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue index 2d1f1945e5a..10db3e1c56b 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue @@ -66,7 +66,7 @@ export default { }, modalCloseButton: { text: __('Close'), - attributes: [{ variant: 'confirm' }], + attributes: { variant: 'confirm' }, }, }; </script> diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue index 3cb2dce87d3..c64fbc91d12 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -38,11 +38,12 @@ export default { primaryProps() { return { text: __('Delete account'), - attributes: [ - { variant: 'danger', 'data-qa-selector': 'confirm_delete_account_button' }, - { category: 'primary' }, - { disabled: !this.canSubmit }, - ], + attributes: { + variant: 'danger', + 'data-qa-selector': 'confirm_delete_account_button', + category: 'primary', + disabled: !this.canSubmit, + }, }; }, cancelProps() { diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue index 599d5650dc3..d96b5748abc 100644 --- a/app/assets/javascripts/profile/account/components/update_username.vue +++ b/app/assets/javascripts/profile/account/components/update_username.vue @@ -60,11 +60,7 @@ Please update your Git repository remotes as soon as possible.`), primaryProps() { return { text: __('Update username'), - attributes: [ - { variant: 'confirm' }, - { category: 'primary' }, - { disabled: this.isRequestPending }, - ], + attributes: { variant: 'confirm', category: 'primary', disabled: this.isRequestPending }, }; }, cancelProps() { diff --git a/app/assets/javascripts/projects/commit/components/form_modal.vue b/app/assets/javascripts/projects/commit/components/form_modal.vue index b499977aaef..28bbf67c090 100644 --- a/app/assets/javascripts/projects/commit/components/form_modal.vue +++ b/app/assets/javascripts/projects/commit/components/form_modal.vue @@ -52,16 +52,16 @@ export default { checked: true, actionPrimary: { text: this.i18n.actionPrimaryText, - attributes: [ - { variant: 'confirm' }, - { category: 'primary' }, - { 'data-testid': 'submit-commit' }, - { 'data-qa-selector': 'submit_commit_button' }, - ], + attributes: { + variant: 'confirm', + category: 'primary', + 'data-testid': 'submit-commit', + 'data-qa-selector': 'submit_commit_button', + }, }, actionCancel: { text: this.i18n.actionCancelText, - attributes: [{ 'data-testid': 'cancel-commit' }], + attributes: { 'data-testid': 'cancel-commit' }, }, }; }, diff --git a/app/assets/javascripts/projects/components/shared/delete_button.vue b/app/assets/javascripts/projects/components/shared/delete_button.vue index 64a16b462f5..06c0230c8e0 100644 --- a/app/assets/javascripts/projects/components/shared/delete_button.vue +++ b/app/assets/javascripts/projects/components/shared/delete_button.vue @@ -62,11 +62,11 @@ export default { return { primary: { text: __('Yes, delete project'), - attributes: [ - { variant: 'danger' }, - { disabled: this.confirmDisabled }, - { 'data-qa-selector': 'confirm_delete_button' }, - ], + attributes: { + variant: 'danger', + disabled: this.confirmDisabled, + 'data-qa-selector': 'confirm_delete_button', + }, }, cancel: { text: __('Cancel, keep project'), diff --git a/app/assets/javascripts/related_issues/components/add_issuable_form.vue b/app/assets/javascripts/related_issues/components/add_issuable_form.vue index adae92a92e9..7ecc39a56e7 100644 --- a/app/assets/javascripts/related_issues/components/add_issuable_form.vue +++ b/app/assets/javascripts/related_issues/components/add_issuable_form.vue @@ -182,7 +182,7 @@ export default { :checked="linkedIssueType" /> </gl-form-group> - <p class="bold"> + <p class="bold gl-mb-2"> {{ issuableInputText }} </p> </template> diff --git a/app/assets/javascripts/related_issues/components/related_issues_block.vue b/app/assets/javascripts/related_issues/components/related_issues_block.vue index a12aa67d467..043d925198c 100644 --- a/app/assets/javascripts/related_issues/components/related_issues_block.vue +++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue @@ -1,5 +1,5 @@ <script> -import { GlLink, GlIcon, GlButton, GlCard } from '@gitlab/ui'; +import { GlLink, GlIcon, GlLoadingIcon, GlButton, GlCard } from '@gitlab/ui'; import { __, sprintf } from '~/locale'; import { issuableIconMap, @@ -17,6 +17,7 @@ export default { components: { GlLink, GlIcon, + GlLoadingIcon, GlButton, GlCard, AddIssuableForm, @@ -239,15 +240,12 @@ export default { </template> <div v-if="isOpen" - class="linked-issues-card-body" - :class="{ - 'gl-p-5': isFormVisible || shouldShowTokenBody, - }" + class="linked-issues-card-body gl-py-3 gl-px-4 gl-bg-gray-10" data-testid="related-issues-body" > <div v-if="isFormVisible" - class="js-add-related-issues-form-area card-body bordered-box bg-white" + class="js-add-related-issues-form-area card-body bg-white gl-mt-2 gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base" :class="{ 'gl-mb-5': shouldShowTokenBody, 'gl-show-field-errors': hasError }" > <add-issuable-form @@ -270,6 +268,7 @@ export default { /> </div> <template v-if="shouldShowTokenBody"> + <gl-loading-icon v-if="isFetching" size="sm" class="gl-py-2" /> <related-issues-list v-for="(category, index) in categorisedIssues" :key="category.linkType" @@ -281,13 +280,16 @@ export default { :issuable-type="issuableType" :path-id-separator="pathIdSeparator" :related-issues="category.issues" - :class="{ 'gl-mt-5': index > 0 }" + :class="{ + 'gl-pb-3 gl-mb-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100': + index !== categorisedIssues.length - 1, + }" @relatedIssueRemoveRequest="$emit('relatedIssueRemoveRequest', $event)" @saveReorder="$emit('saveReorder', $event)" /> </template> <div v-if="!shouldShowTokenBody && !isFormVisible" data-testid="related-items-empty"> - <p class="gl-my-5 gl-px-5 gl-text-gray-500"> + <p class="gl-p-2 gl-mb-0 gl-text-gray-500"> {{ emptyStateMessage }} <gl-link v-if="hasHelpPath" diff --git a/app/assets/javascripts/related_issues/components/related_issues_list.vue b/app/assets/javascripts/related_issues/components/related_issues_list.vue index 7387b9ab87c..4429c1beb00 100644 --- a/app/assets/javascripts/related_issues/components/related_issues_list.vue +++ b/app/assets/javascripts/related_issues/components/related_issues_list.vue @@ -97,11 +97,13 @@ export default { <template> <div :data-link-type="listLinkType"> - <h4 v-if="heading" class="gl-font-base mt-0">{{ heading }}</h4> - <div - class="related-issues-token-body bordered-box bg-white" - :class="{ 'sortable-container': canReorder }" + <h4 + v-if="heading" + class="gl-font-sm gl-font-weight-semibold gl-text-gray-700 gl-mx-2 gl-mt-3 gl-mb-2" > + {{ heading }} + </h4> + <div class="related-issues-token-body" :class="{ 'sortable-container': canReorder }"> <div v-if="isFetching" class="gl-mb-2" data-qa-selector="related_issues_loading_placeholder"> <gl-loading-icon ref="loadingIcon" @@ -121,7 +123,7 @@ export default { }" :data-key="issue.id" :data-ordering-id="issuableOrderingId(issue)" - class="js-related-issues-token-list-item list-item pt-0 pb-0" + class="js-related-issues-token-list-item list-item pt-0 pb-0 gl-border-b-0!" > <related-issuable-item :id-key="issue.id" diff --git a/app/assets/javascripts/repository/components/delete_blob_modal.vue b/app/assets/javascripts/repository/components/delete_blob_modal.vue index baf8449b188..cbdf6ef9ccd 100644 --- a/app/assets/javascripts/repository/components/delete_blob_modal.vue +++ b/app/assets/javascripts/repository/components/delete_blob_modal.vue @@ -101,23 +101,19 @@ export default { primaryOptions() { return { text: this.$options.i18n.PRIMARY_OPTIONS_TEXT, - attributes: [ - { - variant: 'danger', - loading: this.loading, - disabled: this.loading || !this.form.state, - }, - ], + attributes: { + variant: 'danger', + loading: this.loading, + disabled: this.loading || !this.form.state, + }, }; }, cancelOptions() { return { text: this.$options.i18n.SECONDARY_OPTIONS_TEXT, - attributes: [ - { - disabled: this.loading, - }, - ], + attributes: { + disabled: this.loading, + }, }; }, showCreateNewMrToggle() { diff --git a/app/assets/javascripts/repository/components/new_directory_modal.vue b/app/assets/javascripts/repository/components/new_directory_modal.vue index d9f3a30d28f..f36a700c902 100644 --- a/app/assets/javascripts/repository/components/new_directory_modal.vue +++ b/app/assets/javascripts/repository/components/new_directory_modal.vue @@ -93,23 +93,19 @@ export default { primaryOptions() { return { text: this.primaryBtnText, - attributes: [ - { - variant: 'confirm', - loading: this.loading, - disabled: !this.formCompleted || this.loading, - }, - ], + attributes: { + variant: 'confirm', + loading: this.loading, + disabled: !this.formCompleted || this.loading, + }, }; }, cancelOptions() { return { text: SECONDARY_OPTIONS_TEXT, - attributes: [ - { - disabled: this.loading, - }, - ], + attributes: { + disabled: this.loading, + }, }; }, showCreateNewMrToggle() { diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index d597a3a78d1..0c9b46344c5 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,10 +1,8 @@ <script> import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql'; import { createAlert } from '~/alert'; -import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { TREE_PAGE_SIZE, - TREE_INITIAL_FETCH_COUNT, TREE_PAGE_LIMIT, COMMIT_BATCH_SIZE, GITALY_UNAVAILABLE_CODE, @@ -23,7 +21,7 @@ export default { FileTable, FilePreview, }, - mixins: [getRefMixin, glFeatureFlagMixin()], + mixins: [getRefMixin], apollo: { projectPath: { query: projectPathQuery, @@ -59,13 +57,6 @@ export default { }; }, computed: { - pageSize() { - // we want to exponentially increase the page size to reduce the load on the frontend - const exponentialSize = (TREE_PAGE_SIZE / TREE_INITIAL_FETCH_COUNT) * (this.fetchCounter + 1); - return exponentialSize < TREE_PAGE_SIZE && this.glFeatures.increasePageSizeExponentially - ? exponentialSize - : TREE_PAGE_SIZE; - }, totalEntries() { return Object.values(this.entries).flat().length; }, @@ -110,7 +101,7 @@ export default { ref: this.ref, path: originalPath, nextPageCursor: this.nextPageCursor, - pageSize: this.pageSize, + pageSize: TREE_PAGE_SIZE, }, }) .then(({ data }) => { diff --git a/app/assets/javascripts/repository/components/upload_blob_modal.vue b/app/assets/javascripts/repository/components/upload_blob_modal.vue index f76242f3d37..4ca625bc0de 100644 --- a/app/assets/javascripts/repository/components/upload_blob_modal.vue +++ b/app/assets/javascripts/repository/components/upload_blob_modal.vue @@ -106,23 +106,19 @@ export default { primaryOptions() { return { text: this.primaryBtnText, - attributes: [ - { - variant: 'confirm', - loading: this.loading, - disabled: !this.formCompleted || this.loading, - }, - ], + attributes: { + variant: 'confirm', + loading: this.loading, + disabled: !this.formCompleted || this.loading, + }, }; }, cancelOptions() { return { text: SECONDARY_OPTIONS_TEXT, - attributes: [ - { - disabled: this.loading, - }, - ], + attributes: { + disabled: this.loading, + }, }; }, formattedFileSize() { diff --git a/app/assets/javascripts/repository/constants.js b/app/assets/javascripts/repository/constants.js index 5098053c4f7..73fecee92b7 100644 --- a/app/assets/javascripts/repository/constants.js +++ b/app/assets/javascripts/repository/constants.js @@ -3,7 +3,6 @@ import { __ } from '~/locale'; export const GITALY_UNAVAILABLE_CODE = 'unavailable'; export const TREE_PAGE_LIMIT = 1000; // the maximum amount of items per page export const TREE_PAGE_SIZE = 100; // the amount of items to be fetched per (batch) request -export const TREE_INITIAL_FETCH_COUNT = TREE_PAGE_LIMIT / TREE_PAGE_SIZE; // the amount of (batch) requests to make export const COMMIT_BATCH_SIZE = 25; // we request commit data in batches of 25 diff --git a/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue b/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue index a0deb08961f..9b582ba41ed 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/create_timelog_form.vue @@ -56,13 +56,11 @@ export default { primaryProps() { return { text: s__('CreateTimelogForm|Save'), - attributes: [ - { - variant: 'confirm', - disabled: this.submitDisabled, - loading: this.isLoading, - }, - ], + attributes: { + variant: 'confirm', + disabled: this.submitDisabled, + loading: this.isLoading, + }, }; }, cancelProps() { diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue index 1b51ff7aa3f..c8ca30cb545 100644 --- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue +++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue @@ -46,6 +46,7 @@ export default { </div> <ul :aria-label="$options.i18n.switchTo" class="gl-p-0"> <nav-item :item="$options.contextSwitcherItems.yourWork" /> + <nav-item :item="$options.contextSwitcherItems.explore" /> </ul> </li> <frequent-projects-list :username="username" :view-all-link="projectsPath" /> diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue index 2f248729579..bfeace80f42 100644 --- a/app/assets/javascripts/super_sidebar/components/user_bar.vue +++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue @@ -52,7 +52,15 @@ export default { <template> <div class="user-bar"> <div class="gl-display-flex gl-align-items-center gl-px-3 gl-py-2 gl-gap-2"> - <a v-safe-html="$options.logo" :href="rootPath"></a> + <a :href="rootPath"> + <img + v-if="sidebarData.logo_url" + data-testid="brand-header-custom-logo" + :src="sidebarData.logo_url" + class="gl-h-6" + /> + <span v-else v-safe-html="$options.logo"></span> + </a> <gl-badge v-if="sidebarData.gitlab_com_and_canary" variant="success" diff --git a/app/assets/javascripts/super_sidebar/mock_data.js b/app/assets/javascripts/super_sidebar/mock_data.js index 8b35b5b7d45..5e5ad97eb68 100644 --- a/app/assets/javascripts/super_sidebar/mock_data.js +++ b/app/assets/javascripts/super_sidebar/mock_data.js @@ -2,6 +2,7 @@ import { s__ } from '~/locale'; export const contextSwitcherItems = { yourWork: { title: s__('Navigation|Your work'), link: '/', icon: 'work' }, + explore: { title: s__('Navigation|Explore'), link: '/explore', icon: 'compass' }, recentProjects: [ { // eslint-disable-next-line @gitlab/require-i18n-strings diff --git a/app/assets/javascripts/terraform/components/init_command_modal.vue b/app/assets/javascripts/terraform/components/init_command_modal.vue index 0d8a883972f..ad7f4774bd2 100644 --- a/app/assets/javascripts/terraform/components/init_command_modal.vue +++ b/app/assets/javascripts/terraform/components/init_command_modal.vue @@ -33,7 +33,7 @@ export default { closeModalProps() { return { text: this.$options.i18n.closeText, - attributes: [], + attributes: {}, }; }, }, diff --git a/app/assets/javascripts/terraform/components/states_table_actions.vue b/app/assets/javascripts/terraform/components/states_table_actions.vue index 773ecf1d5d5..586b3e96e44 100644 --- a/app/assets/javascripts/terraform/components/states_table_actions.vue +++ b/app/assets/javascripts/terraform/components/states_table_actions.vue @@ -69,7 +69,7 @@ export default { cancelModalProps() { return { text: this.$options.i18n.modalCancel, - attributes: [], + attributes: {}, }; }, disableModalSubmit() { @@ -81,7 +81,7 @@ export default { primaryModalProps() { return { text: this.$options.i18n.modalRemove, - attributes: [{ disabled: this.disableModalSubmit }, { variant: 'danger' }], + attributes: { disabled: this.disableModalSubmit, variant: 'danger' }, }; }, commandModalId() { diff --git a/app/assets/javascripts/toggles/index.js b/app/assets/javascripts/toggles/index.js index 5848b3a424c..500fe8c1150 100644 --- a/app/assets/javascripts/toggles/index.js +++ b/app/assets/javascripts/toggles/index.js @@ -17,20 +17,12 @@ export const initToggle = (el) => { return new Vue({ el, - props: { - disabled: { - type: Boolean, - required: false, - default: parseBoolean(disabled), - }, - isLoading: { - type: Boolean, - required: false, - default: parseBoolean(isLoading), - }, - }, + name: 'ToggleFromHtml', + data() { return { + disabled: parseBoolean(disabled), + isLoading: parseBoolean(isLoading), value: parseBoolean(isChecked), }; }, diff --git a/app/assets/javascripts/user_lists/components/add_user_modal.vue b/app/assets/javascripts/user_lists/components/add_user_modal.vue index e982d10f63b..37c9548ad64 100644 --- a/app/assets/javascripts/user_lists/components/add_user_modal.vue +++ b/app/assets/javascripts/user_lists/components/add_user_modal.vue @@ -19,11 +19,11 @@ export default { modalOptions: { actionPrimary: { text: s__('UserLists|Add'), - attributes: [{ 'data-testid': 'confirm-add-user-ids', variant: 'confirm' }], + attributes: { 'data-testid': 'confirm-add-user-ids', variant: 'confirm' }, }, actionCancel: { text: s__('UserLists|Cancel'), - attributes: [{ 'data-testid': 'cancel-add-user-ids' }], + attributes: { 'data-testid': 'cancel-add-user-ids' }, }, modalId: ADD_USER_MODAL_ID, static: true, diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue index d0a634d8e54..65a601ed927 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue @@ -60,13 +60,11 @@ export default { actionPrimary() { return { text: this.confirmButtonText, - attributes: [ - { - variant: 'danger', - disabled: !this.isValid, - 'data-qa-selector': 'confirm_danger_modal_button', - }, - ], + attributes: { + variant: 'danger', + disabled: !this.isValid, + 'data-qa-selector': 'confirm_danger_modal_button', + }, }; }, actionCancel() { diff --git a/app/assets/javascripts/work_items/components/widget_wrapper.vue b/app/assets/javascripts/work_items/components/widget_wrapper.vue index dadac78a128..ba1470f97cd 100644 --- a/app/assets/javascripts/work_items/components/widget_wrapper.vue +++ b/app/assets/javascripts/work_items/components/widget_wrapper.vue @@ -73,7 +73,7 @@ export default { <div v-if="isOpen" class="gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base" - :class="{ 'gl-p-5 gl-pb-3': !error }" + :class="{ 'gl-px-5 gl-py-4': !error }" data-testid="widget-body" > <slot name="body"></slot> diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue index 3d1be30b487..d7e54ea1eb0 100644 --- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue +++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links.vue @@ -338,7 +338,7 @@ export default { <template v-else> <div v-if="isChildrenEmpty && !isShownAddForm && !error" data-testid="links-empty"> - <p class="gl-mb-3 gl-text-gray-500"> + <p class="gl-mb-0 gl-text-gray-500"> {{ $options.i18n.emptyStateMessage }} </p> </div> diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 23bd2980c48..6cb7dcca27d 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -35,6 +35,14 @@ $item-remove-button-space: 42px; .item-body { position: relative; line-height: $gl-line-height; + border: 1px solid transparent; + border-radius: $gl-border-radius-base; + + &:hover, + &:focus-within { + background-color: $white; + border-color: $gray-50; + } .merge-request-status.closed { color: $red-500; @@ -63,6 +71,7 @@ $item-remove-button-space: 42px; .sortable-link { color: $gray-900; + font-weight: 500; } } @@ -89,16 +98,6 @@ $item-remove-button-space: 42px; } } - .item-attributes-area { - > * { - margin-left: 8px; - } - - @include media-breakpoint-down(sm) { - margin-left: -8px; - } - } - .item-milestone, .item-weight { cursor: help; @@ -149,7 +148,7 @@ $item-remove-button-space: 42px; } .item-path-id { - font-size: $gl-font-size-xs; + font-size: $gl-font-size-small; white-space: nowrap; .path-id-text { @@ -158,30 +157,6 @@ $item-remove-button-space: 42px; } } -.btn-item-remove { - position: absolute; - top: $gl-padding-4 / 2; - right: 0; - padding: $gl-padding-4; - margin-right: $gl-padding-4 / 2; - line-height: 0; - border-color: transparent; - background-color: transparent; - color: $gl-text-color-secondary; - - .related-items-tree & { - position: relative; - top: initial; - padding: $btn-sm-side-margin; - margin-right: initial; - } - - &:hover { - color: $gl-text-color; - border-color: $border-color; - } -} - .mr-ci-status { line-height: 0; } @@ -193,10 +168,6 @@ $item-remove-button-space: 42px; } @include media-breakpoint-up(sm) { - .item-info-area { - flex-basis: 100%; - } - .sortable-link { max-width: 90%; } @@ -267,18 +238,7 @@ $item-remove-button-space: 42px; } } - .btn-item-remove { - position: relative; - top: initial; - padding: $btn-sm-side-margin; - margin-right: $gl-padding-4 / 2; - } - .sortable-link { line-height: 1.3; } - - .item-info-area { - flex-basis: auto; - } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index f76a66fcb95..0d20e14a5c6 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -299,3 +299,9 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 .gl-focus:focus { @include gl-focus; } + +.gl-md-justify-content-space-between { + @include gl-media-breakpoint-up(md) { + justify-content: space-between; + } +} |