Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

4 files changed, 642 insertions, 29 deletions

diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
index 8af0753f929..0c3d3e78038 100644
--- a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
+++ b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_candidate_spec.js.snap
@@ -163,8 +163,8 @@ exports[`MlCandidate renders correctly 1`] = `
           class="gl-text-secondary gl-font-weight-bold"
         >
           
-          Parameters
-        
+            Parameters
+          
         </td>
          
         <td
@@ -190,7 +190,6 @@ exports[`MlCandidate renders correctly 1`] = `
           3
         </td>
       </tr>
-       
       <tr
         class="divider"
       />
@@ -200,8 +199,8 @@ exports[`MlCandidate renders correctly 1`] = `
           class="gl-text-secondary gl-font-weight-bold"
         >
           
-          Metrics
-        
+            Metrics
+          
         </td>
          
         <td
@@ -227,6 +226,42 @@ exports[`MlCandidate renders correctly 1`] = `
           .99
         </td>
       </tr>
+      <tr
+        class="divider"
+      />
+       
+      <tr>
+        <td
+          class="gl-text-secondary gl-font-weight-bold"
+        >
+          
+            Metadata
+          
+        </td>
+         
+        <td
+          class="gl-font-weight-bold"
+        >
+          FileName
+        </td>
+         
+        <td>
+          test.py
+        </td>
+      </tr>
+      <tr>
+        <td />
+         
+        <td
+          class="gl-font-weight-bold"
+        >
+          ExecutionTime
+        </td>
+         
+        <td>
+          .0856
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
diff --git a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap
index e253a0afc6c..3ee2c1cc075 100644
--- a/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap
+++ b/spec/frontend/ml/experiment_tracking/components/__snapshots__/ml_experiment_spec.js.snap
@@ -95,8 +95,8 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
    
   <table
     aria-busy="false"
-    aria-colcount="6"
-    class="table b-table gl-table gl-mt-0!"
+    aria-colcount="9"
+    class="table b-table gl-table gl-mt-0! ml-candidate-table table-sm"
     role="table"
   >
     <!---->
@@ -117,7 +117,7 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           scope="col"
         >
           <div>
-            L1 Ratio
+            Name
           </div>
         </th>
         <th
@@ -127,7 +127,7 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           scope="col"
         >
           <div>
-            Rmse
+            Created at
           </div>
         </th>
         <th
@@ -137,7 +137,7 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           scope="col"
         >
           <div>
-            Auc
+            User
           </div>
         </th>
         <th
@@ -147,11 +147,41 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           scope="col"
         >
           <div>
-            Mae
+            L1 Ratio
           </div>
         </th>
         <th
           aria-colindex="5"
+          class=""
+          role="columnheader"
+          scope="col"
+        >
+          <div>
+            Rmse
+          </div>
+        </th>
+        <th
+          aria-colindex="6"
+          class=""
+          role="columnheader"
+          scope="col"
+        >
+          <div>
+            Auc
+          </div>
+        </th>
+        <th
+          aria-colindex="7"
+          class=""
+          role="columnheader"
+          scope="col"
+        >
+          <div>
+            Mae
+          </div>
+        </th>
+        <th
+          aria-colindex="8"
           aria-label="Details"
           class=""
           role="columnheader"
@@ -160,7 +190,7 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           <div />
         </th>
         <th
-          aria-colindex="6"
+          aria-colindex="9"
           aria-label="Artifact"
           class=""
           role="columnheader"
@@ -183,39 +213,97 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           class=""
           role="cell"
         >
-          0.4
+          <div
+            title="aCandidate"
+          >
+            aCandidate
+          </div>
         </td>
         <td
           aria-colindex="2"
           class=""
           role="cell"
         >
-          1
+          <time
+            class=""
+            datetime="2023-01-05T14:07:02.975Z"
+            title="2023-01-05T14:07:02.975Z"
+          >
+            in 2 years
+          </time>
         </td>
         <td
           aria-colindex="3"
           class=""
           role="cell"
-        />
+        >
+          <a
+            class="gl-link"
+            href="/root"
+            title="root"
+          >
+            @root
+          </a>
+        </td>
         <td
           aria-colindex="4"
           class=""
           role="cell"
-        />
+        >
+          <div
+            title="0.4"
+          >
+            0.4
+          </div>
+        </td>
         <td
           aria-colindex="5"
           class=""
           role="cell"
         >
+          <div
+            title="1"
+          >
+            1
+          </div>
+        </td>
+        <td
+          aria-colindex="6"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="7"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="8"
+          class=""
+          role="cell"
+        >
           <a
             class="gl-link"
             href="link_to_candidate1"
+            title="Details"
           >
             Details
           </a>
         </td>
         <td
-          aria-colindex="6"
+          aria-colindex="9"
           class=""
           role="cell"
         >
@@ -224,6 +312,7 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
             href="link_to_artifact"
             rel="noopener"
             target="_blank"
+            title="Artifacts"
           >
             Artifacts
           </a>
@@ -238,47 +327,435 @@ exports[`MlExperiment with candidates renders correctly 1`] = `
           class=""
           role="cell"
         >
-          0.5
+          <div
+            title=""
+          >
+            
+          </div>
         </td>
         <td
           aria-colindex="2"
           class=""
           role="cell"
-        />
+        >
+          <time
+            class=""
+            datetime="2023-01-05T14:07:02.975Z"
+            title="2023-01-05T14:07:02.975Z"
+          >
+            in 2 years
+          </time>
+        </td>
         <td
           aria-colindex="3"
           class=""
           role="cell"
         >
-          0.3
+          <div>
+            -
+          </div>
         </td>
         <td
           aria-colindex="4"
           class=""
           role="cell"
-        />
+        >
+          <div
+            title="0.5"
+          >
+            0.5
+          </div>
+        </td>
         <td
           aria-colindex="5"
           class=""
           role="cell"
         >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="6"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.3"
+          >
+            0.3
+          </div>
+        </td>
+        <td
+          aria-colindex="7"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="8"
+          class=""
+          role="cell"
+        >
           <a
             class="gl-link"
             href="link_to_candidate2"
+            title="Details"
           >
             Details
           </a>
         </td>
         <td
+          aria-colindex="9"
+          class=""
+          role="cell"
+        >
+          <div
+            title="Artifacts"
+          >
+            
+        -
+      
+          </div>
+        </td>
+      </tr>
+      <tr
+        class=""
+        role="row"
+      >
+        <td
+          aria-colindex="1"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="2"
+          class=""
+          role="cell"
+        >
+          <time
+            class=""
+            datetime="2023-01-05T14:07:02.975Z"
+            title="2023-01-05T14:07:02.975Z"
+          >
+            in 2 years
+          </time>
+        </td>
+        <td
+          aria-colindex="3"
+          class=""
+          role="cell"
+        >
+          <div>
+            -
+          </div>
+        </td>
+        <td
+          aria-colindex="4"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.5"
+          >
+            0.5
+          </div>
+        </td>
+        <td
+          aria-colindex="5"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
           aria-colindex="6"
           class=""
           role="cell"
-        />
+        >
+          <div
+            title="0.3"
+          >
+            0.3
+          </div>
+        </td>
+        <td
+          aria-colindex="7"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="8"
+          class=""
+          role="cell"
+        >
+          <a
+            class="gl-link"
+            href="link_to_candidate3"
+            title="Details"
+          >
+            Details
+          </a>
+        </td>
+        <td
+          aria-colindex="9"
+          class=""
+          role="cell"
+        >
+          <div
+            title="Artifacts"
+          >
+            
+        -
+      
+          </div>
+        </td>
+      </tr>
+      <tr
+        class=""
+        role="row"
+      >
+        <td
+          aria-colindex="1"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="2"
+          class=""
+          role="cell"
+        >
+          <time
+            class=""
+            datetime="2023-01-05T14:07:02.975Z"
+            title="2023-01-05T14:07:02.975Z"
+          >
+            in 2 years
+          </time>
+        </td>
+        <td
+          aria-colindex="3"
+          class=""
+          role="cell"
+        >
+          <div>
+            -
+          </div>
+        </td>
+        <td
+          aria-colindex="4"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.5"
+          >
+            0.5
+          </div>
+        </td>
+        <td
+          aria-colindex="5"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="6"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.3"
+          >
+            0.3
+          </div>
+        </td>
+        <td
+          aria-colindex="7"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="8"
+          class=""
+          role="cell"
+        >
+          <a
+            class="gl-link"
+            href="link_to_candidate4"
+            title="Details"
+          >
+            Details
+          </a>
+        </td>
+        <td
+          aria-colindex="9"
+          class=""
+          role="cell"
+        >
+          <div
+            title="Artifacts"
+          >
+            
+        -
+      
+          </div>
+        </td>
+      </tr>
+      <tr
+        class=""
+        role="row"
+      >
+        <td
+          aria-colindex="1"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="2"
+          class=""
+          role="cell"
+        >
+          <time
+            class=""
+            datetime="2023-01-05T14:07:02.975Z"
+            title="2023-01-05T14:07:02.975Z"
+          >
+            in 2 years
+          </time>
+        </td>
+        <td
+          aria-colindex="3"
+          class=""
+          role="cell"
+        >
+          <div>
+            -
+          </div>
+        </td>
+        <td
+          aria-colindex="4"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.5"
+          >
+            0.5
+          </div>
+        </td>
+        <td
+          aria-colindex="5"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="6"
+          class=""
+          role="cell"
+        >
+          <div
+            title="0.3"
+          >
+            0.3
+          </div>
+        </td>
+        <td
+          aria-colindex="7"
+          class=""
+          role="cell"
+        >
+          <div
+            title=""
+          >
+            
+          </div>
+        </td>
+        <td
+          aria-colindex="8"
+          class=""
+          role="cell"
+        >
+          <a
+            class="gl-link"
+            href="link_to_candidate5"
+            title="Details"
+          >
+            Details
+          </a>
+        </td>
+        <td
+          aria-colindex="9"
+          class=""
+          role="cell"
+        >
+          <div
+            title="Artifacts"
+          >
+            
+        -
+      
+          </div>
+        </td>
       </tr>
       <!---->
       <!---->
     </tbody>
     <!---->
   </table>
+   
+  <!---->
 </div>
 `;
diff --git a/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js b/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js
index 4b16312815a..fb45c4b07a4 100644
--- a/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js
+++ b/spec/frontend/ml/experiment_tracking/components/ml_candidate_spec.js
@@ -15,6 +15,10 @@ describe('MlCandidate', () => {
         { name: 'AUC', value: '.55' },
         { name: 'Accuracy', value: '.99' },
       ],
+      metadata: [
+        { name: 'FileName', value: 'test.py' },
+        { name: 'ExecutionTime', value: '.0856' },
+      ],
       info: {
         iid: 'candidate_iid',
         artifact_link: 'path_to_artifact',
diff --git a/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js b/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js
index 50539440f25..abcaf17303f 100644
--- a/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js
+++ b/spec/frontend/ml/experiment_tracking/components/ml_experiment_spec.js
@@ -1,12 +1,19 @@
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlPagination } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import MlExperiment from '~/ml/experiment_tracking/components/ml_experiment.vue';
 
 describe('MlExperiment', () => {
   let wrapper;
 
-  const createWrapper = (candidates = [], metricNames = [], paramNames = []) => {
-    return mountExtended(MlExperiment, { provide: { candidates, metricNames, paramNames } });
+  const createWrapper = (
+    candidates = [],
+    metricNames = [],
+    paramNames = [],
+    pagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 0 },
+  ) => {
+    return mountExtended(MlExperiment, {
+      provide: { candidates, metricNames, paramNames, pagination },
+    });
   };
 
   const findAlert = () => wrapper.findComponent(GlAlert);
@@ -25,20 +32,110 @@ describe('MlExperiment', () => {
 
       expect(findEmptyState().exists()).toBe(true);
     });
+
+    it('does not show pagination', () => {
+      wrapper = createWrapper();
+
+      expect(wrapper.findComponent(GlPagination).exists()).toBe(false);
+    });
   });
 
   describe('with candidates', () => {
-    it('renders correctly', () => {
-      wrapper = createWrapper(
+    const defaultPagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 5 };
+
+    const createWrapperWithCandidates = (pagination = defaultPagination) => {
+      return createWrapper(
         [
-          { rmse: 1, l1_ratio: 0.4, details: 'link_to_candidate1', artifact: 'link_to_artifact' },
-          { auc: 0.3, l1_ratio: 0.5, details: 'link_to_candidate2' },
+          {
+            rmse: 1,
+            l1_ratio: 0.4,
+            details: 'link_to_candidate1',
+            artifact: 'link_to_artifact',
+            name: 'aCandidate',
+            created_at: '2023-01-05T14:07:02.975Z',
+            user: { username: 'root', path: '/root' },
+          },
+          {
+            auc: 0.3,
+            l1_ratio: 0.5,
+            details: 'link_to_candidate2',
+            created_at: '2023-01-05T14:07:02.975Z',
+            name: null,
+            user: null,
+          },
+          {
+            auc: 0.3,
+            l1_ratio: 0.5,
+            details: 'link_to_candidate3',
+            created_at: '2023-01-05T14:07:02.975Z',
+            name: null,
+            user: null,
+          },
+          {
+            auc: 0.3,
+            l1_ratio: 0.5,
+            details: 'link_to_candidate4',
+            created_at: '2023-01-05T14:07:02.975Z',
+            name: null,
+            user: null,
+          },
+          {
+            auc: 0.3,
+            l1_ratio: 0.5,
+            details: 'link_to_candidate5',
+            created_at: '2023-01-05T14:07:02.975Z',
+            name: null,
+            user: null,
+          },
         ],
         ['rmse', 'auc', 'mae'],
         ['l1_ratio'],
+        pagination,
       );
+    };
+
+    it('renders correctly', () => {
+      wrapper = createWrapperWithCandidates();
 
       expect(wrapper.element).toMatchSnapshot();
     });
+
+    describe('Pagination behaviour', () => {
+      it('should show', () => {
+        wrapper = createWrapperWithCandidates();
+
+        expect(wrapper.findComponent(GlPagination).exists()).toBe(true);
+      });
+
+      it('should get the page number from the URL', () => {
+        wrapper = createWrapperWithCandidates({ ...defaultPagination, page: 2 });
+
+        expect(wrapper.findComponent(GlPagination).props().value).toBe(2);
+      });
+
+      it('should not have a prevPage if the page is 1', () => {
+        wrapper = createWrapperWithCandidates();
+
+        expect(wrapper.findComponent(GlPagination).props().prevPage).toBe(null);
+      });
+
+      it('should set the prevPage to 1 if the page is 2', () => {
+        wrapper = createWrapperWithCandidates({ ...defaultPagination, page: 2 });
+
+        expect(wrapper.findComponent(GlPagination).props().prevPage).toBe(1);
+      });
+
+      it('should not have a nextPage if isLastPage is true', async () => {
+        wrapper = createWrapperWithCandidates({ ...defaultPagination, isLastPage: true });
+
+        expect(wrapper.findComponent(GlPagination).props().nextPage).toBe(null);
+      });
+
+      it('should set the nextPage to 2 if the page is 1', () => {
+        wrapper = createWrapperWithCandidates();
+
+        expect(wrapper.findComponent(GlPagination).props().nextPage).toBe(2);
+      });
+    });
   });
 });