chore: Migrate deprecated Table to DataTable for RegisteredLearnersTable

src/components/RegisteredLearnersTable/__snapshots__/RegisteredLearnersTable.test.jsx.snap

@@ -2,35 +2,245 @@
 
 exports[`RegisteredLearnersTable renders empty state correctly 1`] = `
 <div
-  className="fade alert-content alert alert-warning show"
-  role="alert"
+  className="pgn__data-table-layout-wrapper"
 >
-  <span
-    className="pgn__icon alert-icon"
-  >
-    <svg
-      aria-hidden={true}
-      fill="none"
-      focusable={false}
-      height={24}
-      role="img"
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z"
-        fill="currentColor"
-      />
-    </svg>
-  </span>
   <div
-    className="pgn__alert-message-wrapper"
+    className="pgn__data-table-layout-main"
   >
     <div
-      className="alert-message-content"
+      className="pgn__data-table-wrapper"
     >
-      There are no results.
+      <div
+        className="pgn__data-table-status-bar"
+        data-testid="table-control-bar"
+      >
+        <div
+          className="pgn__data-table-status"
+        >
+          <div
+            className="pgn__data-table-status-left"
+          />
+          <div
+            className="pgn__data-table-actions-right"
+          >
+            <div
+              className="pgn__data-table-toggle"
+            />
+            <div />
+          </div>
+        </div>
+      </div>
+      <div
+        className="pgn__data-table-container is-loading"
+        data-testid="data-table-container"
+      >
+        <div
+          className="pgn__data-table-spinner"
+          data-testid="data-table-spinner"
+        >
+          <div
+            className="pgn__spinner spinner-border"
+            role="status"
+          >
+            <span
+              className="sr-only"
+            >
+              loading
+            </span>
+          </div>
+        </div>
+        <table
+          className="pgn__data-table is-striped"
+          role="table"
+        >
+          <thead>
+            <tr
+              role="row"
+            >
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Email
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-up-down"
+                    style={
+                      {
+                        "opacity": 0.5,
+                      }
+                    }
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5-5 5 5H7ZM7 14l5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+              <th
+                colSpan={1}
+                onClick={[Function]}
+                role="columnheader"
+                style={
+                  {
+                    "cursor": "pointer",
+                  }
+                }
+                title="Toggle SortBy"
+              >
+                <span
+                  className="d-flex align-items-center"
+                >
+                  <span>
+                    Account Created
+                  </span>
+                  <span
+                    className="pgn__icon"
+                    data-testid="arrow-drop-down"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m7 10 5 5 5-5H7Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            role="rowgroup"
+          />
+        </table>
+      </div>
+      <div
+        className="pgn__data-table-footer"
+        data-testid="table-footer"
+      >
+        <nav
+          aria-label="table pagination"
+          className="pagination-minimal"
+        >
+          <div
+            aria-atomic={true}
+            aria-live="polite"
+            aria-relevant="text"
+            className="sr-only"
+          >
+            Page 1, Current Page, of -1
+          </div>
+          <ul
+            className="pagination"
+          >
+            <li
+              className="page-item disabled"
+            >
+              <button
+                aria-label="Previous"
+                className="btn-icon btn-icon-primary btn-icon-md previous page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
+                <span
+                  className="btn-icon__icon-container"
+                >
+                  <span
+                    className="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M17.51 3.87 15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </li>
+            <li
+              className="page-item disabled"
+            >
+              <button
+                aria-label="Next, Page 2"
+                className="btn-icon btn-icon-primary btn-icon-md next page-link"
+                disabled={true}
+                onClick={[Function]}
+                tabIndex="-1"
+                type="button"
+              >
+                <span
+                  className="btn-icon__icon-container"
+                >
+                  <span
+                    className="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
 </div>

src/components/RegisteredLearnersTable/data/hooks/useRegisteredLearners.js

@@ -0,0 +1,93 @@
+import {
+  useCallback, useMemo, useRef, useState,
+} from 'react';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+import debounce from 'lodash.debounce';
+import { logError } from '@edx/frontend-platform/logging';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import EnterpriseDataApiService from '../../../../data/services/EnterpriseDataApiService';
+import EVENT_NAMES from '../../../../eventTracking';
+
+const applySortByToOptions = (sortBy, options) => {
+  if (!sortBy || sortBy.length === 0) {
+    return;
+  }
+  const apiFieldsForColumnAccessor = {
+    lmsUserCreated: { key: 'lms_user_created' },
+    userEmail: { key: 'user_email' },
+  };
+  const orderingStrings = sortBy.map(({ id, desc }) => {
+    const apiFieldForColumnAccessor = apiFieldsForColumnAccessor[id];
+    if (!apiFieldForColumnAccessor) {
+      return undefined;
+    }
+    const apiFieldKey = apiFieldForColumnAccessor.key;
+    return desc ? `-${apiFieldKey}` : apiFieldKey;
+  }).filter(orderingString => !!orderingString);
+  Object.assign(options, {
+    ordering: orderingStrings.join(','),
+  });
+};
+
+const useRegisteredLearners = (enterpriseId) => {
+  const shouldTrackFetchEvents = useRef(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [registeredLearners, setRegisteredLearners] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
+
+  const fetchRegisteredLearners = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {
+        page: args.pageIndex + 1, // `DataTable` uses zero-indexed array
+        pageSize: args.pageSize,
+      };
+      applySortByToOptions(args.sortBy, options);
+
+      const response = await EnterpriseDataApiService.fetchUnenrolledRegisteredLearners(enterpriseId, options);
+      const data = camelCaseObject(response.data);
+      setRegisteredLearners({
+        itemCount: data.count,
+        pageCount: data.numPages ?? Math.floor(data.count / options.pageSize),
+        results: data.results,
+      });
+
+      if (shouldTrackFetchEvents.current) {
+        // track event only after original API query to avoid sending event on initial page load. instead,
+        // only track event when user performs manual data operation (e.g., pagination, sort, filter) and
+        // send all table state as event properties.
+        sendEnterpriseTrackEvent(
+          enterpriseId,
+          EVENT_NAMES.PROGRESS_REPORT.DATATABLE_SORT_BY_OR_FILTER,
+          {
+            tableId: 'registered-unenrolled-learners',
+            ...options,
+          },
+        );
+      } else {
+        // set to true to enable tracking events on future API queries
+        shouldTrackFetchEvents.current = true;
+      }
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [enterpriseId]);
+
+  const debouncedFetchRegisteredLearners = useMemo(
+    () => debounce(fetchRegisteredLearners, 300),
+    [fetchRegisteredLearners],
+  );
+
+  return {
+    isLoading,
+    registeredLearners,
+    fetchRegisteredLearners: debouncedFetchRegisteredLearners,
+  };
+};
+
+export default useRegisteredLearners;