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

chore: refactor

Browse Source
This commit is contained in:
Marvin9
2020-10-15 09:16:39 +05:30
parent ba056b1ba8
commit 8f0608a5ed
34 changed files with 72 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/layout/Header/Header.stories.tsx
+8 -9
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { pageTheme } from '@backstage/theme';
import React from 'react';
import { Header } from '.';
import { HeaderLabel } from '../HeaderLabel';
@@ -33,7 +32,7 @@ const labels = (
);
export const Home = () => (
<Page theme={pageTheme.home}>
<Page themeId="home">
<Header title="Start/Home Page" type="home">
{labels}
</Header>
@@ -47,7 +46,7 @@ export const HomeWithSubtitle = () => (
);
export const Tool = () => (
<Page theme={pageTheme.tool}>
<Page themeId="tool">
<Header title="Stand-alone tool" type="tool">
{labels}
</Header>
@@ -55,7 +54,7 @@ export const Tool = () => (
);
export const Service = () => (
<Page theme={pageTheme.service}>
<Page themeId="service">
<Header title="Service component page" type="service">
{labels}
</Header>
@@ -63,7 +62,7 @@ export const Service = () => (
);
export const Website = () => (
<Page theme={pageTheme.website}>
<Page themeId="website">
<Header title="Website component page" type="website">
{labels}
</Header>
@@ -71,7 +70,7 @@ export const Website = () => (
);
export const Library = () => (
<Page theme={pageTheme.library}>
<Page themeId="library">
<Header title="Library component page" type="library">
{labels}
</Header>
@@ -79,7 +78,7 @@ export const Library = () => (
);
export const App = () => (
<Page theme={pageTheme.app}>
<Page themeId="app">
<Header title="App component page" type="app">
{labels}
</Header>
@@ -87,7 +86,7 @@ export const App = () => (
);
export const Documentation = () => (
<Page theme={pageTheme.documentation}>
<Page themeId="documentation">
<Header title="Documentation component page" type="documentation">
{labels}
</Header>
@@ -95,7 +94,7 @@ export const Documentation = () => (
);
export const Other = () => (
<Page theme={pageTheme.other}>
<Page themeId="other">
<Header title="Other/generic component page" type="other">
{labels}
</Header>
packages/core/src/layout/Page/Page.stories.tsx
+2 -3
View File
@@ -15,7 +15,6 @@
*/
import React, { useState } from 'react';
import { pageTheme } from '@backstage/theme';
import {
Header,
Page,
@@ -196,7 +195,7 @@ export const PluginWithData = () => {
const [selectedTab, setSelectedTab] = useState<number>(2);
return (
<div style={{ border: '1px solid #ddd' }}>
<Page theme={pageTheme.tool}>
<Page themeId="tool">
<ExampleHeader />
<HeaderTabs
selectedIndex={selectedTab}
@@ -218,7 +217,7 @@ export const PluginWithData = () => {
export const PluginWithTable = () => {
return (
<div style={{ border: '1px solid #ddd' }}>
<Page theme={pageTheme.tool}>
<Page themeId="tool">
<ExampleHeader />
<Content>
<ExampleContentHeader />
packages/core/src/layout/Page/Page.tsx
+9 -4
View File
@@ -15,7 +15,7 @@
*/
import React, { FC } from 'react';
import { PageTheme } from '@backstage/theme';
import { BackstageTheme } from '@backstage/theme';
import { makeStyles, ThemeProvider } from '@material-ui/core';
const useStyles = makeStyles(() => ({
@@ -30,13 +30,18 @@ const useStyles = makeStyles(() => ({
}));
type Props = {
theme: PageTheme;
themeId: string;
};
export const Page: FC<Props> = ({ theme, children }) => {
export const Page: FC<Props> = ({ themeId, children }) => {
const classes = useStyles();
return (
<ThemeProvider theme={baseTheme => ({ ...baseTheme, page: theme })}>
<ThemeProvider
theme={(baseTheme: BackstageTheme) => ({
...baseTheme,
page: baseTheme.getPageTheme({ themeId }),
})}
>
<div className={classes.root}>{children}</div>
</ThemeProvider>
);
packages/core/src/layout/SignInPage/SignInPage.tsx
+2 -4
View File
@@ -19,8 +19,7 @@ import { Page } from '../Page';
import { Header } from '../Header';
import { Content } from '../Content/Content';
import { ContentHeader } from '../ContentHeader/ContentHeader';
import { BackstageTheme } from '@backstage/theme';
import { Grid, useTheme } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
import { useSignInProviders, getSignInProviders } from './providers';
import { IdentityProviders } from './types';
@@ -39,7 +38,6 @@ export const SignInPage: FC<Props> = ({
title,
align = 'left',
}) => {
const backstageTheme = useTheme<BackstageTheme>();
const configApi = useApi(configApiRef);
const classes = useStyles();
@@ -54,7 +52,7 @@ export const SignInPage: FC<Props> = ({
}
return (
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Page themeId="home">
<Header title={configApi.getString('app.title')} />
<Content>
{title && <ContentHeader title={title} textAlign={align} />}
plugins/api-docs/src/components/ApiEntityPage/ApiEntityPage.tsx
+2 -8
View File
@@ -23,9 +23,8 @@ import {
Progress,
useApi,
} from '@backstage/core';
import { BackstageTheme } from '@backstage/theme';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { Box, useTheme } from '@material-ui/core';
import { Box } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
@@ -65,7 +64,6 @@ const EntityPageTitle = ({ title }: EntityPageTitleProps) => (
);
export const ApiEntityPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const { optionalNamespaceAndName } = useParams() as {
optionalNamespaceAndName: string;
};
@@ -102,11 +100,7 @@ export const ApiEntityPage = () => {
);
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: entity?.spec?.type?.toString() ?? 'home',
})}
>
<Page themeId={entity?.spec?.type?.toString() ?? 'home'}>
<Header
title={<EntityPageTitle title={headerTitle} entity={entity} />}
pageTitleOverride={headerTitle}
plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx
+1 -9
View File
@@ -15,8 +15,6 @@
*/
import { Header, Page } from '@backstage/core';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
type Props = {
@@ -24,14 +22,8 @@ type Props = {
};
export const ApiExplorerLayout = ({ children }: Props) => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header
title="APIs"
subtitle="Backstage API Explorer"
plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+1 -4
View File
@@ -21,8 +21,6 @@ import {
Page,
useApi,
} from '@backstage/core';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import React from 'react';
import { getTimeBasedGreeting } from './utils/timeUtil';
@@ -31,13 +29,12 @@ 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 theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Page themeId="home">
<Header
title={`${greeting.greeting}, ${profile.displayName || userId}!`}
subtitle="Backstage Service Catalog"
plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+2 -8
View File
@@ -18,10 +18,9 @@ import { useParams, useNavigate } from 'react-router';
import { EntityContext } from '../../hooks/useEntity';
import { Page, Header, HeaderLabel, Content, Progress } from '@backstage/core';
import { BackstageTheme } from '@backstage/theme';
import { Entity } from '@backstage/catalog-model';
import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
import { Box, useTheme } from '@material-ui/core';
import { Box } from '@material-ui/core';
import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
import { Alert } from '@material-ui/lab';
@@ -64,7 +63,6 @@ export const EntityPageLayout = ({
}: {
children?: React.ReactNode;
}) => {
const backstageTheme = useTheme<BackstageTheme>();
const { optionalNamespaceAndName, kind } = useParams() as {
optionalNamespaceAndName: string;
kind: string;
@@ -89,11 +87,7 @@ export const EntityPageLayout = ({
const showRemovalDialog = () => setConfirmationDialogOpen(true);
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: entity?.spec?.type?.toString() ?? 'home',
})}
>
<Page themeId={entity?.spec?.type?.toString() ?? 'home'}>
<Header
title={<EntityPageTitle title={headerTitle} entity={entity!} />}
pageTitleOverride={headerTitle}
plugins/cost-insights/src/components/AlertInstructionsLayout/AlertInstructionsLayout.tsx
+2 -10
View File
@@ -14,15 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { ReactNode } from 'react';
import {
Box,
Button,
Container,
makeStyles,
useTheme,
} from '@material-ui/core';
import { Box, Button, Container, makeStyles } from '@material-ui/core';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import { Header, Page } from '@backstage/core';
import { CostInsightsThemeProvider } from '../CostInsightsPage/CostInsightsThemeProvider';
@@ -44,13 +37,12 @@ const AlertInstructionsLayout = ({
title,
children,
}: AlertInstructionsLayoutProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
return (
<CostInsightsThemeProvider>
<ConfigProvider>
<CurrencyProvider>
<Page theme={backstageTheme.getPageTheme({ themeId: 'tool' })}>
<Page themeId="tool">
<Header
title="Cost Insights"
pageTitleOverride={title}
plugins/cost-insights/src/components/CostInsightsLayout/CostInsightsLayout.tsx
+2 -8
View File
@@ -13,9 +13,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core';
import { makeStyles } from '@material-ui/core';
import { Header, Page } from '@backstage/core';
import { Group } from '../../types';
import CostInsightsTabs from '../CostInsightsTabs';
@@ -39,14 +38,9 @@ type CostInsightsLayoutProps = {
};
const CostInsightsLayout = ({ groups, children }: CostInsightsLayoutProps) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
style={{ boxShadow: 'none' }}
title="Cost Insights"
plugins/explore/src/components/ExplorePluginPage.tsx
+2 -7
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { makeStyles, Typography, useTheme } from '@material-ui/core';
import { makeStyles, Typography } from '@material-ui/core';
import {
Content,
ContentHeader,
@@ -115,14 +115,9 @@ const toolsCards = [
export const ExplorePluginPage = () => {
const classes = useStyles();
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header
title="Explore"
subtitle="Tools and services available in Backstage"
plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+2 -9
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -27,7 +26,7 @@ import {
StructuredMetadataTable,
SupportButton,
} from '@backstage/core';
import { Button, Grid, TextField, useTheme } from '@material-ui/core';
import { Button, Grid, TextField } from '@material-ui/core';
import React, { useState } from 'react';
export const Project = () => {
@@ -112,14 +111,8 @@ const labels = (
);
export const NewProjectPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Page themeId="service">
<Header title="New GCP Project" type="tool">
{labels}
</Header>
plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+1 -8
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -36,7 +35,6 @@ import {
TableRow,
Theme,
Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
import { useAsync } from 'react-use';
@@ -148,13 +146,8 @@ const labels = (
);
export const ProjectDetailsPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Page themeId="service">
<Header title="GCP Project Details" type="other">
{labels}
</Header>
plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+1 -9
View File
@@ -15,7 +15,6 @@
*/
// NEEDS WORK
import { BackstageTheme } from '@backstage/theme';
import {
Content,
ContentHeader,
@@ -38,7 +37,6 @@ import {
TableRow,
Tooltip,
Typography,
useTheme,
} from '@material-ui/core';
import React from 'react';
import { useAsync } from 'react-use';
@@ -135,14 +133,8 @@ const PageContents = () => {
};
export const ProjectListPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'service',
})}
>
<Page themeId="service">
<Header title="GCP Projects" type="tool">
{labels}
</Header>
plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx
+2 -8
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useState } from 'react';
import {
Content,
@@ -29,13 +28,12 @@ import {
} from '@backstage/core';
import ClusterTable from '../ClusterTable/ClusterTable';
import { Button, useTheme } from '@material-ui/core';
import { Button } 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);
@@ -92,11 +90,7 @@ const ClusterList: FC<{}> = () => {
}
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header title="GitOps-managed Clusters">
<HeaderLabel label="Welcome" value={githubUsername} />
</Header>
plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx
+2 -8
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useEffect, useState } from 'react';
import {
Content,
@@ -26,13 +25,12 @@ import {
githubAuthApiRef,
} from '@backstage/core';
import { Link, useTheme } from '@material-ui/core';
import { Link } 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);
@@ -85,11 +83,7 @@ const ClusterPage: FC<{}> = () => {
}, [pollingLog, api, params, githubAuth, githubAccessToken, githubUsername]);
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header title={`Cluster ${params.owner}/${params.repo}`}>
<HeaderLabel label="Welcome" value={githubUsername} />
</Header>
plugins/gitops-profiles/src/components/ProfileCatalog/ProfileCatalog.tsx
+2 -9
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useEffect, useState } from 'react';
import {
Header,
@@ -37,7 +36,7 @@ import {
useApi,
githubAuthApiRef,
} from '@backstage/core';
import { TextField, List, ListItem, Link, useTheme } from '@material-ui/core';
import { TextField, List, ListItem, Link } from '@material-ui/core';
import ClusterTemplateCardList from '../ClusterTemplateCardList';
import ProfileCardList from '../ProfileCardList';
@@ -81,8 +80,6 @@ export const transformRunStatus = (x: Status[]) => {
};
const ProfileCatalog: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
// TODO: get data from REST API
const [clusterTemplates] = React.useState([
{
@@ -261,11 +258,7 @@ const ProfileCatalog: FC<{}> = () => {
];
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
title="Create GitOps-managed Cluster"
subtitle="Kubernetes cluster with ready-to-use profiles"
plugins/graphiql/src/components/GraphiQLPage/GraphiQLPage.tsx
+2 -8
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import {
Content,
@@ -27,10 +26,9 @@ import { useAsync } from 'react-use';
import 'graphiql/graphiql.css';
import { graphQlBrowseApiRef } from '../../lib/api';
import { GraphiQLBrowser } from '../GraphiQLBrowser';
import { Typography, useTheme } from '@material-ui/core';
import { Typography } from '@material-ui/core';
export const GraphiQLPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const graphQlBrowseApi = useApi(graphQlBrowseApiRef);
const endpoints = useAsync(() => graphQlBrowseApi.getEndpoints());
@@ -60,11 +58,7 @@ export const GraphiQLPage = () => {
}
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header title="GraphiQL">
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Alpha" />
plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx
+2 -8
View File
@@ -14,9 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { ReactElement, useEffect, useState } from 'react';
import { Grid, TabProps, useTheme } from '@material-ui/core';
import { Grid, TabProps } from '@material-ui/core';
import { Config } from '@backstage/config';
import {
CardTab,
@@ -102,7 +101,6 @@ 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<
@@ -149,11 +147,7 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
kubernetesObjects?.items.filter(r => r.errors.length > 0) ?? [];
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Content>
<Grid container spacing={3} direction="column">
{kubernetesObjects === undefined && error === undefined && (
plugins/lighthouse/src/components/AuditList/index.tsx
+2 -8
View File
@@ -13,11 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
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, useTheme } from '@material-ui/core';
import { Grid, Button } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import Pagination from '@material-ui/lab/Pagination';
import {
@@ -41,7 +40,6 @@ 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);
@@ -95,11 +93,7 @@ const AuditList: FC<{}> = () => {
}
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/lighthouse/src/components/AuditView/index.tsx
+1 -8
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { useState, useEffect, ReactNode, FC } from 'react';
import {
Link,
@@ -31,7 +30,6 @@ import {
Button,
ListItemIcon,
ListItemText,
useTheme,
} from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import {
@@ -194,13 +192,8 @@ export const AuditViewContent: FC<{}> = () => {
};
const ConnectedAuditView = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/lighthouse/src/components/CreateAudit/index.tsx
+1 -8
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { useState, useCallback, FC } from 'react';
import { useNavigate } from 'react-router-dom';
import {
@@ -24,7 +23,6 @@ import {
ListItem,
MenuItem,
TextField,
useTheme,
} from '@material-ui/core';
import {
errorApiRef,
@@ -171,13 +169,8 @@ export const CreateAuditContent: FC<{}> = () => {
};
const CreateAudit = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
title="Lighthouse"
subtitle="Website audits powered by Lighthouse"
plugins/newrelic/src/components/NewRelicComponent/NewRelicComponent.tsx
+2 -8
View File
@@ -14,9 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { FC } from 'react';
import { Grid, useTheme } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import {
Header,
Page,
@@ -28,13 +27,8 @@ import {
import NewRelicFetchComponent from '../NewRelicFetchComponent';
const NewRelicComponent: FC<{}> = () => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header title="New Relic">
<HeaderLabel label="Owner" value="Engineering" />
</Header>
plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+2 -8
View File
@@ -14,9 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { useState } from 'react';
import { Grid, makeStyles, useTheme } from '@material-ui/core';
import { Grid, makeStyles } from '@material-ui/core';
import {
InfoCard,
Page,
@@ -61,7 +60,6 @@ export const RegisterComponentPage = ({
}: {
catalogRouteRef: RouteRef;
}) => {
const backstageTheme = useTheme<BackstageTheme>();
const classes = useStyles();
const catalogApi = useApi(catalogApiRef);
const [formState, setFormState] = useState<ValuesOf<typeof FormStates>>(
@@ -114,11 +112,7 @@ export const RegisterComponentPage = ({
};
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header title="Register existing component" />
<Content>
<ContentHeader title="Start tracking your component in Backstage">
plugins/rollbar/src/components/RollbarHome/RollbarHome.tsx
+1 -8
View File
@@ -14,23 +14,16 @@
* limitations under the License.
*/
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
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header
title="Rollbar"
subtitle="Real-time error tracking & debugging tools for developers"
plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.tsx
+1 -8
View File
@@ -14,23 +14,16 @@
* limitations under the License.
*/
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
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page 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
+2 -4
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
import {
Content,
@@ -29,7 +28,7 @@ import {
WarningPanel,
} from '@backstage/core';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { Button, Grid, Link, Typography, useTheme } from '@material-ui/core';
import { Button, Grid, Link, Typography } from '@material-ui/core';
import React, { useEffect } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import useStaleWhileRevalidate from 'swr';
@@ -49,7 +48,6 @@ const getTemplateCardProps = (
};
export const ScaffolderPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const catalogApi = useApi(catalogApiRef);
const errorApi = useApi(errorApiRef);
@@ -67,7 +65,7 @@ export const ScaffolderPage = () => {
}, [error, errorApi]);
return (
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Page themeId="home">
<Header
pageTitleOverride="Create a New Component"
title={
plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+2 -4
View File
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
import {
Content,
@@ -25,7 +24,7 @@ import {
useApi,
} from '@backstage/core';
import { catalogApiRef } from '@backstage/plugin-catalog';
import { LinearProgress, useTheme } from '@material-ui/core';
import { LinearProgress } from '@material-ui/core';
import { IChangeEvent } from '@rjsf/core';
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
@@ -80,7 +79,6 @@ const REPO_FORMAT = {
};
export const TemplatePage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const errorApi = useApi(errorApiRef);
const catalogApi = useApi(catalogApiRef);
const scaffolderApi = useApi(scaffolderApiRef);
@@ -146,7 +144,7 @@ export const TemplatePage = () => {
}
return (
<Page theme={backstageTheme.getPageTheme({ themeId: 'home' })}>
<Page themeId="home">
<Header
pageTitleOverride="Create a new component"
title={
plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx
+2 -8
View File
@@ -14,9 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React, { FC, useState } from 'react';
import { Grid, useTheme } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import {
Header,
Page,
@@ -28,17 +27,12 @@ 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
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header title="Sentry" />
<Content>
<ContentHeader title="Issue on Sentry">
plugins/tech-radar/src/components/RadarPage.tsx
+2 -8
View File
@@ -14,9 +14,8 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { Grid, useTheme } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import {
Content,
ContentHeader,
@@ -40,13 +39,8 @@ export const RadarPage = ({
pageTitle,
...props
}: TechRadarPageProps): JSX.Element => {
const backstageTheme = useTheme<BackstageTheme>();
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'tool',
})}
>
<Page themeId="tool">
<Header title={title} subtitle={subtitle}>
<HeaderLabel label="Owner" value="Spotify" />
<HeaderLabel label="Lifecycle" value="Beta" />
plugins/techdocs/src/reader/components/TechDocsHome.tsx
+4 -18
View File
@@ -14,11 +14,10 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { useAsync } from 'react-use';
import { useNavigate, generatePath } from 'react-router-dom';
import { Grid, useTheme } from '@material-ui/core';
import { Grid } from '@material-ui/core';
import {
ItemCard,
Progress,
@@ -31,7 +30,6 @@ import { catalogApiRef } from '@backstage/plugin-catalog';
import { rootDocsRouteRef } from '../../plugin';
export const TechDocsHome = () => {
const backstageTheme = useTheme<BackstageTheme>();
const catalogApi = useApi(catalogApiRef);
const navigate = useNavigate();
@@ -44,11 +42,7 @@ export const TechDocsHome = () => {
if (loading) {
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Page themeId="documentation">
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
@@ -62,11 +56,7 @@ export const TechDocsHome = () => {
if (error) {
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Page themeId="documentation">
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
@@ -79,11 +69,7 @@ export const TechDocsHome = () => {
}
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Page themeId="documentation">
<Header
title="Documentation"
subtitle="Documentation available in Backstage"
plugins/techdocs/src/reader/components/TechDocsPage.tsx
+1 -8
View File
@@ -14,8 +14,6 @@
* limitations under the License.
*/
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';
@@ -25,7 +23,6 @@ import { TechDocsPageHeader } from './TechDocsPageHeader';
import { techdocsApiRef } from '../../api';
export const TechDocsPage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const [documentReady, setDocumentReady] = useState<boolean>(false);
const { namespace, kind, name } = useParams();
@@ -48,11 +45,7 @@ export const TechDocsPage = () => {
};
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'documentation',
})}
>
<Page themeId="documentation">
<TechDocsPageHeader
metadataRequest={{
mkdocs: mkdocsMetadataRequest,
plugins/user-settings/src/components/SettingsPage.tsx
+1 -8
View File
@@ -16,8 +16,6 @@
import React, { useState } from 'react';
import { Content, Header, HeaderTabs, Page } from '@backstage/core';
import { BackstageTheme } from '@backstage/theme';
import { useTheme } from '@material-ui/core';
import { General } from './General';
import { AuthProviders } from './AuthProviders';
import { FeatureFlags } from './FeatureFlags';
@@ -27,7 +25,6 @@ type Props = {
};
export const SettingsPage = ({ providerSettings }: Props) => {
const backstageTheme = useTheme<BackstageTheme>();
const [activeTab, setActiveTab] = useState<number>(0);
const onTabChange = (index: number) => {
setActiveTab(index);
@@ -46,11 +43,7 @@ export const SettingsPage = ({ providerSettings }: Props) => {
];
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header title="Settings" />
<HeaderTabs tabs={tabs} onChange={onTabChange} />
<Content>{content[activeTab]}</Content>
plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+1 -8
View File
@@ -14,7 +14,6 @@
* limitations under the License.
*/
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import {
@@ -24,7 +23,6 @@ import {
ListItem,
ListItemText,
Link,
useTheme,
} from '@material-ui/core';
import {
Content,
@@ -40,17 +38,12 @@ import {
} from '@backstage/core';
const WelcomePage = () => {
const backstageTheme = useTheme<BackstageTheme>();
const appTitle =
useApi(configApiRef).getOptionalString('app.title') ?? 'Backstage';
const profile = { givenName: '' };
return (
<Page
theme={backstageTheme.getPageTheme({
themeId: 'home',
})}
>
<Page themeId="home">
<Header
title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
subtitle="Let's start building a better developer experience"