Merge pull request #1352 from akto-api-security/improve/dashboard_ux

Fixing auto refresh on auth screen
akto-api-security · Aug 14, 2024 · 4b1446a · 4b1446a
2 parents 8f58a12 + a2c7dd4
commit 4b1446a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/...oard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRoleSettings/ParamsCard.jsx b/...oard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRoleSettings/ParamsCard.jsx
@@ -1,4 +1,4 @@
-import { Box, Button, HorizontalGrid, HorizontalStack, Text, VerticalStack } from '@shopify/polaris'
+import { Box, Button, HorizontalStack, Text, VerticalStack } from '@shopify/polaris'
 import React from 'react'
 import TooltipText from "../../../components/shared/TooltipText"
 import { DeleteMajor } from "@shopify/polaris-icons"
@@ -17,26 +17,26 @@ function ParamsCard({dataObj, handleDelete}) {
 
     function LineComponent({title,value}){
         return(
-            <HorizontalStack gap={5}>
+            <div style={{display: 'flex', gap: '20px', flexWrap: 'nowrap'}}>
                 <Box maxWidth='200px'>
                     <TooltipText tooltip={title} text={title} textProps={{variant:"bodyMd", fontWeight: "medium"}} />
                 </Box>
-                <Text variant="bodyMd" color="subdued">{value}</Text>
-            </HorizontalStack>
+                <Text breakWord truncate alignment="start" variant="bodyMd" color="subdued">{value}</Text>
+            </div>
         )
     }
 
     function ParamsList({valuesList}){
         return(
-            <VerticalStack gap={1}>
+            <VerticalStack align="start" gap={1}>
                 {valuesList.map((param,index) => {
                     return(
-                        <HorizontalGrid key={index} columns={2}>
+                        <HorizontalStack blockAlign="start" gap={"4"} key={index}>
                             <LineComponent title={(param.key || '-') + " :"} value={(param.value || '-')} />
                             {param.showHeader !== null ? 
-                                <HorizontalStack gap={1}><Box borderInlineEndWidth='1' borderColor="border-subdued" minHeight='20px'/><LineComponent title={"Position :"} value={param.where}/></HorizontalStack>
+                                <HorizontalStack blockAlign="start" gap={1}><Box borderInlineEndWidth='1' borderColor="border-subdued" minHeight='20px'/><LineComponent title={"Position :"} value={param.where}/></HorizontalStack>
                             :null}
-                        </HorizontalGrid>
+                        </HorizontalStack>
                     )
                 })}
             </VerticalStack>
@@ -68,7 +68,7 @@ function ParamsCard({dataObj, handleDelete}) {
 
                 </VerticalStack>
                 <HorizontalStack align="end">
-                    <Button size="slim" onClick={handleDelete} icon={DeleteMajor}><div data-testid="delete_button">Delete</div></Button>
+                    <Button onClick={handleDelete} icon={DeleteMajor}><div data-testid="delete_button">Delete</div></Button>
                 </HorizontalStack>
             </VerticalStack>
         </Box>

diff --git a/...eb/polaris_web/web/src/apps/dashboard/pages/testing/TestRoleSettings/TestRoleSettings.jsx b/...eb/polaris_web/web/src/apps/dashboard/pages/testing/TestRoleSettings/TestRoleSettings.jsx
@@ -69,6 +69,8 @@ function TestRoleSettings() {
         { label: "JSON Recording", value: "RECORDED_FLOW" },
     ]
 
+    const [refresh, setRefresh] = useState(false)
+
     function getAuthWithCondList() {
         return  initialItems?.authWithCondList
     }
@@ -106,7 +108,7 @@ function TestRoleSettings() {
         } else {
             resetFunc(initialItems)
         }
-    }, [])
+    }, [refresh])
 
     useEffect(() => {
         if (func.deepComparison(conditions, transform.createConditions(initialItems.endpoints))) {
@@ -125,10 +127,14 @@ function TestRoleSettings() {
     }
 
     const saveAction = async (updatedAuth=false, authWithCondLists = null) => {
+        setRefresh(!refresh)
         let andConditions = transform.filterContainsConditions(conditions, 'AND')
         let orConditions = transform.filterContainsConditions(conditions, 'OR')
         if (!(andConditions || orConditions) || roleName.length == 0) {
+            navigate(null, { state: { name: roleName, endpoints: { andConditions: andConditions, orConditions: orConditions }, authWithCondList: authWithCondLists},
+                replace:true })
             func.setToast(true, true, "Please select valid values for a test role")
+
         } else {
             if (isNew) {
                 api.addTestRoles(roleName, andConditions, orConditions).then((res) => {
@@ -311,7 +317,6 @@ function TestRoleSettings() {
                     }
                 }
             }
-
             resp = await api.addAuthToRole(initialItems.name, apiCond, currentInfo.authParams, automationType, currentInfo.steps, recordedLoginFlowInput)
         }
         handleCancel()
@@ -421,12 +426,12 @@ function TestRoleSettings() {
 
     return (
         <DetailsPage
-        pageTitle={pageTitle}
-        backUrl="/dashboard/testing/roles"
-        saveAction={saveAction}
-        discardAction={() => resetFunc(initialItems)}
-        isDisabled={compareFunc}
-        components={components}
+            pageTitle={pageTitle}
+            backUrl="/dashboard/testing/roles"
+            saveAction={saveAction}
+            discardAction={() => resetFunc(initialItems)}
+            isDisabled={compareFunc}
+            components={components}
         />
     )
 }