From ab716e0c61a6319a37cc2f2281842bbe4bc06b86 Mon Sep 17 00:00:00 2001
From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com>
Date: Wed, 7 Aug 2024 22:00:27 +0545
Subject: [PATCH] refactor: reword Data Extract --> Map Features  (#1736)

* fix(dataExtract): rename data extract to map features

* refactor: update wording of data extract no features error

* refactor: update info about requirement for linestrings during splitting

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* refactor: tweak text for data extract explanation

---------

Co-authored-by: Sam <78538841+spwoodcock@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 src/frontend/e2e/createproject.spec.ts        |  6 +--
 .../LayerSwitcher/index.js                    |  2 +-
 .../ProjectDetailsV2/ProjectOptions.tsx       |  4 +-
 .../createnewproject/DataExtract.tsx          | 40 +++++++++----------
 .../createnewproject/SelectForm.tsx           |  2 +-
 .../createnewproject/SplitTasks.tsx           |  2 +-
 .../validation/DataExtractValidation.tsx      |  2 +-
 .../src/constants/StepFormConstants.ts        |  4 +-
 src/frontend/src/constants/blockerUrl.ts      |  2 +-
 src/frontend/src/routes.jsx                   |  2 +-
 src/frontend/src/views/CreateNewProject.tsx   |  4 +-
 11 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/frontend/e2e/createproject.spec.ts b/src/frontend/e2e/createproject.spec.ts
index 09834e6618..6220ff881c 100644
--- a/src/frontend/e2e/createproject.spec.ts
+++ b/src/frontend/e2e/createproject.spec.ts
@@ -70,11 +70,11 @@ test('Project Creation', async ({ browserName, page }) => {
   await page.getByLabel('buildings').click();
   await page.getByRole('button', { name: 'NEXT' }).click();
 
-  // 4. Data Extract Step
-  const dataExtractRadio = await page.getByText('Use OSM data extract');
+  // 4. Map Features Step
+  const dataExtractRadio = await page.getByText('Use OSM map features');
   await dataExtractRadio.click();
   await expect(dataExtractRadio).toBeChecked();
-  await page.getByRole('button', { name: 'Generate Data Extract' }).click();
+  await page.getByRole('button', { name: 'Generate Map Features' }).click();
   await page.getByRole('button', { name: 'NEXT' }).click();
 
   // 5. Split Tasks Step
diff --git a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
index b3d0d16c78..a51f8859d2 100644
--- a/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
+++ b/src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
@@ -235,7 +235,7 @@ const LayerSwitcherControl = ({ map, visible = 'osm', pmTileLayerData = null })
       location.pathname.includes('project/') ||
       location.pathname.includes('upload-area') ||
       location.pathname.includes('select-category') ||
-      location.pathname.includes('data-extract') ||
+      location.pathname.includes('map-features') ||
       location.pathname.includes('split-tasks')
     ) {
       const olZoom = document.querySelector('.ol-zoom');
diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
index 859534c334..afc50cffd7 100644
--- a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
+++ b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
@@ -91,8 +91,8 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
         />
         <Button
           isLoading={downloadDataExtractLoading}
-          loadingText="DATA EXTRACT"
-          btnText="DATA EXTRACT"
+          loadingText="MAP FEATURES"
+          btnText="MAP FEATURES"
           btnType="other"
           className={`${
             downloadDataExtractLoading ? '' : 'hover:fmtm-text-red-700'
diff --git a/src/frontend/src/components/createnewproject/DataExtract.tsx b/src/frontend/src/components/createnewproject/DataExtract.tsx
index 035c4e1ac3..8bfda464dc 100644
--- a/src/frontend/src/components/createnewproject/DataExtract.tsx
+++ b/src/frontend/src/components/createnewproject/DataExtract.tsx
@@ -19,12 +19,12 @@ import { task_split_type } from '@/types/enums';
 import { dataExtractGeojsonType } from '@/store/types/ICreateProject';
 
 const dataExtractOptions = [
-  { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM data extract' },
-  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom data extract' },
+  { name: 'data_extract', value: 'osm_data_extract', label: 'Use OSM map features' },
+  { name: 'data_extract', value: 'custom_data_extract', label: 'Upload custom map features' },
 ];
 
 const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload }) => {
-  useDocumentTitle('Create Project: Data Extract');
+  useDocumentTitle('Create Project: Map Features');
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [extractWays, setExtractWays] = useState('');
@@ -105,7 +105,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Data extract has no features. Please try adjusting your AOI.',
+            message: 'Map has no features. Please try adjusting the map area.',
             variant: 'error',
             duration: 2000,
           }),
@@ -116,7 +116,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
       dispatch(
         CommonActions.SetSnackBar({
           open: true,
-          message: 'Error generating data extract.',
+          message: 'Error generating map features.',
           variant: 'error',
           duration: 2000,
         }),
@@ -200,7 +200,8 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: 'Data extract must contain a LineString otherwise the task splitting algorithm will not work.',
+            message:
+              'Features must contain line data (roads, rivers) otherwise the task splitting algorithm will not work.',
             variant: 'warning',
             duration: 8000,
           }),
@@ -223,21 +224,16 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Data Extract</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Map Features</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
-            You may choose to use the default OSM data extracts as your feature types to perform the field survey
+            You may either choose to use OSM data, or upload your own data for the mapping project.
           </span>
-          <span>The relevant data extracts that exist on OSM are imported based on your AOI.</span>
+          <span> The relevant map features that exist on OSM are imported based on the select map area.</span>{' '}
           <span>
-            You can use these data extracts to use the select_from_map functionality from ODK that allows you the mapper
-            to select the existing feature and conduct field mapping survey
-          </span>
-          <span>
-            In contrast to OSM data extracts, you can also upload custom data extracts around the AOI to conduct the
-            field mapping survey.
-          </span>
-          <span>Note: The custom data extracts shall follow the defined data standards.</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.
+          </span>{' '}
         </p>
       </div>
       <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
@@ -248,7 +244,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
           >
             <div>
               <RadioButton
-                topic="You may choose to use OSM data or upload your own data extract"
+                topic="You may choose to use OSM data or upload your own map features"
                 options={dataExtractOptions}
                 direction="column"
                 value={formValues.dataExtractWays}
@@ -260,7 +256,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
               />
               {extractWays === 'osm_data_extract' && (
                 <Button
-                  btnText="Generate Data Extract"
+                  btnText="Generate Map Features"
                   btnType="primary"
                   onClick={() => {
                     resetFile(setCustomDataExtractUpload);
@@ -268,7 +264,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
                   }}
                   className="fmtm-mt-6"
                   isLoading={isFgbFetching}
-                  loadingText="Data extracting..."
+                  loadingText="Generating Map Features..."
                   disabled={dataExtractGeojson && customDataExtractUpload ? true : false}
                 />
               )}
@@ -284,7 +280,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
                       dispatch(CreateProjectActions.setDataExtractGeojson(null));
                     }}
                     customFile={customDataExtractUpload}
-                    btnText="Upload Data Extract"
+                    btnText="Upload Map Features"
                     accept=".geojson,.json,.fgb"
                     fileDescription="*The supported file formats are .geojson, .json, .fgb"
                     errorMsg={errors.customDataExtractUpload}
@@ -305,7 +301,7 @@ const DataExtract = ({ flag, customDataExtractUpload, setCustomDataExtractUpload
                 btnType="primary"
                 type="submit"
                 className="fmtm-font-bold"
-                dataTip={`${!dataExtractGeojson ? 'Please Generate Data Extract First.' : ''}`}
+                dataTip={`${!dataExtractGeojson ? 'Please Generate Map Features First.' : ''}`}
                 disabled={
                   !dataExtractGeojson || (extractWays === 'osm_data_extract' && !dataExtractGeojson) || isFgbFetching
                     ? true
diff --git a/src/frontend/src/components/createnewproject/SelectForm.tsx b/src/frontend/src/components/createnewproject/SelectForm.tsx
index 42ce85a41f..ce5b222bc9 100644
--- a/src/frontend/src/components/createnewproject/SelectForm.tsx
+++ b/src/frontend/src/components/createnewproject/SelectForm.tsx
@@ -38,7 +38,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
       return;
     }
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 4 }));
-    navigate('/data-extract');
+    navigate('/map-features');
   };
   const {
     handleSubmit,
diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx
index 1e6fa546ec..0777dce8b6 100644
--- a/src/frontend/src/components/createnewproject/SplitTasks.tsx
+++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx
@@ -346,7 +346,7 @@ const SplitTasks = ({ flag, geojsonFile, setGeojsonFile, customDataExtractUpload
                     type="button"
                     onClick={() => {
                       dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
-                      toggleStep(3, '/data-extract');
+                      toggleStep(3, '/map-features');
                     }}
                     className="fmtm-font-bold"
                   />
diff --git a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
index f1afa2435e..dbe413971e 100644
--- a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
+++ b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx
@@ -17,7 +17,7 @@ function DataExtractValidation(values: ProjectValues) {
   const errors: ValidationErrors = {};
 
   if (!values?.dataExtractWays) {
-    errors.dataExtractWays = 'Data Extract Selection is Required.';
+    errors.dataExtractWays = 'Map Features Selection is Required.';
   }
 
   if (values.dataExtractWays && values.dataExtractWays === 'custom_data_extract' && !values.customDataExtractUpload) {
diff --git a/src/frontend/src/constants/StepFormConstants.ts b/src/frontend/src/constants/StepFormConstants.ts
index bc741d688a..658fb82d58 100644
--- a/src/frontend/src/constants/StepFormConstants.ts
+++ b/src/frontend/src/constants/StepFormConstants.ts
@@ -25,10 +25,10 @@ export const createProjectSteps: ICreateProjectSteps[] = [
     name: 'Select Category',
   },
   {
-    url: '/data-extract',
+    url: '/map-features',
     step: 4,
     label: '04',
-    name: 'Data Extract',
+    name: 'Map Features',
   },
   {
     url: '/split-tasks',
diff --git a/src/frontend/src/constants/blockerUrl.ts b/src/frontend/src/constants/blockerUrl.ts
index 711389c716..bd3c62183d 100644
--- a/src/frontend/src/constants/blockerUrl.ts
+++ b/src/frontend/src/constants/blockerUrl.ts
@@ -1,2 +1,2 @@
-const pathNotToBlock = ['/select-category', '/data-extract', '/split-tasks', '/upload-area', '/create-project'];
+const pathNotToBlock = ['/select-category', '/map-features', '/split-tasks', '/upload-area', '/create-project'];
 export default pathNotToBlock;
diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx
index 7d9dfc4ef9..e7c415f5a5 100755
--- a/src/frontend/src/routes.jsx
+++ b/src/frontend/src/routes.jsx
@@ -164,7 +164,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/data-extract',
+        path: '/map-features',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>
diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx
index 253164eb9a..df6750ed24 100644
--- a/src/frontend/src/views/CreateNewProject.tsx
+++ b/src/frontend/src/views/CreateNewProject.tsx
@@ -43,7 +43,7 @@ const CreateNewProject = () => {
       case '/select-category':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 3 }));
         break;
-      case '/data-extract':
+      case '/map-features':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 4 }));
         break;
       case '/split-tasks':
@@ -77,7 +77,7 @@ const CreateNewProject = () => {
             setCustomFormFile={setCustomFormFile}
           />
         );
-      case '/data-extract':
+      case '/map-features':
         return (
           <DataExtract
             flag="create_project"