Add Api Unavailable Message #92

[eddiesarevalo]

🗒️ Summary

-Added a message that appears at the top of the app if the app can not connect to the api. -A test is sent on startup of the app. -Every time a call is made to the api the api is tested. -The message has a link to the pds-operator page.

⚙️ Test Data and/or Report

Testing on start up: Start up the app using npm start Connect to pds-dev3 and refresh the app. There will not be an error at the top. Disconnect from pds-dev3 then refresh the app. There will be an error message at the top.

During Run: Running search, creation, reservation while disconnected from pds-dev3 will show the error message at the top. Being connected will not show the error message.

Click on the PDS Operator link to make sure it links to the PDS operator page.

On Build: 1) Build the app using npm run build 2) Place the built files into a server. For example use python -m SimpleHTTPServer 9001 Then go to localhost:9001 the app should not show any misplaced styling.

♻️ Related Issues

• fixes #92
• fixes #132
• fixes #144

[eddiesarevalo]

@tloubrieu-jpl Good catch! I wasn't setting the error message off when a successful connection was made. I was only setting if off on a successful search.

[eddiesarevalo]

@tloubrieu-jpl I applied the fix for the odd styling bug after the app is built. It was occuring because the theme provider was missing. So every component would interfere with each other's styling.

I also added some missing styling for the call to action buttons on the home menu.

The pds app bar has also been removed. Since it should be deployed separately from the doi-ui rather then be embedded into it.

I added the testing instructions to the pull request description.