diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx index 22a849cd03..a9a018f43a 100644 --- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx +++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx @@ -1,5 +1,5 @@ -import { Box, Button, DataTable, Divider, Modal, Text, TextField, Icon, Checkbox, ButtonGroup, Badge, Banner,HorizontalGrid, HorizontalStack, Link, VerticalStack } from "@shopify/polaris"; -import { TickMinor, CancelMajor } from "@shopify/polaris-icons" +import { Box, Button, DataTable, Divider, Modal, Text, TextField, Icon, Checkbox, Badge, Banner,HorizontalGrid, HorizontalStack, Link, VerticalStack, Tooltip } from "@shopify/polaris"; +import { TickMinor, CancelMajor, SearchMinor } from "@shopify/polaris-icons" import { useEffect, useRef, useState } from "react"; import { default as observeApi } from "../api"; import { default as testingApi } from "../../testing/api"; @@ -42,6 +42,8 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu const [active, setActive] = useState(runTestFromOutside || false); const runTestRef = useRef(null); + const [searchValue, setSearchValue] = useState('') + const [showSearch, setShowSearch] = useState(false) function nameSuffixes(tests) { return Object.entries(tests) @@ -159,12 +161,16 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu ); + const resetSearchFunc = () => { + setShowSearch(false); + setSearchValue(''); + } + let categoryRows = [], testRows = [] if (!loading) { categoryRows = testRun.categories.map(category => { const tests = testRun.tests[category.name] - if (tests) { let selected = 0 const total = tests.length @@ -177,7 +183,7 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu return ([(
setTestRun(prev => ({ ...prev, selectedCategory: category.name }))}> + onClick={() => { setTestRun(prev => ({ ...prev, selectedCategory: category.name })); resetSearchFunc(); }}>
{category.displayName} {selected} out of {total} selected @@ -216,7 +222,7 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu })) } - testRows = testRun.tests[testRun.selectedCategory].map(test => { + testRows = testRun.tests[testRun.selectedCategory].filter(x=> x.label.toLowerCase().includes(searchValue.toLowerCase())).map(test => { const isCustom = test?.author !== "AKTO" const label = ( @@ -393,6 +399,10 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu }) } + const handleInputValue = (val) => { + setSearchValue(val); + } + return (
{activator} @@ -470,7 +480,7 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
-
+
Tests + + {showSearch ? : null} + +