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',
@@ -50,11 +50,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 +87,7 @@ export default {
       this.showEditor = true;
     },
     closeForm() {
+      this.$emit('editorClosed');
       this.showEditor = false;
     },
     async renderGFM() {
@@ -208,12 +214,13 @@ export default {
           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"