feat: enable allocation of restricted runs

[pwnage101]

ENT-9411

Two skeletons appear briefly while simulating a slow network connection. Note that the dropdown contains only one skeleton item despite ultimately displaying two runs in the following screenshot:

After the page fully loads, the skeleton states all disappear, and the number of courses (left side) jumps up from "(1) available date" to "(2) available dates".

Selecting the restricted run opens the assignment modal and displays the correct fixed price for the restricted run:

After assigning it to myself, I see the assignment appear in the assignments table:

[codecov]

Codecov Report

Attention: Patch coverage is 87.75510% with 6 lines in your changes missing coverage. Please review.

Project coverage is 85.78%. Comparing base (1a537e4) to head (9eda274).
Report is 3 commits behind head on master.

Files with missing lines	Patch %	Lines
src/data/services/EnterpriseCatalogApiServiceV2.js	37.50%	5 Missing ⚠️
src/index.jsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1359      +/-   ##
==========================================
- Coverage   85.78%   85.78%   -0.01%     
==========================================
  Files         604      606       +2     
  Lines       13273    13315      +42     
  Branches     2792     2762      -30     
==========================================
+ Hits        11386    11422      +36     
- Misses       1819     1825       +6     
  Partials       68       68              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adamstankiewicz]

Looking good; largely just some nits for consideration, and have one clarifying/curiosity question around the Skeleton loading states rendering before coming back to leave a 👍

[adamstankiewicz]

[curious/suggestion] Might be worth using Dropdown.Item here to avoid hardcoding class names like dropdown-item (which could, in theory, eventually change in the underlying Paragon component).

I'm assuming it wasn't used since out-of-the-box, the Skeleton doesn't seem to appear in the Dropdown.Item. This seems due to the display: flex derived from the pgn__dropdown-item class name.

Consider trying the following to override the pgn__dropdown-item class name with d-block to make it display: block instead.

<Dropdown.Item className="d-block" data-testid="assignment-dropdown-item-skeleton">
  <Skeleton />
</Dropdown.Item>

See demo in Paragon Playground.

[pwnage101]

I originally tried that without the className="d-block", but it didn't work so I gave up on Dropdown.Item. How did you know d-block fixes it?

[brobro10000]

Approved to unblock 👍🏽 , minor nits