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,6 +27,7 @@ export default {
   i18n: {
     editDescription: s__('DesignManagement|Edit description'),
     descriptionLabel: s__('DesignManagement|Description'),
+    addDescriptionLabel: s__('DesignManagement|Add a description'),
   },
   formFieldProps: {
     id: 'design-description',
@@ -49,16 +50,11 @@ export default {
       type: Object,
       required: true,
     },
-    initiallyOpen: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
       descriptionText: this.design.description || '',
-      showEditor: this.initiallyOpen,
+      showEditor: false,
       isSubmitting: false,
       errorMessage: '',
       autosaveKey: `Issue/${getIdFromGraphQLId(this.design.issue.id)}/Design/${getIdFromGraphQLId(
@@ -70,6 +66,9 @@ export default {
     canUpdate() {
       return this.design.issue?.userPermissions?.updateDesign && !this.showEditor;
     },
+    showAddDescriptionButton() {
+      return this.design.issue?.userPermissions?.updateDesign && !this.design.descriptionHtml;
+    },
   },
   watch: {
     'design.descriptionHtml': {
@@ -86,7 +85,6 @@ export default {
       this.showEditor = true;
     },
     closeForm() {
-      this.$emit('editorClosed');
       // If description text is empty on cancel,
       // restore the old description
       if (!this.descriptionText) {
@@ -200,7 +198,7 @@ export default {
           :loading="isSubmitting"
           data-testid="save-description"
           @click="updateDesignDescription"
-          >{{ s__('DesignManagement|Save') }}
+          >{{ s__('DesignManagement|Save changes') }}
         </gl-button>
         <gl-button category="tertiary" class="gl-ml-3" data-testid="cancel" @click="closeForm"
           >{{ s__('DesignManagement|Cancel') }}
@@ -208,34 +206,49 @@ export default {
       </div>
     </gl-form-group>
     <div v-else class="design-description-view">
-      <div
-        class="design-description-header gl-display-flex gl-justify-content-space-between gl-mb-2"
+      <gl-button
+        v-if="showAddDescriptionButton"
+        class="gl-ml-auto"
+        size="small"
+        data-testid="add-design-description"
+        :aria-label="$options.i18n.addDescriptionLabel"
+        @click="startEditing"
       >
-        <h3 class="gl-line-height-20! gl-font-lg gl-m-0">
-          {{ $options.i18n.descriptionLabel }}
-        </h3>
-        <gl-button
-          v-if="canUpdate"
-          v-gl-tooltip
-          class="gl-ml-auto"
-          size="small"
-          category="tertiary"
-          :aria-label="$options.i18n.editDescription"
-          :title="$options.i18n.editDescription"
-          data-testid="edit-description"
-          icon="pencil"
-          @click="startEditing"
-        />
-      </div>
-      <div v-if="design.descriptionHtml" class="design-description js-task-list-container">
+        {{ $options.i18n.addDescriptionLabel }}
+      </gl-button>
+      <template v-else>
         <div
-          ref="gfm-content"
-          v-safe-html="design.descriptionHtml"
-          class="md gl-mb-4"
-          data-testid="design-description-content"
-          @change="toggleCheckboxes"
-        ></div>
-      </div>
+          class="design-description-header gl-display-flex gl-justify-content-space-between gl-mb-2"
+        >
+          <h3 class="gl-line-height-20! gl-font-lg gl-m-0">
+            {{ $options.i18n.descriptionLabel }}
+          </h3>
+          <gl-button
+            v-if="canUpdate"
+            v-gl-tooltip
+            class="gl-ml-auto"
+            size="small"
+            category="tertiary"
+            :aria-label="$options.i18n.editDescription"
+            :title="$options.i18n.editDescription"
+            data-testid="edit-description"
+            icon="pencil"
+            @click="startEditing"
+          />
+        </div>
+        <div v-if="design.descriptionHtml" class="design-description js-task-list-container">
+          <div
+            ref="gfm-content"
+            v-safe-html="design.descriptionHtml"
+            class="md gl-mb-4"
+            data-testid="design-description-content"
+            @change="toggleCheckboxes"
+          ></div>
+        </div>
+        <div v-else data-testid="design-description-none" class="gl-text-secondary gl-mb-5">
+          {{ s__('DesignManagement|None') }}
+        </div>
+      </template>
     </div>
   </div>
 </template>