Merge pull request #216 from spotify/nikek/supportbutton

Add SupportButton to core components

packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -8,6 +8,7 @@ import {
   Content,
   ContentHeader,
   HeaderLabel,
+  SupportButton,
 } from '@spotify-backstage/core';
 import ExampleFetchComponent from '../ExampleFetchComponent';
 
@@ -18,7 +19,9 @@ const ExampleComponent: FC<{}> = () => (
       <HeaderLabel label="Lifecycle" value="Alpha" />
     </Header>
     <Content>
-      <ContentHeader title="Plugin title" />
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
       <Grid
         container
         spacing={3}

packages/core/src/components/SupportButton/SupportButton.tsx

@@ -0,0 +1,133 @@
+import React, { FC, Fragment, useState } from 'react';
+import {
+  Button,
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  Popover,
+  Typography,
+  makeStyles,
+  ListItemText,
+} from '@material-ui/core';
+import GroupIcon from '@material-ui/icons/Group';
+import HelpIcon from '@material-ui/icons/Help';
+
+// import { EmailIcon, SlackIcon, SupportIcon } from 'shared/icons';
+// import { Button, Link } from 'shared/components';
+// import { StackOverflow, StackOverflowTag } from 'shared/components/layout';
+
+type Props = {
+  slackChannel?: string | string[];
+  email?: string | string[];
+  plugin?: any;
+};
+
+const useStyles = makeStyles(theme => ({
+  leftIcon: {
+    marginRight: theme.spacing(1),
+  },
+  popoverList: {
+    minWidth: 260,
+    maxWidth: 320,
+  },
+}));
+
+const SupportButton: FC<Props> = ({
+  slackChannel = '#backstage',
+  email = [],
+  children,
+  // plugin,
+}) => {
+  // TODO: get plugin manifest with hook
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const classes = useStyles();
+
+  const onClickHandler = event => {
+    setAnchorEl(event.currentTarget);
+    setPopoverOpen(true);
+  };
+
+  const popoverCloseHandler = () => {
+    setPopoverOpen(false);
+  };
+
+  // const tags = plugin ? plugin.stackoverflowTags : undefined;
+  const slackChannels = Array.isArray(slackChannel)
+    ? slackChannel
+    : [slackChannel];
+  const contactEmails = Array.isArray(email) ? email : [email];
+
+  return (
+    <Fragment>
+      <Button color="primary" onClick={onClickHandler}>
+        <HelpIcon className={classes.leftIcon} />
+        Support
+      </Button>
+      <Popover
+        open={popoverOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        onClose={popoverCloseHandler}
+      >
+        <List className={classes.popoverList}>
+          {React.Children.map(children, (child, i) => (
+            <ListItem alignItems="flex-start" key={i}>
+              {child}
+            </ListItem>
+          ))}
+          {/* {tags && tags.length > 0 && (
+            <ListItem alignItems="flex-start">
+              <StackOverflow>
+                {tags.map((tag, i) => (
+                  <StackOverflowTag key={i} tag={tag} />
+                ))}
+              </StackOverflow>
+            </ListItem>
+          )} */}
+          {slackChannels && (
+            <ListItem>
+              <ListItemIcon>
+                <GroupIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="Support"
+                secondary={
+                  <div>
+                    {slackChannels.map((channel, i) => (
+                      <Link key={i}>{channel}</Link>
+                    ))}
+                  </div>
+                }
+              />
+            </ListItem>
+          )}
+          {contactEmails.length > 0 && (
+            <ListItem>
+              <ListItemIcon>
+                <GroupIcon />
+              </ListItemIcon>
+              <ListItemText primary="Contact" />
+              {contactEmails.map((email, index) => (
+                <Typography key={index}>
+                  <Link>{email}</Link>
+                </Typography>
+              ))}
+            </ListItem>
+          )}
+        </List>
+      </Popover>
+    </Fragment>
+  );
+};
+
+export default SupportButton;

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

@@ -0,0 +1 @@
+export { default } from './SupportButton';

packages/core/src/index.ts

@@ -18,5 +18,6 @@ export { default as HorizontalScrollGrid } from './components/HorizontalScrollGr
 export { default as ProgressCard } from './components/ProgressCard';
 export { default as CircleProgress } from './components/CircleProgress';
 export { default as Progress } from './components/Progress';
+export { default as SupportButton } from './components/SupportButton';
 export { default as SortableTable } from './components/SortableTable';
 export { default as TemplateList } from './components/TemplateList/TemplateList';