From 3790975d48595fc8f08c6c17790161368acbb489 Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Thu, 7 Mar 2024 18:01:27 +0530 Subject: [PATCH 1/7] feat: [SIG-543]: Users with VIEWER access can create/edit/delete views for logs and traces --- .../src/pages/SaveView/SaveView.styles.scss | 553 +++++++++--------- frontend/src/pages/SaveView/index.tsx | 17 + 2 files changed, 292 insertions(+), 278 deletions(-) diff --git a/frontend/src/pages/SaveView/SaveView.styles.scss b/frontend/src/pages/SaveView/SaveView.styles.scss index 461914c1d0..292a0b8d06 100644 --- a/frontend/src/pages/SaveView/SaveView.styles.scss +++ b/frontend/src/pages/SaveView/SaveView.styles.scss @@ -1,171 +1,170 @@ .save-view-container { - margin-top: 70px; - display: flex; - justify-content: center; - width: 100%; - - .save-view-content { - width: calc(100% - 30px); - max-width: 736px; - - - .title { - color: var(--bg-vanilla-100); - font-size: var(--font-size-lg); - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: 28px; /* 155.556% */ - letter-spacing: -0.09px; - } - - .subtitle { - color: var(---bg-vanilla-400); - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: 20px; /* 142.857% */ - letter-spacing: -0.07px; - } - - .ant-input-affix-wrapper { - margin-top: 16px; - margin-bottom: 8px; - } - - .ant-table-row { - .ant-table-cell { - padding: 0; - border: none; - background: var(--bg-ink-500); - - } - .column-render { - margin: 8px 0 !important; - padding: 16px; - border-radius: 6px; - border: 1px solid var(--bg-slate-500); - background: var(--bg-ink-400); - - .title-with-action { - display: flex; - justify-content: space-between; - align-items: center; - - .save-view-title { - display: flex; - align-items: center; - gap: 6px; - .dot { - min-height: 6px; - min-width: 6px; - border-radius: 50%; - } - .ant-typography { - color: var(--bg-vanilla-400); - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: 20px; - letter-spacing: -0.07px; - } - } - - .action-btn { - display: flex; - align-items: center; - gap: 20px; - cursor: pointer; - } - - } - .view-details { - margin-top: 8px; - display: flex; - align-items: center; - - .view-tag { - width: 14px; - height: 14px; - border-radius: 50px; - background: var(--bg-slate-300); - display: flex; - justify-content: center; - align-items: center; - - .tag-text { - color: var(--bg-vanilla-400); - leading-trim: both; - text-edge: cap; - font-size: 10px; - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: normal; - letter-spacing: -0.05px; - } - } - - .view-created-by { - margin-left: 8px; - } - - .view-created-at { - margin-left: 24px; - display: flex; - align-items: center; - .ant-typography { - margin-left: 6px; - color: var(--bg-vanilla-400); - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: 18px; /* 128.571% */ - letter-spacing: -0.07px; - } - } - } - } - } - - .ant-pagination-item { - - display: flex; - justify-content: center; - align-items: center; - - > a { - color: var(--bg-vanilla-400); - font-variant-numeric: lining-nums tabular-nums slashed-zero; - font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on; - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: 20px; /* 142.857% */ - } - - } - - .ant-pagination-item-active { - background-color: var(--bg-robin-500); - > a { - color: var(--bg-ink-500) !important; - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: 20px; - } - } - } -} + margin-top: 70px; + display: flex; + justify-content: center; + width: 100%; + + .save-view-content { + width: calc(100% - 30px); + max-width: 736px; + + .title { + color: var(--bg-vanilla-100); + font-size: var(--font-size-lg); + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: 28px; /* 155.556% */ + letter-spacing: -0.09px; + } + + .subtitle { + color: var(---bg-vanilla-400); + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: 20px; /* 142.857% */ + letter-spacing: -0.07px; + } + + .ant-input-affix-wrapper { + margin-top: 16px; + margin-bottom: 8px; + } + + .ant-table-row { + .ant-table-cell { + padding: 0; + border: none; + background: var(--bg-ink-500); + } + .column-render { + margin: 8px 0 !important; + padding: 16px; + border-radius: 6px; + border: 1px solid var(--bg-slate-500); + background: var(--bg-ink-400); + + .title-with-action { + display: flex; + justify-content: space-between; + align-items: center; + + .save-view-title { + display: flex; + align-items: center; + gap: 6px; + .dot { + min-height: 6px; + min-width: 6px; + border-radius: 50%; + } + .ant-typography { + color: var(--bg-vanilla-400); + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: 20px; + letter-spacing: -0.07px; + } + } + + .action-btn { + display: flex; + align-items: center; + gap: 20px; + cursor: pointer; + + .hidden { + display: none; + } + } + } + .view-details { + margin-top: 8px; + display: flex; + align-items: center; + + .view-tag { + width: 14px; + height: 14px; + border-radius: 50px; + background: var(--bg-slate-300); + display: flex; + justify-content: center; + align-items: center; + + .tag-text { + color: var(--bg-vanilla-400); + leading-trim: both; + text-edge: cap; + font-size: 10px; + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: normal; + letter-spacing: -0.05px; + } + } + + .view-created-by { + margin-left: 8px; + } + + .view-created-at { + margin-left: 24px; + display: flex; + align-items: center; + .ant-typography { + margin-left: 6px; + color: var(--bg-vanilla-400); + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: 18px; /* 128.571% */ + letter-spacing: -0.07px; + } + } + } + } + } + + .ant-pagination-item { + display: flex; + justify-content: center; + align-items: center; + + > a { + color: var(--bg-vanilla-400); + font-variant-numeric: lining-nums tabular-nums slashed-zero; + font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on; + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: 20px; /* 142.857% */ + } + } + + .ant-pagination-item-active { + background-color: var(--bg-robin-500); + > a { + color: var(--bg-ink-500) !important; + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: 20px; + } + } + } +} .delete-view-modal { - width: calc(100% - 30px) !important; /* Adjust the 20px as needed */ - max-width: 384px; + width: calc(100% - 30px) !important; /* Adjust the 20px as needed */ + max-width: 384px; .ant-modal-content { padding: 0; border-radius: 4px; border: 1px solid var(--bg-slate-500); background: var(--bg-ink-400); - box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.20); + box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2); .ant-modal-header { padding: 16px; @@ -177,11 +176,11 @@ .ant-typography { color: var(--bg-vanilla-400); - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-normal); - line-height: 20px; - letter-spacing: -0.07px; + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-normal); + line-height: 20px; + letter-spacing: -0.07px; } .save-view-input { @@ -211,7 +210,6 @@ } } } - } .ant-modal-footer { @@ -223,127 +221,126 @@ .cancel-btn { display: flex; align-items: center; - border: none; + border: none; border-radius: 2px; - background: var(--bg-slate-500); + background: var(--bg-slate-500); } - .delete-btn { - display: flex; + .delete-btn { + display: flex; align-items: center; - border: none; - border-radius: 2px; - background: var(--bg-cherry-500); - margin-left: 12px; - } - - .delete-btn:hover { - color: var(--bg-vanilla-100); - background: var(--bg-cherry-600); - } + border: none; + border-radius: 2px; + background: var(--bg-cherry-500); + margin-left: 12px; + } + + .delete-btn:hover { + color: var(--bg-vanilla-100); + background: var(--bg-cherry-600); + } } } .title { color: var(--bg-vanilla-100); - font-size: var(--font-size-sm); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: 20px; /* 142.857% */ + font-size: var(--font-size-sm); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: 20px; /* 142.857% */ } } .lightMode { - .save-view-container { - .save-view-content { - - .title { - color: var(--bg-ink-500); - } - - .ant-table-row { - .ant-table-cell { - background: var(--bg-vanilla-200); - } - - &:hover { - .ant-table-cell { - background: var(--bg-vanilla-200) !important; - } - } - - .column-render { - border: 1px solid var(--bg-vanilla-200); - background: var(--bg-vanilla-100); - - .title-with-action { - .save-view-title { - .ant-typography { - color: var(--bg-ink-500); - } - } - - .action-btn { - .ant-typography { - color: var(--bg-ink-500); - } - } - } - - .view-details { - .view-tag { - background: var(--bg-vanilla-200); - .tag-text { - color: var(--bg-ink-500); - } - } - - .view-created-by { - color: var(--bg-ink-500); - } - - .view-created-at { - .ant-typography { - color: var(--bg-ink-500); - } - } - } - } - } - } - } - - .delete-view-modal { - .ant-modal-content { - border: 1px solid var(--bg-vanilla-200); - background: var(--bg-vanilla-100); - - .ant-modal-header { - background: var(--bg-vanilla-100); - - .title { - color: var(--bg-ink-500); - } - } - - .ant-modal-body { - .ant-typography { - color: var(--bg-ink-500); - } - - .save-view-input { - .ant-input { - background: var(--bg-vanilla-200); - color: var(--bg-ink-500); - } - } - } - - .ant-modal-footer { - .cancel-btn { - background: var(--bg-vanilla-300); - color: var(--bg-ink-400); - } - } - } - } -} \ No newline at end of file + .save-view-container { + .save-view-content { + .title { + color: var(--bg-ink-500); + } + + .ant-table-row { + .ant-table-cell { + background: var(--bg-vanilla-200); + } + + &:hover { + .ant-table-cell { + background: var(--bg-vanilla-200) !important; + } + } + + .column-render { + border: 1px solid var(--bg-vanilla-200); + background: var(--bg-vanilla-100); + + .title-with-action { + .save-view-title { + .ant-typography { + color: var(--bg-ink-500); + } + } + + .action-btn { + .ant-typography { + color: var(--bg-ink-500); + } + } + } + + .view-details { + .view-tag { + background: var(--bg-vanilla-200); + .tag-text { + color: var(--bg-ink-500); + } + } + + .view-created-by { + color: var(--bg-ink-500); + } + + .view-created-at { + .ant-typography { + color: var(--bg-ink-500); + } + } + } + } + } + } + } + + .delete-view-modal { + .ant-modal-content { + border: 1px solid var(--bg-vanilla-200); + background: var(--bg-vanilla-100); + + .ant-modal-header { + background: var(--bg-vanilla-100); + + .title { + color: var(--bg-ink-500); + } + } + + .ant-modal-body { + .ant-typography { + color: var(--bg-ink-500); + } + + .save-view-input { + .ant-input { + background: var(--bg-vanilla-200); + color: var(--bg-ink-500); + } + } + } + + .ant-modal-footer { + .cancel-btn { + background: var(--bg-vanilla-300); + color: var(--bg-ink-400); + } + } + } + } +} diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx index afdf05686b..83d6d3d251 100644 --- a/frontend/src/pages/SaveView/index.tsx +++ b/frontend/src/pages/SaveView/index.tsx @@ -32,10 +32,14 @@ import { } from 'lucide-react'; import { ChangeEvent, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; +import { AppState } from 'store/reducers'; import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery'; import { ViewProps } from 'types/api/saveViews/types'; import { DataSource } from 'types/common/queryBuilder'; +import AppReducer from 'types/reducer/app'; +import { USER_ROLES } from 'types/roles'; import { ROUTES_VS_SOURCEPAGE, SOURCEPAGE_VS_ROUTES } from './constants'; import { deleteViewHandler } from './utils'; @@ -61,6 +65,12 @@ function SaveView(): JSX.Element { setIsDeleteModalOpen(false); }; + const { role, user } = useSelector((state) => state.app); + + const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR]; + + console.log(role, user); + const handleDeleteModelOpen = (uuid: string, name: string): void => { setActiveViewKey(uuid); setActiveViewName(name); @@ -217,6 +227,11 @@ function SaveView(): JSX.Element { // Combine time and date const formattedDateAndTime = `${formattedTime} ⎯ ${formattedDate}`; + + const isEditDeleteSupported = + allowedRoles.includes(role as string) || view.createdBy === user?.email; + + console.log(isEditDeleteSupported); return (
@@ -234,11 +249,13 @@ function SaveView(): JSX.Element {
handleEditModelOpen(view, bgColor)} /> handleRedirectQuery(view)} /> handleDeleteModelOpen(view.uuid, view.name)} /> From 5ad81ce59aa2a0ac2d5467b792b928d681169e5c Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Thu, 7 Mar 2024 18:05:45 +0530 Subject: [PATCH 2/7] feat: [SIG-543]: remove extra code --- frontend/src/pages/SaveView/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx index 83d6d3d251..62559035f0 100644 --- a/frontend/src/pages/SaveView/index.tsx +++ b/frontend/src/pages/SaveView/index.tsx @@ -69,8 +69,6 @@ function SaveView(): JSX.Element { const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR]; - console.log(role, user); - const handleDeleteModelOpen = (uuid: string, name: string): void => { setActiveViewKey(uuid); setActiveViewName(name); @@ -231,7 +229,6 @@ function SaveView(): JSX.Element { const isEditDeleteSupported = allowedRoles.includes(role as string) || view.createdBy === user?.email; - console.log(isEditDeleteSupported); return (
From a7dca2d109c456fe4a87518771cd17e5dec83727 Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Thu, 7 Mar 2024 18:16:03 +0530 Subject: [PATCH 3/7] feat: [SIG-543]: role changes in the save views toolbar --- .../ExplorerOptions.styles.scss | 4 ++++ .../ExplorerOptions/ExplorerOptions.tsx | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss index 3d04f3741a..cbb4a4c6e6 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss @@ -23,6 +23,10 @@ cursor: pointer; } + .hidden { + display: none; + } + .ant-divider { margin: 0; height: 28px; diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 1ac7fefcdd..e312d5978d 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, @@ -71,6 +76,10 @@ function ExplorerOptions({ setIsSaveModalOpen(false); }; + const { role, user } = useSelector((state) => state.app); + + const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR]; + const onCreateAlertsHandler = useCallback(() => { history.push( `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent( @@ -247,6 +256,13 @@ function ExplorerOptions({ [isDarkMode], ); + const currentView = viewsData?.data?.data?.find( + (view) => view.uuid === viewKey, + ); + const isEditDeleteSupported = + allowedRoles.includes(role as string) || + currentView?.createdBy === user?.email; + return ( <> {isQueryUpdated && ( @@ -261,7 +277,7 @@ function ExplorerOptions({
-
+
-
+