feat: table actions clear selection (#640)

package.json

@@ -24,7 +24,7 @@
     "@edx/frontend-enterprise-logistration": "0.1.11",
     "@edx/frontend-enterprise-utils": "1.1.0",
     "@edx/frontend-platform": "1.11.0",
-    "@edx/paragon": "^16.14.5",
+    "@edx/paragon": "^16.16.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

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

@@ -22,7 +22,6 @@ exports[`<ErrorPage /> renders correctly 1`] = `
           >
             <svg
               aria-hidden={true}
-              aria-label=""
               fill="none"
               focusable={false}
               height={24}
@@ -85,14 +84,18 @@ exports[`<ErrorPage /> renders correctly for 403 errors 1`] = `
           <p>
             For assistance, please contact the edX Customer Success team at
              
-            <a
-              className="default-link standalone-link"
-              href="mailto:[email protected]"
-              onClick={null}
-              target="_self"
+            <span
+              className="pgn__mailtolink"
             >
-              [email protected]
-            </a>
+              <a
+                className="pgn__hyperlink default-link standalone-link"
+                href="mailto:[email protected]"
+                onClick={null}
+                target="_self"
+              >
+                [email protected]
+              </a>
+            </span>
             .
           </p>
         </div>

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

@@ -21,14 +21,18 @@ exports[`<ForbiddenPage /> renders correctly 1`] = `
       <p>
         For assistance, please contact the edX Customer Success team at
          
-        <a
-          className="default-link standalone-link"
-          href="mailto:[email protected]"
-          onClick={null}
-          target="_self"
+        <span
+          className="pgn__mailtolink"
         >
-          [email protected]
-        </a>
+          <a
+            className="pgn__hyperlink default-link standalone-link"
+            href="mailto:[email protected]"
+            onClick={null}
+            target="_self"
+          >
+            [email protected]
+          </a>
+        </span>
         .
       </p>
     </div>

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

@@ -29,14 +29,18 @@ Array [
         <p>
           For assistance, please contact the edX Customer Success team at
            
-          <a
-            className="default-link standalone-link"
-            href="mailto:[email protected]"
-            onClick={null}
-            target="_self"
+          <span
+            className="pgn__mailtolink"
           >
-            [email protected]
-          </a>
+            <a
+              className="pgn__hyperlink default-link standalone-link"
+              href="mailto:[email protected]"
+              onClick={null}
+              target="_self"
+            >
+              [email protected]
+            </a>
+          </span>
           .
         </p>
       </div>

src/components/subscriptions/licenses/LicenseManagementModals/LicenseManagementModalHook.js

@@ -16,4 +16,25 @@ export const useRequestState = (isOpen) => {
   return [requestState, setRequestState, initialRequestState];
 };
 
+export const licenseManagementModalZeroState = {
+  isOpen: false,
+  users: [],
+  allUsersSelected: false,
+};
+
+/**
+ * Handles basic modal open/close usage and can hold user data
+ * @param initialState shape:
+ * {
+ *  isOpen: bool
+ *  users: array
+ *  allUsersSelected: bool
+ * }
+ * @returns [state, setState, zeroState]
+ */
+export const useLicenseManagementModalState = (initialState = licenseManagementModalZeroState) => {
+  const [modalState, setModalState] = useState(initialState);
+  return [modalState, setModalState, licenseManagementModalZeroState];
+};
+
 export default useRequestState;

src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableActionColumn.jsx

@@ -1,30 +1,69 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   IconButton,
   Icon,
   Tooltip,
   OverlayTrigger,
+  DataTableContext,
 } from '@edx/paragon';
 import {
   Email,
   RemoveCircle,
 } from '@edx/paragon/icons';
 
+import LicenseManagementRevokeModal from '../LicenseManagementModals/LicenseManagementRevokeModal';
+import LicenseManagementRemindModal from '../LicenseManagementModals/LicenseManagementRemindModal';
 import { canRemindLicense, canRevokeLicense } from '../../data/utils';
+import {
+  useLicenseManagementModalState,
+  licenseManagementModalZeroState as modalZeroState,
+} from '../LicenseManagementModals/LicenseManagementModalHook';
 
 const revokeText = 'Revoke license';
 const remindText = 'Remind learner';
 
 const LicenseManagementTableActionColumn = ({
   user,
-  rowRemindOnClick,
-  rowRevokeOnClick,
+  subscription,
+  onRemindSuccess,
+  onRevokeSuccess,
   disabled,
 }) => {
   const displayRemind = canRemindLicense(user.status);
   const displayRevoked = canRevokeLicense(user.status);
 
+  const [revokeModal, setRevokeModal] = useLicenseManagementModalState();
+  const [remindModal, setRemindModal] = useLicenseManagementModalState();
+  const { clearSelection } = useContext(DataTableContext);
+
+  const revokeOnClick = (revokeUser) => {
+    setRevokeModal({
+      ...revokeModal,
+      isOpen: true,
+      users: [revokeUser],
+    });
+  };
+
+  const remindOnClick = (remindUser) => {
+    setRemindModal({
+      ...remindModal,
+      isOpen: true,
+      users: [remindUser],
+    });
+  };
+
+  const handleRevokeSuccess = () => {
+    setRevokeModal(modalZeroState);
+    onRevokeSuccess(clearSelection)();
+  };
+
+  const handleRemindSuccess = () => {
+    setRemindModal(modalZeroState);
+    onRemindSuccess(clearSelection)();
+  };
+
+  // console.log('letContext',letContext)
   return (
     <>
       {displayRemind
@@ -43,7 +82,7 @@ const LicenseManagementTableActionColumn = ({
           src={Email}
           iconAs={Icon}
           variant="secondary"
-          onClick={() => rowRemindOnClick(user)}
+          onClick={() => remindOnClick(user)}
           disabled={disabled}
         />
       </OverlayTrigger>
@@ -65,12 +104,27 @@ const LicenseManagementTableActionColumn = ({
           style={{ marginLeft: displayRemind ? 0 : 44 }}
           iconAs={Icon}
           variant="danger"
-          onClick={() => rowRevokeOnClick(user)}
+          onClick={() => revokeOnClick(user)}
           disabled={disabled}
         />
       </OverlayTrigger>
       )}
-
+      <LicenseManagementRevokeModal
+        isOpen={revokeModal.isOpen}
+        usersToRevoke={revokeModal.users}
+        subscription={subscription}
+        onClose={() => setRevokeModal(modalZeroState)}
+        onSuccess={handleRevokeSuccess}
+        revokeAllUsers={revokeModal.allUsersSelected}
+      />
+      <LicenseManagementRemindModal
+        isOpen={remindModal.isOpen}
+        usersToRemind={remindModal.users}
+        subscription={subscription}
+        onClose={() => setRemindModal(modalZeroState)}
+        onSuccess={handleRemindSuccess}
+        remindAllUsers={remindModal.allUsersSelected}
+      />
     </>
   );
 };
@@ -80,11 +134,20 @@ LicenseManagementTableActionColumn.defaultProps = {
 };
 
 LicenseManagementTableActionColumn.propTypes = {
+  subscription: PropTypes.shape({
+    uuid: PropTypes.string.isRequired,
+    expirationDate: PropTypes.string.isRequired,
+    isRevocationCapEnabled: PropTypes.bool.isRequired,
+    revocations: PropTypes.shape({
+      applied: PropTypes.number.isRequired,
+      remaining: PropTypes.number.isRequired,
+    }),
+  }).isRequired,
   user: PropTypes.shape({
     status: PropTypes.string.isRequired,
   }).isRequired,
-  rowRemindOnClick: PropTypes.func.isRequired,
-  rowRevokeOnClick: PropTypes.func.isRequired,
+  onRemindSuccess: PropTypes.func.isRequired,
+  onRevokeSuccess: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
 };