From e4907279dc4d0585935d79c6fec8d9d33ab18171 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <SteRiccio@users.noreply.github.com>
Date: Wed, 23 Oct 2024 12:13:20 +0200
Subject: [PATCH 1/4] Survey clone: divide surveys and templates; sort by name

---
 core/i18n/i18nFactory.js                      |  7 +-
 core/i18n/resources/en/common.js              | 24 +------
 core/i18n/resources/en/index.js               |  2 +
 core/i18n/resources/en/surveyCreate.js        | 27 ++++++++
 webapp/components/form/Dropdown/Dropdown.js   |  4 +-
 .../components/form/Dropdown/useDropdown.js   |  2 +-
 .../survey/SurveyCreate/SurveyCreate.js       | 64 +++++++++++--------
 .../survey/SurveyCreate/SurveyCreate.scss     |  4 ++
 .../SurveyCreate/store/actions/useOnCreate.js |  4 +-
 .../SurveyCreate/store/useCreateSurvey.js     |  3 +
 .../survey/SurveyDropdown/SurveyDropdown.js   | 16 +++--
 .../survey/SurveyDropdown/SurveyDropdown.scss |  2 -
 .../useSurveyDropdownOptions.js               | 55 +++++++---------
 webapp/model/SurveyType.js                    |  4 ++
 webapp/model/index.js                         |  1 +
 .../App/Header/UserPopupMenu/UserPopupMenu.js |  4 +-
 .../Home/TemplateCreate/TemplateCreate.js     |  2 +-
 17 files changed, 128 insertions(+), 97 deletions(-)
 create mode 100644 core/i18n/resources/en/surveyCreate.js
 create mode 100644 webapp/model/SurveyType.js

diff --git a/core/i18n/i18nFactory.js b/core/i18n/i18nFactory.js
index e7829b661a..7049ef3719 100644
--- a/core/i18n/i18nFactory.js
+++ b/core/i18n/i18nFactory.js
@@ -8,6 +8,9 @@ export const Trans = i18nTrans
 
 const defaultLanguage = 'en'
 
+const namespaces = ['common', 'appErrors', 'jobs', 'surveyCreate']
+const defaultNamespace = 'common'
+
 const createParams = (lang) => ({
   fallbackLng: defaultLanguage,
   debug: ProcessUtils.isEnvDevelopment,
@@ -18,8 +21,8 @@ const createParams = (lang) => ({
     nsMode: 'default', // Set it to fallback to let passed namespaces to translated hoc act as fallbacks
   },
   lng: lang,
-  ns: ['common', 'appErrors', 'jobs'],
-  defaultNS: 'common',
+  ns: namespaces,
+  defaultNS: defaultNamespace,
   resources: {
     en: enTranslation,
   },
diff --git a/core/i18n/resources/en/common.js b/core/i18n/resources/en/common.js
index fa2be672d0..95162bff13 100644
--- a/core/i18n/resources/en/common.js
+++ b/core/i18n/resources/en/common.js
@@ -255,6 +255,7 @@ Do you want to proceed?`,
     boolean: 'Boolean',
     code: 'Code',
     coordinate: 'Coordinate',
+    geo: 'Geospatial',
     taxon: 'Taxon',
     file: 'File',
     entity: 'Entity',
@@ -479,29 +480,6 @@ $t(common.cantUndoWarning)`,
       active: '$t(common.active)',
       activate: 'Activate',
     },
-    surveyCreate: {
-      createSurvey: 'Create Survey',
-      createTemplate: 'Create Template',
-      newSurvey: 'New Survey',
-      newSurveyFromScratch: 'New Survey From Scratch',
-      newTemplate: 'New Template',
-      newTemplateFromScratch: 'New Template From Scratch',
-      source: {
-        label: 'Source',
-        arena: 'Arena (.zip)',
-        collect: 'Collect (.collect, .collect-backup, .collect-data)',
-      },
-      startImport: 'Start import',
-      survey: 'Survey',
-      survey_other: 'Surveys',
-      template: 'Template',
-      template_other: 'Templates',
-      error: 'Error creating new survey',
-      errorMaxSurveysCountExceeded: `Error creating survey; please check that the maximum number of surveys that you can creeate ({{maxSurveysCount}}) has not been exceeded.`,
-      options: {
-        includeData: 'Include data',
-      },
-    },
     collectImportReport: {
       excludeResolvedItems: 'Exclude resolved items',
       expression: 'Expression',
diff --git a/core/i18n/resources/en/index.js b/core/i18n/resources/en/index.js
index d2f070e6ff..428855aaea 100644
--- a/core/i18n/resources/en/index.js
+++ b/core/i18n/resources/en/index.js
@@ -2,10 +2,12 @@ import activityLog from './activityLog'
 import appErrors from './appErrors'
 import common from './common'
 import jobs from './jobs'
+import surveyCreate from './surveyCreate'
 
 export default {
   activityLog,
   appErrors,
   common,
   jobs,
+  surveyCreate,
 }
diff --git a/core/i18n/resources/en/surveyCreate.js b/core/i18n/resources/en/surveyCreate.js
new file mode 100644
index 0000000000..ff9d605870
--- /dev/null
+++ b/core/i18n/resources/en/surveyCreate.js
@@ -0,0 +1,27 @@
+export default {
+  cloneFromType: {
+    survey: 'Survey',
+    template: 'Template',
+  },
+  createSurvey: 'Create Survey',
+  createTemplate: 'Create Template',
+  newSurvey: 'New Survey',
+  newSurveyFromScratch: 'New Survey From Scratch',
+  newTemplate: 'New Template',
+  newTemplateFromScratch: 'New Template From Scratch',
+  source: {
+    label: 'Source',
+    arena: 'Arena (.zip)',
+    collect: 'Collect (.collect, .collect-backup, .collect-data)',
+  },
+  startImport: 'Start import',
+  survey: 'Survey',
+  survey_other: 'Surveys',
+  template: 'Template',
+  template_other: 'Templates',
+  error: 'Error creating new survey',
+  errorMaxSurveysCountExceeded: `Error creating survey; please check that the maximum number of surveys that you can creeate ({{maxSurveysCount}}) has not been exceeded.`,
+  options: {
+    includeData: 'Include data',
+  },
+}
diff --git a/webapp/components/form/Dropdown/Dropdown.js b/webapp/components/form/Dropdown/Dropdown.js
index 3c47058f0b..ea85454c76 100644
--- a/webapp/components/form/Dropdown/Dropdown.js
+++ b/webapp/components/form/Dropdown/Dropdown.js
@@ -55,6 +55,7 @@ const Dropdown = (props) => {
     itemLabel = 'label',
     itemValue = 'value',
     items: itemsProp,
+    loading: loadingProp = false,
     menuPlacement = 'auto',
     menuPosition = 'fixed',
     multiple = false,
@@ -116,7 +117,7 @@ const Dropdown = (props) => {
         inputId={inputId}
         isClearable={clearable && !readOnly}
         isDisabled={disabled}
-        isLoading={loading}
+        isLoading={loading || loadingProp}
         isMulti={multiple}
         isSearchable={searchable && !readOnly}
         onChange={onChange}
@@ -147,6 +148,7 @@ Dropdown.propTypes = {
   itemLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), // item label function or property name
   itemValue: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   items: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
+  loading: PropTypes.bool,
   menuPlacement: PropTypes.oneOf(['auto', 'top', 'bottom']),
   menuPosition: PropTypes.oneOf(['absolute', 'fixed']),
   multiple: PropTypes.bool,
diff --git a/webapp/components/form/Dropdown/useDropdown.js b/webapp/components/form/Dropdown/useDropdown.js
index 0a1e532ba9..636b18ac4a 100644
--- a/webapp/components/form/Dropdown/useDropdown.js
+++ b/webapp/components/form/Dropdown/useDropdown.js
@@ -123,11 +123,11 @@ export const useDropdown = ({
 
   const itemToOption = useCallback(
     (item) => ({
+      ...item,
       description: getOptionDescription(item),
       icon: getOptionIcon(item),
       label: getOptionLabel(item),
       value: getOptionValue(item),
-      ...(item.options ? { options: item.options } : {}),
     }),
     [getOptionDescription, getOptionIcon, getOptionLabel, getOptionValue]
   )
diff --git a/webapp/components/survey/SurveyCreate/SurveyCreate.js b/webapp/components/survey/SurveyCreate/SurveyCreate.js
index b1b2b5149b..7f488e8517 100644
--- a/webapp/components/survey/SurveyCreate/SurveyCreate.js
+++ b/webapp/components/survey/SurveyCreate/SurveyCreate.js
@@ -25,6 +25,7 @@ import LanguageDropdown from '@webapp/components/form/languageDropdown'
 import { useOnUpdate } from '@webapp/components/hooks'
 import { Checkbox, Dropdown } from '@webapp/components/form'
 import { Button, Dropzone, ProgressBar, RadioButtonGroup } from '@webapp/components'
+import { SurveyType } from '@webapp/model'
 
 import { createTypes, importSources, useCreateSurvey } from './store'
 import { SurveyDropdown } from '../SurveyDropdown'
@@ -32,8 +33,20 @@ import { SurveyDropdown } from '../SurveyDropdown'
 const fileMaxSizeDefault = 1000 // 1GB
 const fileMaxSizeSystemAdmin = 2000 // 2GB
 
+const importSourceButtonGroupItems = Object.values(importSources).map((key) => ({
+  key,
+  label: `surveyCreate:source.${key}`,
+}))
+
+const cloneFromTypeButtonGroupItems = Object.values(SurveyType)
+  .reverse()
+  .map((key) => ({
+    key,
+    label: `surveyCreate:cloneFromType.${key}`,
+  }))
+
 const SurveyCreate = (props) => {
-  const { showImport = true, submitButtonLabel = 'homeView.surveyCreate.createSurvey', template = false } = props
+  const { showImport = true, submitButtonLabel = 'surveyCreate:createSurvey', template = false } = props
 
   const surveyInfo = useSurveyInfo()
   const i18n = useI18n()
@@ -52,6 +65,7 @@ const SurveyCreate = (props) => {
     source,
     validation,
     cloneFrom,
+    cloneFromType,
     cloneFromCycle,
     options,
     file,
@@ -77,9 +91,7 @@ const SurveyCreate = (props) => {
           items={[
             {
               key: createTypes.fromScratch,
-              label: template
-                ? 'homeView.surveyCreate.newTemplateFromScratch'
-                : 'homeView.surveyCreate.newSurveyFromScratch',
+              label: template ? 'surveyCreate:newTemplateFromScratch' : 'surveyCreate:newSurveyFromScratch',
             },
             {
               key: createTypes.clone,
@@ -128,15 +140,25 @@ const SurveyCreate = (props) => {
 
       {createType === createTypes.clone && (
         <>
-          <FormItem label="common.cloneFrom">
-            <SurveyDropdown
-              selection={cloneFrom?.value}
-              onChange={(value) => {
-                const cycles = value?.cycles || []
-                const lastCycleKey = cycles[cycles.length - 1]
-                onUpdate({ name: 'cloneFrom', value }, { name: 'cloneFromCycle', value: lastCycleKey })
-              }}
-            />
+          <FormItem className="clone-from">
+            <fieldset>
+              <legend>{i18n.t('common.cloneFrom')}</legend>
+              <RadioButtonGroup
+                items={cloneFromTypeButtonGroupItems}
+                onChange={(value) => onUpdate({ name: 'cloneFromType', value })}
+                row
+                value={cloneFromType}
+              />
+              <SurveyDropdown
+                onChange={(value) => {
+                  const cycles = value?.cycles || []
+                  const lastCycleKey = cycles[cycles.length - 1]
+                  onUpdate({ name: 'cloneFrom', value }, { name: 'cloneFromCycle', value: lastCycleKey })
+                }}
+                selection={cloneFrom?.value}
+                type={cloneFromType}
+              />
+            </fieldset>
           </FormItem>
           {cloneFrom?.cycles?.length > 1 && (
             <FormItem label="common.cycle">
@@ -181,22 +203,14 @@ const SurveyCreate = (props) => {
                     <Checkbox
                       id={TestId.surveyCreate.optionIncludeDataCheckbox}
                       checked={options['includeData']}
-                      label={`homeView.surveyCreate.options.includeData`}
+                      label={`surveyCreate:options.includeData`}
                       onChange={(value) => onOptionChange({ key: 'includeData', value })}
                     />
                   </div>
                 </fieldset>
               </div>
-              <FormItem label="homeView.surveyCreate.source.label">
-                <RadioButtonGroup
-                  items={Object.values(importSources).map((key) => ({
-                    key,
-                    label: `homeView.surveyCreate.source.${key}`,
-                  }))}
-                  onChange={onSourceChange}
-                  row
-                  value={source}
-                />
+              <FormItem label="surveyCreate:source.label">
+                <RadioButtonGroup items={importSourceButtonGroupItems} onChange={onSourceChange} row value={source} />
               </FormItem>
               <div className="row">
                 <Dropzone
@@ -214,7 +228,7 @@ const SurveyCreate = (props) => {
                 <Button
                   className="btn-primary"
                   disabled={!file || uploading}
-                  label={'homeView.surveyCreate.startImport'}
+                  label="surveyCreate:startImport"
                   onClick={onImport}
                   testId={TestId.surveyCreate.startImportBtn}
                 />
diff --git a/webapp/components/survey/SurveyCreate/SurveyCreate.scss b/webapp/components/survey/SurveyCreate/SurveyCreate.scss
index 2880b03fb3..bc487336b8 100644
--- a/webapp/components/survey/SurveyCreate/SurveyCreate.scss
+++ b/webapp/components/survey/SurveyCreate/SurveyCreate.scss
@@ -41,4 +41,8 @@
   .progress-bar-with-label {
     flex-direction: column;
   }
+
+  .clone-from {
+    height: auto;
+  }
 }
diff --git a/webapp/components/survey/SurveyCreate/store/actions/useOnCreate.js b/webapp/components/survey/SurveyCreate/store/actions/useOnCreate.js
index 3ffcd6300e..dee740ca49 100644
--- a/webapp/components/survey/SurveyCreate/store/actions/useOnCreate.js
+++ b/webapp/components/survey/SurveyCreate/store/actions/useOnCreate.js
@@ -21,10 +21,10 @@ const sendSurveyCreateRequest = async ({ dispatch, newSurvey, user }) => {
       errorParams = null
     if (e.status === StatusCodes.UNAUTHORIZED) {
       const maxSurveysCount = Authorizer.getMaxSurveysUserCanCreate(user)
-      errorKey = 'homeView.surveyCreate.errorMaxSurveysCountExceeded'
+      errorKey = 'surveyCreate:errorMaxSurveysCountExceeded'
       errorParams = { maxSurveysCount }
     } else {
-      errorKey = 'homeView.surveyCreate.error'
+      errorKey = 'surveyCreate:error'
     }
     dispatch(NotificationActions.notifyError({ key: errorKey, params: errorParams }))
     return null
diff --git a/webapp/components/survey/SurveyCreate/store/useCreateSurvey.js b/webapp/components/survey/SurveyCreate/store/useCreateSurvey.js
index 9c7a1e50f0..8240afd603 100644
--- a/webapp/components/survey/SurveyCreate/store/useCreateSurvey.js
+++ b/webapp/components/survey/SurveyCreate/store/useCreateSurvey.js
@@ -2,6 +2,8 @@ import { useState } from 'react'
 
 import { Objects } from '@openforis/arena-core'
 
+import { SurveyType } from '@webapp/model'
+
 import { useActions } from './actions'
 import { importSources } from './importSources'
 
@@ -17,6 +19,7 @@ const initialState = {
   label: '',
   lang: 'en',
   cloneFrom: null,
+  cloneFromType: SurveyType.template,
   cloneFromCycle: null,
   template: false,
   options: { includeData: false },
diff --git a/webapp/components/survey/SurveyDropdown/SurveyDropdown.js b/webapp/components/survey/SurveyDropdown/SurveyDropdown.js
index d75d98a879..9b4552e2e1 100644
--- a/webapp/components/survey/SurveyDropdown/SurveyDropdown.js
+++ b/webapp/components/survey/SurveyDropdown/SurveyDropdown.js
@@ -7,14 +7,15 @@ import { useI18n } from '@webapp/store/system'
 import { TestId } from '@webapp/utils/testId'
 
 import { Dropdown } from '@webapp/components/form'
+import { SurveyType } from '@webapp/model'
+
 import { useSurveyDropdownOptions } from './useSurveyDropdownOptions'
 
 const SurveyDropdown = (props) => {
-  const { selection = null, onChange } = props
-  const { options } = useSurveyDropdownOptions()
+  const { onChange, selection = null, type = SurveyType.survey } = props
+  const { loading, options } = useSurveyDropdownOptions({ type })
 
-  const allOptions = options.reduce((optionsAcc, optionGroup) => [...optionsAcc, ...optionGroup.options], [])
-  const selectedOption = allOptions.find((option) => option.value === selection)
+  const selectedOption = options.find((option) => option.value === selection)
 
   const i18n = useI18n()
 
@@ -22,9 +23,11 @@ const SurveyDropdown = (props) => {
     <Dropdown
       className="survey-dropdown"
       items={options}
+      loading={loading}
       onChange={(item) => onChange(item)}
       placeholder={i18n.t('common.select')}
-      renderOptionLabel={({ data }) => {
+      renderOptionLabel={(params) => {
+        const { data } = params
         const { surveyName, surveyLabel } = data
         return (
           <div className="dropdown-option__label">
@@ -45,8 +48,9 @@ const SurveyDropdown = (props) => {
 }
 
 SurveyDropdown.propTypes = {
+  onChange: PropTypes.func.isRequired,
   selection: PropTypes.string,
-  onChange: PropTypes.func,
+  type: PropTypes.oneOf(Object.values(SurveyType)),
 }
 
 export { SurveyDropdown }
diff --git a/webapp/components/survey/SurveyDropdown/SurveyDropdown.scss b/webapp/components/survey/SurveyDropdown/SurveyDropdown.scss
index 6d7e10796d..e0af856790 100644
--- a/webapp/components/survey/SurveyDropdown/SurveyDropdown.scss
+++ b/webapp/components/survey/SurveyDropdown/SurveyDropdown.scss
@@ -1,6 +1,4 @@
 .survey-dropdown {
-  width: 30rem;
-
   .survey-name {
     font-weight: bold;
   }
diff --git a/webapp/components/survey/SurveyDropdown/useSurveyDropdownOptions.js b/webapp/components/survey/SurveyDropdown/useSurveyDropdownOptions.js
index 1fe72553a8..bc3210e2cf 100644
--- a/webapp/components/survey/SurveyDropdown/useSurveyDropdownOptions.js
+++ b/webapp/components/survey/SurveyDropdown/useSurveyDropdownOptions.js
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import * as StringUtils from '@core/stringUtils'
 import * as Survey from '@core/survey/survey'
 
+import { SurveyType } from '@webapp/model'
 import * as API from '@webapp/service/api'
-import { useI18n } from '@webapp/store/system'
 
 const toOption = (surveyInfo) => {
   if (!surveyInfo) return null
@@ -29,39 +29,30 @@ const toOption = (surveyInfo) => {
   }
 }
 
-export const useSurveyDropdownOptions = () => {
+export const useSurveyDropdownOptions = ({ type }) => {
+  const [loading, setLoading] = useState(false)
   const [options, setOptions] = useState([])
 
-  const i18n = useI18n()
+  const fetchSurveys = useCallback(async () => {
+    const template = type === SurveyType.template
+    const surveys = await API.fetchSurveys({ draft: false, template })
 
-  useEffect(() => {
-    ;(async () => {
-      const [surveys, templates] = await Promise.all([
-        API.fetchSurveys({ draft: false }),
-        API.fetchSurveys({ draft: false, template: true }),
-      ])
-
-      const surveyOptions = surveys.map(toOption)
-      const templateOptions = templates.map(toOption)
+    // sort surveys and templates by name
+    const sortByNameFn = (a, b) => {
+      if (a.surveyName < b.surveyName) return -1
+      if (a.surveyName > b.surveyName) return 1
+      return 0
+    }
+    const surveyOptions = surveys.map(toOption).sort(sortByNameFn)
+    setOptions(surveyOptions)
+  }, [type])
 
-      // sort surveys and templates by name
-      const sortByNameFn = (a, b) => {
-        if (a.surveyName < b.surveyName) return -1
-        if (a.surveyName > b.surveyName) return 1
-        return 0
-      }
-      surveyOptions.sort(sortByNameFn)
-      templateOptions.sort(sortByNameFn)
-
-      setOptions([
-        {
-          label: i18n.t('homeView.surveyCreate.template', { count: templateOptions.length }),
-          options: templateOptions,
-        },
-        { label: i18n.t('homeView.surveyCreate.survey', { count: surveyOptions.length }), options: surveyOptions },
-      ])
-    })()
-  }, [])
+  useEffect(() => {
+    setLoading(true)
+    fetchSurveys().then(() => {
+      setLoading(false)
+    })
+  }, [fetchSurveys])
 
-  return { options }
+  return { loading, options }
 }
diff --git a/webapp/model/SurveyType.js b/webapp/model/SurveyType.js
new file mode 100644
index 0000000000..fb76a3722e
--- /dev/null
+++ b/webapp/model/SurveyType.js
@@ -0,0 +1,4 @@
+export const SurveyType = {
+  survey: 'survey',
+  template: 'template',
+}
diff --git a/webapp/model/index.js b/webapp/model/index.js
index 8f94f65ca8..06cfe80c26 100644
--- a/webapp/model/index.js
+++ b/webapp/model/index.js
@@ -1 +1,2 @@
+export { SurveyType } from './SurveyType'
 export { TreeSelectViewMode } from './TreeSelectViewMode'
diff --git a/webapp/views/App/Header/UserPopupMenu/UserPopupMenu.js b/webapp/views/App/Header/UserPopupMenu/UserPopupMenu.js
index 716f7c6029..9581b76ab6 100644
--- a/webapp/views/App/Header/UserPopupMenu/UserPopupMenu.js
+++ b/webapp/views/App/Header/UserPopupMenu/UserPopupMenu.js
@@ -98,7 +98,7 @@ const UserPopupMenu = (props) => {
           className="btn-s btn-transparent"
         >
           <span className="icon icon-plus icon-12px icon-left" />
-          {i18n.t('homeView.surveyCreate.newSurvey')}
+          {i18n.t('surveyCreate:newSurvey')}
         </Link>
       )}
 
@@ -124,7 +124,7 @@ const UserPopupMenu = (props) => {
               className="btn-s btn-transparent"
             >
               <span className="icon icon-plus icon-12px icon-left" />
-              {i18n.t('homeView.surveyCreate.newTemplate')}
+              {i18n.t('surveyCreate:newTemplate')}
             </Link>
           )}
         </>
diff --git a/webapp/views/App/views/Home/TemplateCreate/TemplateCreate.js b/webapp/views/App/views/Home/TemplateCreate/TemplateCreate.js
index b46132e083..c6513f3f11 100644
--- a/webapp/views/App/views/Home/TemplateCreate/TemplateCreate.js
+++ b/webapp/views/App/views/Home/TemplateCreate/TemplateCreate.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { SurveyCreate } from '@webapp/components/survey/SurveyCreate'
 
 const TemplateCreate = () => (
-  <SurveyCreate showImport={false} submitButtonLabel="homeView.surveyCreate.createTemplate" template />
+  <SurveyCreate showImport={false} submitButtonLabel="surveyCreate:createTemplate" template />
 )
 
 export default TemplateCreate

From 2e88b973497918703eb6314602d513a5abff4950 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <SteRiccio@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:50:59 +0200
Subject: [PATCH 2/4] fixing tests

---
 test/e2e/mock/survey.js                               | 2 ++
 test/e2e/tests/_templateCreate/index.js               | 3 ++-
 webapp/components/RadioButtonGroup.js                 | 8 ++++++--
 webapp/components/survey/SurveyCreate/SurveyCreate.js | 1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/test/e2e/mock/survey.js b/test/e2e/mock/survey.js
index 1af8b027d7..6e11b81d11 100644
--- a/test/e2e/mock/survey.js
+++ b/test/e2e/mock/survey.js
@@ -41,6 +41,7 @@ export const template2 = {
 
 export const templateFromSurvey = {
   cloneFrom: survey.name,
+  cloneFromType: 'survey',
   cloneFromLabel: survey.label,
   name: 'template_from_survey',
   label: 'My Survey',
@@ -52,6 +53,7 @@ export const templateFromSurvey = {
 
 export const surveyFromTemplate = {
   cloneFrom: templateFromSurvey.name,
+  cloneFromType: 'template',
   cloneFromLabel: templateFromSurvey.label,
   name: 'survey_from_template',
   label: templateFromSurvey.label,
diff --git a/test/e2e/tests/_templateCreate/index.js b/test/e2e/tests/_templateCreate/index.js
index c8db25ca60..c2487f413f 100644
--- a/test/e2e/tests/_templateCreate/index.js
+++ b/test/e2e/tests/_templateCreate/index.js
@@ -5,12 +5,13 @@ import { gotoTemplateCreate } from '../_navigation'
 export const createTemplate = (template) => {
   gotoTemplateCreate()
 
-  const { cloneFrom, cloneFromLabel, label, name } = template
+  const { cloneFrom, cloneFromType, cloneFromLabel, label, name } = template
 
   test(`Create Template ${name}`, async () => {
     await FormUtils.fillInput(TestId.surveyCreate.surveyName, name)
 
     if (cloneFrom) {
+      await page.click(`.clone-from-type_btn-group .radio-button-group-item[text="${cloneFromType}"]`)
       await page.click(getSelector(TestId.surveyCreate.createTypeBtn({ prefix: 'templateCreateType', type: 'clone' })))
       await FormUtils.selectDropdownItem({
         testId: TestId.surveyCreate.surveyCloneFrom,
diff --git a/webapp/components/RadioButtonGroup.js b/webapp/components/RadioButtonGroup.js
index 672a4ed815..b2faf2b33b 100644
--- a/webapp/components/RadioButtonGroup.js
+++ b/webapp/components/RadioButtonGroup.js
@@ -1,22 +1,25 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material'
+import classNames from 'classnames'
+
 import { useI18n } from '@webapp/store/system'
 
 export const RadioButtonGroup = (props) => {
-  const { items, onChange: onChangeProp, row = false, value } = props
+  const { className, items, onChange: onChangeProp, row = false, value } = props
 
   const i18n = useI18n()
 
   const onChange = useCallback((e) => onChangeProp(e.target.value), [onChangeProp])
 
   return (
-    <RadioGroup onChange={onChange} row={row} value={value}>
+    <RadioGroup className={classNames('radio-button-group', className)} onChange={onChange} row={row} value={value}>
       {items.map((item) => {
         const { key, disabled: itemDisabled, label, labelParams } = item
         return (
           <FormControlLabel
             key={key}
+            className="radio-button-group-item"
             value={key}
             control={<Radio disabled={itemDisabled} />}
             label={i18n.t(label, labelParams)}
@@ -28,6 +31,7 @@ export const RadioButtonGroup = (props) => {
 }
 
 RadioButtonGroup.propTypes = {
+  className: PropTypes.string,
   items: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
   row: PropTypes.bool,
diff --git a/webapp/components/survey/SurveyCreate/SurveyCreate.js b/webapp/components/survey/SurveyCreate/SurveyCreate.js
index 7f488e8517..29696b3a14 100644
--- a/webapp/components/survey/SurveyCreate/SurveyCreate.js
+++ b/webapp/components/survey/SurveyCreate/SurveyCreate.js
@@ -144,6 +144,7 @@ const SurveyCreate = (props) => {
             <fieldset>
               <legend>{i18n.t('common.cloneFrom')}</legend>
               <RadioButtonGroup
+                className="clone-from-type_btn-group"
                 items={cloneFromTypeButtonGroupItems}
                 onChange={(value) => onUpdate({ name: 'cloneFromType', value })}
                 row

From 63b807dd2b58cfdb9f8a9d69ca1061b6903ebce3 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <SteRiccio@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:09:55 +0200
Subject: [PATCH 3/4] fixing tests

---
 test/e2e/mock/survey.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/mock/survey.js b/test/e2e/mock/survey.js
index 6e11b81d11..4ab78a92c1 100644
--- a/test/e2e/mock/survey.js
+++ b/test/e2e/mock/survey.js
@@ -41,7 +41,7 @@ export const template2 = {
 
 export const templateFromSurvey = {
   cloneFrom: survey.name,
-  cloneFromType: 'survey',
+  cloneFromType: 'Survey',
   cloneFromLabel: survey.label,
   name: 'template_from_survey',
   label: 'My Survey',
@@ -53,7 +53,7 @@ export const templateFromSurvey = {
 
 export const surveyFromTemplate = {
   cloneFrom: templateFromSurvey.name,
-  cloneFromType: 'template',
+  cloneFromType: 'Template',
   cloneFromLabel: templateFromSurvey.label,
   name: 'survey_from_template',
   label: templateFromSurvey.label,

From 4f8ba492d8f1f8f47a4e75b81ffd2f15d25704d3 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <SteRiccio@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:24:48 +0200
Subject: [PATCH 4/4] fixing tests

---
 test/e2e/tests/_templateCreate/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/test/e2e/tests/_templateCreate/index.js b/test/e2e/tests/_templateCreate/index.js
index c2487f413f..3b0ebc105c 100644
--- a/test/e2e/tests/_templateCreate/index.js
+++ b/test/e2e/tests/_templateCreate/index.js
@@ -11,8 +11,16 @@ export const createTemplate = (template) => {
     await FormUtils.fillInput(TestId.surveyCreate.surveyName, name)
 
     if (cloneFrom) {
-      await page.click(`.clone-from-type_btn-group .radio-button-group-item[text="${cloneFromType}"]`)
+      // select create type "Clone"
       await page.click(getSelector(TestId.surveyCreate.createTypeBtn({ prefix: 'templateCreateType', type: 'clone' })))
+
+      // select clone from type (survey or template)
+      const cloneFromTypeLocator = page.locator(
+        `.clone-from-type_btn-group .radio-button-group-item[text="${cloneFromType}"]`
+      )
+      await cloneFromTypeLocator.waitFor()
+      await cloneFromTypeLocator.click()
+
       await FormUtils.selectDropdownItem({
         testId: TestId.surveyCreate.surveyCloneFrom,
         label: `${cloneFrom} - ${cloneFromLabel}`,