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

Simplify welcome screen (#728)

Browse Source 
* Simplify welcome screen

* Delete non-used code

* Review comments
This commit is contained in:
Stefan Ålund
2020-05-06 17:25:38 +02:00
committed by GitHub
parent ccee67c333
commit f9a9e8cea2
6 changed files with 44 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/WarningPanel/WarningPanel.tsx
+6 -4
View File
@@ -19,7 +19,7 @@ import { Typography, makeStyles } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
const useErrorOutlineStyles = makeStyles<BackstageTheme>((theme) => ({
root: {
marginRight: theme.spacing(1),
fill: theme.palette.warningText,
@@ -30,7 +30,7 @@ const ErrorOutlineStyled = () => {
return <ErrorOutline classes={classes} />;
};
const useStyles = makeStyles<BackstageTheme>(theme => ({
const useStyles = makeStyles<BackstageTheme>((theme) => ({
message: {
display: 'flex',
flexDirection: 'column',
@@ -62,7 +62,7 @@ type Props = {
title?: string;
};
const WarningPanel: FC<Props> = props => {
const WarningPanel: FC<Props> = (props) => {
const classes = useStyles(props);
const { title, message, children } = props;
return (
@@ -74,7 +74,9 @@ const WarningPanel: FC<Props> = props => {
</Typography>
</div>
{message && (
<Typography className={classes.messageText}>{message}</Typography>
<Typography className={classes.messageText} variant="body2">
{message}
</Typography>
)}
{children}
</div>
plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx
-41
View File
@@ -1,41 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ErrorButton from './ErrorButton';
import { ApiRegistry, errorApiRef, ApiProvider } from '@backstage/core';
describe('ErrorButton', () => {
it('should trigger an error', () => {
const errorApi = { post: jest.fn() };
const rendered = render(
<ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
<ErrorButton />
</ApiProvider>,
);
const button = rendered.getByText('Trigger an error!');
expect(button).toBeInTheDocument();
expect(errorApi.post).not.toHaveBeenCalled();
fireEvent.click(button);
expect(errorApi.post).toHaveBeenCalledWith(
expect.objectContaining({ message: 'Oh no!' }),
);
});
});
plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
-40
View File
@@ -1,40 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { FC } from 'react';
import { Button } from '@material-ui/core';
import { errorApiRef, useApi } from '@backstage/core';
const ErrorButton: FC<{}> = () => {
const errorApi = useApi(errorApiRef);
const handleClick = () => {
errorApi.post(new Error('Oh no!'));
};
return (
<Button
data-testid="error-button"
variant="contained"
color="primary"
onClick={handleClick}
>
Trigger an error!
</Button>
);
};
export default ErrorButton;
plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx
-70
View File
@@ -1,70 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { ReactNode } from 'react';
import { render, fireEvent } from '@testing-library/react';
import ToggleFeatureFlagButton from './ToggleFeatureFlagButton';
import {
ApiRegistry,
featureFlagsApiRef,
ApiProvider,
FeatureFlags,
} from '@backstage/core';
function withApiRegistry(component: ReactNode, featureFlags: FeatureFlags) {
return (
<ApiProvider apis={ApiRegistry.from([[featureFlagsApiRef, featureFlags]])}>
{component}
</ApiProvider>
);
}
describe('ToggleFeatureFlagButton', () => {
let featureFlags: FeatureFlags;
beforeEach(() => {
featureFlags = new FeatureFlags();
window.localStorage.clear();
});
it('should enable the feature flag', () => {
const rendered = render(
withApiRegistry(<ToggleFeatureFlagButton />, featureFlags),
);
const button = rendered.getByTestId('button-switch-feature-flag-state');
expect(button).toBeInTheDocument();
expect(window.localStorage.featureFlags).toBeUndefined();
fireEvent.click(button);
expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":1}');
});
it('should disable the feature flag', () => {
window.localStorage.setItem('featureFlags', '{"enable-welcome-box":1}');
const rendered = render(
withApiRegistry(<ToggleFeatureFlagButton />, featureFlags),
);
const button = rendered.getByTestId('button-switch-feature-flag-state');
expect(button).toBeInTheDocument();
expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":1}');
fireEvent.click(button);
expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":0}');
});
});
plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx
-49
View File
@@ -1,49 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { FC } from 'react';
import { Button } from '@material-ui/core';
import { FeatureFlagState, featureFlagsApiRef, useApi } from '@backstage/core';
const ToggleFeatureFlagButton: FC<{}> = () => {
const featureFlagsApi = useApi(featureFlagsApiRef);
const flags = featureFlagsApi.getFlags();
const flagState = flags.get('enable-welcome-box');
const handleClick = () => {
const newValue =
flagState === FeatureFlagState.On
? FeatureFlagState.Off
: FeatureFlagState.On;
flags.set('enable-welcome-box', newValue);
window.location.reload();
};
return (
<Button
variant="contained"
color="secondary"
onClick={handleClick}
data-testid="button-switch-feature-flag-state"
>
{flagState === FeatureFlagState.On
? 'Disable "enable-welcome-box" feature flag'
: 'Enable "enable-welcome-box" feature flag'}
</Button>
);
};
export default ToggleFeatureFlagButton;
plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+38 -24
View File
@@ -33,9 +33,8 @@ import {
pageTheme,
ContentHeader,
SupportButton,
WarningPanel,
} from '@backstage/core';
import ErrorButton from './ErrorButton';
import ToggleFeatureFlagButton from './ToggleFeatureFlagButton';
const WelcomePage: FC<{}> = () => {
const profile = { givenName: '' };
@@ -44,7 +43,7 @@ const WelcomePage: FC<{}> = () => {
<Page theme={pageTheme.home}>
<Header
title={`Welcome ${profile.givenName || 'to Backstage'}`}
subtitle="Some quick intro and links."
subtitle="Let's start building a better developer experience"
>
<Timer />
</Header>
@@ -52,16 +51,37 @@ const WelcomePage: FC<{}> = () => {
<ContentHeader title="Getting Started">
<SupportButton />
</ContentHeader>
<Grid container>
<Grid item xs={12}>
<WarningPanel
title="Backstage is in early development"
message={
<>
We created Backstage about 4 years ago. While Spotify's
internal version of Backstage has had the benefit of time to
mature and evolve, the first iteration of our open source
version is still nascent. We are envisioning three phases of
the project and we have already begun work on various aspects
of these phases. The best way to keep track of the progress is
through the&nbsp;
<Link href="https://github.com/spotify/backstage/milestones">
Milestones
</Link>
.
</>
}
/>
</Grid>
<Grid item xs={12} md={6}>
<InfoCard>
<InfoCard title="What Now?">
<Typography variant="body1" gutterBottom>
You now have a running instance of Backstage!
You now have a running instance of Backstage!&nbsp;
<span role="img" aria-label="confetti">
🎉
</span>
Let's make sure you get the most out of this platform by walking
you through the basics.
&nbsp;Let's make sure you get the most out of this platform by
walking you through the basics.
</Typography>
<Typography variant="h6" gutterBottom>
The Setup
@@ -85,7 +105,7 @@ const WelcomePage: FC<{}> = () => {
</ListItem>
</List>
<Typography variant="h6" gutterBottom>
Try It Out
Build Your Plugins
</Typography>
<Typography variant="body1" paragraph>
We suggest you either check out the documentation for{' '}
@@ -94,15 +114,18 @@ const WelcomePage: FC<{}> = () => {
</Link>{' '}
or have a look in the code for the{' '}
<Link component={RouterLink} to="/home">
Home Page
existing plugins
</Link>{' '}
in the directory "plugins/home-page/src".
in the directory{' '}
<Link href="https://github.com/spotify/backstage/tree/master/plugins">
<code>plugins/</code>
</Link>
.
</Typography>
</InfoCard>
</Grid>
<Grid item>
<InfoCard>
<Typography variant="h5">Quick Links</Typography>
<InfoCard title="Quick Links">
<List>
<ListItem>
<Link href="https://backstage.io">backstage.io</Link>
@@ -112,21 +135,12 @@ const WelcomePage: FC<{}> = () => {
Create a plugin
</Link>
</ListItem>
<ListItem>
<Link href="/explore">Plugin gallery</Link>
</ListItem>
</List>
</InfoCard>
</Grid>
<Grid item>
<InfoCard title="APIs">
<Typography>
The button below is an example of how to consume APIs.
</Typography>
<br />
<ErrorButton />
<br />
<br />
<ToggleFeatureFlagButton />
</InfoCard>
</Grid>
</Grid>
</Content>
</Page>