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.

Sign up for GitHub

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

Jump to bottom

task/WG-232-React-Listing-UI #268

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+198 −45
Open

task/WG-232-React-Listing-UI #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
82ac31a
task/WG-232-React-Listing-UI-clean
sophia-massie Oct 3, 2024
8304f93
- Linting
sophia-massie Oct 3, 2024
b5c2a4e
- Adds better response and error handling.
sophia-massie Oct 3, 2024
e5a4817
- Linting
sophia-massie Oct 3, 2024
0ff0f14
- Addresses Type 'ReactNode' is not assignable to
sophia-massie Oct 3, 2024
d55959d
- Linting
sophia-massie Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions react/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@changey/react-leaflet-markercluster": "^4.0.0-rc1",
"@fortawesome/fontawesome-free": "^6.6.0",
sophia-massie marked this conversation as resolved.
Show resolved Hide resolved
"@reduxjs/toolkit": "^1.8.4",
"@tacc/core-styles": "^2.24.1",
"@testing-library/react": "^13.4.0",
Expand Down
47 changes: 47 additions & 0 deletions react/src/components/Projects/ProjectListing.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.root {
display: flex;
flex-direction: column;
width: 100%;
}
.projectList {
height: 270px;
border-collapse: collapse;
align-self: center;
overflow-y: scroll;
margin-top: 40px;
margin-bottom: 40px;
}
.projectHeader,
.projectHeader th {
background: #d0d0d0;
position: sticky;
top: 0;
z-index: 1;
}

.projectListItemButton {
cursor: pointer;
color: initial;
margin-right: 10px;
}

.projectListItemButton:hover {
color: #666;
}

.mapColumn {
width: 30%;
}
.projectColumn {
width: 60%;
}
.buttonColumn {
white-space: nowrap;
}

.projectName {
max-width: fit-content;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
118 changes: 80 additions & 38 deletions react/src/components/Projects/ProjectListing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { useState } from 'react';
import { useProjectsWithDesignSafeInformation } from '../../hooks';
import { Button, LoadingSpinner, Icon } from '../../core-components';
import styles from './ProjectListing.module.css';
import { EmptyTablePlaceholder } from '../utils';
import CreateMapModal from '../CreateMapModal/CreateMapModal';
import { useNavigate } from 'react-router-dom';

export const ProjectListing: React.FC = () => {
const ProjectListing: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const navigate = useNavigate();

Expand All @@ -22,45 +24,85 @@ export const ProjectListing: React.FC = () => {
return <LoadingSpinner />;
}

if (isError) {
return <h4>Unable to retrieve projects</h4>;
}

return (
<>
<table>
<thead>
<tr>
<th>Map</th>
<th>Project</th>
<th>
<CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
<Button onClick={toggleModal} size="small">
Create a New Map
</Button>
</th>
</tr>
</thead>
<tbody>
{data?.map((proj) => (
<tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
<td>{proj.name}</td>
<td>
{proj.ds_project?.value.projectId}{' '}
{proj.ds_project?.value.title}
</td>
<td>
<Button>
<Icon name="edit-document"></Icon>
<div className={styles.root}>
<div className={styles.projectList}>
<table>
Copy link
Collaborator

Choose a reason for hiding this comment

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

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?

<thead className={styles.projectHeader}>
<tr>
Copy link
Collaborator

Choose a reason for hiding this comment

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

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.

<th className={styles.mapColumn}>Map</th>
<th className={styles.projectColumn}>Project</th>
<th className={styles.buttonColumn}>
<CreateMapModal isOpen={isModalOpen} toggle={toggleModal} />
<Button
onClick={toggleModal}
type="link"
className={styles.projectListItemButton}
>
<Icon name="add" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

iconNameBefore="add" in <Button> can be used instead of Icon.

Create a New Map
</Button>
<Button>
<Icon name="trash"></Icon>
</Button>
</td>
</th>
</tr>
))}
</tbody>
</table>
</>
</thead>
<tbody>
{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>
)}
Comment on lines +49 to +64
Copy link
Collaborator

Choose a reason for hiding this comment

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

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>
    );
  }

Copy link
Collaborator

Choose a reason for hiding this comment

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

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?

{data && data.length > 0 ? (
data?.map((proj) => (
<tr key={proj.id} onClick={() => navigateToProject(proj.uuid)}>
<td className={styles.projectName}>{proj.name}</td>
<td>
{proj.ds_project?.value.projectId}
{' - '}
{proj.ds_project?.value.title}
Comment on lines +70 to +72
Copy link
Collaborator

Choose a reason for hiding this comment

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

if there is no associated ds_project, we want to show ---------- like the angular code.

</td>
<td>
<Button
type="link"
className={styles.projectListItemButton}
>
<Icon name="edit-document" />
</Button>
<Button
type="link"
className={styles.projectListItemButton}
>
<Icon name="trash" />
</Button>
</td>
</tr>
))
) : (
<tr>
<td colSpan={3}>
<EmptyTablePlaceholder type="info">
Copy link
Collaborator

Choose a reason for hiding this comment

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

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

No projects or maps found.
Copy link
Collaborator

Choose a reason for hiding this comment

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

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?

<br />
Click Create New Map above to get started.
</EmptyTablePlaceholder>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};

export default ProjectListing;
2 changes: 1 addition & 1 deletion react/src/components/Projects/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { ProjectListing } from './ProjectListing';
export { default } from './ProjectListing';
12 changes: 12 additions & 0 deletions react/src/components/utils/EmptyTablePlaceholder.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/* Table Placeholder */
.empty {
display: flex;
align-items: center;
justify-content: center;
}

.empty > :first-child {
margin-top: 10px;
padding: 50px;
border: 1px solid var(--global-color-primary--dark);
}
25 changes: 25 additions & 0 deletions react/src/components/utils/EmptyTablePlaceholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { SectionMessage } from '../../core-components';
Copy link
Collaborator

Choose a reason for hiding this comment

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

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 in src/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?

import styles from './EmptyTablePlaceholder.module.css';
import React from 'react';

interface EmptyPlaceholderProps {
children?: React.ReactNode;
type: 'error' | 'warning' | 'info' | 'success';
}

export const EmptyTablePlaceholder: React.FC<EmptyPlaceholderProps> = ({
children,
type,
}) => {
return (
<div className={styles['empty']}>
{children ? (
<SectionMessage type={type}>{children}</SectionMessage>
) : (
<SectionMessage type={type}>No data available.</SectionMessage>
)}
</div>
);
};

export default EmptyTablePlaceholder;
1 change: 1 addition & 0 deletions react/src/components/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as EmptyTablePlaceholder } from './EmptyTablePlaceholder';
21 changes: 19 additions & 2 deletions react/src/hazmapper.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import url('@tacc/core-styles/dist/core-styles.base.css');
@import url('@tacc/core-styles/dist/core-styles.portal.css');
@import 'leaflet/dist/leaflet.css';
@import '@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://unpkg.com/[email protected]/dist/mapillary.min.css');

/* for hazmapper specific overwrites of base and portal styles" like,

Expand All @@ -8,3 +10,18 @@
}

*/

/* CSS module styles taken from Angular styles.styl */
:root {
Copy link
Collaborator

Choose a reason for hiding this comment

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

have a question on this but will put in slack.

--global-font-family: 'Raleway', san-serif;
}
html,
body {
height: 100%;
font-family: var(--global-font-family);
}
table,
form,
button {
font-family: inherit;
}
4 changes: 2 additions & 2 deletions react/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
/* prettier-ignore */
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);

@import url('@tacc/core-styles/dist/core-styles.base.css'); /* layer(base);*/
@import url('@tacc/core-styles/dist/core-styles.portal.css'); /* layer(base);*/
@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base);
@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base);

@import url('./hazmapper.css') layer(project);
3 changes: 1 addition & 2 deletions react/src/pages/MainMenu/MainMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import {
} from '../../core-components';
import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser';
import { SystemSelect } from '../../components/Systems';
import { ProjectListing } from '../../components/Projects/ProjectListing';

import ProjectListing from '../../components/Projects';
function MainMenu() {
const {
data: userData,
Expand Down
Loading