Update description field component

What does this MR do and why?

As part of the FE: Create design management work items widget (&12490 - closed), this MR will

• When empty, just show an "Add a description" button (no heading)
• When filled, show the heading with an Edit (icon only) button in line
• Include a line break (horizontal rule) between the description area and the threads/discussion area

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screen Recording 2024-04-02 at 5.41.11 PM.mov

How to set up and validate locally

Steps to verify:

1. Login with any user
2. Go to any Group > Projects > Issues
3. Create a new Issue
4. Go to Issue detail page and upload a design/image
5. Click on the design to preview
6. Interact with description feature by
   1. adding new description
   2. edit the description
   3. remove the description to check if the Add a description is retained

Related to #438907 (closed)

app/assets/javascripts/design_management/components/design_description/description_form.vue

@@ -27,7 +27,7 @@ export default {
   i18n: {
     edit: __('Edit'),
     editDescription: s__('DesignManagement|Edit description'),
-    descriptionLabel: s__('DesignManagement|Design description'),
+    descriptionLabel: s__('DesignManagement|Description'),
   },
   formFieldProps: {
     id: 'design-description',
@@ -37,6 +37,7 @@ export default {
   },
   markdownDocsPath: helpPagePath('user/markdown'),
   quickActionsDocsPath: helpPagePath('user/project/quick_actions'),
+  descriptionLabelClass: 'gl-line-height-20! gl-font-lg!',
   props: {
     design: {
       type: Object,
@@ -50,11 +51,16 @@ export default {
       type: Object,
       required: true,
     },
+    openDescriptionForm: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       descriptionText: this.design.description || '',
-      showEditor: false,
+      showEditor: this.openDescriptionForm,
       isSubmitting: false,
       errorMessage: '',
       autosaveKey: `Issue/${getIdFromGraphQLId(this.design.issue.id)}/Design/${getIdFromGraphQLId(
@@ -82,6 +88,12 @@ export default {
       this.showEditor = true;
     },
     closeForm() {
+      this.$emit('editorClosed');
+      // If description text is empty on cancel,
+      // restore the old description
+      if (!this.descriptionText) {
+        this.descriptionText = this.design.description;
+      }
       this.showEditor = false;
     },
     async renderGFM() {
@@ -160,6 +172,7 @@ export default {
       v-if="showEditor"
       class="design-description-form common-note-form"
       :label="$options.i18n.descriptionLabel"
+      :label-class="$options.descriptionLabelClass"
     >
       <div v-if="errorMessage" class="gl-pb-3">
         <gl-alert variant="danger" @dismiss="errorMessage = null">
@@ -200,29 +213,23 @@ export default {
       <div
         class="design-description-header gl-display-flex gl-justify-content-space-between gl-mb-2"
       >
-        <label class="gl-m-0">
+        <h3 class="gl-line-height-20! gl-font-lg gl-m-0">
           {{ $options.i18n.descriptionLabel }}
-        </label>
+        </h3>
         <gl-button
           v-if="canUpdate"
           v-gl-tooltip
           class="gl-ml-auto"
           size="small"
-          data-testid="edit-description"
+          category="tertiary"
           :aria-label="$options.i18n.editDescription"
+          :title="$options.i18n.editDescription"
+          data-testid="edit-description"
+          icon="pencil"
           @click="startEditing"
-        >
-          {{ $options.i18n.edit }}
-        </gl-button>
-      </div>
-      <div
-        v-if="!design.descriptionHtml"
-        data-testid="design-description-none"
-        class="gl-text-secondary gl-mb-5"
-      >
-        {{ s__('DesignManagement|None') }}
+        />
       </div>
-      <div v-else class="design-description js-task-list-container">
+      <div v-if="design.descriptionHtml" class="design-description js-task-list-container">
         <div
           ref="gfm-content"
           v-safe-html="design.descriptionHtml"