Merge remote-tracking branch 'origin/develop' into feature/github_com…

…ments_cicd_test

CONTRIBUTING.md

@@ -36,7 +36,7 @@ If you find a bug or have an idea for a new feature, please open an issue on Git
 
 ## License
 
-By contributing to this project, you agree that your contributions will be licensed under the [LICENSE](LICENSE) file.
+By contributing to this project, you agree that your contributions will be licensed under the [LICENSE](https://github.com/akto-api-security/akto/blob/master/LICENSE.md) file.
 
 ## Contact
 

apps/dashboard/src/main/java/com/akto/listener/RuntimeListener.java

@@ -238,7 +238,7 @@ public static void addLlmSampleData(int accountId) {
         }
 
         try {
-            String mockServiceUrl = "http://sampl-aktol-1exannwybqov-67928726.ap-south-1.elb.amazonaws.com:5000";
+            String mockServiceUrl = "https://vuln-llm.akto.io";
             String data = convertStreamToString(InitializerListener.class.getResourceAsStream("/LlmSampleApiData.json"));
             JSONArray dataobject = new JSONArray(data);
             for (Object obj: dataobject) {

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/components/shared/customDiffEditor.js

@@ -77,7 +77,7 @@ const transform = {
             if(!isNaN(key)){
                 ret.push(parsedJson[key])
             }else{
-                ret.push({key: parsedJson[key]})
+                ret.push({[key]: parsedJson[key]})
             }
         })
         return JSON.stringify(ret, null, 2)

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiCollections.jsx

@@ -153,7 +153,7 @@ function ApiCollections() {
                     }}
                 >
                     <Modal.Section>
-
+                    <div onKeyDown={(e) => func.handleKeyPress(e, createNewCollection)}>
                     <TextField
                         id={"new-collection-input"}
                         label="Name"
@@ -167,7 +167,7 @@ function ApiCollections() {
                         )}
                         autoFocus
                     />
-
+                    </div>
 
                     </Modal.Section>
                 </Modal>)

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>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/TestEditor.css

@@ -58,4 +58,12 @@
 
 .editor-header .Polaris-Text--root{
     max-width: 30vw;
+}
+
+.req-resp-tabs .Polaris-LegacyTabs__Title{
+    padding: 8px 0 !important;
+} 
+
+.req-resp-tabs .Polaris-Box{
+    border: none !important;
 }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/components/SampleApi.jsx

@@ -1,6 +1,5 @@
-import { Box, Button, Divider, Frame, HorizontalStack, LegacyTabs, Modal, VerticalStack} from "@shopify/polaris"
-import { tokens } from "@shopify/polaris-tokens"
-import { UpdateInventoryMajor, ChevronUpMinor } from "@shopify/polaris-icons"
+import { Box, Button, Divider, Frame, HorizontalStack, LegacyTabs, Modal, Text, Tooltip} from "@shopify/polaris"
+import {ChevronUpMinor } from "@shopify/polaris-icons"
 
 import { useEffect, useRef, useState } from "react";
 
@@ -122,12 +121,12 @@ const SampleApi = () => {
 
     const handleTabChange = (selectedTabIndex) => {
         setSelected(selectedTabIndex)
-
         if (sampleData) {
+
             if (selectedTabIndex == 0) {
-                editorInstance.setValue(JSON.stringify(sampleData.requestJson["json"], null, 2))
+                editorInstance.setValue('\n' + sampleData?.requestJson["firstLine"] + '\n\n' + JSON.stringify(sampleData.requestJson["json"], null, 2))
             } else {
-                editorInstance.setValue(JSON.stringify(sampleData.responseJson["json"], null, 2))
+                editorInstance.setValue('\n' + sampleData?.responseJson["firstLine"] + '\n\n' + JSON.stringify(sampleData.responseJson["json"], null, 2))
             }
         }
     }
@@ -167,7 +166,7 @@ const SampleApi = () => {
                 setSampleData({ requestJson, responseJson })
 
                 if (editorInstance) {
-                    editorInstance.setValue(JSON.stringify(requestJson["json"], null, 2))
+                    editorInstance.setValue('\n' + requestJson["firstLine"] + '\n\n' + JSON.stringify(requestJson["json"], null, 2))
                 }
                 setTimeout(()=> {
                     setSampleDataList(sampleDataResponse.sampleDataList)
@@ -254,9 +253,19 @@ const SampleApi = () => {
     return (
         <div>
             <div className="editor-header">
-                <LegacyTabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted />
-                <Button id={"select-sample-api"} onClick={toggleSelectApiActive} size="slim">Select Sample API</Button>
-                <Button id={"run-test"} loading={loading} primary onClick={runTest} size="slim">Run Test</Button>
+                <div className="req-resp-tabs">
+                    <LegacyTabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted />
+                </div>
+                <HorizontalStack gap={2}>
+                    <Button id={"select-sample-api"} onClick={toggleSelectApiActive} size="slim">
+                        <Box maxWidth="200px">
+                            <Tooltip content={copySelectedApiEndpoint} hoverDelay={"100"}>
+                                <Text variant="bodyMd" truncate>{copySelectedApiEndpoint}</Text>
+                            </Tooltip>
+                        </Box>
+                    </Button>
+                    <Button id={"run-test"} loading={loading} primary onClick={runTest} size="slim">Run Test</Button>
+                </HorizontalStack>
             </div>
 
             <Divider />

apps/dashboard/web/polaris_web/web/src/util/func.js

@@ -1067,6 +1067,13 @@ getSizeOfFile(bytes) {
     }
     return duration.trim();
   },
+  handleKeyPress (event, funcToCall) {
+    const enterKeyPressed = event.keyCode === 13;
+    if (enterKeyPressed) {
+      event.preventDefault();
+      funcToCall();
+    }
+  }
 }
 
 export default func