fix: Add enabled badge to xpert settings tile (#566)

* feat: Add "Enabled" badge to xpert settings tile

* fix: Update model with state instead of non-existent prop from response

src/pages-and-resources/PagesAndResources.jsx

@@ -9,7 +9,12 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Button, Hyperlink } from '@edx/paragon';
 import messages from './messages';
 import DiscussionsSettings from './discussions';
-import { XpertUnitSummarySettings, fetchXpertPluginConfigurable, appInfo } from './xpert-unit-summary';
+import {
+  XpertUnitSummarySettings,
+  fetchXpertPluginConfigurable,
+  fetchXpertSettings,
+  appInfo as XpertAppInfo,
+} from './xpert-unit-summary';
 
 import PageGrid from './pages/PageGrid';
 import { fetchCourseApps } from './data/thunks';
@@ -19,7 +24,6 @@ import PagesAndResourcesProvider from './PagesAndResourcesProvider';
 import { RequestStatus } from '../data/constants';
 import PermissionDeniedAlert from '../generic/PermissionDeniedAlert';
 
-const permissonPages = [appInfo];
 const PagesAndResources = ({ courseId, intl }) => {
   const { path, url } = useRouteMatch();
 
@@ -27,6 +31,7 @@ const PagesAndResources = ({ courseId, intl }) => {
   useEffect(() => {
     dispatch(fetchCourseApps(courseId));
     dispatch(fetchXpertPluginConfigurable(courseId));
+    dispatch(fetchXpertSettings(courseId));
   }, [courseId]);
 
   const courseAppIds = useSelector(state => state.pagesAndResources.courseAppIds);
@@ -39,6 +44,11 @@ const PagesAndResources = ({ courseId, intl }) => {
   // Each page here is driven by a course app
   const pages = useModels('courseApps', courseAppIds);
   const xpertPluginConfigurable = useModel('XpertSettings.enabled', 'xpert-unit-summary');
+  const xpertSettings = useModel('XpertSettings', 'xpert-unit-summary');
+  const permissonPages = [{
+    ...XpertAppInfo,
+    enabled: xpertSettings?.enabled,
+  }];
 
   if (loadingStatus === RequestStatus.IN_PROGRESS) {
     // eslint-disable-next-line react/jsx-no-useless-fragment

src/pages-and-resources/xpert-unit-summary/data/thunks.js

@@ -10,9 +10,9 @@ export function updateXpertSettings(courseId, state) {
     dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
     try {
       const { response } = await postXpertSettings(courseId, state);
-      const { success, enabled } = response;
+      const { success } = response;
       if (success) {
-        dispatch(updateModel({ modelType: 'XpertSettings', model: { id: 'xpert-unit-summary', enabled } }));
+        dispatch(updateModel({ modelType: 'XpertSettings', model: { id: 'xpert-unit-summary', enabled: state.enabled } }));
         dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
         return true;
       }

src/pages-and-resources/xpert-unit-summary/index.js

@@ -1,9 +1,10 @@
 import XpertUnitSummarySettings from './XpertUnitSummarySettings';
 import appInfo from './appInfo';
-import { fetchXpertPluginConfigurable } from './data/thunks';
+import { fetchXpertPluginConfigurable, fetchXpertSettings } from './data/thunks';
 
 export {
   XpertUnitSummarySettings,
   appInfo,
   fetchXpertPluginConfigurable,
+  fetchXpertSettings,
 };