Merge branch '223196-update-design-management-documentation' into 'master'

Resolve "Update Design Management documentation"

Closes #223196

See merge request gitlab-org/gitlab!36681

app/assets/javascripts/design_management_new/components/upload/design_dropzone.vue

@@ -91,20 +91,15 @@ export default {
           data-testid="dropzone-area"
         >
           <gl-icon name="upload" :size="24" :class="hasDesigns ? 'gl-mb-2' : 'gl-mr-4'" />
-          <gl-sprintf
-            :message="
-              __(
-                '%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}',
-              )
-            "
-          >
-            <template #content="{ content }">
-              <span class="gl-font-weight-bold">{{ content }}&nbsp;</span>
-            </template>
-            <template #link="{ content }">
-              <gl-link @click.stop="openFileUpload">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
+          <p class="gl-font-weight-bold gl-mb-0">
+            <gl-sprintf :message="__('Drop or %{linkStart}upload%{linkEnd} Designs to attach')">
+              <template #link="{ content }">
+                <gl-link class="gl-font-weight-normal" @click.stop="openFileUpload">
+                  {{ content }}
+                </gl-link>
+              </template>
+            </gl-sprintf>
+          </p>
         </div>
       </button>
 

app/assets/javascripts/design_management_new/pages/index.vue

@@ -267,7 +267,7 @@ export default {
 </script>
 
 <template>
-  <div data-testid="designs-root" class="gl-mt-2">
+  <div data-testid="designs-root" class="gl-mt-5">
     <header v-if="showToolbar" class="row-content-block border-top-0 p-2 d-flex">
       <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full">
         <div>

app/assets/javascripts/design_management_new/router/routes.js

@@ -7,6 +7,7 @@ export default [
     name: DESIGNS_ROUTE_NAME,
     path: '/',
     component: Home,
+    alias: '/designs',
   },
   {
     name: DESIGN_ROUTE_NAME,
@@ -16,7 +17,7 @@ export default [
       {
         params: { id },
       },
-      from,
+      _,
       next,
     ) {
       if (typeof id === 'string') {

app/views/projects/issues/_design_management.html.haml

 - if @project.design_management_enabled?
-  - if Feature.enabled?(:design_management_moved, @project)
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
     .js-design-management-new{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
   - else
     .js-design-management{ data: { project_path: @project.full_path, issue_iid: @issue.iid, issue_path: project_issue_path(@project, @issue) } }
 - else
-  - if Feature.enabled?(:design_management_moved, @project)
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
     .row.empty-state.design-dropzone-border.gl-mt-5
       .text-content.center.gl-font-weight-bold
         - requirements_link_url = help_page_path('user/project/issues/design_management', anchor: 'requirements')

app/views/projects/issues/show.html.haml

@@ -74,7 +74,7 @@
     - if @issue.sentry_issue.present?
       #js-sentry-error-stack-trace{ data: error_details_data(@project, @issue.sentry_issue.sentry_issue_identifier) }
 
-    - if Feature.enabled?(:design_management_moved, @project)
+    - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
       = render 'projects/issues/design_management'
 
     = render_if_exists 'projects/issues/related_issues'
@@ -94,7 +94,7 @@
         #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@issue), notes_filters: UserPreference.notes_filters.to_json } }
         = render 'new_branch' if show_new_branch_button?
 
-  - if Feature.enabled?(:design_management_moved, @project)
+  - if Feature.enabled?(:design_management_moved, @project, default_enabled: true)
     = render 'projects/issues/discussion'
   - else
     = render 'projects/issues/tabs'

changelogs/unreleased/223196-update-design-management-documentation.yml

+---
+title: Make the Design Collection more visible in the Issue UI
+merge_request: 36681
+author:
+type: changed

doc/user/project/issues/design_management.md

@@ -60,20 +60,25 @@ and [PDFs](https://gitlab.com/gitlab-org/gitlab/-/issues/32811) is planned for a
 - Only the latest version of the designs can be deleted.
 - Deleted designs cannot be recovered but you can see them on previous designs versions.
 
-## The Design Management page
+## The Design Management section
 
-Navigate to the **Design Management** page from any issue by clicking the **Designs** tab:
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/223193) in GitLab 13.2, Designs are displayed directly on the issue description rather than on a separate tab.
 
-![Designs tab](img/design_management_v12_3.png)
+You can find to the **Design Management** section in the issue description:
+
+![Designs section](img/design_management_v13_2.png)
 
 ## Adding designs
 
-To upload design images, click the **Upload Designs** button and select images to upload.
+To upload Design images, drag files from your computer and drop them in the Design Management section,
+or click **upload** to select images from your file browser:
+
+![Designs empty state](img/design_management_upload_v13.2.png)
 
 [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/34353) in [GitLab Premium](https://about.gitlab.com/pricing/) 12.9,
 you can drag and drop designs onto the dedicated drop zone to upload them.
 
-![Drag and drop design uploads](img/design_drag_and_drop_uploads_v12_9.png)
+![Drag and drop design uploads](img/design_drag_and_drop_uploads_v13_2.png)
 
 [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/202634)
 in GitLab 12.10, you can also copy images from your file system and

locale/gitlab.pot

@@ -304,9 +304,6 @@ msgstr ""
 msgid "%{containerScanningLinkStart}Container Scanning%{containerScanningLinkEnd} and/or %{dependencyScanningLinkStart}Dependency Scanning%{dependencyScanningLinkEnd} must be enabled. %{securityBotLinkStart}GitLab-Security-Bot%{securityBotLinkEnd} will be the author of the auto-created merge request. %{moreInfoLinkStart}More information%{moreInfoLinkEnd}."
 msgstr ""
 
-msgid "%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-msgstr ""
-
 msgid "%{cores} cores"
 msgstr ""
 
@@ -8409,6 +8406,9 @@ msgstr ""
 msgid "Downvotes"
 msgstr ""
 
+msgid "Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+msgstr ""
+
 msgid "Drop your designs to start your upload."
 msgstr ""
 

spec/frontend/design_management_new/components/upload/__snapshots__/design_dropzone_spec.js.snap

@@ -17,9 +17,13 @@ exports[`Design management dropzone component when dragging renders correct temp
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    
@@ -89,9 +93,13 @@ exports[`Design management dropzone component when dragging renders correct temp
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    
@@ -161,9 +169,13 @@ exports[`Design management dropzone component when dragging renders correct temp
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    
@@ -232,9 +244,13 @@ exports[`Design management dropzone component when dragging renders correct temp
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    
@@ -303,9 +319,13 @@ exports[`Design management dropzone component when dragging renders correct temp
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    
@@ -374,9 +394,13 @@ exports[`Design management dropzone component when no slot provided renders defa
         size="24"
       />
        
-      <gl-sprintf-stub
-        message="%{contentStart}Drop files to attach, or %{contentEnd}%{linkStart}browse%{linkEnd}"
-      />
+      <p
+        class="gl-font-weight-bold gl-mb-0"
+      >
+        <gl-sprintf-stub
+          message="Drop or %{linkStart}upload%{linkEnd} Designs to attach"
+        />
+      </p>
     </div>
   </button>
    

spec/frontend/design_management_new/pages/__snapshots__/index_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Design management index page designs does not render toolbar when there is no permission 1`] = `
 <div
-  class="gl-mt-2"
+  class="gl-mt-5"
   data-testid="designs-root"
 >
   <!---->
@@ -87,7 +87,7 @@ exports[`Design management index page designs does not render toolbar when there
 
 exports[`Design management index page designs renders designs list and header with upload button 1`] = `
 <div
-  class="gl-mt-2"
+  class="gl-mt-5"
   data-testid="designs-root"
 >
   <header
@@ -227,7 +227,7 @@ exports[`Design management index page designs renders designs list and header wi
 
 exports[`Design management index page designs renders error 1`] = `
 <div
-  class="gl-mt-2"
+  class="gl-mt-5"
   data-testid="designs-root"
 >
   <!---->
@@ -258,7 +258,7 @@ exports[`Design management index page designs renders error 1`] = `
 
 exports[`Design management index page designs renders loading icon 1`] = `
 <div
-  class="gl-mt-2"
+  class="gl-mt-5"
   data-testid="designs-root"
 >
   <!---->
@@ -281,7 +281,7 @@ exports[`Design management index page designs renders loading icon 1`] = `
 
 exports[`Design management index page when has no designs renders design dropzone 1`] = `
 <div
-  class="gl-mt-2"
+  class="gl-mt-5"
   data-testid="designs-root"
 >
   <!---->