fix: restrict visibility of facing-issue button to only cloud users with intercom setup (#4907)

* fix: restrict visibilty of facing-issue button to only cloud users with intercom setup

* fix: restrict visibilty of facing-issue button to only cloud users with intercom setup

* fix: added a comment

* fix: added chat support feature flag condition

* fix: added a comment

* fix: changed folder structure

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -3,9 +3,9 @@ import './DynamicColumnTable.syles.scss';
 
 import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
-import FacingIssueBtn from 'utils/facingIssueBtn/FacingIssueBtn';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';

frontend/src/components/ResizeTable/types.ts

@@ -2,7 +2,7 @@
 import { TableProps } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ColumnGroupType, ColumnType } from 'antd/lib/table';
-import { FacingIssueBtnProps } from 'utils/facingIssueBtn/FacingIssueBtn';
+import { FacingIssueBtnProps } from 'components/facingIssueBtn/FacingIssueBtn';
 
 import { TableDataSource } from './contants';
 

frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx

@@ -3,8 +3,11 @@ import './FacingIssueBtn.style.scss';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import { FeatureKeys } from 'constants/features';
+import useFeatureFlags from 'hooks/useFeatureFlag';
 import { defaultTo } from 'lodash-es';
 import { HelpCircle } from 'lucide-react';
+import { isCloudUser } from 'utils/app';
 
 export interface FacingIssueBtnProps {
 	eventName: string;
@@ -20,7 +23,7 @@ function FacingIssueBtn({
 	message = '',
 	buttonText = '',
 	className = '',
-}: FacingIssueBtnProps): JSX.Element {
+}: FacingIssueBtnProps): JSX.Element | null {
 	const handleFacingIssuesClick = (): void => {
 		logEvent(eventName, attributes);
 
@@ -29,7 +32,10 @@ function FacingIssueBtn({
 		}
 	};
 
-	return (
+	const isChatSupportEnabled = useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active;
+	const isCloudUserVal = isCloudUser();
+
+	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
 		<div className="facing-issue-button">
 			<Button
 				className={cx('periscope-btn', 'facing-issue-button', className)}
@@ -39,7 +45,7 @@ function FacingIssueBtn({
 				{buttonText || 'Facing issues?'}
 			</Button>
 		</div>
-	);
+	) : null;
 }
 
 FacingIssueBtn.defaultProps = {

frontend/src/container/FormAlertRules/index.tsx

@@ -11,6 +11,7 @@ import {
 } from 'antd';
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -41,7 +42,6 @@ import {
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import FacingIssueBtn from 'utils/facingIssueBtn/FacingIssueBtn';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -2,6 +2,7 @@ import './GridCardLayout.styles.scss';
 
 import { PlusOutlined } from '@ant-design/icons';
 import { Flex, Tooltip } from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -26,7 +27,6 @@ import { AppState } from 'store/reducers';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
 import { ROLES, USER_ROLES } from 'types/roles';
-import FacingIssueBtn from 'utils/facingIssueBtn/FacingIssueBtn';
 import { ComponentTypes } from 'utils/permission';
 
 import { EditMenuAction, ViewMenuAction } from './config';

frontend/src/container/NewWidget/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { LockFilled, WarningOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Space, Tooltip, Typography } from 'antd';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
@@ -32,7 +33,6 @@ import { IField } from 'types/api/logs/fields';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
-import FacingIssueBtn from 'utils/facingIssueBtn/FacingIssueBtn';
 
 import LeftContainer from './LeftContainer';
 import QueryTypeTag from './LeftContainer/QueryTypeTag';