Skip to content
Snippets Groups Projects
Verified Commit c0414cd0 authored by Rajan Mistry's avatar Rajan Mistry :baby:
Browse files

Code changes from the review

parent 29cc481e
No related branches found
No related tags found
1 merge request!148359Update description field component
This commit is part of merge request !148359. Comments created here will be created in the context of that merge request.
<script> <script>
import { GlButton, GlFormGroup, GlAlert, GlTooltipDirective } from '@gitlab/ui'; import { GlButton, GlFormGroup, GlAlert, GlTooltipDirective } from '@gitlab/ui';
import SafeHtml from '~/vue_shared/directives/safe_html'; import SafeHtml from '~/vue_shared/directives/safe_html';
import { __, s__ } from '~/locale'; import { s__ } from '~/locale';
import { helpPagePath } from '~/helpers/help_page_helper'; import { helpPagePath } from '~/helpers/help_page_helper';
import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue'; import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
import { renderGFM } from '~/behaviors/markdown/render_gfm'; import { renderGFM } from '~/behaviors/markdown/render_gfm';
...@@ -25,7 +25,6 @@ export default { ...@@ -25,7 +25,6 @@ export default {
GlTooltip: GlTooltipDirective, GlTooltip: GlTooltipDirective,
}, },
i18n: { i18n: {
edit: __('Edit'),
editDescription: s__('DesignManagement|Edit description'), editDescription: s__('DesignManagement|Edit description'),
descriptionLabel: s__('DesignManagement|Description'), descriptionLabel: s__('DesignManagement|Description'),
}, },
...@@ -37,7 +36,6 @@ export default { ...@@ -37,7 +36,6 @@ export default {
}, },
markdownDocsPath: helpPagePath('user/markdown'), markdownDocsPath: helpPagePath('user/markdown'),
quickActionsDocsPath: helpPagePath('user/project/quick_actions'), quickActionsDocsPath: helpPagePath('user/project/quick_actions'),
descriptionLabelClass: 'gl-line-height-20! gl-font-lg!',
props: { props: {
design: { design: {
type: Object, type: Object,
...@@ -51,7 +49,7 @@ export default { ...@@ -51,7 +49,7 @@ export default {
type: Object, type: Object,
required: true, required: true,
}, },
openDescriptionForm: { initiallyOpen: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
...@@ -60,7 +58,7 @@ export default { ...@@ -60,7 +58,7 @@ export default {
data() { data() {
return { return {
descriptionText: this.design.description || '', descriptionText: this.design.description || '',
showEditor: this.openDescriptionForm, showEditor: this.initiallyOpen,
isSubmitting: false, isSubmitting: false,
errorMessage: '', errorMessage: '',
autosaveKey: `Issue/${getIdFromGraphQLId(this.design.issue.id)}/Design/${getIdFromGraphQLId( autosaveKey: `Issue/${getIdFromGraphQLId(this.design.issue.id)}/Design/${getIdFromGraphQLId(
...@@ -172,7 +170,7 @@ export default { ...@@ -172,7 +170,7 @@ export default {
v-if="showEditor" v-if="showEditor"
class="design-description-form common-note-form" class="design-description-form common-note-form"
:label="$options.i18n.descriptionLabel" :label="$options.i18n.descriptionLabel"
:label-class="$options.descriptionLabelClass" :label-class="'gl-line-height-20! gl-font-lg!'"
> >
<div v-if="errorMessage" class="gl-pb-3"> <div v-if="errorMessage" class="gl-pb-3">
<gl-alert variant="danger" @dismiss="errorMessage = null"> <gl-alert variant="danger" @dismiss="errorMessage = null">
......
<script> <script>
import { import { GlAccordion, GlAccordionItem, GlSkeletonLoader, GlEmptyState, GlButton } from '@gitlab/ui';
GlAccordion,
GlAccordionItem,
GlSkeletonLoader,
GlEmptyState,
GlButton,
GlTooltipDirective,
} from '@gitlab/ui';
import EMPTY_DISCUSSION_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg'; import EMPTY_DISCUSSION_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-activity-md.svg';
import { isLoggedIn } from '~/lib/utils/common_utils'; import { isLoggedIn } from '~/lib/utils/common_utils';
...@@ -32,9 +25,6 @@ export default { ...@@ -32,9 +25,6 @@ export default {
DescriptionForm, DescriptionForm,
DesignDisclosure, DesignDisclosure,
}, },
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
inject: { inject: {
projectPath: { projectPath: {
...@@ -81,7 +71,7 @@ export default { ...@@ -81,7 +71,7 @@ export default {
discussionWithOpenForm: '', discussionWithOpenForm: '',
isLoggedIn: isLoggedIn(), isLoggedIn: isLoggedIn(),
emptyDiscussionSvgPath: EMPTY_DISCUSSION_URL, emptyDiscussionSvgPath: EMPTY_DISCUSSION_URL,
startEditing: false, isEditing: false,
}; };
}, },
computed: { computed: {
...@@ -123,7 +113,7 @@ export default { ...@@ -123,7 +113,7 @@ export default {
showAddDescriptionButton() { showAddDescriptionButton() {
return ( return (
this.design.issue?.userPermissions?.updateDesign && this.design.issue?.userPermissions?.updateDesign &&
!this.startEditing && !this.isEditing &&
!this.design.descriptionHtml !this.design.descriptionHtml
); );
}, },
...@@ -168,12 +158,11 @@ export default { ...@@ -168,12 +158,11 @@ export default {
<div class="gl-border-b"> <div class="gl-border-b">
<gl-button <gl-button
v-if="showAddDescriptionButton" v-if="showAddDescriptionButton"
v-gl-tooltip
class="gl-ml-auto gl-my-5" class="gl-ml-auto gl-my-5"
size="small" size="small"
data-testid="add-design-description" data-testid="add-design-description"
:aria-label="$options.i18n.addDescription" :aria-label="$options.i18n.addDescription"
@click="startEditing = !startEditing" @click="isEditing = !isEditing"
> >
{{ $options.i18n.addDescription }} {{ $options.i18n.addDescription }}
</gl-button> </gl-button>
...@@ -183,9 +172,9 @@ export default { ...@@ -183,9 +172,9 @@ export default {
:design="design" :design="design"
:design-variables="designVariables" :design-variables="designVariables"
:markdown-preview-path="markdownPreviewPath" :markdown-preview-path="markdownPreviewPath"
:open-description-form="startEditing" :initially-open="isEditing"
class="gl-my-5" class="gl-my-5"
@editorClosed="startEditing = false" @editorClosed="isEditing = false"
/> />
</template> </template>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment