diff --git a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
index 0eddcf09e5..f09044f3ab 100644
--- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import React, { FC, useState } from 'react';
+import React, { FC, useState, Fragment } from 'react';
import { Grid, Button, TextField } from '@material-ui/core';
import {
@@ -24,9 +24,14 @@ import {
SimpleStepper,
SimpleStepperStep,
StructuredMetadataTable,
+ HeaderLabel,
+ Page,
+ Header,
+ pageTheme,
+ SupportButton,
} from '@backstage/core';
-export const NewProjectPage: FC<{}> = () => {
+export const Project: FC<{}> = () => {
const [projectName, setProjectName] = useState('');
const [projectId, setProjectId] = useState('');
const [done, setDone] = useState(false);
@@ -38,10 +43,9 @@ export const NewProjectPage: FC<{}> = () => {
return (
-
-
-
+
+
= () => {
/>
+
+
- {done === true ? (
-
-
-
-
-
-
-
-
-
- ) : (
-
- )}
);
};
+
+const labels = (
+ <>
+
+
+
+);
+
+export const NewProjectPage = () => {
+ return (
+
+
+
+
+ Support Button
+
+
+
+
+ );
+};
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
index d9721bf549..713918d8a2 100644
--- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
@@ -28,10 +28,19 @@ import {
Theme,
Typography,
} from '@material-ui/core';
+import {
+ useApi,
+ googleAuthApiRef,
+ HeaderLabel,
+ Page,
+ Header,
+ pageTheme,
+ SupportButton,
+ Content,
+ ContentHeader,
+} from '@backstage/core';
import React from 'react';
-import { useLocation } from 'react-router-dom';
import { useAsync } from 'react-use';
-import { Link, useApi, googleAuthApiRef } from '@backstage/core';
import { GCPApiRef } from '../../api';
const useStyles = makeStyles(theme => ({
@@ -47,7 +56,7 @@ const useStyles = makeStyles(theme => ({
},
}));
-export const ProjectDetailsPage = () => {
+const DetailsPage = () => {
const api = useApi(GCPApiRef);
const googleApi = useApi(googleAuthApiRef);
const token = googleApi.getAccessToken(
@@ -55,7 +64,6 @@ export const ProjectDetailsPage = () => {
);
const classes = useStyles();
- const location = useLocation();
const status = useAsync(
() =>
api.getProject(
@@ -78,76 +86,87 @@ export const ProjectDetailsPage = () => {
const details = status.value;
return (
-
-
-
-
- <
-
-
- Build Details
-
-
-
-
-
-
- Name
-
- {details?.name}
-
-
-
- Project Number
-
- {details?.projectNumber}
-
-
-
- Project ID
-
- {details?.projectId}
-
-
-
- State
-
-
- {details?.lifecycleState}
-
-
-
-
- Creation Time
-
- {details?.createTime}
-
-
-
- Links
-
-
-
- {details?.name && (
-
- )}
- {details?.name && (
-
- )}
-
-
-
-
-
-
-
+
+
+
+ Name
+
+ {details?.name}
+
+
+
+ Project Number
+
+ {details?.projectNumber}
+
+
+
+ Project ID
+
+ {details?.projectId}
+
+
+
+ State
+
+ {details?.lifecycleState}
+
+
+
+ Creation Time
+
+ {details?.createTime}
+
+
+
+ Links
+
+
+
+ {details?.name && (
+
+ )}
+ {details?.name && (
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+const labels = (
+ <>
+
+
+
+);
+
+export const ProjectDetailsPage = () => {
+ return (
+
+
+
+
+ Support Button
+
+
+
+
);
};
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
index 00dac5c70e..163d8a54d8 100644
--- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -16,7 +16,19 @@
// NEEDS WORK
-import { Link, useApi, googleAuthApiRef, InfoCard } from '@backstage/core';
+import {
+ Link,
+ useApi,
+ googleAuthApiRef,
+ InfoCard,
+ HeaderLabel,
+ Page,
+ Header,
+ pageTheme,
+ SupportButton,
+ Content,
+ ContentHeader,
+} from '@backstage/core';
import {
LinearProgress,
makeStyles,
@@ -47,14 +59,12 @@ const LongText = ({ text, max }: { text: string; max: number }) => {
);
};
-const useStyles = makeStyles(theme => ({
- root: {
- padding: theme.spacing(2),
- },
- title: {
- padding: theme.spacing(1, 0, 2, 0),
- },
-}));
+const labels = (
+ <>
+
+
+
+);
const PageContents = () => {
const api = useApi(GCPApiRef);
@@ -76,7 +86,7 @@ const PageContents = () => {
if (error) {
return (
- Failed to load projects, {error.message}{' '}
+ {error.message}{' '}
);
}
@@ -139,20 +149,20 @@ const PageContents = () => {
};
export const ProjectListPage = () => {
- const classes = useStyles();
-
return (
-
-
- GCP Projects
-
-
-
-
-
-
-