Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add plugin slot for login page #1354

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

xitij2000
Copy link

Description

This change adds a plugin slot for the login page allowing it to be customised.

Since there was a dependency conflict between frontend-plugin-framework and the react-hooks testing package, the react-hooks testing package has been removed and a replaced with a simple mechanism for testing hooks.

Since this touched the Login Page those have also been refactored to move away from redux connect.

How Has This Been Tested?

Testing with a simple env.config.jsx, using automated tests and manual testing of login

Screenshots/sandbox (optional):

Include a link to the sandbox for design changes or screenshot for before and after. Remove this section if its not applicable.

Before After

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Sandbox, if applicable.
  • Is there adequate test coverage for your changes?

Post-merge Checklist

  • Deploy the changes to prod after verifying on stage or ask @openedx/2u-infinity to do it.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

@xitij2000 xitij2000 requested a review from a team as a code owner November 7, 2024 10:30
@openedx-webhooks
Copy link

openedx-webhooks commented Nov 7, 2024

Thanks for the pull request, @xitij2000!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

  • If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
    • This process (including the steps you'll need to take) is documented here.
  • If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

  • Dependencies

    This PR must be merged before / after / at the same time as ...

  • Blockers

    This PR is waiting for OEP-1234 to be accepted.

  • Timeline information

    This PR must be merged by XX date because ...

  • Partner information

    This is for a course on edx.org.

  • Supporting documentation
  • Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/2u-infinity. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

  • The size and impact of the changes that it introduces
  • The need for product review
  • Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 7, 2024
@xitij2000 xitij2000 marked this pull request as draft November 7, 2024 10:37
@xitij2000 xitij2000 force-pushed the kshitij/plugin-slot branch from e19d19d to 8dfabed Compare November 7, 2024 10:38
Copy link

codecov bot commented Nov 7, 2024

Codecov Report

Attention: Patch coverage is 96.77419% with 1 line in your changes missing coverage. Please review.

Project coverage is 87.67%. Comparing base (6879bac) to head (f1a8f7b).

Files with missing lines Patch % Lines
src/logistration/Logistration.jsx 91.66% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1354      +/-   ##
==========================================
- Coverage   87.69%   87.67%   -0.02%     
==========================================
  Files         124      125       +1     
  Lines        2299     2304       +5     
  Branches      646      645       -1     
==========================================
+ Hits         2016     2020       +4     
- Misses        274      275       +1     
  Partials        9        9              

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

Comment on lines +22 to +38
const renderHook = (hookCallback) => {
const result = {
current: null,
};

const Component = () => {
const val = hookCallback();
React.useEffect(() => {
result.current = val;
});
return null;
};

render(<Component />);
return { result };
};

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to remove @testing-library/react-hooks due to package conflicts, so I've replaced it with this simplified hook testing code. In later versions this hook is part of the react testing library so we can pull it from there and remove this.

Comment on lines +8 to +11
const LoginPageSlot = ({
institutionLogin,
handleInstitutionLogin,
}) => (
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how valid this is. The original component needs these values, however they are not included in plugin props since they seem pretty specific to the implementation of the login page.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basing on many similar code examples here, I think it's valid, @xitij2000?

clearThirdPartyAuthContextErrorMessage,
},
)(Logistration);
export default Logistration;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the changes here are to move from old style redux code to more modern react hooks based code.

@@ -111,7 +116,7 @@ const Logistration = (props) => {
{!institutionLogin && (
<h3 className="mb-4.5">{formatMessage(messages['logistration.sign.in'])}</h3>
)}
<LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
<LoginPageSlot institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using the LoginPageSlot in two places but perhaps these should be two slots that both render the LoginPage by default?

shouldBackupState: false,
showResetPasswordSuccessBanner: false,
submitState: DEFAULT_STATE,
thirdPartyAuthApiStatus: PENDING_STATE,
thirdPartyAuthContext: {
currentProvider: null,
errorMessage: null,
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes to this file are to move to hooks from the older pattern of mapStateToProps etc.

Comment on lines 296 to 298
const mapStateToProps = state => ({
thirdPartyAuthContext: thirdPartyAuthContextSelector(state),
});
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aren't we fetching thirdPartyAuthContext with useSelector above? If so, can't we get rid of mapStateToProps completely?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I started moving to the new hooks-based approach but ran out of time. I've now fully migrated.

Comment on lines +8 to +11
const LoginPageSlot = ({
institutionLogin,
handleInstitutionLogin,
}) => (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basing on many similar code examples here, I think it's valid, @xitij2000?

@xitij2000 xitij2000 marked this pull request as ready for review December 18, 2024 15:31
@xitij2000 xitij2000 force-pushed the kshitij/plugin-slot branch 2 times, most recently from 50d2066 to c999936 Compare December 18, 2024 15:33
This change adds a plugin slot for the login page allowing it to be customised.

Since there was a dependency conflict between frontend-plugin-framework and the react-hooks testing package, the react-hooks testing package has been removed and a replaced with a simple mechanism for testing hooks.

Since this touched the Login Page those have also been refactored to move away from redux connect.
@Cup0fCoffee
Copy link

@xitij2000 Do we need to backport this PR to Sumac?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
open-source-contribution PR author is not from Axim or 2U
Projects
Status: Waiting on Author
Development

Successfully merging this pull request may close these issues.

4 participants