task/WG-232-React-Listing-UI #268
Conversation
- Brings over EmptyTablePlaceholder from TUP UI that CMD collaborated with us on
type 'NonNullable<ReactNodeLike>' error in unit test
sophia-massie
changed the title
| {isError && ( | ||
| <tr> | ||
| <td colSpan={3}> | ||
| <EmptyTablePlaceholder type="error"> | ||
| There was an error gathering your maps and projects. {''} | ||
| <a | ||
| href="https://www.designsafe-ci.org/help/new-ticket/" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| Click here to submit a ticket on DesignSafe. | ||
| </a> | ||
| </EmptyTablePlaceholder> | ||
| </td> | ||
| </tr> | ||
| )} |
There was a problem hiding this comment.
could this be moved outside of the table body and moved right after the if (isLoading){ block (i.e. before line ~27).
if (isError) {
return (
<EmptyTablePlaceholder type="error">
There was an error gathering your maps and projects. {''}
<a
href="https://www.designsafe-ci.org/help/new-ticket/"
target="_blank"
rel="noreferrer"
>
Click here to submit a ticket on DesignSafe.
</a>
</EmptyTablePlaceholder>
);
}
There was a problem hiding this comment.
in the angular version, we had added the error message to the UI as we were trying to figure out (and still are) an issue with uwrapid account where DS project listings would fail intermittently. so it looked like this: https://github.com/TACC-Cloud/hazmapper/blob/main/angular/src/app/components/main-welcome/main-welcome.component.html#L44-L49
should we add the error message now or add later if needed?
| ) : ( | ||
| <tr> | ||
| <td colSpan={3}> | ||
| <EmptyTablePlaceholder type="info"> |
There was a problem hiding this comment.
could core components SectionMesage, Message or InlineMessage just be used instead of EmptyTablePlaceholder? both:
- here where there are no maps
- and also when there is an error
| <tr> | ||
| <td colSpan={3}> | ||
| <EmptyTablePlaceholder type="info"> | ||
| No projects or maps found. |
There was a problem hiding this comment.
Here we just want maps and not projects as in the frontend we have to avoid it unless referring to DS projects..
in the angular version, it was:
<div id="welcome-no-information">
<div>No Map Exists!</div>
<a (click)="openCreateProjectModal()"> Create a New Map. </a>
</div>
do we want to keep it the same or tweak it a little?
| @@ -8,3 +10,18 @@ | |||
| } | |||
|
|
|||
| */ | |||
|
|
|||
| /* CSS module styles taken from Angular styles.styl */ | |||
There was a problem hiding this comment.
have a question on this but will put in slack.
| <Icon name="edit-document"></Icon> | ||
| <div className={styles.root}> | ||
| <div className={styles.projectList}> | ||
| <table> |
There was a problem hiding this comment.
this width exceeds its parent when maps have long names or when the browser is narrow. So long map names then exceed the screen width and the text-overflow: ellipsis isn't used. (I haven't tested with long ds project names)
table maybe needs to be styled:
width: 100%;
table-layout: fixed;
or maybe something else?
| type="link" | ||
| className={styles.projectListItemButton} | ||
| > | ||
| <Icon name="add" /> |
There was a problem hiding this comment.
iconNameBefore="add" in <Button> can be used instead of Icon.
| {proj.ds_project?.value.projectId} | ||
| {' - '} | ||
| {proj.ds_project?.value.title} |
There was a problem hiding this comment.
if there is no associated ds_project, we want to show ---------- like the angular code.
| <div className={styles.projectList}> | ||
| <table> | ||
| <thead className={styles.projectHeader}> | ||
| <tr> |
There was a problem hiding this comment.
do we want to color rows differently when hovered? and, maybe more long term, but do we want to consider using InfiniteScrollTable? I'm not certain, but these feel like lower-priority things that we can change in later PRs or not do.
| @@ -0,0 +1,25 @@ | |||
| import { SectionMessage } from '../../core-components'; | |||
There was a problem hiding this comment.
here are some comments for this component, but depending on #268 (comment), they might not be needed. so you might ignore this if EmptyPLaceholder is replaced by something else:
- do we want put this in
src/component/utils? is that spot for smaller components that will be reused by things insrc/components? if it is very Projects or ProjectListing and only used there, we could stick under src/components/Projects/ - the no children handling of "No data available" is never used. drop?
Overview:
PR Status:
Related Jira tickets:
Summary of Changes:
Uses styles from Hazmapper angular to create Project Listing and cleans up the main project listing page
Testing Steps:
UI Photos:
Error message:
No projects message:
Notes: