refactor(frontend): terminologies and wording update for users (#1978)

* refactor(exploreProjectCard): remove unused code block, update styling, replace mui button with reusable button

* refactor(homePageFilters): remove redundant code block, switch ts error fix

* fix(projectListMap): update styling

* refactor(home): style fix, commented code remove

* fix(create-project): update Upload Area naming to Project Area

* feat(uploadedArea): show uploaded AOI area

* fix(uploadArea): use secondary button for reset instead of primary

* fix(projectDetailsForm): update terminology

* fix(form): update terminology

* fix(map-data): update Map Feature terminology to Map Data

* fix(splitTasks): update wording

* fix(01-create-new-project): udpate test case according to changes

src/frontend/e2e/01-create-new-project.spec.ts

@@ -8,10 +8,11 @@ test('create new project', async ({ browserName, page }) => {
   // (playwright.config.ts is configured to run all browsers by default)
   test.skip(browserName !== 'chromium', 'Test only for chromium!');
 
-  // 1. Project Details Step
   await page.goto('/');
   await page.getByRole('button', { name: '+ Create New Project' }).click();
   await page.getByRole('button', { name: 'NEXT' }).click();
+
+  // 1. Project Details Step
   await expect(page.getByText('Project Name is Required.')).toBeVisible();
   await expect(page.getByText('Short Description is Required.', { exact: true })).toBeVisible();
   await expect(page.getByText('Description is Required.', { exact: true })).toBeVisible();
@@ -67,10 +68,10 @@ test('create new project', async ({ browserName, page }) => {
   await page.getByRole('button', { name: 'NEXT' }).click();
 
   // 4. Map Features Step
-  const dataExtractRadio = await page.getByText('Use OSM map features');
+  const dataExtractRadio = await page.getByText('Fetch data from OSM');
   await dataExtractRadio.click();
   await expect(dataExtractRadio).toBeChecked();
-  await page.getByRole('button', { name: 'Generate Map Features' }).click();
+  await page.getByRole('button', { name: 'Generate Map Data' }).click();
   await page.getByRole('button', { name: 'NEXT' }).click();
 
   // 5. Split Tasks Step

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -47,8 +47,8 @@ const FormUpdateTab = ({ projectId }) => {
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
       <div className="">
         <CustomSelect
-          title="Select Survey Type"
-          placeholder="Select Survey Type"
+          title="What are you Surveying"
+          placeholder="Survey Type"
           data={sortedFormCategoryList}
           dataKey="id"
           valueKey="title"

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js

@@ -201,9 +201,9 @@ const LayerSwitcherControl = ({ map, visible = 'osm', pmTileLayerUrl = null }) =
     layerSwitcher.style.display = 'none';
     if (
       location.pathname.includes('project/') ||
-      location.pathname.includes('upload-area') ||
+      location.pathname.includes('project-area') ||
       location.pathname.includes('upload-survey') ||
-      location.pathname.includes('map-features') ||
+      location.pathname.includes('map-data') ||
       location.pathname.includes('split-tasks') ||
       location.pathname.includes('project-submissions')
     ) {

src/frontend/src/components/createnewproject/DataExtract.tsx

@@ -19,8 +19,8 @@ import { dataExtractGeojsonType } from '@/store/types/ICreateProject';
 import { CustomCheckbox } from '@/components/common/Checkbox';
 
 const dataExtractOptions = [
-  { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM map features' },
-  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom map features' },
+  { name: 'data_extract', value: 'osm_data_extract', label: 'Fetch data from OSM' },
+  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom map data' },
 ];
 
 const DataExtract = ({
@@ -30,7 +30,7 @@ const DataExtract = ({
   additionalFeature,
   setAdditionalFeature,
 }) => {
-  useDocumentTitle('Create Project: Map Features');
+  useDocumentTitle('Create Project: Map Data');
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [extractWays, setExtractWays] = useState('');
@@ -123,7 +123,7 @@ const DataExtract = ({
       dispatch(
         CommonActions.SetSnackBar({
           open: true,
-          message: 'Error generating map features.',
+          message: 'Error generating map data.',
           variant: 'error',
           duration: 2000,
         }),
@@ -218,13 +218,13 @@ const DataExtract = ({
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Map Features</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Map Data</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>You may either choose to use OSM data, or upload your own data for the mapping project.</span>
-          <span> The relevant map features that exist on OSM are imported based on the select map area.</span>{' '}
+          <span> The relevant map data that exist on OSM are imported based on the select map area.</span>{' '}
           <span>
-            You can use these map features to use the 'select from map' functionality from ODK that allows you to select
-            the feature to collect data for.
+            You can use these map data to use the &apos;select from map&apos; functionality from ODK that allows you to
+            select the feature to collect data for.
           </span>{' '}
           <span>
             Additional datasets might be important if your survey consists of more than one feature to select. For
@@ -242,7 +242,7 @@ const DataExtract = ({
           >
             <div>
               <RadioButton
-                topic="You may choose to use OSM data or upload your own map features"
+                topic="You may choose to use OSM data or upload your own map data"
                 options={dataExtractOptions}
                 direction="column"
                 value={formValues.dataExtractWays}
@@ -254,15 +254,15 @@ const DataExtract = ({
               />
               {extractWays === 'osm_data_extract' && (
                 <Button
-                  btnText="Generate Map Features"
+                  btnText="Generate Map Data"
                   btnType="primary"
                   onClick={() => {
                     resetFile(setCustomDataExtractUpload);
                     generateDataExtract();
                   }}
                   className="fmtm-mt-4 !fmtm-mb-8 fmtm-text-base"
                   isLoading={isFgbFetching}
-                  loadingText="Generating Map Features..."
+                  loadingText="Generating Map Data..."
                   disabled={dataExtractGeojson && customDataExtractUpload ? true : false}
                 />
               )}
@@ -278,7 +278,7 @@ const DataExtract = ({
                       dispatch(CreateProjectActions.setDataExtractGeojson(null));
                     }}
                     customFile={customDataExtractUpload}
-                    btnText="Upload Map Features"
+                    btnText="Upload Map Data"
                     accept=".geojson,.json,.fgb"
                     fileDescription="*The supported file formats are .geojson, .json, .fgb"
                     errorMsg={errors.customDataExtractUpload}
@@ -289,7 +289,7 @@ const DataExtract = ({
                 <div className="fmtm-mt-4">
                   <CustomCheckbox
                     key="uploadAdditionalFeature"
-                    label="Upload Additional Features"
+                    label="Upload Supporting Datasets"
                     checked={formValues?.hasAdditionalFeature}
                     onCheckedChange={(status) => {
                       handleCustomChange('hasAdditionalFeature', status);
@@ -318,7 +318,7 @@ const DataExtract = ({
                           handleCustomChange('additionalFeature', null);
                         }}
                         customFile={additionalFeature}
-                        btnText="Upload Additional Features"
+                        btnText="Upload Supporting Datasets"
                         accept=".geojson"
                         fileDescription="*The supported file formats are .geojson"
                         errorMsg={errors.additionalFeature}
@@ -341,7 +341,7 @@ const DataExtract = ({
                 btnType="primary"
                 type="submit"
                 className="fmtm-font-bold"
-                dataTip={`${!dataExtractGeojson ? 'Please Generate Map Features First.' : ''}`}
+                dataTip={`${!dataExtractGeojson ? 'Please Generate Map Data First.' : ''}`}
                 disabled={
                   !dataExtractGeojson || (extractWays === 'osm_data_extract' && !dataExtractGeojson) || isFgbFetching
                     ? true

src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx

@@ -33,7 +33,7 @@ const ProjectDetailsForm = ({ flag }) => {
   const submission = () => {
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(values));
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 2 }));
-    navigate('/upload-area');
+    navigate('/project-area');
   };
 
   const { handleSubmit, handleChange, handleCustomChange, values, errors, checkValidationOnly }: any = useForm(
@@ -147,7 +147,7 @@ const ProjectDetailsForm = ({ flag }) => {
         </div>
       </div>
       <form
-        className="xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-11 fmtm-h-full fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar"
+        className="xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-h-full fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar"
         onSubmit={handleSubmit}
       >
         <div className="fmtm-flex fmtm-flex-col fmtm-gap-6 xl:fmtm-w-[50%]">
@@ -266,7 +266,7 @@ const ProjectDetailsForm = ({ flag }) => {
           <div className="fmtm-flex fmtm-flex-col fmtm-gap-5">
             <CustomCheckbox
               key="hasCustomTMS"
-              label="Will you use a custom TMS basemap"
+              label="I would like to include my own imagery layer for reference"
               checked={values.hasCustomTMS}
               onCheckedChange={() => {
                 handleCustomChange('hasCustomTMS', !values.hasCustomTMS);
@@ -277,7 +277,7 @@ const ProjectDetailsForm = ({ flag }) => {
               <InputTextField
                 id="custom_tms_url"
                 name="custom_tms_url"
-                label="Custom TMS URL"
+                label="Please specify the TMS URL"
                 value={values?.custom_tms_url}
                 onChange={handleChange}
                 fieldType="text"

src/frontend/src/components/createnewproject/SelectForm.tsx

@@ -39,7 +39,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
       return;
     }
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 4 }));
-    navigate('/map-features');
+    navigate('/map-data');
   };
   const {
     handleSubmit,
@@ -116,8 +116,8 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
             <div className="fmtm-flex fmtm-flex-col  fmtm-gap-6">
               <div className="">
                 <CustomSelect
-                  title="Select Survey Type"
-                  placeholder="Select Survey Type"
+                  title="What are you Surveying"
+                  placeholder="Survey Type"
                   data={sortedFormCategoryList}
                   dataKey="id"
                   valueKey="title"
@@ -209,7 +209,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                 type="button"
                 onClick={() => {
                   dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
-                  toggleStep(2, '/upload-area');
+                  toggleStep(2, '/project-area');
                 }}
                 className="fmtm-font-bold"
               />

src/frontend/src/components/createnewproject/SplitTasks.tsx

@@ -47,7 +47,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
     {
       name: 'define_tasks',
       value: task_split_type.DIVIDE_ON_SQUARE,
-      label: 'Divide on square',
+      label: 'Divide into square tasks',
       disabled: false,
     },
     {
@@ -355,7 +355,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
                     type="button"
                     onClick={() => {
                       dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
-                      toggleStep(3, '/map-features');
+                      toggleStep(3, '/map-data');
                     }}
                     className="fmtm-font-bold"
                   />

src/frontend/src/components/createnewproject/UploadArea.tsx

@@ -32,7 +32,7 @@ const uploadAreaOptions = [
 ];
 
 const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpload, setAdditionalFeature }) => {
-  useDocumentTitle('Create Project: Upload Area');
+  useDocumentTitle('Create Project: Project Area');
 
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -210,7 +210,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Upload Area</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Project Area</h6>
         <div className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>You can choose to upload the AOI. Note: The file upload only supports .geojson format. </span>
           <div>
@@ -257,8 +257,8 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
                 <div>
                   <p className="fmtm-text-gray-700 fmtm-pt-5 fmtm-pb-5">Draw a polygon on the map to plot the area</p>
                   <Button
-                    btnText="Click to Reset"
-                    btnType="primary"
+                    btnText="Reset"
+                    btnType="secondary"
                     type="button"
                     onClick={() => resetFile()}
                     className=""
@@ -275,15 +275,20 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
                 </div>
               )}
               {uploadAreaSelection === 'upload_file' && (
-                <FileInputComponent
-                  customFile={geojsonFile}
-                  onChange={changeFileHandler}
-                  onResetFile={resetFile}
-                  accept=".geojson, .json"
-                  fileDescription="*The supported file format is geojson file."
-                  btnText="Upload a Geojson"
-                  errorMsg={errors.uploadedAreaFile}
-                />
+                <>
+                  <FileInputComponent
+                    customFile={geojsonFile}
+                    onChange={changeFileHandler}
+                    onResetFile={resetFile}
+                    accept=".geojson, .json"
+                    fileDescription="*The supported file format is geojson file."
+                    btnText="Upload a Geojson"
+                    errorMsg={errors.uploadedAreaFile}
+                  />
+                  <p className="fmtm-text-gray-700">
+                    Total Area: <span className="fmtm-font-bold">{totalAreaSelection}</span>
+                  </p>
+                </>
               )}
             </div>
             <div className="fmtm-flex fmtm-gap-5 fmtm-mx-auto fmtm-mt-10 fmtm-my-5">

src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx

@@ -28,7 +28,7 @@ function DataExtractValidation(values: ProjectValues) {
   }
 
   if (values.hasAdditionalFeature && !values.additionalFeature) {
-    errors.additionalFeature = 'Additional Feature is Required.';
+    errors.additionalFeature = 'Supporting Dataset is Required.';
   }
 
   return errors;

src/frontend/src/components/createnewproject/validation/UploadAreaValidation.tsx

@@ -19,13 +19,13 @@ function UploadAreaValidation(values: ProjectValues) {
   const errors: ValidationErrors = {};
 
   if (!values.uploadAreaSelection) {
-    errors.uploadAreaSelection = 'Select Upload Area Options.';
+    errors.uploadAreaSelection = 'Select Upload Project Area Options';
   }
   if (values.uploadAreaSelection === 'draw' && !values.drawnGeojson) {
-    errors.drawnGeojson = 'Drawing Area is Required.';
+    errors.drawnGeojson = 'Drawing Area is Required';
   }
   if (values.uploadAreaSelection === 'upload_file' && !values.uploadedAreaFile) {
-    errors.uploadedAreaFile = 'Uploaded Area File is Required.';
+    errors.uploadedAreaFile = 'Uploaded Area File is Required';
   }
 
   return errors;