From bad14a7d09380d91558452e7902f067a3f85f656 Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Sat, 12 Feb 2022 15:01:38 +0530 Subject: [PATCH 1/5] feat: slack community link is updated --- frontend/src/container/SideNav/Slack.tsx | 48 ++++++++++++++++++++++++ frontend/src/container/SideNav/index.tsx | 17 ++++++++- frontend/src/container/SideNav/styles.ts | 17 ++++++++- 3 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 frontend/src/container/SideNav/Slack.tsx diff --git a/frontend/src/container/SideNav/Slack.tsx b/frontend/src/container/SideNav/Slack.tsx new file mode 100644 index 0000000000..d0cc536e38 --- /dev/null +++ b/frontend/src/container/SideNav/Slack.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +const Slack = (): JSX.Element => { + return ( + + + + + + + + + + + ); +}; + +export default Slack; diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index c96e46b18d..64da5b5a44 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -1,5 +1,5 @@ import { Menu, Typography } from 'antd'; -import { ToggleButton } from './styles'; +import { MenuItem, SlackButton, ToggleButton } from './styles'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import React, { useCallback, useState } from 'react'; @@ -17,6 +17,7 @@ import setTheme from 'lib/theme/setTheme'; import menus from './menuItems'; import { Logo, Sider, ThemeSwitcherWrapper } from './styles'; +import Slack from './Slack'; const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { const [collapsed, setCollapsed] = useState(false); @@ -57,10 +58,18 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { [pathname], ); + const onClickSlackHandler = () => { + window.open('https://signoz.io/slack', '_blank'); + }; + return ( - + @@ -81,6 +90,10 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { {name} ))} + + }> + Slack + ); diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts index 11583359e1..47d452f55d 100644 --- a/frontend/src/container/SideNav/styles.ts +++ b/frontend/src/container/SideNav/styles.ts @@ -1,4 +1,4 @@ -import { Layout, Switch } from 'antd'; +import { Layout, Menu, Switch, Typography } from 'antd'; import styled from 'styled-components'; const { Sider: SiderComponent } = Layout; @@ -36,3 +36,18 @@ export const ToggleButton = styled(Switch)` } `; +export const SlackButton = styled(Typography)` + &&& { + margin-left: 1rem; + } +`; + +export const MenuItem = styled(Menu.Item)` + &&& { + position: fixed; + bottom: 48px; + width: 100%; + height: 48px; + background: #262626; + } +`; From 31f0a9f0b6eb6df54b95c5b07c605ec53648f14a Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Sat, 12 Feb 2022 15:17:40 +0530 Subject: [PATCH 2/5] feat: slack community link is updated --- frontend/src/container/SideNav/index.tsx | 15 ++++++++++---- frontend/src/container/SideNav/styles.ts | 25 +++++++++++++++++++++++- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index 64da5b5a44..472ee6f2ae 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -1,5 +1,10 @@ import { Menu, Typography } from 'antd'; -import { MenuItem, SlackButton, ToggleButton } from './styles'; +import { + MenuItem, + SlackButton, + SlackMenuItemContainer, + ToggleButton, +} from './styles'; import ROUTES from 'constants/routes'; import history from 'lib/history'; import React, { useCallback, useState } from 'react'; @@ -91,9 +96,11 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { ))} - }> - Slack - + + }> + Slack + + ); diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts index 47d452f55d..a4790e84a0 100644 --- a/frontend/src/container/SideNav/styles.ts +++ b/frontend/src/container/SideNav/styles.ts @@ -1,5 +1,5 @@ import { Layout, Menu, Switch, Typography } from 'antd'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; const { Sider: SiderComponent } = Layout; export const ThemeSwitcherWrapper = styled.div` @@ -51,3 +51,26 @@ export const MenuItem = styled(Menu.Item)` background: #262626; } `; + +export const SlackMenuItemContainer = styled.div` + &&& { + li { + ${({ collapsed }) => + collapsed && + css` + padding-left: 24px; + `} + } + + svg { + margin-left: ${({ collapsed }) => (collapsed ? '0' : '24px')}; + + ${({ collapsed }) => + collapsed && + css` + height: 100%; + margin: 0 auto; + `} + } + } +`; From 567c81c0f9bf646e123513df3333ab8384a80883 Mon Sep 17 00:00:00 2001 From: Palash gupta Date: Sun, 13 Feb 2022 12:05:20 +0530 Subject: [PATCH 3/5] chore:button text is updated --- frontend/src/container/SideNav/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index 472ee6f2ae..6e203d4ab2 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -98,7 +98,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { }> - Slack + Support From 3beb7f1843fde48b1131a8b044b8796ab5258932 Mon Sep 17 00:00:00 2001 From: Udasi Tharani Date: Tue, 22 Feb 2022 22:35:29 +0530 Subject: [PATCH 4/5] removing feedback fab button --- .../container/AppLayout/FeedBack/index.tsx | 127 ------------------ .../container/AppLayout/FeedBack/styles.ts | 64 --------- frontend/src/container/AppLayout/index.tsx | 3 - 3 files changed, 194 deletions(-) delete mode 100644 frontend/src/container/AppLayout/FeedBack/index.tsx delete mode 100644 frontend/src/container/AppLayout/FeedBack/styles.ts diff --git a/frontend/src/container/AppLayout/FeedBack/index.tsx b/frontend/src/container/AppLayout/FeedBack/index.tsx deleted file mode 100644 index 13e0279806..0000000000 --- a/frontend/src/container/AppLayout/FeedBack/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { CloseCircleOutlined, CommentOutlined } from '@ant-design/icons'; -import { Button, Divider, Form, Input, notification, Typography } from 'antd'; -import { Callbacks } from 'rc-field-form/lib/interface'; -import React, { useCallback, useState } from 'react'; - -import { - Button as IconButton, - ButtonContainer, - Card, - CenterText, - Container, - TitleContainer, - FormItem, -} from './styles'; -const { Title } = Typography; -const { TextArea } = Input; -import sendFeedbackApi from 'api/userFeedback/sendFeedback'; - -const Feedback = (): JSX.Element => { - const [isOpen, setisOpen] = useState(false); - const [form] = Form.useForm(); - const [isLoading, setIsLoading] = useState(false); - - const [notifications, Element] = notification.useNotification(); - - const isToggleHandler = useCallback(() => { - setisOpen((state) => !state); - }, []); - - const onFinishHandler: Callbacks['onFinish'] = async ( - value: Feedback, - ): Promise => { - try { - setIsLoading(true); - const { feedback, email = '' } = value; - - const response = await sendFeedbackApi({ - email, - message: feedback, - }); - - if (response === 200) { - notifications.success({ - message: 'Thanks for your feedback!', - description: - 'We have noted down your feedback and will work on improving SIgNoz based on that!', - }); - - isToggleHandler(); - } else { - notifications.error({ - message: 'Error!', - description: 'Something went wrong', - }); - } - setIsLoading(false); - } catch (error) { - notifications.error({ - message: 'Something went wrong', - }); - setIsLoading(false); - } - }; - - return ( - - {!isOpen && ( - - - - )} - - {Element} - - {isOpen && ( -
- - - - How can we improve SigNoz? - - - - - - - -