@openedx/frontend-app-instructor-dashboard 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/components/PendingTasks.js.map

@@ -1 +1 @@
-{"version":3,"file":"PendingTasks.js","sourceRoot":"","sources":["../../src/components/PendingTasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport { Collapsible, DataTable, Icon, Skeleton } from '@openedx/paragon';\nimport { useMemo } from 'react';\nimport messages from './messages';\nimport { ExpandLess, ExpandMore } from '@openedx/paragon/icons';\nimport { usePendingTasks } from '@src/data/apiHook';\nimport { useParams } from 'react-router';\nimport { ObjectCell } from './ObjectCell';\nimport { PendingTask, TableCellValue } from '@src/types';\n\ninterface PendingTasksProps {\n  isPolling?: boolean,\n}\n\nconst PendingTasks = ({ isPolling = false }: PendingTasksProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams();\n  const { data: tasks, isLoading } = usePendingTasks(courseId, { enablePolling: isPolling });\n\n  const tableColumns = useMemo(() => [\n    { accessor: 'taskType', Header: intl.formatMessage(messages.taskTypeColumnName) },\n    { accessor: 'taskInput', Header: intl.formatMessage(messages.taskInputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskInput} /> },\n    { accessor: 'taskId', Header: intl.formatMessage(messages.taskIdColumnName) },\n    { accessor: 'requester', Header: intl.formatMessage(messages.requesterColumnName) },\n    { accessor: 'taskState', Header: intl.formatMessage(messages.taskStateColumnName) },\n    { accessor: 'created', Header: intl.formatMessage(messages.createdColumnName) },\n    { accessor: 'taskOutput', Header: intl.formatMessage(messages.taskOutputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskOutput} /> },\n    { accessor: 'durationSec', Header: intl.formatMessage(messages.durationColumnName) },\n    { accessor: 'status', Header: intl.formatMessage(messages.statusColumnName) },\n    { accessor: 'taskMessage', Header: intl.formatMessage(messages.taskMessageColumnName) },\n  ], [intl]);\n\n  const renderContent = () => {\n    if (isLoading) {\n      return <Skeleton count={3} />;\n    }\n\n    if (!tasks || tasks?.length === 0) {\n      return <div className=\"my-3\">{intl.formatMessage(messages.noTasksMessage)}</div>;\n    }\n\n    return (\n      <DataTable\n        columns={tableColumns}\n        data={tasks}\n        RowStatusComponent={() => null}\n      />\n    );\n  };\n\n  return (\n    <Collapsible.Advanced\n      className=\"mt-4 pt-4 border-top\"\n      styling=\"basic\"\n    >\n      <Collapsible.Trigger\n        className=\"collapsible-trigger d-flex border-0 align-items-center text-decoration-none\"\n      >\n        <div className=\"d-flex\">\n          <h3 className=\"text-primary-700\">{intl.formatMessage(messages.pendingTasksTitle)}</h3>\n        </div>\n\n        <Collapsible.Visible whenClosed>\n          <div className=\"pl-2 d-flex\">\n            <Icon className=\"text-primary-500\" src={ExpandMore} />\n          </div>\n        </Collapsible.Visible>\n        <Collapsible.Visible whenOpen>\n          <div className=\"pl-2 d-flex\">\n            <Icon className=\"text-primary-500\" src={ExpandLess} />\n          </div>\n        </Collapsible.Visible>\n      </Collapsible.Trigger>\n      <Collapsible.Body>\n        {renderContent() }\n      </Collapsible.Body>\n    </Collapsible.Advanced>\n  );\n};\n\nexport { PendingTasks };\n"]}
+{"version":3,"file":"PendingTasks.js","sourceRoot":"","sources":["../../src/components/PendingTasks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport { Collapsible, DataTable, Icon, Skeleton } from '@openedx/paragon';\nimport { useMemo } from 'react';\nimport messages from './messages';\nimport { ExpandLess, ExpandMore } from '@openedx/paragon/icons';\nimport { usePendingTasks } from '@src/data/apiHook';\nimport { useParams } from 'react-router';\nimport { ObjectCell } from './ObjectCell';\nimport { PendingTask, TableCellValue } from '@src/types';\n\ninterface PendingTasksProps {\n  isPolling?: boolean,\n  isOpen?: boolean,\n  onToggle?: () => void,\n}\n\nconst PendingTasks = ({ isPolling = false, isOpen = false, onToggle }: PendingTasksProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams();\n  const { data: tasks, isLoading } = usePendingTasks(courseId, { enablePolling: isPolling });\n\n  const tableColumns = useMemo(() => [\n    { accessor: 'taskType', Header: intl.formatMessage(messages.taskTypeColumnName) },\n    { accessor: 'taskInput', Header: intl.formatMessage(messages.taskInputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskInput} /> },\n    { accessor: 'taskId', Header: intl.formatMessage(messages.taskIdColumnName) },\n    { accessor: 'requester', Header: intl.formatMessage(messages.requesterColumnName) },\n    { accessor: 'taskState', Header: intl.formatMessage(messages.taskStateColumnName) },\n    { accessor: 'created', Header: intl.formatMessage(messages.createdColumnName) },\n    { accessor: 'taskOutput', Header: intl.formatMessage(messages.taskOutputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskOutput} /> },\n    { accessor: 'durationSec', Header: intl.formatMessage(messages.durationColumnName) },\n    { accessor: 'status', Header: intl.formatMessage(messages.statusColumnName) },\n    { accessor: 'taskMessage', Header: intl.formatMessage(messages.taskMessageColumnName) },\n  ], [intl]);\n\n  const renderContent = () => {\n    if (isLoading) {\n      return <Skeleton count={3} />;\n    }\n\n    if (!tasks || tasks?.length === 0) {\n      return <div className=\"my-3\">{intl.formatMessage(messages.noTasksMessage)}</div>;\n    }\n\n    return (\n      <DataTable\n        columns={tableColumns}\n        data={tasks}\n        RowStatusComponent={() => null}\n      />\n    );\n  };\n\n  const collapsibleProps = onToggle ? { open: isOpen, onToggle } : {};\n\n  return (\n    <Collapsible.Advanced\n      className=\"mt-4 pt-4 border-top\"\n      styling=\"basic\"\n      {...collapsibleProps}\n    >\n      <Collapsible.Trigger\n        className=\"collapsible-trigger d-flex border-0 align-items-center text-decoration-none\"\n      >\n        <div className=\"d-flex\">\n          <h3 className=\"text-primary-700\">{intl.formatMessage(messages.pendingTasksTitle)}</h3>\n        </div>\n\n        <Collapsible.Visible whenClosed>\n          <div className=\"pl-2 d-flex\">\n            <Icon className=\"text-primary-500\" src={ExpandMore} />\n          </div>\n        </Collapsible.Visible>\n        <Collapsible.Visible whenOpen>\n          <div className=\"pl-2 d-flex\">\n            <Icon className=\"text-primary-500\" src={ExpandLess} />\n          </div>\n        </Collapsible.Visible>\n      </Collapsible.Trigger>\n      <Collapsible.Body>\n        {renderContent() }\n      </Collapsible.Body>\n    </Collapsible.Advanced>\n  );\n};\n\nexport { PendingTasks };\n"]}

package/dist/components/SpecifyLearnerField.d.ts

@@ -3,5 +3,8 @@ interface SpecifyLearnerFieldProps {
     learner?: SelectedLearner;
     onClickSelect: (emailOrUsername: string) => void;
 }
-declare const SpecifyLearnerField: ({ learner, onClickSelect }: SpecifyLearnerFieldProps) => import("react/jsx-runtime").JSX.Element;
+interface SpecifyLearnerFieldRef {
+    reset: () => void;
+}
+declare const SpecifyLearnerField: import("react").ForwardRefExoticComponent<SpecifyLearnerFieldProps & import("react").RefAttributes<SpecifyLearnerFieldRef>>;
 export default SpecifyLearnerField;

package/dist/components/SpecifyLearnerField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useImperativeHandle, forwardRef } from 'react';
 import { isAxiosError } from 'axios';
 import { useParams } from 'react-router-dom';
 import { Avatar, Button, FormControl, FormGroup, FormLabel, useToggle } from '@openedx/paragon';
@@ -8,7 +8,7 @@ import { SpinnerIcon } from '@openedx/paragon/icons';
 import { useDebouncedFilter } from '../hooks/useDebouncedFilter';
 import { useCourseInfo, useLearner } from '../data/apiHook';
 import messages from './messages';
-const SpecifyLearnerField = ({ learner, onClickSelect }) => {
+const SpecifyLearnerField = forwardRef(({ learner, onClickSelect }, ref) => {
     var _a;
     const intl = useIntl();
     const { courseId = '' } = useParams();
@@ -16,11 +16,19 @@ const SpecifyLearnerField = ({ learner, onClickSelect }) => {
     const [showLearner, enableShowLearner, disableShowLearner] = useToggle(false);
     const { data: courseInfo } = useCourseInfo(courseId);
     const permissions = (courseInfo === null || courseInfo === void 0 ? void 0 : courseInfo.permissions) || { admin: false, dataResearcher: false };
-    const { inputValue, handleChange } = useDebouncedFilter({
+    const { inputValue, handleChange, resetFilter } = useDebouncedFilter({
         filterValue: identifier,
         setFilter: setIdentifier,
     });
-    const { data = { email: '', fullName: '', username: '' }, refetch, error } = useLearner(courseId, inputValue);
+    const { data = { email: '', fullName: '', username: '', isEnrolled: false }, refetch, error } = useLearner(courseId, inputValue);
+    const resetState = () => {
+        resetFilter();
+        onClickSelect('');
+        disableShowLearner();
+    };
+    useImperativeHandle(ref, () => ({
+        reset: resetState,
+    }));
     const selectedLearner = learner || data;
     const handleInputChange = (event) => {
         handleChange(event.target.value);
@@ -30,15 +38,21 @@ const SpecifyLearnerField = ({ learner, onClickSelect }) => {
     };
     const handleClickSelect = () => {
         if (inputValue) {
-            onClickSelect(inputValue);
-            refetch();
-            enableShowLearner();
+            refetch().then((result) => {
+                var _a;
+                // Need to pass empty value if learner is not valid to clear out any previously selected learner
+                // We could have other conditions/fields depending on valid learner
+                const formValue = !result.error && ((_a = result.data) === null || _a === void 0 ? void 0 : _a.isEnrolled) ? inputValue : '';
+                onClickSelect(formValue);
+                enableShowLearner();
+            });
         }
     };
     return (_jsxs(FormGroup, { className: "mb-0", size: "sm", children: [_jsx(FormLabel, { className: "text-primary-500 d-flex", children: intl.formatMessage(messages.specifyLearner) }), _jsxs("div", { className: "d-flex align-items-center", children: [_jsx(FormControl, { className: `mr-2 ${selectedLearner.username && showLearner ? 'd-none' : ''}`, name: "emailOrUsername", placeholder: intl.formatMessage(messages.specifyLearnerPlaceholder), size: "md", autoResize: true, value: inputValue, onChange: handleInputChange }), selectedLearner.username && showLearner ? (_jsxs(_Fragment, { children: [_jsx(Avatar, { className: "mr-2.5", size: "sm" }), _jsxs("div", { className: "d-flex flex-column mr-3 text-primary-500", children: [_jsx("p", { className: "mb-0", children: selectedLearner.username }), (permissions.admin || permissions.dataResearcher)
-                                        && (_jsxs("div", { className: "d-flex x-small", children: [_jsx("p", { className: "mr-3 mb-0", children: selectedLearner.fullName }), _jsx("p", { className: "mb-0", children: selectedLearner.email })] }))] }), !learner && _jsx(Button, { iconBefore: SpinnerIcon, onClick: disableShowLearner, children: intl.formatMessage(messages.change) })] })) : (_jsx(Button, { onClick: handleClickSelect, disabled: !inputValue, children: intl.formatMessage(messages.select) }))] }), showLearner && error
+                                        && (_jsxs("div", { className: "d-flex x-small", children: [_jsx("p", { className: "mr-3 mb-0", children: selectedLearner.fullName }), _jsx("p", { className: "mb-0", children: selectedLearner.email })] }))] }), !learner && _jsx(Button, { iconBefore: SpinnerIcon, onClick: resetState, children: intl.formatMessage(messages.change) })] })) : (_jsx(Button, { onClick: handleClickSelect, disabled: !inputValue, children: intl.formatMessage(messages.select) }))] }), showLearner && error
                 && isAxiosError(error)
-                && ((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404 && (_jsx("p", { className: "text-danger-500 mb-0 x-small mt-2", children: intl.formatMessage(messages.learnerNotFound, { identifier }) }))] }));
-};
+                && ((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404 && (_jsx("p", { className: "text-danger-500 mb-0 x-small mt-2", children: intl.formatMessage(messages.learnerNotFound, { identifier }) })), showLearner && !error && !(selectedLearner === null || selectedLearner === void 0 ? void 0 : selectedLearner.isEnrolled) && (_jsx("p", { className: "text-danger-500 mb-0 x-small mt-2", children: intl.formatMessage(messages.learnerNotEnrolled, { identifier }) }))] }));
+});
+SpecifyLearnerField.displayName = 'SpecifyLearnerField';
 export default SpecifyLearnerField;
 //# sourceMappingURL=SpecifyLearnerField.js.map

package/dist/components/SpecifyLearnerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpecifyLearnerField.js","sourceRoot":"","sources":["../../src/components/SpecifyLearnerField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ChangeEvent } from 'react';\nimport { isAxiosError } from 'axios';\nimport { useParams } from 'react-router-dom';\nimport { Avatar, Button, FormControl, FormGroup, FormLabel, useToggle } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { SpinnerIcon } from '@openedx/paragon/icons';\nimport { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';\nimport { useCourseInfo, useLearner } from '@src/data/apiHook';\nimport { SelectedLearner } from '@src/types';\nimport messages from './messages';\n\ninterface SpecifyLearnerFieldProps {\n  learner?: SelectedLearner,\n  onClickSelect: (emailOrUsername: string) => void,\n}\n\nconst SpecifyLearnerField = ({ learner, onClickSelect }: SpecifyLearnerFieldProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const [identifier, setIdentifier] = useState('');\n  const [showLearner, enableShowLearner, disableShowLearner] = useToggle(false);\n  const { data: courseInfo } = useCourseInfo(courseId);\n  const permissions = courseInfo?.permissions || { admin: false, dataResearcher: false };\n  const { inputValue, handleChange } = useDebouncedFilter({\n    filterValue: identifier,\n    setFilter: setIdentifier,\n  });\n  const { data = { email: '', fullName: '', username: '' }, refetch, error } = useLearner(courseId, inputValue);\n\n  const selectedLearner = learner || data;\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    handleChange(event.target.value);\n\n    if (showLearner) {\n      disableShowLearner();\n    }\n  };\n\n  const handleClickSelect = () => {\n    if (inputValue) {\n      onClickSelect(inputValue);\n      refetch();\n      enableShowLearner();\n    }\n  };\n\n  return (\n    <FormGroup className=\"mb-0\" size=\"sm\">\n      <FormLabel className=\"text-primary-500 d-flex\">{intl.formatMessage(messages.specifyLearner)}</FormLabel>\n      <div className=\"d-flex align-items-center\">\n        <FormControl\n          className={`mr-2 ${selectedLearner.username && showLearner ? 'd-none' : ''}`}\n          name=\"emailOrUsername\"\n          placeholder={intl.formatMessage(messages.specifyLearnerPlaceholder)}\n          size=\"md\"\n          autoResize\n          value={inputValue}\n          onChange={handleInputChange}\n        />\n        {selectedLearner.username && showLearner ? (\n          <>\n            <Avatar className=\"mr-2.5\" size=\"sm\" />\n            <div className=\"d-flex flex-column mr-3 text-primary-500\">\n              <p className=\"mb-0\">{selectedLearner.username}</p>\n              {(permissions.admin || permissions.dataResearcher)\n              && (\n                <div className=\"d-flex x-small\">\n                  <p className=\"mr-3 mb-0\">{selectedLearner.fullName}</p>\n                  <p className=\"mb-0\">{selectedLearner.email}</p>\n                </div>\n              )}\n            </div>\n            {!learner && <Button iconBefore={SpinnerIcon} onClick={disableShowLearner}>{intl.formatMessage(messages.change)}</Button>}\n          </>\n        ) : (\n          <Button onClick={handleClickSelect} disabled={!inputValue}>{intl.formatMessage(messages.select)}</Button>\n        )}\n      </div>\n      {showLearner && error\n      && isAxiosError(error)\n      && error.response?.status === 404 && (\n        <p className=\"text-danger-500 mb-0 x-small mt-2\">\n          {intl.formatMessage(messages.learnerNotFound, { identifier })}\n        </p>\n      )}\n    </FormGroup>\n  );\n};\n\nexport default SpecifyLearnerField;\n"]}
+{"version":3,"file":"SpecifyLearnerField.js","sourceRoot":"","sources":["../../src/components/SpecifyLearnerField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAe,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAWlC,MAAM,mBAAmB,GAAG,UAAU,CAAmD,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,GAAG,EAAE,EAAE;;IAC3H,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,SAAS,EAAwB,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC9E,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,KAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC;IACvF,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;QACnE,WAAW,EAAE,UAAU;QACvB,SAAS,EAAE,aAAa;KACzB,CAAC,CAAC;IACH,MAAM,EAAE,IAAI,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAEjI,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,WAAW,EAAE,CAAC;QACd,aAAa,CAAC,EAAE,CAAC,CAAC;QAClB,kBAAkB,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,UAAU;KAClB,CAAC,CAAC,CAAC;IAEJ,MAAM,eAAe,GAAG,OAAO,IAAI,IAAI,CAAC;IAExC,MAAM,iBAAiB,GAAG,CAAC,KAAoC,EAAE,EAAE;QACjE,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,WAAW,EAAE,CAAC;YAChB,kBAAkB,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,UAAU,EAAE,CAAC;YACf,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;;gBACxB,gGAAgG;gBAChG,mEAAmE;gBACnE,MAAM,SAAS,GAAG,CAAC,MAAM,CAAC,KAAK,KAAI,MAAA,MAAM,CAAC,IAAI,0CAAE,UAAU,CAAA,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7E,aAAa,CAAC,SAAS,CAAC,CAAC;gBACzB,iBAAiB,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,SAAS,IAAC,SAAS,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,aACnC,KAAC,SAAS,IAAC,SAAS,EAAC,yBAAyB,YAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAa,EACxG,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,WAAW,IACV,SAAS,EAAE,QAAQ,eAAe,CAAC,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAC5E,IAAI,EAAC,iBAAiB,EACtB,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,EACnE,IAAI,EAAC,IAAI,EACT,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,GAC3B,EACD,eAAe,CAAC,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,CACzC,8BACE,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,EACvC,eAAK,SAAS,EAAC,0CAA0C,aACvD,YAAG,SAAS,EAAC,MAAM,YAAE,eAAe,CAAC,QAAQ,GAAK,EACjD,CAAC,WAAW,CAAC,KAAK,IAAI,WAAW,CAAC,cAAc,CAAC;2CAC/C,CACD,eAAK,SAAS,EAAC,gBAAgB,aAC7B,YAAG,SAAS,EAAC,WAAW,YAAE,eAAe,CAAC,QAAQ,GAAK,EACvD,YAAG,SAAS,EAAC,MAAM,YAAE,eAAe,CAAC,KAAK,GAAK,IAC3C,CACP,IACG,EACL,CAAC,OAAO,IAAI,KAAC,MAAM,IAAC,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAU,IAChH,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAAC,UAAU,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAU,CAC1G,IACG,EACL,WAAW,IAAI,KAAK;mBAClB,YAAY,CAAC,KAAK,CAAC;mBACnB,CAAA,MAAA,KAAK,CAAC,QAAQ,0CAAE,MAAM,MAAK,GAAG,IAAI,CACnC,YAAG,SAAS,EAAC,mCAAmC,YAC7C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,CAAC,GAC3D,CACL,EAEC,WAAW,IAAI,CAAC,KAAK,IAAI,CAAC,CAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,UAAU,CAAA,IAAI,CACvD,YAAG,SAAS,EAAC,mCAAmC,YAC7C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,UAAU,EAAE,CAAC,GAC9D,CACL,IAEO,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAExD,eAAe,mBAAmB,CAAC","sourcesContent":["import { useState, ChangeEvent, useImperativeHandle, forwardRef } from 'react';\nimport { isAxiosError } from 'axios';\nimport { useParams } from 'react-router-dom';\nimport { Avatar, Button, FormControl, FormGroup, FormLabel, useToggle } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { SpinnerIcon } from '@openedx/paragon/icons';\nimport { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';\nimport { useCourseInfo, useLearner } from '@src/data/apiHook';\nimport { SelectedLearner } from '@src/types';\nimport messages from './messages';\n\ninterface SpecifyLearnerFieldProps {\n  learner?: SelectedLearner,\n  onClickSelect: (emailOrUsername: string) => void,\n}\n\ninterface SpecifyLearnerFieldRef {\n  reset: () => void,\n}\n\nconst SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFieldProps>(({ learner, onClickSelect }, ref) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const [identifier, setIdentifier] = useState('');\n  const [showLearner, enableShowLearner, disableShowLearner] = useToggle(false);\n  const { data: courseInfo } = useCourseInfo(courseId);\n  const permissions = courseInfo?.permissions || { admin: false, dataResearcher: false };\n  const { inputValue, handleChange, resetFilter } = useDebouncedFilter({\n    filterValue: identifier,\n    setFilter: setIdentifier,\n  });\n  const { data = { email: '', fullName: '', username: '', isEnrolled: false }, refetch, error } = useLearner(courseId, inputValue);\n\n  const resetState = () => {\n    resetFilter();\n    onClickSelect('');\n    disableShowLearner();\n  };\n\n  useImperativeHandle(ref, () => ({\n    reset: resetState,\n  }));\n\n  const selectedLearner = learner || data;\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    handleChange(event.target.value);\n\n    if (showLearner) {\n      disableShowLearner();\n    }\n  };\n\n  const handleClickSelect = () => {\n    if (inputValue) {\n      refetch().then((result) => {\n        // Need to pass empty value if learner is not valid to clear out any previously selected learner\n        // We could have other conditions/fields depending on valid learner\n        const formValue = !result.error && result.data?.isEnrolled ? inputValue : '';\n        onClickSelect(formValue);\n        enableShowLearner();\n      });\n    }\n  };\n\n  return (\n    <FormGroup className=\"mb-0\" size=\"sm\">\n      <FormLabel className=\"text-primary-500 d-flex\">{intl.formatMessage(messages.specifyLearner)}</FormLabel>\n      <div className=\"d-flex align-items-center\">\n        <FormControl\n          className={`mr-2 ${selectedLearner.username && showLearner ? 'd-none' : ''}`}\n          name=\"emailOrUsername\"\n          placeholder={intl.formatMessage(messages.specifyLearnerPlaceholder)}\n          size=\"md\"\n          autoResize\n          value={inputValue}\n          onChange={handleInputChange}\n        />\n        {selectedLearner.username && showLearner ? (\n          <>\n            <Avatar className=\"mr-2.5\" size=\"sm\" />\n            <div className=\"d-flex flex-column mr-3 text-primary-500\">\n              <p className=\"mb-0\">{selectedLearner.username}</p>\n              {(permissions.admin || permissions.dataResearcher)\n              && (\n                <div className=\"d-flex x-small\">\n                  <p className=\"mr-3 mb-0\">{selectedLearner.fullName}</p>\n                  <p className=\"mb-0\">{selectedLearner.email}</p>\n                </div>\n              )}\n            </div>\n            {!learner && <Button iconBefore={SpinnerIcon} onClick={resetState}>{intl.formatMessage(messages.change)}</Button>}\n          </>\n        ) : (\n          <Button onClick={handleClickSelect} disabled={!inputValue}>{intl.formatMessage(messages.select)}</Button>\n        )}\n      </div>\n      {showLearner && error\n      && isAxiosError(error)\n      && error.response?.status === 404 && (\n        <p className=\"text-danger-500 mb-0 x-small mt-2\">\n          {intl.formatMessage(messages.learnerNotFound, { identifier })}\n        </p>\n      )}\n      {\n        showLearner && !error && !selectedLearner?.isEnrolled && (\n          <p className=\"text-danger-500 mb-0 x-small mt-2\">\n            {intl.formatMessage(messages.learnerNotEnrolled, { identifier })}\n          </p>\n        )\n      }\n    </FormGroup>\n  );\n});\n\nSpecifyLearnerField.displayName = 'SpecifyLearnerField';\n\nexport default SpecifyLearnerField;\n"]}

package/dist/components/SpecifyProblemField.d.ts

@@ -0,0 +1,13 @@
+interface SpecifyProblemFieldProps {
+    buttonLabel: string;
+    disabled?: boolean;
+    fieldLabel: string;
+    problemResponsesError?: string;
+    usernameOrEmail?: string;
+    onClickSelect: (problemLocation: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface SpecifyProblemFieldRef {
+    reset: () => void;
+}
+declare const SpecifyProblemField: import("react").ForwardRefExoticComponent<SpecifyProblemFieldProps & import("react").RefAttributes<SpecifyProblemFieldRef>>;
+export default SpecifyProblemField;

package/dist/components/SpecifyProblemField.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useImperativeHandle, forwardRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Form, Icon, OverlayTrigger, Tooltip, useToggle } from '@openedx/paragon';
+import { InfoOutline, SpinnerIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import { useDebouncedFilter } from '../hooks/useDebouncedFilter';
+import { useProblemDetails } from '../data/apiHook';
+const SpecifyProblemField = forwardRef(({ buttonLabel, disabled, fieldLabel, problemResponsesError, usernameOrEmail = '', onClickSelect, }, ref) => {
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const [problemLocation, setProblemLocation] = useState('');
+    const [showSelectedLocation, enableShowSelectedLocation, disableShowSelectedLocation] = useToggle(false);
+    const { inputValue, handleChange, resetFilter } = useDebouncedFilter({
+        filterValue: problemLocation,
+        setFilter: setProblemLocation,
+    });
+    const { data = { breadcrumbs: [], name: '', id: '' }, refetch } = useProblemDetails(courseId, inputValue, usernameOrEmail);
+    useImperativeHandle(ref, () => ({
+        reset: () => {
+            resetFilter();
+            disableShowSelectedLocation();
+        }
+    }));
+    const handleInputChange = (e) => {
+        handleChange(e.target.value);
+        if (showSelectedLocation) {
+            disableShowSelectedLocation();
+        }
+    };
+    const handleClick = (event) => {
+        refetch().then(() => {
+            onClickSelect(inputValue, event);
+            enableShowSelectedLocation();
+        });
+    };
+    return (_jsxs(Form.Group, { className: "mb-0", isInvalid: !!problemResponsesError, size: "sm", children: [_jsx(Form.Label, { className: "d-flex align-content-end align-items-center gap-2 text-primary-500", children: showSelectedLocation ? intl.formatMessage(messages.selectedProblem)
+                    : (_jsxs(_Fragment, { children: [fieldLabel, _jsx(OverlayTrigger, { placement: "top", overlay: (_jsx(Tooltip, { id: "problem-location-tooltip", className: "info-tooltip", children: intl.formatMessage(messages.problemLocationTooltip) })), children: _jsx(Icon, { src: InfoOutline, size: "sm", "aria-label": intl.formatMessage(messages.problemLocationInfoIconLabel) }) })] })) }), _jsx("div", { className: "d-flex align-items-center", children: showSelectedLocation && data ? (_jsxs("div", { className: "d-flex gap-3 align-items-center col-8 p-0", children: [_jsxs("div", { className: "d-block w-100", children: [_jsx("p", { className: "x-small mb-0 text-primary-500 text-truncate", children: data.breadcrumbs
+                                        .slice(1, -1)
+                                        .map(breadcrumb => breadcrumb.displayName)
+                                        .join(' > ') }), _jsx("p", { className: "text-primary-500 mb-0", children: data.name }), _jsx("p", { className: "x-small text-gray-700 text-truncate mb-0", children: data.id })] }), _jsx(Button, { iconBefore: SpinnerIcon, onClick: disableShowSelectedLocation, children: intl.formatMessage(messages.change) })] })) : (_jsxs(_Fragment, { children: [_jsx(Form.Control, { type: "text", placeholder: intl.formatMessage(messages.problemLocationPlaceholder), value: inputValue, onChange: handleInputChange, className: "flex-grow-1", size: "md" }), problemResponsesError && (_jsx(Form.Control.Feedback, { type: "invalid", children: problemResponsesError })), _jsx(Button, { variant: "primary", onClick: handleClick, disabled: disabled || !inputValue, className: "text-nowrap", children: buttonLabel })] })) })] }));
+});
+SpecifyProblemField.displayName = 'SpecifyProblemField';
+export default SpecifyProblemField;
+//# sourceMappingURL=SpecifyProblemField.js.map

package/dist/components/SpecifyProblemField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpecifyProblemField.js","sourceRoot":"","sources":["../../src/components/SpecifyProblemField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAetD,MAAM,mBAAmB,GAAG,UAAU,CAAmD,CAAC,EACxF,WAAW,EACX,QAAQ,EACR,UAAU,EACV,qBAAqB,EACrB,eAAe,GAAG,EAAE,EACpB,aAAa,GACd,EAAE,GAAG,EAAE,EAAE;IACR,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,SAAS,EAAwB,CAAC;IAC5D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,oBAAoB,EAAE,0BAA0B,EAAE,2BAA2B,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAEzG,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;QACnE,WAAW,EAAE,eAAe;QAC5B,SAAS,EAAE,kBAAkB;KAC9B,CAAC,CAAC;IACH,MAAM,EAAE,IAAI,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,QAAQ,EAAE,UAAU,EAAE,eAAe,CAAC,CAAC;IAE3H,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;YACd,2BAA2B,EAAE,CAAC;QAChC,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE7B,IAAI,oBAAoB,EAAE,CAAC;YACzB,2BAA2B,EAAE,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAClB,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;YACjC,0BAA0B,EAAE,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,EAAE,IAAI,EAAC,IAAI,aACxE,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,oEAAoE,YACvF,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC;oBAClE,CAAC,CAAC,CACE,8BACG,UAAU,EACX,KAAC,cAAc,IACb,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,CACP,KAAC,OAAO,IAAC,EAAE,EAAC,0BAA0B,EAAC,SAAS,EAAC,cAAc,YAC5D,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,sBAAsB,CAAC,GAC5C,CACX,YAED,KAAC,IAAI,IAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,IAAI,gBAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,GAAI,GAC5F,IAChB,CACJ,GACM,EACb,cAAK,SAAS,EAAC,2BAA2B,YACvC,oBAAoB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC9B,eAAK,SAAS,EAAC,2CAA2C,aACxD,eAAK,SAAS,EAAC,eAAe,aAC5B,YAAG,SAAS,EAAC,6CAA6C,YACvD,IAAI,CAAC,WAAW;yCACd,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;yCACZ,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC;yCACzC,IAAI,CAAC,KAAK,CAAC,GACZ,EACJ,YAAG,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,IAAI,GAAK,EACpD,YAAG,SAAS,EAAC,0CAA0C,YAAE,IAAI,CAAC,EAAE,GAAK,IACjE,EACN,KAAC,MAAM,IAAC,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,2BAA2B,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAU,IACjH,CACP,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,CAAC,OAAO,IACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,EACpE,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,aAAa,EACvB,IAAI,EAAC,IAAI,GACT,EACD,qBAAqB,IAAI,CACxB,KAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAC,IAAI,EAAC,SAAS,YAClC,qBAAqB,GACA,CACzB,EACD,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,IAAI,CAAC,UAAU,EACjC,SAAS,EAAC,aAAa,YAEtB,WAAW,GACL,IACR,CACJ,GACG,IACK,CACd,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAExD,eAAe,mBAAmB,CAAC","sourcesContent":["import { useState, useImperativeHandle, forwardRef } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { Button, Form, Icon, OverlayTrigger, Tooltip, useToggle } from '@openedx/paragon';\nimport { InfoOutline, SpinnerIcon } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';\nimport { useProblemDetails } from '@src/data/apiHook';\n\ninterface SpecifyProblemFieldProps {\n  buttonLabel: string,\n  disabled?: boolean,\n  fieldLabel: string,\n  problemResponsesError?: string,\n  usernameOrEmail?: string,\n  onClickSelect: (problemLocation: string, event: React.MouseEvent<HTMLButtonElement>) => void,\n}\n\ninterface SpecifyProblemFieldRef {\n  reset: () => void,\n}\n\nconst SpecifyProblemField = forwardRef<SpecifyProblemFieldRef, SpecifyProblemFieldProps>(({\n  buttonLabel,\n  disabled,\n  fieldLabel,\n  problemResponsesError,\n  usernameOrEmail = '',\n  onClickSelect,\n}, ref) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const [problemLocation, setProblemLocation] = useState('');\n  const [showSelectedLocation, enableShowSelectedLocation, disableShowSelectedLocation] = useToggle(false);\n\n  const { inputValue, handleChange, resetFilter } = useDebouncedFilter({\n    filterValue: problemLocation,\n    setFilter: setProblemLocation,\n  });\n  const { data = { breadcrumbs: [], name: '', id: '' }, refetch } = useProblemDetails(courseId, inputValue, usernameOrEmail);\n\n  useImperativeHandle(ref, () => ({\n    reset: () => {\n      resetFilter();\n      disableShowSelectedLocation();\n    }\n  }));\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    handleChange(e.target.value);\n\n    if (showSelectedLocation) {\n      disableShowSelectedLocation();\n    }\n  };\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    refetch().then(() => {\n      onClickSelect(inputValue, event);\n      enableShowSelectedLocation();\n    });\n  };\n\n  return (\n    <Form.Group className=\"mb-0\" isInvalid={!!problemResponsesError} size=\"sm\">\n      <Form.Label className=\"d-flex align-content-end align-items-center gap-2 text-primary-500\">\n        {showSelectedLocation ? intl.formatMessage(messages.selectedProblem)\n          : (\n              <>\n                {fieldLabel}\n                <OverlayTrigger\n                  placement=\"top\"\n                  overlay={(\n                    <Tooltip id=\"problem-location-tooltip\" className=\"info-tooltip\">\n                      {intl.formatMessage(messages.problemLocationTooltip)}\n                    </Tooltip>\n                  )}\n                >\n                  <Icon src={InfoOutline} size=\"sm\" aria-label={intl.formatMessage(messages.problemLocationInfoIconLabel)} />\n                </OverlayTrigger>\n              </>\n            )}\n      </Form.Label>\n      <div className=\"d-flex align-items-center\">\n        {showSelectedLocation && data ? (\n          <div className=\"d-flex gap-3 align-items-center col-8 p-0\">\n            <div className=\"d-block w-100\">\n              <p className=\"x-small mb-0 text-primary-500 text-truncate\">\n                {data.breadcrumbs\n                  .slice(1, -1)\n                  .map(breadcrumb => breadcrumb.displayName)\n                  .join(' > ')}\n              </p>\n              <p className=\"text-primary-500 mb-0\">{data.name}</p>\n              <p className=\"x-small text-gray-700 text-truncate mb-0\">{data.id}</p>\n            </div>\n            <Button iconBefore={SpinnerIcon} onClick={disableShowSelectedLocation}>{intl.formatMessage(messages.change)}</Button>\n          </div>\n        ) : (\n          <>\n            <Form.Control\n              type=\"text\"\n              placeholder={intl.formatMessage(messages.problemLocationPlaceholder)}\n              value={inputValue}\n              onChange={handleInputChange}\n              className=\"flex-grow-1\"\n              size=\"md\"\n            />\n            {problemResponsesError && (\n              <Form.Control.Feedback type=\"invalid\">\n                {problemResponsesError}\n              </Form.Control.Feedback>\n            )}\n            <Button\n              variant=\"primary\"\n              onClick={handleClick}\n              disabled={disabled || !inputValue}\n              className=\"text-nowrap\"\n            >\n              {buttonLabel}\n            </Button>\n          </>\n        )}\n      </div>\n    </Form.Group>\n  );\n});\n\nSpecifyProblemField.displayName = 'SpecifyProblemField';\n\nexport default SpecifyProblemField;\n"]}

package/dist/components/UsernameFilter.d.ts

@@ -0,0 +1,7 @@
+declare const UsernameFilter: ({ column: { filterValue, setFilter } }: {
+    column: {
+        filterValue: string;
+        setFilter: (value: string) => void;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default UsernameFilter;

package/dist/components/UsernameFilter.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { FormControl, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import { useDebouncedFilter } from '../hooks/useDebouncedFilter';
+import messages from '../components/messages';
+const UsernameFilter = ({ column: { filterValue, setFilter } }) => {
+    const intl = useIntl();
+    const { inputValue, handleChange } = useDebouncedFilter({
+        filterValue,
+        setFilter,
+    });
+    const handleInputChange = (e) => {
+        handleChange(e.target.value);
+    };
+    return (_jsx(FormControl, { className: "mb-0 username", onChange: handleInputChange, placeholder: intl.formatMessage(messages.searchPlaceholder), trailingElement: _jsx(Icon, { src: Search }), value: inputValue }));
+};
+export default UsernameFilter;
+//# sourceMappingURL=UsernameFilter.js.map

package/dist/components/UsernameFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsernameFilter.js","sourceRoot":"","sources":["../../src/components/UsernameFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAEhD,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAA2E,EAAE,EAAE;IACzI,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,kBAAkB,CAAC;QACtD,WAAW;QACX,SAAS;KACV,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EAAC,eAAe,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAC3D,eAAe,EAAE,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,GAAI,EACtC,KAAK,EAAE,UAAU,GACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport { FormControl, Icon } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';\nimport messages from '@src/components/messages';\n\nconst UsernameFilter = ({ column: { filterValue, setFilter } }: { column: { filterValue: string, setFilter: (value: string) => void } }) => {\n  const intl = useIntl();\n  const { inputValue, handleChange } = useDebouncedFilter({\n    filterValue,\n    setFilter,\n  });\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    handleChange(e.target.value);\n  };\n\n  return (\n    <FormControl\n      className=\"mb-0 username\"\n      onChange={handleInputChange}\n      placeholder={intl.formatMessage(messages.searchPlaceholder)}\n      trailingElement={<Icon src={Search} />}\n      value={inputValue}\n    />\n  );\n};\n\nexport default UsernameFilter;\n"]}

package/dist/components/messages.d.ts

@@ -114,5 +114,35 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    searchPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    problemLocationPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    problemLocationInfoIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    problemLocationTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    selectedProblem: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    learnerNotEnrolled: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/components/messages.js

@@ -115,6 +115,36 @@ const messages = defineMessages({
         defaultMessage: 'Could not find student matching identifier: {identifier}',
         description: 'Error message displayed when a learner cannot be found based on the provided identifier (email or username)',
     },
+    searchPlaceholder: {
+        id: 'instruct.usernameFilter.searchPlaceholder',
+        defaultMessage: 'Search By Username or Email',
+        description: 'Placeholder text for the username filter input',
+    },
+    problemLocationPlaceholder: {
+        id: 'instruct.specifyProblemField.locationPlaceholder',
+        defaultMessage: 'Problem location',
+        description: 'Placeholder text for problem location input',
+    },
+    problemLocationInfoIconLabel: {
+        id: 'instruct.specifyProblemField.infoIconLabel',
+        defaultMessage: 'Example format for problem location',
+        description: 'Aria label for the info icon next to the problem location input',
+    },
+    problemLocationTooltip: {
+        id: 'instruct.specifyProblemField.locationTooltip',
+        defaultMessage: 'Example: block-v1:edX+DemoX+2015+type@problem+block@618c5933b8b544e4a4cc103d3e508378',
+        description: 'Tooltip text showing an example problem location format',
+    },
+    selectedProblem: {
+        id: 'instruct.specifyProblemField.selectedProblem',
+        defaultMessage: 'Selected Problem:',
+        description: 'Label for specify problem field when a problem has been selected',
+    },
+    learnerNotEnrolled: {
+        id: 'instruct.specifyLearner.learnerNotEnrolled',
+        defaultMessage: '{identifier} is not enrolled in this course',
+        description: 'Error message displayed when a learner is found based on the provided identifier (email or username) but is not enrolled in the course',
+    }
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

package/dist/components/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../src/components/messages.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  select: {\n    id: 'instruct.specifyLearner.select',\n    defaultMessage: 'Select',\n    description: 'Label for select dropdown in specify learner field',\n  },\n  specifyLearner: {\n    id: 'instruct.specifyLearner.label',\n    defaultMessage: 'Specify Learner:',\n    description: 'Label for specify learner field',\n  },\n  specifyLearnerPlaceholder: {\n    id: 'instruct.specifyLearner.placeholder',\n    defaultMessage: 'Learner email address or username',\n    description: 'Placeholder text for specify learner input field',\n  },\n  pageNotFoundHeader: {\n    id: 'instruct.pageNotFound.header',\n    defaultMessage: 'Page not found',\n    description: 'Header for page not found error',\n  },\n  pageNotFoundBody: {\n    id: 'instruct.pageNotFound.body',\n    defaultMessage: \"The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.\",\n    description: 'Body text for page not found error',\n  },\n  pendingTasksTitle: {\n    id: 'instruct.pendingTasks.section.title',\n    defaultMessage: 'Pending Tasks',\n    description: 'Title for the pending tasks section',\n  },\n  noTasksMessage: {\n    id: 'instruct.pendingTasks.section.noTasks',\n    defaultMessage: 'No tasks currently running.',\n    description: 'Message displayed when there are no pending tasks',\n  },\n  taskTypeColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskType',\n    defaultMessage: 'Task Type',\n    description: 'Column name for task type in pending tasks table',\n  },\n  taskInputColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskInput',\n    defaultMessage: 'Task Input',\n    description: 'Column name for task input in pending tasks table',\n  },\n  taskIdColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskId',\n    defaultMessage: 'Task ID',\n    description: 'Column name for task ID in pending tasks table',\n  },\n  requesterColumnName: {\n    id: 'instruct.pendingTasks.table.column.requester',\n    defaultMessage: 'Requester',\n    description: 'Column name for requester in pending tasks table',\n  },\n  taskStateColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskState',\n    defaultMessage: 'Task State',\n    description: 'Column name for task state in pending tasks table',\n  },\n  createdColumnName: {\n    id: 'instruct.pendingTasks.table.column.created',\n    defaultMessage: 'Created',\n    description: 'Column name for created date in pending tasks table',\n  },\n  taskOutputColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskOutput',\n    defaultMessage: 'Task Output',\n    description: 'Column name for task output in pending tasks table',\n  },\n  durationColumnName: {\n    id: 'instruct.pendingTasks.table.column.duration',\n    defaultMessage: 'Duration (sec)',\n    description: 'Column name for duration in pending tasks table',\n  },\n  statusColumnName: {\n    id: 'instruct.pendingTasks.table.column.status',\n    defaultMessage: 'Status',\n    description: 'Column name for status in pending tasks table',\n  },\n  taskMessageColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskMessage',\n    defaultMessage: 'Task Message',\n    description: 'Column name for task message in pending tasks table',\n  },\n  downloadCSVTitle: {\n    id: 'instruct.csvComponent.downloadCSVTitle',\n    defaultMessage: 'Upload CSV File',\n    description: 'Title for the upload CSV file section'\n  },\n  downloadCSVDescription: {\n    id: 'instruct.csvComponent.downloadCSVDescription',\n    defaultMessage: 'Only properly formatted CSV files will be accepted',\n    description: 'Description for the upload CSV file section'\n  },\n  viewCSVTemplate: {\n    id: 'instruct.csvComponent.viewCSVTemplate',\n    defaultMessage: 'View Template',\n    description: 'Label for the view CSV template link'\n  },\n  uploadingFileMessage: {\n    id: 'instruct.csvComponent.uploadingFileMessage',\n    defaultMessage: 'File chosen: {fileName}',\n    description: 'Message displayed when a file is being uploaded, with the file name included'\n  },\n  change: {\n    id: 'instruct.specifyLearner.change',\n    defaultMessage: 'Change',\n    description: 'Label for change button in specify learner field',\n  },\n  learnerNotFound: {\n    id: 'instruct.specifyLearner.learnerNotFound',\n    defaultMessage: 'Could not find student matching identifier: {identifier}',\n    description: 'Error message displayed when a learner cannot be found based on the provided identifier (email or username)',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../src/components/messages.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  select: {\n    id: 'instruct.specifyLearner.select',\n    defaultMessage: 'Select',\n    description: 'Label for select dropdown in specify learner field',\n  },\n  specifyLearner: {\n    id: 'instruct.specifyLearner.label',\n    defaultMessage: 'Specify Learner:',\n    description: 'Label for specify learner field',\n  },\n  specifyLearnerPlaceholder: {\n    id: 'instruct.specifyLearner.placeholder',\n    defaultMessage: 'Learner email address or username',\n    description: 'Placeholder text for specify learner input field',\n  },\n  pageNotFoundHeader: {\n    id: 'instruct.pageNotFound.header',\n    defaultMessage: 'Page not found',\n    description: 'Header for page not found error',\n  },\n  pageNotFoundBody: {\n    id: 'instruct.pageNotFound.body',\n    defaultMessage: \"The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.\",\n    description: 'Body text for page not found error',\n  },\n  pendingTasksTitle: {\n    id: 'instruct.pendingTasks.section.title',\n    defaultMessage: 'Pending Tasks',\n    description: 'Title for the pending tasks section',\n  },\n  noTasksMessage: {\n    id: 'instruct.pendingTasks.section.noTasks',\n    defaultMessage: 'No tasks currently running.',\n    description: 'Message displayed when there are no pending tasks',\n  },\n  taskTypeColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskType',\n    defaultMessage: 'Task Type',\n    description: 'Column name for task type in pending tasks table',\n  },\n  taskInputColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskInput',\n    defaultMessage: 'Task Input',\n    description: 'Column name for task input in pending tasks table',\n  },\n  taskIdColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskId',\n    defaultMessage: 'Task ID',\n    description: 'Column name for task ID in pending tasks table',\n  },\n  requesterColumnName: {\n    id: 'instruct.pendingTasks.table.column.requester',\n    defaultMessage: 'Requester',\n    description: 'Column name for requester in pending tasks table',\n  },\n  taskStateColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskState',\n    defaultMessage: 'Task State',\n    description: 'Column name for task state in pending tasks table',\n  },\n  createdColumnName: {\n    id: 'instruct.pendingTasks.table.column.created',\n    defaultMessage: 'Created',\n    description: 'Column name for created date in pending tasks table',\n  },\n  taskOutputColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskOutput',\n    defaultMessage: 'Task Output',\n    description: 'Column name for task output in pending tasks table',\n  },\n  durationColumnName: {\n    id: 'instruct.pendingTasks.table.column.duration',\n    defaultMessage: 'Duration (sec)',\n    description: 'Column name for duration in pending tasks table',\n  },\n  statusColumnName: {\n    id: 'instruct.pendingTasks.table.column.status',\n    defaultMessage: 'Status',\n    description: 'Column name for status in pending tasks table',\n  },\n  taskMessageColumnName: {\n    id: 'instruct.pendingTasks.table.column.taskMessage',\n    defaultMessage: 'Task Message',\n    description: 'Column name for task message in pending tasks table',\n  },\n  downloadCSVTitle: {\n    id: 'instruct.csvComponent.downloadCSVTitle',\n    defaultMessage: 'Upload CSV File',\n    description: 'Title for the upload CSV file section'\n  },\n  downloadCSVDescription: {\n    id: 'instruct.csvComponent.downloadCSVDescription',\n    defaultMessage: 'Only properly formatted CSV files will be accepted',\n    description: 'Description for the upload CSV file section'\n  },\n  viewCSVTemplate: {\n    id: 'instruct.csvComponent.viewCSVTemplate',\n    defaultMessage: 'View Template',\n    description: 'Label for the view CSV template link'\n  },\n  uploadingFileMessage: {\n    id: 'instruct.csvComponent.uploadingFileMessage',\n    defaultMessage: 'File chosen: {fileName}',\n    description: 'Message displayed when a file is being uploaded, with the file name included'\n  },\n  change: {\n    id: 'instruct.specifyLearner.change',\n    defaultMessage: 'Change',\n    description: 'Label for change button in specify learner field',\n  },\n  learnerNotFound: {\n    id: 'instruct.specifyLearner.learnerNotFound',\n    defaultMessage: 'Could not find student matching identifier: {identifier}',\n    description: 'Error message displayed when a learner cannot be found based on the provided identifier (email or username)',\n  },\n  searchPlaceholder: {\n    id: 'instruct.usernameFilter.searchPlaceholder',\n    defaultMessage: 'Search By Username or Email',\n    description: 'Placeholder text for the username filter input',\n  },\n  problemLocationPlaceholder: {\n    id: 'instruct.specifyProblemField.locationPlaceholder',\n    defaultMessage: 'Problem location',\n    description: 'Placeholder text for problem location input',\n  },\n  problemLocationInfoIconLabel: {\n    id: 'instruct.specifyProblemField.infoIconLabel',\n    defaultMessage: 'Example format for problem location',\n    description: 'Aria label for the info icon next to the problem location input',\n  },\n  problemLocationTooltip: {\n    id: 'instruct.specifyProblemField.locationTooltip',\n    defaultMessage: 'Example: block-v1:edX+DemoX+2015+type@problem+block@618c5933b8b544e4a4cc103d3e508378',\n    description: 'Tooltip text showing an example problem location format',\n  },\n  selectedProblem: {\n    id: 'instruct.specifyProblemField.selectedProblem',\n    defaultMessage: 'Selected Problem:',\n    description: 'Label for specify problem field when a problem has been selected',\n  },\n  learnerNotEnrolled: {\n    id: 'instruct.specifyLearner.learnerNotEnrolled',\n    defaultMessage: '{identifier} is not enrolled in this course',\n    description: 'Error message displayed when a learner is found based on the provided identifier (email or username) but is not enrolled in the course',\n  }\n});\n\nexport default messages;\n"]}

package/dist/constants.d.ts

@@ -1 +1,2 @@
-export declare const appId = "org.openedx.frontend.app.instructor";
+export declare const appId = "org.openedx.frontend.app.instructorDashboard";
+export declare const instructorDashboardRole = "org.openedx.frontend.role.instructorDashboard";

package/dist/constants.js

@@ -1,2 +1,3 @@
-export const appId = 'org.openedx.frontend.app.instructor';
+export const appId = 'org.openedx.frontend.app.instructorDashboard';
+export const instructorDashboardRole = 'org.openedx.frontend.role.instructorDashboard';
 //# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,qCAAqC,CAAC","sourcesContent":["export const appId = 'org.openedx.frontend.app.instructor';\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,8CAA8C,CAAC;AACpE,MAAM,CAAC,MAAM,uBAAuB,GAAG,+CAA+C,CAAC","sourcesContent":["export const appId = 'org.openedx.frontend.app.instructorDashboard';\nexport const instructorDashboardRole = 'org.openedx.frontend.role.instructorDashboard';\n"]}

package/dist/courseInfo/types.d.ts

@@ -25,6 +25,8 @@ export interface CourseInfoResponse {
         dataResearcher: boolean;
         [key: string]: boolean;
     };
+    gradebookUrl: string;
+    studioGradingUrl?: string;
 }
 interface EnrollmentCounts extends Record<string, number> {
     total: number;

package/dist/courseInfo/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/courseInfo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TabProps } from '@src/instructorNav/InstructorNav';\n\nexport interface CourseInfoResponse {\n  courseId: string,\n  displayName: string,\n  courseNumber: string,\n  courseRun: string,\n  enrollmentCounts: EnrollmentCounts,\n  start: string | null,\n  end: string | null,\n  tabs?: TabProps[],\n  totalEnrollment: number,\n  studioUrl: string,\n  pacing: string,\n  org?: string,\n  numSections: number,\n  hasStarted: boolean,\n  hasEnded: boolean,\n  enrollmentEnd: string | null,\n  enrollmentStart: string | null,\n  gradeCutoffs: string | null,\n  staffCount: number,\n  learnerCount: number,\n  permissions: {\n    admin: boolean,\n    dataResearcher: boolean,\n    [key: string]: boolean,\n  },\n}\n\ninterface EnrollmentCounts extends Record<string, number> {\n  total: number,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/courseInfo/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TabProps } from '@src/instructorNav/InstructorNav';\n\nexport interface CourseInfoResponse {\n  courseId: string,\n  displayName: string,\n  courseNumber: string,\n  courseRun: string,\n  enrollmentCounts: EnrollmentCounts,\n  start: string | null,\n  end: string | null,\n  tabs?: TabProps[],\n  totalEnrollment: number,\n  studioUrl: string,\n  pacing: string,\n  org?: string,\n  numSections: number,\n  hasStarted: boolean,\n  hasEnded: boolean,\n  enrollmentEnd: string | null,\n  enrollmentStart: string | null,\n  gradeCutoffs: string | null,\n  staffCount: number,\n  learnerCount: number,\n  permissions: {\n    admin: boolean,\n    dataResearcher: boolean,\n    [key: string]: boolean,\n  },\n  gradebookUrl: string,\n  studioGradingUrl?: string,\n}\n\ninterface EnrollmentCounts extends Record<string, number> {\n  total: number,\n}\n"]}

package/dist/courseTeam/CourseTeamPage.js

@@ -1,6 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Tab, Tabs, useToggle } from '@openedx/paragon';
+import { Plus } from '@openedx/paragon/icons';
+import AddTeamMemberModal from '../courseTeam/components/AddTeamMemberModal';
+import EditTeamMemberModal from '../courseTeam/components/EditTeamMemberModal';
+import MembersContent from '../courseTeam/components/MembersContent';
+import RolesContent from '../courseTeam/components/RolesContent';
+import messages from '../courseTeam/messages';
+import { AlertOutlet } from '../providers/AlertProvider';
 const CourseTeamPage = () => {
-    return (_jsx("div", { children: _jsx("h3", { children: "Course Team" }) }));
+    const intl = useIntl();
+    const [isOpenAddModal, openAddModal, closeAddModal] = useToggle(false);
+    const [isOpenEditModal, openEditModal, closeEditModal] = useToggle(false);
+    const [selectedUser, setSelectedUser] = useState(null);
+    const handleEdit = (user) => {
+        setSelectedUser(user);
+        openEditModal();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [_jsx("h3", { className: "text-primary-700 mb-0", children: intl.formatMessage(messages.courseTeamTitle) }), _jsx(Button, { iconBefore: Plus, variant: "primary", onClick: openAddModal, children: intl.formatMessage(messages.addTeamMember) })] }), _jsx(AlertOutlet, {}), _jsxs(Tabs, { children: [_jsx(Tab, { eventKey: "members", title: intl.formatMessage(messages.membersTab), children: _jsx(MembersContent, { onEdit: handleEdit }) }), _jsx(Tab, { eventKey: "roles", title: intl.formatMessage(messages.rolesTab), children: _jsx(RolesContent, {}) })] }), isOpenAddModal && _jsx(AddTeamMemberModal, { isOpen: isOpenAddModal, onClose: closeAddModal }), isOpenEditModal && selectedUser && _jsx(EditTeamMemberModal, { isOpen: isOpenEditModal, user: selectedUser, onClose: closeEditModal })] }));
 };
 export default CourseTeamPage;
 //# sourceMappingURL=CourseTeamPage.js.map

package/dist/courseTeam/CourseTeamPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CourseTeamPage.js","sourceRoot":"","sources":["../../src/courseTeam/CourseTeamPage.tsx"],"names":[],"mappings":";AAAA,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,OAAO,CACL,wBACE,uCAAoB,GAChB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["const CourseTeamPage = () => {\n  return (\n    <div>\n      <h3>Course Team</h3>\n    </div>\n  );\n};\n\nexport default CourseTeamPage;\n"]}
+{"version":3,"file":"CourseTeamPage.js","sourceRoot":"","sources":["../../src/courseTeam/CourseTeamPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,kBAAkB,MAAM,+CAA+C,CAAC;AAC/E,OAAO,mBAAmB,MAAM,gDAAgD,CAAC;AACjF,OAAO,cAAc,MAAM,2CAA2C,CAAC;AACvE,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,CAAC,cAAc,EAAE,YAAY,EAAE,aAAa,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,CAAC,eAAe,EAAE,aAAa,EAAE,cAAc,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IAEhF,MAAM,UAAU,GAAG,CAAC,IAAsB,EAAE,EAAE;QAC5C,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,aAAa,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,wDAAwD,aACrE,aAAI,SAAS,EAAC,uBAAuB,YAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC,GAAM,EACzF,KAAC,MAAM,IAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,YAAY,YAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAU,IACpH,EACN,KAAC,WAAW,KAAG,EACf,MAAC,IAAI,eACH,KAAC,GAAG,IAAC,QAAQ,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,YACpE,KAAC,cAAc,IAAC,MAAM,EAAE,UAAU,GAAI,GAClC,EACN,KAAC,GAAG,IAAC,QAAQ,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,YAChE,KAAC,YAAY,KAAG,GACZ,IACD,EACN,cAAc,IAAI,KAAC,kBAAkB,IAAC,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,aAAa,GAAI,EACxF,eAAe,IAAI,YAAY,IAAI,KAAC,mBAAmB,IAAC,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,GAAI,IAChI,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useState } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Button, Tab, Tabs, useToggle } from '@openedx/paragon';\nimport { Plus } from '@openedx/paragon/icons';\nimport AddTeamMemberModal from '@src/courseTeam/components/AddTeamMemberModal';\nimport EditTeamMemberModal from '@src/courseTeam/components/EditTeamMemberModal';\nimport MembersContent from '@src/courseTeam/components/MembersContent';\nimport RolesContent from '@src/courseTeam/components/RolesContent';\nimport messages from '@src/courseTeam/messages';\nimport { AlertOutlet } from '@src/providers/AlertProvider';\nimport { CourseTeamMember } from '@src/courseTeam/types';\n\nconst CourseTeamPage = () => {\n  const intl = useIntl();\n  const [isOpenAddModal, openAddModal, closeAddModal] = useToggle(false);\n  const [isOpenEditModal, openEditModal, closeEditModal] = useToggle(false);\n  const [selectedUser, setSelectedUser] = useState<CourseTeamMember | null>(null);\n\n  const handleEdit = (user: CourseTeamMember) => {\n    setSelectedUser(user);\n    openEditModal();\n  };\n\n  return (\n    <>\n      <div className=\"d-flex justify-content-between align-items-center mb-3\">\n        <h3 className=\"text-primary-700 mb-0\">{intl.formatMessage(messages.courseTeamTitle)}</h3>\n        <Button iconBefore={Plus} variant=\"primary\" onClick={openAddModal}>{intl.formatMessage(messages.addTeamMember)}</Button>\n      </div>\n      <AlertOutlet />\n      <Tabs>\n        <Tab eventKey=\"members\" title={intl.formatMessage(messages.membersTab)}>\n          <MembersContent onEdit={handleEdit} />\n        </Tab>\n        <Tab eventKey=\"roles\" title={intl.formatMessage(messages.rolesTab)}>\n          <RolesContent />\n        </Tab>\n      </Tabs>\n      {isOpenAddModal && <AddTeamMemberModal isOpen={isOpenAddModal} onClose={closeAddModal} />}\n      {isOpenEditModal && selectedUser && <EditTeamMemberModal isOpen={isOpenEditModal} user={selectedUser} onClose={closeEditModal} />}\n    </>\n  );\n};\n\nexport default CourseTeamPage;\n"]}

package/dist/courseTeam/components/AddTeamMemberModal.d.ts

@@ -0,0 +1,6 @@
+interface AddTeamMemberModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+declare const AddTeamMemberModal: ({ isOpen, onClose, }: AddTeamMemberModalProps) => import("react/jsx-runtime").JSX.Element;
+export default AddTeamMemberModal;

package/dist/courseTeam/components/AddTeamMemberModal.js

@@ -0,0 +1,60 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
+import { ActionRow, Button, Form, ModalDialog } from '@openedx/paragon';
+import { useAddTeamMember, useRoles } from '../../courseTeam/data/apiHook';
+import messages from '../../courseTeam/messages';
+import { useCourseInfo } from '../../data/apiHook';
+import { useDebouncedFilter } from '../../hooks/useDebouncedFilter';
+import { useAlert } from '../../providers/AlertProvider';
+const AddTeamMemberModal = ({ isOpen, onClose, }) => {
+    const intl = useIntl();
+    const { courseId = '' } = useParams();
+    const { data: { displayName } = { displayName: '' } } = useCourseInfo(courseId);
+    const { data: { results } = { results: [] } } = useRoles(courseId);
+    const [users, setUsers] = useState('');
+    const [selectedRole, setSelectedRole] = useState('');
+    const { inputValue, handleChange } = useDebouncedFilter({
+        filterValue: users,
+        setFilter: setUsers,
+    });
+    const { mutate: addTeamMember } = useAddTeamMember(courseId);
+    const { addAlert, showModal } = useAlert();
+    const roles = [{ role: '', displayName: intl.formatMessage(messages.rolePlaceholder) }, ...(results || [])];
+    const handleInputChange = (e) => {
+        handleChange(e.target.value);
+    };
+    const handleSelectChange = (e) => {
+        setSelectedRole(e.target.value);
+    };
+    const handleSave = () => {
+        const identifiers = inputValue.split(',').map(user => user.trim()).filter(user => user);
+        addTeamMember({ identifiers, role: selectedRole }, {
+            onSuccess: (data) => {
+                var _a;
+                const failedUsernames = ((_a = data.results) === null || _a === void 0 ? void 0 : _a.filter(user => user.userDoesNotExist).map(user => user.identifier)) || [];
+                if (failedUsernames.length > 0) {
+                    addAlert({
+                        type: 'danger',
+                        message: intl.formatMessage(messages.failedToAddTeamMembers),
+                        extraContent: (failedUsernames.map((learner) => (_jsxs("p", { className: "mb-0", children: ["\u2022 ", intl.formatMessage(messages.unknownLearner, { learner })] }, learner))))
+                    });
+                }
+                setUsers('');
+                setSelectedRole('');
+                onClose();
+            },
+            onError: () => {
+                showModal({
+                    message: intl.formatMessage(messages.addTeamMemberError),
+                    variant: 'danger',
+                    confirmText: intl.formatMessage(messages.closeButton),
+                });
+            }
+        });
+    };
+    return (_jsxs(ModalDialog, { isOpen: isOpen, onClose: onClose, title: intl.formatMessage(messages.addNewTeamMember), isOverflowVisible: false, size: "lg", children: [_jsx(ModalDialog.Header, { className: "border-light-700 border-bottom", children: _jsx("h3", { className: "text-primary-500", children: intl.formatMessage(messages.addNewTeamMember) }) }), _jsxs(ModalDialog.Body, { className: "position-relative overflow-auto", children: [_jsx("p", { children: intl.formatMessage(messages.addNewTeamMemberDescription, { courseName: displayName }) }), _jsxs(Form.Group, { children: [_jsx(Form.Label, { children: intl.formatMessage(messages.addUsersLabel) }), _jsx(Form.Control, { as: "textarea", rows: 3, placeholder: intl.formatMessage(messages.usersPlaceholder), value: inputValue, onChange: handleInputChange })] }), _jsxs(Form.Group, { children: [_jsx(Form.Label, { children: intl.formatMessage(messages.roleLabel) }), _jsx(Form.Control, { as: "select", defaultValue: "", disabled: roles.length === 1, onChange: handleSelectChange, children: roles.map((role) => (_jsx("option", { value: role.role, children: role.displayName }, role.role))) })] })] }), _jsx(ModalDialog.Footer, { className: "border-light-700 border-top", children: _jsxs(ActionRow, { children: [_jsx(Button, { variant: "tertiary", onClick: onClose, children: intl.formatMessage(messages.cancelButton) }), _jsx(Button, { variant: "primary", onClick: handleSave, disabled: !selectedRole || !inputValue, children: intl.formatMessage(messages.saveButton) })] }) })] }));
+};
+export default AddTeamMemberModal;
+//# sourceMappingURL=AddTeamMemberModal.js.map

package/dist/courseTeam/components/AddTeamMemberModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddTeamMemberModal.js","sourceRoot":"","sources":["../../../src/courseTeam/components/AddTeamMemberModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { useIntl } from '@openedx/frontend-base';\nimport { ActionRow, Button, Form, ModalDialog } from '@openedx/paragon';\nimport { useAddTeamMember, useRoles } from '@src/courseTeam/data/apiHook';\nimport messages from '@src/courseTeam/messages';\nimport { useCourseInfo } from '@src/data/apiHook';\nimport { useDebouncedFilter } from '@src/hooks/useDebouncedFilter';\nimport { useAlert } from '@src/providers/AlertProvider';\n\ninterface AddTeamMemberModalProps {\n  isOpen: boolean,\n  onClose: () => void,\n}\n\nconst AddTeamMemberModal = ({\n  isOpen,\n  onClose,\n}: AddTeamMemberModalProps) => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const { data: { displayName } = { displayName: '' } } = useCourseInfo(courseId);\n  const { data: { results } = { results: [] } } = useRoles(courseId);\n  const [users, setUsers] = useState('');\n  const [selectedRole, setSelectedRole] = useState('');\n  const { inputValue, handleChange } = useDebouncedFilter({\n    filterValue: users,\n    setFilter: setUsers,\n  });\n  const { mutate: addTeamMember } = useAddTeamMember(courseId);\n  const { addAlert, showModal } = useAlert();\n\n  const roles = [{ role: '', displayName: intl.formatMessage(messages.rolePlaceholder) }, ...(results || [])];\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    handleChange(e.target.value);\n  };\n\n  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    setSelectedRole(e.target.value);\n  };\n\n  const handleSave = () => {\n    const identifiers = inputValue.split(',').map(user => user.trim()).filter(user => user);\n    addTeamMember({ identifiers, role: selectedRole }, {\n      onSuccess: (data) => {\n        const failedUsernames = data.results?.filter(user => user.userDoesNotExist).map(user => user.identifier) || [];\n        if (failedUsernames.length > 0) {\n          addAlert({\n            type: 'danger',\n            message: intl.formatMessage(messages.failedToAddTeamMembers),\n            extraContent: (\n              failedUsernames.map((learner: string) => (\n                <p key={learner} className=\"mb-0\">• {intl.formatMessage(messages.unknownLearner, { learner })}</p>\n              ))\n            )\n          });\n        }\n        setUsers('');\n        setSelectedRole('');\n        onClose();\n      },\n      onError: () => {\n        showModal({\n          message: intl.formatMessage(messages.addTeamMemberError),\n          variant: 'danger',\n          confirmText: intl.formatMessage(messages.closeButton),\n        });\n      }\n    });\n  };\n\n  return (\n    <ModalDialog isOpen={isOpen} onClose={onClose} title={intl.formatMessage(messages.addNewTeamMember)} isOverflowVisible={false} size=\"lg\">\n      <ModalDialog.Header className=\"border-light-700 border-bottom\">\n        <h3 className=\"text-primary-500\">{intl.formatMessage(messages.addNewTeamMember)}</h3>\n      </ModalDialog.Header>\n      <ModalDialog.Body className=\"position-relative overflow-auto\">\n        <p>{intl.formatMessage(messages.addNewTeamMemberDescription, { courseName: displayName })}</p>\n        <Form.Group>\n          <Form.Label>{intl.formatMessage(messages.addUsersLabel)}</Form.Label>\n          <Form.Control as=\"textarea\" rows={3} placeholder={intl.formatMessage(messages.usersPlaceholder)} value={inputValue} onChange={handleInputChange} />\n        </Form.Group>\n        <Form.Group>\n          <Form.Label>{intl.formatMessage(messages.roleLabel)}</Form.Label>\n          <Form.Control as=\"select\" defaultValue=\"\" disabled={roles.length === 1} onChange={handleSelectChange}>\n            {\n              roles.map((role) => (\n                <option key={role.role} value={role.role}>\n                  {role.displayName}\n                </option>\n              ))\n            }\n          </Form.Control>\n        </Form.Group>\n      </ModalDialog.Body>\n      <ModalDialog.Footer className=\"border-light-700 border-top\">\n        <ActionRow>\n          <Button variant=\"tertiary\" onClick={onClose}>{intl.formatMessage(messages.cancelButton)}</Button>\n          <Button variant=\"primary\" onClick={handleSave} disabled={!selectedRole || !inputValue}>{intl.formatMessage(messages.saveButton)}</Button>\n        </ActionRow>\n      </ModalDialog.Footer>\n    </ModalDialog>\n  );\n};\n\nexport default AddTeamMemberModal;\n"]}

package/dist/courseTeam/components/EditTeamMemberModal.d.ts

@@ -0,0 +1,8 @@
+import { CourseTeamMember } from '../../courseTeam/types';
+interface EditTeamMemberModalProps {
+    isOpen: boolean;
+    user: CourseTeamMember;
+    onClose: () => void;
+}
+declare const EditTeamMemberModal: ({ isOpen, user, onClose }: EditTeamMemberModalProps) => import("react/jsx-runtime").JSX.Element;
+export default EditTeamMemberModal;