diff --git a/web/src/components/AllowButton/AllowButton.styled.ts b/web/src/components/AllowButton/AllowButton.styled.ts
new file mode 100644
index 0000000000..4667802776
--- /dev/null
+++ b/web/src/components/AllowButton/AllowButton.styled.ts
@@ -0,0 +1,8 @@
+import {InfoCircleFilled} from '@ant-design/icons';
+import styled from 'styled-components';
+
+export const Warning = styled(InfoCircleFilled)`
+ && {
+ color: ${({theme}) => theme.color.warningYellow};
+ }
+`;
diff --git a/web/src/components/AllowButton/AllowButton.tsx b/web/src/components/AllowButton/AllowButton.tsx
index c7b0f41225..09982089bc 100644
--- a/web/src/components/AllowButton/AllowButton.tsx
+++ b/web/src/components/AllowButton/AllowButton.tsx
@@ -1,5 +1,7 @@
-import {Button, ButtonProps, Tooltip} from 'antd';
+import {Button, ButtonProps, Tooltip, Typography} from 'antd';
+import {capitalize} from 'lodash';
import {Operation, useCustomization} from 'providers/Customization/Customization.provider';
+import * as S from './AllowButton.styled';
interface IProps extends ButtonProps {
operation: Operation;
@@ -7,15 +9,30 @@ interface IProps extends ButtonProps {
}
const AllowButton = ({operation, ButtonComponent, ...props}: IProps) => {
- const {getIsAllowed} = useCustomization();
+ const {getIsAllowed, getRole} = useCustomization();
const isAllowed = getIsAllowed(operation);
const BtnComponent = ButtonComponent || Button;
+ const role = getRole();
// the tooltip unmounts and remounts the children, detaching it from the DOM
return isAllowed ? (
) : (
-
+
+
+ Limited Access
+
+
+ Your current role group ({capitalize(role)}) has limited access to this environment. please contact
+ the environment administrator for assistance.
+
+ >
+ }
+ overlayStyle={{minWidth: '420px'}}
+ >
);
diff --git a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx
index 0b64386fad..f5ef4d07f3 100644
--- a/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx
+++ b/web/src/components/CustomizationWrapper/CustomizationWrapper.tsx
@@ -13,9 +13,10 @@ const flagValues = {
const getComponent = (id: string, fallback: React.ComponentType) => fallback;
const getFlag = (flag: Flag) => flagValues[flag];
const getIsAllowed = () => true;
+const getRole = () => '';
const CustomizationWrapper = ({children}: IProps) => {
- const customizationProviderValue = useMemo(() => ({getComponent, getFlag, getIsAllowed}), []);
+ const customizationProviderValue = useMemo(() => ({getComponent, getFlag, getIsAllowed, getRole}), []);
return {children};
};
diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts
index 0a2c5087d8..d72c0283bb 100644
--- a/web/src/constants/Common.constants.ts
+++ b/web/src/constants/Common.constants.ts
@@ -11,7 +11,8 @@ export const OCTOLIINT_ISSUE_URL = 'https://github.com/kubeshop/tracetest/issues
export const CLI_RUNNING_TESTS_URL = 'https://docs.tracetest.io/cli/running-tests';
export const CLI_RUNNING_TEST_SUITES_URL = 'https://docs.tracetest.io/cli/running-test-suites';
-export const INGESTOR_ENDPOINT_URL = 'https://docs.tracetest.io/configuration/opentelemetry-collector-configuration-file-reference';
+export const INGESTOR_ENDPOINT_URL =
+ 'https://docs.tracetest.io/configuration/opentelemetry-collector-configuration-file-reference';
export const TRACE_SEMANTIC_CONVENTIONS_URL =
'https://github.com/open-telemetry/opentelemetry-specification/tree/main/specification/trace/semantic_conventions';
@@ -35,6 +36,8 @@ export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_c
export const POKESHOP_GITHUB = 'https://github.com/kubeshop/pokeshop';
export const OTEL_DEMO_GITHUB = 'https://github.com/open-telemetry/opentelemetry-demo';
+export const AGENT_DOCS_URL = 'https://docs.tracetest.io/concepts/agent';
+
export enum HTTP_METHOD {
GET = 'GET',
PUT = 'PUT',
diff --git a/web/src/providers/Customization/Customization.provider.tsx b/web/src/providers/Customization/Customization.provider.tsx
index d1d1e59dbe..1ac99240ab 100644
--- a/web/src/providers/Customization/Customization.provider.tsx
+++ b/web/src/providers/Customization/Customization.provider.tsx
@@ -15,12 +15,14 @@ interface IContext {
getComponent(name: string, fallback: React.ComponentType): React.ComponentType;
getFlag(flag: Flag): boolean;
getIsAllowed(operation: Operation): boolean;
+ getRole(): string;
}
export const Context = createContext({
getComponent: (name, fallback) => fallback,
getFlag: () => true,
getIsAllowed: () => true,
+ getRole: () => '',
});
export const useCustomization = () => useContext(Context);