Cannot create new course for new organization using the frontend-app-authoring MFE

[regisb]

I feel a little silly for reporting this, because I'm 99% sure this use case was tested in the Redwood release. But I can't create courses, both in my local and productions installations of Open edX when the corresponding organization is new.

Steps to follow:

1. Create admin user: tutor local do createuser --superuser --staff admin [email protected]
2. Open http://studio.local.edly.io/ and click "sign in".
3. Click "+ New course".
4. Fill the course name, organization, etc. fields. Fill the "organization" field with a new org name. The "Create" button remains disabled:

❌ Use case 1: create course with new org

Screencast.from.01-08-2024.11.12.06.webm

(I wasn't able to display the mouse pointer in that screencast, but I tried to click the "Create" button and it remained disabled)

✔️ Use case 2: create course with existing org

On the other hand, if I try to create a new course with an existing organization, the "Create" button is correctly toggled on:

Screencast.from.01-08-2024.11.14.28.webm

❌ Use case 3: create course with new org and switch back to existing org

Note that once I've filled a new org name, editing the field to an existing org name does not enable the "create" button either:

Screencast.from.01-08-2024.11.15.47.webm

This last use case leads me to think that the issues lies with the frontend code.

[KristinAoki]

Looks like there is bug when the dropdown arrow is closed. If tab or the mouse is used to focus on the next input, the "Create" button is enabled. But when the dropdown toggle is used, the "Create" button is always disabled

[pkolyvas]

Came here to file this bug. Glad it exists. Following.

For anyone looking for a workaround:

Click on "New Library" in the course-authoring MFE, which will drop you into the non-MFE version of the builder and allow you to successfully create a course using the old workflow (click on "New Course" once your URL starts with your defined Studio endpoint/URL).

[qasimgulzar]

I tried to reproduce this issue but I believe it is working fine for me, I have also attached a video please feel free to point out if I am not following the current process.

frontend-app-course-authoring-git-issue-low.mov

[DmytroAlipov]

Hi @KristinAoki @regisb @KristinAoki
I found the reason for this bug. When an Organization dropdown opens, useFormik returns values ​​with the following object:

{
    "displayName": "Test Name",
    "org": "TestOrg",
    "number": "first-test-course",
    "run": "2024",
    "undefined": ""
}

Next, a check is triggered to ensure that not all fields in this form are filled out. As a result, the button becomes inactive. And the only thing that saves us is re-rendering this component.
I fixed this bug in this MR#1276 (and to Redwood MR#1277), but I understand this is not the best solution.
Someone may have better ideas on how to do this. What is most unclear is how to prevent Formik from responding to the dropdown.

[regisb]

Thanks for the investigation @DmytroAlipov. If I understand correctly, the next enigma to resolve is why useFormik returns an "undefined" field -- right?

[DmytroAlipov]

That's right @regisb ! I assume that Formik somehow gets a field that is a dropdown. Dropdown doesn't have a name attribute. Therefore, the output is an object with the field name "undefined".

[regisb]

Huge kudos to you @DmytroAlipov for investigating the issue and proposing PRs with a fix. While your PR #1276 (and its backport #1277) do we fix the issue, I think that we can all agree that the merged changes partially hide the real problem, which remains unknow. Thus, I'm re-opening this issue.

[regisb]

According to my tests, PR #1277 does not fix the issue in Redwood. The "Create" button remains deactivated until I pick a new organization. @DmytroAlipov am I doing something wrong?

[DmytroAlipov]

@regisb Everything works correctly for me:
https://github.com/user-attachments/assets/19492ceb-2439-48b3-bd19-dd55115fc951

Indeed I recreated the problem by switching between fields with Tab only:

Most likely the problem is in the TypeaheadDropdown component
Because when editing this field the behavior is not the same as for other fields

  const renderOrgField = (field) => (allowToCreateNewOrg ? (
    <TypeaheadDropdown
      readOnly={false}
      name={field.name}
      value={field.value}
      controlClassName={classNames({ 'is-invalid': hasErrorField(field.name) })}
      options={field.options}
      placeholder={field.placeholder}
      handleBlur={handleCustomBlurForDropdown}
      handleChange={(value) => setFieldValue(field.name, value)}
      noOptionsMessage={intl.formatMessage(messages.courseOrgNoOptions)}
      helpMessage=""
      errorMessage=""
      floatingLabel=""
    />
  ) : (
    <Dropdown className="mr-2">
      <Dropdown.Toggle id={`${field.name}-dropdown`} variant="outline-primary">
        {field.value || intl.formatMessage(messages.courseOrgNoOptions)}
      </Dropdown.Toggle>
      <Dropdown.Menu>
        {field.options?.map((value) => (
          <Dropdown.Item
            key={value}
            onClick={() => setFieldValue(field.name, value)}
          >
            {value}
          </Dropdown.Item>
        ))}
      </Dropdown.Menu>
    </Dropdown>
  ));

Other fields immediately change state when the number of characters changes.

[DmytroAlipov]

@regisb
I found the problem. Now everything works correctly when using the Tab button. However, in such a case, I couldn’t figure out how to display errors for the Org field (for example, the presence of spaces).
Here's the fix:
#1279
@KristinAoki please take note of this fix.

[regisb]

@DmytroAlipov I don't know how to backport #1279 to Redwood. Can you help me out?

[DmytroAlipov]

@regisb There is a difficulty with this since this fix concerns frontend-lib-content-components, which is already deprecated.
In the master, frontend-lib-content-components are merged to the Course Authoring MFE.

[kdmccormick]

@DmytroAlipov I'm happy to temporarily un-archive that repo so that we can backport a fix to it and publish a new release before re-archiving it. Let me know if you'd like me to.

[DmytroAlipov]

@regisb @kdmccormick I don't mind making these changes, it's not difficult. But I have one more question regarding this fix. When switching between fields using the Tab button, no error is displayed for the organization field:

When using the mouse pointer we get this behavior:

I don’t know how critical this is, but it can happen.

---

@kdmccormick By the way, I have several issues that I have already fixed for the master, but did not add the fixes to Redwood, since it should be to frontend-lib-content-components

[mariajgrimaldi]

Hi @kdmccormick, could you help us backport this before the next Redwood cut? Thanks!

[kdmccormick]

I un-archived https://github.com/openedx/frontend-lib-content-components, and granted write access to both the release manager and https://github.com/orgs/openedx/teams/committers-frontend . Feel free to backport the fix to the main branch of that repo, cut a v2.6.11 release, and then backport the v2.6.11 pin to the redwood branch of frontend-app-authoring. After Sumac is released, I'll re-archive frontend-lib-content-components.

[mariajgrimaldi]

Hi @DmytroAlipov, would you give us a hand with the backports? Let us know!

[DmytroAlipov]

Hi @mariajgrimaldi
Unfortunately, I’m very busy right now, maybe by the end of the week I’ll have time, but that’s not for sure 😕

[cmltaWt0]

We are planning to test the backport with @DmytroAlipov tomorrow. Will update the ticket with the results.
@mariajgrimaldi @arbrandes fyi

[cmltaWt0]

@mariajgrimaldi @arbrandes
I've opened two PRs - for redwood (lib-component) and for master (course-authoring).
Please review.

[arbrandes]

Thanks @cmltaWt0, both PRs have been reviewed, tested, approved, and merged. Are you going to issue another one to frontend-app-authoring@open-release/redwood.master to bump frontend-lib-content-components to 2.5.3?

[cmltaWt0]

Thanks @cmltaWt0, both PRs have been reviewed, tested, approved, and merged. Are you going to issue another one to frontend-app-authoring@open-release/redwood.master to bump frontend-lib-content-components to 2.5.3?

Totally! Going to do it today.

UPD: PR has been created: #1410 (MERGED)

[cmltaWt0]

All PRs are merged. Fortunately, we can close the issue after testing.

[mariajgrimaldi]

Removing the release blocker label as @cmltaWt0 mentioned in the BTR meeting. Thank you all!

[arbrandes]

I think we're good, here.