Merge pull request #698 from ItsMurumba/CU-86c0g2fjp_restore_default

Implement restore default on customize dialog
jembi · Oct 15, 2024 · d1134dc · d1134dc
2 parents a083036 + 82af13a
commit d1134dc
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 29 deletions.
diff --git a/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx b/packages/transaction-log/src/components/dialogs/customize.dialog.component.tsx
@@ -8,7 +8,8 @@ import {
   FormControlLabel,
   Checkbox,
   List,
-  ListItem
+  ListItem,
+  Box
 } from '@mui/material'
 import {CustomizeDialogProps} from '../../interfaces/index.interface'
 
@@ -17,7 +18,9 @@ const CustomizeDialog: React.FC<CustomizeDialogProps> = ({
   onClose,
   onApply,
   visibleFilters,
-  handleFilterVisibilityChange
+  handleFilterVisibilityChange,
+  onRestoreDefaults,
+  isDefaultState
 }) => {
   return (
     <Dialog open={open} onClose={onClose} fullWidth>
@@ -43,12 +46,23 @@ const CustomizeDialog: React.FC<CustomizeDialogProps> = ({
         </List>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="primary">
-          CANCEL
-        </Button>
-        <Button onClick={onApply} color="primary">
-          APPLY
-        </Button>
+        <Box sx={{flexGrow: 1}}>
+          <Button
+            onClick={onRestoreDefaults}
+            color="primary"
+            disabled={isDefaultState}
+          >
+            RESTORE DEFAULT
+          </Button>
+        </Box>
+        <Box>
+          <Button onClick={onClose} color="primary">
+            CANCEL
+          </Button>
+          <Button onClick={onApply} color="primary">
+            APPLY
+          </Button>
+        </Box>
       </DialogActions>
     </Dialog>
   )

diff --git a/packages/transaction-log/src/components/filters/custom.component.tsx b/packages/transaction-log/src/components/filters/custom.component.tsx
@@ -7,6 +7,23 @@ import CustomizeDialog from '../dialogs/customize.dialog.component'
 import {CustomFilterProps} from '../../interfaces/index.interface'
 import {debounce} from 'lodash'
 
+const defaultVisibleFilters = {
+  status: true,
+  statusCode: true,
+  searchQuery: true,
+  channel: true,
+  startDate: true,
+  endDate: true,
+  limit: true,
+  reruns: true,
+  host: false,
+  port: false,
+  path: false,
+  param: false,
+  client: false,
+  method: false
+}
+
 const CustomFilters: React.FC<CustomFilterProps> = ({
   status,
   setStatus,
@@ -42,24 +59,7 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
 }) => {
   const [open, setOpen] = useState(false)
   const debounceFetchTransactionLogs = debounce(fetchTransactionLogs, 10000)
-
-  const [visibleFilters, setVisibleFilters] = useState({
-    status: true,
-    statusCode: true,
-    searchQuery: true,
-    channel: true,
-    startDate: true,
-    endDate: true,
-    limit: true,
-    reruns: true,
-    host: false,
-    port: false,
-    path: false,
-    param: false,
-    client: false,
-    method: false
-  })
-
+  const [visibleFilters, setVisibleFilters] = useState(defaultVisibleFilters)
   const [tempVisibleFilters, setTempVisibleFilters] = useState(visibleFilters)
 
   const handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -144,6 +144,16 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
     setOpen(false)
   }
 
+  const handleRestoreDefaults = () => {
+    setTempVisibleFilters(defaultVisibleFilters)
+  }
+
+  const isDefaultState = filters => {
+    return Object.keys(defaultVisibleFilters).every(
+      key => filters[key] === defaultVisibleFilters[key]
+    )
+  }
+
   useEffect(() => {
     debounceFetchTransactionLogs(null, true)
     return () => debounceFetchTransactionLogs.cancel()
@@ -414,6 +424,8 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
         onApply={handleApplyFilters}
         visibleFilters={tempVisibleFilters}
         handleFilterVisibilityChange={handleFilterVisibilityChange}
+        onRestoreDefaults={handleRestoreDefaults}
+        isDefaultState={isDefaultState(tempVisibleFilters)}
       />
     </Box>
   )

diff --git a/packages/transaction-log/src/interfaces/index.interface.spec.ts b/packages/transaction-log/src/interfaces/index.interface.spec.ts
@@ -66,10 +66,26 @@ const customizeDialogProps: CustomizeDialogProps = {
   open: true,
   onClose: () => {},
   onApply: () => {},
-  visibleFilters: {status: true, channel: false},
+  visibleFilters: {
+    status: true,
+    statusCode: true,
+    channel: true,
+    startDate: true,
+    endDate: true,
+    limit: true,
+    reruns: true,
+    host: true,
+    port: true,
+    path: true,
+    param: true,
+    client: true,
+    method: true
+  },
   handleFilterVisibilityChange: (
     event: React.ChangeEvent<HTMLInputElement>
-  ) => {}
+  ) => {},
+  onRestoreDefaults: () => {},
+  isDefaultState: true
 }
 
 const settingsDialogProps: SettingsDialogProps = {

diff --git a/packages/transaction-log/src/interfaces/index.interface.ts b/packages/transaction-log/src/interfaces/index.interface.ts
@@ -65,10 +65,26 @@ export interface CustomizeDialogProps {
   open: boolean
   onClose: () => void
   onApply: () => void
-  visibleFilters: {[key: string]: boolean}
+  visibleFilters: {
+    status: boolean
+    statusCode: boolean
+    channel: boolean
+    startDate: boolean
+    endDate: boolean
+    limit: boolean
+    reruns: boolean
+    host: boolean
+    port: boolean
+    path: boolean
+    param: boolean
+    client: boolean
+    method: boolean
+  }
   handleFilterVisibilityChange: (
     event: React.ChangeEvent<HTMLInputElement>
   ) => void
+  onRestoreDefaults: () => void
+  isDefaultState: boolean
 }
 
 export interface SettingsDialogProps {