feat: send individuals emails with pluggable component

[johnvente]

Description

This feature will allow sending emails to expected emails of students in the course using pluggable component

Demo

Plugin loaded:

How to test it

If you are using devstack

1. Go to workspace and clone this branch

cd ~/workspace && git remote add fork git@github.com:eduNEXT/frontend-app-communications.git

git fetch fork jv/feat-send-indivudial-email-pluggable && git checkout jv/feat-send-indivudial-email-pluggable

2. Go to the mfe repository, use node version in the repo and install dependencies

cd ~/workspace/frontend-app-communications && nvm use && npm install

3. inside frontend-app-communications run

npm run start

4. Go to http://localhost:1984/courses/course-v1:edX+DemoX+Demo_Course/bulk_email Or
   http://localhost:1984/courses/{{id_course}}/bulk_email

5. Select the checkbox called "Individual learners"

6. In the input with this label "Add individual learner" search an student with email/name/username and click on the user that you wish

7. Fill out the fields Subject and Body

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (jv/pluggable-component-slot@0d94489). Click here to learn what that means.

Additional details and impacted files

@@                      Coverage Diff                       @@
##             jv/pluggable-component-slot       #7   +/-   ##
==============================================================
  Coverage                               ?   83.31%           
==============================================================
  Files                                  ?       53           
  Lines                                  ?      773           
  Branches                               ?      147           
==============================================================
  Hits                                   ?      644           
  Misses                                 ?      129           
  Partials                               ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AuraAlba]

Suggested change

	<Form.Label className="mt-3" data-testid="learners-email-input-label">{intl.formatMessage(messages.individualEmailsLabelLearnersInputLabel)}</Form.Label>
	<Form.Label className="mt-3" data-testid="learners-email-input-label">
	{intl.formatMessage(messages.individualEmailsLabelLearnersInputLabel)}
	</Form.Label>

[AuraAlba]

In the case the variables doesn't exist the value should be an empty string, not the variable

[AuraAlba]

Suggested change

	<Form.Label className="col-12" data-testid="learners-email-list-label">{intl.formatMessage(messages.individualEmailsLabelLearnersListLabel)}</Form.Label>
	<Form.Label className="col-12" data-testid="learners-email-list-label">
	{intl.formatMessage(messages.individualEmailsLabelLearnersListLabel)}
	</Form.Label>

[AuraAlba]

Manage colors as variables. If they are be used in other components, make a separate file

[BryanttV]

Hi @johnvente, I tested the changes, and work correctly! 💯