From 7a284ad19323a6454a6697cad2dc018e1b3dbefd Mon Sep 17 00:00:00 2001 From: nikek Date: Mon, 9 Mar 2020 16:46:46 +0100 Subject: [PATCH 1/3] 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 = ({ + 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 ( + + + + + {React.Children.map(children, (child, i) => ( + + {child} + + ))} + {/* {tags && tags.length > 0 && ( + + + {tags.map((tag, i) => ( + + ))} + + + )} */} + {slackChannels && ( + + + + + + {slackChannels.map((channel, i) => ( + {channel} + ))} + + } + /> + + )} + {contactEmails.length > 0 && ( + + + + + + {contactEmails.map((email, index) => ( + + {email} + + ))} + + )} + + + + ); +}; + +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'; From fa4c7d465ff017f317442a94c97ff2d11d9dea5f Mon Sep 17 00:00:00 2001 From: nikek Date: Mon, 9 Mar 2020 16:54:05 +0100 Subject: [PATCH 2/3] Add Support button to create-plugin template --- .../components/ExampleComponent/ExampleComponent.tsx.hbs | 3 ++- .../core/src/components/SupportButton/SupportButton.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index ac101c6583..c87cbdb582 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/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,7 @@ const ExampleComponent: FC<{}> = () => ( - + ({ From bc37fe1f76cd9b66cb901498b4d83bc53496239e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20=C3=85lund?= Date: Mon, 9 Mar 2020 20:00:20 +0100 Subject: [PATCH 3/3] Small tweaks to the SupportButton use --- .../components/ExampleComponent/ExampleComponent.tsx.hbs | 6 ++++-- .../core/src/components/SupportButton/SupportButton.tsx | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index c87cbdb582..c49d7faebb 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -8,7 +8,7 @@ import { Content, ContentHeader, HeaderLabel, - SupportButton + SupportButton, } from '@spotify-backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; @@ -19,7 +19,9 @@ const ExampleComponent: FC<{}> = () => ( - + + A description of your plugin goes here. + = ({ return (