🪟🔧 Refactor ConnectorsView

[flash1293]

What

Fixes #20706

How

The following changes have been done:

• Remove styled component from and extend the indicator component so it can render invisible - this makes it easy for things to be aligned which have a leading optional indicator like in the connectors table
• Instead of rendering a custom string for custom connectors, use a badge like for alpha and beta connectors
• Show a loading indicator in the "Upgrade" button while a single connector is updating
• Do not show the loading indicator for connectors that don't actually update when hitting "Upgrade all" (only the ones that are actually upgradable at the moment)
• Remove styled components from different parts of the connectors table
• To prevent often occurring re-render of full table, introduce a context to pass down the loading state to each individual loading button
• Use standard components for the "Add custom connector" dialog
• Always show the "Upgrade all" button so the layout doesn't jump due to it

[lmossman]

A couple questions but nothing truly blocking. LGTM and seems to work well from local testing

[lmossman]

Why was this change made? And is it intentional that this change was only made to SourcesPage and not also to DestinationsPage?

Side note: it seems like the logic in those two components is almost exactly the same, so a lot of it could be moved into the ConnectorsView component, with props to differentiate between the source- or destination-specific methods. What do you think? Could also be done in a separate PR if you'd prefer - just thought I'd call it out here since we are already refactoring in this PR

[flash1293]

I meant to do the same change for the destination, thanks for catching this. This is done to prevent a full re-render of the table on state change of the feedback list. If onUpdateVersion changes, then renderColumns changes here

airbyte/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

Line 124 in fd91853

[allowUpdateConnectors, allowUploadCustomImage, onUpdateVersion]

which in turn means the columns object passed to the table changes here:

airbyte/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx

Line 151 in fd91853

const usedDefinitionColumns = useMemo(

which should be avoided (the docs say that the columns should be memoized: https://react-table-v7.tanstack.com/docs/api/useTable which means if they change reference it's pretty expensive)

[lmossman]

Just curious, why did you move the Formik outside of the Modal?