Use project type labels from projectTypes.ts

manager-dashboard/.env.example

@@ -10,3 +10,6 @@ REACT_APP_FIREBASE_STORAGE_BUCKET=
 REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
 REACT_APP_FIREBASE_APP_ID=
 REACT_APP_COMMUNITY_DASHBOARD_URL=
+
+# any value except "webapp" will result in default mapswipe project config
+REACT_APP_PROJECT_CONFIG_NAME="mapswipe"

manager-dashboard/app/Base/configs/projectTypes.ts

@@ -18,14 +18,14 @@ const mapswipeProjectTypeOptions: {
     { value: PROJECT_TYPE_COMPLETENESS, label: 'Completeness' },
 ];
 
-const crowdmapProjectTypeOptions: {
+const webappProjectTypeOptions: {
     value: ProjectType;
     label: string;
 }[] = [
-    { value: PROJECT_TYPE_BUILD_AREA, label: 'Build Area' },
-    { value: PROJECT_TYPE_COMPLETENESS, label: 'Completeness' },
+    { value: PROJECT_TYPE_BUILD_AREA, label: 'Tile Classification' },
+    { value: PROJECT_TYPE_COMPLETENESS, label: 'Comparison' },
 ];
 
-const projectTypeOptions = PROJECT_CONFIG_NAME === 'crowdmap' ? crowdmapProjectTypeOptions : mapswipeProjectTypeOptions;
+const projectTypeOptions = PROJECT_CONFIG_NAME === 'webapp' ? webappProjectTypeOptions : mapswipeProjectTypeOptions;
 
 export default projectTypeOptions;

manager-dashboard/app/components/TutorialList/index.tsx

@@ -14,10 +14,8 @@ import usePagination from '#hooks/usePagination';
 import PendingMessage from '#components/PendingMessage';
 import Pager from '#components/Pager';
 import { rankedSearchOnList } from '#components/SelectInput/utils';
-import {
-    ProjectType,
-    projectTypeLabelMap,
-} from '#utils/common';
+import { ProjectType } from '#utils/common';
+import projectTypeOptions from '#base/configs/projectTypes';
 
 import styles from './styles.css';
 
@@ -101,7 +99,10 @@ function TutorialList(props: Props) {
                                     </div>
                                 </div>
                                 <div className={styles.lookFor}>
-                                    {projectTypeLabelMap[tutorial.projectType]}
+                                    {projectTypeOptions.find((projType: {
+                                        value: ProjectType;
+                                        label: string;
+                                    }) => projType.value === tutorial.projectType)?.label}
                                 </div>
                             </div>
                         );

manager-dashboard/app/utils/common.ts

@@ -26,12 +26,3 @@ export const PROJECT_TYPE_CHANGE_DETECTION = 3;
 export const PROJECT_TYPE_COMPLETENESS = 4;
 
 export type ProjectType = 1 | 2 | 3 | 4;
-
-export const projectTypeLabelMap: {
-    [key in ProjectType]: string
-} = {
-    [PROJECT_TYPE_BUILD_AREA]: 'Build Area',
-    [PROJECT_TYPE_FOOTPRINT]: 'Footprint',
-    [PROJECT_TYPE_CHANGE_DETECTION]: 'Change Detection',
-    [PROJECT_TYPE_COMPLETENESS]: 'Completeness',
-};

manager-dashboard/app/views/Projects/ProjectDetails/index.tsx

@@ -23,10 +23,10 @@ import {
     labelSelector,
     valueSelector,
     ProjectType,
-    projectTypeLabelMap,
     ProjectInputType,
     ProjectStatus,
 } from '#utils/common';
+import projectTypeOptions from '#base/configs/projectTypes';
 
 import styles from './styles.css';
 
@@ -184,6 +184,11 @@ function ProjectDetails(props: Props) {
 
     const [title, org] = data.name.split('\n');
 
+    const projectTypeLabel = projectTypeOptions.find((projType: {
+        value: ProjectType;
+        label: string;
+    }) => projType.value === data.projectType)?.label;
+
     /* This is probably due to a faulty dataset in the dev instance of firebase that
      * one of the active private project doesn't have teamId and it's producing inconsistent
      * result.Let's overcome that adding following check for now.
@@ -221,7 +226,7 @@ function ProjectDetails(props: Props) {
                             Type:
                         </div>
                         <div className={styles.value}>
-                            {projectTypeLabelMap[data.projectType]}
+                            {projectTypeLabel}
                         </div>
                     </div>
                     {detailsShown && (