Implement recommendations display

[akolson]

Summary

Description of the change(s) you made

This pr Implements the following

• UI changes required for search recommendations to be made in the "Import from other channels
  " page. See reference for details.
• Pagination to allow for the loading of resources depending on whether good recommendations exist or not.
• Loading states and error reporting for the search recommendations UI.
• Adds the search recommendations string feature file for easier use and maintenance of strings in light of string translation.
• Conditionalizes the search recommendations display using the ai enabled flag.

Manual verification steps performed

1. Select a channel
2. Click the "Add" button and select "Import from channels"
3. View changes to the UI and responsiveness.
4. Use the pagination to view more resources, observing the loading states in the process
5. Login with a user whose ai feature flag is turned off; they should not be able to view the recommendations side panel. Also, no recommendations related content should be loaded in the network tab on inspection.
6. Clicking the "About Recommendations" link, should display the about modal with information about recommendations

Screenshots (if applicable)

Good recommendations

Pagination - View more good recommendation

Pagination - Other (not so good) recommendations

Pagination - No good recommendations

Loading state

About recommendations

AI feature flag off

Are there any risky areas that deserve extra testing?

References

Closes #4565
Closes #4566
Closes #4683
Closes #4775

Comments

The KCard component is generally in a good place, however there could be few issues that could pop up here and there. For the latest changes you can yarn link the KDS develop branch or use the latest release on npm, if up-to-date with develop

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[MisRob]

Tagging @MisRob here for any thoughts on the implementation of the KCard component and how it can be improved. Noting here I have also shared feedback with Misha on my KCard usage experience.

Thanks @akolson! I will prioritize reviewing parts related to cards in this PR and follow-up on your Slack feedback on that opportunity.

[MisRob]

@akolson Chiming in to say so far so good! The way the card is implemented around KCard makes much sense. Thanks for reading the docs on a11y :) I can do more detailed review of card parts as soon as we finalize. Wouldn't expect anything major to come up.