[frontend] add ee highlight

Signed-off-by: Marine LM <[email protected]>

Author: MarineLeM

openbas-front/src/admin/components/agents/Agents.tsx

@@ -20,6 +20,8 @@ import PlatformSelector from './PlatformSelector';
 
 const OPENBAS_CALDERA = 'openbas_caldera';
 const OPENBAS_AGENT = 'openbas_agent';
+const OPENBAS_CROWDSTRIKE = 'openbas_crowdstrike';
+const OPENBAS_TANIUM = 'openbas_tanium';
 
 const Executors = () => {
   // Standard hooks
@@ -47,13 +49,9 @@ const Executors = () => {
     openbas_tanium: 2,
     openbas_crowdstrike: 3,
   };
-  const sortedExecutors = executors
-    .map((executor: Executor) => ({
-      ...executor,
-      order: order[executor.executor_type as keyof typeof order],
-    }))
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    .sort((a: any, b: any) => a.order - b.order);
+
+  const sortedExecutors = executors.sort((a: Executor, b: Executor) => order[a.executor_type as keyof typeof order] - order[b.executor_type as keyof typeof order]);
+  const needInformationStepper = (selectedExecutor?.executor_type === OPENBAS_AGENT || selectedExecutor?.executor_type === OPENBAS_CALDERA);
 
   // -- Manage Dialogs
   const steps = [t('Choose your platform'), t('Installation Instructions')];
@@ -84,6 +82,7 @@ const Executors = () => {
             <ExecutorSelector
               executor={executor}
               setSelectedExecutor={setSelectedExecutor}
+              isEEExecutor={executor.executor_type == OPENBAS_TANIUM || executor.executor_type == OPENBAS_CROWDSTRIKE}
             />
           </Grid>
         ))}
@@ -93,16 +92,16 @@ const Executors = () => {
         slots={{ transition: Transition }}
         onClose={closeInstall}
         slotProps={{ paper: { elevation: 1 } }}
-        maxWidth="md"
+        maxWidth={needInformationStepper ? 'md' : 'sm'}
       >
-        <DialogTitle style={{ padding: theme.spacing(4, 4, 4, 5) }}>
+        <DialogTitle>
           {`${selectedExecutor?.executor_name} `}
         </DialogTitle>
         <DialogContent>
-          {(selectedExecutor?.executor_type === OPENBAS_AGENT || selectedExecutor?.executor_type === OPENBAS_CALDERA)
+          {needInformationStepper
             && (
               <>
-                <Stepper activeStep={activeStep} style={{ padding: theme.spacing(0, 1, 3) }}>
+                <Stepper activeStep={activeStep} style={{ padding: theme.spacing(0, 1, 3, 0) }}>
                   {steps.map((label, index) => (
                     <Step key={label}>
                       <StepButton color="inherit" onClick={() => setActiveStep(index)}>{label}</StepButton>
@@ -117,7 +116,7 @@ const Executors = () => {
                 )}
               </>
             )}
-          {selectedExecutor?.executor_type !== OPENBAS_AGENT && selectedExecutor?.executor_type !== OPENBAS_CALDERA && selectedExecutor && (
+          {!needInformationStepper && selectedExecutor && (
             <ExecutorDocumentationLink executor={selectedExecutor} />
           )}
         </DialogContent>

openbas-front/src/admin/components/agents/ExecutorDocumentationLink.tsx

@@ -1,19 +1,35 @@
-import { Typography } from '@mui/material';
+import { Alert, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { type FunctionComponent } from 'react';
+import { type FunctionComponent, useEffect } from 'react';
 
 import { useFormatter } from '../../../components/i18n';
 import { type Executor } from '../../../utils/api-types';
+import useEnterpriseEdition from '../../../utils/hooks/useEnterpriseEdition';
+import EEChip from '../common/entreprise_edition/EEChip';
 
 interface Props { executor: Executor }
 
 const ExecutorDocumentationLink: FunctionComponent<Props> = ({ executor }) => {
   // Standard hooks
   const { t } = useFormatter();
   const theme = useTheme();
+  const { openDialog, setFeatureDetectedInfo } = useEnterpriseEdition();
 
+  useEffect(() => {
+  }, []);
+  const onAlertClick = () => {
+    setFeatureDetectedInfo(executor.executor_name);
+    openDialog();
+  };
   return (
-    <div style={{ padding: theme.spacing(0, 2, 2) }}>
+    <div style={{
+      display: 'grid',
+      gap: theme.spacing(2),
+    }}
+    >
+      <Alert style={{ cursor: 'pointer' }} icon={<EEChip style={{ marginTop: theme.spacing(1) }} />} severity="success" onClick={onAlertClick}>
+        {`${executor.executor_name} ${t('executor is an enterprise edition feature. You can start the set up but you will need a license key to execute your injects. We provide a 3 month trial to let you test the platform at full capacity.')} `}
+      </Alert>
       {executor.executor_doc && (
         <Typography variant="body1">
           {t('To install the agent please follow the ')}

openbas-front/src/admin/components/agents/ExecutorSelector.tsx

@@ -5,6 +5,7 @@ import { makeStyles } from 'tss-react/mui';
 import { useFormatter } from '../../../components/i18n';
 import PlatformIcon from '../../../components/PlatformIcon';
 import { type Executor } from '../../../utils/api-types';
+import EEChip from '../common/entreprise_edition/EEChip';
 import ExecutorBanner from './ExecutorBanner';
 
 const useStyles = makeStyles()(theme => ({
@@ -27,9 +28,10 @@ const useStyles = makeStyles()(theme => ({
 interface ExecutorSelectorProps {
   executor: Executor;
   setSelectedExecutor: (executor: Executor) => void;
+  isEEExecutor?: boolean;
 }
 
-const ExecutorSelector: React.FC<ExecutorSelectorProps> = ({ executor, setSelectedExecutor }) => {
+const ExecutorSelector: React.FC<ExecutorSelectorProps> = ({ executor, setSelectedExecutor, isEEExecutor = false }) => {
   const theme = useTheme();
   const { classes } = useStyles();
   const { t } = useFormatter();
@@ -55,12 +57,12 @@ const ExecutorSelector: React.FC<ExecutorSelectorProps> = ({ executor, setSelect
               fontSize: 15,
               padding: theme.spacing(2, 0, 1),
               display: 'flex',
-              alignItems: 'center',
               justifyContent: 'center',
               color: platforms.length === 0 ? theme.palette.text?.disabled : theme.palette.text?.primary,
             }}
           >
             {`${t('Install')} ${executor.executor_name}`}
+            {isEEExecutor && <EEChip style={{ marginLeft: theme.spacing(1) }} />}
           </Typography>
           <Box
             sx={{

openbas-front/src/admin/components/assets/endpoints/endpoint/AgentList.tsx

@@ -1,5 +1,6 @@
 import { DevicesOtherOutlined } from '@mui/icons-material';
 import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { type CSSProperties, type FunctionComponent } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -11,6 +12,7 @@ import { useHelper } from '../../../../../store';
 import { type AgentOutput } from '../../../../../utils/api-types';
 import { useAppDispatch } from '../../../../../utils/hooks';
 import useDataLoader from '../../../../../utils/hooks/useDataLoader';
+import EEChip from '../../../common/entreprise_edition/EEChip';
 import AssetStatus from '../../AssetStatus';
 import AgentDeploymentMode from '../AgentDeploymentMode';
 import AgentPrivilege from '../AgentPrivilege';
@@ -44,6 +46,7 @@ interface Props { agents: AgentOutput[] }
 
 const AgentList: FunctionComponent<Props> = ({ agents }) => {
   const { classes } = useStyles();
+  const theme = useTheme();
   const bodyItemsStyles = useBodyItemsStyles();
   const dispatch = useAppDispatch();
   const { t, fldt } = useFormatter();
@@ -81,7 +84,9 @@ const AgentList: FunctionComponent<Props> = ({ agents }) => {
                 }}
               />
             )}
-            {executor?.executor_name ?? t('Unknown')}
+            {executor.executor_name ?? t('Unknown')}
+            {(executor.executor_type == 'openbas_tanium' || executor.executor_type == 'openbas_crowdstrike')
+              && <EEChip style={{ marginLeft: theme.spacing(1) }} clickable featureDetectedInfo={executor.executor_name} />}
           </>
         );
       },

openbas-front/src/admin/components/common/entreprise_edition/EEChip.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from '@mui/material';
+import { type CSSProperties } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { useFormatter } from '../../../../components/i18n';
@@ -20,20 +21,25 @@ const useStyles = makeStyles<{ isClickable: boolean }>()((theme, { isClickable }
   },
 }));
 
-const EEChip = ({ clickable = false }: {
+const EEChip = ({ clickable = false, featureDetectedInfo = null, style = {} }: {
   clickable?: boolean;
-  featureDetectedInfo?: string;
+  featureDetectedInfo?: string | null;
+  style?: CSSProperties;
 }) => {
   const { classes } = useStyles({ isClickable: clickable });
   const { t } = useFormatter();
-  const { openDialog } = useEnterpriseEdition();
+  const { openDialog, setFeatureDetectedInfo } = useEnterpriseEdition();
   const { isValidated: isEnterpriseEdition } = useEnterpriseEdition();
+  if (featureDetectedInfo) {
+    setFeatureDetectedInfo(featureDetectedInfo);
+  }
 
   return (
     <Tooltip
       title={t('Enterprise Edition Feature')}
       className={classes.container}
       onClick={() => clickable && !isEnterpriseEdition && openDialog()}
+      style={style}
     >
       <span>
         EE

openbas-front/src/admin/components/common/entreprise_edition/EnterpriseEditionAgreementDialog.tsx

@@ -32,24 +32,31 @@ const useStyles = makeStyles()(theme => ({
 
 const EnterpriseEditionAgreementDialog = () => {
   const { t } = useFormatter();
-  const { open, closeDialog, featureDetectedInfo } = useEnterpriseEdition();
+  const { open, closeDialog, featureDetectedInfo, setFeatureDetectedInfo } = useEnterpriseEdition();
   const { classes } = useStyles();
   const dispatch = useAppDispatch();
   const [enterpriseLicense, setEnterpriseLicense] = useState('');
 
+  const onCloseEnterpriseEditionDialog = () => {
+    closeDialog();
+    setFeatureDetectedInfo('');
+  };
+
   const updateEnterpriseEdition = (data: SettingsEnterpriseEditionUpdateInput) => {
     dispatch(updatePlatformEnterpriseEditionParameters(data));
-    closeDialog();
+    onCloseEnterpriseEditionDialog();
   };
+
   const enableEnterpriseEdition = () => updateEnterpriseEdition({ platform_enterprise_license: enterpriseLicense });
+
   return (
     <Dialog
       open={open}
-      handleClose={closeDialog}
+      handleClose={onCloseEnterpriseEditionDialog}
       title={t('OpenBAS Enterprise Edition (EE) license agreement')}
       actions={(
         <>
-          <Button onClick={closeDialog}>{t('Cancel')}</Button>
+          <Button onClick={onCloseEnterpriseEditionDialog}>{t('Cancel')}</Button>
           <Button
             color="secondary"
             onClick={enableEnterpriseEdition}

openbas-front/src/utils/lang/en.json

@@ -508,6 +508,11 @@
   "Execution Time": "Execution Time",
   "Executor": "Executor",
   "Executor Caldera is not responding, your exercises may be impacted.": "Executor Caldera is not responding, your exercises may be impacted.",
+  "executor is an enterprise edition feature": {
+    " You can start the set up but you will need a license key to execute your injects": {
+      " We provide a 3 month trial to let you test the platform at full capacity": "executor is an enterprise edition feature. You can start the set up but you will need a license key to execute your injects. We provide a 3 month trial to let you test the platform at full capacity."
+    }
+  },
   "Executors": "Executors",
   "Exercise": "Simulation",
   "Exercise details": "Exercise details",

openbas-front/src/utils/lang/fr.json

@@ -508,6 +508,11 @@
   "Execution Time": "Temps d'exécution",
   "Executor": "Exécuteur",
   "Executor Caldera is not responding, your exercises may be impacted.": "L'exécuteur Caldera ne réponds pas, vos exercises peuvent être impactés.",
+  "executor is an enterprise edition feature": {
+    " You can start the set up but you will need a license key to execute your injects": {
+      " We provide a 3 month trial to let you test the platform at full capacity": "exécuteur est une fonctionnalité de l'édition Entreprise. Vous pouvez commencer l'installation, mais vous aurez besoin d'une clé de licence pour exécuter vos injections. Nous proposons une période d'essai de 3 mois pour vous permettre de tester la plateforme à pleine capacité."
+    }
+  },
   "Executors": "Exécuteurs",
   "Exercise": "Simulation",
   "Exercise details": "Détails de l'exercise",

openbas-front/src/utils/lang/zh.json

@@ -508,6 +508,11 @@
   "Execution Time": "执行时间",
   "Executor": "执行者",
   "Executor Caldera is not responding, your exercises may be impacted.": "Executor Caldera is not responding, your exercises may be impacted.",
+  "executor is an enterprise edition feature": {
+    " You can start the set up but you will need a license key to execute your injects": {
+      " We provide a 3 month trial to let you test the platform at full capacity": "执行器是企业版功能。您可以开始设置，但需要许可证密钥才能执行注入。我们提供 3 个月的试用期，让您可以充分测试平台的功能。"
+    }
+  },
   "Executors": "执行者",
   "Exercise": "练习",
   "Exercise details": "锻炼详情",