feat: UI updates around api changes

src/containers/EnterpriseDashboardModal/hooks.js

@@ -9,12 +9,12 @@ export const state = StrictDict({
 
 export const useEnterpriseDashboardHook = () => {
   const [showModal, setShowModal] = module.state.showModal(true);
-  const { mostRecentDashboard } = appHooks.useEnterpriseDashboardData();
+  const dashboard = appHooks.useEnterpriseDashboardData();
   const handleClick = () => setShowModal(false);
   return {
     showModal,
     handleClick,
-    mostRecentDashboard,
+    dashboard,
   };
 };
 

src/containers/EnterpriseDashboardModal/hooks.test.js

@@ -11,9 +11,7 @@ jest.mock('data/redux', () => ({
 
 const state = new MockUseState(hooks);
 
-const enterpriseDashboardData = {
-  mostRecentDashboard: { label: 'edX, Inc.', url: '/edx-dashboard' },
-};
+const enterpriseDashboardData = { label: 'edX, Inc.', url: '/edx-dashboard' };
 
 describe('EnterpriseDashboard hooks', () => {
   appHooks.useEnterpriseDashboardData.mockReturnValue({ ...enterpriseDashboardData });
@@ -32,7 +30,7 @@ describe('EnterpriseDashboard hooks', () => {
     afterEach(state.restore);
 
     test('useEnterpriseDashboardHook to return dashboard data from redux hooks', () => {
-      expect(out.mostRecentDashboard).toMatchObject(enterpriseDashboardData.mostRecentDashboard);
+      expect(out.dashboard).toMatchObject(enterpriseDashboardData);
     });
 
     test('modal initializes to shown when rendered and closes on click', () => {

src/containers/EnterpriseDashboardModal/index.jsx

@@ -14,8 +14,11 @@ export const EnterpriseDashboardModal = () => {
   const {
     showModal,
     handleClick,
-    mostRecentDashboard,
+    dashboard,
   } = useEnterpriseDashboardHook();
+  if (!dashboard) {
+    return null;
+  }
   return (
     <ModalDialog
       isOpen={showModal}
@@ -29,19 +32,19 @@ export const EnterpriseDashboardModal = () => {
       >
         <h4>
           {formatMessage(messages.enterpriseDialogHeader, {
-            label: mostRecentDashboard.label,
+            label: dashboard.label,
           })}
         </h4>
         <p>
           {formatMessage(messages.enterpriseDialogBody, {
-            label: mostRecentDashboard.label,
+            label: dashboard.label,
           })}
         </p>
         <ActionRow>
           <Button variant="tertiary" onClick={handleClick}>
             {formatMessage(messages.enterpriseDialogDismissButton)}
           </Button>
-          <Button type="a" href={mostRecentDashboard.url}>
+          <Button type="a" href={dashboard.url}>
             {formatMessage(messages.enterpriseDialogConfirmButton)}
           </Button>
         </ActionRow>

src/containers/EnterpriseDashboardModal/index.test.jsx

@@ -11,7 +11,7 @@ jest.mock('./hooks', () => ({
 describe('EnterpriseDashboard', () => {
   test('snapshot', () => {
     const hookData = {
-      mostRecentDashboard: { label: 'edX, Inc.', url: '/edx-dashboard' },
+      dashboard: { label: 'edX, Inc.', url: '/edx-dashboard' },
       showDialog: false,
       handleClick: jest.fn().mockName('useEnterpriseDashboardHook.handleClick'),
     };

src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx

@@ -13,7 +13,8 @@ export const AuthenticatedUserDropdown = ({ username }) => {
   const { formatMessage } = useIntl();
   const { authenticatedUser } = React.useContext(AppContext);
   const { profileImage } = authenticatedUser;
-  const { availableDashboards } = appHooks.useEnterpriseDashboardData();
+  const dashboard = appHooks.useEnterpriseDashboardData();
+  console.log({ dashboard });
   return (
     <>
       <Dropdown className="user-dropdown">
@@ -25,7 +26,7 @@ export const AuthenticatedUserDropdown = ({ username }) => {
         <Dropdown.Menu className="dropdown-menu-right">
           <Dropdown.Header>SWITCH DASHBOARD</Dropdown.Header>
           <Dropdown.Item as="a" href="/edx-dashboard" className="active">Personal</Dropdown.Item>
-          {availableDashboards && availableDashboards.map((dashboard) => (
+          {!!dashboard && (
             <Dropdown.Item
               as="a"
               href={dashboard.url}
@@ -33,7 +34,7 @@ export const AuthenticatedUserDropdown = ({ username }) => {
             >
               {dashboard.label} {formatMessage(messages.dashboard)}
             </Dropdown.Item>
-          ))}
+          )}
           <Dropdown.Divider />
           <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>
             {formatMessage(messages.profile)}

src/containers/SelectSessionModal/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export const LEAVE_OPTION = 'leave';

src/containers/SelectSessionModal/hooks.js

@@ -7,6 +7,7 @@ import { StrictDict } from 'utils';
 
 import { hooks as appHooks, thunkActions } from 'data/redux';
 import * as module from './hooks';
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 
 export const state = StrictDict({
@@ -19,6 +20,7 @@ export const useSelectSessionModalData = () => {
   const {
     entitlementessions,
     isFulfilled,
+    uuid,
   } = appHooks.useCardEntitlementData(selectedCardId);
   const { title: courseTitle } = appHooks.useCardCourseData(selectedCardId);
   const { formatMessage } = useIntl();
@@ -38,9 +40,12 @@ export const useSelectSessionModalData = () => {
   const updateCallback = appHooks.useUpdateSelectSessionModalCallback;
 
   const handleSelection = ({ target: { value } }) => setSelectedSession(value);
-  const handleSubmit = () => dispatch(
-    thunkActions.app.updateEntitlementSession(selectedCardId, selectedSession),
-  );
+  const handleSubmit = () => {
+    if (selectedSession === LEAVE_OPTION) {
+      return dispatch(thunkActions.requests.leaveEntitlementSession({ uuid }));
+    }
+    return dispatch(thunkActions.requests.updateEntitlementEnrollment({ uuid, courseId: selectedSession }));
+  };
 
   return {
     showModal: selectedCardId != null,

src/containers/SelectSessionModal/hooks.test.js

@@ -5,6 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { MockUseState } from 'testUtils';
 import { hooks as appHooks, thunkActions } from 'data/redux';
 
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 import * as hooks from './hooks';
 
@@ -23,14 +24,16 @@ jest.mock('data/redux', () => ({
     },
   },
   thunkActions: {
-    app: {
-      updateEntitlementSession: jest.fn((...args) => ({ updateEntitlementSession: args })),
+    requests: {
+      updateEntitlementEnrollment: jest.fn((...args) => ({ updateEntitlementSession: args })),
+      leaveEntitlementSession: jest.fn((...args) => ({ leaveEntitlementSession: args })),
     },
   },
 }));
 
 const state = new MockUseState(hooks);
 const selectedCardId = 'test-selected-card-id';
+const uuid = 'test-uuid';
 
 const selectSessionData = {
   cardId: selectedCardId,
@@ -43,6 +46,7 @@ const entitlementData = {
     { startDate: '3/4/2000', endDate: '3/4/2020', cardId: 'session-id-3' },
   ],
   isFullfilled: false,
+  uuid,
 };
 
 const cardCourseData = {
@@ -107,10 +111,14 @@ describe('SelectSessionModal hooks', () => {
           state.mockVal(state.keys.selectedSession, testValue);
           runHook({});
           expect(out.handleSubmit()).toEqual(dispatch(
-            thunkActions.app.updateEntitlementSession(
-              selectedCardId,
-              testValue,
-            ),
+            thunkActions.requests.updateEntitlementEnrollment({ courseId: testValue, uuid }),
+          ));
+        });
+        it('dispatches leaveEntitlementSession if LEAVE_OPTION is selected', () => {
+          state.mockVal(state.keys.selectedSession, LEAVE_OPTION);
+          runHook({});
+          expect(out.handleSubmit()).toEqual(dispatch(
+            thunkActions.requests.leaveEntitlementSession({ uuid }),
           ));
         });
       });

src/containers/SelectSessionModal/index.jsx

@@ -12,6 +12,7 @@ import { nullMethod } from 'hooks';
 import { dateFormatter } from 'utils';
 
 import useSelectSessionModalData from './hooks';
+import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 
 export const SelectSessionModal = () => {
@@ -53,7 +54,7 @@ export const SelectSessionModal = () => {
             </Form.Radio>
           ))}
           {showLeaveOption && (
-            <Form.Radio value="leave">
+            <Form.Radio value={LEAVE_OPTION}>
               {formatMessage(messages.leaveSessionOption)}
             </Form.Radio>
           )}