Survey clone: divide surveys and templates; sort by name

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,
   },

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',

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,
 }

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',
+  },
+}

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,

test/e2e/tests/_templateCreate/index.js

@@ -5,13 +5,22 @@ 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) {
+      // 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}`,

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,

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,

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]
   )

webapp/components/survey/SurveyCreate/SurveyCreate.js

@@ -25,15 +25,28 @@ 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'
 
 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,26 @@ 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
+                className="clone-from-type_btn-group"
+                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 +204,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 +229,7 @@ const SurveyCreate = (props) => {
                 <Button
                   className="btn-primary"
                   disabled={!file || uploading}
-                  label={'homeView.surveyCreate.startImport'}
+                  label="surveyCreate:startImport"
                   onClick={onImport}
                   testId={TestId.surveyCreate.startImportBtn}
                 />

webapp/components/survey/SurveyCreate/SurveyCreate.scss

@@ -41,4 +41,8 @@
   .progress-bar-with-label {
     flex-direction: column;
   }
+
+  .clone-from {
+    height: auto;
+  }
 }

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

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 },