Merge pull request #663 from akto-api-security/fix/fix_burp_in_new_ui

Burp fixed as of Old ui

apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx

@@ -6,7 +6,7 @@ function DropdownSearch(props) {
 
     const id = props.id ? props.id : "dropdown-search"
 
-    const { disabled, label, placeholder, optionsList, setSelected, value , avatarIcon, preSelected, allowMultiple, itemName} = props
+    const { disabled, label, placeholder, optionsList, setSelected, value , avatarIcon, preSelected, allowMultiple, itemName, dropdownSearchKey} = props
 
     const deselectedOptions = optionsList
     const [selectedOptions, setSelectedOptions] = useState(preSelected ? preSelected : []);
@@ -56,8 +56,9 @@ function DropdownSearch(props) {
                     return;
                 }
                 const filterRegex = new RegExp(value, 'i');
+                const searchKey = dropdownSearchKey ? dropdownSearchKey : "label"
                 const resultOptions = deselectedOptions.filter((option) =>
-                    option.label.match(filterRegex),
+                    option[searchKey].match(filterRegex)
                 );
                 setOptions(resultOptions);
                 setLoading(false);

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/QuickStart.css

@@ -69,4 +69,14 @@
 
 .update-connections .Polaris-Page--divider{
     padding-top: 20px !important;
+}
+
+.overflow-text{
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+}
+
+.right-card .Polaris-Scrollable{
+    overflow-x: hidden;
 }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/api.js

@@ -67,6 +67,24 @@ const api = {
             method: 'post',
             data: {deploymentMethod}
         })
+    },
+    fetchBurpPluginDownloadLink() {
+        return request({
+            url: '/api/fetchBurpPluginDownloadLink',
+            method: 'post',
+            data: {},
+        }).then((resp) => {
+            return resp
+        })
+    },
+    fetchBurpCredentials() {
+        return request({
+            url: '/api/fetchBurpCredentials',
+            method: 'post',
+            data: {},
+        }).then((resp) => {
+            return resp
+        })
     }
 }
 

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/BurpSource.jsx

@@ -1,77 +1,104 @@
-import { Button, ButtonGroup, HorizontalStack, Icon, Spinner, Text, VerticalStack } from '@shopify/polaris'
-import React, { useState } from 'react'
-import { StatusActiveMajor } from "@shopify/polaris-icons"
+import { Box, Button, ButtonGroup, HorizontalStack, Text, VerticalStack } from '@shopify/polaris'
+import React, { useEffect, useState } from 'react'
 import {useNavigate} from "react-router-dom"
 import api from '../api'
-import func from '@/util/func'
-
+import func from "@/util/func"
+ 
 function BurpSource() {
+    const navigate = useNavigate()
+    const [burpGithubLink, setBurpGithubLink] = useState("");
+    const [aktoIp, setAktoIp] = useState("");
+    const [aktoToken, setAktoToken] = useState("");
+    const [burpCollectionURL, setBurpCollectionURL] = useState("")
+
+    const getGithubLink = async() => {
+        await api.fetchBurpPluginDownloadLink().then((resp) => {
+            if (resp && resp.burpGithubLink) {
+                setBurpGithubLink(resp?.burpGithubLink)
+            }
+        })
+    }
+
+    const getCredentials = async() => {
+        await api.fetchBurpCredentials().then((resp) => {
+            if (!resp) return
+            setAktoIp(resp?.host)
+            setAktoToken(resp?.apiToken?.key)
+        })
+    }
+
+    const downloadBurpJar = async() => {
+        let downloadTime = func.timeNow()
+        let showBurpPluginConnectedFlag = false
 
-    const [downloadInfo, setDownloadInfo] = useState(0)
-    const [initialData, setInitialData] = useState(0)
-    const [finalData, setFinalData] = useState(0)
-
-    const downloadBurpExt = async() => {
-        setDownloadInfo(1)
-        await api.downloadBurpPluginJar().then((resp)=> {
-            let downloadTime = func.timeNow()
-
-            const href = URL.createObjectURL(resp);
-            // create "a" HTML element with href to file & click
-            const link = document.createElement('a');
-            link.href = href;
-            link.setAttribute('download', 'Akto.jar'); //or any other extension
-            document.body.appendChild(link);
-            link.click();
-            // clean up "a" element & remove ObjectURL
-            document.body.removeChild(link);
-            URL.revokeObjectURL(href);
-
-            setDownloadInfo(2)
-            setInitialData(1)
-
-            let interval = setInterval(() => {
-                api.fetchBurpPluginInfo().then((response) => {
-                let lastBootupTimestamp = response.burpPluginInfo.lastBootupTimestamp
+        await api.downloadBurpPluginJar()
+        window.open(burpGithubLink)
+
+        let interval = setInterval(() => {
+            api.fetchBurpPluginInfo().then((response) => {
+                let lastBootupTimestamp = response?.burpPluginInfo?.lastBootupTimestamp
                 if (lastBootupTimestamp > downloadTime) {
-                    setInitialData(2)
-                    setFinalData(1)
+                    if (showBurpPluginConnectedFlag) {
+                        func.setToast(true, false, "Burp plugin connected")
+                    }
+                    showBurpPluginConnectedFlag = false
                     if (response.burpPluginInfo.lastDataSentTimestamp > downloadTime) {
                         clearInterval(interval)
-                        setFinalData(2)
+                        setBurpCollectionURL("/dashboard/observe/inventory")
+                        func.setToast(true, false, "Data received from burp plugin")
                     }
                 }
             })
-            }, 5000)
-        })
+        }, 2000)
+
     }
 
-    const navigate = useNavigate()
-    const DownloadTextComponent = ({param_value}) => {
-        switch(param_value){
-            case 1:
-                return (<Spinner size='small'/>)
-            case 2:
-                return (<div><Icon source={StatusActiveMajor} color='success'/></div>)
-            default: 
-                return null
-        }
+    const copyText = (text,messageText) => {
+        navigator.clipboard.writeText(text)
+        func.setToast(true, false, `${messageText} is copied to clipboard.`)
     }
 
     const steps = [
         {
-            text: "Download Akto's Burp extension.",
-            component: <div><Button size='slim' onClick={downloadBurpExt}>Download</Button></div>,
-            textComponent: <DownloadTextComponent param_value={downloadInfo}/>
+            text: "Download akto's burp extension",
+            component: <Box width='200px'><Button size="slim" onClick={downloadBurpJar}>Download</Button></Box>,
+        },
+        {
+            text: "Open Burp and add the downloaded jar file in extension tab."
+        },
+        {
+            text: 'Once the plugin is loaded click on "options" tab inside the plugin.'
         },
         {
-            text: "Open Burp and add the downloaded jar file in extension tab.",
-            textComponent: <DownloadTextComponent param_value={initialData} />
+            text: "Copy the AKTO_IP and AKTO_TOKEN and paste in the options tab.",
+            component: (
+                <Box paddingInlineStart={2}>
+                    <VerticalStack gap={1}>
+                        <HorizontalStack gap={1}>
+                            <Text variant="bodyMd" fontWeight="medium" color="subdued">AKTO_IP:</Text>
+                            <Button onClick={() => copyText(aktoIp, "AKTO_IP")} plain>
+                                <div style={{maxWidth: "260px"}} className='overflow-text'>{aktoIp}</div>
+                            </Button>
+                        </HorizontalStack>
+                        <HorizontalStack gap={1}>
+                            <Text variant="bodyMd" fontWeight="medium" color="subdued">AKTO_TOKEN:</Text>
+                            <Button onClick={() => copyText(aktoToken, "AKTO_TOKEN")} plain>
+                                <div style={{maxWidth: "210px"}} className='overflow-text'>{aktoToken}</div>
+                            </Button>
+                        </HorizontalStack>
+                    </VerticalStack>
+                </Box>
+            )
         },
         {
-            text: "Start Burp proxy and browse any website. You will see traffic in 'Burp' collection in inventory.",
-            textComponent: <DownloadTextComponent param_value={finalData} />,
-            component: finalData === 2 ? <Button plain onClick={()=> navigate("dashboard/observe/inventory")}>'Burp Collection'</Button>: null
+            text: "Start Burp proxy and browse any website.",
+            component: (
+                <HorizontalStack gap={1}>
+                    <Text variant="bodyMd">You will see traffic in</Text>
+                    {burpCollectionURL.length > 0 ? <Button plain onClick={()=> navigate(burpCollectionURL)}>Burp</Button> : <Text>Burp</Text>}
+                    <Text>collection.</Text>
+                </HorizontalStack>
+            )
         }
     ]
 
@@ -83,6 +110,11 @@ function BurpSource() {
         navigate("/dashboard/settings/integrations/burp")
     }
 
+    useEffect(()=> {
+        getGithubLink()
+        getCredentials()
+    },[])
+
     return (
         <div className='card-items'>
             <Text variant='bodyMd'>
@@ -93,14 +125,10 @@ function BurpSource() {
                 {steps.map((element,index) => (
                     <VerticalStack gap="1" key={index}>
                         <HorizontalStack gap="1" wrap={false} key={element.text}>
-                            <span>{index + 1}.</span>
-                            <span>{element.text}</span>
-                            <span>{element.textComponent}</span>
-                        </HorizontalStack>
-                        <HorizontalStack gap="3">
-                            <div/>
-                            {element.component}
+                            <Text>{index + 1}.</Text>
+                            <Text variant="bodyMd">{element?.text}</Text>
                         </HorizontalStack>
+                        {element?.component}
                     </VerticalStack>
                 ))}
             </VerticalStack>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/quick_start/components/NewConnection.jsx

@@ -106,7 +106,7 @@ function NewConnection() {
     const trafficScreenLabel = (
         <div className='connector-container'>
             <VerticalStack gap="4">
-                <DropdownSearch optionsList={dropdownList} value={connectors?.label} avatarIcon={connectors?.icon} setSelected={(item)=> setConnector(item)}/>
+                <DropdownSearch optionsList={dropdownList} value={connectors?.label} avatarIcon={connectors?.icon} setSelected={(item)=> setConnector(item)} dropdownSearchKey="value"/>
                 {connectors?.component}
             </VerticalStack>
         </div>