Add a button to use replicates for comparisons when available (#895)

* WIP

* Change ToggleButton to Switch

* Address change request

Author: beatrice-acasandrei

src/__tests__/CompareResults/RevisionRow.test.tsx

@@ -70,6 +70,7 @@ describe('<RevisionRow>', () => {
           result={rowData}
           view={compareView}
           gridTemplateColumns='none'
+          replicates={false}
         />,
       );
       const shortNameNode = await screen.findByText(shortName);
@@ -97,6 +98,7 @@ describe('Expanded row', () => {
         result={rowData[0] as CompareResultsItem}
         view={compareView}
         gridTemplateColumns='none'
+        replicates={false}
       />,
     );
 
@@ -126,6 +128,7 @@ describe('Expanded row', () => {
         result={testCompareData[0]}
         view={compareView}
         gridTemplateColumns='none'
+        replicates={false}
       />,
     );
 

src/__tests__/CompareResults/SubtestsRevisionRow.test.tsx

@@ -29,6 +29,7 @@ describe('SubtestsRevisionRow Component', () => {
       <SubtestsRevisionRow
         result={subtestsResult[0]}
         gridTemplateColumns={mockGridTemplateColumns}
+        replicates={false}
       />,
     );
 
@@ -48,6 +49,7 @@ describe('SubtestsRevisionRow Component', () => {
       <SubtestsRevisionRow
         result={subtestsResult[2]}
         gridTemplateColumns={mockGridTemplateColumns}
+        replicates={false}
       />,
     );
 
@@ -63,6 +65,7 @@ describe('SubtestsRevisionRow Component', () => {
       <SubtestsRevisionRow
         result={subtestsResult[3]}
         gridTemplateColumns={mockGridTemplateColumns}
+        replicates={false}
       />,
     );
 
@@ -78,6 +81,7 @@ describe('SubtestsRevisionRow Component', () => {
       <SubtestsRevisionRow
         result={subtestsResult[4]}
         gridTemplateColumns={mockGridTemplateColumns}
+        replicates={false}
       />,
     );
 
@@ -96,6 +100,7 @@ describe('SubtestsRevisionRow Component', () => {
       <SubtestsRevisionRow
         result={subtestsResult[0]}
         gridTemplateColumns={mockGridTemplateColumns}
+        replicates={false}
       />,
     );
 

src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap

@@ -716,36 +716,79 @@ exports[`Results Table Should match snapshot 1`] = `
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-suqpw6-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
-                <h2
-                  class="MuiGrid-root MuiGrid-direction-xs-row f1sq1266 css-k4qgqg-MuiGrid-root"
-                >
-                  Results
-                </h2>
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-7tm9pg-MuiButtonBase-root-MuiButton-root"
-                  tabindex="0"
-                  type="button"
+                <div
+                  class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-ztkbb6-MuiGrid-root"
                 >
-                  <span
-                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+                  <h2
+                    class="MuiGrid-root MuiGrid-direction-xs-row f1sq1266 css-k4qgqg-MuiGrid-root"
                   >
-                    <img
-                      role="presentation"
-                      src="pencil.svg"
-                    />
-                  </span>
-                  Edit title
-                </button>
+                    Results
+                  </h2>
+                  <button
+                    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-7tm9pg-MuiButtonBase-root-MuiButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1v1j2p3-MuiButton-startIcon"
+                    >
+                      <img
+                        role="presentation"
+                        src="pencil.svg"
+                      />
+                    </span>
+                    Edit title
+                  </button>
+                  <h2
+                    class="MuiGrid-root MuiGrid-direction-xs-row f11kzsvi css-k4qgqg-MuiGrid-root"
+                  >
+                    Compare with a base
+                  </h2>
+                </div>
                 <h2
-                  class="MuiGrid-root MuiGrid-direction-xs-row f11kzsvi css-k4qgqg-MuiGrid-root"
+                  class="MuiGrid-root MuiGrid-direction-xs-row ff3k5ad css-k4qgqg-MuiGrid-root"
                 >
-                  Compare with a base
+                  <div
+                    class="f1qbk2gm MuiBox-root css-0"
+                  >
+                    <div
+                      class="MuiFormGroup-root css-1mac7pt-MuiFormGroup-root"
+                    >
+                      <label
+                        class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementStart css-1lhdpr4-MuiFormControlLabel-root"
+                      >
+                        <span
+                          class="MuiSwitch-root MuiSwitch-sizeMedium toggle-switch css-rehya9-MuiSwitch-root"
+                        >
+                          <span
+                            class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1jkkk7l-MuiButtonBase-root-MuiSwitchBase-root-MuiSwitch-switchBase"
+                          >
+                            <input
+                              class="PrivateSwitchBase-input MuiSwitch-input css-12xagqm-MuiSwitchBase-root"
+                              type="checkbox"
+                            />
+                            <span
+                              class="MuiSwitch-thumb css-17jyosd-MuiSwitch-thumb"
+                            />
+                          </span>
+                          <span
+                            class="MuiSwitch-track css-tj8d99-MuiSwitch-track"
+                          />
+                        </span>
+                        <span
+                          class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1vajmro-MuiTypography-root"
+                        >
+                          Replicates
+                        </span>
+                      </label>
+                    </div>
+                  </div>
                 </h2>
               </div>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-suqpw6-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <div
                   class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard f1q43ty0 css-st68mf-MuiPaper-root-MuiAlert-root"