feat: populates datatable with subsidies

.env

@@ -3,6 +3,7 @@ ACCESS_TOKEN_COOKIE_NAME=null
 BASE_URL=null
 FEATURE_CONFIGURATION_MANAGEMENT=''
 FEATURE_CONFIGURATION_ENTERPRISE_PROVISION=''
+FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION=''
 CREDENTIALS_BASE_URL=null
 CSRF_TOKEN_API_PATH=null
 ECOMMERCE_BASE_URL=null

.env.development

@@ -4,6 +4,7 @@ ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
 BASE_URL='http://localhost:18450'
 FEATURE_CONFIGURATION_MANAGEMENT='true'
 FEATURE_CONFIGURATION_ENTERPRISE_PROVISION='true'
+FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION='true'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'

package.json

@@ -29,10 +29,10 @@
     "url": "https://github.com/openedx/frontend-app-support-tools/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^1.4.2",
+    "@edx/brand": "npm:@edx/brand-[email protected]",
     "@edx/frontend-enterprise-utils": "^3.0.0",
     "@edx/frontend-platform": "^4.2.0",
-    "@edx/paragon": "^20.26.0",
+    "@edx/paragon": "20.45.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
@@ -41,8 +41,8 @@
     "babel-polyfill": "6.26.0",
     "classnames": "2.2.6",
     "lodash.debounce": "4.0.8",
+    "lodash.snakecase": "4.1.1",
     "moment": "2.29.1",
-    "newrelic": "5.13.1",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",

src/Configuration/Provisioning/Dashboard.jsx

@@ -1,38 +1,19 @@
 import React, { useEffect, useState } from 'react';
-
-import { Icon, IconButton } from '@edx/paragon';
-import { EditOutline } from '@edx/paragon/icons';
 import { useHistory } from 'react-router';
 import { v4 as uuidv4 } from 'uuid';
 
 import DashboardHeader from './DashboardHeader';
-import DashboardDatatable from './DashboardDatatable';
 import DashboardToast from './DashboardToast';
-
+import DashboardDataTable from './DashboardDataTable';
 import { toastText } from './data/constants';
-import { useDashboardContext } from './data/hooks';
 
 // TODO: Create a new item header, search box and datatable
 const Dashboard = () => {
-  const { hydrateEnterpriseSubsidies } = useDashboardContext();
   const history = useHistory();
   const { location } = history;
   const { state: locationState } = location;
   const [toasts, setToasts] = useState([]);
 
-  const editLearnerCreditPlan = (uuid) => {
-    // TODO: Navigate to the edit page for the selected learner credit plan based on UUID
-    history.push(`/enterprise-configuration/learner-credit/${uuid}/edit`);
-  };
-
-  const editAction = (onIconInteraction) => (
-    <IconButton
-      src={EditOutline}
-      iconAs={Icon}
-      onClick={onIconInteraction}
-    />
-  );
-
   useEffect(() => {
     if (locationState?.planSuccessfullyCreated) {
       setToasts((prevState) => [...prevState, {
@@ -43,13 +24,12 @@ const Dashboard = () => {
       delete newState.planSuccessfullyCreated;
       history.replace({ ...location, state: newState });
     }
-    hydrateEnterpriseSubsidies(25, editAction, editLearnerCreditPlan);
   }, [toastText.successfulPlanCreation, history, location, locationState]);
 
   return (
     <>
       <DashboardHeader />
-      <DashboardDatatable />
+      <DashboardDataTable />
       {toasts.map(({ text, uuid }) => (<DashboardToast toastText={text} key={uuid} />))}
     </>
   );

src/Configuration/Provisioning/DashboardContext.jsx

@@ -5,7 +5,7 @@ import { createContext } from 'use-context-selector';
 export const DashboardContext = createContext(null);
 const DashboardContextProvider = ({ children }) => {
   const contextValue = useState({
-    enterpriseSubsidies: [],
+    enterpriseSubsidies: { results: [] },
   });
 
   return (

src/Configuration/Provisioning/DashboardDataTable/DashboardDataTable.jsx

@@ -0,0 +1,107 @@
+import { DataTable, TextFilter } from '@edx/paragon';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import { DashboardContext } from '../DashboardContext';
+import { MAX_PAGE_SIZE } from '../data/constants';
+import { useDashboardContext } from '../data/hooks';
+import DashboardTableActions from './DashboardTableActions';
+import DashboardTableBadges from './DashboardTableBadges';
+import { sortDataTableData, transformDataTableData, transformDatatableDate } from '../data/utils';
+
+const FilterStatus = (rest) => <DataTable.FilterStatus showFilteredFields={false} {...rest} />;
+
+const DashboardDataTable = () => {
+  const { enterpriseSubsidies } = useContextSelector(DashboardContext, v => v[0]);
+  const { hydrateEnterpriseSubsidies } = useDashboardContext();
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Implementation due to filterText value displaying accessor value customerName as opposed to Customer Name
+
+  const fetchData = useCallback(async (datatableProps) => {
+    setIsLoading(true);
+    try {
+      await hydrateEnterpriseSubsidies({
+        pageIndex: datatableProps.pageIndex + 1,
+        sortBy: sortDataTableData(datatableProps),
+        filterBy: transformDataTableData(datatableProps),
+      });
+    } catch (e) {
+      logError(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [hydrateEnterpriseSubsidies]);
+
+  const debouncedFetchData = useMemo(() => debounce(
+    fetchData,
+    300,
+  ), [fetchData]);
+
+  return (
+    <section className="mt-5">
+      <DataTable
+        isLoading={isLoading}
+        isPaginated
+        manualPagination
+        isSortable
+        manualSortBy
+        isFilterable
+        manualFilters
+        defaultColumnValues={{ Filter: TextFilter }}
+        pageCount={enterpriseSubsidies.pageCount || 0}
+        initialState={{
+          pageSize: MAX_PAGE_SIZE,
+          pageIndex: 0,
+        }}
+        itemCount={enterpriseSubsidies?.count || 0}
+        data={enterpriseSubsidies.results}
+        fetchData={debouncedFetchData}
+        FilterStatusComponent={FilterStatus}
+        columns={[
+          {
+            Header: 'Plan ID',
+            accessor: 'uuid',
+          },
+          {
+            Header: 'Plan name',
+            accessor: 'title',
+          },
+          {
+            Header: 'Plan Status',
+            accessor: 'isActive',
+            disableFilters: true,
+            Cell: DashboardTableBadges,
+          },
+          {
+            Header: 'Customer name',
+            accessor: 'enterpriseCustomerName',
+            disableSortBy: true,
+          },
+          {
+            Header: 'Start date',
+            accessor: 'activeDatetime',
+            disableFilters: true,
+            Cell: ({ row }) => transformDatatableDate(row.values.activeDatetime),
+          },
+          {
+            Header: 'End date',
+            accessor: 'expirationDatetime',
+            disableFilters: true,
+            Cell: ({ row }) => transformDatatableDate(row.values.expirationDatetime),
+          },
+          {
+            Header: '',
+            accessor: 'actions',
+            disableFilters: true,
+            disableSortBy: true,
+            Cell: DashboardTableActions,
+          },
+        ]}
+      />
+    </section>
+  );
+};
+
+export default DashboardDataTable;

src/Configuration/Provisioning/DashboardDataTable/DashboardTableActions.jsx

@@ -0,0 +1,55 @@
+import { Hyperlink, Icon, IconButton } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useHistory } from 'react-router';
+import { DjangoShort, EditOutline } from '@edx/paragon/icons';
+import PropTypes from 'prop-types';
+import ROUTES from '../../../data/constants/routes';
+
+const DashboardTableActions = ({ row }) => {
+  const rowUuid = row.values.uuid;
+  const { DJANGO_ADMIN_SUBSIDY_BASE_URL } = getConfig();
+  const history = useHistory();
+  const { HOME } = ROUTES.CONFIGURATION.SUB_DIRECTORY.PROVISIONING;
+
+  const actionsArray = [];
+  if (getConfig().FEATURE_CONFIGURATION_EDIT_ENTERPRISE_PROVISION) {
+    actionsArray.push((
+      <IconButton
+        key="edit-icon"
+        size="sm"
+        src={EditOutline}
+        iconAs={Icon}
+        onClick={() => history.push(`${HOME}/${rowUuid}/edit`)}
+        alt="Edit Subsidy Icon Button"
+        data-testid={`Edit-${rowUuid}`}
+      />
+    ));
+  }
+  actionsArray.push(
+    <Hyperlink
+      key="django-icon"
+      destination={`${DJANGO_ADMIN_SUBSIDY_BASE_URL}/admin/subsidy/subsidy/?uuid=${rowUuid}`}
+      target="_blank"
+      showLaunchIcon={false}
+      data-testid="django-admin-link"
+    >
+      <IconButton
+        size="sm"
+        src={DjangoShort}
+        iconAs={Icon}
+        alt="Django Admin Icon Button"
+        data-testid={`Django-Admin-Page-${rowUuid}`}
+      />
+    </Hyperlink>,
+  );
+  return actionsArray;
+};
+DashboardTableActions.propTypes = {
+  row: PropTypes.shape({
+    values: PropTypes.shape({
+      uuid: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default DashboardTableActions;

src/Configuration/Provisioning/DashboardDataTable/DashboardTableBadges.jsx

@@ -0,0 +1,25 @@
+import {
+  Badge,
+} from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+const DashboardTableBadges = ({ row }) => {
+  const { isActive } = row.values;
+  return (
+    <Badge
+      variant={isActive ? 'success' : 'danger'}
+    >
+      {isActive ? 'Active' : 'Inactive'}
+    </Badge>
+  );
+};
+
+DashboardTableBadges.propTypes = {
+  row: PropTypes.shape({
+    values: PropTypes.shape({
+      isActive: PropTypes.bool,
+    }),
+  }).isRequired,
+};
+
+export default DashboardTableBadges;

src/Configuration/Provisioning/DashboardDataTable/index.js

@@ -0,0 +1,3 @@
+import DashboardDataTable from './DashboardDataTable';
+
+export default DashboardDataTable;

src/Configuration/Provisioning/DashboardDataTable/tests/DashboardDataTable.test.jsx

@@ -0,0 +1,49 @@
+/* eslint-disable react/prop-types */
+import { renderWithRouter } from '@edx/frontend-enterprise-utils';
+import { screen, waitFor } from '@testing-library/react';
+import { camelCaseObject } from '@edx/frontend-platform';
+import { DashboardContext, initialStateValue } from '../../../testData/Dashboard';
+import DashboardDataTable from '../DashboardDataTable';
+import { sampleDataTableData } from '../../../testData/constants';
+
+// Mock the debounce function
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+// Mock the subsidy list
+const mockGetAllSubsidiesData = sampleDataTableData(10);
+jest.mock('../../../../data/services/SubsidyApiService', () => ({
+  getAllSubsidies: () => Promise.resolve({
+    data: mockGetAllSubsidiesData,
+  }),
+}));
+
+// Mock the enterprise customers list
+const mockCustomerData = camelCaseObject(mockGetAllSubsidiesData).results.map((subsidy) => ({
+  id: subsidy.enterpriseCustomerUuid,
+  name: subsidy.customerName,
+}));
+jest.mock('../../../../data/services/EnterpriseApiService', () => ({
+  fetchEnterpriseCustomersBasicList: () => Promise.resolve({
+    data: mockCustomerData,
+  }),
+}));
+
+const DashboardDatatableWrapper = ({
+  value = initialStateValue,
+}) => (
+  <DashboardContext value={value}>
+    <DashboardDataTable />
+  </DashboardContext>
+);
+
+describe('DashboardDatatable', () => {
+  it('renders the datatable', () => {
+    renderWithRouter(<DashboardDatatableWrapper />);
+    expect(screen.getByText('loading')).toBeTruthy();
+  });
+  it('renders the datatable with data', async () => {
+    renderWithRouter(<DashboardDatatableWrapper />);
+    expect(screen.getByText('loading')).toBeTruthy();
+    await waitFor(() => expect(screen.getByText('Enterprise Customer 1')).toBeTruthy());
+  });
+});