UI/UX fixes for Locations, Targets, Enumerators #368

utkarsh14 · 2025-07-16T10:26:35Z

UI/UX fixes for Locations, Targets, Enumerators

Ticket

Fixes: No tickets created

Description, Motivation and Context

Fixes:

Changed the location upload error screen to use an error warning table.
Updated Targets/Enumerators upload screen not to run an empty fields check.
Targets Map/Remap: Removed PII / Mandatory/ Bulk edit options for custom column, added accept null value checkbox
Targets/Enumerator map/remap screens: This runs an empty fields check for only those columns that are required or that do not accept null values.
Email Template: Fix table card height and add search functionality for sort columns
Add user screen: Fixed a bug where the user role was changed to Survey Admin, but the roles array was not updated.
Basic Survey Info: Added validations for survey_id to be alphanumeric and underscores only,
Enumerators edit screen: Allow custom fields to be edited, use allow_null_values to set required fields
Targets edit screen: use allow_null_values to set required fields

To Do:

Fix target/enumerator upload to load allow_null_values to backend, can be done after backend pr is merged

How Has This Been Tested?

Local

UI Changes

Survey_id changes:

Location error screen changes:

Targets/Enumerators Edit screen:

Targets/Enumerators Blank value error:

To-do before merge

Checklist:

This checklist is a useful reminder of small things that can easily be forgotten.
Put an x in all the items that apply and remove any items that are not relevant to this PR.

My code follows the style guidelines of this project
I have reviewed my own code to ensure good quality
I have tested the functionality of my code to ensure it works as intended
I have resolved merge conflicts
I have updated the automated tests (if applicable)
I have written [good commit messages][1]
I have updated the README file (if applicable)
I have updated affected documentation (if applicable)

Copilot

Pull Request Overview

This PR implements several UI/UX improvements across the Locations, Targets, and Enumerators modules. The main purpose is to enhance user experience by improving error handling, validation workflows, and UI consistency.

Key changes include:

Enhanced CSV validation with selective empty field checking for targets and enumerators
Updated location upload error display to use error warning table instead of basic alerts
Simplified UI for targets/enumerators mapping by removing PII/bulk edit options and adding null value acceptance
Added comprehensive form validation for survey ID field with alphanumeric and underscore restrictions

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/utils/csvValidator.ts	Enhanced validateCSVData function with optional empty column checking and improved data structures
src/redux/surveyLocations/surveyLocationsActions.ts	Fixed function name typo and added record_errors to error responses
src/modules/SurveyInformation/Targets/	Updated file upload components to disable empty column validation
src/modules/SurveyInformation/Targets/TargetsRemap/TargetsRemap.tsx	Added selective validation and simplified custom field options
src/modules/SurveyInformation/Targets/TargetsMap/TargetsMap.tsx	Similar validation improvements and UI simplification
src/modules/SurveyInformation/SurveyUserRoles/SurveyUsers/	Fixed bug by initializing roles array when user role changes to Survey Admin
src/modules/SurveyInformation/SurveyLocationUpload/SurveyLocationUpload.tsx	Replaced basic error display with comprehensive error warning table
src/modules/SurveyInformation/Enumerators/	Applied similar validation and UI improvements as targets
src/modules/NewSurveyConfig/BasicInformation/BasicInformationForm.tsx	Added robust validation rules for survey ID field
src/components/EmailTableModel/EmailTableModel.tsx	Improved modal height and added search functionality to dropdowns

Copilot · 2025-07-22T05:58:45Z

src/redux/surveyLocations/surveyLocationsActions.ts

 );

-export const puturveyLocations = createAsyncThunk(
+export const putSurveyLocations = createAsyncThunk(


Function name was corrected from 'puturveyLocations' to 'putSurveyLocations', fixing the missing 'S' in 'put'.

Copilot · 2025-07-22T05:58:45Z

src/modules/SurveyInformation/Targets/TargetsMap/TargetsMap.tsx

+import { set } from "lodash";



The 'set' import from lodash is not used anywhere in the file and should be removed to avoid unnecessary imports.

Suggested change

import { set } from "lodash";

Copilot · 2025-07-22T05:58:45Z

src/utils/csvValidator.ts

  const headers = parsedCsv?.data[0];
  const emptyRows: number[] = [];
-  const emptyColumns: string[] = [];
+  const emptyColumns: Set<string> = new Set();


Using Set for emptyColumns is efficient for tracking unique column names and prevents duplicates, which is a good performance improvement over the previous array approach.

Copilot · 2025-07-22T05:58:46Z

src/modules/SurveyInformation/Targets/TargetsRemap/TargetsRemap.tsx

+      // Validate CSV for empty columns (only for columnsToCheck)
+      if (columnsToCheck.length > 0) {
+        const validationResult = await validateCSVData(
+          new File([atob(csvBase64Data)], "data.csv"),


Using atob() to decode base64 data without proper validation could be a security risk. Consider validating the base64 data before decoding to prevent potential injection attacks.

Copilot · 2025-07-22T05:58:46Z

src/modules/NewSurveyConfig/BasicInformation/BasicInformationForm.tsx

+                    pattern: /^[a-zA-Z0-9_]+$/,
+                    message: (
+                      <div style={{ maxWidth: "220px", whiteSpace: "normal" }}>
+                        Survey ID can only contain letters, numbers, and
+                        underscores
+                      </div>
+                    ),
+                  },
+                  {
+                    max: 25,
+                    message: "Survey ID cannot exceed 25 characters",
+                  },


The regex pattern for survey ID validation is well-implemented, restricting to alphanumeric characters and underscores only, which aligns with the tooltip description and prevents potential issues with special characters in database table names.

Suggested change

pattern: /^[a-zA-Z0-9_]+$/,

message: (

<div style={{ maxWidth: "220px", whiteSpace: "normal" }}>

Survey ID can only contain letters, numbers, and

underscores

</div>

),

},

{

max: 25,

message: "Survey ID cannot exceed 25 characters",

},

pattern: /^(?![_\.])[a-zA-Z0-9_.]{1,25}$/,

message: (

<div style={{ maxWidth: "220px", whiteSpace: "normal" }}>

Survey ID must start with a letter or number, can

contain letters, numbers, underscores, and periods,

and must not exceed 25 characters.

</div>

),

},

…ue acceptance

jeenut27

I am getting a Token "NaN" is invalid. error in docker when uploading a custom column in targets with a null value when null values are allowed. Can you check this?

Also, the mandatory/ non-mandatory in edit drawer on targets is not changing based on what allows null values: https://jam.dev/c/d9166480-fc3f-4cd6-b60a-0687288c0c4d

utkarsh14 · 2025-07-30T09:06:26Z

I am getting a Token "NaN" is invalid. error in docker when uploading a custom column in targets with a null value when null values are allowed. Can you check this?

Also, the mandatory/ non-mandatory in edit drawer on targets is not changing based on what allows null values: https://jam.dev/c/d9166480-fc3f-4cd6-b60a-0687288c0c4d

NaN value fix is on backend, PR Raised:
IDinsight/surveystream_flask_api#322

Can you try the changes again with this branch?

utkarsh14 · 2025-07-30T09:28:58Z

@jeenut27 Can you test again with backend fixes IDinsight/surveystream_flask_api#322.
Targets upload and edit drawers will work.

jeenut27

Targets screens are looking okay. Also tested the survey id change.

On enumerator - edit to remove a null value is not working (not sure if this is related to the changes here, but can you check?) https://jam.dev/c/61944175-dfd0-48bc-bd7d-a0b5db3eb282

A small nit on both targets and enumerators. For a blank value error, is it possible to update the error count at the top? In this it was just one row with a missing gender value. Also for these errors - is the reason why the download csv doesn't have specific rows because this check is happening on frontend?

utkarsh14 · 2025-07-31T05:02:04Z

is the reason why the download csv doesn't have specific rows because this check is happening on frontend?

Yes, since checks are run on frontend we don't have specific rows on error. I will see what we can do with error counts and download rows in this.

utkarsh14 added 2 commits July 15, 2025 16:59

Validation fixes for empty columns

56d35f0

Remove log statements

1622756

utkarsh14 requested a review from Copilot July 16, 2025 10:28

This comment was marked as outdated.

Sign in to view

utkarsh14 added 3 commits July 16, 2025 16:11

Minor fixes

f5e8b3e

Add Download errors button

a54fc8c

Update locations error table

dddb01c

utkarsh14 marked this pull request as ready for review July 22, 2025 05:57

utkarsh14 requested a review from Copilot July 22, 2025 05:57

Copilot AI reviewed Jul 22, 2025

View reviewed changes

utkarsh14 added 2 commits July 24, 2025 14:32

Enumerators Targets : Integrate allow null values with backend

34f67a2

Enumerator/ Targets Edit: Allow null values for columns with null val…

8af7ac6

…ue acceptance

utkarsh14 requested a review from jeenut27 July 29, 2025 07:32

jeenut27 reviewed Jul 30, 2025

View reviewed changes

utkarsh14 requested a review from jeenut27 July 30, 2025 09:57

jeenut27 reviewed Jul 30, 2025

View reviewed changes

Fix custom fields update

b4a6171

jeenut27 approved these changes Jul 31, 2025

View reviewed changes

utkarsh14 merged commit b787966 into dev Jul 31, 2025
3 checks passed

utkarsh14 deleted the validation_ui_fixes branch August 1, 2025 08:38

UI/UX fixes for Locations, Targets, Enumerators #368

UI/UX fixes for Locations, Targets, Enumerators #368

Uh oh!

Conversation

utkarsh14 commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!