Merge pull request #73 from SAP/feature/CDCTOOLBOX-408

Feature/cdctoolbox 408 - usage tracker integration

.release-it.json

@@ -10,7 +10,7 @@
     "publish": false
   },
   "hooks": {
-    "after:bump": "npm run manifest && npm run build && npm run compress",
+    "after:bump": "npm run manifest && REACT_APP_RELEASE_BUILD=true npm run build && npm run compress",
     "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
   }
 }

cypress/e2e/copyConfigurationExtendedTests.cy.js

@@ -84,7 +84,7 @@ describe('Copy Configuration extended test suite', () => {
       utils.setConfigurationCopyConfig()
       cy.get('[data-cy ="copyConfigExtendedSaveButton"]').shadow().find('button').should('be.enabled')
       cy.get('[data-cy ="copyConfigExtendedSaveButton"]').click()
-      cy.get('[data-cy ="copyConfigSuccessPopup"]').should('have.text', dataTest.expectedSuccessMessage)
+      cy.get('[data-cy ="copyConfigSuccessPopup"]').should('have.text', dataTest.expectedCopyConfigSuccessMessage)
       cy.get('[data-cy ="copyConfigSuccessPopup"]').find('#closeButton').click()
     })
 

cypress/e2e/dataTest.js

@@ -13,7 +13,8 @@ const smsTemplatesOption = 'SMS Templates'
 const parentBaseDomain = 'Manually add parent site'
 const parentSiteDescription = 'Manually added description'
 const expectedErrorMessage = 'Missing required parameter (Manually add parent site - eu1)Missing required parameter : partnerID'
-const expectedSuccessMessage = 'Report Usage Via E-mailPlease report the successful usage to help us track usages and being able to continue improving this tool.'
+const expectedSuccessMessage = 'OkAll sites have been created successfully.'
+const expectedCopyConfigSuccessMessage = 'OkAll selected configurations were copied successfully.'
 const childrenBaseDomain = 'Children site domain'
 const childrenSiteDescription = 'Children site description'
 const missingCredentialsErrorMessage = 'OkPlease insert User and Secret Keys in the Credentials menu.'
@@ -1643,6 +1644,7 @@ export {
   emailTemplatesExportErrorMessageDetail,
   emailTemplatesIconName,
   errorToManualRemoveSiteMessage,
+  expectedCopyConfigSuccessMessage,
   expectedDuplicatedMessage,
   expectedErrorMessage,
   expectedSuccessMessage,

cypress/e2e/utils.js

@@ -43,18 +43,12 @@ import {
 } from './dataTest'
 
 export function startUp(pageName) {
-  cy.visit('', {
-    onBeforeLoad(window) {
-      cy.stub(window, 'open').as('windowOpenStub')
-    },
-  })
+  cy.visit('')
+
   cy.clearAllCookies()
   cy.clearAllLocalStorage()
   cy.clearAllSessionStorage()
 
-  // mockResponse(siteConfigResponse, 'POST', 'admin.getSiteConfig')
-  // mockResponse(mockPolicyResponse, 'POST', 'accounts.getPolicies')
-
   cy.contains(pageName).realClick()
   cy.reload()
 }
@@ -243,8 +237,9 @@ export function fillSourceApiKeyInput() {
   cy.get('[data-cy ="siteCopyConfigurationDialog"]')
     .find('#apiKeyInput')
     .then((input) => {
-      cy.wrap(input).shadow().find('input').click().focus().type(dummyApiKey)
-      cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover').find('ui5-list').find('ui5-li-suggestion-item').eq(0).click()
+      cy.wrap(input).shadow().find('input').click().focus().type(`${dummyApiKey}`).should('have.value', dummyApiKey)
+      cy.wait(1000)
+      cy.get(':nth-child(2) > [data-cy="apiKeyInput"] > [data-cy="addTargetSiteButton"]').click()
     })
 }
 

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",
+    "@sap_oss/automated-usage-tracking-tool": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -86,6 +87,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@bahmutov/cypress-code-coverage": "^2.0.0",
     "@cypress/browserify-preprocessor": "^3.0.2",
     "@cypress/code-coverage": "^3.10.0",
@@ -107,7 +109,6 @@
     "prettier": "3.0.0",
     "react-scripts": "5.0.1",
     "release-it": "^16.0.0",
-    "start-server-and-test": "^2.0.0",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "start-server-and-test": "^2.0.0"
   }
 }

sonar-project.properties

@@ -13,7 +13,7 @@ sonar.projectKey=cdc-tools-chrome-extension
 sonar.pullrequest.github.repository=cx-servicesautomation/sap-customer-data-cloud-toolkit
 sonar.sources=src
 sonar.host.url=https://sonar.tools.sap
-sonar.exclusions=**/*.test.js,**/__mocks__/*
+sonar.exclusions=**/*.test.js,**/__mocks__/*,src/lib/tracker.js
 
 # tests related info
 sonar.tests=src

src/App.js

@@ -15,9 +15,12 @@ import CopyConfigurationExtended from './routes/copy-configuration-extended/copy
 import EmailTemplates from './routes/email-templates/email-templates.component'
 import SiteDeployer from './routes/site-deployer/site-deployer.component'
 import SmsTemplates from './routes/sms-templates/sms-templates.component'
+import '@sap_oss/automated-usage-tracking-tool/theme/sap_horizon.css'
+import { requestConsentConfirmation } from './lib/tracker'
 
 function App() {
   useThemeChange(() => setTheme(getCurrentConsoleTheme()))
+  requestConsentConfirmation()
 
   return (
     <ThemeProvider>
@@ -38,4 +41,5 @@ function App() {
     </ThemeProvider>
   )
 }
+
 export default App

src/lib/tracker.js

@@ -0,0 +1,55 @@
+import Web from '@sap_oss/automated-usage-tracking-tool'
+
+const getCredentials = () => {
+  if (
+    !process.env.REACT_APP_TRACKER_API_KEY_DEV ||
+    !process.env.REACT_APP_TRACKER_DATA_CENTER_DEV ||
+    !process.env.REACT_APP_TRACKER_API_KEY_PROD ||
+    !process.env.REACT_APP_TRACKER_DATA_CENTER_PROD
+  ) {
+    return null
+  }
+
+  const API_KEY = process.env.REACT_APP_RELEASE_BUILD ? process.env.REACT_APP_TRACKER_API_KEY_PROD : process.env.REACT_APP_TRACKER_API_KEY_DEV
+  const DATA_CENTER = process.env.REACT_APP_RELEASE_BUILD ? process.env.REACT_APP_TRACKER_DATA_CENTER_PROD : process.env.REACT_APP_TRACKER_DATA_CENTER_DEV
+  return { apiKey: API_KEY, dataCenter: DATA_CENTER }
+}
+
+export const initTracker = () => {
+  const credentials = getCredentials()
+
+  if (!credentials) {
+    console.log('Tracking tool was not initialized due to missing API key or data center configuration.')
+    return null
+  }
+
+  return new Web(credentials)
+}
+
+const trackingTool = initTracker()
+
+function shouldSkipTracking() {
+  return !trackingTool || window.Cypress
+}
+
+export async function requestConsentConfirmation() {
+  if (shouldSkipTracking()) {
+    return null
+  }
+  return await trackingTool.requestConsentConfirmation({
+    message: `
+    <h2>SAP Customer Data Cloud toolkit</h2>
+    This app collects anonymous usage data to help deliver and improve this product. By installing this app, you agree to share this information with SAP. If you wish to revoke your consent, please uninstall the app. Do you want to continue?
+  `,
+  })
+}
+
+export async function trackUsage({ featureName }) {
+  if (shouldSkipTracking()) {
+    return null
+  }
+  return await trackingTool.trackUsage({
+    toolName: 'Customer Data Cloud toolkit',
+    featureName,
+  })
+}

src/locales/en/translation.json

@@ -74,8 +74,6 @@
   "GLOBAL.USER_KEY": "User key",
   "GLOBAL.VERSION": "Version",
   "GLOBAL.WARNING": "Warning",
-  "GLOBAL.REPORT_USAGE": "Please report the successful usage to help us track usages and being able to continue improving this tool.",
-  "GLOBAL.BUTTON_REPORT_USAGE": "Report Usage Via E-mail",
   "MANUAL_REMOVAL_POPUP.MANUAL_ACTION_REQUIRED": "Manual Action Required!",
   "MANUAL_REMOVAL_POPUP.ERROR_MESSAGE": "The command was executed with errors, but some sites were created and could not be deleted.",
   "MANUAL_REMOVAL_POPUP.CHECKBOX_TEXT": "I understand that manual action is required to avoid data duplication.",

src/redux/copyConfigurationExtended/copyConfigurationExtendedSlice.test.js

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 /**
  * @jest-environment jsdom
  */
@@ -40,13 +39,13 @@ import {
   initialStateWithApiCardError,
   initialStateWithDataflows,
 } from './dataTest'
-import { Tracker } from '../../tracker/tracker'
+import * as Tracker from '../../lib/tracker'
 
 describe('copyConfigurationExtendedSlice test suite', () => {
   let tracker
 
   beforeEach(() => {
-    tracker = jest.spyOn(Tracker, 'reportUsage')
+    tracker = jest.spyOn(Tracker, 'trackUsage').mockImplementation(() => {})
   })
 
   test('should return initial state', () => {
@@ -208,7 +207,7 @@ describe('copyConfigurationExtendedSlice test suite', () => {
     const newDataflowVariableValue = 'newDataflowVariableValue'
     const newState = copyConfigurationExtendedReducer(
       initialStateWithDataflows,
-      setDataflowVariableValue({ checkBoxId: 'dataflow1', variable: 'var1', value: newDataflowVariableValue })
+      setDataflowVariableValue({ checkBoxId: 'dataflow1', variable: 'var1', value: newDataflowVariableValue }),
     )
     expect(newState.configurations[0].branches[0].variables[0].value).toEqual(newDataflowVariableValue)
   })
@@ -220,7 +219,7 @@ describe('copyConfigurationExtendedSlice test suite', () => {
       setDataflowVariableValues({
         checkBoxId: 'dataflow2',
         variables: newDataflowVariables,
-      })
+      }),
     )
     expect(newState.configurations[0].branches[1].variables).toEqual(newDataflowVariables)
   })

src/redux/emails/emailSlice.test.js

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 import emailReducer, {
   setIsImportPopupOpen,
   clearExportFile,
@@ -20,15 +19,15 @@ import EmailManager from '../../services/emails/emailManager'
 import { Buffer } from 'buffer'
 import * as data from './dataTest'
 import { errorConditions } from '../errorConditions'
-import { Tracker } from '../../tracker/tracker'
+import * as Tracker from '../../lib/tracker'
 
 jest.mock('../../services/emails/emailManager')
 
 describe('Email slice test suite', () => {
   let tracker
 
   beforeEach(() => {
-    tracker = jest.spyOn(Tracker, 'reportUsage')
+    tracker = jest.spyOn(Tracker, 'trackUsage').mockImplementation(() => {})
   })
 
   test('should return initial state', () => {

src/redux/sites/siteSlice.test.js

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 /**
  * @jest-environment jsdom
  */
@@ -32,13 +31,13 @@ import sitesReducer, {
 import { getPartnerId, getCreationSuccessMessage } from './utils'
 
 import * as data from './dataTest'
-import { Tracker } from '../../tracker/tracker'
+import * as Tracker from '../../lib/tracker'
 
 describe('Site slice test suite', () => {
   let tracker
 
   beforeEach(() => {
-    tracker = jest.spyOn(Tracker, 'reportUsage')
+    tracker = jest.spyOn(Tracker, 'trackUsage').mockImplementation(() => {})
   })
 
   test('should return initial state', () => {
@@ -131,7 +130,7 @@ describe('Site slice test suite', () => {
       deleteChild({
         parentSiteTempId: '1234',
         tempId: '5678',
-      })
+      }),
     )
     expect(newState.sites[0].childSites.length).toEqual(0)
   })
@@ -141,7 +140,7 @@ describe('Site slice test suite', () => {
       data.stateWithParentWithChild,
       deleteParent({
         tempId: '1234',
-      })
+      }),
     )
     expect(newState.sites.length).toEqual(0)
   })

src/redux/sms/smsSlice.test.js

@@ -3,21 +3,20 @@
  * License: Apache-2.0
  */
 
-
 import smsReducer, { setIsImportPopupOpen, clearExportFile, clearErrors, getSmsTemplatesArrayBuffer, sendSmsTemplatesArrayBuffer, clearErrorCondition } from './smsSlice'
 import SmsManager from '../../services/sms/smsManager'
 import { Buffer } from 'buffer'
 import * as data from './dataTest'
 import { errorConditions } from '../errorConditions'
-import { Tracker } from '../../tracker/tracker'
+import * as Tracker from '../../lib/tracker'
 
 jest.mock('../../services/sms/smsManager')
 
 describe('Site slice test suite', () => {
   let tracker
 
   beforeEach(() => {
-    tracker = jest.spyOn(Tracker, 'reportUsage')
+    tracker = jest.spyOn(Tracker, 'trackUsage').mockImplementation(() => {})
   })
 
   test('should return initial state', () => {

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

@@ -49,6 +49,8 @@ import {
 
 import { selectCredentials } from '../../redux/credentials/credentialsSlice'
 
+import { trackUsage } from '../../lib/tracker.js'
+
 import { areCredentialsFilled } from '../../redux/credentials/utils'
 
 import { cleanTreeVerticalScrolls, areConfigurationsFilled, sendReportOnWarnings } from './utils'
@@ -63,8 +65,6 @@ import '@ui5/webcomponents-icons/dist/information.js'
 
 import styles from './copy-configuration-extended.styles'
 
-import { Tracker } from '../../tracker/tracker'
-
 import { onSelectAllCheckboxChange, onSelectAllIncludeUrlChangeHandler } from '../../routes/copy-configuration-extended/utils'
 
 const useStyles = createUseStyles(styles, { name: 'CopyConfigurationExtended' })
@@ -146,12 +146,12 @@ const CopyConfigurationExtended = ({ t }) => {
     }
   }
 
-  const onSuccessDialogAfterCloseHandler = () => {
+  const onSuccessDialogAfterCloseHandler = async () => {
     setTarketApiKeyInputValue('')
     dispatch(clearConfigurations())
     dispatch(clearTargetApiKeys())
     setSelectAllCheckboxState(false)
-    Tracker.reportUsage()
+    await trackUsage({ featureName: PAGE_TITLE })
   }
 
   const onTarketApiKeyDeleteHandler = (event) => {
@@ -169,12 +169,12 @@ const CopyConfigurationExtended = ({ t }) => {
       open={showSuccessDialog}
       headerText={t('GLOBAL.SUCCESS')}
       state={ValueState.Success}
-      closeButtonContent={t('GLOBAL.BUTTON_REPORT_USAGE')}
+      closeButtonContent={t('GLOBAL.OK')}
       onAfterClose={onSuccessDialogAfterCloseHandler}
       id="copyConfigSuccessPopup"
       data-cy="copyConfigSuccessPopup"
     >
-      <Text>{t('GLOBAL.REPORT_USAGE')}</Text>
+      <Text>{t('COPY_CONFIGURATION_EXTENDED.COPY_SUCCESS_MESSAGE')}</Text>
     </DialogMessageInform>
   )
 
@@ -198,7 +198,7 @@ const CopyConfigurationExtended = ({ t }) => {
   }
 
   const showErrorList = () => {
-    sendReportOnWarnings(errors)
+    sendReportOnWarnings(errors, PAGE_TITLE)
 
     return errors.length ? (
       <div className={classes.errorListOuterDivStyle}>