diff options
Diffstat (limited to 'app/assets/javascripts/sidebar')
13 files changed, 89 insertions, 51 deletions
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue index 5b4dc20e9c8..18654b73ab3 100644 --- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue +++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees_widget.vue @@ -96,6 +96,9 @@ export default { return data.workspace?.issuable; }, result({ data }) { + if (!data) { + return; + } const issuable = data.workspace?.issuable; if (issuable) { this.selected = cloneDeep(issuable.assignees.nodes); diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue index dc0f2b54a7b..f234c5ea3c9 100644 --- a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue +++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_widget.vue @@ -66,6 +66,9 @@ export default { return data.workspace?.issuable?.confidential || false; }, result({ data }) { + if (!data) { + return; + } this.$emit('confidentialityUpdated', data.workspace?.issuable?.confidential); }, error() { diff --git a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue index 404bcc3122a..be7a89c2869 100644 --- a/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue +++ b/app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue @@ -86,6 +86,9 @@ export default { return data.workspace?.issuable || {}; }, result({ data }) { + if (!data) { + return; + } this.$emit(`${this.dateType}Updated`, data.workspace?.issuable?.[this.dateType]); }, error() { diff --git a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue index da792b3a2aa..ec23e817127 100644 --- a/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue +++ b/app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue @@ -10,6 +10,7 @@ import { GlIcon, GlTooltipDirective, } from '@gitlab/ui'; +import { kebabCase, snakeCase } from 'lodash'; import createFlash from '~/flash'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { IssuableType } from '~/issues/constants'; @@ -221,6 +222,12 @@ export default { // MV to EE https://gitlab.com/gitlab-org/gitlab/-/issues/345311 return this.issuableAttribute === IssuableType.Epic; }, + formatIssuableAttribute() { + return { + kebab: kebabCase(this.issuableAttribute), + snake: snakeCase(this.issuableAttribute), + }; + }, }, methods: { updateAttribute(attributeId) { @@ -300,21 +307,28 @@ export default { <sidebar-editable-item ref="editable" :title="attributeTypeTitle" - :data-testid="`${issuableAttribute}-edit`" + :data-testid="`${formatIssuableAttribute.kebab}-edit`" :tracking="tracking" :loading="updating || loading" @open="handleOpen" @close="handleClose" > <template #collapsed> - <div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon"> - <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="attributeTypeIcon" /> - <span class="collapse-truncated-title"> - {{ attributeTitle }} - </span> - </div> + <slot name="value-collapsed" :current-attribute="currentAttribute"> + <div + v-if="isClassicSidebar" + v-gl-tooltip.left.viewport + :title="attributeTypeTitle" + class="sidebar-collapsed-icon" + > + <gl-icon :aria-label="attributeTypeTitle" :name="attributeTypeIcon" /> + <span class="collapse-truncated-title"> + {{ attributeTitle }} + </span> + </div> + </slot> <div - :data-testid="`select-${issuableAttribute}`" + :data-testid="`select-${formatIssuableAttribute.kebab}`" :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'" > <span v-if="updating" class="gl-font-weight-bold">{{ selectedTitle }}</span> @@ -332,7 +346,7 @@ export default { v-gl-tooltip="tooltipText" class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl" - :data-qa-selector="`${issuableAttribute}_link`" + :data-qa-selector="`${formatIssuableAttribute.snake}_link`" > {{ attributeTitle }} <span v-if="isAttributeOverdue(currentAttribute)">{{ $options.i18n.expired }}</span> @@ -354,7 +368,7 @@ export default { > <gl-search-box-by-type ref="search" v-model="searchTerm" /> <gl-dropdown-item - :data-testid="`no-${issuableAttribute}-item`" + :data-testid="`no-${formatIssuableAttribute.kebab}-item`" :is-check-item="true" :is-checked="isAttributeChecked($options.noAttributeId)" @click="updateAttribute($options.noAttributeId)" @@ -384,7 +398,7 @@ export default { :key="attrItem.id" :is-check-item="true" :is-checked="isAttributeChecked(attrItem.id)" - :data-testid="`${issuableAttribute}-items`" + :data-testid="`${formatIssuableAttribute.kebab}-items`" @click="updateAttribute(attrItem.id)" > {{ attrItem.title }} diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue index 701833c4e95..7a10a9f3a4c 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue @@ -61,6 +61,9 @@ export default { return data.workspace?.issuable?.subscribed || false; }, result({ data }) { + if (!data) { + return; + } this.emailsDisabled = this.parentIsGroup ? data.workspace?.emailsDisabled : data.workspace?.issuable?.emailsDisabled; diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue index 7c157fe2775..bb90ef8e444 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue @@ -38,7 +38,10 @@ export default { </script> <template> - <div data-testid="helpPane" class="time-tracking-help-state"> + <div + data-testid="helpPane" + class="sidebar-help-state gl-bg-white gl-border-gray-100 gl-border-t-solid gl-border-b-solid gl-border-1" + > <div class="time-tracking-info"> <h4>{{ __('Track time with quick actions') }}</h4> <p>{{ __('Quick actions can be used in description and comment boxes.') }}</p> diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue index 91c67a03dfb..d222a2af382 100644 --- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue +++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlLink, GlModal, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; +import { GlIcon, GlLink, GlModal, GlButton, GlModalDirective, GlLoadingIcon } from '@gitlab/ui'; import { IssuableType } from '~/issues/constants'; import { s__, __ } from '~/locale'; import { timeTrackingQueries } from '~/sidebar/constants'; @@ -21,6 +21,7 @@ export default { GlIcon, GlLink, GlModal, + GlButton, GlLoadingIcon, TimeTrackingCollapsedState, TimeTrackingSpentOnlyPane, @@ -187,7 +188,11 @@ export default { </script> <template> - <div v-cloak class="time-tracker time-tracking-component-wrap" data-testid="time-tracker"> + <div + v-cloak + class="time-tracker time-tracking-component-wrap sidebar-help-wrap" + data-testid="time-tracker" + > <time-tracking-collapsed-state v-if="showCollapsed" :show-comparison-state="showComparisonState" @@ -198,25 +203,21 @@ export default { :time-spent-human-readable="humanTotalTimeSpent" :time-estimate-human-readable="humanTimeEstimate" /> - <div class="hide-collapsed gl-line-height-20 gl-text-gray-900"> + <div + class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center" + > {{ __('Time tracking') }} <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" inline /> - <div - v-if="!showHelpState" - data-testid="helpButton" - class="help-button float-right" - @click="toggleHelpState(true)" + <gl-button + :data-testid="showHelpState ? 'closeHelpButton' : 'helpButton'" + category="tertiary" + size="small" + variant="link" + class="gl-ml-auto" + @click="toggleHelpState(!showHelpState)" > - <gl-icon name="question-o" /> - </div> - <div - v-else - data-testid="closeHelpButton" - class="close-help-button float-right" - @click="toggleHelpState(false)" - > - <gl-icon name="close" /> - </div> + <gl-icon :name="showHelpState ? 'close' : 'question-o'" class="gl-text-gray-900!" /> + </gl-button> </div> <div v-if="!isTimeTrackingInfoLoading" class="hide-collapsed"> <div v-if="showEstimateOnlyState" data-testid="estimateOnlyPane"> diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue index a9c4203af22..eabba619af5 100644 --- a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue +++ b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue @@ -59,6 +59,10 @@ export default { return data.workspace?.issuable?.currentUserTodos.nodes[0]?.id; }, result({ data }) { + if (!data) { + return; + } + const currentUserTodos = data.workspace?.issuable?.currentUserTodos?.nodes ?? []; this.todoId = currentUserTodos[0]?.id; this.$emit('todoUpdated', currentUserTodos.length > 0); @@ -177,19 +181,14 @@ export default { /> <gl-button v-if="isClassicSidebar" + v-gl-tooltip.left.viewport + :title="tootltipTitle" category="tertiary" type="reset" class="sidebar-collapsed-icon sidebar-collapsed-container gl-rounded-0! gl-shadow-none!" @click.stop.prevent="toggleTodo" > - <gl-icon - v-gl-tooltip.left.viewport - :title="tootltipTitle" - :size="16" - :class="{ 'todo-undone': hasTodo }" - :name="collapsedButtonIcon" - :aria-label="collapsedButtonIcon" - /> + <gl-icon :class="{ 'todo-undone': hasTodo }" :name="collapsedButtonIcon" /> </gl-button> </div> </template> diff --git a/app/assets/javascripts/sidebar/fragmentTypes.json b/app/assets/javascripts/sidebar/fragmentTypes.json deleted file mode 100644 index a1c68bba454..00000000000 --- a/app/assets/javascripts/sidebar/fragmentTypes.json +++ /dev/null @@ -1 +0,0 @@ -{"__schema":{"types":[{"kind":"UNION","name":"Issuable","possibleTypes":[{"name":"Issue"},{"name":"MergeRequest"}]}, {"kind":"INTERFACE","name":"User","possibleTypes":[{"name":"UserCore"}]}]}} diff --git a/app/assets/javascripts/sidebar/graphql.js b/app/assets/javascripts/sidebar/graphql.js index 5b2ce3fe446..fc757922f09 100644 --- a/app/assets/javascripts/sidebar/graphql.js +++ b/app/assets/javascripts/sidebar/graphql.js @@ -1,15 +1,11 @@ -import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'; import produce from 'immer'; import VueApollo from 'vue-apollo'; import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql'; +import { resolvers as workItemResolvers } from '~/work_items/graphql/resolvers'; import createDefaultClient from '~/lib/graphql'; -import introspectionQueryResultData from './fragmentTypes.json'; - -const fragmentMatcher = new IntrospectionFragmentMatcher({ - introspectionQueryResultData, -}); const resolvers = { + ...workItemResolvers, Mutation: { updateIssueState: (_, { issueType = undefined, isDirty = false }, { cache }) => { const sourceData = cache.readQuery({ query: getIssueStateQuery }); @@ -18,14 +14,11 @@ const resolvers = { }); cache.writeQuery({ query: getIssueStateQuery, data }); }, + ...workItemResolvers.Mutation, }, }; -export const defaultClient = createDefaultClient(resolvers, { - cacheConfig: { - fragmentMatcher, - }, -}); +export const defaultClient = createDefaultClient(resolvers); export const apolloProvider = new VueApollo({ defaultClient, diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js index 1947c4801db..2aacce2fb00 100644 --- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js @@ -21,6 +21,7 @@ export default class SidebarMilestone { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarMilestoneRoot', components: { timeTracker, }, diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js index 6363422259e..c29784aa328 100644 --- a/app/assets/javascripts/sidebar/mount_sidebar.js +++ b/app/assets/javascripts/sidebar/mount_sidebar.js @@ -57,6 +57,7 @@ function mountSidebarToDoWidget() { return new Vue({ el, + name: 'SidebarTodoRoot', apolloProvider, components: { SidebarTodoWidget, @@ -103,6 +104,7 @@ function mountAssigneesComponentDeprecated(mediator) { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarAssigneesRoot', apolloProvider, components: { SidebarAssignees, @@ -135,6 +137,7 @@ function mountAssigneesComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarAssigneesRoot', apolloProvider, components: { SidebarAssigneesWidget, @@ -185,6 +188,7 @@ function mountReviewersComponent(mediator) { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarReviewersRoot', apolloProvider, components: { SidebarReviewers, @@ -218,6 +222,7 @@ function mountCrmContactsComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarCrmContactsRoot', apolloProvider, components: { CrmContacts, @@ -242,6 +247,7 @@ function mountMilestoneSelect() { return new Vue({ el, + name: 'SidebarMilestoneRoot', apolloProvider, components: { SidebarDropdownWidget, @@ -274,6 +280,7 @@ export function mountSidebarLabels() { return new Vue({ el, + name: 'SidebarLabelsRoot', apolloProvider, components: { @@ -328,6 +335,7 @@ function mountConfidentialComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarConfidentialRoot', apolloProvider, components: { SidebarConfidentialityWidget, @@ -362,6 +370,7 @@ function mountDueDateComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarDueDateRoot', apolloProvider, components: { SidebarDueDateWidget, @@ -392,6 +401,7 @@ function mountReferenceComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarReferenceRoot', apolloProvider, components: { SidebarReferenceWidget, @@ -428,6 +438,7 @@ function mountLockComponent(store) { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarLockRoot', store, provide: { fullPath, @@ -451,6 +462,7 @@ function mountParticipantsComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarParticipantsRoot', apolloProvider, components: { SidebarParticipantsWidget, @@ -479,6 +491,7 @@ function mountSubscriptionsComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarSubscriptionsRoot', apolloProvider, components: { SidebarSubscriptionsWidget, @@ -509,6 +522,7 @@ function mountTimeTrackingComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarTimeTrackingRoot', apolloProvider, provide: { issuableType }, render: (createElement) => @@ -534,6 +548,7 @@ function mountSeverityComponent() { return new Vue({ el: severityContainerEl, + name: 'SidebarSeverityRoot', apolloProvider, components: { SidebarSeverity, @@ -562,6 +577,7 @@ function mountCopyEmailComponent() { // eslint-disable-next-line no-new new Vue({ el, + name: 'SidebarCopyEmailRoot', render: (createElement) => createElement(CopyEmailToClipboard, { props: { issueEmailAddress: createNoteEmail } }), }); diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js index 25468d4a697..4664bb56958 100644 --- a/app/assets/javascripts/sidebar/sidebar_mediator.js +++ b/app/assets/javascripts/sidebar/sidebar_mediator.js @@ -1,4 +1,4 @@ -import Store from 'ee_else_ce/sidebar/stores/sidebar_store'; +import Store from '~/sidebar/stores/sidebar_store'; import createFlash from '~/flash'; import { __, sprintf } from '~/locale'; import toast from '~/vue_shared/plugins/global_toast'; |