After deploying efs storage, product catalog frontend throws 400 BadRequest

[zechariahks]

I deployed the app using the steps mentioned in the guide. Initial deployment works well and I was able to browse product catalog UI through ELB endpoint without any issues. But, after adding efs storage, while attempting to add a product, product catalog UI loads forever and throws 400 Badrequest error. Below is the error log from the frontend pod. Am I missing any steps?

 ............
     url: '',
      method: null,
      statusCode: 400,
      statusMessage: 'BAD REQUEST',
      client: [Socket],
      _consuming: false,
      _dumped: false,
      req: [Circular *1],
      responseUrl: 'http://prodcatalog.workshop:5000/products/',
      redirects: [],

    }
  },
  response: {
    status: 400,
    statusText: 'BAD REQUEST',
    headers: {
      'content-type': 'application/json',
      'content-length': '142',
      'x-amzn-trace-id': 'Root=1-6621ab25-b3af8bb3c543e15333aee057',
      'access-control-allow-origin': '*',
      server: 'Werkzeug/1.0.1 Python/3.9.6',
      date: 'Thu, 18 Apr 2024 23:22:13 GMT'
    },
    config: {
      url: 'http://prodcatalog.workshop:5000/products/',
      method: 'get',
      headers: [Object],
      transformRequest: [Array],
      socket: [Socket],
      _header: 'GET /products/ HTTP/1.1\r\n' +
        'Accept: application/json, text/plain, */*\r\n' +
        'User-Agent: axios/0.21.1\r\n' +
        'X-Amzn-Trace-Id: Root=1-6621ab26-8352871e19ebe2e6c7766f67;Parent=f09b2f2e6d7042dd;Sampled=0\r\n' +
        'Host: prodcatalog.workshop:5000\r\n' +
        'Connection: close\r\n' +
        '\r\n',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: noopPendingOutput],
      agent: [Agent],
      socketPath: undefined,
      method: 'GET',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/products/',
      _ended: true,
      res: [IncomingMessage],
There was error in Product Catalog get call from frontend
 ............

Reproduction Steps

1. Deploy the app using steps mentioned here
2. Add the EFS storage using the steps mentioned here. It is basically using the
3. After efs is added, the guide says, we could add the products in the product catalog UI. Issue is after pressing add button, the page loads forever.

Now lets add a product Mike with ID as 1 to the Product Catalog from the UI, it will show below product added.

[zechariahks]

Update: I was able to debug the issue and found the fix. While testing the front end app, if we provide any product name with spaces like "Mike Brown", the app returns 400 BadRequest and forever loads. If we give a single word without spaces it works. Looks like read_file() function in the product_catalog (app_efs.py) service is expecting two item array (key,val). If we pass anything with spaces in "Product Name" column, app fails at reading that line and throws 400.

def read_file():
    flask_app.logger.info(filepath)
    if not os.path.exists(filepath):
        open(filepath, 'w').close()
    else:
        with open(filepath, "r") as f:
            for line in f:
               (key, val) = line.split()
               list_of_names[int(key)] = val