From 82ac31a3c4a1964e9ebfd2ba64109ef251ece0cf Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 15:47:59 -0500 Subject: [PATCH 01/18] task/WG-232-React-Listing-UI-clean --- react/package-lock.json | 9 +++ react/package.json | 1 + .../Projects/ProjectListing.module.css | 46 +++++++++++ .../components/Projects/ProjectListing.tsx | 80 ++++++++++--------- react/src/components/Projects/index.ts | 2 +- react/src/hazmapper.css | 20 ++++- react/src/index.css | 4 +- react/src/pages/MainMenu/MainMenu.tsx | 3 +- 8 files changed, 122 insertions(+), 43 deletions(-) create mode 100644 react/src/components/Projects/ProjectListing.module.css diff --git a/react/package-lock.json b/react/package-lock.json index 98be7366..d0ed23c0 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -12,6 +12,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", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", @@ -2650,6 +2651,14 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/react/package.json b/react/package.json index 648f3f86..b36aa704 100644 --- a/react/package.json +++ b/react/package.json @@ -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", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css new file mode 100644 index 00000000..af7ce673 --- /dev/null +++ b/react/src/components/Projects/ProjectListing.module.css @@ -0,0 +1,46 @@ +.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; +} diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 7da6ecf5..f0deb073 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { useProjectsWithDesignSafeInformation } from '../../hooks'; import { Button, LoadingSpinner, Icon } from '../../core-components'; +import styles from './ProjectListing.module.css'; 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(); @@ -20,47 +21,54 @@ export const ProjectListing: React.FC = () => { if (isLoading) { return ; - } + }; if (isError) { return

Unable to retrieve projects

; - } + }; return ( - <> - - - - - - - - - - {data?.map((proj) => ( - navigateToProject(proj.uuid)}> - - - + {data?.map((proj) => ( + navigateToProject(proj.uuid)}> + + + + + ))} + +
MapProject - - -
{proj.name} - {proj.ds_project?.value.projectId}{' '} - {proj.ds_project?.value.title} - - -
{proj.name} + {proj.ds_project?.value.projectId}{' - '} + {proj.ds_project?.value.title} + + + +
+ + ); }; +export default ProjectListing; diff --git a/react/src/components/Projects/index.ts b/react/src/components/Projects/index.ts index d4d7f8d0..abef4bd4 100644 --- a/react/src/components/Projects/index.ts +++ b/react/src/components/Projects/index.ts @@ -1 +1 @@ -export { ProjectListing } from './ProjectListing'; +export { default } from './ProjectListing'; diff --git a/react/src/hazmapper.css b/react/src/hazmapper.css index 21078670..ef734134 100644 --- a/react/src/hazmapper.css +++ b/react/src/hazmapper.css @@ -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/mapillary-js@2.18.0/dist/mapillary.min.css'); /* for hazmapper specific overwrites of base and portal styles" like, @@ -8,3 +10,17 @@ } */ + + +/* CSS module styles taken from Angular styles.styl */ +:root { + --global-font-family: 'Raleway', san-serif; +} +html, +body { + height: 100%; + font-family: var(--global-font-family); +} +table, form, button { + font-family: inherit; +} diff --git a/react/src/index.css b/react/src/index.css index 70e3ac95..27f096d5 100644 --- a/react/src/index.css +++ b/react/src/index.css @@ -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); diff --git a/react/src/pages/MainMenu/MainMenu.tsx b/react/src/pages/MainMenu/MainMenu.tsx index 246aaf18..788d7079 100644 --- a/react/src/pages/MainMenu/MainMenu.tsx +++ b/react/src/pages/MainMenu/MainMenu.tsx @@ -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, From 8304f939c345166381949b4ddb2c74f1d20aff75 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 15:52:42 -0500 Subject: [PATCH 02/18] - Linting --- .../components/Projects/ProjectListing.module.css | 15 ++++++++------- react/src/components/Projects/ProjectListing.tsx | 14 ++++++++------ react/src/hazmapper.css | 9 +++++---- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index af7ce673..ddf9b5e7 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -1,4 +1,4 @@ -.root{ +.root { display: flex; flex-direction: column; width: 100%; @@ -11,28 +11,29 @@ margin-top: 40px; margin-bottom: 40px; } -.projectHeader, .projectHeader th { +.projectHeader, +.projectHeader th { background: #d0d0d0; - position: sticky; + position: sticky; top: 0; z-index: 1; } -.projectListItemButton{ +.projectListItemButton { cursor: pointer; color: initial; margin-right: 10px; } -.projectListItemButton:hover{ +.projectListItemButton:hover { color: #666; } .mapColumn { -width: 30%; + width: 30%; } .projectColumn { -width: 60%; + width: 60%; } .buttonColumn { white-space: nowrap; diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index f0deb073..8f3511fb 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -21,11 +21,11 @@ const ProjectListing: React.FC = () => { if (isLoading) { return ; - }; + } if (isError) { return

Unable to retrieve projects

; - }; + } return (
@@ -42,20 +42,22 @@ const ProjectListing: React.FC = () => { type="link" className={styles.projectListItemButton} > - Create a New Map + + Create a New Map {data?.map((proj) => ( - navigateToProject(proj.uuid)}> + navigateToProject(proj.uuid)}> {proj.name} - {proj.ds_project?.value.projectId}{' - '} + {proj.ds_project?.value.projectId} + {' - '} {proj.ds_project?.value.title} - + diff --git a/react/src/hazmapper.css b/react/src/hazmapper.css index ef734134..83708cfc 100644 --- a/react/src/hazmapper.css +++ b/react/src/hazmapper.css @@ -1,5 +1,5 @@ -@import "leaflet/dist/leaflet.css"; -@import "@fortawesome/fontawesome-free/css/all.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/mapillary-js@2.18.0/dist/mapillary.min.css'); @@ -11,7 +11,6 @@ */ - /* CSS module styles taken from Angular styles.styl */ :root { --global-font-family: 'Raleway', san-serif; @@ -21,6 +20,8 @@ body { height: 100%; font-family: var(--global-font-family); } -table, form, button { +table, +form, +button { font-family: inherit; } From b5c2a4ebdae836da6878be83ca69a602a7cfb495 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 18:12:05 -0500 Subject: [PATCH 03/18] - Adds better response and error handling. - Brings over EmptyTablePlaceholder from TUP UI that CMD collaborated with us on --- .../components/Projects/ProjectListing.tsx | 70 +++++++++++++------ .../utils/EmptyTablePlaceholder.module.css | 12 ++++ .../utils/EmptyTablePlaceholder.tsx | 22 ++++++ react/src/components/utils/index.ts | 1 + 4 files changed, 85 insertions(+), 20 deletions(-) create mode 100644 react/src/components/utils/EmptyTablePlaceholder.module.css create mode 100644 react/src/components/utils/EmptyTablePlaceholder.tsx create mode 100644 react/src/components/utils/index.ts diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 8f3511fb..1111cc80 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -2,6 +2,7 @@ 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'; @@ -23,10 +24,6 @@ const ProjectListing: React.FC = () => { return ; } - if (isError) { - return

Unable to retrieve projects

; - } - return (
@@ -49,28 +46,61 @@ const ProjectListing: React.FC = () => { - {data?.map((proj) => ( - navigateToProject(proj.uuid)}> - {proj.name} - - {proj.ds_project?.value.projectId} - {' - '} - {proj.ds_project?.value.title} - - - - + {isError && ( + + + + There was an error gathering your maps and projects. {''} + + Click here to submit a ticket on DesignSafe. + + + + )} + {data && data.length > 0 ? ( + data?.map((proj) => ( + navigateToProject(proj.uuid)}> + {proj.name} + + {proj.ds_project?.value.projectId} + {' - '} + {proj.ds_project?.value.title} + + + + + + + )) + ) : ( + + + + No projects or maps found. +
Click Create New Map above to get started. + - ))} + )}
); }; + export default ProjectListing; diff --git a/react/src/components/utils/EmptyTablePlaceholder.module.css b/react/src/components/utils/EmptyTablePlaceholder.module.css new file mode 100644 index 00000000..4ec968b9 --- /dev/null +++ b/react/src/components/utils/EmptyTablePlaceholder.module.css @@ -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); +} diff --git a/react/src/components/utils/EmptyTablePlaceholder.tsx b/react/src/components/utils/EmptyTablePlaceholder.tsx new file mode 100644 index 00000000..1d3a4ebb --- /dev/null +++ b/react/src/components/utils/EmptyTablePlaceholder.tsx @@ -0,0 +1,22 @@ +import { SectionMessage } from '../../core-components'; +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 = ({ + children, + type, +}) => { + return ( +
+ {children} +
+ ); +}; + +export default EmptyTablePlaceholder; diff --git a/react/src/components/utils/index.ts b/react/src/components/utils/index.ts new file mode 100644 index 00000000..bfe0cec0 --- /dev/null +++ b/react/src/components/utils/index.ts @@ -0,0 +1 @@ +export { default as EmptyTablePlaceholder } from './EmptyTablePlaceholder'; From e5a481736276561b7cb0fc6ac44eef43fc65a1ba Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 18:17:28 -0500 Subject: [PATCH 04/18] - Linting --- .../components/Projects/ProjectListing.tsx | 40 ++++++++++--------- .../utils/EmptyTablePlaceholder.module.css | 12 +++--- .../utils/EmptyTablePlaceholder.tsx | 7 ++-- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 1111cc80..a0e40477 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -2,7 +2,7 @@ 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 { EmptyTablePlaceholder } from '../utils'; import CreateMapModal from '../CreateMapModal/CreateMapModal'; import { useNavigate } from 'react-router-dom'; @@ -47,20 +47,21 @@ const ProjectListing: React.FC = () => { {isError && ( - - - - There was an error gathering your maps and projects. {''} - - Click here to submit a ticket on DesignSafe. - - - - )} + + + + There was an error gathering your maps and projects. {''} + + Click here to submit a ticket on DesignSafe. + + + + + )} {data && data.length > 0 ? ( data?.map((proj) => ( navigateToProject(proj.uuid)}> @@ -88,11 +89,12 @@ const ProjectListing: React.FC = () => { )) ) : ( - - + + No projects or maps found. -
Click Create New Map above to get started. - +
+ Click Create New Map above to get started. + )} diff --git a/react/src/components/utils/EmptyTablePlaceholder.module.css b/react/src/components/utils/EmptyTablePlaceholder.module.css index 4ec968b9..4f33ab91 100644 --- a/react/src/components/utils/EmptyTablePlaceholder.module.css +++ b/react/src/components/utils/EmptyTablePlaceholder.module.css @@ -1,12 +1,12 @@ /* Table Placeholder */ .empty { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .empty > :first-child { - margin-top: 10px; - padding: 50px; - border: 1px solid var(--global-color-primary--dark); + margin-top: 10px; + padding: 50px; + border: 1px solid var(--global-color-primary--dark); } diff --git a/react/src/components/utils/EmptyTablePlaceholder.tsx b/react/src/components/utils/EmptyTablePlaceholder.tsx index 1d3a4ebb..e2c61420 100644 --- a/react/src/components/utils/EmptyTablePlaceholder.tsx +++ b/react/src/components/utils/EmptyTablePlaceholder.tsx @@ -2,19 +2,18 @@ import { SectionMessage } from '../../core-components'; import styles from './EmptyTablePlaceholder.module.css'; import React from 'react'; - interface EmptyPlaceholderProps { children: React.ReactNode; - type: 'error' | 'warning' | 'info' | 'success'; + type: 'error' | 'warning' | 'info' | 'success'; } export const EmptyTablePlaceholder: React.FC = ({ children, - type, + type, }) => { return (
- {children} + {children}
); }; From 0ff0f14ecf7356ce9af257b832aae0a7886b2e2f Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 18:25:25 -0500 Subject: [PATCH 05/18] - Addresses Type 'ReactNode' is not assignable to type 'NonNullable' error in unit test --- react/src/components/utils/EmptyTablePlaceholder.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/react/src/components/utils/EmptyTablePlaceholder.tsx b/react/src/components/utils/EmptyTablePlaceholder.tsx index e2c61420..63fc8f24 100644 --- a/react/src/components/utils/EmptyTablePlaceholder.tsx +++ b/react/src/components/utils/EmptyTablePlaceholder.tsx @@ -2,18 +2,21 @@ import { SectionMessage } from '../../core-components'; import styles from './EmptyTablePlaceholder.module.css'; import React from 'react'; + interface EmptyPlaceholderProps { - children: React.ReactNode; - type: 'error' | 'warning' | 'info' | 'success'; + children?: React.ReactNode; + type: 'error' | 'warning' | 'info' | 'success'; } export const EmptyTablePlaceholder: React.FC = ({ children, - type, + type, }) => { return (
- {children} + {children ? ( + {children} + ) : No data available.}
); }; From d55959d03362f081f0817135baf579ea01beadc1 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 18:28:12 -0500 Subject: [PATCH 06/18] - Linting --- react/src/components/utils/EmptyTablePlaceholder.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/react/src/components/utils/EmptyTablePlaceholder.tsx b/react/src/components/utils/EmptyTablePlaceholder.tsx index 63fc8f24..2f475c7b 100644 --- a/react/src/components/utils/EmptyTablePlaceholder.tsx +++ b/react/src/components/utils/EmptyTablePlaceholder.tsx @@ -2,21 +2,22 @@ import { SectionMessage } from '../../core-components'; import styles from './EmptyTablePlaceholder.module.css'; import React from 'react'; - interface EmptyPlaceholderProps { children?: React.ReactNode; - type: 'error' | 'warning' | 'info' | 'success'; + type: 'error' | 'warning' | 'info' | 'success'; } export const EmptyTablePlaceholder: React.FC = ({ children, - type, + type, }) => { return (
{children ? ( {children} - ) : No data available.} + ) : ( + No data available. + )}
); }; From dfa4af2dcf9952091d3b94a5b382533c41ee82e4 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Mon, 28 Oct 2024 17:16:43 -0500 Subject: [PATCH 07/18] - Address changes - removed fontawesome, error handling, removed global styles to apply at end --- react/package-lock.json | 9 -- react/package.json | 1 - .../Projects/ProjectListing.module.css | 45 ++------ .../components/Projects/ProjectListing.tsx | 104 ++++++++---------- react/src/hazmapper.css | 17 --- 5 files changed, 58 insertions(+), 118 deletions(-) diff --git a/react/package-lock.json b/react/package-lock.json index d0ed23c0..98be7366 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -12,7 +12,6 @@ "@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", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", @@ -2651,14 +2650,6 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" }, - "node_modules/@fortawesome/fontawesome-free": { - "version": "6.6.0", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", - "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", - "engines": { - "node": ">=6" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/react/package.json b/react/package.json index b36aa704..648f3f86 100644 --- a/react/package.json +++ b/react/package.json @@ -36,7 +36,6 @@ "@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", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index ddf9b5e7..1e00257c 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -1,47 +1,26 @@ .root { display: flex; - flex-direction: column; width: 100%; } .projectList { - height: 270px; - border-collapse: collapse; - align-self: center; + width: 100%; overflow-y: scroll; - margin-top: 40px; - margin-bottom: 40px; + padding: 10px; } -.projectHeader, -.projectHeader th { +.projectList 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; + max-width: fit-content; + text-overflow: ellipsis; } - -.projectName { +.projectList tr, td { max-width: fit-content; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } + +.buttonColumn { + white-space: nowrap; + overflow:hidden; + text-align:end; +} diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index a0e40477..284a7626 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -18,89 +18,77 @@ const ProjectListing: React.FC = () => { setIsModalOpen(!isModalOpen); }; - const { data, isLoading, isError } = useProjectsWithDesignSafeInformation(); + const { data, isLoading, isError, error } = + useProjectsWithDesignSafeInformation(); if (isLoading) { return ; } + if (isError) { + return ( +
+ + There was an error gathering your maps.{' '} + {/* @ts-ignore: Suppress error typing issues */} + {error?.message ? error?.message : 'An unknown error occurred.'} +
+ + Click here to submit a ticket on DesignSafe. + + +
+ ); + } + return (
-
- - + {data && data.length > 0 ? ( +
+ - - + + - {isError && ( - - navigateToProject(proj.uuid)}> + + - - )} - {data && data.length > 0 ? ( - data?.map((proj) => ( - navigateToProject(proj.uuid)}> - - - - - )) - ) : ( - - - )} + ))}
MapProjectMapProject
- - There was an error gathering your maps and projects. {''} - - Click here to submit a ticket on DesignSafe. - - + {data?.map((proj) => ( +
{proj.name} + {proj.ds_project?.value.projectId} + {' - '} + {proj.ds_project?.value.title}
{proj.name} - {proj.ds_project?.value.projectId} - {' - '} - {proj.ds_project?.value.title} - - - -
- - No projects or maps found. -
- Click Create New Map above to get started. - + 		+ +
-
+ ) : ( + + No maps found. +
+ Click Create New Map above to get started. + + )}
); }; diff --git a/react/src/hazmapper.css b/react/src/hazmapper.css index 83708cfc..f29edc24 100644 --- a/react/src/hazmapper.css +++ b/react/src/hazmapper.css @@ -1,6 +1,4 @@ @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/mapillary-js@2.18.0/dist/mapillary.min.css'); /* for hazmapper specific overwrites of base and portal styles" like, @@ -10,18 +8,3 @@ } */ - -/* CSS module styles taken from Angular styles.styl */ -:root { - --global-font-family: 'Raleway', san-serif; -} -html, -body { - height: 100%; - font-family: var(--global-font-family); -} -table, -form, -button { - font-family: inherit; -} From 555c8ae3c7cf38f7039c79e56fd505aaad60bbe6 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 14:35:23 -0500 Subject: [PATCH 08/18] - Addresses changes - Centers error and no data messages - Linting - TODO hover behavior --- .../Projects/ProjectListing.module.css | 8 +- .../components/Projects/ProjectListing.tsx | 94 ++++++++++--------- .../utils/EmptyTablePlaceholder.tsx | 2 +- react/src/hazmapper.css | 5 +- react/src/pages/MainMenu/MainMenu.tsx | 2 +- 5 files changed, 56 insertions(+), 55 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index 1e00257c..536578cf 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -1,5 +1,6 @@ .root { display: flex; + justify-content: center; width: 100%; } .projectList { @@ -12,7 +13,8 @@ max-width: fit-content; text-overflow: ellipsis; } -.projectList tr, td { +.projectList tr, +td { max-width: fit-content; text-overflow: ellipsis; overflow: hidden; @@ -21,6 +23,6 @@ .buttonColumn { white-space: nowrap; - overflow:hidden; - text-align:end; + overflow: hidden; + text-align: end; } diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 2664be2a..91b481af 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -1,6 +1,8 @@ import React, { useState } from 'react'; import { useProjectsWithDesignSafeInformation } from '@hazmapper/hooks'; -import { Button, LoadingSpinner, Icon } from '@tacc/core-components'; +import { Button, LoadingSpinner, SectionMessage } from '@tacc/core-components'; +import { EmptyTablePlaceholder } from '../utils'; +import styles from './ProjectListing.module.css'; import CreateMapModal from '../CreateMapModal/CreateMapModal'; import { useNavigate } from 'react-router-dom'; @@ -26,46 +28,42 @@ const ProjectListing: React.FC = () => { if (isError) { return (
- - There was an error gathering your maps.{' '} - {/* @ts-ignore: Suppress error typing issues */} - {error?.message ? error?.message : 'An unknown error occurred.'} -
- - Click here to submit a ticket on DesignSafe. - - -
+ + There was an error gathering your maps.{' '} + {/* @ts-ignore: Suppress error typing issues */} + {error?.message ? error?.message : 'An unknown error occurred.'} +
+ + Click here to submit a ticket to DesignSafe. + + +
); } return (
- {data && data.length > 0 ? ( - - - - - - - - - - {data?.map((proj) => ( - navigateToProject(proj.uuid)}> +
MapProject - - -
+ + + + + + + + + {data && data?.length > 0 ? ( + data.map((proj) => ( + navigateToProject(proj.uuid)} > - ))} - -
MapProject + + +
{proj.name} {proj.ds_project?.value.projectId} @@ -77,16 +75,20 @@ const ProjectListing: React.FC = () => {
- ) : ( - - No maps found. -
- Click Create New Map above to get started. - - )} + )) + ) : ( + + + + No maps found. +
+ to get started. + + + + )} + +
); }; diff --git a/react/src/components/utils/EmptyTablePlaceholder.tsx b/react/src/components/utils/EmptyTablePlaceholder.tsx index 2f475c7b..18c503d6 100644 --- a/react/src/components/utils/EmptyTablePlaceholder.tsx +++ b/react/src/components/utils/EmptyTablePlaceholder.tsx @@ -1,4 +1,4 @@ -import { SectionMessage } from '../../core-components'; +import { SectionMessage } from '@tacc/core-components'; import styles from './EmptyTablePlaceholder.module.css'; import React from 'react'; diff --git a/react/src/hazmapper.css b/react/src/hazmapper.css index f29edc24..32da314a 100644 --- a/react/src/hazmapper.css +++ b/react/src/hazmapper.css @@ -1,10 +1,7 @@ -@import 'leaflet/dist/leaflet.css'; -@import url('https://unpkg.com/mapillary-js@2.18.0/dist/mapillary.min.css'); - /* for hazmapper specific overwrites of base and portal styles" like, :root { - --global-color-accent--xx-light: blue; + --global-color-accent--normal: blue; } */ diff --git a/react/src/pages/MainMenu/MainMenu.tsx b/react/src/pages/MainMenu/MainMenu.tsx index 46959794..e1953ac8 100644 --- a/react/src/pages/MainMenu/MainMenu.tsx +++ b/react/src/pages/MainMenu/MainMenu.tsx @@ -7,7 +7,7 @@ import { } from '@tacc/core-components'; import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser'; import { SystemSelect } from '@hazmapper/components/Systems'; -import ProjectListing from '@hazmapper/components/Projects/ProjectListing'; +import ProjectListing from '@hazmapper/components/Projects/ProjectListing'; function MainMenu() { const { From 16e3a3e6ab1fa79b5371c54f448abe3dd2c4d84c Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 14:37:50 -0500 Subject: [PATCH 09/18] - Linting --- .../components/Projects/ProjectListing.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 91b481af..34d99960 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -41,7 +41,7 @@ const ProjectListing: React.FC = () => { Click here to submit a ticket to DesignSafe. - + ); } @@ -63,7 +63,7 @@ const ProjectListing: React.FC = () => { {data && data?.length > 0 ? ( data.map((proj) => ( - navigateToProject(proj.uuid)} > + navigateToProject(proj.uuid)}> {proj.name} {proj.ds_project?.value.projectId} @@ -79,12 +79,15 @@ const ProjectListing: React.FC = () => { ) : ( - - No maps found. -
- to get started. - - + + No maps found. +
+ {' '} + to get started. + + )} From ee9fc43fe15fbd9884da63a71e252b951791e728 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 14:50:52 -0500 Subject: [PATCH 10/18] - Undoing unnecessary diff --- react/src/components/Projects/ProjectListing.module.css | 5 +++++ react/src/components/Projects/ProjectListing.tsx | 2 +- react/src/hazmapper.css | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index 536578cf..f41b577a 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -21,6 +21,11 @@ td { white-space: nowrap; } +.projectList tr:hover td { + color: white; + background-color: ; +} + .buttonColumn { white-space: nowrap; overflow: hidden; diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 34d99960..1649083c 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -30,7 +30,7 @@ const ProjectListing: React.FC = () => {
There was an error gathering your maps.{' '} - {/* @ts-ignore: Suppress error typing issues */} + {/*@ts-ignore: Suppress error typing issues*/} {error?.message ? error?.message : 'An unknown error occurred.'}
Date: Wed, 30 Oct 2024 14:52:45 -0500 Subject: [PATCH 11/18] - Adds hover function --- react/src/components/Projects/ProjectListing.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index f41b577a..b744c9bd 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -23,7 +23,7 @@ td { .projectList tr:hover td { color: white; - background-color: ; + background-color: rgb(60, 111, 219); } .buttonColumn { From 9a6dd501f172726988d5a56a3b550d7c94da804c Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 14:53:20 -0500 Subject: [PATCH 12/18] - Fixes hover change to reduce diff --- react/src/components/Projects/ProjectListing.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index b744c9bd..9a6254ec 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -20,7 +20,6 @@ td { overflow: hidden; white-space: nowrap; } - .projectList tr:hover td { color: white; background-color: rgb(60, 111, 219); From 3072b0cbdeb0348caaaa88a9432a11074a1c168c Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 16:53:45 -0500 Subject: [PATCH 13/18] - Adds placeholder for empty DS projects --- react/src/components/Projects/ProjectListing.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 1649083c..ab46e8b4 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -66,9 +66,10 @@ const ProjectListing: React.FC = () => { navigateToProject(proj.uuid)}> {proj.name} - {proj.ds_project?.value.projectId} - {' - '} - {proj.ds_project?.value.title} + {proj.ds_project + ? `${proj.ds_project?.value.projectId} | + ${proj.ds_project?.value.title}` + : '---------'} From d9b260724b9230efaaa46bccca6fabd2e65f7ddc Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 17:06:43 -0500 Subject: [PATCH 14/18] - Removes issue with width - Adds width for error message --- react/src/components/Projects/ProjectListing.module.css | 5 ++++- react/src/components/Projects/ProjectListing.tsx | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index 9a6254ec..03da461b 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -1,6 +1,5 @@ .root { display: flex; - justify-content: center; width: 100%; } .projectList { @@ -8,6 +7,10 @@ overflow-y: scroll; padding: 10px; } +.errorMessage { + width: 100%; + padding: 10px; +} .projectList th { background: #d0d0d0; max-width: fit-content; diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index ab46e8b4..bf394762 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -28,6 +28,7 @@ const ProjectListing: React.FC = () => { if (isError) { return ( ); } From bee9325ebe7ba40a97c1db5de2e708a35d7a6b2d Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Wed, 30 Oct 2024 17:08:07 -0500 Subject: [PATCH 15/18] - Linting --- .../components/Projects/ProjectListing.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index bf394762..08201a1c 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -29,19 +29,19 @@ const ProjectListing: React.FC = () => { return (
- - There was an error gathering your maps.{' '} - {/*@ts-ignore: Suppress error typing issues*/} - {error?.message ? error?.message : 'An unknown error occurred.'} -
- - Click here to submit a ticket to DesignSafe. - - + + There was an error gathering your maps.{' '} + {/*@ts-ignore: Suppress error typing issues*/} + {error?.message ? error?.message : 'An unknown error occurred.'} +
+ + Click here to submit a ticket to DesignSafe. + +
); @@ -68,7 +68,7 @@ const ProjectListing: React.FC = () => { navigateToProject(proj.uuid)}> {proj.name} - {proj.ds_project + {proj.ds_project ? `${proj.ds_project?.value.projectId} | ${proj.ds_project?.value.title}` : '---------'} From ec0f60e33c2835cd24957cac2ff80deef28372a7 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Fri, 8 Nov 2024 19:58:08 -0600 Subject: [PATCH 16/18] - Casts error message to avoid type issues - Addresses incomplete merge - Adds style so icon changes color on hover --- .../Projects/ProjectListing.module.css | 6 ++- .../components/Projects/ProjectListing.tsx | 37 ++++++++----------- react/src/hooks/projects/useProjects.ts | 11 ++++-- 3 files changed, 27 insertions(+), 27 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index 03da461b..f49d24bc 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -25,9 +25,11 @@ td { } .projectList tr:hover td { color: white; - background-color: rgb(60, 111, 219); + background-color: var(--global-color-accent--light); +} +.projectList tr:hover td button { + color: white; } - .buttonColumn { white-space: nowrap; overflow: hidden; diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 1dd42aca..5552197b 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -35,7 +35,6 @@ const ProjectListing: React.FC = () => {
There was an error gathering your maps.{' '} - {/*@ts-ignore: Suppress error typing issues*/} {error?.message ? error?.message : 'An unknown error occurred.'}
{ - + )) ) : ( - - - - No maps found. -
- {' '} - to get started. - - - - - - - + + + No maps found. +
+ {' '} + to get started. + + )} - {selectedProjectForDeletion && ( => { const query = useGet({ endpoint: '/projects/', @@ -44,7 +48,8 @@ export const useDsProjects = (): UseQueryResult< }; export function useProjectsWithDesignSafeInformation(): UseQueryResult< - Project[] + Project[], + QueryError > { const dsProjectQuery = useDsProjects(); const projectQuery = useProjects(); @@ -72,8 +77,8 @@ export function useProjectsWithDesignSafeInformation(): UseQueryResult< isLoading: dsProjectQuery.isLoading || projectQuery.isLoading, isError: dsProjectQuery.error || projectQuery.error, isSuccess: dsProjectQuery.isSuccess && projectQuery.isSuccess, - error: dsProjectQuery.error || projectQuery.error, - } as UseQueryResult; + error: (dsProjectQuery.error || projectQuery.error) as QueryError, + } as UseQueryResult; } export const useDeleteProject = (projectId: number) => { From fab0b1481a05962613fa22dbc11ce5826e487e0c Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 14 Nov 2024 14:46:03 -0600 Subject: [PATCH 17/18] - Ensures content fits within column containers --- .../Projects/ProjectListing.module.css | 23 +++++++++++++++---- .../components/Projects/ProjectListing.tsx | 10 ++++---- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index f49d24bc..38967a99 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -4,7 +4,7 @@ } .projectList { width: 100%; - overflow-y: scroll; + table-layout: fixed; padding: 10px; } .errorMessage { @@ -13,12 +13,13 @@ } .projectList th { background: #d0d0d0; - max-width: fit-content; text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .projectList tr, td { - max-width: fit-content; + width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -30,8 +31,20 @@ td { .projectList tr:hover td button { color: white; } +.mapColumn { + width: 42% +} +.projectColumn { + width: 42% +} .buttonColumn { - white-space: nowrap; - overflow: hidden; + width: 16%; text-align: end; } +.buttonColumn button { + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + justify-content: flex-start; +} diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 5552197b..b857b2b3 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -55,11 +55,11 @@ const ProjectListing: React.FC = () => { - - + + @@ -69,8 +69,8 @@ const ProjectListing: React.FC = () => { {data && data?.length > 0 ? ( data.map((proj) => ( navigateToProject(proj.uuid)}> - - +
MapProjectMapProject -
{proj.name} + {proj.name} {proj.ds_project ? `${proj.ds_project?.value.projectId} | ${proj.ds_project?.value.title}` From c90c18de3f2fdb1511fc698c978980bd56a2e7b9 Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 14 Nov 2024 14:50:11 -0600 Subject: [PATCH 18/18] - Linting --- react/src/components/Projects/ProjectListing.module.css | 4 ++-- react/src/components/Projects/ProjectListing.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css index 38967a99..554d5860 100644 --- a/react/src/components/Projects/ProjectListing.module.css +++ b/react/src/components/Projects/ProjectListing.module.css @@ -32,10 +32,10 @@ td { color: white; } .mapColumn { - width: 42% + width: 42%; } .projectColumn { - width: 42% + width: 42%; } .buttonColumn { width: 16%; diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index b857b2b3..a99d5171 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -59,7 +59,7 @@ const ProjectListing: React.FC = () => { Project -