feat: Limited Access (#3386)

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};
+  }
+`;

web/src/components/AllowButton/AllowButton.tsx

@@ -1,21 +1,38 @@
-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;
   ButtonComponent?: React.ComponentType<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 ? (
     <BtnComponent {...props} disabled={props.disabled} />
   ) : (
-    <Tooltip title="You are not allowed to perform this operation">
+    <Tooltip
+      placement="topRight"
+      overlay={
+        <>
+          <Typography.Title level={3}>
+            <S.Warning color="yellow" /> Limited Access
+          </Typography.Title>
+          <Typography.Paragraph>
+            Your current role group (<b>{capitalize(role)}</b>) has limited access to this environment. please contact
+            the environment administrator for assistance.
+          </Typography.Paragraph>
+        </>
+      }
+      overlayStyle={{minWidth: '420px'}}
+    >
       <Button {...props} disabled />
     </Tooltip>
   );

web/src/components/CustomizationWrapper/CustomizationWrapper.tsx

@@ -13,9 +13,10 @@ const flagValues = {
 const getComponent = <T,>(id: string, fallback: React.ComponentType<T>) => 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 <CustomizationProvider value={customizationProviderValue}>{children}</CustomizationProvider>;
 };

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',

web/src/providers/Customization/Customization.provider.tsx

@@ -15,12 +15,14 @@ interface IContext {
   getComponent<T>(name: string, fallback: React.ComponentType<T>): React.ComponentType<T>;
   getFlag(flag: Flag): boolean;
   getIsAllowed(operation: Operation): boolean;
+  getRole(): string;
 }
 
 export const Context = createContext<IContext>({
   getComponent: (name, fallback) => fallback,
   getFlag: () => true,
   getIsAllowed: () => true,
+  getRole: () => '',
 });
 
 export const useCustomization = () => useContext(Context);