Wire in pagination to LabeledSelect and use for pods, secrets and configmaps

[richard-cox]

Blocked on #10781

Supersedes #10068

Summary

Contributes to #9964

Occurred changes and/or fixed issues

• LabelSelect now provides a way to optionally handle large number of resources by making paginated api requests
  • New LabelSelect mixin (this was already written pre composite change) handles pagination functionality
  • Mixin provides the hooks to LabelSelect to control and display pagination features
• Components that use LabelSelect and want to use pagination have two options
  • Easy Mode (Use new helper component ResourceLabelSelect)
    • ResourceLabelSelect is a wrapper around LabelSelect and takes the same base properties
    • It handles the harder things listed below
    • If the specific use cases needs to do more than just 'fetch all of a resource' then props can be supplied to override/interject it's pipelines
      • Some examples
        • the component wants the resources in the label select
        • The resources in the label select should be filtered in special ways (either for all resources or paginated resources)
        • different LabelSelect options should be used if the list is paginated
  • Harder Mode (Use LabelSelect directly)
    • gate on paginationUtils.isEnabled being ON (steve cache ff flag on, ui pagination on)
    • supply a function to LabelSelect which will, on demand from LabelSelect, fetch a page
      • This only handles the http request and nothing else
      • There is a helper function to make this easy to use
    • Components should still continue to support the existing functionality should
      • gate on paginationUtils.isEnabled being OFF (steve cache ff flag or ui pagination off)
      • supply an options collection to LabelSelect
• Places that have been updated to remove usages of findAll pod, secret and configmap
  • shell/chart/rancher-backup/S3.vue
    • Paginated Label Select - Used when selecting a secret when installing the backup chart
  • shell/components/form/SecretSelector.vue
    • Paginated Label Select - Used by logging product's providers to select a secret
  • shell/components/form/SimpleSecretSelector.vue
    • Paginated Label Select - Used by alert manager - config (in monitoring) to select a secret
  • shell/edit/cis.cattle.io.clusterscanbenchmark.vue
    • Paginated Label Select - Used by CIS Benmark - Editing benchmark to select a configmap
  • shell/edit/logging-flow/Match.vue
    • Logging - Editing a Flow - Matches - removed options for limiting to a specific container. Previously this involved fetching all pods and showing all their containers. There's no neat way to do this with pagination and decided the neatest path is just to remove the options

UX changes (after design review)

• The 'group' visuals have been improved and can now show an icon
• Note - Colours have not been changed as per design. These all work with generic colours that apply to the whole dashboard. Changing them specifically for this component would introduce tech debt. We should consider the component colour when making changes to all colours.

Technical notes summary

• There's two temp bools in shell/utils/pagination-utils.ts, TEMP_VAI_CACHE_MERGED and TEMP_PERF_ENABLED. These will be removed pre 2.9.0 when the steve cache is merged and we can just run on the FF and perf setting to enable/disable the features

Areas or cases that should be tested

With both performance pagination setting and feature flag off

• General use
  • LabelSelect should show values, allow the user to search for them with text and select one (or more if applicable)
• Specific cases to test
  • local cluster --> Cluster Tools --> Rancher Backup Install --> Next --> Use an S3-compatible object store --> Credential Secret (this is the affected component)
  • any cluster --> install CIS benchmark helm chart --> CIS Benchmark menu item --> Benchmark Versions --> Create --> Custom Benchmark ConfigMap (this is the affected component
  • any cluster --> install Logging helm chart --> Logging menu item --> Flows --> Create --> Matches tab --> Limit to specific container names should be empty, and accept any number of free text entries
  • any cluster --> install Logging helm chart --> Logging menu item --> Outputs --> Create --> <any type of Output --> Access --> Credentials from Secret should show secrets
  • any cluster --> install Monitoring and Alert Manager helm charts --> Monitoring menu item --> AlertmanagerConfigs --> Create one --> Edit it --> Add Receiver --> Slack --> Add Slack --> Secret with Slack Webhook urk should show secrets
• Selecting multiple options - Logging Product --> Flows --> Create --> Matches tab --> Limit to specific nodes
• Complex use case - Deployments --> create --> namespace drop down should continue to function as before

The above should be repeated with the performance pagination setting and feature flag on

Areas which could experience regressions

• Anywhere we show drop downs

Screenshot/Video

[richard-cox]

@codyrancher I updated given a recommendation from Neil to wrap some of the repeated / tricky code in a new component. Description's been updated, would you be able to take another look?