paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 33 Packages Projects Releases Wiki Activity

feat: consume theme provided by Page theme provider

Browse Source
This commit is contained in:
Marvin9
2020-10-11 19:14:23 +05:30
parent 886bff9d44
commit 6d68f6fec1
35 changed files with 320 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.test.tsx
+1 -32
View File
@@ -13,14 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Entity } from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
import { wrapInTestApp } from '@backstage/test-utils';
import { render, waitFor } from '@testing-library/react';
import * as React from 'react';
import { ApiEntityPage, getPageTheme } from './ApiEntityPage';
import { ApiEntityPage } from './ApiEntityPage';
jest.mock('react-router-dom', () => {
const actual = jest.requireActual('react-router-dom');
@@ -71,32 +69,3 @@ describe('ApiEntityPage', () => {
);
});
});
describe('getPageTheme', () => {
const defaultPageTheme = getPageTheme();
it.each(['service', 'app', 'library', 'tool', 'documentation', 'website'])(
'should select right theme for predefined type: %p ̰ ',
type => {
const theme = getPageTheme(({
spec: {
type,
},
} as any) as Entity);
expect(theme).toBeDefined();
expect(theme).not.toBe(defaultPageTheme);
},
);
it('should select default theme for unknown/unspecified types', () => {
const theme1 = getPageTheme(({
spec: {
type: 'unknown-type',
},
} as any) as Entity);
const theme2 = getPageTheme(({
spec: {},
} as any) as Entity);
expect(theme1).toBe(defaultPageTheme);
expect(theme2).toBe(defaultPageTheme);
});
});
plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+8 -9
View File
@@ -23,9 +23,9 @@ import {
Progress,
useApi,
} from '@backstage/core';
import { customPageTheme, PageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { Box } from '@material-ui/core';
import { Box, useTheme } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
@@ -53,12 +53,6 @@ function headerProps(
};
}
// REUSABLE IN plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
export const getPageTheme = (entity?: Entity): PageTheme => {
const themeKey = entity?.spec?.type?.toString() ?? 'home';
return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
};
type EntityPageTitleProps = {
title: string;
entity: Entity | undefined;
@@ -71,6 +65,7 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
);
export const ApiEntityPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const { optionalNamespaceAndName } = useParams() as {
optionalNamespaceAndName: string;
};
@@ -107,7 +102,11 @@ export const ApiEntityPage = () => {
);
return (
<Page pageTheme={getPageTheme(entity)}>
<Page
theme={backstageTheme.getPageTheme({
themeId: entity?.spec?.type?.toString() ?? 'home',
})}
>
<Header
title={<EntityPageTitle title={headerTitle} entity={entity} />}
pageTitleOverride={headerTitle}
plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
+9 -2
View File
@@ -15,7 +15,8 @@
*/
import { Header, Page } from '@backstage/core';
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
type Props = {
@@ -23,8 +24,14 @@ type Props = {
};
export const ApiExplorerLayout = ({ children }: Props) => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header
title="APIs"
subtitle="Backstage API Explorer"
plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+4 -2
View File
@@ -21,7 +21,8 @@ import {
Page,
useApi,
} from '@backstage/core';
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
import { getTimeBasedGreeting } from './utils/timeUtil';
@@ -30,12 +31,13 @@ type Props = {
};
const CatalogLayout = ({ children }: Props) => {
const backstageTheme = useTheme<BackstageTheme>();
const greeting = getTimeBasedGreeting();
const profile = useApi(identityApiRef).getProfile();
const userId = useApi(identityApiRef).getUserId();
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Header
title={`${greeting.greeting}, ${profile.displayName || userId}!`}
subtitle="Backstage Service Catalog"
plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+12 -7
View File
@@ -18,19 +18,19 @@ import { useParams, useNavigate } from 'react-router';
import { EntityContext } from '../../hooks/useEntity';
import { Page, Header, HeaderLabel, Content, Progress } from '@backstage/core';
import { customPageTheme, PageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { Entity } from '@backstage/catalog-model';
import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
import { Box } from '@material-ui/core';
import { Box, useTheme } from '@material-ui/core';
import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
import { Alert } from '@material-ui/lab';
import { Tabbed } from './Tabbed';
const getPageTheme = (entity?: Entity): PageTheme => {
const themeKey = entity?.spec?.type?.toString() ?? 'home';
return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
};
// const getPageTheme = (entity?: Entity): PageTheme => {
// const themeKey = entity?.spec?.type?.toString() ?? 'home';
// return customPageTheme.pageTheme[themeKey] ?? customPageTheme.pageTheme.home;
// };
const EntityPageTitle = ({
entity,
@@ -69,6 +69,7 @@ export const EntityPageLayout = ({
}: {
children?: React.ReactNode;
}) => {
const backstageTheme = useTheme<BackstageTheme>();
const { optionalNamespaceAndName, kind } = useParams() as {
optionalNamespaceAndName: string;
kind: string;
@@ -93,7 +94,11 @@ export const EntityPageLayout = ({
const showRemovalDialog = () => setConfirmationDialogOpen(true);
return (
<Page pageTheme={getPageTheme(entity!)}>
<Page
theme={backstageTheme.getPageTheme({
themeId: entity?.spec?.type?.toString() ?? 'home',
})}
>
<Header
title={<EntityPageTitle title={headerTitle} entity={entity!} />}
pageTitleOverride={headerTitle}
plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
+14 -3
View File
@@ -14,9 +14,15 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { ReactNode } from 'react';
import { Box, Button, Container, makeStyles } from '@material-ui/core';
import {
Box,
Button,
Container,
makeStyles,
useTheme,
} from '@material-ui/core';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import { Header, Page } from '@backstage/core';
import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
@@ -37,10 +43,15 @@ const AlertInstructionsLayout = ({
title,
children,
}: AlertInstructionsLayoutProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
return (
<CostInsightsThemeProvider>
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title="Cost Insights" pageTitleOverride={title} type="Tool" />
<Container maxWidth="md" disableGutters className={classes.root}>
<Box mb={3}>
plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
+8 -3
View File
@@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { makeStyles } from '@material-ui/core';
import { makeStyles, useTheme } from '@material-ui/core';
import { Header, Page } from '@backstage/core';
import { Group } from '../../types';
import CostInsightsTabs from '../CostInsightsTabs';
@@ -39,9 +39,14 @@ type CostInsightsLayoutProps = {
};
const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
style={{ boxShadow: 'none' }}
title="Cost Insights"
plugins/explore/src/components/ExplorePluginPage.tsx
+9 -3
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import { makeStyles, Typography, useTheme } from '@material-ui/core';
import {
Content,
ContentHeader,
@@ -24,7 +24,7 @@ import {
SupportButton,
} from '@backstage/core';
import ExploreCard, { CardData } from './ExploreCard';
import { customPageTheme, BackstageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
const useStyles = makeStyles<BackstageTheme>(theme => ({
container: {
@@ -115,8 +115,14 @@ const toolsCards = [
export const ExplorePluginPage = () => {
const classes = useStyles();
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header
title="Explore"
subtitle="Tools and services available in Backstage"
plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+9 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -27,7 +27,7 @@ import {
StructuredMetadataTable,
SupportButton,
} from '@backstage/core';
import { Button, Grid, TextField } from '@material-ui/core';
import { Button, Grid, TextField, useTheme } from '@material-ui/core';
import React, { useState } from 'react';
export const Project = () => {
@@ -112,8 +112,14 @@ const labels = (
);
export const NewProjectPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page pageTheme={customPageTheme.pageTheme.service}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Header title="New GCP Project" type="tool">
{labels}
</Header>
plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+8 -2
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -36,6 +36,7 @@ import {
TableRow,
Theme,
Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
import { useAsync } from 'react-use';
@@ -147,8 +148,13 @@ const labels = (
);
export const ProjectDetailsPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page pageTheme={customPageTheme.pageTheme.service}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Header title="GCP Project Details" type="other">
{labels}
</Header>
plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+9 -2
View File
@@ -15,7 +15,7 @@
*/
// NEEDS WORK
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -38,6 +38,7 @@ import {
TableRow,
Tooltip,
Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
import { useAsync } from 'react-use';
@@ -134,8 +135,14 @@ const PageContents = () => {
};
export const ProjectListPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page pageTheme={customPageTheme.pageTheme.service}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Header title="GCP Projects" type="tool">
{labels}
</Header>
plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+8 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useState } from 'react';
import {
Content,
@@ -29,12 +29,13 @@ import {
} from '@backstage/core';
import ClusterTable from '../ClusterTable/ClusterTable';
import { Button } from '@material-ui/core';
import { Button, useTheme } from '@material-ui/core';
import { useAsync } from 'react-use';
import { gitOpsApiRef } from '../../api';
import { Alert } from '@material-ui/lab';
const ClusterList: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const api = useApi(gitOpsApiRef);
const githubAuth = useApi(githubAuthApiRef);
const [githubUsername, setGithubUsername] = useState(String);
@@ -91,7 +92,11 @@ const ClusterList: FC<{}> = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header title="GitOps-managed Clusters">
<HeaderLabel label="Welcome" value={githubUsername} />
</Header>
plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
+8 -3
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useEffect, useState } from 'react';
import {
Content,
@@ -26,12 +26,13 @@ import {
githubAuthApiRef,
} from '@backstage/core';
import { Link } from '@material-ui/core';
import { Link, useTheme } from '@material-ui/core';
import { useParams } from 'react-router-dom';
import { gitOpsApiRef, Status } from '../../api';
import { transformRunStatus } from '../ProfileCatalog';
const ClusterPage: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const params = useParams() as { owner: string; repo: string };
const [pollingLog, setPollingLog] = useState(true);
@@ -84,7 +85,11 @@ const ClusterPage: FC<{}> = () => {
}, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header title={`Cluster ${params.owner}/${params.repo}`}>
<HeaderLabel label="Welcome" value={githubUsername} />
</Header>
plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
+9 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useEffect, useState } from 'react';
import {
Header,
@@ -37,7 +37,7 @@ import {
useApi,
githubAuthApiRef,
} from '@backstage/core';
import { TextField, List, ListItem, Link } from '@material-ui/core';
import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core';
import ClusterTemplateCardList from '../ClusterTemplateCardList';
import ProfileCardList from '../ProfileCardList';
@@ -81,6 +81,8 @@ export const transformRunStatus = (x: Status[]) => {
};
const ProfileCatalog: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
// TODO: get data from REST API
const [clusterTemplates] = React.useState([
{
@@ -259,7 +261,11 @@ const ProfileCatalog: FC<{}> = () => {
];
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
title="Create GitOps-managed Cluster"
subtitle="Kubernetes cluster with ready-to-use profiles"
plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+8 -3
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import {
Content,
@@ -27,9 +27,10 @@ import { useAsync } from 'react-use';
import 'graphiql/graphiql.css';
import { graphQlBrowseApiRef } from '../../lib/api';
import { GraphiQLBrowser } from '../GraphiQLBrowser';
import { Typography } from '@material-ui/core';
import { Typography, useTheme } from '@material-ui/core';
export const GraphiQLPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const graphQlBrowseApi = useApi(graphQlBrowseApiRef);
const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints());
@@ -59,7 +60,11 @@ export const GraphiQLPage = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title="GraphiQL">
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Alpha" />
plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
+8 -3
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { ReactElement, useEffect, useState } from 'react';
import { Grid, TabProps } from '@material-ui/core';
import { Grid, TabProps, useTheme } from '@material-ui/core';
import {
CardTab,
Content,
@@ -98,6 +98,7 @@ const groupResponses = (fetchResponse: FetchResponse[]) => {
type KubernetesContentProps = { entity: Entity; children?: React.ReactNode };
export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const kubernetesApi = useApi(kubernetesApiRef);
const [kubernetesObjects, setKubernetesObjects] = useState<
@@ -120,7 +121,11 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? [];
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Content>
<Grid container spacing={3} direction="column">
{kubernetesObjects === undefined && error === undefined && (
plugins/lighthouse/src/components/AuditList/index.tsx
+8 -3
View File
@@ -13,11 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { useState, useMemo, FC, ReactNode } from 'react';
import { useLocalStorage, useAsync } from 'react-use';
import { useNavigate } from 'react-router-dom';
import { Grid, Button } from '@material-ui/core';
import { Grid, Button, useTheme } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import Pagination from '@material-ui/lab/Pagination';
import {
@@ -41,6 +41,7 @@ import { createAuditRouteRef } from '../../plugin';
export const LIMIT = 10;
const AuditList: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const [dismissedStored] = useLocalStorage(LIGHTHOUSE_INTRO_LOCAL_STORAGE);
const [dismissed, setDismissed] = useState(dismissedStored);
@@ -94,7 +95,11 @@ const AuditList: FC<{}> = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/lighthouse/src/components/AuditView/index.tsx
+8 -2
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { useState, useEffect, ReactNode, FC } from 'react';
import {
Link,
@@ -31,6 +31,7 @@ import {
Button,
ListItemIcon,
ListItemText,
useTheme,
} from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import {
@@ -125,6 +126,7 @@ const AuditView: FC<{ audit?: Audit }> = ({ audit }: { audit?: Audit }) => {
};
const ConnectedAuditView: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const lighthouseApi = useApi(lighthouseApiRef);
const params = useParams() as { id: string };
const classes = useStyles();
@@ -173,7 +175,11 @@ const ConnectedAuditView: FC<{}> = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/lighthouse/src/components/CreateAudit/index.tsx
+8 -2
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { useState, useCallback, FC } from 'react';
import { useNavigate } from 'react-router-dom';
import {
@@ -24,6 +24,7 @@ import {
ListItem,
MenuItem,
TextField,
useTheme,
} from '@material-ui/core';
import {
errorApiRef,
@@ -54,6 +55,7 @@ const useStyles = makeStyles(theme => ({
}));
const CreateAudit: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const errorApi = useApi(errorApiRef);
const lighthouseApi = useApi(lighthouseApiRef);
const classes = useStyles();
@@ -94,7 +96,11 @@ const CreateAudit: FC<{}> = () => {
]);
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
+27 -21
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { FC } from 'react';
import { Grid } from '@material-ui/core';
import { Grid, useTheme } from '@material-ui/core';
import {
Header,
Page,
@@ -27,24 +27,30 @@ import {
} from '@backstage/core';
import NewRelicFetchComponent from '../NewRelicFetchComponent';
const NewRelicComponent: FC<{}> = () => (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Header title="New Relic">
<HeaderLabel label="Owner" value="Engineering" />
</Header>
<Content>
<ContentHeader title="New Relic">
<SupportButton>
New Relic Application Performance Monitoring
</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="column">
<Grid item>
<NewRelicFetchComponent />
const NewRelicComponent: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title="New Relic">
<HeaderLabel label="Owner" value="Engineering" />
</Header>
<Content>
<ContentHeader title="New Relic">
<SupportButton>
New Relic Application Performance Monitoring
</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="column">
<Grid item>
<NewRelicFetchComponent />
</Grid>
</Grid>
</Grid>
</Content>
</Page>
);
</Content>
</Page>
);
};
export default NewRelicComponent;
plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+8 -3
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { useState } from 'react';
import { Grid, makeStyles } from '@material-ui/core';
import { Grid, makeStyles, useTheme } from '@material-ui/core';
import {
InfoCard,
Page,
@@ -61,6 +61,7 @@ export const RegisterComponentPage = ({
}: {
catalogRouteRef: RouteRef;
}) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
const catalogApi = useApi(catalogApiRef);
const [formState, setFormState] = useState<ValuesOf<typeof FormStates>>(
@@ -113,7 +114,11 @@ export const RegisterComponentPage = ({
};
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header title="Register existing component" />
<Content>
<ContentHeader title="Start tracking your component in Backstage">
plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
+8 -2
View File
@@ -14,17 +14,23 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
import { Content, Header, Page } from '@backstage/core';
import { RollbarProjectTable } from '../RollbarProjectTable/RollbarProjectTable';
import { useRollbarEntities } from '../../hooks/useRollbarEntities';
export const RollbarHome = () => {
const backstageTheme = useTheme<BackstageTheme>();
const { entities, loading, error } = useRollbarEntities();
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header
title="Rollbar"
subtitle="Real-time error tracking & debugging tools for developers"
plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
+8 -2
View File
@@ -14,17 +14,23 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
import { Content, Header, HeaderLabel, Page } from '@backstage/core';
import { useCatalogEntity } from '../../hooks/useCatalogEntity';
import { RollbarProject } from '../RollbarProject/RollbarProject';
export const RollbarProjectPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const { entity } = useCatalogEntity();
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title={entity?.metadata?.name} subtitle="Rollbar Project">
<HeaderLabel label="Owner" value={entity?.spec?.owner} />
<HeaderLabel label="Lifecycle" value={entity?.spec?.lifecycle} />
plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+4 -3
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
import {
Content,
@@ -29,7 +29,7 @@ import {
WarningPanel,
} from '@backstage/core';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { Button, Grid, Link, Typography } from '@material-ui/core';
import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core';
import React, { useEffect } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import useStaleWhileRevalidate from 'swr';
@@ -49,6 +49,7 @@ const getTemplateCardProps = (
};
export const ScaffolderPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const catalogApi = useApi(catalogApiRef);
const errorApi = useApi(errorApiRef);
@@ -66,7 +67,7 @@ export const ScaffolderPage = () => {
}, [error, errorApi]);
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Header
pageTitleOverride="Create a New Component"
title={
plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx
+12 -4
View File
@@ -14,8 +14,14 @@
* limitations under the License.
*/
import { Button } from '@backstage/core';
import { customPageTheme } from '@backstage/theme';
import { Card, Chip, makeStyles, Typography } from '@material-ui/core';
import { BackstageTheme, pageTheme } from '@backstage/theme';
import {
Card,
Chip,
makeStyles,
Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
import { generatePath } from 'react-router-dom';
import { templateRoute } from '../../routes';
@@ -56,8 +62,10 @@ export const TemplateCard = ({
type,
name,
}: TemplateCardProps) => {
const theme =
customPageTheme.pageTheme[type] ?? customPageTheme.pageTheme.other;
const backstageTheme = useTheme<BackstageTheme>();
const themeId = pageTheme[type] ? type : 'other';
const theme = backstageTheme.getPageTheme({ themeId });
const classes = useStyles({ backgroundImage: theme.backgroundImage });
const href = generatePath(templateRoute.path, { templateName: name });
plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+4 -3
View File
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
import {
Content,
@@ -25,7 +25,7 @@ import {
useApi,
} from '@backstage/core';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { LinearProgress } from '@material-ui/core';
import { LinearProgress, useTheme } from '@material-ui/core';
import { IChangeEvent } from '@rjsf/core';
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
@@ -80,6 +80,7 @@ const REPO_FORMAT = {
};
export const TemplatePage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const errorApi = useApi(errorApiRef);
const catalogApi = useApi(catalogApiRef);
const scaffolderApi = useApi(scaffolderApiRef);
@@ -145,7 +146,7 @@ export const TemplatePage = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Header
pageTitleOverride="Create a new component"
title={
plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
+8 -3
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useState } from 'react';
import { Grid } from '@material-ui/core';
import { Grid, useTheme } from '@material-ui/core';
import {
Header,
Page,
@@ -28,12 +28,17 @@ import { SentryPluginWidget } from '../SentryPluginWidget/SentryPluginWidget';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
const SentryPluginPage: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h');
const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h');
const sentryProjectId = 'sample-sentry-project-id';
return (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title="Sentry" />
<Content>
<ContentHeader title="Issue on Sentry">
plugins/tech-radar/src/components/RadarPage.tsx
+30 -24
View File
@@ -14,9 +14,9 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { Grid } from '@material-ui/core';
import { Grid, useTheme } from '@material-ui/core';
import {
Content,
ContentHeader,
@@ -39,29 +39,35 @@ export const RadarPage = ({
subtitle,
pageTitle,
...props
}: TechRadarPageProps): JSX.Element => (
<Page pageTheme={customPageTheme.pageTheme.tool}>
<Header title={title} subtitle={subtitle}>
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Beta" />
</Header>
<Content>
<ContentHeader title={pageTitle}>
<SupportButton>
This is used for visualizing the official guidelines of different
areas of software development such as languages, frameworks,
infrastructure and processes.
</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="row">
<Grid item xs={12} sm={6} md={4}>
<RadarComponent {...props} />
}: TechRadarPageProps): JSX.Element => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Header title={title} subtitle={subtitle}>
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Beta" />
</Header>
<Content>
<ContentHeader title={pageTitle}>
<SupportButton>
This is used for visualizing the official guidelines of different
areas of software development such as languages, frameworks,
infrastructure and processes.
</SupportButton>
</ContentHeader>
<Grid container spacing={3} direction="row">
<Grid item xs={12} sm={6} md={4}>
<RadarComponent {...props} />
</Grid>
</Grid>
</Grid>
</Content>
</Page>
);
</Content>
</Page>
);
};
RadarPage.defaultProps = {
title: 'Tech Radar',
subtitle: 'Pick the recommended technologies for your projects',
plugins/techdocs/src/reader/components/TechDocsHome.tsx
+18 -5
View File
@@ -14,11 +14,11 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { useAsync } from 'react-use';
import { useNavigate, generatePath } from 'react-router-dom';
import { Grid } from '@material-ui/core';
import { Grid, useTheme } from '@material-ui/core';
import {
ItemCard,
Progress,
@@ -31,6 +31,7 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
import { rootDocsRouteRef } from '../../plugin';
export const TechDocsHome = () => {
const backstageTheme = useTheme<BackstageTheme>();
const catalogApi = useApi(catalogApiRef);
const navigate = useNavigate();
@@ -43,7 +44,11 @@ export const TechDocsHome = () => {
if (loading) {
return (
<Page pageTheme={customPageTheme.pageTheme.documentation}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
@@ -57,7 +62,11 @@ export const TechDocsHome = () => {
if (error) {
return (
<Page pageTheme={customPageTheme.pageTheme.documentation}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
@@ -70,7 +79,11 @@ export const TechDocsHome = () => {
}
return (
<Page pageTheme={customPageTheme.pageTheme.documentation}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
plugins/techdocs/src/reader/components/TechDocsPage.tsx
+8 -2
View File
@@ -14,7 +14,8 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Content, Page, useApi } from '@backstage/core';
@@ -24,6 +25,7 @@ import { TechDocsPageHeader } from './TechDocsPageHeader';
import { techdocsApiRef } from '../../api';
export const TechDocsPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const [documentReady, setDocumentReady] = useState<boolean>(false);
const { entityId } = useParams();
const [kind, namespace, name] = entityId.split(':');
@@ -47,7 +49,11 @@ export const TechDocsPage = () => {
};
return (
<Page pageTheme={customPageTheme.pageTheme.documentation}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<TechDocsPageHeader
metadataRequest={{
mkdocs: mkdocsMetadataRequest,
plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+8 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { customPageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
@@ -24,6 +24,7 @@ import {
ListItem,
ListItemText,
Link,
useTheme,
} from '@material-ui/core';
import {
Content,
@@ -39,12 +40,17 @@ import {
} from '@backstage/core';
const WelcomePage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const appTitle =
useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage';
const profile = { givenName: '' };
return (
<Page pageTheme={customPageTheme.pageTheme.home}>
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Header
title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
subtitle="Let's start building a better developer experience"