Skip to content

Edit all data doc frontend - #48444

Merged
TurnerRiley merged 19 commits into
stagingfrom
edit-all-data-doc-frontend
Oct 11, 2022
Merged

Edit all data doc frontend#48444
TurnerRiley merged 19 commits into
stagingfrom
edit-all-data-doc-frontend

Conversation

@TurnerRiley

@TurnerRiley TurnerRiley commented Oct 4, 2022

Copy link
Copy Markdown
Contributor

This is the frontend part of this Jira ticket (building on the backend PR) for adding an editing interface for the list of all Data Docs, allowing an editor to add a new Data Doc, edit an existing Data Doc, or delete an existing Data Doc.

To see the edit_all page:

  • Ensure you have added Levelbuilder permissions to your local account before viewing
  • Go to http://localhost-studio.code.org:3000/data_docs/edit
  • Here you can see the list of all data docs (including ones without names or content), create a new data doc, edit an existing data doc, or delete an existing data doc

DataDocsEditAll

Links

Jira ticket: here
Spec: requirement #3 here

Testing story

Localhost testing to run through creating a data doc, editing data docs, and deleting data docs through the edit_all table's functions. In addition, added frontend unit tests.

Follow-up work

Next requirements in the data doc spec.

PR Checklist:

  • Tests provide adequate coverage
  • Privacy and Security impacts have been assessed
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Pull Request is labeled appropriately
  • Follow-up work items (including potential tech debt) are tracked and linked

Base automatically changed from edit-all-data-doc-backend to staging October 7, 2022 16:54
@TurnerRiley
TurnerRiley requested a review from a team October 7, 2022 17:03

@davidsbailey davidsbailey left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nice work! just one edge case to consider.

setShowDeleteWarningDialog(false);
setPendingDeleteDocKey(null);
});
};

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is a bit of an edge case, but I am seeing a problem if I open the edit page in two places, and try to delete the same object twice. I would suggest fixing this while we are thinking about it.

when I try to delete the nonexistent item, I get a 404, which is fine, but the dialog doesn't close, and if you close it manually, the item is still in the list:
Screen Shot 2022-10-07 at 3 07 39 PM

What I would suggest is, catch here, and if the status code was 404, just close the dialog and remove the item from the list like you are doing in done above. you could show an error saying the object was already deleted... but... I'm not sure how helpful that is?

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I like that flow, Dave –– don't think an error message is necessary.

To follow-up on Dave's comment, if I block the server from responding, the dialog doesn't close (which is probably good, because it wasn't deleted), but it's unclear what's happening. Can we be okay with that behavior as it's levelbuilder users?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

thank you for catching that, good call!

I wonder if the server isn't responding then the dialog not closing automatically would visually indicate something went wrong moreso than the dialog closing without deleting anything?

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Yep, agreed!

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

great - glad you are both on board with the proposed 404 behavior.

yes, in case of any error besides 404, it seems fine to leave the dialog open. levelbuilders are usually savvy enough to grab any details from the js error console and send those to us.


// click delete for data doc with key 'docToDelete' and confirm in dialog
testDeleteWrapper
.findAll('.actions-box')[2]

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Could you base this number on the length of currDocs? I'm worried if anyone changes the length of allDocs, this will fail

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

yes great point thank you!

@davidsbailey davidsbailey left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

lgtm after addressing 1 more comment

)
]);
setShowDeleteWarningDialog(false);
setPendingDeleteDocKey(null);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

please extract duplicate code into a method - I think it meets the criteria that we'll generally want these two codepaths to stay in sync if anything changes.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

oh yes good point, thank you!

// click delete for data doc with key 'docToDelete' and confirm in dialog
const docToDeleteActions = testDeleteWrapper
.findAll('.actions-box')
.filter(dataDoc => dataDoc.toString().includes(docToDelete.key))[0];

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Clever!

@megcrenshaw megcrenshaw left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Looks great once Dave's comment is addressed! Well done

@TurnerRiley
TurnerRiley merged commit 19b3ba5 into staging Oct 11, 2022
@TurnerRiley
TurnerRiley deleted the edit-all-data-doc-frontend branch October 11, 2022 16:44
isOpen={true}
handleClose={() => setShowDeleteWarningDialog(false)}
onCancel={() => setShowDeleteWarningDialog(false)}
onConfirm={() => deleteDataDoc()}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

one late tip here - this approach is A+, but also a simple window.confirm is sufficient for confirming levelbuilder actions in the future.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Gotcha, I'll keep that in mind for the future thank you!

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.

3 participants