test interactiveCheckboxes

Author: jdv

crowdsec-docs/src/components/InteractiveCheckbox.js

@@ -0,0 +1,160 @@
+import React, { useState, useEffect, createContext, useContext } from 'react';
+
+// Global context to manage checkbox states across all instances
+const CheckboxContext = createContext();
+
+// Provider component to wrap your MDX content
+export const CheckboxProvider = ({ children }) => {
+  const [checkboxStates, setCheckboxStates] = useState({});
+  const [manualChecks, setManualChecks] = useState({});
+
+  const updateCheckbox = (id, isManuallyChecked) => {
+    setManualChecks(prev => ({
+      ...prev,
+      [id]: isManuallyChecked
+    }));
+  };
+
+  const isCheckboxChecked = (id, references = []) => {
+    // Manual check has priority
+    if (manualChecks[id]) {
+      return { checked: true, type: 'manual' };
+    }
+    
+    // Check if all references are checked (either manually or through their references)
+    if (references.length > 0) {
+      const allReferencesChecked = references.every(refId => {
+        if (manualChecks[refId]) return true;
+        // Recursively check if reference has its own references
+        return checkboxStates[refId]?.checked;
+      });
+      
+      if (allReferencesChecked) {
+        return { checked: true, type: 'reference' };
+      }
+    }
+    
+    return { checked: false, type: 'none' };
+  };
+
+  useEffect(() => {
+    // Update all checkbox states when manual checks change
+    const newStates = {};
+    Object.keys(checkboxStates).forEach(id => {
+      const checkbox = checkboxStates[id];
+      newStates[id] = {
+        ...checkbox,
+        ...isCheckboxChecked(id, checkbox.references)
+      };
+    });
+    setCheckboxStates(newStates);
+  }, [manualChecks]);
+
+  const registerCheckbox = (id, references = []) => {
+    setCheckboxStates(prev => ({
+      ...prev,
+      [id]: {
+        references,
+        ...isCheckboxChecked(id, references)
+      }
+    }));
+  };
+
+  return (
+    <CheckboxContext.Provider value={{
+      checkboxStates,
+      manualChecks,
+      updateCheckbox,
+      registerCheckbox,
+      isCheckboxChecked
+    }}>
+      {children}
+    </CheckboxContext.Provider>
+  );
+};
+
+// The main checkbox component
+export const InteractiveCheckbox = ({ 
+  id, 
+  references = [], 
+  label = '', 
+  className = '' 
+}) => {
+  const { 
+    checkboxStates, 
+    manualChecks, 
+    updateCheckbox, 
+    registerCheckbox, 
+    isCheckboxChecked 
+  } = useContext(CheckboxContext);
+
+  useEffect(() => {
+    registerCheckbox(id, references);
+  }, [id, references]);
+
+  const handleClick = () => {
+    updateCheckbox(id, !manualChecks[id]);
+  };
+
+  const checkboxState = isCheckboxChecked(id, references);
+  const isChecked = checkboxState.checked;
+  const checkType = checkboxState.type;
+
+  // Determine the color based on check type
+  const getCheckmarkColor = () => {
+    if (checkType === 'manual') return '#22c55e'; // green
+    if (checkType === 'reference') return '#3b82f6'; // blue
+    return '#d1d5db'; // gray (unchecked)
+  };
+
+  const getBackgroundColor = () => {
+    if (isChecked) return getCheckmarkColor();
+    return 'transparent';
+  };
+
+  return (
+    <div className={`inline-flex items-center gap-2 ${className}`}>
+      <div
+        onClick={handleClick}
+        style={{
+          width: '20px',
+          height: '20px',
+          border: `2px solid ${isChecked ? getCheckmarkColor() : '#d1d5db'}`,
+          borderRadius: '3px',
+          backgroundColor: getBackgroundColor(),
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.2s ease'
+        }}
+      >
+        {isChecked && (
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2 6l2.5 2.5L10 3" />
+          </svg>
+        )}
+      </div>
+      {label && (
+        <label
+          onClick={handleClick}
+          style={{ cursor: 'pointer', userSelect: 'none' }}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+// Export both components as default for easier importing
+export default InteractiveCheckbox;

crowdsec-docs/unversioned/user_guides/interactive_se_install/01_install.mdx

@@ -7,8 +7,9 @@ pagination_next: user_guides/interactive_se_install/se_install_02
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
+import { InteractiveCheckbox } from '@site/src/components/InteractiveCheckbox.js';
 
-# Interractive Security Engine Installation Guide
+# Interactive Security Engine Installation Guide
 
 Welcome! This interactive guide will help you set up your CrowdSec Security Engine and validate each step to ensure proper operation.
 We'll guide you through detecting and remediating malicious behavior in your services' logs, regardless of your chosen implementation (on host, Docker, Kubernetes)
@@ -69,9 +70,20 @@ But if you're comfortable with Docker it also is a great way to get started and
 
 Let's check that CrowdSec is running and able to retrieve the community blocklist !
 
+#### Enroll your Security Engine into CrowdSec Console 
+For advanced monitoring and trouble shooting the CrowdSec Console is a great tool to visualize your Security Engine's activity and alerts.
+
+<InteractiveCheckbox id="ConsoleEnroll" label=" Enroll into the console " />
+
+- [link to doc]
+- You'll see a confirmation pop up in the console for enrollment if not you might have conectivity issue to the central API [link to troubleshooting section]
+- You'll see the last heartbeat and the status of your Security Engine in the console
+- You'll be able to check various configurations for the upcoming steps of the installation
+- You'll be warned when a new version of CrowdSec is available
+
 #### CrowdSec installation health
 
-> [ ]  Check that the CrowdSec service is running
+<InteractiveCheckbox id="CrowdsecRunning" label="Check that the CrowdSec service is running"  references={["ConsoleEnroll"]} />
 
 ```bash
 systemctl status crowdsec
@@ -113,18 +125,7 @@ sudo cscli capi status
     - Pulling community blocklist is enabled //+link to doc where to turn this on/off ?
     - Pulling blocklists from the console is enabled //+link to doc where to turn this on/off ?
 
-#### Enroll your Security Engine into CrowdSec Console 
-For advanced monitoring and trouble shooting the CrowdSec Console is a great tool to visualize your Security Engine's activity and alerts.
-
-> [ ] Enroll into the console 
-
-- [link to doc]
-- You'll see a confirmation pop up in the console for enrollment if not you might have conectivity issue to the central API [link to troubleshooting section]
-- You'll see the last heartbeat and the status of your Security Engine in the console
-- You'll be able to check various configurations for the upcoming steps of the installation
-- You'll be warned when a new version of CrowdSec is available
-
-### Troubleshooting
+### 🚨 Troubleshooting
 <details>
     <summary>There could be ports conflicts with other services</summary>
 

crowdsec-docs/unversioned/user_guides/interactive_se_install/02_parsers_scenarios copy.mdx

@@ -67,7 +67,7 @@ cscli scenarios list
 When clicking on the "Scenarios" part of your [Security engine tile in the CrowdSec console](https://app.crowdsec.net/security-engines), you should see the scenarios you installed listed there.   
 The tile itself should show you the count of scenarios that are installed on your Security Engine.
 
-### Troubleshooting
+### 🚨 Troubleshooting
 
 <details>
     <summary>Missing Scenarios</summary>

crowdsec-docs/unversioned/user_guides/interactive_se_install/03_acquisition copy.mdx

@@ -54,7 +54,7 @@ sudo cscli alerts list
 ```
 - The alerts will also show up in the console within a few minutes if you enrolled your Security Engine.
 
-### Troubleshooting
+### 🚨 Troubleshooting
 If you never see any alerts: However unlikely it's possible that you're not being hit by attacks but first lets check what could be wrong.
 
 <details>

crowdsec-docs/unversioned/user_guides/interactive_se_install/04_remediation.mdx

@@ -44,7 +44,7 @@ cscli bouncers list
 - ??? How do we do this if we don't have a canary? without asking them to ban themselves
 // find an alternative while we don't have a canary system @thib @seb @laurence
 
-### Troubleshooting
+### 🚨 Troubleshooting
 
 <details>
     <summary>Docker communication with bouncer</summary>