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

Revise Draftail integration UI #35

Merged

Conversation

Morsey187
Copy link
Collaborator

@Morsey187 Morsey187 commented Nov 29, 2023

#16

Updates:

Background colour updates for loading overlay Screenshot 2023-11-29 at 09 05 34 Screenshot 2023-11-29 at 11 54 09
Cancel request button See screenshots for "Background colour updates to loading indicator"
z-index bug Resolves the issue below by applying a different z-index value Screenshot 2023-11-28 at 13 35 26
Updating error messages Errors related to the backend were not being handled correctly resulting in a JSON parse error (`“JSON.parse: unexpected character at line 1 column 1 of the JSON data”`) being sent to the front-end.

Updates involved fixing this issue on the backend along with applying the correct classnames to match existing wagtail field panel errors.
Screenshot 2023-11-28 at 15 13 16

reference of old error message Screenshot 2023-11-28 at 13 46 55
Updating the dropdown's background colour I also experimented the excat same styling wagtail uses for drop downs which you can see on the branch `tmp/dropdown-stying` however since wagtail uses tippy.js to position and style the element, it doesn't seem like a valid approach. Screenshot 2023-11-29 at 12 24 52

2023-11-29 12 24 36
2023-11-29 12 21 34

For testing error messages, I'd suggest either altering your API key to an invalid one or trying to run prompts on a field with no text/content.

@Morsey187 Morsey187 changed the base branch from main to feature/update-control-to-use-new-draftail-api November 29, 2023 12:32
@Morsey187
Copy link
Collaborator Author

Note:
If you refresh the page whilst a request is in progress, you'll see a glimpse of an error message flashing above the field displaying “network request error”

I thought I could resolve this by using the code below however it doesn't seem to work, so any ideas would be appreciated, otherwise I'll ignore it as it doesn't seem like a huge issue..

  const handleBeforeUnload = (e: Event) => {
    abortController.abort();
  };

  useEffect(() => {
    // Prevent network errors occuring when the user navigates away
    // from the page
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [handleBeforeUnload]);

src/wagtail_ai/views.py Outdated Show resolved Hide resolved
@Morsey187 Morsey187 force-pushed the feature/update-control-to-use-new-draftail-api branch from 5f437e9 to 3866aab Compare November 30, 2023 11:40
@Morsey187 Morsey187 force-pushed the feature/ui-updates branch 2 times, most recently from 9ba6677 to 9a0348f Compare December 5, 2023 15:31
Copy link
Member

@tomusher tomusher left a comment

Choose a reason for hiding this comment

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

This looks good to me! I'm not sure the flashing error message is a problem worth solving for now, but good to be aware of it.

@Morsey187 Morsey187 merged commit 801bb13 into feature/update-control-to-use-new-draftail-api Dec 8, 2023
9 checks passed
@zerolab zerolab deleted the feature/ui-updates branch December 8, 2023 16:04
@zerolab zerolab linked an issue Jan 3, 2024 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Revise Draftail integration UI
3 participants