diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss index 3d04f3741a..d76d18bb4f 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss @@ -1,3 +1,6 @@ +.hide-update { + left: calc(50% - 41px) !important; +} .explorer-update { position: fixed; bottom: 16px; @@ -23,6 +26,10 @@ cursor: pointer; } + .hidden { + display: none; + } + .ant-divider { margin: 0; height: 28px; @@ -55,6 +62,10 @@ .view-options, .actions { + .hidden { + display: none; + } + display: flex; justify-content: center; align-items: center; @@ -102,6 +113,9 @@ } } } + .hidden { + display: none; + } } .app-content { diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 1ac7fefcdd..8322c694d6 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -13,6 +13,7 @@ import { Typography, } from 'antd'; import axios from 'axios'; +import cx from 'classnames'; import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { QueryParams } from 'constants/query'; @@ -31,10 +32,14 @@ import { useNotifications } from 'hooks/useNotifications'; import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery'; import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react'; import { CSSProperties, useCallback, useMemo, useRef, useState } from 'react'; +import { useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import { AppState } from 'store/reducers'; import { Dashboard } from 'types/api/dashboard/getAll'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource } from 'types/common/queryBuilder'; +import AppReducer from 'types/reducer/app'; +import { USER_ROLES } from 'types/roles'; import { DATASOURCE_VS_ROUTES, @@ -43,6 +48,9 @@ import { saveNewViewHandler, } from './utils'; +const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR]; + +// eslint-disable-next-line sonarjs/cognitive-complexity function ExplorerOptions({ disabled, isLoading, @@ -71,6 +79,8 @@ function ExplorerOptions({ setIsSaveModalOpen(false); }; + const { role } = useSelector((state) => state.app); + const onCreateAlertsHandler = useCallback(() => { history.push( `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( @@ -247,10 +257,17 @@ function ExplorerOptions({ [isDarkMode], ); + const isEditDeleteSupported = allowedRoles.includes(role as string); + return ( <> {isQueryUpdated && ( -
+
-
+
-
+