mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-16 10:05:53 +08:00
Merge pull request #753 from udasitharani/749-feedback-fab
Removing Feedback FAB
This commit is contained in:
Ankit Nayan
GitHub
commit
8b224dd59c
@ -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<boolean>(false);
|
||||
const [form] = Form.useForm();
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
const [notifications, Element] = notification.useNotification();
|
||||
|
||||
const isToggleHandler = useCallback(() => {
|
||||
setisOpen((state) => !state);
|
||||
}, []);
|
||||
|
||||
const onFinishHandler: Callbacks<Feedback>['onFinish'] = async (
|
||||
value: Feedback,
|
||||
): Promise<void> => {
|
||||
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 (
|
||||
<Container>
|
||||
{!isOpen && (
|
||||
<IconButton onClick={isToggleHandler} type="primary" size="large">
|
||||
<CommentOutlined />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{Element}
|
||||
|
||||
{isOpen && (
|
||||
<Form onFinish={onFinishHandler} form={form}>
|
||||
<Card>
|
||||
<TitleContainer>
|
||||
<Title
|
||||
aria-label="How can we improve SigNoz?"
|
||||
style={{ margin: 0 }}
|
||||
level={5}
|
||||
>
|
||||
How can we improve SigNoz?
|
||||
</Title>
|
||||
<CloseCircleOutlined onClick={isToggleHandler} />
|
||||
</TitleContainer>
|
||||
|
||||
<Divider />
|
||||
|
||||
<FormItem name="feedback" required>
|
||||
<TextArea
|
||||
required
|
||||
rows={3}
|
||||
placeholder="Share what can we improve ( e.g. Not able to find how to see metrics... )"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="email">
|
||||
<Input type="email" placeholder="Email (optional)" />
|
||||
</FormItem>
|
||||
|
||||
<CenterText>This will just be visible to our maintainers</CenterText>
|
||||
|
||||
<ButtonContainer>
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
htmlType="submit"
|
||||
type="primary"
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
</ButtonContainer>
|
||||
</Card>
|
||||
</Form>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
interface Feedback {
|
||||
email?: string;
|
||||
feedback: string;
|
||||
}
|
||||
|
||||
export default Feedback;
|
||||
@ -1,64 +0,0 @@
|
||||
import {
|
||||
Button as ButtonComponent,
|
||||
Card as CardComponent,
|
||||
Typography,
|
||||
Form,
|
||||
} from 'antd';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
position: fixed;
|
||||
bottom: 5%;
|
||||
right: 4%;
|
||||
z-index: 999999;
|
||||
`;
|
||||
|
||||
export const CenterText = styled(Typography)`
|
||||
&&& {
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TitleContainer = styled.div`
|
||||
&&& {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Card = styled(CardComponent)`
|
||||
&&& {
|
||||
min-width: 400px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ButtonContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const Button = styled(ButtonComponent)`
|
||||
height: 4rem !important;
|
||||
width: 4rem !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 25px !important;
|
||||
|
||||
background-color: #65b7f3;
|
||||
|
||||
svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormItem = styled(Form.Item)`
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
`;
|
||||
@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
|
||||
import { AppState } from 'store/reducers';
|
||||
import AppReducer from 'types/reducer/app';
|
||||
|
||||
import Feedback from './FeedBack';
|
||||
import { Content, Footer, Layout } from './styles';
|
||||
|
||||
const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
|
||||
@ -40,8 +39,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
|
||||
</Content>
|
||||
<Footer>{`SigNoz Inc. © ${currentYear}`}</Footer>
|
||||
</Layout>
|
||||
|
||||
<Feedback />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
48
frontend/src/container/SideNav/Slack.tsx
Normal file
48
frontend/src/container/SideNav/Slack.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
const Slack = (): JSX.Element => {
|
||||
return (
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 28 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.08886 17.6001C6.08886 19.1778 4.79997 20.4667 3.2222 20.4667C1.64442 20.4667 0.35553 19.1778 0.35553 17.6001C0.35553 16.0223 1.64442 14.7334 3.2222 14.7334H6.08886V17.6001Z"
|
||||
fill="#E01E5A"
|
||||
/>
|
||||
<path
|
||||
d="M7.53333 17.6001C7.53333 16.0223 8.82221 14.7334 10.4 14.7334C11.9778 14.7334 13.2667 16.0223 13.2667 17.6001V24.7778C13.2667 26.3556 11.9778 27.6445 10.4 27.6445C8.82221 27.6445 7.53333 26.3556 7.53333 24.7778V17.6001Z"
|
||||
fill="#E01E5A"
|
||||
/>
|
||||
<path
|
||||
d="M10.4 6.08892C8.82221 6.08892 7.53333 4.80004 7.53333 3.22226C7.53333 1.64448 8.82221 0.355591 10.4 0.355591C11.9778 0.355591 13.2667 1.64448 13.2667 3.22226V6.08892H10.4Z"
|
||||
fill="#36C5F0"
|
||||
/>
|
||||
<path
|
||||
d="M10.4 7.53333C11.9778 7.53333 13.2666 8.82221 13.2666 10.4C13.2666 11.9778 11.9778 13.2667 10.4 13.2667H3.2222C1.64442 13.2667 0.35553 11.9778 0.35553 10.4C0.35553 8.82221 1.64442 7.53333 3.2222 7.53333H10.4Z"
|
||||
fill="#36C5F0"
|
||||
/>
|
||||
<path
|
||||
d="M21.9111 10.4C21.9111 8.82221 23.2 7.53333 24.7778 7.53333C26.3556 7.53333 27.6445 8.82221 27.6445 10.4C27.6445 11.9778 26.3556 13.2667 24.7778 13.2667H21.9111V10.4Z"
|
||||
fill="#2EB67D"
|
||||
/>
|
||||
<path
|
||||
d="M20.4667 10.4C20.4667 11.9778 19.1778 13.2667 17.6 13.2667C16.0222 13.2667 14.7333 11.9778 14.7333 10.4V3.22226C14.7333 1.64448 16.0222 0.355591 17.6 0.355591C19.1778 0.355591 20.4667 1.64448 20.4667 3.22226V10.4Z"
|
||||
fill="#2EB67D"
|
||||
/>
|
||||
<path
|
||||
d="M17.6 21.9111C19.1778 21.9111 20.4667 23.2 20.4667 24.7778C20.4667 26.3556 19.1778 27.6445 17.6 27.6445C16.0222 27.6445 14.7333 26.3556 14.7333 24.7778V21.9111H17.6Z"
|
||||
fill="#ECB22E"
|
||||
/>
|
||||
<path
|
||||
d="M17.6 20.4667C16.0222 20.4667 14.7333 19.1778 14.7333 17.6001C14.7333 16.0223 16.0222 14.7334 17.6 14.7334H24.7778C26.3556 14.7334 27.6444 16.0223 27.6444 17.6001C27.6444 19.1778 26.3556 20.4667 24.7778 20.4667H17.6Z"
|
||||
fill="#ECB22E"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Slack;
|
||||
@ -1,5 +1,10 @@
|
||||
import { Menu, Typography } from 'antd';
|
||||
import { 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';
|
||||
@ -17,6 +22,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<boolean>(false);
|
||||
@ -57,10 +63,18 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
|
||||
[pathname],
|
||||
);
|
||||
|
||||
const onClickSlackHandler = () => {
|
||||
window.open('https://signoz.io/slack', '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
|
||||
<ThemeSwitcherWrapper>
|
||||
<ToggleButton checked={isDarkMode} onChange={toggleTheme} defaultChecked={isDarkMode} />
|
||||
<ToggleButton
|
||||
checked={isDarkMode}
|
||||
onChange={toggleTheme}
|
||||
defaultChecked={isDarkMode}
|
||||
/>
|
||||
</ThemeSwitcherWrapper>
|
||||
<NavLink to={ROUTES.APPLICATION}>
|
||||
<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
|
||||
@ -81,6 +95,12 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
|
||||
<Typography>{name}</Typography>
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
||||
<SlackMenuItemContainer collapsed={collapsed}>
|
||||
<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
|
||||
<SlackButton>Support</SlackButton>
|
||||
</MenuItem>
|
||||
</SlackMenuItemContainer>
|
||||
</Menu>
|
||||
</Sider>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Layout, Switch } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import { Layout, Menu, Switch, Typography } from 'antd';
|
||||
import styled, { css } from 'styled-components';
|
||||
const { Sider: SiderComponent } = Layout;
|
||||
|
||||
export const ThemeSwitcherWrapper = styled.div`
|
||||
@ -23,6 +23,9 @@ export const Sider = styled(SiderComponent)`
|
||||
.ant-typography {
|
||||
color: white;
|
||||
}
|
||||
.ant-layout-sider-trigger {
|
||||
background-color: #1f1f1f;
|
||||
}
|
||||
`;
|
||||
|
||||
interface DarkModeProps {
|
||||
@ -36,3 +39,41 @@ export const ToggleButton = styled(Switch)<DarkModeProps>`
|
||||
}
|
||||
`;
|
||||
|
||||
export const SlackButton = styled(Typography)`
|
||||
&&& {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MenuItem = styled(Menu.Item)`
|
||||
&&& {
|
||||
position: fixed;
|
||||
bottom: 48px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #262626;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SlackMenuItemContainer = styled.div<LogoProps>`
|
||||
&&& {
|
||||
li {
|
||||
${({ collapsed }) =>
|
||||
collapsed &&
|
||||
css`
|
||||
padding-left: 24px;
|
||||
`}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-left: ${({ collapsed }) => (collapsed ? '0' : '24px')};
|
||||
|
||||
${({ collapsed }) =>
|
||||
collapsed &&
|
||||
css`
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
`}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user