Various corpus management style tweaks

* Cancel modal button copy
* Download button color
* Modal text copy regarding file size
* Header font size and spacing
* Modal corpus name X button placement

ee/app/assets/javascripts/security_configuration/corpus_management/components/columns/actions.vue

@@ -21,7 +21,7 @@ export default {
   },
   modal: {
     actionPrimary: {
-      text: s__('Delete'),
+      text: s__('Delete corpus'),
       attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
     },
     actionCancel: {
@@ -41,13 +41,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-button
-      class="gl-mr-2"
-      icon="download"
-      category="secondary"
-      variant="confirm"
-      :href="downloadPath"
-    />
+    <gl-button class="gl-mr-2" icon="download" :href="downloadPath" />
     <gl-button
       v-gl-modal-directive="`confirmation-modal-${corpus.name}`"
       icon="remove"

ee/app/assets/javascripts/security_configuration/corpus_management/components/columns/name.vue

@@ -36,8 +36,8 @@ export default {
 <template>
   <div>
     <div class="gl-text-gray-900" data-testid="corpus-name">
-      {{ corpus.name }} <span data-testid="file-size">{{ fileSize }}</span
-      >)
+      {{ corpus.name }}
+      <span class="gl-text-gray-500" data-testid="file-size">({{ fileSize }})</span>
     </div>
     <div data-testid="latest-job">
       {{ this.$options.i18n.latestJob }}

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_management.vue

@@ -56,10 +56,10 @@ export default {
       <h4 class="gl-my-5">
         {{ this.$options.i18n.header }}
       </h4>
-      <h5 class="gl-font-base gl-font-weight-100">
+      <p>
         {{ this.$options.i18n.subHeader }}
         <gl-link :href="corpusHelpPath">{{ this.$options.i18n.learnMore }}</gl-link>
-      </h5>
+      </p>
     </header>
 
     <gl-loading-icon v-if="isLoading" size="lg" />

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_upload_form.vue

@@ -27,7 +27,7 @@ export default {
     corpusName: s__('CorpusManagement|Corpus name'),
     uploadButtonText: __('Choose File...'),
     uploadMessage: s__(
-      'CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10Gib',
+      'CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10GB',
     ),
   },
   apollo: {
@@ -142,6 +142,7 @@ export default {
         />
 
         <gl-button
+          class="gl-absolute gl-top-2 gl-right-2 gl-z-index-3"
           variant="default"
           category="tertiary"
           size="small"

ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_management_spec.js.snap

@@ -10,9 +10,7 @@ exports[`EE - CorpusManagement corpus management when loaded renders the correct
     
   </h4>
    
-  <h5
-    class="gl-font-base gl-font-weight-100"
-  >
+  <p>
     
       Corpus are used in fuzz testing as mutation source to Improve future testing.
       
@@ -21,6 +19,6 @@ exports[`EE - CorpusManagement corpus management when loaded renders the correct
     >
       Learn More
     </gl-link-stub>
-  </h5>
+  </p>
 </header>
 `;

ee/spec/frontend/security_configuration/corpus_management/components/columns/__snapshots__/name_spec.js.snap

@@ -6,14 +6,14 @@ exports[`Name component renders name with correct file size 1`] = `
   data-testid="corpus-name"
 >
   
-    Test corpus 1 
+    Test corpus 1
+    
   <span
+    class="gl-text-gray-500"
     data-testid="file-size"
   >
-    400MB
+    (400MB)
   </span>
-  )
-  
 </div>
 `;
 
@@ -23,14 +23,14 @@ exports[`Name component renders the latest job 1`] = `
   data-testid="corpus-name"
 >
   
-    Test corpus 1 
+    Test corpus 1
+    
   <span
+    class="gl-text-gray-500"
     data-testid="file-size"
   >
-    400MB
+    (400MB)
   </span>
-  )
-  
 </div>
 `;
 
@@ -40,13 +40,13 @@ exports[`Name component without job path renders a - string instead of a link 1`
   data-testid="corpus-name"
 >
   
-    Corpus-sample-2-1431-4425 
+    Corpus-sample-2-1431-4425
+    
   <span
+    class="gl-text-gray-500"
     data-testid="file-size"
   >
-    321MB
+    (321MB)
   </span>
-  )
-  
 </div>
 `;

ee/spec/frontend/security_configuration/corpus_management/components/columns/name_spec.js

@@ -28,14 +28,14 @@ describe('Name', () => {
   describe('component', () => {
     it('renders name with correct file size', () => {
       createComponent();
-      expect(findFileSize().text()).toBe('400MB');
+      expect(findFileSize().text()).toBe('(400MB)');
       expect(findName().element).toMatchSnapshot();
     });
 
     it('renders the latest job', () => {
       createComponent();
       expect(wrapper.findComponent(GlLink).exists()).toBe(true);
-      expect(findFileSize().text()).toBe('400MB');
+      expect(findFileSize().text()).toBe('(400MB)');
       expect(findName().element).toMatchSnapshot();
     });
 
@@ -43,7 +43,7 @@ describe('Name', () => {
       it('renders a - string instead of a link', () => {
         createComponent({ propsData: { corpus: corpuses[2] } });
         expect(wrapper.findComponent(GlLink).exists()).toBe(false);
-        expect(findFileSize().text()).toBe('321MB');
+        expect(findFileSize().text()).toBe('(321MB)');
         expect(findName().element).toMatchSnapshot();
       });
     });

locale/gitlab.pot

@@ -9157,7 +9157,7 @@ msgstr ""
 msgid "CorpusManagement|Latest Job:"
 msgstr ""
 
-msgid "CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10Gib"
+msgid "CorpusManagement|New corpus needs to be a upload in *.zip format. Maximum 10GB"
 msgstr ""
 
 msgid "CorpusManagement|New upload"
@@ -10660,6 +10660,9 @@ msgstr ""
 msgid "Delete comment"
 msgstr ""
 
+msgid "Delete corpus"
+msgstr ""
+
 msgid "Delete domain"
 msgstr ""