feat: Create collection Modal [FC-0062] #1259

ChrisChV · 2024-09-05T22:55:34Z

Description

Adds a functional Modal to create a library collection.

Supporting information

Github link: Library Home - Create new collection #1100
Internal ticket: FAL-3788
Depends on: Update collections crud rest api open-craft/edx-platform#683

Testing instructions

Use this branch of edx-platform: Update collections crud rest api open-craft/edx-platform#683
Go to studio and create a library
In the library home click on the New button
Click the' Collection' button on the Add content sidebar.
Verify the design of the modal.
Click on Create with all empty. Verify the validation error.
Add a name and click on Create. Verify the success.
Run tutor dev run cms ./manage.py cms reindex_studio --experimental and refresh the library home page to see the newly created collection.
Return to the create modal and add the same name of the newly created collection. Click on Create and verify the validation error.

openedx-webhooks · 2024-09-05T22:55:38Z

Thanks for the pull request, @ChrisChV!

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-tnl. 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.

codecov · 2024-09-05T23:04:50Z

Codecov Report

Attention: Patch coverage is 95.94595% with 3 lines in your changes missing coverage. Please review.

Project coverage is 92.32%. Comparing base (fd48fef) to head (8dfe82c).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/library-authoring/common/context.tsx	50.00%	2 Missing ⚠️
...horing/create-collection/CreateCollectionModal.tsx	96.55%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1259      +/-   ##
==========================================
+ Coverage   92.31%   92.32%   +0.01%     
==========================================
  Files        1013     1016       +3     
  Lines       18733    18803      +70     
  Branches     3947     4017      +70     
==========================================
+ Hits        17293    17360      +67     
  Misses       1374     1374              
- Partials       66       69       +3

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

rpenido

This is looking good to me @ChrisChV!
I left some comments. Let me know what you think!

src/library-authoring/add-content/AddContentContainer.tsx

src/library-authoring/create-collection/messages.ts

src/library-authoring/data/apiHooks.ts

src/library-authoring/data/api.ts

rpenido · 2024-09-09T18:05:56Z

src/library-authoring/add-content/AddContentContainer.tsx

+      key={`add-content-${blockType}`}
+      variant="outline-primary"
+      disabled={disabled}
+      className="m-2 rounded-0"


This is more of a general comment (not related to this PR).
I don't think we should set rounded-0 here (and I don't think it should be that way in the design).

@bradenmacdonald, should we ask the design team to use the default Paragon theme? It is hard to be consistent in manually implementing these overrides, and if we hardcode these styles, we prevent the theme from being applied properly in my opinion.

Yeah - in general, please just use the Paragon styles and don't override them unless there's a very specific reason required for the design. That way the components will be consistent, and it also makes development faster. This is also an MVP so we're not generally aiming for pixel-perfect UX design.

@sdaitzman @lizc577 can I get your thoughts - do you have a Paragon theme for Figma now?

Which border radius is this about? Edit: I looked through the TypeScript, if I'm correct this is about the Add Content button: no need to override the Paragon theme border radius.

Most components and workflows in Figma are using Paragon Figma components (a few screens haven't been updated, and there are occasional overrides to fix UX issues in the original Paragon components).

The Paragon Figma library is based on the 2U/EdX theme, so we don't expect the implemented components to match exactly. The UX/UI and Paragon WGs have been discussing building an Open EdX Paragon Figma library, but only a small fraction exists right now.

Thanks for the clarification. Updated here: b0a47cc

Thank you for your input here @sdaitzman!

We have some buttons for which we overrode the radius to match the design and some for which we did not.
From now on, I will not override the Paragon styles.

If you catch some inconsistencies in the UX/UI validation, please let us know!!

rpenido · 2024-09-09T18:07:18Z

src/library-authoring/create-collection/CreateCollectionModal.tsx

+  } = React.useContext(LibraryContext);
+  const { showToast } = React.useContext(ToastContext);
+
+  const [collectionName, setCollectionName] = React.useState<string | null>(null);


We should not use null as a value on an input. It should be '' for a controlled component. This generates some warnings in the console.

Suggested change

const [collectionName, setCollectionName] = React.useState<string | null>(null);

const [collectionName, setCollectionName] = React.useState<string>('');

Also, I think it would be better to use Formik + Yup for form validation and state management instead of doing it manually. We have a recent example here: https://github.com/openedx/frontend-app-course-authoring/blob/master/src/library-authoring/create-library/CreateLibrary.tsx

Updated: aa870b4

rpenido

LGTM 👍
Thank you for your work, @ChrisChV!
It worked flawlessly.

I added some optional suggestions about using the formik, but feel free to push back if you want to!

I tested this using the instructions from the PR
I read through the code
I checked for accessibility issues
Includes documentation

src/library-authoring/data/apiHooks.ts

src/library-authoring/create-collection/CreateCollectionModal.tsx

rpenido · 2024-09-10T22:03:19Z

src/library-authoring/create-collection/CreateCollectionModal.tsx

+  const [isCreatingCollection, setIsCreatingCollection] = React.useState<boolean>(false);
+
+  const handleOnClose = React.useCallback(() => {
+    closeCreateCollectionModal();
+    setIsCreatingCollection(false);
+  }, []);
+


Then this can go

Suggested change

const [isCreatingCollection, setIsCreatingCollection] = React.useState<boolean>(false);

const handleOnClose = React.useCallback(() => {

closeCreateCollectionModal();

setIsCreatingCollection(false);

}, []);

src/library-authoring/create-collection/CreateCollectionModal.tsx

rpenido · 2024-09-10T22:15:12Z

src/library-authoring/create-collection/CreateCollectionModal.tsx

+                  )}
+                  value={formikProps.values.title}
+                  placeholder={intl.formatMessage(messages.createCollectionModalNamePlaceholder)}
+                  help=""


Nit

Suggested change

help=""

I get this error

I don't understand.. help has a defaultProp -- why isn't it ok to remove it?

But if it must be included, then just send an empty element so we don't have to change the expected types:

Suggested change

help=""

help=<></>

src/library-authoring/create-collection/CreateCollectionModal.tsx

pomegranited

Hi @ChrisChV , this is working well, but I have some minor comments. Other than removing the unused message, none of my comments need to block merging, though, so:

👍

I tested this using the branch from Store Collection metadata + component count in meilisearch open-craft/edx-platform#684 on the backend and the PR test instructions.
I read through the code
I checked for accessibility issues by using my keyboard to navigate.
~~Includes documentation~~ N/A
User-facing strings are extracted for translation

pomegranited · 2024-09-12T06:27:17Z

src/generic/FormikControl.jsx

+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  help: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),


label is still always a PropTypes.element.. and help would be if you just wrapped it in a <Form.Text> element.
So rather than making this change, can we please just call it with elements instead of strings?

pomegranited · 2024-09-12T06:32:02Z

src/library-authoring/create-collection/CreateCollectionModal.tsx

+                  )}
+                  value={formikProps.values.title}
+                  placeholder={intl.formatMessage(messages.createCollectionModalNamePlaceholder)}
+                  help=""


I don't understand.. help has a defaultProp -- why isn't it ok to remove it?

But if it must be included, then just send an empty element so we don't have to change the expected types:

Suggested change

help=""

help=<></>

pomegranited · 2024-09-12T06:33:01Z

src/library-authoring/create-collection/CreateCollectionModal.tsx

+                  )}
+                  value={formikProps.values.description}
+                  placeholder={intl.formatMessage(messages.createCollectionModalDescriptionPlaceholder)}
+                  help={intl.formatMessage(messages.createCollectionModalDescriptionDetails)}


Please send an element instead of a string so we don't have to change the types:

Suggested change

help={intl.formatMessage(messages.createCollectionModalDescriptionDetails)}

help={(

<Form.Text>

{intl.formatMessage(messages.createCollectionModalDescriptionDetails)}

</Form.Text>

)}

pomegranited · 2024-09-12T06:33:51Z

src/library-authoring/create-collection/messages.ts

+  createCollectionModalNameConflict: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.conflict',
+    defaultMessage: 'There is another collection with the same name',
+    description: 'Message when the Name field of the Create Collection modal form is not unique',
+  },


This message isn't used anywhere:

Suggested change

createCollectionModalNameConflict: {

id: 'course-authoring.library-authoring.modals.create-collection.form.name.conflict',

defaultMessage: 'There is another collection with the same name',

description: 'Message when the Name field of the Create Collection modal form is not unique',

},

src/library-authoring/data/apiHooks.ts

ChrisChV · 2024-09-13T16:56:44Z

@bradenmacdonald I need a green check from a reviewer with write access. Could you review this?

bradenmacdonald · 2024-09-13T17:27:12Z

@ChrisChV, sure. Just updating my devstack now.

I did already notice one minor issue: when I click this "Add Collection" button, it doesn't open the "New Collection" modal - it just shows the general "Add" sidebar, which is not what I'd expect.

bradenmacdonald · 2024-09-13T18:00:29Z

@ChrisChV Also, the following console warning appears when the modal is first opened, because there is still a problem with the blank help property.

➡️ I have a fix for you here: 0546f23

bradenmacdonald

Nice work! Conditional approval if you fix the above two issues (empty state button and console warning about help prop). Once you fix those and get a green build, go ahead and squash+merge :)

ChrisChV added 2 commits September 5, 2024 16:30

feat: Enable Collection button on Create Component in Library

e3c3076

feat: CreateCollectionModal added

718ff7f

ChrisChV requested a review from a team as a code owner September 5, 2024 22:55

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Sep 5, 2024

ChrisChV marked this pull request as draft September 5, 2024 22:56

ChrisChV changed the title ~~Create collection Modal~~ feat: Create collection Modal [FC-0062] Sep 5, 2024

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Sep 6, 2024

ChrisChV mentioned this pull request Sep 7, 2024

feat: REST API for create Library Collection [FC-0062] openedx/edx-platform#35447

Closed

ChrisChV marked this pull request as ready for review September 7, 2024 19:28

feat: Connect CreateCollectionModal with API

ea2ba75

rpenido reviewed Sep 9, 2024

View reviewed changes

ChrisChV added 4 commits September 9, 2024 13:40

test: For CreateCollectionModal

ac50a2f

style: Nits on library authoring code

36f2e8b

refactor: Use Formik + Yup in CreateCollectionModal

aa870b4

style: Fix lint on the code

3dfe252

ChrisChV mentioned this pull request Sep 10, 2024

feat: Add Library Collections REST endpoints [FC-0062] openedx/edx-platform#35321

Merged

ChrisChV added 2 commits September 10, 2024 14:23

style: Delete rounded-0 in AddContentButton

b0a47cc

chore: fix merge conflicts

af89cf3

rpenido approved these changes Sep 10, 2024

View reviewed changes

rpenido mentioned this pull request Sep 10, 2024

Update collections crud rest api open-craft/edx-platform#683

Merged

pomegranited mentioned this pull request Sep 11, 2024

Store Collection metadata + component count in meilisearch open-craft/edx-platform#684

Merged

refactor: Some parts of Formik in CreateCollectionModal

636d231

pomegranited approved these changes Sep 12, 2024

View reviewed changes

ChrisChV added 4 commits September 12, 2024 20:07

style: Update code from review

73fe5ff

chore: fix merge conflicts

8a57c26

style: Trow error on CreateCollectionModal if libraryId is null

104fce1

chore: Fix merge conflicts

d17367c

bradenmacdonald approved these changes Sep 13, 2024

View reviewed changes

ChrisChV added 3 commits September 13, 2024 19:34

fix: Open CreateCollectionModal on EmptyStates add collection button

fac82ea

refactor: Migrate FormikControl to TypeScript

e26b90e

test: Add tests for EmptyStates

8dfe82c

ChrisChV merged commit a37a1b1 into openedx:master Sep 14, 2024
7 checks passed

ChrisChV deleted the chris/FAL-3788-create-collection branch September 14, 2024 02:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Create collection Modal [FC-0062] #1259

feat: Create collection Modal [FC-0062] #1259

ChrisChV commented Sep 5, 2024 •

edited

Loading

openedx-webhooks commented Sep 5, 2024 •

edited

Loading

codecov bot commented Sep 5, 2024 •

edited

Loading

rpenido left a comment

rpenido Sep 9, 2024

bradenmacdonald Sep 10, 2024

sdaitzman Sep 10, 2024 •

edited

Loading

ChrisChV Sep 10, 2024

rpenido Sep 10, 2024

rpenido Sep 9, 2024

ChrisChV Sep 9, 2024

rpenido left a comment

rpenido Sep 10, 2024

rpenido Sep 10, 2024

ChrisChV Sep 11, 2024

pomegranited Sep 12, 2024

pomegranited left a comment

pomegranited Sep 12, 2024

ChrisChV Sep 13, 2024

ChrisChV Sep 13, 2024

pomegranited Sep 12, 2024

pomegranited Sep 12, 2024

pomegranited Sep 12, 2024

ChrisChV commented Sep 13, 2024

bradenmacdonald commented Sep 13, 2024

bradenmacdonald commented Sep 13, 2024

bradenmacdonald left a comment

	const [collectionName, setCollectionName] = React.useState<string \| null>(null);
	const [collectionName, setCollectionName] = React.useState<string>('');

		label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
		help: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

feat: Create collection Modal [FC-0062] #1259

feat: Create collection Modal [FC-0062] #1259

Conversation

ChrisChV commented Sep 5, 2024 • edited Loading

Description

Supporting information

Testing instructions

openedx-webhooks commented Sep 5, 2024 • edited Loading

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

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

Who will review my changes?

Where can I find more information?

When can I expect my changes to be merged?

codecov bot commented Sep 5, 2024 • edited Loading

Codecov Report

rpenido left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sdaitzman Sep 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rpenido left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pomegranited left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChrisChV commented Sep 13, 2024

bradenmacdonald commented Sep 13, 2024

bradenmacdonald commented Sep 13, 2024

bradenmacdonald left a comment

Choose a reason for hiding this comment

ChrisChV commented Sep 5, 2024 •

edited

Loading

openedx-webhooks commented Sep 5, 2024 •

edited

Loading

codecov bot commented Sep 5, 2024 •

edited

Loading

sdaitzman Sep 10, 2024 •

edited

Loading