Create a levelbuilder-facing table of all code docs

[bethanyaconnor]

Second to last PR for the all code docs page (well, until I have to update it for Java). The code change to add this page (even with two PRs already split out) is over 1000 lines so I decided to split out the component that loads a table of code docs (this PR) as it's more complicated than the others. Apologies that this is still a large PR on its own.

This component loads a table of code docs, optionally filtered using dropdown selections. I chose 20 entries per page a bit arbitrarily but it feels good for the page. These docs then have a button that opens a new tab to edit, a button to clone to another programming environment (dialog added in #45285). The routes to clone and destroy a programming expression were added in #45174.get_filtered_expressions, which gets the programming expressions according to the filters, is a new route added in this PR.

Changing environment and page:

Screen.Recording.2022-03-22.at.11.08.29.AM.mov

Changing category:

Screen.Recording.2022-03-22.at.11.08.55.AM.mov

Deleting a programming expression:

Screen.Recording.2022-03-22.at.11.09.16.AM.mov

Links

jira
product spec

Testing story

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[jamescodeorg]

Generally looks great! I found it a bit hard to parse the ProgrammingExpressionsTable component at first, maybe some extra comments or splitting up the main render method might help a bit?

(It kind of bugs me that our javascript style is so "vertical" but that's a rant for another day.)

[jamescodeorg]

This might just be me, but I found these names a little confusing (since I didn't realize "select" referred to a select tag). I'm wondering if something like allProgrammingEnvironments and allCategories would be clearer? Up to you.

[jamescodeorg]

@jamescodeorg I tried using a reducer in df837a0 and I'm curious what you think. On one hand, it does move all the logic around the four entangled pieces of state into one place, which is nice. On the other hand, it didn't make sense to me to move all the state to the reducer so now the state is handled in two different ways. I could bring the rest of the state up into the reducer but that state is very simple.

I haven't used useReducer before and it doesn't look like it's been used in our codebase so I'm not sure what the conventions here are. It was easy to do (and a good leaning opportunity!) so if it isn't better, I'll just rebase it out.

Thanks for trying this out! Now that I see it, I think the previous code (not using useReducer) was a bit easier for me to follow but I am ok with either approach.

[bethanyaconnor]

Thanks for trying this out! Now that I see it, I think the previous code (not using useReducer) was a bit easier for me to follow but I am ok with either approach.

I think I agree, plus I'd prefer to keep this file consistent so I'll take it out.

[jamescodeorg]

Thanks for making all of the changes!