POC of XPath Evaluator

docusaurus.config.ts

@@ -86,7 +86,7 @@ const config: Config = {
       { name: 'twitter:image', content: 'https://developer.sailpoint.com/img/SailPoint-Logo-OG.png' },
 
       // Content Security Policy
-      { 'http-equiv': 'Content-Security-Policy', content: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://code.jquery.com https://www.googletagmanager.com https://cdn.jsdelivr.net https://cdn.cookielaw.org https://googleads.g.doubleclick.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://p.typekit.net https://use.typekit.net; img-src 'self' data: https: http:; font-src 'self' data: https://cdn.jsdelivr.net https://use.typekit.net https://cdnjs.cloudflare.com; connect-src 'self' http://localhost:3000 https://nug87yusrg.execute-api.us-east-1.amazonaws.com https://*.algolia.net https://*.algolianet.com https://www.googletagmanager.com https://www.google.com https://analytics.google.com https://developer.sailpoint.com https://cdn.cookielaw.org https://stats.g.doubleclick.net https://googleads.g.doubleclick.net https://*.api.identitynow.com https://*.api.identitynow-demo.com; frame-src 'self' https://www.googletagmanager.com https://www.youtube.com https://play.vidyard.com; worker-src 'self' blob:;" },
+      { 'http-equiv': 'Content-Security-Policy', content: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://code.jquery.com https://www.googletagmanager.com https://cdn.jsdelivr.net https://cdn.cookielaw.org https://googleads.g.doubleclick.net; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://p.typekit.net https://use.typekit.net https://fonts.googleapis.com; img-src 'self' data: https: http:; font-src 'self' data: https://cdn.jsdelivr.net https://use.typekit.net https://cdnjs.cloudflare.com https://fonts.gstatic.com; connect-src 'self' http://localhost:3000 https://nug87yusrg.execute-api.us-east-1.amazonaws.com https://*.algolia.net https://*.algolianet.com https://www.googletagmanager.com https://www.google.com https://analytics.google.com https://developer.sailpoint.com https://cdn.cookielaw.org https://stats.g.doubleclick.net https://googleads.g.doubleclick.net https://*.api.identitynow.com https://*.api.identitynow-demo.com; frame-src 'self' https://www.googletagmanager.com https://www.youtube.com https://play.vidyard.com; worker-src 'self' blob:;" },
     ],
     algolia: {
       appId: 'TB01H1DFAM',
@@ -159,11 +159,12 @@ const config: Config = {
     AUTH_PASSWORD: process.env.AUTH_PASSWORD || '',
     ENDPOINT_OVERRIDE: process.env.ENDPOINT_OVERRIDE || '',
     SAMPLE_TABLE: process.env.SAMPLE_TABLE || '',
+    SECRET_MESSAGE: process.env.SECRET_MESSAGE || '',
     CMS_APP_API_ENDPOINT:
       process.env.NODE_ENV === 'development'
         ? 'http://localhost:3000/'
         : process.env.CMS_APP_API_ENDPOINT || '',
   },
 };
 
-export default config;
+export default config;

navbar.ts

@@ -34,6 +34,7 @@ const navbarConfig = {
           { label: 'CLI', to: '/docs/tools/cli' },
           { label: 'Escaping Tool Formatter', to: '/tools/escaping-tool-formatter' },
           { label: 'JSON Path Evaluator', to: '/tools/json-path-evaluator' },
+          { label: 'XPath Evaluator', to: '/tools/xpath-evaluator' },
           { label: 'Rule Development Kit', to: '/docs/tools/rule-development-kit' },
           { label: 'UI Development Kit', to: '/docs/tools/ui-development-kit' },
           { label: 'Velocity PlayGround', to: '/tools/velocity-playground' },

package.json

@@ -88,7 +88,9 @@
     "react-markdown": "^8.0.7",
     "react-spinners": "^0.13.8",
     "react-tabs": "^4.3.0",
-    "velocityjs": "^2.1.5"
+    "velocityjs": "^2.1.5",
+    "@xmldom/xmldom": "^0.9.10",
+    "xpath": "^0.0.34"
   },
   "overrides": {
     "mermaid": "10.9.3",

src/components/xpath/ImplementationDropdown/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState, FocusEvent, ChangeEvent } from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { useColorMode } from '@docusaurus/theme-common';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+// Define prop types
+interface ImplementationDropdownProps {
+  implementation: string;
+  onImplementationChange: (value: string) => void;
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+
+const ImplementationDropdown: React.FC<ImplementationDropdownProps> = ({
+  implementation,
+  onImplementationChange,
+  onFocus,
+  onBlur,
+}) => {
+  const { colorMode } = useColorMode();
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  const theme = createTheme({
+    components: {
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: colorMode === 'dark' ? '#ffffff' : 'initial',
+              borderWidth: 1,
+            },
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+              borderColor: colorMode === 'dark' ? 'rgb(115,200,235)' : 'rgb(4,125,246)',
+            },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: colorMode === 'dark' ? 'rgb(115,200,235)' : 'rgb(4,125,246)',
+            },
+          },
+        },
+      },
+      MuiSelect: {
+        styleOverrides: {
+          icon: {
+            color: colorMode === 'dark' ? '#ffffff' : 'black',
+          },
+        },
+      },
+    },
+  });
+
+  const handleChange = (event: ChangeEvent<{ value: unknown }>) => {
+    onImplementationChange(event.target.value as string);
+  };
+
+  // Handle focus and blur state changes
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    if (onFocus) onFocus(event);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    if (onBlur) onBlur(event);
+  };
+
+  // Handle dropdown expanded state
+  const handleDropdownOpen = () => setExpanded(true);
+  const handleDropdownClose = () => setExpanded(false);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl sx={{ m: 1, minWidth: 220, maxWidth: 220 }}>
+        <InputLabel
+          id="implementation-dropdown-label"
+          sx={{
+            '&.Mui-focused': {
+              color: isFocused ? (colorMode === 'dark' ? 'rgb(115,200,235)' : 'rgb(4,125,246)') : 'initial',
+            },
+          }}
+        >
+          Implementation
+        </InputLabel>
+
+        <Select
+          value={implementation}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          label="Implementation"
+          labelId="implementation-dropdown-label"
+          id="implementation-dropdown-select"
+          onOpen={handleDropdownOpen}
+          onClose={handleDropdownClose}
+          aria-expanded={expanded}
+          sx={{
+            '& .MuiSelect-select': {
+              color: isFocused || expanded ? (colorMode === 'dark' ? 'rgb(115,200,235)' : 'rgb(4,125,246)') : 'initial',
+            },
+          }}
+        >
+          <MenuItem value="XPath">XPath</MenuItem>
+        </Select>
+      </FormControl>
+    </ThemeProvider>
+  );
+};
+
+export default ImplementationDropdown;