From 7a284ad19323a6454a6697cad2dc018e1b3dbefd Mon Sep 17 00:00:00 2001
From: nikek <nikek@spotify.com>
Date: Mon, 9 Mar 2020 16:46:46 +0100
Subject: [PATCH] Add SupportButton to core components

---
 .../SupportButton/SupportButton.tsx           | 131 ++++++++++++++++++
 .../src/components/SupportButton/index.ts     |   1 +
 packages/core/src/index.ts                    |   1 +
 3 files changed, 133 insertions(+)
 create mode 100644 packages/core/src/components/SupportButton/SupportButton.tsx
 create mode 100644 packages/core/src/components/SupportButton/index.ts

diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
new file mode 100644
index 0000000000..7de0f8bd45
--- /dev/null
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -0,0 +1,131 @@
+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 { 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}>
+        <GroupIcon 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;
diff --git a/packages/core/src/components/SupportButton/index.ts b/packages/core/src/components/SupportButton/index.ts
new file mode 100644
index 0000000000..1e0974b2a2
--- /dev/null
+++ b/packages/core/src/components/SupportButton/index.ts
@@ -0,0 +1 @@
+export { default } from './SupportButton';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3db642aad3..12815e26bc 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -17,5 +17,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';