feat: send individuals emails with pluggable component

package.json

@@ -47,6 +47,7 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@loadable/component": "^5.15.3",
     "@openedx-plugins/communications-app-check-box-form": "file:plugins/communications-app/CheckBoxForm",
+    "@openedx-plugins/communications-app-individual-emails": "file:plugins/communications-app/IndividualEmails",
     "@openedx-plugins/communications-app-input-form": "file:plugins/communications-app/InputForm",
     "@openedx-plugins/communications-app-test-component": "file:plugins/communications-app/TestComponent",
     "@tinymce/tinymce-react": "3.14.0",
@@ -57,6 +58,7 @@
     "popper.js": "1.16.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
+    "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
@@ -65,7 +67,8 @@
     "redux": "4.2.0",
     "regenerator-runtime": "0.13.11",
     "tinymce": "5.10.7",
-    "use-deep-compare-effect": "^1.8.1"
+    "use-deep-compare-effect": "^1.8.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",

plugins/communications-app/IndividualEmails/api.js

@@ -0,0 +1,14 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
+
+export async function getLearnersEmailInstructorTask(courseId, search) {
+  const endpointUrl = `${getConfig().LMS_BASE_URL}/platform-plugin-communications/${courseId}/api/search_learners?query=${search}&page=1&page_size=10`;
+  try {
+    const response = await getAuthenticatedHttpClient().get(endpointUrl);
+    return response;
+  } catch (error) {
+    logError(error);
+    throw new Error(error);
+  }
+}

plugins/communications-app/IndividualEmails/api.test.js

@@ -0,0 +1,44 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { getLearnersEmailInstructorTask } from './api';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+describe('getLearnersEmailInstructorTask', () => {
+  const mockCourseId = 'course123';
+  const mockSearch = 'testuser';
+  const mockResponseData = { data: 'someData' };
+  const mockConfig = { LMS_BASE_URL: 'http://localhost' };
+
+  beforeEach(() => {
+    getConfig.mockReturnValue(mockConfig);
+    getAuthenticatedHttpClient.mockReturnValue({
+      get: jest.fn().mockResolvedValue(mockResponseData),
+    });
+  });
+
+  it('successfully fetches data', async () => {
+    const data = await getLearnersEmailInstructorTask(mockCourseId, mockSearch);
+    expect(data).toEqual(mockResponseData);
+    expect(getAuthenticatedHttpClient().get).toHaveBeenCalledWith(
+      `http://localhost/platform-plugin-communications/${mockCourseId}/api/search_learners?query=${mockSearch}&page=1&page_size=10`,
+    );
+  });
+
+  it('handles an error', async () => {
+    getAuthenticatedHttpClient().get.mockRejectedValue(new Error('Network error'));
+
+    await expect(getLearnersEmailInstructorTask(mockCourseId, mockSearch)).rejects.toThrow('Network error');
+    expect(logError).toHaveBeenCalledWith(new Error('Network error'));
+  });
+});

plugins/communications-app/IndividualEmails/index.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+import { v4 as uuidv4 } from 'uuid';
+import { Form, Chip, Container } from '@edx/paragon';
+import { Person, Close } from '@edx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getLearnersEmailInstructorTask } from './api';
+import messages from './messages';
+
+import './styles.scss';
+
+function IndividualEmails(props) {
+  const {
+    courseId, handleEmailSelected, emailList, handleDeleteEmail,
+    intl,
+  } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+  const [inputValue] = useState([]);
+
+  const handleSearchEmailLearners = async (userEmail) => {
+    setIsLoading(true);
+    try {
+      const response = await getLearnersEmailInstructorTask(courseId, userEmail);
+      const { results } = response.data;
+      const formatResult = results.map((item) => ({ id: uuidv4(), ...item }));
+      setOptions(formatResult);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('error autocomplete input', error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const filterBy = (option) => option.name || option.email || option.username;
+  const handleDeleteEmailSelected = (id) => {
+    if (handleDeleteEmail) {
+      handleDeleteEmail(id);
+    }
+  };
+
+  const handleSelectedLearnerEmail = (selected) => {
+    const [itemSelected] = selected || [{ email: '' }];
+    const isEmailAdded = emailList.some((item) => item.email === itemSelected.email);
+
+    if (selected && !isEmailAdded) {
+      handleEmailSelected(selected);
+    }
+  };
+
+  return (
+    <Container className="col-12 my-5">
+      <Form.Label className="mt-3" data-testid="learners-email-input-label">{intl.formatMessage(messages.individualEmailsLabelLearnersInputLabel)}</Form.Label>
+      <AsyncTypeahead
+        filterBy={filterBy}
+        id="async-autocompleinput"
+        isLoading={isLoading}
+        labelKey="username"
+        minLength={3}
+        onSearch={handleSearchEmailLearners}
+        options={options}
+        name="studentEmail"
+        selected={inputValue}
+        data-testid="input-typeahead"
+        placeholder={intl.formatMessage(messages.individualEmailsLabelLearnersInputPlaceholder)}
+        onChange={handleSelectedLearnerEmail}
+        renderMenuItemChildren={({ name, email }) => (
+          <span data-testid="autocomplete-email-option">{name ? `${name} -` : name} {email}</span>
+        )}
+      />
+      <Container className="email-list">
+        <Form.Label className="col-12" data-testid="learners-email-list-label">{intl.formatMessage(messages.individualEmailsLabelLearnersListLabel)}</Form.Label>
+        {emailList.map(({ id, email }) => (
+          <Chip
+            variant="light"
+            className="email-chip"
+            iconBefore={Person}
+            iconAfter={Close}
+            onIconAfterClick={() => handleDeleteEmailSelected(id)}
+            key={id}
+            data-testid="email-list-chip"
+          >
+            {email}
+          </Chip>
+        ))}
+      </Container>
+
+    </Container>
+  );
+}
+
+IndividualEmails.defaultProps = {
+  courseId: '',
+  handleEmailSelected: () => {},
+  handleDeleteEmail: () => {},
+  emailList: [],
+};
+
+IndividualEmails.propTypes = {
+  courseId: PropTypes.string,
+  handleEmailSelected: PropTypes.func,
+  handleDeleteEmail: PropTypes.func,
+  emailList: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      email: PropTypes.string,
+      username: PropTypes.string,
+    }),
+  ),
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(IndividualEmails);