Render plants table in Harvest form using a `PicklistBase` component

[braughtg]

Feature

Currently the Harvest form uses a plain HTML table (styled with a few rules inherited from farmOS). This table should be converted to be a PicklistBase component.

Existing E2E tests will need to be adapted to check functionality with the PicklistBase rather than the HTML table.

Rationale

The PicklistBase component will have styling and behavior that is more consistent with the other FarmData2 forms that use tables (e.g. Transplanting, Soil Disturbance).

Alternatives

See FarmData2#280 for the option to create a HarvestablePlantPicklist component instead. It may be easiest to complete this issue first, then factor the necessary functionality out of the Harvest form into the new HarvestPlantPicklist component.

Additional context

To learn more about the PicklistBase component:

1. See the "FD2 Examples" -> "Components" -> "PicklistBase" page in farmOS.
   • Notice the one option for the units prop. This option allows only one row to be selected, which is what you will want for the Harvest form.
2. Review the documentation for the PicklistBase component.
   • Be sure to rebuild the documentation as it may have been updated since the last time you rebuilt it.
   • You'll want to understand the format of the data for the:
     • columns prop
     • labels prop
     • rows prop
   • You'll need to know about the data-cy properties to update the E2E tests to use PicklistBase in place of the HTML table.

The E2E tests can be run with: test.bash --fd2 --live --e2e --glob=modules/farm_fd2/**/harvest/*.e2e.cy.js --gui

[benden1106]

I would like to work on this with @robertli149

[robertli149]

Im working on this one with @benden1106