mirror of
https://github.com/SigNoz/signoz.git
synced 2025-12-17 15:36:48 +00:00
feat: hide feedback for non licensed users (#9176)
This commit is contained in:
parent
80f0c6dd92
commit
5a47a4349b
@ -2,6 +2,7 @@ import './HeaderRightSection.styles.scss';
|
|||||||
|
|
||||||
import { Button, Popover } from 'antd';
|
import { Button, Popover } from 'antd';
|
||||||
import logEvent from 'api/common/logEvent';
|
import logEvent from 'api/common/logEvent';
|
||||||
|
import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
|
||||||
import { Globe, Inbox, SquarePen } from 'lucide-react';
|
import { Globe, Inbox, SquarePen } from 'lucide-react';
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
@ -20,13 +21,15 @@ function HeaderRightSection({
|
|||||||
enableAnnouncements,
|
enableAnnouncements,
|
||||||
enableShare,
|
enableShare,
|
||||||
enableFeedback,
|
enableFeedback,
|
||||||
}: HeaderRightSectionProps): JSX.Element {
|
}: HeaderRightSectionProps): JSX.Element | null {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
|
const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
|
||||||
const [openShareURLModal, setOpenShareURLModal] = useState(false);
|
const [openShareURLModal, setOpenShareURLModal] = useState(false);
|
||||||
const [openAnnouncementsModal, setOpenAnnouncementsModal] = useState(false);
|
const [openAnnouncementsModal, setOpenAnnouncementsModal] = useState(false);
|
||||||
|
|
||||||
|
const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
|
||||||
|
|
||||||
const handleOpenFeedbackModal = useCallback((): void => {
|
const handleOpenFeedbackModal = useCallback((): void => {
|
||||||
logEvent('Feedback: Clicked', {
|
logEvent('Feedback: Clicked', {
|
||||||
page: location.pathname,
|
page: location.pathname,
|
||||||
@ -63,9 +66,11 @@ function HeaderRightSection({
|
|||||||
setOpenShareURLModal(open);
|
setOpenShareURLModal(open);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isLicenseEnabled = isEnterpriseSelfHostedUser || isCloudUser;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="header-right-section-container">
|
<div className="header-right-section-container">
|
||||||
{enableFeedback && (
|
{enableFeedback && isLicenseEnabled && (
|
||||||
<Popover
|
<Popover
|
||||||
rootClassName="header-section-popover-root"
|
rootClassName="header-section-popover-root"
|
||||||
className="shareable-link-popover"
|
className="shareable-link-popover"
|
||||||
|
|||||||
@ -5,6 +5,7 @@
|
|||||||
import { render, screen } from '@testing-library/react';
|
import { render, screen } from '@testing-library/react';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
import logEvent from 'api/common/logEvent';
|
import logEvent from 'api/common/logEvent';
|
||||||
|
import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
import HeaderRightSection from '../HeaderRightSection';
|
import HeaderRightSection from '../HeaderRightSection';
|
||||||
@ -44,8 +45,13 @@ jest.mock('../AnnouncementsModal', () => ({
|
|||||||
),
|
),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
jest.mock('hooks/useGetTenantLicense', () => ({
|
||||||
|
useGetTenantLicense: jest.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
const mockLogEvent = logEvent as jest.Mock;
|
const mockLogEvent = logEvent as jest.Mock;
|
||||||
const mockUseLocation = useLocation as jest.Mock;
|
const mockUseLocation = useLocation as jest.Mock;
|
||||||
|
const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
enableAnnouncements: true,
|
enableAnnouncements: true,
|
||||||
@ -61,6 +67,13 @@ describe('HeaderRightSection', () => {
|
|||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
jest.clearAllMocks();
|
jest.clearAllMocks();
|
||||||
mockUseLocation.mockReturnValue(mockLocation);
|
mockUseLocation.mockReturnValue(mockLocation);
|
||||||
|
// Default to licensed user (Enterprise or Cloud)
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: true,
|
||||||
|
isEnterpriseSelfHostedUser: false,
|
||||||
|
isCommunityUser: false,
|
||||||
|
isCommunityEnterpriseUser: false,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render all buttons when all features are enabled', () => {
|
it('should render all buttons when all features are enabled', () => {
|
||||||
@ -189,4 +202,84 @@ describe('HeaderRightSection', () => {
|
|||||||
expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
|
expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
|
||||||
expect(screen.queryByTestId('share-modal')).not.toBeInTheDocument();
|
expect(screen.queryByTestId('share-modal')).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should show feedback button for Cloud users when feedback is enabled', () => {
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: true,
|
||||||
|
isEnterpriseSelfHostedUser: false,
|
||||||
|
isCommunityUser: false,
|
||||||
|
isCommunityEnterpriseUser: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<HeaderRightSection {...defaultProps} />);
|
||||||
|
|
||||||
|
const feedbackButton = document.querySelector('.lucide-square-pen');
|
||||||
|
expect(feedbackButton).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show feedback button for Enterprise self-hosted users when feedback is enabled', () => {
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: false,
|
||||||
|
isEnterpriseSelfHostedUser: true,
|
||||||
|
isCommunityUser: false,
|
||||||
|
isCommunityEnterpriseUser: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<HeaderRightSection {...defaultProps} />);
|
||||||
|
|
||||||
|
const feedbackButton = document.querySelector('.lucide-square-pen');
|
||||||
|
expect(feedbackButton).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should hide feedback button for Community users even when feedback is enabled', () => {
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: false,
|
||||||
|
isEnterpriseSelfHostedUser: false,
|
||||||
|
isCommunityUser: true,
|
||||||
|
isCommunityEnterpriseUser: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<HeaderRightSection {...defaultProps} />);
|
||||||
|
|
||||||
|
const feedbackButton = document.querySelector('.lucide-square-pen');
|
||||||
|
expect(feedbackButton).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should hide feedback button for Community Enterprise users even when feedback is enabled', () => {
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: false,
|
||||||
|
isEnterpriseSelfHostedUser: false,
|
||||||
|
isCommunityUser: false,
|
||||||
|
isCommunityEnterpriseUser: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<HeaderRightSection {...defaultProps} />);
|
||||||
|
|
||||||
|
const feedbackButton = document.querySelector('.lucide-square-pen');
|
||||||
|
expect(feedbackButton).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render correct number of buttons when feedback is hidden due to license', () => {
|
||||||
|
mockUseGetTenantLicense.mockReturnValue({
|
||||||
|
isCloudUser: false,
|
||||||
|
isEnterpriseSelfHostedUser: false,
|
||||||
|
isCommunityUser: true,
|
||||||
|
isCommunityEnterpriseUser: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
render(<HeaderRightSection {...defaultProps} />);
|
||||||
|
|
||||||
|
// Should have 2 buttons (announcements + share) instead of 3
|
||||||
|
const buttons = screen.getAllByRole('button');
|
||||||
|
expect(buttons).toHaveLength(2);
|
||||||
|
|
||||||
|
// Verify which buttons are present
|
||||||
|
expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
|
||||||
|
const inboxIcon = document.querySelector('.lucide-inbox');
|
||||||
|
expect(inboxIcon).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Verify feedback button is not present
|
||||||
|
const feedbackIcon = document.querySelector('.lucide-square-pen');
|
||||||
|
expect(feedbackIcon).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { fireEvent, render, screen } from '@testing-library/react';
|
|
||||||
import { createMemoryHistory } from 'history';
|
import { createMemoryHistory } from 'history';
|
||||||
import { Router } from 'react-router-dom';
|
import { Router } from 'react-router-dom';
|
||||||
|
import { fireEvent, render, screen } from 'tests/test-utils';
|
||||||
|
|
||||||
import RouteTab from './index';
|
import RouteTab from './index';
|
||||||
import { RouteTabProps } from './types';
|
import { RouteTabProps } from './types';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user