diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-08 18:10:48 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2024-01-08 18:10:48 +0300 |
commit | 025c440ddc394806bccf19c56043e369ed7e84f5 (patch) | |
tree | 0f229b47b4fe498e38f6b176729079b5d92eef4a /app/assets | |
parent | a0a2334dfd251af627aaf9e99486f8579087c3c9 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/logo.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/merge_requests/components/compare_app.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/merge_requests/components/compare_dropdown.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/merge_requests/creations/new/index.js | 13 | ||||
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue | 37 | ||||
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_milestone_inline.vue (renamed from app/assets/javascripts/work_items/components/work_item_milestone.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue | 203 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/login.scss | 98 |
8 files changed, 254 insertions, 111 deletions
diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js index c76e44a196d..b4933376d4e 100644 --- a/app/assets/javascripts/logo.js +++ b/app/assets/javascripts/logo.js @@ -13,7 +13,7 @@ export function initPortraitLogoDetection() { const isPortrait = img.height > img.width; if (isPortrait) { // Limit the width when the logo has portrait format - img.classList.replace('gl-h-9', 'gl-w-10'); + img.classList.replace('gl-h-10', 'gl-w-10'); } img.classList.remove('gl-visibility-hidden'); }, diff --git a/app/assets/javascripts/merge_requests/components/compare_app.vue b/app/assets/javascripts/merge_requests/components/compare_app.vue index 538aa090aa8..a753641ffd2 100644 --- a/app/assets/javascripts/merge_requests/components/compare_app.vue +++ b/app/assets/javascripts/merge_requests/components/compare_app.vue @@ -42,6 +42,11 @@ export default { required: false, default: () => ({}), }, + disabled: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -120,6 +125,7 @@ export default { :default="currentBranch" :toggle-class="toggleClass.branch" :data-qa-compare-side="compareSide" + :disabled="disabled" data-testid="compare-dropdown" @selected="selectBranch" /> diff --git a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue index 20989206a51..35fbf4bc4e6 100644 --- a/app/assets/javascripts/merge_requests/components/compare_dropdown.vue +++ b/app/assets/javascripts/merge_requests/components/compare_dropdown.vue @@ -46,6 +46,11 @@ export default { required: false, default: '', }, + disabled: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { @@ -131,6 +136,7 @@ export default { :toggle-text="current.text || dropdownHeader" :header-text="dropdownHeader" :searching="isLoading" + :disabled="disabled" searchable class="gl-w-full dropdown-target-project" :toggle-class="[ 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 8cb1462c883..3d877bb3abb 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 @@ -16,8 +16,9 @@ if (mrNewCompareNode) { 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); + const sourceBranch = Vue.observable(currentSourceBranch); + // eslint-disable-next-line no-new new Vue({ el: sourceCompareEl, @@ -52,6 +53,9 @@ if (mrNewCompareNode) { if (targetBranchName) { targetBranch.name = targetBranchName; } + + sourceBranch.value = branchName; + sourceBranch.text = branchName; }, }, render(h) { @@ -102,9 +106,14 @@ if (mrNewCompareNode) { return currentTargetBranch; }, + isDisabled() { + return !sourceBranch.value; + }, }, render(h) { - return h(CompareApp, { props: { currentBranch: this.currentBranch } }); + return h(CompareApp, { + props: { currentBranch: this.currentBranch, disabled: this.isDisabled }, + }); }, }); } else { diff --git a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue index f71e6e6b405..79f0fdca061 100644 --- a/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue +++ b/app/assets/javascripts/work_items/components/work_item_attributes_wrapper.vue @@ -17,14 +17,16 @@ import { import WorkItemDueDate from './work_item_due_date.vue'; import WorkItemAssignees from './work_item_assignees.vue'; import WorkItemLabels from './work_item_labels.vue'; -import WorkItemMilestone from './work_item_milestone.vue'; +import WorkItemMilestoneInline from './work_item_milestone_inline.vue'; +import WorkItemMilestoneWithEdit from './work_item_milestone_with_edit.vue'; import WorkItemParentInline from './work_item_parent_inline.vue'; import WorkItemParent from './work_item_parent_with_edit.vue'; export default { components: { WorkItemLabels, - WorkItemMilestone, + WorkItemMilestoneInline, + WorkItemMilestoneWithEdit, WorkItemAssignees, WorkItemDueDate, WorkItemParent, @@ -140,15 +142,28 @@ export default { :work-item-type="workItemType" @error="$emit('error', $event)" /> - <work-item-milestone - v-if="workItemMilestone" - :full-path="fullPath" - :work-item-id="workItem.id" - :work-item-milestone="workItemMilestone.milestone" - :work-item-type="workItemType" - :can-update="canUpdate" - @error="$emit('error', $event)" - /> + <template v-if="workItemMilestone"> + <work-item-milestone-with-edit + v-if="glFeatures.workItemsMvc2" + class="gl-mb-5" + :full-path="fullPath" + :work-item-id="workItem.id" + :work-item-milestone="workItemMilestone.milestone" + :work-item-type="workItemType" + :can-update="canUpdate" + @error="$emit('error', $event)" + /> + <work-item-milestone-inline + v-else + class="gl-mb-5" + :full-path="fullPath" + :work-item-id="workItem.id" + :work-item-milestone="workItemMilestone.milestone" + :work-item-type="workItemType" + :can-update="canUpdate" + @error="$emit('error', $event)" + /> + </template> <template v-if="workItemWeight"> <work-item-weight v-if="glFeatures.workItemsMvc2" diff --git a/app/assets/javascripts/work_items/components/work_item_milestone.vue b/app/assets/javascripts/work_items/components/work_item_milestone_inline.vue index dbeb3d4d3ff..dbeb3d4d3ff 100644 --- a/app/assets/javascripts/work_items/components/work_item_milestone.vue +++ b/app/assets/javascripts/work_items/components/work_item_milestone_inline.vue diff --git a/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue new file mode 100644 index 00000000000..9588d21a3c5 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_milestone_with_edit.vue @@ -0,0 +1,203 @@ +<script> +import { GlLink } from '@gitlab/ui'; +import * as Sentry from '~/sentry/sentry_browser_wrapper'; +import Tracking from '~/tracking'; +import { s__, __ } from '~/locale'; +import { MILESTONE_STATE } from '~/sidebar/constants'; +import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; +import WorkItemSidebarDropdownWidgetWithEdit from '~/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue'; +import projectMilestonesQuery from '~/sidebar/queries/project_milestones.query.graphql'; +import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql'; +import { + I18N_WORK_ITEM_ERROR_UPDATING, + sprintfWorkItem, + TRACKING_CATEGORY_SHOW, +} from '../constants'; + +export default { + i18n: { + milestone: s__('WorkItem|Milestone'), + none: s__('WorkItem|None'), + noMilestone: s__('WorkItem|No milestone'), + milestoneFetchError: s__( + 'WorkItem|Something went wrong while fetching milestones. Please try again.', + ), + expiredText: __('(expired)'), + }, + components: { + WorkItemSidebarDropdownWidgetWithEdit, + GlLink, + }, + mixins: [Tracking.mixin()], + props: { + fullPath: { + type: String, + required: true, + }, + workItemId: { + type: String, + required: true, + }, + workItemMilestone: { + type: Object, + required: false, + default: () => ({}), + }, + workItemType: { + type: String, + required: false, + default: '', + }, + canUpdate: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + searchTerm: '', + shouldFetch: false, + updateInProgress: false, + milestones: [], + localMilestone: this.workItemMilestone, + }; + }, + computed: { + tracking() { + return { + category: TRACKING_CATEGORY_SHOW, + label: 'item_milestone', + property: `type_${this.workItemType}`, + }; + }, + emptyPlaceholder() { + return this.canUpdate ? this.$options.i18n.noMilestone : this.$options.i18n.none; + }, + expired() { + return this.localMilestone?.expired ? ` ${this.$options.i18n.expiredText}` : ''; + }, + dropdownText() { + return this.localMilestone?.title + ? `${this.localMilestone?.title}${this.expired}` + : this.emptyPlaceholder; + }, + isLoadingMilestones() { + return this.$apollo.queries.milestones.loading; + }, + milestonesList() { + return this.milestones.map(({ id, title, expired }) => ({ + value: id, + text: title, + expired, + })); + }, + }, + apollo: { + milestones: { + query: projectMilestonesQuery, + debounce: DEFAULT_DEBOUNCE_AND_THROTTLE_MS, + variables() { + return { + fullPath: this.fullPath, + title: this.searchTerm, + state: MILESTONE_STATE.ACTIVE, + first: 20, + }; + }, + skip() { + return !this.shouldFetch; + }, + update(data) { + return data?.workspace?.attributes?.nodes || []; + }, + error() { + this.$emit('error', this.i18n.milestoneFetchError); + }, + }, + }, + methods: { + onDropdownShown() { + this.searchTerm = ''; + this.shouldFetch = true; + }, + search(searchTerm) { + this.searchTerm = searchTerm; + this.shouldFetch = true; + }, + itemExpiredText(item) { + return item.expired ? this.$options.i18n.expiredText : ''; + }, + updateMilestone(selectedMilestoneId) { + if (this.localMilestone?.id === selectedMilestoneId) { + return; + } + + this.localMilestone = selectedMilestoneId + ? this.milestones.find(({ id }) => id === selectedMilestoneId) + : null; + + this.track('updated_milestone'); + this.updateInProgress = true; + + this.$apollo + .mutate({ + mutation: updateWorkItemMutation, + variables: { + input: { + id: this.workItemId, + milestoneWidget: { + milestoneId: selectedMilestoneId, + }, + }, + }, + }) + .then(({ data }) => { + if (data.workItemUpdate.errors.length) { + throw new Error(data.workItemUpdate.errors.join('\n')); + } + }) + .catch((error) => { + this.localMilestone = this.workItemMilestone; + const msg = sprintfWorkItem(I18N_WORK_ITEM_ERROR_UPDATING, this.workItemType); + this.$emit('error', msg); + Sentry.captureException(error); + }) + .finally(() => { + this.updateInProgress = false; + this.searchTerm = ''; + this.shouldFetch = false; + }); + }, + }, +}; +</script> + +<template> + <work-item-sidebar-dropdown-widget-with-edit + :dropdown-label="$options.i18n.milestone" + :can-update="canUpdate" + dropdown-name="milestone" + :loading="isLoadingMilestones" + :list-items="milestonesList" + :item-value="localMilestone" + :update-in-progress="updateInProgress" + :toggle-dropdown-text="dropdownText" + :header-text="__('Select milestone')" + :reset-button-label="__('Clear')" + data-testid="work-item-milestone-with-edit" + @dropdownShown="onDropdownShown" + @searchStarted="search" + @updateValue="updateMilestone" + > + <template #list-item="{ item }"> + <div>{{ item.text }}{{ itemExpiredText(item) }}</div> + <div v-if="item.title">{{ item.title }}</div> + </template> + <template #readonly> + <gl-link class="gl-text-gray-900!" :href="localMilestone.webPath"> + {{ localMilestone.title }}{{ expired }} + </gl-link> + </template> + </work-item-sidebar-dropdown-widget-with-edit> +</template> diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss index 4cc44b01e60..bdbb2fb786f 100644 --- a/app/assets/stylesheets/page_bundles/login.scss +++ b/app/assets/stylesheets/page_bundles/login.scss @@ -16,43 +16,8 @@ top: 8px; } - .brand-holder { - font-size: 18px; - line-height: 1.5; - - p { - font-size: 16px; - color: $login-brand-holder-color; - } - - h3 { - font-size: 22px; - } - - img { - max-width: 100%; - margin-bottom: 30px; - } - - a { - font-weight: $gl-font-weight-bold; - } - } - - p { - font-size: 13px; - } - - .signin-text { - p { - margin-bottom: 0; - line-height: 1.5; - } - } - .borderless { - .login-box, - .omniauth-container { + .login-box { box-shadow: none; } } @@ -64,67 +29,6 @@ } } - .login-box, - .omniauth-container { - box-shadow: 0 0 0 1px $border-color; - border-radius: $border-radius; - - .login-heading h3 { - font-weight: $gl-font-weight-normal; - line-height: 1.5; - margin: 0 0 10px; - } - - .login-footer { - margin-top: 10px; - - p:last-child { - margin-bottom: 0; - } - } - - a.forgot { - float: right; - padding-top: 6px; - } - - .nav .active a { - background: transparent; - } - - // Styles the glowing border of focused input for username async validation - .login-body { - font-size: 13px; - - .username .validation-success { - color: $green-600; - } - - .username .validation-error { - color: $red-500; - } - - .terms .gl-form-checkbox { - @include gl-reset-font-size; - } - } - } - - .omniauth-container { - border-radius: $border-radius; - font-size: 13px; - - p { - margin: 0; - } - - form { - padding: 0; - border: 0; - background: none; - } - } - .new-session-tabs { &.nav-links-unboxed { border-color: transparent; |