diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-20 12:10:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-12-20 12:10:35 +0300 |
commit | 0b7d3f810f287523fd4ad72c019d78e8d2983f8a (patch) | |
tree | fdb52060e586a5548f026b6a3ce71c5b676d9e5c /app/assets | |
parent | 51da6793bcbe7295c1f3f881f756b8b60ee06da1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets')
17 files changed, 379 insertions, 114 deletions
diff --git a/app/assets/javascripts/lib/utils/secret_detection.js b/app/assets/javascripts/lib/utils/secret_detection.js index 4d8612aeeff..92edd286c76 100644 --- a/app/assets/javascripts/lib/utils/secret_detection.js +++ b/app/assets/javascripts/lib/utils/secret_detection.js @@ -32,6 +32,10 @@ export const containsSensitiveToken = (message) => { name: 'GitLab Deploy Token', regex: `gldt-[0-9a-zA-Z_-]{20}`, }, + { + name: 'GitLab SCIM OAuth Access Token', + regex: `glsoat-[0-9a-zA-Z_-]{20}`, + }, ]; for (const rule of sensitiveDataPatterns) { diff --git a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue index dba738de5e1..ebe69925491 100644 --- a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue +++ b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue @@ -172,6 +172,6 @@ export default { </div> </div> </div> - <component :is="routerView" /> + <component :is="routerView" list-item-class="gl-px-5" /> </div> </template> diff --git a/app/assets/javascripts/organizations/mock_data.js b/app/assets/javascripts/organizations/mock_data.js index 0c363cf7c7f..92381087917 100644 --- a/app/assets/javascripts/organizations/mock_data.js +++ b/app/assets/javascripts/organizations/mock_data.js @@ -39,14 +39,14 @@ export const organizationProjects = { id: 'gid://gitlab/Project/8', nameWithNamespace: 'Twitter / Typeahead.Js', webUrl: 'http://127.0.0.1:3000/twitter/Typeahead.Js', - topics: ['JavaScript', 'Vue.js'], + topics: ['JavaScript', 'Vue.js', 'GraphQL', 'Jest', 'CSS', 'HTML'], forksCount: 4, avatarUrl: null, starCount: 0, visibility: 'public', openIssuesCount: 48, descriptionHtml: - '<p data-sourcepos="1:1-1:59" dir="auto">Optio et reprehenderit enim doloremque deserunt et commodi.</p>', + '<p data-sourcepos="1:1-1:59" dir="auto">Optio et reprehenderit enim doloremque deserunt et commodi. Sed sit amet iaculis neque. Morbi vel convallis elit. Aliquam vitae arcu orci. Aenean sem velit, dapibus eget enim id, tempor lobortis orci. Pellentesque dignissim nec velit eget sagittis. Maecenas lectus sapien, tincidunt ac cursus a, aliquam eu ipsum. Aliquam posuere maximus augue, ut vehicula elit vulputate condimentum. In libero leo, vehicula nec risus in, ullamcorper convallis risus. Phasellus sit amet lectus sit amet sem volutpat cursus. Nullam facilisis nulla nec lacus pretium, in pretium ex aliquam.</p>', issuesAccessLevel: 'enabled', forkingAccessLevel: 'enabled', isForked: true, @@ -141,7 +141,7 @@ export const organizationGroups = { parent: null, webUrl: 'http://127.0.0.1:3000/groups/Commit451', descriptionHtml: - '<p data-sourcepos="1:1-1:52" dir="auto">Autem praesentium vel ut ratione itaque ullam culpa.</p>', + '<p data-sourcepos="1:1-1:52" dir="auto">Autem praesentium vel ut ratione itaque ullam culpa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero sem, congue ut sem id, semper pharetra ante. Sed at dui ac nunc pellentesque congue. Phasellus posuere, nisl non pellentesque dignissim, lacus nisi molestie ex, vel placerat neque ligula non libero. Curabitur ipsum enim, pretium eu dignissim vitae, euismod nec nibh. Praesent eget ipsum eleifend, pellentesque tortor vel, consequat neque. Etiam suscipit dolor massa, sed consectetur nunc tincidunt ut. Suspendisse posuere malesuada finibus. Maecenas iaculis et diam eu iaculis. Proin at nulla sit amet erat sollicitudin suscipit sit amet a libero.</p>', avatarUrl: null, descendantGroupsCount: 0, projectsCount: 3, diff --git a/app/assets/javascripts/organizations/shared/components/groups_view.vue b/app/assets/javascripts/organizations/shared/components/groups_view.vue index eaa3017ef97..87bc79a5405 100644 --- a/app/assets/javascripts/organizations/shared/components/groups_view.vue +++ b/app/assets/javascripts/organizations/shared/components/groups_view.vue @@ -32,6 +32,11 @@ export default { required: false, default: false, }, + listItemClass: { + type: [String, Array, Object], + required: false, + default: '', + }, }, data() { return { @@ -77,6 +82,11 @@ export default { <template> <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="md" /> - <groups-list v-else-if="groups.length" :groups="groups" show-group-icon /> + <groups-list + v-else-if="groups.length" + :groups="groups" + show-group-icon + :list-item-class="listItemClass" + /> <gl-empty-state v-else v-bind="emptyStateProps" /> </template> diff --git a/app/assets/javascripts/organizations/shared/components/projects_view.vue b/app/assets/javascripts/organizations/shared/components/projects_view.vue index 9bf4e597884..323a8895821 100644 --- a/app/assets/javascripts/organizations/shared/components/projects_view.vue +++ b/app/assets/javascripts/organizations/shared/components/projects_view.vue @@ -36,6 +36,11 @@ export default { required: false, default: false, }, + listItemClass: { + type: [String, Array, Object], + required: false, + default: '', + }, }, data() { return { @@ -81,6 +86,11 @@ export default { <template> <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="md" /> - <projects-list v-else-if="projects.length" :projects="projects" show-project-icon /> + <projects-list + v-else-if="projects.length" + :projects="projects" + show-project-icon + :list-item-class="listItemClass" + /> <gl-empty-state v-else v-bind="emptyStateProps" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue index a375a167c68..e84a810c0b0 100644 --- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue +++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue @@ -13,6 +13,11 @@ export default { required: false, default: false, }, + listItemClass: { + type: [String, Array, Object], + required: false, + default: '', + }, }, }; </script> @@ -24,6 +29,7 @@ export default { :key="group.id" :group="group" :show-group-icon="showGroupIcon" + :class="listItemClass" @delete="$emit('delete', $event)" /> </ul> diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue index ca1e7400f2d..ace3846723c 100644 --- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue @@ -1,10 +1,9 @@ <script> -import { GlAvatarLabeled, GlIcon, GlTooltipDirective, GlTruncateText } from '@gitlab/ui'; +import { GlAvatarLabeled, GlIcon, GlTooltipDirective, GlTruncateText, GlBadge } from '@gitlab/ui'; import uniqueId from 'lodash/uniqueId'; import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/visibility_level/constants'; import { ACCESS_LEVEL_LABELS } from '~/access_level/constants'; -import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue'; import { __ } from '~/locale'; import { numberToMetricPrefix } from '~/lib/utils/number_utils'; import SafeHtml from '~/vue_shared/directives/safe_html'; @@ -20,15 +19,12 @@ export default { showMore: __('Show more'), showLess: __('Show less'), }, - avatarSize: { default: 32, md: 48 }, - safeHtmlConfig: { - ADD_TAGS: ['gl-emoji'], - }, + truncateTextToggleButtonProps: { class: 'gl-font-sm!' }, components: { GlAvatarLabeled, GlIcon, - UserAccessRoleBadge, GlTruncateText, + GlBadge, ListActions, DangerConfirmModal, }, @@ -76,7 +72,7 @@ export default { return this.group.parent ? 'subgroup' : 'group'; }, statsPadding() { - return this.showGroupIcon ? 'gl-pl-11' : 'gl-pl-8'; + return this.showGroupIcon ? 'gl-pl-12' : 'gl-pl-10'; }, descendantGroupsCount() { return numberToMetricPrefix(this.group.descendantGroupsCount); @@ -113,21 +109,22 @@ export default { </script> <template> - <li class="groups-list-item gl-py-5 gl-border-b gl-display-flex gl-align-items-flex-start"> - <div class="gl-md-display-flex gl-align-items-center gl-flex-grow-1"> + <li class="groups-list-item gl-py-5 gl-border-b gl-display-flex"> + <div class="gl-md-display-flex gl-flex-grow-1"> <div class="gl-display-flex gl-flex-grow-1"> - <gl-icon + <div v-if="showGroupIcon" - class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary" - :name="groupIconName" - /> + class="gl-display-flex gl-align-items-center gl-flex-shrink-0 gl-h-9 gl-mr-3" + > + <gl-icon class="gl-text-secondary" :name="groupIconName" /> + </div> <gl-avatar-labeled :entity-id="group.id" :entity-name="group.fullName" :label="group.fullName" :label-link="group.webUrl" shape="rect" - :size="$options.avatarSize" + :size="48" > <template #meta> <div class="gl-px-2"> @@ -141,9 +138,9 @@ export default { /> </div> <div class="gl-px-2"> - <user-access-role-badge v-if="shouldShowAccessLevel">{{ + <gl-badge v-if="shouldShowAccessLevel" size="sm" class="gl-display-block">{{ accessLevelLabel - }}</user-access-role-badge> + }}</gl-badge> </div> </div> </div> @@ -154,57 +151,57 @@ export default { :mobile-lines="2" :show-more-text="$options.i18n.showMore" :show-less-text="$options.i18n.showLess" - class="gl-mt-2" + :toggle-button-props="$options.truncateTextToggleButtonProps" + class="gl-mt-2 gl-max-w-88" > <div - v-safe-html:[$options.safeHtmlConfig]="group.descriptionHtml" - class="gl-font-sm md" + v-safe-html="group.descriptionHtml" + class="gl-font-sm gl-text-secondary md" data-testid="group-description" ></div> </gl-truncate-text> </gl-avatar-labeled> </div> <div - class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3" + class="gl-display-flex gl-align-items-center gl-gap-x-3 gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3 gl-md-h-9" :class="statsPadding" > - <div class="gl-display-flex gl-align-items-center gl-gap-x-3"> - <div - v-gl-tooltip="$options.i18n.subgroups" - :aria-label="$options.i18n.subgroups" - class="gl-text-secondary" - data-testid="subgroups-count" - > - <gl-icon name="subgroup" /> - <span>{{ descendantGroupsCount }}</span> - </div> - <div - v-gl-tooltip="$options.i18n.projects" - :aria-label="$options.i18n.projects" - class="gl-text-secondary" - data-testid="projects-count" - > - <gl-icon name="project" /> - <span>{{ projectsCount }}</span> - </div> - <div - v-gl-tooltip="$options.i18n.directMembers" - :aria-label="$options.i18n.directMembers" - class="gl-text-secondary" - data-testid="members-count" - > - <gl-icon name="users" /> - <span>{{ groupMembersCount }}</span> - </div> + <div + v-gl-tooltip="$options.i18n.subgroups" + :aria-label="$options.i18n.subgroups" + class="gl-text-secondary" + data-testid="subgroups-count" + > + <gl-icon name="subgroup" /> + <span>{{ descendantGroupsCount }}</span> + </div> + <div + v-gl-tooltip="$options.i18n.projects" + :aria-label="$options.i18n.projects" + class="gl-text-secondary" + data-testid="projects-count" + > + <gl-icon name="project" /> + <span>{{ projectsCount }}</span> + </div> + <div + v-gl-tooltip="$options.i18n.directMembers" + :aria-label="$options.i18n.directMembers" + class="gl-text-secondary" + data-testid="members-count" + > + <gl-icon name="users" /> + <span>{{ groupMembersCount }}</span> </div> </div> </div> - <list-actions - v-if="hasActions" - class="gl-ml-3 gl-md-align-self-center" - :actions="actions" - :available-actions="group.availableActions" - /> + <div class="gl-display-flex gl-align-items-center gl-h-9 gl-ml-3"> + <list-actions + v-if="hasActions" + :actions="actions" + :available-actions="group.availableActions" + /> + </div> <danger-confirm-modal v-if="hasActionDelete" diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue index 3a4da54c84c..d06024638fa 100644 --- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue +++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list.vue @@ -35,6 +35,11 @@ export default { required: false, default: false, }, + listItemClass: { + type: [String, Array, Object], + required: false, + default: '', + }, }, }; </script> @@ -46,6 +51,7 @@ export default { :key="project.id" :project="project" :show-project-icon="showProjectIcon" + :class="listItemClass" @delete="$emit('delete', $event)" /> </ul> diff --git a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue index ce75e305473..3a077d09e40 100644 --- a/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue +++ b/app/assets/javascripts/vue_shared/components/projects_list/projects_list_item.vue @@ -7,13 +7,13 @@ import { GlTooltipDirective, GlPopover, GlSprintf, + GlTruncateText, } from '@gitlab/ui'; import uniqueId from 'lodash/uniqueId'; import { VISIBILITY_TYPE_ICON, PROJECT_VISIBILITY_TYPE } from '~/visibility_level/constants'; import { ACCESS_LEVEL_LABELS } from '~/access_level/constants'; import { FEATURABLE_ENABLED } from '~/featurable/constants'; -import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue'; import { __ } from '~/locale'; import { numberToMetricPrefix } from '~/lib/utils/number_utils'; import { truncate } from '~/lib/utils/text_utility'; @@ -37,19 +37,18 @@ export default { moreTopics: __('More topics'), updated: __('Updated'), actions: __('Actions'), + showMore: __('Show more'), + showLess: __('Show less'), }, - avatarSize: { default: 32, md: 48 }, - safeHtmlConfig: { - ADD_TAGS: ['gl-emoji'], - }, + truncateTextToggleButtonProps: { class: 'gl-font-sm!' }, components: { GlAvatarLabeled, GlIcon, - UserAccessRoleBadge, GlLink, GlBadge, GlPopover, GlSprintf, + GlTruncateText, TimeAgoTooltip, DeleteModal, ListActions, @@ -203,21 +202,22 @@ export default { </script> <template> - <li class="projects-list-item gl-py-5 gl-border-b gl-display-flex gl-align-items-flex-start"> - <div class="gl-md-display-flex gl-align-items-center gl-flex-grow-1"> + <li class="projects-list-item gl-py-5 gl-border-b gl-display-flex"> + <div class="gl-md-display-flex gl-flex-grow-1"> <div class="gl-display-flex gl-flex-grow-1"> - <gl-icon + <div v-if="showProjectIcon" - class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary" - name="project" - /> + class="gl-display-flex gl-align-items-center gl-flex-shrink-0 gl-h-9 gl-mr-3" + > + <gl-icon class="gl-text-secondary" name="project" /> + </div> <gl-avatar-labeled :entity-id="project.id" :entity-name="project.name" :label="project.name" :label-link="project.webUrl" shape="rect" - :size="$options.avatarSize" + :size="48" > <template #meta> <div class="gl-px-2"> @@ -231,33 +231,46 @@ export default { /> </div> <div class="gl-px-2"> - <user-access-role-badge v-if="shouldShowAccessLevel">{{ + <gl-badge v-if="shouldShowAccessLevel" size="sm" class="gl-display-block">{{ accessLevelLabel - }}</user-access-role-badge> + }}</gl-badge> </div> </div> </div> </template> - <div + <gl-truncate-text v-if="project.descriptionHtml" - v-safe-html:[$options.safeHtmlConfig]="project.descriptionHtml" - class="gl-font-sm gl-overflow-hidden gl-line-height-20 description md" - data-testid="project-description" - ></div> + :lines="2" + :mobile-lines="2" + :show-more-text="$options.i18n.showMore" + :show-less-text="$options.i18n.showLess" + :toggle-button-props="$options.truncateTextToggleButtonProps" + class="gl-mt-2 gl-max-w-88" + > + <div + v-safe-html="project.descriptionHtml" + class="gl-font-sm gl-text-secondary md" + data-testid="project-description" + ></div> + </gl-truncate-text> <div v-if="hasTopics" class="gl-mt-3" data-testid="project-topics"> <div class="gl-w-full gl-display-inline-flex gl-flex-wrap gl-font-base gl-font-weight-normal gl-align-items-center gl-mx-n2 gl-my-n2" > - <span class="gl-p-2 gl-text-secondary">{{ $options.i18n.topics }}:</span> + <span class="gl-p-2 gl-font-sm gl-text-secondary">{{ $options.i18n.topics }}:</span> <div v-for="topic in visibleTopics" :key="topic" class="gl-p-2"> - <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)"> + <gl-badge + v-gl-tooltip="topicTooltipTitle(topic)" + size="sm" + :href="topicPath(topic)" + > {{ topicTitle(topic) }} </gl-badge> </div> <template v-if="popoverTopics.length"> <div :id="topicsPopoverTarget" - class="gl-p-2 gl-text-secondary" + class="gl-p-2 gl-font-sm gl-text-secondary" role="button" tabindex="0" > @@ -272,7 +285,11 @@ export default { :key="topic" class="gl-p-2 gl-display-inline-block" > - <gl-badge v-gl-tooltip="topicTooltipTitle(topic)" :href="topicPath(topic)"> + <gl-badge + v-gl-tooltip="topicTooltipTitle(topic)" + size="sm" + :href="topicPath(topic)" + > {{ topicTitle(topic) }} </gl-badge> </div> @@ -285,9 +302,9 @@ export default { </div> <div class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0" - :class="showProjectIcon ? 'gl-pl-11' : 'gl-pl-8'" + :class="showProjectIcon ? 'gl-pl-12' : 'gl-pl-10'" > - <div class="gl-display-flex gl-align-items-center gl-gap-x-3"> + <div class="gl-display-flex gl-align-items-center gl-gap-x-3 gl-md-h-9"> <gl-badge v-if="project.archived" variant="warning">{{ $options.i18n.archived }}</gl-badge> @@ -323,19 +340,20 @@ export default { </div> <div v-if="project.updatedAt" - class="gl-font-sm gl-white-space-nowrap gl-text-secondary gl-mt-3" + class="gl-font-sm gl-white-space-nowrap gl-text-secondary gl-mt-3 gl-md-mt-0" > <span>{{ $options.i18n.updated }}</span> <time-ago-tooltip :time="project.updatedAt" /> </div> </div> </div> - <list-actions - v-if="hasActions" - class="gl-ml-3 gl-md-align-self-center" - :actions="actions" - :available-actions="project.availableActions" - /> + <div class="gl-display-flex gl-align-items-center gl-h-9 gl-ml-3"> + <list-actions + v-if="hasActions" + :actions="actions" + :available-actions="project.availableActions" + /> + </div> <delete-modal v-if="hasActionDelete" diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue index 77c573b47e4..4301dcca30b 100644 --- a/app/assets/javascripts/work_items/components/work_item_description.vue +++ b/app/assets/javascripts/work_items/components/work_item_description.vue @@ -40,12 +40,27 @@ export default { type: String, required: true, }, + disableInlineEditing: { + type: Boolean, + required: false, + default: false, + }, + editMode: { + type: Boolean, + required: false, + default: false, + }, + updateInProgress: { + type: Boolean, + required: false, + default: false, + }, }, markdownDocsPath: helpPagePath('user/markdown'), data() { return { workItem: {}, - isEditing: false, + isEditing: this.editMode, isSubmitting: false, isSubmittingWithKeydown: false, descriptionText: '', @@ -126,6 +141,26 @@ export default { autocompleteDataSources() { return autocompleteDataSources(this.fullPath, this.workItem.iid); }, + saveButtonText() { + return this.editMode ? __('Save changes') : __('Save'); + }, + formGroupClass() { + return { + 'gl-border-t gl-pt-6': !this.disableInlineEditing, + 'gl-mb-5 common-note-form': true, + }; + }, + }, + watch: { + updateInProgress(newValue) { + this.isSubmitting = newValue; + }, + editMode(newValue) { + this.isEditing = newValue; + if (newValue) { + this.startEditing(); + } + }, }, methods: { checkForConflicts() { @@ -159,6 +194,7 @@ export default { } this.isEditing = false; + this.$emit('cancelEditing'); clearDraft(this.autosaveKey); }, onInput() { @@ -175,6 +211,11 @@ export default { this.isSubmittingWithKeydown = true; } + if (this.disableInlineEditing) { + this.$emit('updateWorkItem'); + return; + } + this.isSubmitting = true; try { @@ -210,6 +251,9 @@ export default { }, setDescriptionText(newText) { this.descriptionText = newText; + if (this.disableInlineEditing) { + this.$emit('updateDraft', this.descriptionText); + } updateDraft(this.autosaveKey, this.descriptionText); }, handleDescriptionTextUpdated(newText) { @@ -224,12 +268,13 @@ export default { <div> <gl-form v-if="isEditing" @submit.prevent="updateWorkItem" @reset.prevent="cancelEditing"> <gl-form-group - class="gl-mb-5 gl-border-t gl-pt-6 common-note-form" + :class="formGroupClass" :label="__('Description')" + :label-sr-only="disableInlineEditing" label-for="work-item-description" > <markdown-editor - class="gl-my-5" + class="gl-mb-5" :value="descriptionText" :render-markdown-path="markdownPreviewPath" :markdown-docs-path="$options.markdownDocsPath" @@ -285,9 +330,9 @@ export default { :loading="isSubmitting" data-testid="save-description" type="submit" - >{{ __('Save') }} + >{{ saveButtonText }} </gl-button> - <gl-button category="tertiary" class="gl-ml-3" data-testid="cancel" type="reset" + <gl-button category="secondary" class="gl-ml-3" data-testid="cancel" type="reset" >{{ __('Cancel') }} </gl-button> </template> @@ -296,13 +341,14 @@ export default { </gl-form> <work-item-description-rendered v-else + :disable-inline-editing="disableInlineEditing" :work-item-description="workItemDescription" :can-edit="canEdit" @startEditing="startEditing" @descriptionUpdated="handleDescriptionTextUpdated" /> <edited-at - v-if="lastEditedAt" + v-if="lastEditedAt && !editMode" :updated-at="lastEditedAt" :updated-by-name="lastEditedByName" :updated-by-path="lastEditedByPath" diff --git a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue index 124e05db431..1699f6c419e 100644 --- a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue +++ b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue @@ -22,6 +22,16 @@ export default { type: Boolean, required: true, }, + disableInlineEditing: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + checkboxes: [], + }; }, computed: { descriptionText() { @@ -33,6 +43,12 @@ export default { descriptionEmpty() { return this.descriptionHtml?.trim() === ''; }, + showEmptyDescription() { + return this.descriptionEmpty && !this.disableInlineEditing; + }, + showEditButton() { + return this.canEdit && !this.disableInlineEditing; + }, }, watch: { descriptionHtml: { @@ -96,9 +112,11 @@ export default { <template> <div class="gl-mb-5"> <div class="gl-display-inline-flex gl-align-items-center gl-mb-3"> - <label class="d-block col-form-label gl-mr-5">{{ __('Description') }}</label> + <label v-if="!disableInlineEditing" class="d-block col-form-label gl-mr-5">{{ + __('Description') + }}</label> <gl-button - v-if="canEdit" + v-if="showEditButton" v-gl-tooltip class="gl-ml-auto" icon="pencil" @@ -109,9 +127,9 @@ export default { /> </div> - <div v-if="descriptionEmpty" class="gl-text-secondary gl-mb-5">{{ __('None') }}</div> + <div v-if="showEmptyDescription" class="gl-text-secondary gl-mb-5">{{ __('None') }}</div> <div - v-else + v-else-if="!descriptionEmpty" ref="gfm-content" v-safe-html="descriptionHtml" class="md gl-mb-5 gl-min-h-8 gl-clearfix" diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue index b74cbc85379..93f552bfa4c 100644 --- a/app/assets/javascripts/work_items/components/work_item_detail.vue +++ b/app/assets/javascripts/work_items/components/work_item_detail.vue @@ -2,6 +2,7 @@ import { isEmpty } from 'lodash'; import { GlAlert, GlSkeletonLoader, GlButton, GlTooltipDirective, GlEmptyState } from '@gitlab/ui'; import noAccessSvg from '@gitlab/svgs/dist/illustrations/analytics/no-access.svg?raw'; +import * as Sentry from '~/sentry/sentry_browser_wrapper'; import { s__ } from '~/locale'; import { getParameterByName, updateHistory, setUrlParams } from '~/lib/utils/url_utility'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; @@ -41,6 +42,7 @@ import WorkItemAwardEmoji from './work_item_award_emoji.vue'; import WorkItemRelationships from './work_item_relationships/work_item_relationships.vue'; import WorkItemStickyHeader from './work_item_sticky_header.vue'; import WorkItemAncestors from './work_item_ancestors/work_item_ancestors.vue'; +import WorkItemTitleWithEdit from './work_item_title_with_edit.vue'; export default { i18n, @@ -67,6 +69,7 @@ export default { WorkItemRelationships, WorkItemStickyHeader, WorkItemAncestors, + WorkItemTitleWithEdit, }, mixins: [glFeatureFlagMixin()], inject: ['fullPath', 'isGroup', 'reportAbusePath'], @@ -94,6 +97,8 @@ export default { reportedUrl: '', reportedUserId: 0, isStickyHeaderShowing: false, + editMode: false, + draftData: {}, }; }, apollo: { @@ -219,7 +224,7 @@ export default { }; }, showIntersectionObserver() { - return !this.isModal && this.workItemsMvc2Enabled; + return !this.isModal && this.workItemsMvc2Enabled && !this.editMode; }, hasLinkedWorkItems() { return this.glFeatures.linkedWorkItems; @@ -233,13 +238,15 @@ export default { titleClassHeader() { return { 'gl-sm-display-none!': this.parentWorkItem, - 'gl-w-full': !this.parentWorkItem, + 'gl-w-full': !this.parentWorkItem && !this.editMode, + 'editable-wi-title': this.editMode && !this.parentWorkItem, }; }, titleClassComponent() { return { 'gl-sm-display-block!': !this.parentWorkItem, 'gl-display-none gl-sm-display-block!': this.parentWorkItem, + 'gl-mt-3 editable-wi-title': this.workItemsMvc2Enabled, }; }, headerWrapperClass() { @@ -258,6 +265,9 @@ export default { } }, methods: { + enableEditMode() { + this.editMode = true; + }, isWidgetPresent(type) { return this.workItem.widgets?.find((widget) => widget.type === type); }, @@ -349,6 +359,45 @@ export default { this.isStickyHeaderShowing = true; } }, + updateDraft(type, value) { + this.draftData[type] = value; + }, + async updateWorkItem() { + this.updateInProgress = true; + try { + const { + data: { workItemUpdate }, + } = await this.$apollo.mutate({ + mutation: updateWorkItemMutation, + variables: { + input: { + id: this.workItem.id, + title: this.draftData.title, + descriptionWidget: { + description: this.draftData.description, + }, + }, + }, + }); + + const { errors } = workItemUpdate; + + if (errors?.length) { + this.updateError = errors.join('\n'); + throw new Error(this.updateError); + } + + this.editMode = false; + } catch (error) { + Sentry.captureException(error); + } finally { + this.updateInProgress = false; + } + }, + cancelEditing() { + this.draftData = {}; + this.editMode = false; + }, }, WORK_ITEM_TYPE_VALUE_OBJECTIVE, WORKSPACE_PROJECT, @@ -388,8 +437,16 @@ export default { :class="titleClassHeader" data-testid="work-item-type" > + <work-item-title-with-edit + v-if="workItem.title && workItemsMvc2Enabled" + ref="title" + class="gl-mt-3 gl-sm-display-block!" + :is-editing="editMode" + :title="workItem.title" + @updateDraft="updateDraft('title', $event)" + /> <work-item-title - v-if="workItem.title" + v-else-if="workItem.title" ref="title" class="gl-sm-display-block!" :work-item-id="workItem.id" @@ -402,6 +459,14 @@ export default { <div class="detail-page-header-actions gl-display-flex gl-align-self-start gl-ml-auto gl-gap-3" > + <gl-button + v-if="workItemsMvc2Enabled && !editMode" + category="secondary" + data-testid="work-item-edit-form-button" + @click="enableEditMode" + > + {{ __('Edit') }} + </gl-button> <work-item-todos v-if="showWorkItemCurrentUserTodos" :work-item-id="workItem.id" @@ -441,8 +506,16 @@ export default { /> </div> <div> + <work-item-title-with-edit + v-if="workItem.title && workItemsMvc2Enabled && parentWorkItem" + ref="title" + :is-editing="editMode" + :class="titleClassComponent" + :title="workItem.title" + @updateDraft="updateDraft('title', $event)" + /> <work-item-title - v-if="workItem.title && parentWorkItem" + v-else-if="workItem.title && parentWorkItem" ref="title" :class="titleClassComponent" :work-item-id="workItem.id" @@ -453,6 +526,7 @@ export default { @error="updateError = $event" /> <work-item-created-updated + v-if="!editMode" :full-path="fullPath" :work-item-iid="workItemIid" :update-in-progress="updateInProgress" @@ -490,10 +564,16 @@ export default { /> <work-item-description v-if="hasDescriptionWidget" + :class="workItemsMvc2Enabled ? '' : 'gl-pt-5'" + :disable-inline-editing="workItemsMvc2Enabled" + :edit-mode="editMode" :full-path="fullPath" :work-item-id="workItem.id" :work-item-iid="workItem.iid" - class="gl-pt-5" + :update-in-progress="updateInProgress" + @updateWorkItem="updateWorkItem" + @updateDraft="updateDraft('description', $event)" + @cancelEditing="cancelEditing" @error="updateError = $event" /> <work-item-award-emoji diff --git a/app/assets/javascripts/work_items/components/work_item_title_with_edit.vue b/app/assets/javascripts/work_items/components/work_item_title_with_edit.vue new file mode 100644 index 00000000000..02ed25f98e4 --- /dev/null +++ b/app/assets/javascripts/work_items/components/work_item_title_with_edit.vue @@ -0,0 +1,43 @@ +<script> +import { GlFormGroup, GlFormInput } from '@gitlab/ui'; +import { __ } from '~/locale'; + +export default { + components: { + GlFormGroup, + GlFormInput, + }, + i18n: { + titleLabel: __('Title (required)'), + }, + props: { + title: { + type: String, + required: true, + }, + isEditing: { + type: Boolean, + required: false, + default: false, + }, + }, +}; +</script> + +<template> + <gl-form-group v-if="isEditing" :label="$options.i18n.titleLabel" label-for="work-item-title"> + <gl-form-input + id="work-item-title" + class="gl-w-full" + :value="title" + @change="$emit('updateDraft', $event)" + /> + </gl-form-group> + <h1 + v-else + data-testid="work-item-title" + class="gl-w-full gl-font-weight-normal gl-sm-font-weight-bold gl-mb-1 gl-mt-0 gl-font-size-h-display" + > + {{ title }} + </h1> +</template> diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index eefdbda8f4f..8153c4d4717 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -602,6 +602,20 @@ } @include email-code-block; + + &.gl-text-secondary { + color: $gl-text-color-secondary; + + p, + h1, + h2, + h3, + h4, + h5, + table:not(.code) { + color: $gl-text-color-secondary; + } + } } /** diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index c2ecf3702f9..bd24d991c8d 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -189,10 +189,6 @@ .project-page-sidebar-block { width: $right-sidebar-width - 1px; - - &:first-of-type { - padding-top: $gl-spacing-scale-1; - } } .nav { diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index b9ab2450ff9..5b354f3575c 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -4,6 +4,7 @@ $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important; $work-item-overview-right-sidebar-width: 23rem; $work-item-sticky-header-height: 52px; +$work-item-overview-gap-width: 2rem; .gl-token-selector-token-container { display: flex; @@ -146,7 +147,7 @@ $work-item-sticky-header-height: 52px; @include media-breakpoint-up(md) { display: grid; grid-template-columns: 1fr $work-item-overview-right-sidebar-width; - gap: 2rem; + gap: $work-item-overview-gap-width; } } @@ -216,6 +217,12 @@ $work-item-sticky-header-height: 52px; } } +.editable-wi-title { + width: 100%; + @include media-breakpoint-up(md) { + width: calc(100% - #{$work-item-overview-right-sidebar-width} - #{$work-item-overview-gap-width}); + } +} // Disclosure hierarchy component, used for Ancestors widget $disclosure-hierarchy-chevron-dimension: 1.2rem; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 79ea8d3cc70..7ae17f4c191 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -136,3 +136,13 @@ .gl-last-of-type-border-b-0:last-of-type { @include gl-border-b-0; } + +.gl-md-h-9 { + @include gl-media-breakpoint-up(md) { + height: $gl-spacing-scale-9; + } +} + +.gl-pl-12 { + padding-left: $gl-spacing-scale-12; +} |