OCLOMRS-958:Errors from the backend should marked the field that caused the error

[jwnasambu]

JIRA TICKET NAME:

Errors from the backend should marked the field that caused the error

Summary:

[ibacher]

This is starting to shape up quite nicely I think. We still need to modify getPrettyError() here to replace errors["__all__"] with errors["__detail__"] and then test and ensure this works.

[ibacher]

I forgot about these bits. This should be replaced with something like:

let errorMsg = errorMsgResponse(response);

const errorMessage =
  response?.data || response
    ? STATUS_CODES_TO_MESSAGES[response.status] || errorMsg
    : errorMsg["__detail__"];

[ibacher]

Alright... that was a silly suggestion.

Instead, let's change errorMsgResponse() to look like this:

export function errorMsgResponse(response: AxiosResponse) {
  const errorMsgResponse: {[key: string]: string} = {
    "__detail__": "Action could not be completed. Please retry."
  };

  if (response.data && Object.prototype.hasOwnProperty.call(response.data, "detail")) { 
    errorMsgResponse["__detail__"] = response.data.detail;
  } else if (response.status in STATUS_CODES_TO_MESSAGES) {
    errorMsgResponse["__detail__"] = STATUS_CODES_TO_MESSAGES[response.status];
  }
  
  for (let key in response.data) {
    if (key === "__detail__") continue;
    errorMsgResponse[key] =
        Array.isArray(response.data[key])
          ? response.data[key].join(",")
          : response.data[key]
    } 
    
  return errorMsgResponse;
};

This also means hunting out the places where we call errorMsgResponse() and ensure that we cast the argument we're returning to an AxiosResponse (it should always be this), like so:

const response: AxiosResponse = error.response;

[jwnasambu]

Thanks @ibacher let me do it right a way

[ibacher]

@jwnasambu So the second part of this is to just eliminate anything that looks like this:

const errorMessage =
  response?.data || response
    ? STATUS_CODES_TO_MESSAGES[response.status] || errorMsg
    : errorMsg["__detail__"];

From the code base... actually anything that processes the errMsg after it's returned from errorMsgResponse(Response). The idea here is that that processing will be done on the actual page itself.

[jwnasambu]

@ibacher thanks for the clear explanation though it seems I had eliminated that part already!

[jwnasambu]

@ibacher am sorry I have just seen that part and other proposed changes. Kindly let me fix and push the changes right away.

[ibacher]

Already, so, to resolve the test errors we're getting, we need to actually change the tests in src/redux/__test__/utils.test.ts to reflect the new reality (this is fine and an expected part of this work).

Basically, what we need to do is change this line from:

expect(errorMsgResponse(response)).toEqual(errorMsgs[error])

to:

expect(errorMsgResponse(response)["name"]).toEqual(errorMsgs[error])

[ibacher]

I missed this before... this return errorMsgResponse should be outside of this loop, i.e., the last line of the function before the closing }.

[ibacher]

Hopefully those are the last little bits to get this building correctly.

[ibacher]

Suggested change

	}
	return errorMsgResponse;
	};
	}
	return errorMsgResponse;
	};

[ibacher]

Suggested change

	const errorMessage =
	const errorMessage: string | undefined =

[jwnasambu]

@hadijahkyampeire Kindly open this PR we were still making some changes on it with Ian.

[hadijahkyampeire]

@jwnasambu I am sorry but I am unable to reopen it, its repository was deleted you will need to open a new PR.

[jwnasambu]

@ibacher should I open a new PR or the PR can be re-opened again? Thanks for your help.

[ibacher]

@jwnasambu If you have a local copy of your OCLOMRS-958 branch, you should be able to push it to GitHub. Right now, that branch doesn't exist on your GitHub repo, which is why this can't be reopened.