feat: use new Data view toggle in datatable ENT-5242 (#180)

* feat: use new Data view toggle in datatable wip since it requires new Paragon release ENT-5242 * feat: remove feature flag cardViewEnabled * feat: upgrade to paragon 17.3.0 * feat: test fix
openedx · Jan 5, 2022 · 6ad8b53 · 6ad8b53
1 parent 8c0659a
commit 6ad8b53
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@edx/frontend-component-header": "2.4.1",
     "@edx/frontend-enterprise-catalog-search": "2.2.5",
     "@edx/frontend-platform": "1.14.3",
-    "@edx/paragon": "^17.2.0",
+    "@edx/paragon": "^17.3.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

diff --git a/src/components/catalogSearchResults/CatalogSearchResults.jsx b/src/components/catalogSearchResults/CatalogSearchResults.jsx
@@ -23,7 +23,6 @@ import {
 import { SearchContext, SearchPagination } from '@edx/frontend-enterprise-catalog-search';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { getConfig } from '@edx/frontend-platform';
 import { GridView, ListView } from '@edx/paragon/icons';
 
 import CourseCard from '../courseCard/CourseCard';
@@ -163,10 +162,7 @@ export const BaseCatalogSearchResults = ({
   const [upcomingRuns, setUpcomingRuns] = useState();
   const [skillNames, setSkillNames] = useState([]);
 
-  // TODO: Feature control for Card view. Remove once cards are finalized
-  const config = getConfig();
-  const cardViewEnabled = config.FEATURE_CARD_VIEW_ENABLED === 'True';
-  const [cardView, setCardView] = useState(cardViewEnabled);
+  const [cardView, setCardView] = useState(true);
 
   const rowClicked = (row) => {
     const rowPrice = row.original.first_enrollable_paid_seat_price;
@@ -283,8 +279,13 @@ export const BaseCatalogSearchResults = ({
         upcomingRuns={upcomingRuns}
         skillNames={skillNames}
       />
-      { cardViewEnabled && <ViewToggle cardView={cardView} setCardView={setCardView} /> }
       <DataTable
+        dataViewToggleOptions={{
+          isDataViewToggleEnabled: true,
+          onDataViewToggle: val => setCardView(val === 'card'),
+          togglePlacement: 'left',
+          defaultActiveStateValue: 'card',
+        }}
         columns={columns}
         data={tableData}
         itemCount={searchResults?.nbHits}
@@ -299,7 +300,7 @@ export const BaseCatalogSearchResults = ({
         )}
       >
         <DataTable.TableControlBar />
-        { cardViewEnabled && cardView ? (
+        { cardView && (
           <CardView
             columnSizes={{
               xs: 12,
@@ -310,7 +311,9 @@ export const BaseCatalogSearchResults = ({
             }}
             CardComponent={(props) => <CourseCard {...props} onClick={cardClicked} />}
           />
-        ) : <DataTable.Table /> }
+        )}
+        { !cardView && <DataTable.Table /> }
+
         <DataTable.TableFooter>
           <DataTable.RowStatus />
           <PaginationComponent defaultRefinement={page} />

diff --git a/src/components/catalogSearchResults/CatalogSearchResults.test.jsx b/src/components/catalogSearchResults/CatalogSearchResults.test.jsx
@@ -106,8 +106,8 @@ describe('Main Catalogs view works as expected', () => {
       </SearchDataWrapper>,
     );
 
-    // switch to table view instead of card
-    const listViewToggleButton = screen.getByLabelText('List view');
+    // Card view should be default
+    const listViewToggleButton = screen.getByLabelText('Card');
     userEvent.click(listViewToggleButton);
 
     // course 1
@@ -128,8 +128,8 @@ describe('Main Catalogs view works as expected', () => {
     );
 
     // view selection toggle buttons
-    expect(screen.getByLabelText('Card view')).toBeVisible();
-    expect(screen.getByLabelText('List view')).toBeVisible();
+    expect(screen.getByLabelText('Card')).toBeVisible();
+    expect(screen.getByLabelText('List')).toBeVisible();
 
     // since card view feature is on, card view should be the default!
     const table = screen.queryByRole('table');
@@ -206,7 +206,7 @@ describe('Main Catalogs view works as expected', () => {
     );
 
     // switch to table view instead of card
-    const listViewToggleButton = screen.getByLabelText('List view');
+    const listViewToggleButton = screen.getByLabelText('List');
     userEvent.click(listViewToggleButton);
 
     expect(screen.queryByText(messages['catalogSearchResults.table.courseName'].defaultMessage)).toBeInTheDocument();
@@ -227,7 +227,7 @@ describe('Main Catalogs view works as expected', () => {
         />
       </SearchDataWrapper>,
     );
-    const listViewToggleButton = screen.getByLabelText('List view');
+    const listViewToggleButton = screen.getByLabelText('List');
     userEvent.click(listViewToggleButton);
 
     expect(screen.queryByText(messages['catalogSearchResults.table.courseName'].defaultMessage)).toBeInTheDocument();

diff --git a/src/components/catalogSearchResults/buttons/downloadCsvButton/DownloadCsvButton.jsx b/src/components/catalogSearchResults/buttons/downloadCsvButton/DownloadCsvButton.jsx
@@ -71,7 +71,7 @@ const DownloadCsvButton = ({ facets, query }) => {
        )}
       <StatefulButton
         state={buttonState}
-        className="download-button"
+        className="ml-2 download-button"
         labels={{
           default: 'Download results',
           pending: 'Downloading',

diff --git a/src/components/catalogSearchResults/buttons/downloadCsvButton/DownloadCsvButton.scss b/src/components/catalogSearchResults/buttons/downloadCsvButton/DownloadCsvButton.scss
@@ -1,3 +1,3 @@
-.download-button{
+.download-button {
   background-color: $primary-500;
 }