@openedx/frontend-app-instructor-dashboard 1.0.0-alpha.0

package/README.rst

@@ -0,0 +1,235 @@
+frontend-app-instructor-dashboard
+#################################
+
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
+
+
+Purpose
+*******
+
+This repository implements a micro-frontend for Instructor Dashboard, providing a seamless 
+and integrated user experience for instructors. It focuses on providing tools and features 
+specifically designed for instructors to track student progress, and facilitate communication with learners.
+
+### What is the domain of this MFE?
+- Course information (Enrollment info, Basic course info, Pending tasks)
+- Membership
+- Cohorts
+- Extensions
+- Student Admin
+- Data Download
+- Special Exams
+- Certificates
+- Open Responses
+
+Getting Started
+***************
+
+After copying the template repository, you'll want to do a find-and-replace to
+replace all instances of ``frontend-app-instructor-dashboard`` with the name of
+your new repository.  Also edit index.html to replace "Application Template"
+with a friendly name for this application that users will see in their browser
+tab.
+
+Prerequisites
+=============
+
+`Tutor`_ is recommended as the development environment for your new frontend
+app.  You can refer to the `relevant tutor-mfe documentation`_ to get started
+using it.
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+Cloning and Startup
+===================
+
+1. Clone your new repo:
+
+  ``git clone https://github.com/openedx/frontend-app-instructor-dashboard.git``
+
+2. Use node v20.x.
+
+   The current version of the micro-frontend build scripts support node 20.
+   Using other major versions of node *may* work, but this is unsupported.  For
+   convenience, this repository includes an .nvmrc file to help in setting the
+   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+3. Install npm dependencies:
+
+  ``cd frontend-app-instructor-dashboard && npm install``
+
+4. Update the application port to use for local development:
+
+   Default port is 8080. If this does not work for you, update the line
+   `PORT=8080` to your port in ``site.config.dev.tsx``.
+
+5. Start the dev server:
+
+  ``npm run dev``
+
+The dev server is running at `http://apps.local.openedx.io:8080 <http://apps.local.openedx.io:8080>`_
+or whatever port you setup.
+
+Project Structure
+=================
+
+The source for this project is organized into nested submodules according to
+the `Feature-based Application Organization ADR`_.
+
+.. _Feature-based Application Organization ADR: https://github.com/openedx/frontend-app-instructor-dashboard/blob/master/docs/decisions/0002-feature-based-application-organization.rst
+
+Internationalization
+====================
+
+Please see refer to the `frontend-base i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-base i18n howto: https://github.com/openedx/frontend-base/blob/master/docs/how_tos/i18n.rst
+
+AlertsProvider
+==============
+
+The AlertsProvider is a centralized alert management system that provides four types of alerts:
+
+**Toast Alerts**
+  Temporary notifications that appear in the corner and auto-dismiss after 5 seconds (customizable).
+
+  .. code-block:: jsx
+
+    import { useAlert } from './providers/AlertProvider';
+
+    const { showToast } = useAlert();
+    showToast('Report generated successfully!', 10000); // 10 second duration
+
+**Modal Alerts**
+  Blocking dialogs that require user action. Supports queuing multiple modals and optional titles.
+
+  .. code-block:: jsx
+
+    import { useAlert } from './providers/AlertProvider';
+
+    const { showModal } = useAlert();
+    showModal({
+      title: 'Delete Report',  // Optional
+      message: 'Are you sure you want to delete this report?',
+      variant: 'danger',  // 'default' | 'success' | 'warning' | 'danger'
+      confirmText: 'Delete',
+      cancelText: 'Cancel',
+      onConfirm: () => console.log('Confirmed'),
+      onCancel: () => console.log('Cancelled'),
+    });
+
+**Standard Alerts (with AlertOutlet)**
+  Drop-in replacement for AlertContext from PR #113. Alerts are rendered via the ``AlertOutlet`` component.
+
+  .. code-block:: jsx
+
+    import { useAlert, AlertOutlet } from './providers/AlertProvider';
+
+    const { addAlert } = useAlert();
+    addAlert({ type: 'success', message: 'Cohort created!' });
+
+    // Place AlertOutlet where you want alerts to appear
+    <AlertOutlet />
+
+**Inline Alerts**
+  Persistent messages you control the rendering for. Useful for form validation or contextual messages.
+
+  .. code-block:: jsx
+
+    import { useAlert } from './providers/AlertProvider';
+
+    const { showInlineAlert, dismissInlineAlert, inlineAlerts } = useAlert();
+    showInlineAlert('This is an inline message', 'info', true);
+
+    // Render inline alerts manually
+    {inlineAlerts.map(alert => (
+      <div key={alert.id}>
+        {alert.message}
+        {alert.dismissible && (
+          <button onClick={() => dismissInlineAlert(alert.id)}>Dismiss</button>
+        )}
+      </div>
+    ))}
+
+Getting Help
+************
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-instructor-dashboard/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/getting-help
+
+License
+*******
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+************
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+The Open edX Code of Conduct
+****************************
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-instructor-dashboard
+
+Reporting Security Issues
+*************************
+
+Please do not report security issues in public, and email security@openedx.org instead.
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-instructor-dashboard.svg
+    :target: https://github.com/openedx/frontend-app-instructor-dashboard/blob/main/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-instructor-dashboard/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-instructor-dashboard/actions/workflows/ci.yml
+    :alt: Continuous Integration
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-instructor-dashboard/coverage.svg?branch=main
+    :target: https://codecov.io/github/openedx/frontend-app-instructor-dashboard?branch=main
+    :alt: Codecov

package/dist/Main.d.ts

@@ -0,0 +1,3 @@
+import './app.scss';
+declare const Main: () => import("react/jsx-runtime").JSX.Element;
+export default Main;

package/dist/Main.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Outlet } from 'react-router-dom';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { AlertProvider } from './providers/AlertProvider';
+import { appId } from './constants';
+import PageWrapper from './pageWrapper/PageWrapper';
+import './app.scss';
+const queryClient = new QueryClient();
+const Main = () => (_jsx(CurrentAppProvider, { appId: appId, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AlertProvider, { children: _jsxs("main", { className: "d-flex flex-column flex-grow-1", children: [_jsx(PageWrapper, { children: _jsx(Outlet, {}) }), getAppConfig(appId).NODE_ENV === 'development' && _jsx(ReactQueryDevtools, { initialIsOpen: false })] }) }) }) }));
+export default Main;
+//# sourceMappingURL=Main.js.map

package/dist/Main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AAEpD,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;AAEtC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC9B,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,aAAa,cACZ,gBAAM,SAAS,EAAC,gCAAgC,aAC9C,KAAC,WAAW,cACV,KAAC,MAAM,KAAG,GACE,EACZ,YAAY,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,aAAa,IAAI,KAAC,kBAAkB,IAAC,aAAa,EAAE,KAAK,GAAI,IAC3F,GACO,GACI,GACH,CACtB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { CurrentAppProvider, getAppConfig } from '@openedx/frontend-base';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { Outlet } from 'react-router-dom';\nimport { ReactQueryDevtools } from '@tanstack/react-query-devtools';\nimport { AlertProvider } from './providers/AlertProvider';\nimport { appId } from './constants';\nimport PageWrapper from './pageWrapper/PageWrapper';\n\nimport './app.scss';\n\nconst queryClient = new QueryClient();\n\nconst Main = () => (\n  <CurrentAppProvider appId={appId}>\n    <QueryClientProvider client={queryClient}>\n      <AlertProvider>\n        <main className=\"d-flex flex-column flex-grow-1\">\n          <PageWrapper>\n            <Outlet />\n          </PageWrapper>\n          { getAppConfig(appId).NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} /> }\n        </main>\n      </AlertProvider>\n    </QueryClientProvider>\n  </CurrentAppProvider>\n);\n\nexport default Main;\n"]}

package/dist/app.d.ts

@@ -0,0 +1,3 @@
+import { App } from '@openedx/frontend-base';
+declare const app: App;
+export default app;

package/dist/app.js

@@ -0,0 +1,18 @@
+import { appId } from './constants';
+import routes from './routes';
+import messages from './i18n';
+import slots from './slots';
+import providers from './providers';
+const app = {
+    appId,
+    routes,
+    messages,
+    providers,
+    slots,
+    config: {
+        NODE_ENV: 'development',
+        LMS_BASE_URL: 'http://local.openedx.io:8000'
+    }
+};
+export default app;
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAEvC,MAAM,GAAG,GAAQ;IACf,KAAK;IACL,MAAM;IACN,QAAQ;IACR,SAAS;IACT,KAAK;IACL,MAAM,EAAE;QACN,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,8BAA8B;KAC7C;CACF,CAAC;AAEF,eAAe,GAAG,CAAC","sourcesContent":["import { App } from '@openedx/frontend-base';\nimport { appId } from '@src/constants';\nimport routes from '@src/routes';\nimport messages from '@src/i18n';\nimport slots from '@src/slots';\nimport providers from '@src/providers';\n\nconst app: App = {\n  appId,\n  routes,\n  messages,\n  providers,\n  slots,\n  config: {\n    NODE_ENV: 'development',\n    LMS_BASE_URL: 'http://local.openedx.io:8000'\n  }\n};\n\nexport default app;\n"]}

package/dist/app.scss

@@ -0,0 +1,10 @@
+@use "@openedx/frontend-base/shell/app.scss";
+
+.toast-container {
+    left: unset;
+    right: var(--pgn-spacing-toast-container-gutter-lg);
+}
+
+.text-prewrap {
+    white-space: pre-wrap;
+}

package/dist/certificates/CertificatesPage.d.ts

@@ -0,0 +1,2 @@
+declare const CertificatesPage: () => import("react/jsx-runtime").JSX.Element;
+export default CertificatesPage;

package/dist/certificates/CertificatesPage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const CertificatesPage = () => {
+    return (_jsx("div", { children: _jsx("h3", { children: "Certificates" }) }));
+};
+export default CertificatesPage;
+//# sourceMappingURL=CertificatesPage.js.map

package/dist/certificates/CertificatesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CertificatesPage.js","sourceRoot":"","sources":["../../src/certificates/CertificatesPage.tsx"],"names":[],"mappings":";AAAA,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,wBACE,wCAAqB,GACjB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["const CertificatesPage = () => {\n  return (\n    <div>\n      <h3>Certificates</h3>\n    </div>\n  );\n};\n\nexport default CertificatesPage;\n"]}

package/dist/cohorts/CohortsPage.d.ts

@@ -0,0 +1,3 @@
+import './CohortsPage.scss';
+declare const CohortsPage: () => import("react/jsx-runtime").JSX.Element;
+export default CohortsPage;

package/dist/cohorts/CohortsPage.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { IconButton } from '@openedx/paragon';
+import { Settings } from '@openedx/paragon/icons';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { CohortProvider, useCohortContext } from '../cohorts/components/CohortContext';
+import DisableCohortsModal from '../cohorts/components/DisableCohortsModal';
+import DisabledCohortsView from '../cohorts/components/DisabledCohortsView';
+import EnabledCohortsView from '../cohorts/components/EnabledCohortsView';
+import { useCohortStatus, useToggleCohorts } from '../cohorts/data/apiHook';
+import messages from '../cohorts/messages';
+import './CohortsPage.scss';
+const CohortsPageContent = () => {
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const { data: cohortStatus } = useCohortStatus(courseId);
+    const { mutate: toggleCohortsMutate } = useToggleCohorts(courseId);
+    const [isOpenDisableModal, setIsOpenDisableModal] = useState(false);
+    const { clearSelectedCohort } = useCohortContext();
+    const { isCohorted = false } = cohortStatus !== null && cohortStatus !== void 0 ? cohortStatus : {};
+    const handleEnableCohorts = () => {
+        toggleCohortsMutate({ isCohorted: true }, {
+            onError: (error) => console.log(error)
+        });
+    };
+    const handleDisableCohorts = () => {
+        toggleCohortsMutate({ isCohorted: false }, {
+            onSuccess: () => clearSelectedCohort(),
+            onError: (error) => console.log(error)
+        });
+        setIsOpenDisableModal(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "d-inline-flex align-items-center", children: [_jsx("h3", { className: "mb-0 text-gray-700", children: intl.formatMessage(messages.cohortsTitle) }), isCohorted && (_jsx("div", { className: "small", children: _jsx(IconButton, { alt: intl.formatMessage(messages.disableCohorts), iconAs: Settings, iconClassNames: "mb-2 text-gray-500", size: "sm", variant: "secondary", onClick: () => setIsOpenDisableModal(true) }) }))] }), isCohorted ? (_jsx(EnabledCohortsView, {})) : (_jsx(DisabledCohortsView, { onEnableCohorts: handleEnableCohorts })), _jsx(DisableCohortsModal, { isOpen: isOpenDisableModal, onClose: () => setIsOpenDisableModal(false), onConfirmDisable: handleDisableCohorts })] }));
+};
+// It was necessary to wrap the entire content with CohortProvider here to avoid errors in the use of cohort hooks within a provider
+const CohortsPage = () => {
+    return (_jsx(CohortProvider, { children: _jsx(CohortsPageContent, {}) }));
+};
+export default CohortsPage;
+//# sourceMappingURL=CohortsPage.js.map

package/dist/cohorts/CohortsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CohortsPage.js","sourceRoot":"","sources":["../../src/cohorts/CohortsPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport { IconButton } from '@openedx/paragon';\nimport { Settings } from '@openedx/paragon/icons';\nimport { useParams } from 'react-router-dom';\nimport { useState } from 'react';\nimport { CohortProvider, useCohortContext } from '@src/cohorts/components/CohortContext';\nimport DisableCohortsModal from '@src/cohorts/components/DisableCohortsModal';\nimport DisabledCohortsView from '@src/cohorts/components/DisabledCohortsView';\nimport EnabledCohortsView from '@src/cohorts/components/EnabledCohortsView';\nimport { useCohortStatus, useToggleCohorts } from '@src/cohorts/data/apiHook';\nimport messages from '@src/cohorts/messages';\nimport './CohortsPage.scss';\n\nconst CohortsPageContent = () => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams();\n  const { data: cohortStatus } = useCohortStatus(courseId);\n  const { mutate: toggleCohortsMutate } = useToggleCohorts(courseId);\n  const [isOpenDisableModal, setIsOpenDisableModal] = useState(false);\n  const { clearSelectedCohort } = useCohortContext();\n  const { isCohorted = false } = cohortStatus ?? {};\n\n  const handleEnableCohorts = () => {\n    toggleCohortsMutate({ isCohorted: true },\n      {\n        onError: (error) => console.log(error)\n      });\n  };\n\n  const handleDisableCohorts = () => {\n    toggleCohortsMutate({ isCohorted: false },\n      {\n        onSuccess: () => clearSelectedCohort(),\n        onError: (error) => console.log(error)\n      });\n    setIsOpenDisableModal(false);\n  };\n\n  return (\n    <>\n      <div className=\"d-inline-flex align-items-center\">\n        <h3 className=\"mb-0 text-gray-700\">{intl.formatMessage(messages.cohortsTitle)}</h3>\n        {isCohorted && (\n          <div className=\"small\">\n            <IconButton\n              alt={intl.formatMessage(messages.disableCohorts)}\n              iconAs={Settings}\n              iconClassNames=\"mb-2 text-gray-500\"\n              size=\"sm\"\n              variant=\"secondary\"\n              onClick={() => setIsOpenDisableModal(true)}\n            />\n          </div>\n        )}\n      </div>\n      {isCohorted ? (\n        <EnabledCohortsView />\n      ) : (\n        <DisabledCohortsView onEnableCohorts={handleEnableCohorts} />\n      )}\n      <DisableCohortsModal isOpen={isOpenDisableModal} onClose={() => setIsOpenDisableModal(false)} onConfirmDisable={handleDisableCohorts} />\n    </>\n  );\n};\n\n// It was necessary to wrap the entire content with CohortProvider here to avoid errors in the use of cohort hooks within a provider\nconst CohortsPage = () => {\n  return (\n    <CohortProvider>\n      <CohortsPageContent />\n    </CohortProvider>\n  );\n};\n\nexport default CohortsPage;\n"]}

package/dist/cohorts/CohortsPage.scss

@@ -0,0 +1,14 @@
+.assignment-tooltip .tooltip-inner {
+  background-color: var(--pgn-color-primary-700);
+  max-width: none;
+}
+
+.collapsible-basic.collapsible-csv {
+  .collapsible-trigger {
+    text-decoration: none;
+  }
+
+  .collapsible-icon {
+    color: var(--pgn-color-info-500);
+  }
+}

package/dist/cohorts/components/CohortCard.d.ts

@@ -0,0 +1,6 @@
+export declare const assignmentLink: {
+    random: string;
+    manual: string;
+};
+declare const CohortCard: () => import("react/jsx-runtime").JSX.Element | null;
+export default CohortCard;

package/dist/cohorts/components/CohortCard.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useRef, useState } from 'react';
+import { FormattedMessage, getExternalLinkUrl, useIntl } from '@openedx/frontend-base';
+import { Card, Hyperlink, Tab, Tabs, Toast } from '@openedx/paragon';
+import messages from '../../cohorts/messages';
+import { usePatchCohort } from '../../cohorts/data/apiHook';
+import CohortsForm from '../../cohorts/components/CohortsForm';
+import ManageLearners from '../../cohorts/components/ManageLearners';
+import { useCohortContext } from '../../cohorts/components/CohortContext';
+import { useAlert } from '../../providers/AlertProvider';
+export const assignmentLink = {
+    random: 'https://docs.openedx.org/en/latest/educators/references/advanced_features/managing_cohort_assignment.html#about-auto-cohorts',
+    manual: 'https://docs.openedx.org/en/latest/educators/how-tos/advanced_features/manage_cohorts.html#assign-learners-to-cohorts-manually',
+};
+const warningMessage = {
+    random: messages.automaticCohortWarning,
+    manual: messages.manualCohortWarning,
+};
+const CohortCard = () => {
+    var _a;
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const { selectedCohort, setSelectedCohort } = useCohortContext();
+    const { mutate: editCohort } = usePatchCohort(courseId);
+    const formRef = useRef(null);
+    const [showSuccessMessage, setShowSuccessMessage] = useState(false);
+    const { clearAlerts, showModal } = useAlert();
+    if (!selectedCohort) {
+        return null;
+    }
+    const handleEditCohort = (updatedCohort) => {
+        clearAlerts();
+        editCohort({ cohortId: selectedCohort.id, cohortInfo: updatedCohort }, {
+            onSuccess: () => {
+                setShowSuccessMessage(true);
+                setSelectedCohort(Object.assign(Object.assign({}, selectedCohort), updatedCohort));
+            },
+            onError: (error) => {
+                showModal({
+                    message: error.message,
+                });
+            }
+        });
+    };
+    const handleCancelForm = () => {
+        var _a;
+        (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "bg-light-200 mt-3", children: [_jsxs("div", { className: "mx-4 my-3.5", children: [_jsxs("div", { className: "d-flex align-items-center", children: [_jsx("h3", { className: "text-primary-700 mb-0", children: selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.name }), _jsx("p", { className: "ml-3 text-primary-700 mb-0", children: intl.formatMessage(messages.studentsOnCohort, { users: (_a = selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.userCount) !== null && _a !== void 0 ? _a : 0 }) })] }), _jsxs("p", { className: "x-small mb-0 mt-2", children: [_jsx(FormattedMessage, Object.assign({}, warningMessage[selectedCohort.assignmentType])), " ", _jsx(Hyperlink, { showLaunchIcon: false, target: "_blank", destination: getExternalLinkUrl(assignmentLink[selectedCohort.assignmentType]), children: intl.formatMessage(messages.warningCohortLink) })] })] }), _jsxs(Tabs, { id: "cohort-management-tabs", className: "mx-0", onSelect: () => { }, children: [_jsx(Tab, { eventKey: "manage-learners", title: intl.formatMessage(messages.manageLearners), children: _jsx(ManageLearners, {}) }, "manage-learners"), _jsx(Tab, { eventKey: "settings", title: intl.formatMessage(messages.settings), children: _jsx(CohortsForm, { ref: formRef, onCancel: handleCancelForm, onSubmit: handleEditCohort }) }, "settings")] })] }), _jsx(Toast, { show: showSuccessMessage, onClose: () => setShowSuccessMessage(false), className: "text-break", children: intl.formatMessage(messages.cohortUpdateSuccessMessage) })] }));
+};
+export default CohortCard;
+//# sourceMappingURL=CohortCard.js.map

package/dist/cohorts/components/CohortCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CohortCard.js","sourceRoot":"","sources":["../../../src/cohorts/components/CohortCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useParams } from 'react-router-dom';\nimport { useRef, useState } from 'react';\nimport { FormattedMessage, getExternalLinkUrl, useIntl } from '@openedx/frontend-base';\nimport { Card, Hyperlink, Tab, Tabs, Toast } from '@openedx/paragon';\nimport messages from '@src/cohorts/messages';\nimport { CohortData } from '@src/cohorts/types';\nimport { usePatchCohort } from '@src/cohorts/data/apiHook';\nimport CohortsForm from '@src/cohorts/components/CohortsForm';\nimport ManageLearners from '@src/cohorts/components/ManageLearners';\nimport { useCohortContext } from '@src/cohorts/components/CohortContext';\nimport { useAlert } from '@src/providers/AlertProvider';\n\nexport const assignmentLink = {\n  random: 'https://docs.openedx.org/en/latest/educators/references/advanced_features/managing_cohort_assignment.html#about-auto-cohorts',\n  manual: 'https://docs.openedx.org/en/latest/educators/how-tos/advanced_features/manage_cohorts.html#assign-learners-to-cohorts-manually',\n};\n\nconst warningMessage = {\n  random: messages.automaticCohortWarning,\n  manual: messages.manualCohortWarning,\n};\n\nconst CohortCard = () => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const { selectedCohort, setSelectedCohort } = useCohortContext();\n  const { mutate: editCohort } = usePatchCohort(courseId);\n  const formRef = useRef<{ resetForm: () => void }>(null);\n  const [showSuccessMessage, setShowSuccessMessage] = useState<boolean>(false);\n  const { clearAlerts, showModal } = useAlert();\n\n  if (!selectedCohort) {\n    return null;\n  }\n\n  const handleEditCohort = (updatedCohort: CohortData) => {\n    clearAlerts();\n    editCohort({ cohortId: selectedCohort.id, cohortInfo: updatedCohort },\n      {\n        onSuccess: () => {\n          setShowSuccessMessage(true);\n          setSelectedCohort({ ...selectedCohort, ...updatedCohort });\n        },\n        onError: (error: Error) => {\n          showModal({\n            message: error.message,\n          });\n        }\n      }\n    );\n  };\n\n  const handleCancelForm = () => {\n    formRef.current?.resetForm();\n  };\n\n  return (\n    <>\n      <Card className=\"bg-light-200 mt-3\">\n        <div className=\"mx-4 my-3.5\">\n          <div className=\"d-flex align-items-center\">\n            <h3 className=\"text-primary-700 mb-0\">{selectedCohort?.name}</h3>\n            <p className=\"ml-3 text-primary-700 mb-0\">{intl.formatMessage(messages.studentsOnCohort, { users: selectedCohort?.userCount ?? 0 })}</p>\n          </div>\n          <p className=\"x-small mb-0 mt-2\">\n            <FormattedMessage {...warningMessage[selectedCohort.assignmentType]} /> <Hyperlink showLaunchIcon={false} target=\"_blank\" destination={getExternalLinkUrl(assignmentLink[selectedCohort.assignmentType])}>{intl.formatMessage(messages.warningCohortLink)}</Hyperlink>\n          </p>\n        </div>\n        <Tabs id=\"cohort-management-tabs\" className=\"mx-0\" onSelect={() => {}}>\n          <Tab key=\"manage-learners\" eventKey=\"manage-learners\" title={intl.formatMessage(messages.manageLearners)}>\n            <ManageLearners />\n          </Tab>\n          <Tab key=\"settings\" eventKey=\"settings\" title={intl.formatMessage(messages.settings)}>\n            <CohortsForm\n              ref={formRef}\n              onCancel={handleCancelForm}\n              onSubmit={handleEditCohort}\n            />\n          </Tab>\n        </Tabs>\n      </Card>\n      <Toast show={showSuccessMessage} onClose={() => setShowSuccessMessage(false)} className=\"text-break\">\n        {intl.formatMessage(messages.cohortUpdateSuccessMessage)}\n      </Toast>\n    </>\n  );\n};\n\nexport default CohortCard;\n"]}

package/dist/cohorts/components/CohortContext.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, FC } from 'react';
+import { CohortData } from '../types';
+interface CohortContextType {
+    selectedCohort: CohortData | null;
+    setSelectedCohort: (cohort: CohortData) => void;
+    clearSelectedCohort: () => void;
+    updateCohortField: (field: keyof CohortData, value: string) => void;
+}
+interface CohortProviderProps {
+    children: ReactNode;
+}
+export declare const CohortProvider: FC<CohortProviderProps>;
+export declare const useCohortContext: () => CohortContextType;
+export {};

package/dist/cohorts/components/CohortContext.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+const CohortContext = createContext(undefined);
+const areCohortsEqual = (prev, current) => {
+    if (!prev)
+        return false;
+    return prev.id === current.id
+        && prev.name === current.name
+        && prev.assignmentType === current.assignmentType
+        && prev.userPartitionId === current.userPartitionId
+        && prev.userCount === current.userCount
+        && prev.groupId === current.groupId;
+};
+export const CohortProvider = ({ children }) => {
+    const [selectedCohort, setSelectedCohortState] = useState(null);
+    const setSelectedCohort = useCallback((cohort) => {
+        setSelectedCohortState(prev => {
+            // Only update if the values actually changed
+            if (!areCohortsEqual(prev, cohort)) {
+                return cohort;
+            }
+            return prev;
+        });
+    }, []);
+    const clearSelectedCohort = useCallback(() => {
+        setSelectedCohortState(null);
+    }, []);
+    const updateCohortField = useCallback((field, value) => {
+        setSelectedCohortState(prev => prev ? Object.assign(Object.assign({}, prev), { [field]: value }) : null);
+    }, []);
+    const value = useMemo(() => ({
+        selectedCohort,
+        setSelectedCohort,
+        clearSelectedCohort,
+        updateCohortField
+    }), [selectedCohort, setSelectedCohort, clearSelectedCohort, updateCohortField]);
+    return (_jsx(CohortContext.Provider, { value: value, children: children }));
+};
+export const useCohortContext = () => {
+    const context = useContext(CohortContext);
+    if (context === undefined) {
+        throw new Error('useCohortContext must be used within a CohortProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=CohortContext.js.map

package/dist/cohorts/components/CohortContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CohortContext.js","sourceRoot":"","sources":["../../../src/cohorts/components/CohortContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAa,WAAW,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AAUjG,MAAM,aAAa,GAAG,aAAa,CAAgC,SAAS,CAAC,CAAC;AAM9E,MAAM,eAAe,GAAG,CAAC,IAAuB,EAAE,OAAmB,EAAW,EAAE;IAChF,IAAI,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IACxB,OAAO,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE;WACxB,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI;WAC1B,IAAI,CAAC,cAAc,KAAK,OAAO,CAAC,cAAc;WAC9C,IAAI,CAAC,eAAe,KAAK,OAAO,CAAC,eAAe;WAChD,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,SAAS;WACpC,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtE,MAAM,CAAC,cAAc,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;IAEnF,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,MAAkB,EAAE,EAAE;QAC3D,sBAAsB,CAAC,IAAI,CAAC,EAAE;YAC5B,6CAA6C;YAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,CAAC;gBACnC,OAAO,MAAM,CAAC;YAChB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,KAAuB,EAAE,KAAa,EAAE,EAAE;QAC/E,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAC5B,IAAI,CAAC,CAAC,iCAAM,IAAI,KAAE,CAAC,KAAK,CAAC,EAAE,KAAK,IAAG,CAAC,CAAC,IAAI,CAC1C,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,cAAc;QACd,iBAAiB;QACjB,mBAAmB;QACnB,iBAAiB;KAClB,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAsB,EAAE;IACtD,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { createContext, useContext, useState, ReactNode, useCallback, FC, useMemo } from 'react';\nimport { CohortData } from '../types';\n\ninterface CohortContextType {\n  selectedCohort: CohortData | null,\n  setSelectedCohort: (cohort: CohortData) => void,\n  clearSelectedCohort: () => void,\n  updateCohortField: (field: keyof CohortData, value: string) => void,\n}\n\nconst CohortContext = createContext<CohortContextType | undefined>(undefined);\n\ninterface CohortProviderProps {\n  children: ReactNode,\n}\n\nconst areCohortsEqual = (prev: CohortData | null, current: CohortData): boolean => {\n  if (!prev) return false;\n  return prev.id === current.id\n    && prev.name === current.name\n    && prev.assignmentType === current.assignmentType\n    && prev.userPartitionId === current.userPartitionId\n    && prev.userCount === current.userCount\n    && prev.groupId === current.groupId;\n};\n\nexport const CohortProvider: FC<CohortProviderProps> = ({ children }) => {\n  const [selectedCohort, setSelectedCohortState] = useState<CohortData | null>(null);\n\n  const setSelectedCohort = useCallback((cohort: CohortData) => {\n    setSelectedCohortState(prev => {\n      // Only update if the values actually changed\n      if (!areCohortsEqual(prev, cohort)) {\n        return cohort;\n      }\n      return prev;\n    });\n  }, []);\n\n  const clearSelectedCohort = useCallback(() => {\n    setSelectedCohortState(null);\n  }, []);\n\n  const updateCohortField = useCallback((field: keyof CohortData, value: string) => {\n    setSelectedCohortState(prev =>\n      prev ? { ...prev, [field]: value } : null\n    );\n  }, []);\n\n  const value = useMemo(() => ({\n    selectedCohort,\n    setSelectedCohort,\n    clearSelectedCohort,\n    updateCohortField\n  }), [selectedCohort, setSelectedCohort, clearSelectedCohort, updateCohortField]);\n\n  return (\n    <CohortContext.Provider value={value}>\n      {children}\n    </CohortContext.Provider>\n  );\n};\n\nexport const useCohortContext = (): CohortContextType => {\n  const context = useContext(CohortContext);\n  if (context === undefined) {\n    throw new Error('useCohortContext must be used within a CohortProvider');\n  }\n  return context;\n};\n"]}

package/dist/cohorts/components/CohortsForm.d.ts

@@ -0,0 +1,11 @@
+import { CohortData } from '../../cohorts/types';
+interface CohortsFormProps {
+    disableManualAssignment?: boolean;
+    onCancel: () => void;
+    onSubmit: (data: Partial<CohortData>) => void;
+}
+export interface CohortsFormRef {
+    resetForm: () => void;
+}
+declare const CohortsForm: import("react").ForwardRefExoticComponent<CohortsFormProps & import("react").RefAttributes<CohortsFormRef>>;
+export default CohortsForm;

package/dist/cohorts/components/CohortsForm.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useState, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
+import { ActionRow, Button, Form, FormControl, FormGroup, FormLabel, FormRadioSet, Hyperlink, Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../../cohorts/messages';
+import { useContentGroupsData } from '../../cohorts/data/apiHook';
+import { Warning } from '@openedx/paragon/icons';
+import { assignmentTypes } from '../../cohorts/constants';
+import { useCohortContext } from '../../cohorts/components/CohortContext';
+const CohortsForm = forwardRef(({ disableManualAssignment = false, onCancel, onSubmit }, ref) => {
+    var _a, _b;
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const { data = { groups: [], id: null, studioContentGroupsLink: '' } } = useContentGroupsData(courseId);
+    const { selectedCohort } = useCohortContext();
+    const initialCohortName = (_a = (selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.name)) !== null && _a !== void 0 ? _a : '';
+    const initialAssignmentType = (_b = selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.assignmentType) !== null && _b !== void 0 ? _b : assignmentTypes.automatic;
+    const initialContentGroupOption = (selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.groupId) ? 'selectContentGroup' : 'noContentGroup';
+    const initialContentGroup = (selectedCohort === null || selectedCohort === void 0 ? void 0 : selectedCohort.groupId) ? selectedCohort.groupId : null;
+    const [selectedContentGroup, setSelectedContentGroup] = useState(initialContentGroup);
+    const [selectedContentGroupOption, setSelectedContentGroupOption] = useState(initialContentGroupOption);
+    const [selectedAssignmentType, setSelectedAssignmentType] = useState(initialAssignmentType);
+    const [name, setName] = useState(initialCohortName);
+    const resetToInitialValues = useCallback(() => {
+        var _a;
+        if (selectedCohort) {
+            setName(selectedCohort.name);
+            setSelectedAssignmentType(selectedCohort.assignmentType);
+            setSelectedContentGroupOption(selectedCohort.groupId ? 'selectContentGroup' : 'noContentGroup');
+            setSelectedContentGroup((_a = selectedCohort.groupId) !== null && _a !== void 0 ? _a : null);
+        }
+    }, [selectedCohort]);
+    useImperativeHandle(ref, () => ({
+        resetForm: resetToInitialValues
+    }));
+    useEffect(() => {
+        resetToInitialValues();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedCohort]);
+    const contentGroups = [{ id: 'null', name: intl.formatMessage(messages.notSelected) }, ...data.groups];
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        onSubmit({
+            name,
+            assignmentType: selectedAssignmentType,
+            groupId: selectedContentGroup,
+            userPartitionId: data.id,
+        });
+    };
+    return (_jsxs(Form, { className: "my-3.5 mx-4", onSubmit: handleSubmit, children: [_jsxs(FormGroup, { className: "w-md-50", children: [_jsx(FormLabel, { className: "text-primary-500", children: intl.formatMessage(messages.cohortName) }), _jsx(FormControl, { value: name, onChange: (e) => setName(e.target.value), placeholder: intl.formatMessage(messages.cohortName) })] }), _jsxs(FormGroup, { children: [_jsx(FormLabel, { className: "text-primary-500", children: intl.formatMessage(messages.cohortAssignmentMethod) }), _jsxs(FormRadioSet, { name: "assignmentType", value: selectedAssignmentType, onChange: (e) => setSelectedAssignmentType(e.target.value), children: [_jsx(Form.Radio, { className: "mb-2", value: assignmentTypes.automatic, children: intl.formatMessage(messages.automatic) }), disableManualAssignment ? (_jsx(OverlayTrigger, { placement: "top", overlay: (_jsx(Tooltip, { id: "manual-assignment-tooltip", className: "assignment-tooltip", children: intl.formatMessage(messages.manualAssignmentDisabledTooltip) })), children: _jsx("span", { children: _jsx(Form.Radio, { disabled: true, value: assignmentTypes.manual, children: intl.formatMessage(messages.manual) }) }) }))
+                                : _jsx(Form.Radio, { value: assignmentTypes.manual, children: intl.formatMessage(messages.manual) })] })] }), _jsxs(FormGroup, { className: "mb-3.5", children: [_jsx(FormLabel, { className: "text-primary-500", children: intl.formatMessage(messages.associatedContentGroup) }), _jsxs(FormRadioSet, { name: "associatedContentGroup", value: selectedContentGroupOption, onChange: (e) => setSelectedContentGroupOption(e.target.value), children: [_jsx(Form.Radio, { value: "noContentGroup", children: intl.formatMessage(messages.noContentGroup) }), _jsxs("div", { className: "d-flex align-items-center", children: [_jsx(Form.Radio, { value: "selectContentGroup", disabled: data.groups.length === 0, children: intl.formatMessage(messages.selectAContentGroup) }), data.groups.length > 0
+                                        ? (_jsx(FormControl, { as: "select", className: "ml-2", size: "sm", disabled: selectedContentGroupOption !== 'selectContentGroup', name: "contentGroup", onChange: (e) => setSelectedContentGroup(Number(e.target.value)), value: selectedContentGroup, children: contentGroups.map((contentGroup) => (_jsx("option", { value: contentGroup.id, children: contentGroup.name }, contentGroup.id))) }))
+                                        : (_jsxs("div", { className: "d-flex align-items-center small", children: [_jsx(Icon, { className: "ml-2 text-danger-500", src: Warning, size: "sm" }), _jsx("p", { className: "mb-0 ml-1 text-danger-500", children: intl.formatMessage(messages.noContentGroups) }), _jsx(Hyperlink, { className: "ml-1", destination: data.studioContentGroupsLink, children: intl.formatMessage(messages.createContentGroup) })] }))] })] })] }), _jsxs(ActionRow, { children: [_jsx(Button, { variant: "tertiary", onClick: onCancel, children: intl.formatMessage(messages.cancelLabel) }), _jsx(Button, { type: "submit", disabled: name.trim() === '', children: intl.formatMessage(messages.saveLabel) })] })] }));
+});
+CohortsForm.displayName = 'CohortsForm';
+export default CohortsForm;
+//# sourceMappingURL=CohortsForm.js.map