Merge branch '351747-fix-disable-add-button-corpus-management' into 'master'

Fix add corpus modal logic and table column spacing

See merge request gitlab-org/gitlab!79724

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

@@ -41,9 +41,9 @@ export default {
       {{ name }}
       <span class="gl-text-gray-500" data-testid="file-size">({{ fileSize }})</span>
     </div>
-    <div data-testid="latest-job">
+    <div data-testid="latest-job" class="gl-text-truncate">
       {{ this.$options.i18n.latestJob }}
-      <gl-link v-if="jobUrl" class="gl-display-inline-block" :href="jobUrl" target="_blank">
+      <gl-link v-if="jobUrl" :href="jobUrl" target="_blank">
         {{ latestJob }}
       </gl-link>
       <template v-else>-</template>

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

@@ -6,6 +6,7 @@ import Target from 'ee/security_configuration/corpus_management/components/colum
 import { s__ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
 import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
+import { thWidthClass } from '~/lib/utils/table_utility';
 
 const thClass = 'gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!';
 
@@ -28,27 +29,29 @@ export default {
     {
       key: 'name',
       label: s__('CorpusManagement|Corpus name'),
-      thClass,
+      thClass: `${thClass} ${thWidthClass(40)}`,
+      tdClass: 'gl-text-truncate gl-max-w-15',
     },
     {
       key: 'target',
       label: s__('CorpusManagement|Target'),
-      thClass,
+      thClass: `${thClass} ${thWidthClass(20)}`,
+      tdClass: 'gl-word-break-word',
     },
     {
       key: 'lastUpdated',
       label: s__('CorpusManagement|Last updated'),
-      thClass,
+      thClass: `${thClass} ${thWidthClass(15)}`,
     },
     {
       key: 'lastUsed',
       label: s__('CorpusManagement|Last used'),
-      thClass,
+      thClass: `${thClass} ${thWidthClass(15)}`,
     },
     {
       key: 'actions',
       label: s__('CorpusManagement|Actions'),
-      thClass,
+      thClass: `${thClass} ${thWidthClass(10)}`,
     },
   ],
   i18n: {

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

@@ -57,7 +57,7 @@ export default {
       return decimalBytes(this.totalSize);
     },
     isUploaded() {
-      return this.states?.uploadState.progress === 100;
+      return Boolean(this.states?.uploadState.uploadedPackageId);
     },
     variant() {
       return this.isUploaded ? 'confirm' : 'default';

ee/app/assets/javascripts/security_configuration/corpus_management/graphql/resolvers/resolvers.js

@@ -160,6 +160,7 @@ export default {
         uploadState.isUploading = false;
         uploadState.progress = 0;
         uploadState.cancelToken = null;
+        uploadState.uploadedPackageId = null;
         uploadState.errors.name = '';
         uploadState.errors.file = '';
       });

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

@@ -7,7 +7,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
 >
   <th
     aria-colindex="1"
-    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!"
+    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1! gl-w-40p gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!"
     role="columnheader"
     scope="col"
   >
@@ -17,7 +17,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="2"
-    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!"
+    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1! gl-w-20p gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!"
     role="columnheader"
     scope="col"
   >
@@ -27,7 +27,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="3"
-    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!"
+    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1! gl-w-15p gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!"
     role="columnheader"
     scope="col"
   >
@@ -37,7 +37,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="4"
-    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!"
+    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1! gl-w-15p gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!"
     role="columnheader"
     scope="col"
   >
@@ -47,7 +47,7 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
   </th>
   <th
     aria-colindex="5"
-    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!"
+    class="gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1! gl-w-10p gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!"
     role="columnheader"
     scope="col"
   >

ee/spec/frontend/security_configuration/corpus_management/components/corpus_upload_spec.js

@@ -94,5 +94,73 @@ describe('Corpus Upload', () => {
         expect(findNewCorpusButton().exists()).toBe(false);
       });
     });
+
+    describe('add button', () => {
+      it('is disabled when corpus has not been uploaded', () => {
+        createComponent({
+          mocks: {
+            states: {
+              uploadState: {
+                progress: 0,
+                uploadedPackageId: null,
+              },
+            },
+          },
+        });
+
+        expect(findModal().props('actionPrimary')).toEqual({
+          attributes: {
+            'data-testid': 'modal-confirm',
+            disabled: true,
+            variant: 'default',
+          },
+          text: 'Add',
+        });
+      });
+
+      it('is disabled when corpus has 100 percent completion, but is still waiting on the server response', () => {
+        createComponent({
+          mocks: {
+            states: {
+              uploadState: {
+                progress: 100,
+                uploadedPackageId: null,
+              },
+            },
+          },
+        });
+
+        expect(findModal().props('actionPrimary')).toEqual({
+          attributes: {
+            'data-testid': 'modal-confirm',
+            disabled: true,
+            variant: 'default',
+          },
+          text: 'Add',
+        });
+      });
+
+      it('is enabled when corpus has been uploaded', () => {
+        createComponent({
+          mocks: {
+            states: {
+              uploadState: {
+                progress: 100,
+                uploadedPackageId: 1,
+              },
+            },
+          },
+        });
+
+        expect(findModal().props('actionPrimary')).toEqual({
+          attributes: {
+            'data-testid': 'modal-confirm',
+            disabled: false,
+            variant: 'confirm',
+          },
+          text: 'Add',
+        });
+      });
+    });
   });
 });