Feature/cdctoolbox 462

cypress/e2e/dataTest.js

@@ -65,6 +65,9 @@ const prettifySingleNoJavascript = 'CloseThere is no Javascript on this Screen-S
 const prettifySingleSuccess = 'ClosePrettify Javascript has been successful.'
 const prettifySingleError = 'CloseError formatting Screen-Set ID'
 const prettifyMultipleScreensNoJavascript = 'CloseThere is no Javascript to Format on any Screen-Set.'
+const importAccounts = 'Import Data'
+const serverImportHeader = 'Deploy and Import'
+const serverImportSuccessMessage = 'The dataflow was deployed successfully (ID: a25eed98877d42faaee2a8c0c4ab7d78). \n Check status of imported accounts in: Dataflows > Job Status.'
 const importData = 'Import Data'
 const importAccountsDescription = 'Import accounts and generate csv with schema and legal fields'
 const importAccountDownloadButton = 'Download Template'
@@ -744,6 +747,15 @@ const mockedGetSmsConfigsResponse = {
   },
 }
 
+const mockedSetSchedulerResponse = {
+  callId: 'b61ad31db138476ab908ae8d602f3422',
+  errorCode: 0,
+  apiVersion: 2,
+  statusCode: 200,
+  statusReason: 'OK',
+  time: '2025-01-09T15:17:08.545Z',
+  id: 'a25eed98877d42faaee2a8c0c4ab7d78',
+}
 const mockedSetSchemaResponse = {
   callId: '0b4d8c50fdc0431491d6ed355228c787',
   errorCode: 0,
@@ -1962,6 +1974,10 @@ export {
   setCaptchaConfigMock,
   setPoliciesMock,
   setRiskProvidersMock,
+  importAccounts,
+  serverImportHeader,
+  mockedSetSchedulerResponse,
+  serverImportSuccessMessage,
   importData,
   importAccountsDescription,
   importAccountDownloadButton,

cypress/e2e/importAccounts.cy.js

@@ -6,6 +6,7 @@ describe('Import Account - Configuration Tree test suite', () => {
     beforeEach(() => {
       utils.mockConfigurationTreeFullAccount()
       utils.startUp('Import Data')
+      cy.get('#importAccountsPanel').click()
       utils.getImportAccountsInformation()
     })
     afterEach(() => {
@@ -52,6 +53,7 @@ describe('Import Account - Configuration Tree test suite', () => {
     beforeEach(() => {
       utils.mockConfigurationTreeFullAccount()
       utils.startUp('Import Data')
+      cy.get('#importAccountsPanel').click()
       utils.getImportAccountsInformation()
     })
     afterEach(() => {

cypress/e2e/serverImport.cy.js

@@ -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 * as dataTest from './dataTest'
+import * as utils from './utils'
+
+describe('Server Import test suite', () => {
+  context('Import Full for Azure local storage', () => {
+    beforeEach(() => {
+      utils.startUp(dataTest.importAccounts)
+      cy.get('#serverImportPanel').click()
+      utils.checkServerImportState('Full')
+    })
+    it('Import account', () => {
+      cy.intercept('POST', 'idx.createDataflow', {
+        body: dataTest.mockedSetSchedulerResponse,
+      }).as('setSchedule')
+
+      cy.get('#serverImportSaveButton').should('have.attr', 'disabled', 'disabled')
+      cy.get('#\\{\\{dataflowName\\}\\}').shadow().find('.ui5-input-inner').type('dataflowName')
+      cy.get('#\\{\\{accountName\\}\\}').shadow().find('.ui5-input-inner').type('accountName')
+      cy.get('#\\{\\{accountKey\\}\\}').shadow().find('.ui5-input-inner').type('accountKey')
+      cy.get('#\\{\\{container\\}\\}').shadow().find('.ui5-input-inner').type('container')
+      cy.get('#\\{\\{readFileNameRegex\\}\\}').shadow().find('.ui5-input-inner').should('have.value', '')
+      cy.get('#\\{\\{blobPrefix\\}\\}').shadow().find('.ui5-input-inner').should('have.value', '')
+      cy.get('#serverImportSaveButton').should('not.be.disabled').click()
+      cy.get('#serverImportSuccessPopup').find('span').should('have.text', dataTest.serverImportSuccessMessage)
+    })
+  })
+})

cypress/e2e/siteDeployerTests.cy.js

@@ -15,7 +15,7 @@ describe('Site Deployer Test Suite', () => {
 
   it('Should create 3 parent sites with different datacenters', () => {
     utils.getBaseDomain(dataTest.baseDomain, 0)
-    utils.getSiteStructure(1)
+    utils.getSiteStructure(5)
     cy.get('[data-cy ="cdctools-siteStructure"]').shadow().find('.ui5-select-label-root').should('have.text', dataTest.dropdownOption)
     utils.getCreateButton().click()
     cy.get('ui5-table-row').should('have.length', '18')
@@ -27,7 +27,7 @@ describe('Site Deployer Test Suite', () => {
   it('Should create 3 parent sites (dev, stag, prod) with US datacenter', () => {
     utils.getCreateButton().should('be.disabled')
     utils.getBaseDomain(dataTest.baseDomain, 0)
-    utils.getSiteStructure(1)
+    utils.getSiteStructure(5)
     cy.get('[data-cy ="cdctools-siteStructure"]').shadow().find('.ui5-select-label-root').should('have.text', dataTest.dropdownOption)
     utils.getDataCenters('US')
     cy.get('ui5-table-row').should('have.length', '0')

cypress/e2e/utils.js

@@ -49,6 +49,7 @@ import {
   setCaptchaConfigMock,
   setPoliciesMock,
   setRiskProvidersMock,
+  serverImportHeader,
   importData,
   importAccountsDescription,
   importAccountDownloadButton,
@@ -68,10 +69,15 @@ export function startUp(pageName) {
 export function getImportAccountsInformation() {
   cy.get('#importAccountsTitle').should('contain.text', importData)
   cy.get('#importAccountsHeaderText').should('contain.text', importAccountsDescription)
-  cy.get('ui5-card-header').eq(3).shadow().find('.ui5-card-header-first-line').should('contain.text', importAccountDownloadButton)
-  cy.get('ui5-card-header').eq(3).shadow().find('.ui5-card-header-subtitle').should('contain.text', importAccountsSubtitle)
+  cy.get('#importAccountsPanel').shadow().find('.ui5-panel-header-title').should('contain.text', importAccountDownloadButton)
+  cy.get('#importAccountsPanel').find('ui5-label').should('contain.text', importAccountsSubtitle)
 }
 
+export function checkServerImportState(accountType) {
+  cy.get('#serverImportPanel').shadow().find('.ui5-panel-header-title').should('contain.text', serverImportHeader)
+  cy.get('#selectAccountType').should('contain.text', `${accountType} Account`)
+  cy.get('#selectStorageServer').should('contain.text', 'Azure')
+}
 export function clearCredentials() {
   resizeObserverLoopErrRe()
   const openPopoverButton = cy.get('body').find('#openPopoverButton')
@@ -136,8 +142,8 @@ export function getBaseDomain(baseDomain, timeout) {
 export function getDataCenters(chosenDataCenter) {
   cy.wait(1000)
   cy.get('[data-cy ="cdctools-dataCenter"]').shadow().find('ui5-icon').realClick()
-  cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover > ui5-list').find('ui5-li').eq(0).shadow().find('li > ui5-checkbox').click()
   cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover > ui5-list').find('ui5-li').eq(1).shadow().find('li > ui5-checkbox').click()
+  cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover > ui5-list').find('ui5-li').eq(2).shadow().find('li > ui5-checkbox').click()
   return cy
     .get('[data-cy ="cdctools-dataCenter"]')
     .shadow()
@@ -152,9 +158,8 @@ export function getSiteStructure(optionNumber, timeout) {
   cy.get('[data-cy ="cdctools-siteStructure"]').should('be.visible')
   cy.get('[data-cy ="cdctools-siteStructure"]', { timeout: timeout }).click()
   cy.wait(1000)
-  return cy.get('ui5-static-area-item').shadow().find('.ui5-select-popover').find('ui5-li').eq(optionNumber).click(1, 1) // Specify explicit coordinates because clickable text has a 66 characters limitation
+  cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover').find('ui5-li').eq(optionNumber).click(1, 1) // Specify explicit coordinates because clickable text has a 66 characters limitation
 }
-
 export function deleteChildSite(length) {
   cy.get('ui5-table-row').eq(length).find('ui5-table-cell').eq(4).find('ui5-button').shadow().find('button').click()
   cy.get('ui5-responsive-popover').find(' [accessible-name="Delete Item 2 of 2"]').eq(0).shadow().find('button').realClick()
@@ -299,10 +304,9 @@ export function writeParentSiteTable(baseDomain, siteDescription, dataCenterOpti
   cy.get('[data-cy ="descriptionInput"]').shadow().find('[class = "ui5-input-inner"]').type(siteDescription).should('have.value', siteDescription)
   cy.wait(1000)
   cy.get('[data-cy ="dataCenterSelect"]').click()
-  cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover').eq(5).find('ui5-li').eq(dataCenterOption).realClick()
+  cy.get('ui5-static-area-item').shadow().find('ui5-responsive-popover').eq(7).find('ui5-li').eq(dataCenterOption).realClick()
   cy.wait(500)
 }
-
 export function writeChildrenSiteTable(childrenDomain, childrenDescription) {
   cy.get('[data-cy ="childBaseDomainInput"]').shadow().find('[class = "ui5-input-inner"]').type(childrenDomain).should('have.value', childrenDomain)
   cy.get('[data-cy ="childDescriptionInput"]').shadow().find('[class = "ui5-input-inner"]').type(childrenDescription).should('have.value', childrenDescription)

src/components/dataflow-settings/dataflow-settings.component.jsx

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { withTranslation } from 'react-i18next'
@@ -32,7 +31,6 @@ const DataflowSettings = ({ dataFlowTreeNode, setDataflowVariableValue, setDataf
       setInitialVariableValues(dataFlowTreeNode.variables)
     }
   }, [openSettingsDialog]) //eslint-disable-line
-
   const onDataflowSettingsButtonClickHandler = () => {
     setOpenSettingsDialog(true)
   }

src/components/import-account-configuration-tree/import-accounts-configuration-tree.component.jsx

@@ -33,7 +33,6 @@ const ImportAccountConfigurationTree = ({
     const checkBoxId = event.srcElement.id
     const value = event.srcElement.checked
     setFields(event)
-    console.log('branches-->,', branches)
     dispatch(setConfigurationStatus({ checkBoxId, value, branches }))
 
     if (treeNodeInputValue) {

src/components/server-import-form/server-import-component.styles.js

@@ -0,0 +1,34 @@
+const styles = {
+  formContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    margin: '0 auto',
+    padding: '20px',
+    borderRadius: '4px',
+  },
+  outerDiv: {
+    width: '100%',
+    marginBottom: '8px',
+    marginTop: '8px',
+  },
+  labelIconContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+  },
+  tooltipIconStyle: {
+    alignSelf: 'center',
+    marginLeft: '6px',
+    color: '#1d2d3e',
+  },
+  inputStyle: {
+    width: '100%',
+  },
+  outerDivFormItem: {
+    width: '100%',
+  },
+  MandatoryFieldIcon: { color: '#ba066c' },
+}
+
+export default styles

src/components/server-import-form/server-import-custom-label-component.jsx

@@ -0,0 +1,18 @@
+import { createUseStyles } from 'react-jss'
+import { Label } from '@ui5/webcomponents-react'
+import styles from './server-import-component.styles.js'
+
+const CustomLabel = ({ name }) => {
+  const useStyles = createUseStyles(styles, { name: 'Server Import' })
+  const classes = useStyles()
+  const parts = name.split('*')
+  return (
+    <Label>
+      {parts[0]}
+      {parts.length > 1 && <span className={classes.MandatoryFieldIcon}>*</span>}
+      {parts[1]}
+    </Label>
+  )
+}
+
+export default CustomLabel

src/components/server-import-form/server-import-form.container.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { Icon, Input, Popover } from '@ui5/webcomponents-react'
+import { createUseStyles } from 'react-jss'
+import styles from './server-import-component.styles.js'
+import CustomLabel from './server-import-custom-label-component.jsx'
+
+const FormItemWithIcon = ({ field, handleInputChange }) => {
+  const useStyles = createUseStyles(styles, { name: 'Server Import' })
+  const classes = useStyles()
+  const [isMouseOverIcon, setIsMouseOverIcon] = useState(false)
+  const [tooltipTarget, setTooltipTarget] = useState('')
+
+  const onMouseOverHandler = (event) => {
+    if (event.target.shadowRoot) {
+      setTooltipTarget(event.target.shadowRoot.host.id)
+      setIsMouseOverIcon(true)
+    }
+  }
+  const onMouseOutHandler = () => {
+    setIsMouseOverIcon(false)
+  }
+
+  const openPopover = (id) => {
+    return isMouseOverIcon && tooltipTarget === `${id}TooltipIcon`
+  }
+  return (
+    <div className={classes.outerDiv}>
+      <div className={classes.labelIconContainer}>
+        <CustomLabel name={field.name} />
+        {field.tooltip && (
+          <>
+            <Icon
+              id={`${field.id}TooltipIcon`}
+              name="message-information"
+              design="Neutral"
+              onMouseOver={onMouseOverHandler}
+              onMouseOut={onMouseOutHandler}
+              className={classes.tooltipIconStyle}
+            />
+            <Popover className={classes.popoverStyle} id={`${field.id}Popover`} opener={`${field.id}TooltipIcon`} open={openPopover(field.id)} placementType="Right">
+              {field.tooltip}
+            </Popover>
+          </>
+        )}
+      </div>
+
+      <Input
+        id={field.id}
+        type={field.type}
+        name={field.name}
+        placeholder={field.placeholder}
+        className={classes.inputStyle}
+        value={field.value !== undefined ? field.value : ''}
+        onInput={(event) => handleInputChange(event, field.id)}
+      />
+    </div>
+  )
+}
+
+export default FormItemWithIcon

src/locales/en/translation.json

@@ -99,8 +99,15 @@
   "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.",
   "MANUAL_REMOVAL_POPUP.TOAST_TEXT": "Site list was copied to the clipboard",
-  "SERVER_IMPORT_COMPONENT.TEMPLATES_LITE_ACCOUNT": "Lite Account",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_CANCEL_BUTTON": "Cancel",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_FEATURE_DESCRIPTION": "Fill the information below to import a full or lite account from a storage server",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_IMPORT_BUTTON": "Import",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_IMPORTED_SUCCESSFULLY": "The dataflow was deployed successfully (ID: {{dataflowId}}). \n Check status of imported accounts in: Dataflows > Job Status.",
   "SERVER_IMPORT_COMPONENT.TEMPLATES_FULL_ACCOUNT": "Full Account",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_LITE_ACCOUNT": "Lite Account",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_SELECT_ACCOUNT_TYPE": "Select Account Type",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_SELECT_LOCAL_STORAGE": "Select Storage Server",
+  "SERVER_IMPORT_COMPONENT.TEMPLATES_SUBTITLE_TEXT": "Import a full or lite account from a storage server",
   "SITE_DEPLOYER_COMPONENT.ADD_OR_REMOVE_SITES": "Quickly add or remove sites, change the structure, update the domains naming, description and select data centers.",
   "SITE_DEPLOYER_COMPONENT.CHOOSE_DATA_CENTER": "Choose Data Centers: *",
   "SITE_DEPLOYER_COMPONENT.CREATE_STRUCTURE": "Create Structure",

src/redux/constants.js

@@ -3,5 +3,4 @@
  * License: Apache-2.0
  */
 
-
 export const ZIP_FILE_MIME_TYPE = 'application/zip'

src/redux/dataTest.js

@@ -3,7 +3,6 @@
  * License: Apache-2.0
  */
 
-
 export const testErrorObject = {
   callId: '1234567890',
   errorCode: 500000,

src/redux/importAccounts/utils.js

@@ -17,7 +17,6 @@ export const propagateConfigurationState = (configuration, value) => {
       propagateConfigurationState(branch, value)
     })
   }
-  console.log('configuration', configuration)
   return configuration
 }
 

src/redux/importAccounts/utils.test.js

@@ -8,7 +8,7 @@
  */
 
 import { mockConfigurationTree, mockConfigurationTreeTrue } from './dataTest'
-import { getParent, propagateConfigurationState } from './utils'
+import { propagateConfigurationState } from './utils'
 
 describe('importAccountsSlice utils test suite', () => {
   test('should propagate configuration state to first level configurations', () => {

src/redux/serverImport/dataTest.js

@@ -0,0 +1,12 @@
+import { serverStructure } from '../../services/serverImport/serverStructure/serverStructure'
+
+export const initialState = { currentSiteApiKey: '', currentSiteInformation: {}, errors: [], isLoading: false, serverConfigurations: [], showSuccessMessage: false }
+
+export const initialStateWithServerConfigurations = {
+  currentSiteApiKey: '',
+  currentSiteInformation: {},
+  errors: [],
+  isLoading: false,
+  serverConfigurations: serverStructure,
+  showSuccessMessage: false,
+}