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

Hookup create sections FE/BE #164

Merged

Conversation

chrisrrowland
Copy link
Contributor

Closes #88

<Typography>New sections have been added!</Typography>
</CardContent>
<CardActions className={successClasses.cardFooter}>
See your sections in the Canvas Setting
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to provide a link to the page setting /courses/:course_id/settings#tab-sections to see if sections has been added or not.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This requires additional functionality that were going to handle in a separate issue. The canvas url needs to be loaded into globals

Copy link
Contributor

Choose a reason for hiding this comment

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

The globals already is sending the course_id, why can't we make the URL like /courses/403334/setting#tab-sections?

global call response
{"environment":"development","userLoginId":"dddd","course":{"id":403334,"roles":["TeacherEnrollment","Account Admin"]}}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We know the ending of the url but not the environment dependent beginning

Copy link
Contributor

Choose a reason for hiding this comment

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

relative URL's won't work in this case? just like <a href = '/course/40404/setting#tab-section' or using a link Material UI component?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'll open a PR to pass the Canvas URL, you can integrate here, or handle it later. Feels related enough and should be straightforward.

@pushyamig
Copy link
Contributor

There are some alignment issue with the way file name is displayed

Screen Shot 2021-07-28 at 8 23 38 AM

Comment on lines 68 to 72
// usage:
// const data = await delay(nnnn).then(() => {return something})
// const delay = async (ms: number): Promise<void> => {
// await new Promise<void>(resolve => setTimeout(() => resolve(), ms))
// }
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
// usage:
// const data = await delay(nnnn).then(() => {return something})
// const delay = async (ms: number): Promise<void> => {
// await new Promise<void>(resolve => setTimeout(() => resolve(), ms))
// }

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Are code comments considered poor practice now? I feel like any time I leave commented code it's asked to be removed.

Copy link
Contributor

Choose a reason for hiding this comment

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

Generally I won't leave code that is not used in the repo, But you can ask other developers what is the best practice here

Copy link
Contributor

Choose a reason for hiding this comment

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

I guess, for me, I don't see the value of keeping this. Are we going to use it again? Even if we did, you could find it in the commit history.

Copy link
Member

Choose a reason for hiding this comment

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

Are code comments considered poor practice now? I feel like any time I leave commented code it's asked to be removed.

Yeah. It's because they probably need to be removed in the future, but nobody ever remembers to go back and remove them. Or in the future, someone stumbles across it and doesn't understand the code or doesn't know whether should it be removed. So, out of fear of breaking something, it's never touched again.

On the flip side, don't worry about losing code forever when it's deleted. It will still be in the repo history.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Don't they just get minified out in production anyways?

I might remember that once upon a time I left myself a comment somewhere (Narrator: he won't) and look it up in the history, but nobody else is going to know that once upon a time there was a comment that might have been helpful when they are looking at some code for the first time.

tldr; get off my lawn ;-)

@pushyamig
Copy link
Contributor

I found this interesting case when validation error is caught saying sections already occurred by so and so name in course, I opened another window i deleted sections and got back to same CCM window with validation error for create section and tried to upload again but CCM state still thinks the sections loaded already exits. How should we handle this case? which to me not usually a regular workflow that subaccount admins will do ( like delete the sections)

@chrisrrowland
Copy link
Contributor Author

I found this interesting case when validation error is caught saying sections already occurred by so and so name in course, I opened another window i deleted sections and got back to same CCM window with validation error for create section and tried to upload again but CCM state still thinks the sections loaded already exits. How should we handle this case? which to me not usually a regular workflow that subaccount admins will do ( like delete the sections)

Clicking the fix and upload again button could refresh the existing course list.

Probably some other options too

@pushyamig
Copy link
Contributor

pushyamig commented Jul 28, 2021

I found this interesting case when validation error is caught saying sections already occurred by so and so name in course, I opened another window i deleted sections and got back to same CCM window with validation error for create section and tried to upload again but CCM state still thinks the sections loaded already exits. How should we handle this case? which to me not usually a regular workflow that subaccount admins will do ( like delete the sections)

Clicking the fix and upload again button could refresh the existing course list.

Probably clicking the upload button could get the section again? could be easiest thing to do

@pushyamig pushyamig self-requested a review July 28, 2021 16:18
@pushyamig
Copy link
Contributor

@chrisrrowland you can work with other team member for getting approval since I am OOO next week.

Apply context free validation on file upload.
Apply validation requiring awareness of server data on submit.
@lsloan lsloan self-requested a review August 3, 2021 01:25
Copy link
Member

@lsloan lsloan left a comment

Choose a reason for hiding this comment

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

I don't have much time to complete this review at this time, but I'll make more time this afternoon. In the meantime, maybe @ssciolla will review and approve. I just have a couple of comments to make at the moment, because I need to take my dog to the vet.

export interface CanvasCourseSection {
id: number
name: string
// total_students?: number
Copy link
Member

Choose a reason for hiding this comment

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

If it doesn't interfere with your current code, you can probably uncomment this. If it's not being used, your IDE may give you some warnings about it. If eslint warns about it, I think you can add a linting directive in a comment following the field to tell eslint to ignore it.

It'd be nice if the client Canvas models could use interfaces from the server Canvas models.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It'd be nice if the client Canvas models could use interfaces from the server Canvas models.

💯

Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if we ever created an issue for this. I did look into it, hopefully we'll get to it at some point.

Comment on lines 68 to 72
// usage:
// const data = await delay(nnnn).then(() => {return something})
// const delay = async (ms: number): Promise<void> => {
// await new Promise<void>(resolve => setTimeout(() => resolve(), ms))
// }
Copy link
Member

Choose a reason for hiding this comment

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

Are code comments considered poor practice now? I feel like any time I leave commented code it's asked to be removed.

Yeah. It's because they probably need to be removed in the future, but nobody ever remembers to go back and remove them. Or in the future, someone stumbles across it and doesn't understand the code or doesn't know whether should it be removed. So, out of fear of breaking something, it's never touched again.

On the flip side, don't worry about losing code forever when it's deleted. It will still be in the repo history.

ccm_web/client/src/api.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@ssciolla ssciolla left a comment

Choose a reason for hiding this comment

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

Looking good, @chrisrrowland. Lots of small comments. I think there are a couple areas worth addressing -- related to reducing duplication in validation, removing unused stuff, fixing important text, or streamlining a useEffect. I'm going to test and open that settings URL PR now, and I'll approve if I'm satisfied with how it works. Feel free to discuss any of the below with me in the meantime.

Reminder, if I preface something with "Nit-pick", you can consider it optional (or extra credit 😉 ).

Comment on lines 68 to 72
// usage:
// const data = await delay(nnnn).then(() => {return something})
// const delay = async (ms: number): Promise<void> => {
// await new Promise<void>(resolve => setTimeout(() => resolve(), ms))
// }
Copy link
Contributor

Choose a reason for hiding this comment

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

I guess, for me, I don't see the value of keeping this. Are we going to use it again? Even if we did, you could find it in the commit history.

ccm_web/client/src/models/canvas.ts Outdated Show resolved Hide resolved
ccm_web/client/src/models/models.ts Show resolved Hide resolved
ccm_web/client/src/api.ts Show resolved Hide resolved
ccm_web/client/src/pages/BulkSectionCreate.tsx Outdated Show resolved Hide resolved
ccm_web/client/src/pages/BulkSectionCreate.tsx Outdated Show resolved Hide resolved
ccm_web/client/src/pages/BulkSectionCreate.tsx Outdated Show resolved Hide resolved
ccm_web/client/src/pages/BulkSectionCreate.tsx Outdated Show resolved Hide resolved
<Typography>New sections have been added!</Typography>
</CardContent>
<CardActions className={successClasses.cardFooter}>
See your sections in the Canvas Setting
Copy link
Contributor

Choose a reason for hiding this comment

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

I'll open a PR to pass the Canvas URL, you can integrate here, or handle it later. Feels related enough and should be straightforward.

Copy link
Contributor

@ssciolla ssciolla left a comment

Choose a reason for hiding this comment

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

I tested and submitted a PR for the settings URL (chrisrrowland#3). I flagged a couple more things around the validation flow and error handling that I'd like to discuss. Generally the code works well and handles most of the cases fluently. I will wait til I've at least heard your opinion about some of my comments, then I'll approve. I hope the detailed review feels at least somewhat productive to you here.

Comment on lines +241 to +244
if (getSaveCanvasSectionDataError !== undefined) {
const errors = (getSaveCanvasSectionDataError as unknown as IDefaultError).errors
const rowInvalidations = convertErrorsToRowInvalidations(errors)
setPageState({ state: BulkSectionCreatePageState.CreateSectionsError, schemaInvalidation: [], rowInvalidations: rowInvalidations })
Copy link
Contributor

Choose a reason for hiding this comment

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

So, right now, errors thrown by the validation layer in the backend have a different format than the Canvas errors. We could modify how these errors are formatted in the backend, or we could add more handling such that 400 "Bad Request" errors expect a ValidationError object. This is beyond the scope of this PR, but right now the UI basically says nothing when you hit this case (for instance, I tried submitting a section name that was too long). I'm wondering if there's some minimal handling we should add in the interim.

chrisrrowland and others added 10 commits August 4, 2021 11:36
Suggested formatting change

Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com>
Suggested formatting change

Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com>
Fix alert text

Co-authored-by: Sam Sciolla <35741256+ssciolla@users.noreply.github.com>
Copy link
Contributor

@ssciolla ssciolla left a comment

Choose a reason for hiding this comment

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

Cool, thanks for going through my comments, I'm approving. Feel free to handle anything remaining as you see fit. Questions about validation errors from the backend and the settings link can be handled later (or separately). 🚀

* Send Canvas URL in /api/globals; wire up BulkSectionCreate to use it for settings link

* Use Link component; add target _parent
@chrisrrowland chrisrrowland merged commit f0b7440 into tl-its-umich-edu:main Aug 5, 2021
@chrisrrowland chrisrrowland deleted the 88_get_sections_fe_be branch August 5, 2021 15:53
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.

Integrate the FE with BE for create sections
4 participants