Merge pull request #76 from SAP/feature/CDCTOOLBOX-415-V2

Feature/cdctoolbox 415 v2

src/components/configuration-tree/configuration-tree.component.jsx

@@ -3,9 +3,8 @@
  * License: Apache-2.0
  */
 
-
 import { useDispatch } from 'react-redux'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { withTranslation } from 'react-i18next'
 import { createUseStyles } from 'react-jss'
 import lodash from 'lodash'
@@ -14,24 +13,42 @@ import { Tree, TreeItemCustom, CheckBox, FlexBox, Icon, Popover } from '@ui5/web
 
 import MessagePopoverButton from '../message-popover-button/message-popover-button.component'
 import DataflowSettings from '../dataflow-settings/dataflow-settings.component'
-import { getHighestSeverity } from './utils'
-
-import '@ui5/webcomponents-icons/dist/message-information.js'
+import RiskBasedAuthenticationRulesButtons from '../risk-based-authentication-rules-buttons/risk-based-authentication-rules-buttons.component'
+import { getHighestSeverity } from './utils.js'
+import { handleRBACheckboxChange, shouldShowRBARulesButtons } from '../../components/risk-based-authentication-rules-buttons/utils' // Import the new utility function
 import './configuration-tree.component.css'
 import styles from './configuration-tree.styles.js'
+import '@ui5/webcomponents-icons/dist/message-information.js'
 
 const useStyles = createUseStyles(styles, { name: 'ConfigurationTree' })
 
-const ConfigurationTree = ({ siteId, id, name, value, error, branches, tooltip, setConfigurationStatus, setDataflowVariableValue, setDataflowVariableValues, t }) => {
+const ConfigurationTree = ({
+  siteId,
+  id,
+  name,
+  value,
+  error,
+  branches,
+  tooltip,
+  setConfigurationStatus,
+  setDataflowVariableValue,
+  setDataflowVariableValues,
+  setRbaRulesOperation,
+  t,
+}) => {
   const dispatch = useDispatch()
   const classes = useStyles()
 
   const [isMouseOverIcon, setIsMouseOverIcon] = useState(false)
   const [tooltipTarget, setTooltipTarget] = useState('')
+  const [isRBAChecked, setIsRBAChecked] = useState(false)
 
   const onCheckBoxStateChangeHandler = (event) => {
     const checkBoxId = event.srcElement.id
     const value = event.srcElement.checked
+
+    handleRBACheckboxChange(checkBoxId, value, setIsRBAChecked)
+
     if (siteId) {
       dispatch(setConfigurationStatus({ siteId, checkBoxId, value }))
     } else {
@@ -66,6 +83,10 @@ const ConfigurationTree = ({ siteId, id, name, value, error, branches, tooltip,
     )
   }
 
+  const showRBARulesButtons = (treeNode) => {
+    return shouldShowRBARulesButtons(treeNode, isRBAChecked) ? <RiskBasedAuthenticationRulesButtons treeNode={treeNode} setRbaRulesOperation={setRbaRulesOperation} t={t} /> : ''
+  }
+
   const expandTree = (treeNode) => {
     return (
       <TreeItemCustom
@@ -97,6 +118,7 @@ const ConfigurationTree = ({ siteId, id, name, value, error, branches, tooltip,
             )}
             {showDataflowSettings(treeNode)}
             {showError(treeNode)}
+            {showRBARulesButtons(treeNode)}
           </FlexBox>
         }
       >

src/components/configuration-tree/configuration-tree.styles.js

@@ -1,8 +1,7 @@
 /*
  * Copyright: Copyright 2023 SAP SE or an SAP affiliate company and cdc-tools-chrome-extension contributors
  * License: Apache-2.0
- */
-
+ */ 
 
 const styles = {
   tooltipIconStyle: {

src/components/copy-configuration-dialog/copy-configuration-dialog.component.jsx

@@ -42,6 +42,7 @@ import {
   clearErrors,
   setDataflowVariableValue,
   setDataflowVariableValues,
+  setRbaRulesOperation,
   setErrors,
 } from '../../redux/siteDeployerCopyConfiguration/siteDeployerCopyConfigurationSlice'
 
@@ -139,6 +140,7 @@ const CopyConfigurationDialog = ({ t }) => {
         setConfigurationStatus={setConfigurationStatus}
         setDataflowVariableValue={setDataflowVariableValue}
         setDataflowVariableValues={setDataflowVariableValues}
+        setRbaRulesOperation={setRbaRulesOperation}
         onSelectAllIncludeUrlChangeHandler={onSelectAllIncludeUrlChangeHandlerWrapper}
       />
     )

src/components/risk-based-authentication-rules-buttons/dataTest.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright: Copyright 2023 SAP SE or an SAP affiliate company and cdc-tools-chrome-extension contributors
+ * License: Apache-2.0
+ */
+
+export const treeNodeExample = {
+  id: 'testNode1',
+  name: 'testNode1',
+  value: false,
+}
+
+export const setRbaRulesOperation = jest.fn()
+
+export const dispatch = jest.fn()
+
+export const t = (key) => key
+
+export const eventMerge = {
+  detail: {
+    selectedOption: {
+      dataset: { id: 'merge' },
+    },
+  },
+}
+
+export const eventReplace = {
+  detail: {
+    selectedOption: {
+      dataset: { id: 'replace' },
+    },
+  },
+}
+
+export const replaceValue = { operation: 'replace' }
+
+export const mergeValue = { operation: 'merge' }

src/components/risk-based-authentication-rules-buttons/risk-based-authentication-rules-buttons.component.jsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright: Copyright 2023 SAP SE or an SAP affiliate company and cdc-tools-chrome-extension contributors
+ * License: Apache-2.0
+ */
+
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+import { Option, Select } from '@ui5/webcomponents-react'
+import { useDispatch } from 'react-redux'
+import { handleRadioButtonChange } from './utils'
+import { createUseStyles } from 'react-jss'
+import styles from './risk-based-authentication-rules-buttons.style'
+
+const useStyles = createUseStyles(styles, { name: 'RiskBasedAuthenticationRulesButtons' })
+const RiskBasedAuthenticationRulesButtons = ({ treeNode, setRbaRulesOperation, t }) => {
+  const dispatch = useDispatch()
+  const classes = useStyles()
+  return (
+    <span className={classes.rbaSelectButtonAlignment}>
+      <Select
+        className={`${classes.rbaButtonSize} ui5-content-density-compact`}
+        onChange={(event) => handleRadioButtonChange(event, treeNode, setRbaRulesOperation, dispatch)}
+        valueState="None"
+      >
+        <Option data-id="merge">{t('CONFIGURATION_TREE.BUTTON_MERGE')}</Option>
+        <Option data-id="replace">{t('CONFIGURATION_TREE.BUTTON_REPLACE')}</Option>
+      </Select>
+    </span>
+  )
+}
+
+export default withTranslation()(RiskBasedAuthenticationRulesButtons)

src/components/risk-based-authentication-rules-buttons/risk-based-authentication-rules-buttons.style.js

@@ -0,0 +1,11 @@
+const styles = {
+  rbaSelectButtonAlignment: {
+    alignContent: 'center',
+    marginLeft: '10px',
+  },
+  rbaButtonSize: {
+    width: '100px',
+  },
+}
+
+export default styles

src/components/risk-based-authentication-rules-buttons/utils.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright: Copyright 2023 SAP SE or an SAP affiliate company and cdc-tools-chrome-extension contributors
+ * License: Apache-2.0
+ */
+
+export const handleRadioButtonChange = (event, treeNode, setRbaRulesOperation,    dispatch) => {
+  const REPLACE_BUTTON_ID = 'replace'
+
+  var selectedButton = 'merge'
+
+  if (event.detail?.selectedOption?.dataset?.id) selectedButton = event.detail.selectedOption.dataset.id
+
+  if (selectedButton === REPLACE_BUTTON_ID) {
+    dispatch(setRbaRulesOperation({ checkBoxId: treeNode.id, operation: 'replace' }))
+  } else {
+    dispatch(setRbaRulesOperation({ checkBoxId: treeNode.id, operation: 'merge' }))
+  }
+}
+
+export const handleRBACheckboxChange = (checkBoxId, value, setIsRBAChecked) => {
+  if (checkBoxId === 'rba' || checkBoxId === 'RBA Rules') {
+    setIsRBAChecked(value)
+  }
+}
+
+export const shouldShowRBARulesButtons = (treeNode, isRBAChecked) => {
+  const isRiskBasedAuth = treeNode.name === 'RBA Rules'
+  return isRiskBasedAuth && isRBAChecked
+}

src/components/risk-based-authentication-rules-buttons/utils.test.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright: Copyright 2023 SAP SE or an SAP affiliate company and cdc-tools-chrome-extension contributors
+ * License: Apache-2.0
+ */
+
+import { handleRadioButtonChange } from './utils'
+import { treeNodeExample, setRbaRulesOperation, dispatch, eventMerge, eventReplace, replaceValue, mergeValue } from './dataTest'
+
+describe('handleRadioButtonChange function tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('should dispatch merge action when merge button is clicked', () => {
+    handleRadioButtonChange(eventMerge, treeNodeExample, setRbaRulesOperation, dispatch)
+    expect(dispatch).toHaveBeenCalledWith(setRbaRulesOperation({ checkBoxId: treeNodeExample.id, mergeValue }))
+  })
+
+  test('should dispatch replace action when replace button is clicked', () => {
+    handleRadioButtonChange(eventReplace, treeNodeExample, setRbaRulesOperation, dispatch)
+    expect(dispatch).toHaveBeenCalledWith(setRbaRulesOperation({ checkBoxId: treeNodeExample.id, replaceValue }))
+  })
+})

src/components/site-configurations/site-configurations.component.jsx

@@ -24,6 +24,7 @@ const SiteConfigurations = ({
   setConfigurationStatus,
   setDataflowVariableValue,
   setDataflowVariableValues,
+  setRbaRulesOperation,
   t,
 }) => {
   const classes = useStyles()
@@ -70,6 +71,7 @@ const SiteConfigurations = ({
                 setConfigurationStatus={setConfigurationStatus}
                 setDataflowVariableValue={setDataflowVariableValue}
                 setDataflowVariableValues={setDataflowVariableValues}
+                setRbaRulesOperation={setRbaRulesOperation}
               />
             ))}
           </FlexBox>

src/locales/en/translation.json

@@ -21,6 +21,8 @@
   "COPY_CONFIGURATION_EXTENDED.TARGET_LIST": "Target List:",
   "COPY_CONFIGURATION_EXTENDED.TARGET_SITES_TOOLTIP": "Recently created sites might take a while to be displayed in the list, however you can just copy and paste the API Key",
   "COPY_CONFIGURATION_EXTENDED.TO": "To",
+  "CONFIGURATION_TREE.BUTTON_MERGE": "Merge",
+  "CONFIGURATION_TREE.BUTTON_REPLACE": "Replace",
   "CONFIGURATION_TREE.EMAIL_LINK_PREFERENCES_CENTER_URL": "Include Lite Preferences Center URL",
   "CONFIGURATION_TREE.EMAIL_LINK_PASSWORD_RESET_PAGE_URL": "Include Reset Page URL",
   "CONFIGURATION_TREE.POLICIES_LINK_DOUBLE_OPT_IN_CUSTOM_REDIRECTION_URL": "Include Customize Redirection URL",

src/redux/copyConfigurationExtended/copyConfigurationExtendedSlice.js

@@ -115,6 +115,10 @@ export const copyConfigurationExtendedSlice = createSlice({
       const configuration = findConfiguration(state.configurations, action.payload.checkBoxId)
       configuration.variables = action.payload.variables
     },
+    setRbaRulesOperation(state, action) {
+      const configuration = findConfiguration(state.configurations, action.payload.checkBoxId)
+      configuration.operation = action.payload.operation
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(getConfigurations.pending, (state) => {
@@ -241,7 +245,11 @@ export const getAvailableTargetSites = createAsyncThunk(GET_AVAILABLE_TARGET_API
     if (!areAvailableTargetSitesLoading) {
       const parallelRequestsAllowed = 5
       const state = getState()
-      const credentials = { userKey: state.credentials.credentials.userKey, secret: state.credentials.credentials.secretKey, gigyaConsole: state.credentials.credentials.gigyaConsole }
+      const credentials = {
+        userKey: state.credentials.credentials.userKey,
+        secret: state.credentials.credentials.secretKey,
+        gigyaConsole: state.credentials.credentials.gigyaConsole,
+      }
       const siteFinderPaginated = new SiteFinderPaginated(credentials, parallelRequestsAllowed)
       let response = await siteFinderPaginated.getFirstPage()
       const availableTargetSites = []
@@ -294,6 +302,7 @@ export const {
   setAvailableTargetSites,
   setDataflowVariableValue,
   setDataflowVariableValues,
+  setRbaRulesOperation,
 } = copyConfigurationExtendedSlice.actions
 
 export const selectConfigurations = (state) => state.copyConfigurationExtended.configurations

src/redux/siteDeployerCopyConfiguration/dataTest.js

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 export const siteId = 'dcdd5bcc-0c9d-40f3-897b-cbb07138d0f7'
 
 export const sitesConfigurations = [
@@ -61,6 +60,7 @@ export const initialState = {
   edit: false,
   isCopyConfigurationDialogOpen: false,
   sourceSiteAdded: false,
+  operation: 'merge',
 }
 
 export const stateWithConfigurations = {

src/redux/siteDeployerCopyConfiguration/siteDeployerCopyConfigurationSlice.js

@@ -27,6 +27,7 @@ export const siteDeployerCopyConfigurationSlice = createSlice({
     edit: false,
     isCopyConfigurationDialogOpen: false,
     sourceSiteAdded: false,
+    operation: 'merge',
   },
   reducers: {
     removeSiteConfigurations(state, action) {
@@ -84,6 +85,9 @@ export const siteDeployerCopyConfigurationSlice = createSlice({
       const configuration = findConfiguration(siteConfiguration.configurations, action.payload.checkBoxId)
       configuration.variables = action.payload.variables
     },
+    setRbaRulesOperation(state, action) {
+      state.operation = action.payload
+    },
     setErrors(state, action) {
       state.errors = action.payload
     },
@@ -169,6 +173,7 @@ export const {
   clearErrors,
   setDataflowVariableValue,
   setDataflowVariableValues,
+  setRbaRulesOperation,
   setErrors,
 } = siteDeployerCopyConfigurationSlice.actions
 
@@ -195,3 +200,5 @@ export const selectEdit = (state) => state.siteDeployerCopyConfiguration.edit
 export const selectIsCopyConfigurationDialogOpen = (state) => state.siteDeployerCopyConfiguration.isCopyConfigurationDialogOpen
 
 export const selectSourceSiteAdded = (state) => state.siteDeployerCopyConfiguration.sourceSiteAdded
+
+export const selectOperation = (state) => state.siteDeployerCopyConfiguration.operation

src/routes/copy-configuration-extended/copy-configuration-extended.component.jsx

@@ -44,6 +44,7 @@ import {
   setConfigurationStatus,
   setDataflowVariableValue,
   setDataflowVariableValues,
+  setRbaRulesOperation,
 } from '../../redux/copyConfigurationExtended/copyConfigurationExtendedSlice'
 
 import { selectCredentials } from '../../redux/credentials/credentialsSlice'
@@ -191,6 +192,7 @@ const CopyConfigurationExtended = ({ t }) => {
         setDataflowVariableValue={setDataflowVariableValue}
         setDataflowVariableValues={setDataflowVariableValues}
         onSelectAllIncludeUrlChangeHandler={onSelectAllIncludeUrlChangeHandlerWrapper}
+        setRbaRulesOperation={setRbaRulesOperation}
       />
     )
   }

src/services/copyConfig/configManager.test.js

@@ -195,6 +195,7 @@ describe('Config Manager test suite', () => {
       .mockResolvedValueOnce({ data: getResponseWithContext(expectedGigyaResponseOk, addressesSchemaId, apiKey) })
 
     const infoExpectedResponse = getInfoExpectedResponse(true)
+    infoExpectedResponse[12].branches[2].operation = 'replace'
     disableFeatures(infoExpectedResponse)
     const response = await configManager.copy([apiKey], infoExpectedResponse)
 
@@ -393,6 +394,7 @@ describe('Config Manager test suite', () => {
       .mockResolvedValueOnce({ data: getResponseWithContext(expectedGigyaResponseOk, addressesSchemaId, apiKey) })
 
     const infoExpectedResponse = getInfoExpectedResponse(true)
+    infoExpectedResponse[12].branches[2].operation = 'replace'
     disableFeatures(infoExpectedResponse)
     const response = await configManager.copy([apiKey], infoExpectedResponse)
     expect(response.length).toEqual(37)
@@ -448,6 +450,7 @@ describe('Config Manager test suite', () => {
 
   async function executeCopyAllUnsuccessfully(mockedResponse, numberOfExpectedResponses) {
     const infoExpectedResponse = getInfoExpectedResponse(true)
+    infoExpectedResponse[12].branches[2].operation = 'replace'
     disableFeatures(infoExpectedResponse)
     const response = await configManager.copy([apiKey], infoExpectedResponse)
     expect(response.length).toEqual(numberOfExpectedResponses)