From 0287b186135431c67ddb01834b12e65bd599aaf3 Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Fri, 29 Oct 2021 10:20:14 -0700 Subject: [PATCH 1/6] UI updates to GCP-projects plugin Adds the following to the project list page: * pagination * filtering * sorting * rows per page * show/hide columns Makes breadcrumb a link back to project list for the project details and new project views. In project list page, updates New project button to use RouterLink instead of href to avoid login prompt. In project details view, links to project details and logs now work, clicking on these will open the project or logs in GCP in new tab. Signed-off-by: Jeremy Guarini --- plugins/gcp-projects/package.json | 1 + .../NewProjectPage/NewProjectPage.tsx | 43 +++-- .../ProjectDetailsPage/ProjectDetailsPage.tsx | 51 ++++-- .../ProjectListPage/ProjectListPage.tsx | 161 +++++++++++------- yarn.lock | 30 +++- 5 files changed, 186 insertions(+), 100 deletions(-) diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json index 65458ea88b..71b212a698 100644 --- a/plugins/gcp-projects/package.json +++ b/plugins/gcp-projects/package.json @@ -35,6 +35,7 @@ "@backstage/core-plugin-api": "^0.1.12", "@backstage/theme": "^0.2.12", "@material-ui/core": "^4.12.2", + "@material-ui/data-grid": "^4.0.0-alpha.37", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", "react": "^16.13.1", diff --git a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx index 584cffc50c..5ecc7f15d4 100644 --- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx +++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx @@ -28,6 +28,10 @@ import { StructuredMetadataTable, SupportButton, } from '@backstage/core-components'; +import { Link as RouterLink } from 'react-router-dom'; + +import { useRouteRef } from '@backstage/core-plugin-api'; +import { rootRouteRef } from '../../routes'; export const Project = () => { const [projectName, setProjectName] = useState(''); @@ -79,18 +83,20 @@ export const Project = () => { All your software catalog entities diff --git a/yarn.lock b/yarn.lock index 517d66ba0c..fc66a02031 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4416,6 +4416,16 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/data-grid@^4.0.0-alpha.37": + version "4.0.0-alpha.37" + resolved "https://registry.npmjs.org/@material-ui/data-grid/-/data-grid-4.0.0-alpha.37.tgz#89d907c4e94e6a0db4e89e4f59160f7811546ca2" + integrity sha512-3T2AG31aad/lWLMLwn1XUP4mUf3H9YZES17dGuYByzkRLCXbBZHBTPEnCctWukajzwm+v0KGg3QpwitGoiDAjA== + dependencies: + "@material-ui/utils" "^5.0.0-alpha.14" + clsx "^1.0.4" + prop-types "^15.7.2" + reselect "^4.0.0" + "@material-ui/icons@^4.11.2", "@material-ui/icons@^4.9.1": version "4.11.2" resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" @@ -4503,6 +4513,17 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" +"@material-ui/utils@^5.0.0-alpha.14": + version "5.0.0-beta.5" + resolved "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-beta.5.tgz#de492037e1f1f0910fda32e6f11b66dfcde2a1c2" + integrity sha512-wtJ3ovXWZdTAz5eLBqvMpYH/IBJb3qMQbGCyL1i00+sf7AUlAuv4QLx+QtX/siA6L7IpxUQVfqpoCpQH1eYRpQ== + dependencies: + "@babel/runtime" "^7.14.8" + "@types/prop-types" "^15.7.4" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.7.2" + react-is "^17.0.2" + "@mattiasbuelens/web-streams-polyfill@^0.2.0": version "0.2.1" resolved "https://registry.npmjs.org/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.2.1.tgz#d7c4aa94f98084ec0787be084d47167d62ea5f67" @@ -7434,7 +7455,7 @@ resolved "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601" integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ== -"@types/prop-types@*", "@types/prop-types@^15.7.3": +"@types/prop-types@*", "@types/prop-types@^15.7.3", "@types/prop-types@^15.7.4": version "15.7.4" resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== @@ -7475,6 +7496,13 @@ dependencies: "@types/react" "*" +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + "@types/react-lazylog@^4.5.0": version "4.5.1" resolved "https://registry.npmjs.org/@types/react-lazylog/-/react-lazylog-4.5.1.tgz#babb5d814f7035b5434518769975e12f299356a8" From 741bcb168e875e537d7851f32195d9d30102d806 Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Fri, 29 Oct 2021 16:55:03 -0700 Subject: [PATCH 2/6] add changeset Signed-off-by: Jeremy Guarini --- .changeset/eight-months-agree.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 .changeset/eight-months-agree.md diff --git a/.changeset/eight-months-agree.md b/.changeset/eight-months-agree.md new file mode 100644 index 0000000000..372c0b624c --- /dev/null +++ b/.changeset/eight-months-agree.md @@ -0,0 +1,19 @@ +--- +'@backstage/plugin-gcp-projects': patch +--- + +UI updates to GCP-projects plugin + +Adds the following to the project list page: + +- pagination +- filtering +- sorting +- rows per page +- show/hide columns + +Makes breadcrumb a link back to project list for the project details and new project views. + +In project list page, updates New project button to use RouterLink instead of href to avoid login prompt. + +In project details view, links to project details and logs now work, clicking on these will open the project or logs in GCP in new tab. From 1b8efd52f0b1aab5c7860c0ef71675bdd49ce95e Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Mon, 8 Nov 2021 10:33:40 -0800 Subject: [PATCH 3/6] address vale issue with href Signed-off-by: Jeremy Guarini --- .changeset/eight-months-agree.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eight-months-agree.md b/.changeset/eight-months-agree.md index 372c0b624c..0f117d8a40 100644 --- a/.changeset/eight-months-agree.md +++ b/.changeset/eight-months-agree.md @@ -14,6 +14,6 @@ Adds the following to the project list page: Makes breadcrumb a link back to project list for the project details and new project views. -In project list page, updates New project button to use RouterLink instead of href to avoid login prompt. +In project list page, updates New project button to use RouterLink instead of `href` to avoid login prompt. In project details view, links to project details and logs now work, clicking on these will open the project or logs in GCP in new tab. From fdc35dbff7e2226b9230ec8a52552ddb36f2bb73 Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Tue, 9 Nov 2021 14:18:54 -0800 Subject: [PATCH 4/6] swap out data-grid for material-table Signed-off-by: Jeremy Guarini --- plugins/gcp-projects/package.json | 2 +- .../ProjectListPage/ProjectListPage.tsx | 156 +++++++++--------- 2 files changed, 80 insertions(+), 78 deletions(-) diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json index 71b212a698..48205e4fd8 100644 --- a/plugins/gcp-projects/package.json +++ b/plugins/gcp-projects/package.json @@ -35,9 +35,9 @@ "@backstage/core-plugin-api": "^0.1.12", "@backstage/theme": "^0.2.12", "@material-ui/core": "^4.12.2", - "@material-ui/data-grid": "^4.0.0-alpha.37", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", + "material-table": "^1.69.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^6.0.0-beta.0", diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index e4137f96c7..2797d17d0d 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -16,8 +16,17 @@ // NEEDS WORK import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core'; -import { DataGrid, GridColDef, GridCellParams } from '@material-ui/data-grid'; -import React from 'react'; +import MaterialTable from 'material-table'; +import ArrowDownward from '@material-ui/icons/ArrowDownward'; +import ChevronLeft from '@material-ui/icons/ChevronLeft'; +import ChevronRight from '@material-ui/icons/ChevronRight'; +import Clear from '@material-ui/icons/Clear'; +import FilterList from '@material-ui/icons/FilterList'; +import FirstPage from '@material-ui/icons/FirstPage'; +import LastPage from '@material-ui/icons/LastPage'; +import Search from '@material-ui/icons/Search'; +import React, { forwardRef } from 'react'; + import { useAsync } from 'react-use'; import { gcpApiRef, Project } from '../../api'; @@ -59,18 +68,6 @@ const PageContents = () => { const { loading, error, value } = useAsync(() => api.listProjects()); - const [page, setPage] = React.useState(0); - const [rowsPerPage, setRowsPerPage] = React.useState(10); - - const handleChangePage = (newPage: number) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (pageSize: number) => { - setRowsPerPage(pageSize); - setPage(0); - }; - if (loading) { return ; } else if (error) { @@ -81,78 +78,83 @@ const PageContents = () => { ); } - function renderLink(params: GridCellParams) { + function renderLink(id: string) { return ( - + - + ); } - const columns: GridColDef[] = [ - { - align: 'left', - field: 'name', - flex: 1, - headerAlign: 'left', - headerName: 'Name', - }, - { - align: 'left', - field: 'projectNumber', - flex: 0.6, - headerAlign: 'left', - headerName: 'Project Number', - }, - { - align: 'left', - field: 'projectID', - flex: 1, - headerAlign: 'left', - headerName: 'Project ID', - renderCell: renderLink, - }, - { - align: 'left', - field: 'state', - flex: 0.6, - headerAlign: 'left', - headerName: 'State', - }, - { - align: 'left', - field: 'creationTime', - flex: 0.7, - headerAlign: 'left', - headerName: 'Creation Time', - }, - ]; - - const rows = - value?.map((project: Project) => ({ - id: project.projectId, - name: project.name, - projectNumber: project?.projectNumber || 'Error', - projectID: project.projectId, - state: project?.lifecycleState || 'Error', - creationTime: project?.createTime || 'Error', - })) || []; - return (
- ( + + )), + FirstPage: forwardRef((props, ref) => ( + + )), + LastPage: forwardRef((props, ref) => ( + + )), + NextPage: forwardRef((props, ref) => ( + + )), + PreviousPage: forwardRef((props, ref) => ( + + )), + ResetSearch: forwardRef((props, ref) => ( + + )), + Search: forwardRef((props, ref) => ), + SortArrow: forwardRef((props, ref) => ( + + )), + }} + columns={[ + { + field: 'name', + title: 'Name', + defaultSort: 'asc', + }, + { + field: 'projectNumber', + title: 'Project Number', + }, + { + field: 'projectID', + title: 'Project ID', + render: (rowData: { id: string }) => renderLink(rowData.id), + }, + { + field: 'state', + title: 'State', + }, + { + field: 'creationTime', + title: 'Creation Time', + }, + ]} + data={ + value?.map((project: Project) => ({ + id: project.projectId, + name: project.name, + projectNumber: project?.projectNumber || 'Error', + projectID: project.projectId, + state: project?.lifecycleState || 'Error', + creationTime: project?.createTime || 'Error', + })) || [] + } + options={{ + filtering: true, + pageSize: 5, + pageSizeOptions: [5, 10, 25, 50, 100], + showTitle: false, + }} />
); From 1e33ce7407ce162bf706cc805aa3cd87173feded Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Thu, 11 Nov 2021 12:41:30 -0800 Subject: [PATCH 5/6] swapout material-table for backstage table Signed-off-by: Jeremy Guarini --- plugins/gcp-projects/package.json | 1 - .../ProjectListPage/ProjectListPage.tsx | 40 ++----------------- 2 files changed, 3 insertions(+), 38 deletions(-) diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json index 48205e4fd8..65458ea88b 100644 --- a/plugins/gcp-projects/package.json +++ b/plugins/gcp-projects/package.json @@ -37,7 +37,6 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", - "material-table": "^1.69.3", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^6.0.0-beta.0", diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx index 2797d17d0d..b37dc2fa50 100644 --- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx +++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx @@ -16,16 +16,7 @@ // NEEDS WORK import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core'; -import MaterialTable from 'material-table'; -import ArrowDownward from '@material-ui/icons/ArrowDownward'; -import ChevronLeft from '@material-ui/icons/ChevronLeft'; -import ChevronRight from '@material-ui/icons/ChevronRight'; -import Clear from '@material-ui/icons/Clear'; -import FilterList from '@material-ui/icons/FilterList'; -import FirstPage from '@material-ui/icons/FirstPage'; -import LastPage from '@material-ui/icons/LastPage'; -import Search from '@material-ui/icons/Search'; -import React, { forwardRef } from 'react'; +import React from 'react'; import { useAsync } from 'react-use'; import { gcpApiRef, Project } from '../../api'; @@ -37,6 +28,7 @@ import { HeaderLabel, Link, Page, + Table, SupportButton, WarningPanel, } from '@backstage/core-components'; @@ -90,31 +82,7 @@ const PageContents = () => { return (
- ( - - )), - FirstPage: forwardRef((props, ref) => ( - - )), - LastPage: forwardRef((props, ref) => ( - - )), - NextPage: forwardRef((props, ref) => ( - - )), - PreviousPage: forwardRef((props, ref) => ( - - )), - ResetSearch: forwardRef((props, ref) => ( - - )), - Search: forwardRef((props, ref) => ), - SortArrow: forwardRef((props, ref) => ( - - )), - }} + { })) || [] } options={{ - filtering: true, pageSize: 5, pageSizeOptions: [5, 10, 25, 50, 100], - showTitle: false, }} /> From 4f3ba47bf362446f47ec29c05507d351724dee84 Mon Sep 17 00:00:00 2001 From: Jeremy Guarini Date: Thu, 11 Nov 2021 14:49:40 -0800 Subject: [PATCH 6/6] ran yarn install to clear out data-grid dependency Signed-off-by: Jeremy Guarini --- yarn.lock | 30 +----------------------------- 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/yarn.lock b/yarn.lock index fc66a02031..517d66ba0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4416,16 +4416,6 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" -"@material-ui/data-grid@^4.0.0-alpha.37": - version "4.0.0-alpha.37" - resolved "https://registry.npmjs.org/@material-ui/data-grid/-/data-grid-4.0.0-alpha.37.tgz#89d907c4e94e6a0db4e89e4f59160f7811546ca2" - integrity sha512-3T2AG31aad/lWLMLwn1XUP4mUf3H9YZES17dGuYByzkRLCXbBZHBTPEnCctWukajzwm+v0KGg3QpwitGoiDAjA== - dependencies: - "@material-ui/utils" "^5.0.0-alpha.14" - clsx "^1.0.4" - prop-types "^15.7.2" - reselect "^4.0.0" - "@material-ui/icons@^4.11.2", "@material-ui/icons@^4.9.1": version "4.11.2" resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" @@ -4513,17 +4503,6 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" -"@material-ui/utils@^5.0.0-alpha.14": - version "5.0.0-beta.5" - resolved "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-beta.5.tgz#de492037e1f1f0910fda32e6f11b66dfcde2a1c2" - integrity sha512-wtJ3ovXWZdTAz5eLBqvMpYH/IBJb3qMQbGCyL1i00+sf7AUlAuv4QLx+QtX/siA6L7IpxUQVfqpoCpQH1eYRpQ== - dependencies: - "@babel/runtime" "^7.14.8" - "@types/prop-types" "^15.7.4" - "@types/react-is" "^16.7.1 || ^17.0.0" - prop-types "^15.7.2" - react-is "^17.0.2" - "@mattiasbuelens/web-streams-polyfill@^0.2.0": version "0.2.1" resolved "https://registry.npmjs.org/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.2.1.tgz#d7c4aa94f98084ec0787be084d47167d62ea5f67" @@ -7455,7 +7434,7 @@ resolved "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601" integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ== -"@types/prop-types@*", "@types/prop-types@^15.7.3", "@types/prop-types@^15.7.4": +"@types/prop-types@*", "@types/prop-types@^15.7.3": version "15.7.4" resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== @@ -7496,13 +7475,6 @@ dependencies: "@types/react" "*" -"@types/react-is@^16.7.1 || ^17.0.0": - version "17.0.3" - resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" - integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== - dependencies: - "@types/react" "*" - "@types/react-lazylog@^4.5.0": version "4.5.1" resolved "https://registry.npmjs.org/@types/react-lazylog/-/react-lazylog-4.5.1.tgz#babb5d814f7035b5434518769975e12f299356a8"