Rethink content with tabs

[ricardovdheijden]

Currently the handling of the tabs and its content are 2 separate things in the code. For better readability and improved developer experience it would be nice to have these 2 parts combined in 1 component that handles the rendering the tabs and its content together

As an example: https://github.com/workfloworchestrator/orchestrator-ui-library/blob/main/packages/orchestrator-ui-components/src/components/WfoSubscription/WfoSubscription.tsx#L91

Every page that contains tabs has logic to store the selected tab and in a different part a bunch of conditional render sections in the render part of a component to toggle the content.

   return <>
            ....
                        {selectedTab ===
                            SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB && (
                            <WfoSubscriptionDetailTree
                                productBlockInstances={
                                    subscriptionDetail.productBlockInstances
                                }
                                subscriptionId={subscriptionId}
                            />
                        )}
                        {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
                            <WfoSubscriptionGeneral
                                subscriptionDetail={subscriptionDetail}
                                isFetching={isFetching}
                            />
                        )}
             .....
  </>