Merge pull request #1194 from akto-api-security/hotfix/fix_ui_feedbacks

Hot fixes made for filters etc in ui in dashboard
akto-api-security · Jun 16, 2024 · 2fea2e0 · 2fea2e0
2 parents 8d67bc7 + 8e34f36
commit 2fea2e0
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 47 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/style.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/style.css
@@ -40,10 +40,6 @@
     background-color: rgba(0, 255, 0, 0.1);
 }
 
-.new-diff .view-line{
-    padding-left: 10px ;
-}
-
 .new-diff .monaco-hover{
     background-color: #FFF5EA !important;
     border-radius: 2px;

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubServerTable.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/tables/GithubServerTable.js
@@ -76,15 +76,6 @@ function GithubServerTable(props) {
 
   let filterOperators = props.headers.reduce((map, e) => { map[e.sortKey || e.value] = 'OR'; return map }, {})
 
-  const handleSelectedTab = (x) => {
-    const tableTabs = props.tableTabs ? props.tableTabs : props.tabs
-    if(tableTabs){
-      const primitivePath = window.location.origin + window.location.pathname + window.location?.search
-      const newUrl = primitivePath + "#" +  tableTabs[x].id
-      window.history.replaceState(null, null, newUrl)
-    } 
-  }
-
   useEffect(()=> {
     let queryFilters 
     if (performance.getEntriesByType('navigation')[0].type === 'reload') {
@@ -111,10 +102,26 @@ function GithubServerTable(props) {
     tempData ? setData([...tempData.value]) : setData([])
     tempData ? setTotal(tempData.total) : setTotal(0)
     applyFilter(tempData.total)
-    setTableInitialState({
-      ...tableInitialState,
-      [currentPageKey]: tempData.total
-    })
+    if (!performance.getEntriesByType('navigation')[0].type === 'reload') {
+      setTableInitialState({
+        ...tableInitialState,
+        [currentPageKey]: tempData.total
+      })
+    }
+  }
+
+  const handleSelectedTab = (x) => {
+    const tableTabs = props.tableTabs ? props.tableTabs : props.tabs
+    if(tableTabs){
+      const primitivePath = window.location.origin + window.location.pathname + window.location?.search
+      const newUrl = primitivePath + "#" +  tableTabs[x].id
+      window.history.replaceState(null, null, newUrl)
+    }
+    let val = total
+    if(total instanceof Object){
+      val = total.length
+    }
+    applyFilter(val) 
   }
 
   useEffect(() => {

diff --git a/...is_web/web/src/apps/dashboard/pages/observe/api_collections/component/ApiChangesTable.jsx b/...is_web/web/src/apps/dashboard/pages/observe/api_collections/component/ApiChangesTable.jsx
@@ -12,7 +12,7 @@ import useTable from '../../../../components/tables/TableContext';
 
 function ApiChangesTable(props) {
 
-  const { handleRowClick, tableLoading, startTimeStamp, endTimeStamp, newEndpoints, parametersCount, tab } = props ;
+  const { handleRowClick, tableLoading, startTimeStamp, endTimeStamp, newEndpoints, parametersCount } = props ;
   const [selectedTab, setSelectedTab] = useState("new_endpoints") ;
   const [selected, setSelected] = useState(0) ;
   const dataTypeNames = Store(state => state.dataTypeNames);
@@ -21,7 +21,7 @@ function ApiChangesTable(props) {
   const [filters, setFilters] = useState([])
 
   const definedTableTabs = ['New endpoints', 'New params']
-  const initialCount = [0 , parametersCount]
+  const initialCount = [newEndpoints.length , parametersCount]
 
   const { tabsInfo } = useTable()
   const tableCountObj = func.getTabsCount(definedTableTabs, newEndpoints, initialCount)

diff --git a/...b/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SingleTestRunPage.js b/...b/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SingleTestRunPage.js
@@ -217,7 +217,7 @@ function SingleTestRunPage() {
       if(setData){
         setSelectedTestRun(localSelectedTestRun);
       }
-      if((localSelectedTestRun.testingRunResultSummaryHexId && testRunResults[selectedTab].length === 0) || setData) {
+      if((localSelectedTestRun.testingRunResultSummaryHexId) && ((testRunResults[selectedTab].length === 0) || setData)) {
         await fetchTestingRunResultsData(localSelectedTestRun.testingRunResultSummaryHexId);
         }
       }) 
@@ -414,9 +414,8 @@ const promotedBulkActions = (selectedDataHexIds) => {
       </VerticalStack>
     </Card> : null
   )
-
   const components = [ 
-    runningTestsComp,<TrendChart key={tempLoading.running} hexId={hexId} setSummary={setSummary} show={selectedTestRun.run_type && selectedTestRun.run_type!='One-time'}/> , 
+    runningTestsComp,<TrendChart key={tempLoading.running} hexId={hexId} setSummary={setSummary} show={selectedTestRun.run_type && selectedTestRun.run_type!=='One-time'}/> , 
     metadataComponent(), loading ? <SpinnerCentered key="loading"/> : (!workflowTest ? resultTable : workflowTestBuilder)];
 
   const openVulnerabilityReport = () => {

diff --git a/...d/web/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SummaryTable.jsx b/...d/web/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SummaryTable.jsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import GithubSimpleTable from '../../../components/tables/GithubSimpleTable'
 import transform from '../transform'
 import func from '@/util/func'
 import api from '../api'
-import { IndexFiltersMode } from '@shopify/polaris'
+import { IndexTable, useIndexResourceState, LegacyCard, HorizontalStack, Pagination } from '@shopify/polaris'
+import { GithubRow } from '../../../components/tables/rows/GithubRow'
+import observeFunc from "../../observe/transform"
 
 function SummaryTable({testingRunResultSummaries}) {
 
@@ -29,10 +30,8 @@ function SummaryTable({testingRunResultSummaries}) {
         },
     ]
 
-    const resourceName = {
-        singular: 'summary',
-        plural: 'summaries',
-    };
+    const pageLimit = 10
+    const [page, setPage] = useState(0)
 
     const promotedBulkActions = (selectedTestRuns) => { 
         return [
@@ -50,21 +49,84 @@ function SummaryTable({testingRunResultSummaries}) {
         setData(transform.prettifySummaryTable(testingRunResultSummaries))
     },[testingRunResultSummaries])
 
+    const resourceIDResolver = (data) => {
+        return data.id;
+    };
+
+    const { selectedResources, allResourcesSelected, handleSelectionChange } =
+    useIndexResourceState(data, {
+      resourceIDResolver,
+    });
+
+    let tmp = data && data.length <= pageLimit ? data :
+    data.slice(page * pageLimit, Math.min((page + 1) * pageLimit, data.length))
+    let rowMarkup = tmp
+        .map(
+        (
+            data,
+            index,
+        ) => (
+            <GithubRow
+                key={data.id}
+                id={data.id}
+                dataObj={data}
+                index={index}
+                headers={headers}
+                page={page}
+                newRow={true}
+                headings={headers}
+                selectedResources={selectedResources}
+            />
+        ),
+    );
+
+    const onPageNext = () => {
+        setPage((page) => (page + 1));
+    }
+
+    const onPagePrevious = () => {
+        setPage((page) => (page - 1));
+    }
+    const total = data.length
+    let tableClass =  "new-table removeHeaderColor condensed-row" 
+
     return (
-        <GithubSimpleTable
-            hasZebraStriping={true}
-            headers={headers}
-            pageLimit={10}
-            data={data}
-            selectable={true}
-            resourceName={resourceName}
-            filters={[]}
-            promotedBulkActions={promotedBulkActions}
-            mode={IndexFiltersMode.Default}
-            headings={headers}
-            useNewRow={true}
-            condensedHeight={true}
-        />
+        <div className={tableClass}>
+            <LegacyCard>
+                <LegacyCard.Section flush>
+                    <IndexTable
+                        headings={headers}
+                        resourceName={{ singular: 'summary', plural: 'summaries' }}
+                        hasZebraStriping={true}
+                        itemCount={total}
+                        selectedItemsCount={
+                            allResourcesSelected ? 'All' : selectedResources.length
+                        }
+                        promotedBulkActions={promotedBulkActions(selectedResources)}
+                        onSelectionChange={handleSelectionChange}
+                    >
+                        {rowMarkup}
+                    </IndexTable>
+                </LegacyCard.Section>
+                <LegacyCard.Section>
+                    <HorizontalStack
+                        align="center">
+                        <Pagination
+                            label={
+                                total === 0 ? 'No data found' :
+                                    <div data-testid="pagination-label">
+                                        {`Showing ${observeFunc.formatNumberWithCommas(page * pageLimit + Math.min(1, total))}-${observeFunc.formatNumberWithCommas(Math.min((page + 1) * pageLimit, total))} of ${observeFunc.formatNumberWithCommas(total)}`}
+                                    </div>
+                            }
+                            hasPrevious={page > 0}
+                            onPrevious={onPagePrevious}
+                            hasNext={total > (page + 1) * pageLimit}
+                            onNext={onPageNext}
+                        />
+                    </HorizontalStack>
+                    </LegacyCard.Section>
+            </LegacyCard>
+        </div>
     )
 }
 

diff --git a/...shboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestRunsPage.js b/...shboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestRunsPage.js
@@ -233,7 +233,7 @@ function processData(testingRuns, latestTestingRunResultSummaries, cicd){
   }
 
   const definedTableTabs = ['All', 'One time', 'Scheduled', 'CI/CD']
-  const initialCount = [countMap['allTestRuns'], countMap['ontTime'], countMap['scheduled'], countMap['cicd']]
+  const initialCount = [countMap['allTestRuns'], countMap['oneTime'], countMap['scheduled'], countMap['cicd']]
 
   const { tabsInfo } = useTable()
   const tableCountObj = func.getTabsCount(definedTableTabs, {}, initialCount)
@@ -244,8 +244,7 @@ function processData(testingRuns, latestTestingRunResultSummaries, cicd){
     api.getUserTestRuns().then((resp)=> {
       setHasUserInitiatedTestRuns(resp)
     })
-    setLoading(false)
-
+    setLoading(false)    
   }
 
   useEffect(()=>{

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/transform.js
@@ -80,7 +80,7 @@ function getTestingRunType(testingRun, testingRunResultSummary, cicd) {
   if (testingRunResultSummary.metadata != null || cicd) {
     return 'CI/CD';
   }
-  if (testingRun.scheduleTimestamp >= func.timeNow() && testingRun.scheduleTimestamp < func.timeNow() + 86400) {
+  if (testingRun.state === "SCHEDULED" && testingRun.periodInSeconds !== 0) {
     return 'Recurring';
   }
   return 'One-time'

diff --git a/apps/dashboard/web/polaris_web/web/src/util/func.js b/apps/dashboard/web/polaris_web/web/src/util/func.js
@@ -1431,7 +1431,7 @@ showConfirmationModal(modalContent, primaryActionContent, primaryAction) {
       const tabId = this.getKeyFromName(tab)
       return {
           content: tab,
-          badge: selectedTab === tabId ? currentCount.toString() : countObj[tabId].toString(),
+          badge: selectedTab === (tabId && currentCount !==0) ? currentCount.toString() : countObj[tabId].toString(),
           onAction: () => { setSelectedTab(tabId) },
           id: this.getKeyFromName(tabId),
           index: ind