feat: [SIG-546]: user with viewer roles can only view saved views (#4663

)

* feat: [SIG-543]: Users with VIEWER access can create/edit/delete views for logs and traces

* feat: [SIG-543]: remove extra code

* feat: [SIG-543]: role changes in the save views toolbar

* feat: [SIG-543]: role changes in the save views toolbar

* feat: remove the save feature / dashboard / alert feature for viewer roles

* feat: remove the save feature / dashboard / alert feature for viewer roles

* fix: address review comments

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 {

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<AppState, AppReducer>((state) => state.app);
+
  const onCreateAlertsHandler = useCallback(() => {
  history.push(
  `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
@@ -247,21 +257,31 @@ function ExplorerOptions({
  [isDarkMode],
  );
 
+ const isEditDeleteSupported = allowedRoles.includes(role as string);
+
  return (
  <>
  {isQueryUpdated && (
- <div className="explorer-update">
+ <div
+ className={cx(
+ isEditDeleteSupported ? '' : 'hide-update',
+ 'explorer-update',
+ )}
+ >
  <Tooltip title="Clear this view" placement="top">
  <Button
  className="action-icon"
  onClick={handleClearSelect}
  icon={<X size={14} />}
  />
  </Tooltip>
- <Divider type="vertical" />
+ <Divider
+ type="vertical"
+ className={isEditDeleteSupported ? '' : 'hidden'}
+ />
  <Tooltip title="Update this view" placement="top">
  <Button
- className="action-icon"
+ className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
  disabled={isViewUpdating}
  onClick={onUpdateQueryHandler}
  icon={<Disc3 size={14} />}
@@ -323,15 +343,16 @@ function ExplorerOptions({
  <Button
  shape="round"
  onClick={handleSaveViewModalToggle}
+ className={isEditDeleteSupported ? '' : 'hidden'}
  disabled={viewsIsLoading || isRefetching}
  >
  <Disc3 size={16} /> Save this view
  </Button>
  </div>
 
- <hr />
+ <hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
- <div className="actions">
+ <div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
  <Tooltip title="Create Alerts">
  <Button
  disabled={disabled}

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -309,49 +309,52 @@ function DashboardsList(): JSX.Element {
  />
  </Col>
 
- <Col
- span={6}
- style={{
- display: 'flex',
- justifyContent: 'flex-end',
- }}
- >
- <ButtonContainer>
- <TextToolTip
- {...{
- text: `More details on how to create dashboards`,
- url: 'https://signoz.io/docs/userguide/dashboards',
- }}
- />
- </ButtonContainer>
-
- <Dropdown
- menu={{ items: getMenuItems }}
- disabled={isDashboardListLoading}
- placement="bottomRight"
+ {createNewDashboard && (
+ <Col
+ span={6}
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-end',
+ }}
  >
- <NewDashboardButton
- icon={<PlusOutlined />}
- type="primary"
- data-testid="create-new-dashboard"
- loading={newDashboardState.loading}
- danger={newDashboardState.error}
+ <ButtonContainer>
+ <TextToolTip
+ {...{
+ text: `More details on how to create dashboards`,
+ url: 'https://signoz.io/docs/userguide/dashboards',
+ }}
+ />
+ </ButtonContainer>
+
+ <Dropdown
+ menu={{ items: getMenuItems }}
+ disabled={isDashboardListLoading}
+ placement="bottomRight"
  >
- {getText()}
- </NewDashboardButton>
- </Dropdown>
- </Col>
+ <NewDashboardButton
+ icon={<PlusOutlined />}
+ type="primary"
+ data-testid="create-new-dashboard"
+ loading={newDashboardState.loading}
+ danger={newDashboardState.error}
+ >
+ {getText()}
+ </NewDashboardButton>
+ </Dropdown>
+ </Col>
+ )}
  </Row>
  ),
  [
  isDashboardListLoading,
  handleSearch,
  isFilteringDashboards,
+ searchString,
+ createNewDashboard,
  getMenuItems,
  newDashboardState.loading,
  newDashboardState.error,
  getText,
- searchString,
  ],
  );