From f9a9e8cea293a1f0c689f1a8da626191b7a1de8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Wed, 6 May 2020 17:25:38 +0200
Subject: [PATCH] Simplify welcome screen (#728)

* Simplify welcome screen

* Delete non-used code

* Review comments
---
 .../components/WarningPanel/WarningPanel.tsx  | 10 +--
 .../WelcomePage/ErrorButton.test.tsx          | 41 -----------
 .../components/WelcomePage/ErrorButton.tsx    | 40 -----------
 .../ToggleFeatureFlagButton.test.tsx          | 70 -------------------
 .../WelcomePage/ToggleFeatureFlagButton.tsx   | 49 -------------
 .../components/WelcomePage/WelcomePage.tsx    | 62 +++++++++-------
 6 files changed, 44 insertions(+), 228 deletions(-)
 delete mode 100644 plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx
 delete mode 100644 plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
 delete mode 100644 plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx
 delete mode 100644 plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx

diff --git a/packages/core/src/components/WarningPanel/WarningPanel.tsx b/packages/core/src/components/WarningPanel/WarningPanel.tsx
index a3e6ed6c78..aa173d2174 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.tsx
+++ b/packages/core/src/components/WarningPanel/WarningPanel.tsx
@@ -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>
diff --git a/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx b/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx
deleted file mode 100644
index 6a91a6c202..0000000000
--- a/plugins/welcome/src/components/WelcomePage/ErrorButton.test.tsx
+++ /dev/null
@@ -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!' }),
-    );
-  });
-});
diff --git a/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx b/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
deleted file mode 100644
index daaf4c94ac..0000000000
--- a/plugins/welcome/src/components/WelcomePage/ErrorButton.tsx
+++ /dev/null
@@ -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;
diff --git a/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx b/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx
deleted file mode 100644
index 13d6741cc7..0000000000
--- a/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx
+++ /dev/null
@@ -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}');
-  });
-});
diff --git a/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx b/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx
deleted file mode 100644
index 3ce66ce1c7..0000000000
--- a/plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx
+++ /dev/null
@@ -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;
diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
index eea582ab55..1512a22e50 100644
--- a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
+++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx
@@ -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>