Hackathon24

[mmiller42]

Summary of changes

The app should continue to work without clearing localStorage, but a few things might not function quite as intended.

• Added routing ~~via react-router-dom~~ built-in; the new basename prop passed to the BadMagic component defines the Bad Magic URL root
• Highlighted active item in nav sidebar
• JSON keys are in alphabetical order
• Syntax highlighting is applied to code blocks in Markdown docs
• Search text is persisted to localStorage
• Added a button to clear history (both at an individual endpoint level as well as globally)
• Fixed all the eslint warnings
• Created a config provider to store the given BadMagicProps
• Fixed various bugs where the incorrect route could be "matched" for a HistoricResponse (uniqueness requires workspace + path + http method + endpoint name)
• Added deprecated label to the nav sidebar
• Routes are sorted in nav somewhat logically

Testing

via example project

To test with the included example project, follow the instructions in README.md, i.e.:

1. Run yarn && yarn link in the root directory
2. Run yarn && yarn link badmagic in the ./example directory
   1. Note that I had to use a different nodejs version because of craco, if you have issues inside the example directory, run asdf install && npm i -g yarn
3. Run yarn in the ./example-api directory
4. In the root directory, ./example directory, and ./example-api directory, run yarn start

in CMW

You should also be able to test inside of CMW.

1. First, verify you have not installed yarn via homebrew, or it'll cause issues: which yarn
   1. If so, brew uninstall yarn
   2. Since asdf should be set up to read the .tool-versions file in your working directory, cd into badmagic, run asdf install if necessary, and install yarn via npm i -g yarn
2. cd into the root directory of badmagic. Run yarn -v and verify that you are running on 1.x (i.e. 1.22.22)
3. Run yarn && yarn build && yarn pack
4. The yarn pack command should return a path to the generated tarball file; copy it to your clipboard
5. cd into the root directory of control.smartrent.com. Run yarn -v and verify that the yarn binary is being used from the project (i.e. 3.2.0-rc.13)
6. Run yarn add badmagic@file:<paste clipboard>, e.g. yarn add badmagic@/Users/yourname/code/badmagic/badmagic-v0.0.39.tgz
7. Open assets/js/react/bundles/devtools/BadMagicClient.tsx. Add the prop basename="/dev/api" to the <BadMagic /> component returned by BadMagicClient

Markdown CSS

I made some slight adjustments to the Markdown CSS file as well, though due to the fact that the syntax highlighter tries to automatically infer the language even without a language tag, I don't think you'll actually see the CSS changes because they were only affecting some unhighlighted code elements. Regardless, if you want to also test it with the latest CSS file:

1. Make sure you've run yarn build inside of the badmagic repository root so that markdown.min.css is generated and put inside of ./example/public/
2. Make sure the example UI server is running, i.e. cd ./example && yarn start and verify the example UI loads at http://localhost:3000/dev/api
   1. We only need this because the example UI server also serves the stylesheet
3. In CMW, open apps/control_room/lib/control_room_web/templates/development/react/badmagic.html.eex. Replace the unpkg URL for BadMagic's stylesheet with http://localhost:3000/dev/api/markdown.min.css
4. Open apps/control_room/lib/control_room_web/plugs/secure_browser_headers.ex. Find the "style-src" list and append the "http://localhost:3000" string to the list of allowed domains.
5. Run CMW as normal!

Most of the features are also testable in the demo app. An API server is included as well.