refactor: switch DatasetsRequestedPanel to JSX

DataBiosphere · Mar 1, 2024 · 166fa17 · 166fa17
1 parent 33b9d0b
commit 166fa17
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 109 deletions.
diff --git a/cypress/component/MultiDatasetVoteTab/datasets_requested.spec.js b/cypress/component/MultiDatasetVoteTab/datasets_requested.spec.js
@@ -29,8 +29,8 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 2, 3, 4, 5, 6, 7]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 0);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(0)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 0);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(0)');
   });
 
   it('Renders no dataset information if bucketDatasets is null', function () {
@@ -39,8 +39,8 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 2, 3, 4, 5, 6, 7]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 0);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(0)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 0);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(0)');
   });
 
   it('Renders no dataset information if dacDatasetIds is empty', function () {
@@ -50,8 +50,8 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 0);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(0)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 0);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(0)');
   });
 
   it('Renders no dataset information if dacDatasetIds is null', function () {
@@ -60,8 +60,8 @@ describe('DatasetsRequestedPanel - Tests', function () {
         bucketDatasets={bucketDatasets}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 0);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(0)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 0);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(0)');
   });
 
   it('Renders no dataset information if there are no matches between bucket datasets and DAC dataset ids', function () {
@@ -71,8 +71,8 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[8, 9, 10]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 0);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(0)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 0);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(0)');
   });
 
   it('Renders less than five datasets without an expansion link', function () {
@@ -82,15 +82,15 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 3, 9, 10]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 2);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(2)');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 2);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(2)');
 
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-3');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 3');
 
-    cy.get('[datacy=collapse-expand-link]').should('not.exist');
+    cy.get('[data-cy=collapse-expand-link]').should('not.exist');
   });
 
   it('Renders five datasets without an expansion link', function () {
@@ -100,21 +100,21 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 2, 3, 4, 5]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 5);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(5)');
-
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-2');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 2');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-3');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 3');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-4');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 4');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-5');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 5');
-
-    cy.get('[datacy=collapse-expand-link]').should('not.exist');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 5);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(5)');
+
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-2');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 2');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-4');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 4');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-5');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 5');
+
+    cy.get('[data-cy=collapse-expand-link]').should('not.exist');
   });
 
   it('Renders more than five datasets with an expansion link', function () {
@@ -124,26 +124,26 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 2, 3, 4, 5, 6, 7]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 5);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(7)');
-
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 1');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-2');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 2');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-3');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 3');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-4');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 4');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-5');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 5');
-
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'DUOS-6');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'Dataset 6');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'DUOS-7');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'Dataset 7');
-
-    cy.get('[datacy=collapse-expand-link]').should('contain.text', '+ View 2 more');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 5);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(7)');
+
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-2');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 2');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 3');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-4');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 4');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-5');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 5');
+
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'DUOS-6');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'Dataset 6');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'DUOS-7');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'Dataset 7');
+
+    cy.get('[data-cy=collapse-expand-link]').should('contain.text', '+ View 2 more');
   });
 
   it('Shows more or less datasets when link is clicked', function () {
@@ -153,28 +153,28 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1, 2, 3, 4, 5, 6, 7]}
       />
     );
-    cy.get('[datacy=dataset-list]').children().should('have.length', 5);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(7)');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'DUOS-6');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'Dataset 6');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'DUOS-7');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'Dataset 7');
-
-    cy.get('[datacy=collapse-expand-link]').should('contain.text', '+ View 2 more');
-    cy.get('[datacy=collapse-expand-link]').click();
-
-    cy.get('[datacy=dataset-list]').children().should('have.length', 7);
-    cy.get('[datacy=dataset-count]').should('contain.text', '(7)');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-6');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 6');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-7');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 7');
-
-    cy.get('[datacy=collapse-expand-link]').should('contain.text', '- View 2 less');
-    cy.get('[datacy=collapse-expand-link]').click();
-
-    cy.get('[datacy=dataset-list]').children().should('have.length', 5);
-    cy.get('[datacy=collapse-expand-link]').should('contain.text', '+ View 2 more');
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 5);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(7)');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'DUOS-6');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'Dataset 6');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'DUOS-7');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'Dataset 7');
+
+    cy.get('[data-cy=collapse-expand-link]').should('contain.text', '+ View 2 more');
+    cy.get('[data-cy=collapse-expand-link]').click();
+
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 7);
+    cy.get('[data-cy=dataset-count]').should('contain.text', '(7)');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-6');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 6');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-7');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 7');
+
+    cy.get('[data-cy=collapse-expand-link]').should('contain.text', '- View 2 less');
+    cy.get('[data-cy=collapse-expand-link]').click();
+
+    cy.get('[data-cy=dataset-list]').children().should('have.length', 5);
+    cy.get('[data-cy=collapse-expand-link]').should('contain.text', '+ View 2 more');
   });
 
   it('Renders filler dataset identifier if attribute is null', function () {
@@ -189,9 +189,9 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1]}
       />
     );
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'DUOS-1');
-    cy.get('[datacy=dataset-list]').should('contain.text', '- -');
-    cy.get('[datacy=dataset-list]').should('contain.text', 'Dataset 1');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'DUOS-1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', '- -');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'Dataset 1');
   });
 
   it('Renders filler dataset name if attribute is null', function () {
@@ -206,9 +206,9 @@ describe('DatasetsRequestedPanel - Tests', function () {
         dacDatasetIds={[1]}
       />
     );
-    cy.get('[datacy=dataset-list]').should('contain.text', 'DUOS-1');
-    cy.get('[datacy=dataset-list]').should('not.contain.text', 'Dataset 1');
-    cy.get('[datacy=dataset-list]').should('contain.text', '- -');
+    cy.get('[data-cy=dataset-list]').should('contain.text', 'DUOS-1');
+    cy.get('[data-cy=dataset-list]').should('not.contain.text', 'Dataset 1');
+    cy.get('[data-cy=dataset-list]').should('contain.text', '- -');
   });
 
   it('Renders skeleton text when loading', function () {
@@ -221,7 +221,7 @@ describe('DatasetsRequestedPanel - Tests', function () {
     );
 
     cy.get('.text-placeholder').should('exist');
-    cy.get('[datacy=dataset-list]').should('not.exist');
+    cy.get('[data-cy=dataset-list]').should('not.exist');
   });
 
   it('shows all datasets if the viewing on the admin page', () => {
@@ -234,6 +234,6 @@ describe('DatasetsRequestedPanel - Tests', function () {
       />
     );
     cy.get('.dataset-list-item').should('have.length', 5);
-    cy.get('[datacy=collapse-expand-link]').contains('View 2 more');
+    cy.get('[data-cy=collapse-expand-link]').contains('View 2 more');
   });
 });
diff --git a/src/components/collection_voting_slab/DatasetsRequestedPanel.js b/src/components/collection_voting_slab/DatasetsRequestedPanel.js
@@ -1,4 +1,4 @@
-import {a, div, h, span} from 'react-hyperscript-helpers';
+import React from 'react';
 import {useEffect, useState} from 'react';
 import {isNil, filter, includes, map} from 'lodash/fp';
 
@@ -71,27 +71,33 @@ export default function DatasetsRequestedPanel(props) {
   };
 
   const SectionHeading = () => {
-    return div({style: styles.heading}, [
-      'Datasets Requested',
-      span({
-        style: styles.datasetCount,
-        isRendered: !isLoading,
-        datacy: 'dataset-count'
-      }, [`(${datasetCount})`])
-    ]);
+    return (
+      <div style={styles.heading}>
+        Datasets Requested
+        {!isLoading && <span style={styles.datasetCount} data-cy="dataset-count">
+          ({datasetCount})
+        </span>}
+      </div>
+    );
   };
 
   const DatasetList = () => {
     const datasetRows = map(dataset => {
-      return div({style: {display: 'flex'}, key: dataset.dataSetId, className: 'dataset-list-item'}, [
-        div({style: {width: '12.5%'}}, [datasetId(dataset)]),
-        div({style: {width: '75%'}}, [datasetName(dataset)])
-      ]);
+      return (
+        <div style={{display: 'flex'}} key={dataset.dataSetId} className="dataset-list-item">
+          <div style={{width: '12.5%'}}>{datasetId(dataset)}</div>
+          <div style={{width: '75%'}}>{datasetName(dataset)}</div>
+        </div>
+      );
     })(visibleDatasets);
 
-    return isLoading
-      ? div({className: 'text-placeholder', style: styles.skeletonLoader})
-      : div({style: styles.datasetList, datacy: 'dataset-list'}, [datasetRows]);
+    return isLoading ? (
+      <div className="text-placeholder" style={styles.skeletonLoader} />
+    ) : (
+      <div style={styles.datasetList} data-cy="dataset-list">
+        {datasetRows}
+      </div>
+    );
   };
 
   const datasetId = (dataset) => {
@@ -108,12 +114,17 @@ export default function DatasetsRequestedPanel(props) {
       `- View ${hiddenDatasetCount} less` :
       `+ View ${hiddenDatasetCount} more`;
 
-    return a({
-      datacy: 'collapse-expand-link',
-      style: styles.link,
-      onClick: expanded ? collapseDatasetList : expandDatasetList,
-      isRendered: hiddenDatasetCount > 0
-    }, [linkMessage]);
+    return (
+      <>
+        {hiddenDatasetCount > 0 && <a
+          data-cy="collapse-expand-link"
+          style={styles.link}
+          onClick={expanded ? collapseDatasetList : expandDatasetList}
+        >
+          {linkMessage}
+        </a>}
+      </>
+    );
   };
 
   const expandDatasetList = () => {
@@ -126,9 +137,11 @@ export default function DatasetsRequestedPanel(props) {
     setVisibleDatasets(filteredDatasets.slice(0, collapsedDatasetCapacity));
   };
 
-  return div({style: styles.baseStyle}, [
-    h(SectionHeading),
-    h(DatasetList),
-    h(CollapseExpandLink)
-  ]);
+  return (
+    <div style={styles.baseStyle}>
+      <SectionHeading />
+      <DatasetList />
+      <CollapseExpandLink />
+    </div>
+  );
 }