New home: service catalog (#1018)

* New home: service catalog

* Add banner

* Remove extra <>

* Re-enable test

* Review comments

* Update DismissableBanner.stories.tsx

packages/app/src/components/Root/Root.tsx

@@ -20,7 +20,6 @@ import { Link, makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
 import ExploreIcon from '@material-ui/icons/Explore';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 import {
@@ -82,8 +81,6 @@ const Root: FC<{}> = ({ children }) => (
       <SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />
-      <SidebarItem icon={AccountTreeIcon} to="/catalog" text="Catalog" />
-      <SidebarDivider />
       <SidebarSpace />
       <SidebarDivider />
       <SidebarThemeToggle />

packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 DismissableBanner from './DismissableBanner';
+import { Link, Typography } from '@material-ui/core';
+
+export default {
+  title: 'DismissableBanner',
+  component: DismissableBanner,
+};
+
+const containerStyle = { width: '70%' };
+
+export const Default = () => (
+  <div style={containerStyle}>
+    <DismissableBanner message="This is a dismissable banner" variant="info" />
+  </div>
+);
+
+export const Error = () => (
+  <div style={containerStyle}>
+    <DismissableBanner
+      message="This is a dismissable banner with an error message"
+      variant="error"
+    />
+  </div>
+);
+
+export const EmojisIncluded = () => (
+  <div style={containerStyle}>
+    <DismissableBanner
+      message="This is a dismissable banner with emojis: 🚀 💚 😆 "
+      variant="info"
+    />
+  </div>
+);
+
+export const WithLink = () => (
+  <div style={containerStyle}>
+    <DismissableBanner
+      message={
+        <Typography>
+          This is a dismissable banner with a link:{' '}
+          <Link href="http://example.com" color="textSecondary">
+            example.com
+          </Link>
+        </Typography>
+      }
+      variant="info"
+    />
+  </div>
+);

packages/core/src/components/DismissableBanner/DismissableBanner.test.js

@@ -0,0 +1,46 @@
+/*
+ * 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 { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import { renderWithEffects, wrapInThemedTestApp } from '@backstage/test-utils';
+// import { createSetting } from 'shared/apis/settings';
+import DismissableBanner from './DismissableBanner';
+
+describe('<DismissableBanner />', () => {
+  it('renders the message and the popover', async () => {
+    /*
+    const mockSetting = createSetting({
+      id: 'mockSetting',
+      defaultValue: true,
+    });
+    */
+
+    const rendered = await renderWithEffects(
+      wrapInThemedTestApp(
+        <DismissableBanner
+          variant="info"
+          // setting={mockSetting}
+          message="test message"
+        />,
+      ),
+    );
+    rendered.getByText('test message');
+
+    // fireEvent.click(rendered.getByTitle('Permanently dismiss this message'));
+    // await waitForElementToBeRemoved(rendered.queryByText('test message'));
+  });
+});

packages/core/src/components/DismissableBanner/DismissableBanner.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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, ReactNode, useState } from 'react';
+import classNames from 'classnames';
+import { makeStyles, Theme } from '@material-ui/core';
+import Snackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import IconButton from '@material-ui/core/IconButton';
+import Close from '@material-ui/icons/Close';
+// import { useSetting, Setting } from 'shared/apis/settings';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    position: 'relative',
+    padding: theme.spacing(0),
+    marginBottom: theme.spacing(6),
+    marginTop: -theme.spacing(3),
+    display: 'flex',
+    flexFlow: 'row nowrap',
+  },
+  icon: {
+    fontSize: 20,
+  },
+  content: {
+    width: '100%',
+    maxWidth: 'inherit',
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  info: {
+    backgroundColor: theme.palette.primary.main,
+  },
+  error: {
+    backgroundColor: theme.palette.error.dark,
+  },
+}));
+
+type Props = {
+  variant: 'info' | 'error';
+  // setting: Setting<boolean>;
+  message: ReactNode;
+};
+
+const DismissableBanner: FC<Props> = ({ variant, /* setting, */ message }) => {
+  // const [show, setShown, loading] = useSetting(setting);
+  const [show, setShown] = useState(true);
+  const classes = useStyles();
+
+  const handleClick = () => {
+    setShown(false);
+  };
+
+  return (
+    <Snackbar
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      open={show /* && !loading */}
+      classes={{ root: classes.root }}
+    >
+      <SnackbarContent
+        classes={{
+          root: classNames(classes.content, classes[variant]),
+          message: classes.message,
+        }}
+        message={message}
+        action={[
+          <IconButton
+            key="dismiss"
+            title="Permanently dismiss this message"
+            color="inherit"
+            onClick={handleClick}
+          >
+            <Close className={classes.icon} />
+          </IconButton>,
+        ]}
+      />
+    </Snackbar>
+  );
+};
+
+export default DismissableBanner;

packages/core/src/components/DismissableBanner/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export { default } from './DismissableBanner';

packages/core/src/index.ts

@@ -23,6 +23,7 @@ export type { PageTheme } from './layout/Page';
 export { default as CodeSnippet } from './components/CodeSnippet';
 export { default as Content } from './layout/Content/Content';
 export { default as ContentHeader } from './layout/ContentHeader/ContentHeader';
+export { default as DismissableBanner } from './components/DismissableBanner';
 export { default as Header } from './layout/Header/Header';
 export { default as HeaderLabel } from './layout/HeaderLabel';
 export { default as HomepageTimer } from './layout/HomepageTimer';

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -18,6 +18,7 @@ import React, { FC } from 'react';
 import {
   Content,
   ContentHeader,
+  DismissableBanner,
   Header,
   HomepageTimer,
   SupportButton,
@@ -31,7 +32,7 @@ import {
   CatalogFilter,
   CatalogFilterItem,
 } from '../CatalogFilter/CatalogFilter';
-import { Button, makeStyles } from '@material-ui/core';
+import { Button, makeStyles, Typography, Link } from '@material-ui/core';
 import { filterGroups, defaultFilter } from '../../data/filters';
 
 const useStyles = makeStyles(theme => ({
@@ -65,6 +66,22 @@ const CatalogPage: FC<CatalogPageProps> = ({ componentFactory }) => {
         <HomepageTimer />
       </Header>
       <Content>
+        <DismissableBanner
+          variant="info"
+          message={
+            <Typography>
+              <span role="img" aria-label="wave" style={{ fontSize: '125%' }}>
+                👋🏼
+              </span>{' '}
+              Welcome to Backstage, we are happy to have you. Start by checking
+              out our{' '}
+              <Link href="/welcome" color="textSecondary">
+                getting started
+              </Link>{' '}
+              page.
+            </Typography>
+          }
+        />
         <ContentHeader title="Services">
           <Button variant="contained" color="primary" href="/create">
             Create Service

plugins/catalog/src/plugin.ts

@@ -22,7 +22,7 @@ import { withMockStore } from './data/with-mock-store';
 export const plugin = createPlugin({
   id: 'catalog',
   register({ router }) {
-    router.registerRoute('/catalog', withMockStore(CatalogPage));
+    router.registerRoute('/', withMockStore(CatalogPage));
     router.registerRoute('/catalog/:name/', withMockStore(ComponentPage));
   },
 });

plugins/welcome/src/plugin.ts

@@ -20,7 +20,7 @@ import WelcomePage from './components/WelcomePage';
 export const plugin = createPlugin({
   id: 'welcome',
   register({ router, featureFlags }) {
-    router.registerRoute('/', WelcomePage);
+    router.registerRoute('/welcome', WelcomePage);
 
     featureFlags.register('enable-welcome-box');
   },