Remove old js components: Spinner, Alert

[antgamdia]

Description of the change

This PR is following up #6550 (and requires it to get merged first). In this one, the focus is on:

• Remove the Spinner old js component in favor of CdsProgressCircle.
• Replace the old js Alert with the AlertGroup component we already had. It is just a wrapper with some handy configuration of the clarity components.
  • By default, they are now closable. Sometimes we have some transient errors and I think we can just defer to the user the decision on whether or not to close them.
• Add a "Cancel" button in a modal (new ns) to keep UX consistency.
• Replace the remaining plain <button> (we weren't able to back in time due to an upstream bug).

Again, this PR is pretty extensive (sorry!)

Benefits

Again, let me show some visual examples :) (the error messages like "error.message" are just placeholders while developing, they are removed in the PR).

Initial emptyKubeapps alert

Typical error alert

Error with action (in accordance with the clarity guidelines)

Error with action (another example)

New update available

Operators warning

General error (note the proper margins now)

Repos in !kubeappsCluster

Add repo error

Error in a modal (note the margins again)

Possible drawbacks

N/A (hope any!)

Applicable issues

Related to #6563

Additional information

After this PR there are just two remaining js components: Table and Card. I will work on them soon!

[netlify]

✅ Deploy Preview for kubeapps-dev canceled.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4dc17ab
🔍 Latest deploy log	https://app.netlify.com/sites/kubeapps-dev/deploys/64cce219f7b77100082a974d

[antgamdia]

Additionally, I have collected all the messages we currently have. I think we should uniformize them at some point ("unable to...", "an error occurred...", "an error occurred while....", "there is a problem..."). Find below the list, but here is a summary of the main occurrences:

• An error occurred while ACTION(creating, deleting, fetching, updating) SOMETHING: demo message.
• An error occurred: demo message.
• Unable to ACTION(delete, fetch, load, retrieve) SOMETHING: demo message.
• There is a problem with this package: demo message.
• demo message
• Operator-related:
  • Found an error updating the instance: demo message.
  • It's not possible to install a namespaced operator in the "operators" namespace.
  • Operator OPERATOR_NAME doesn't define a valid channel. This is needed to extract required info.
  • Resource RESOURCE_NAME not found
  • The CRD "CRD_NAME" was not found in the definition of "CSV_NAME".
  • The Operator OPERATOR_NAME doesn't define a valid channel. This is needed to extract required info.

Normalized unique instances

An error occurred while creating the instance: demo message.
An error occurred while creating the operator OPERATOR_NAME: demo message.
An error occurred while creating the repository: demo message.
An error occurred while deleting the repository: demo message.
An error occurred while fetching Operators: demo message.
An error occurred while fetching repositories: demo message.
An error occurred while fetching the ClusterServiceVersion: demo message.
An error occurred while fetching the Operator OPERATOR_NAME: demo message.
An error occurred while fetching the application: demo message.
An error occurred while fetching the catalog: demo message.
An error occurred while fetching the instance: demo message.
An error occurred while fetching the operator OPERATOR_NAME: demo message.
An error occurred while fetching the repository: demo message.
An error occurred while updating the repository: demo message.
An error occurred: demo message.
Found an error updating the instance: demo message.
It's not possible to install a namespaced operator in the "operators" namespace.
Operator OPERATOR_NAME doesn't define a valid channel. This is needed to extract required info.
Resource RESOURCE_NAME not found
The CRD "CRD_NAME" was not found in the definition of "CSV_NAME".
The Operator OPERATOR_NAME doesn't define a valid channel. This is needed to extract required info.
There is a problem with this package: demo message.
Unable to delete the application. Received: demo message.
Unable to fetch the package "PACKAGE_ID (PACKAGE_VERSION)": demo message.
Unable to fetch the package's README: demo message.
Unable to fetch the package: demo message.
Unable to load the Kubeapps configuration: demo message.
Unable to retrieve API info: demo message.
Unable to retrieve the CustomResourceDefinition for RESOURCE_KIND in CSV_METADATA_NAME
Unable to retrieve the current app: demo message.
Unable to retrieve the package: demo message.
demo message
demo message.

Raw list

Deploy applications on your Kubernetes cluster with a single click.
Unable to retrieve the CustomResourceDefinition for ${resource.kind} in ${csv.metadata.name}
Unable to retrieve the current app: {error.message}.
An error occurred while fetching the application: {error?.message}.
There is a problem with this package: {error["message"]}.
Unable to delete the application. Received: {error["message"]}.
An error occurred: {error["message"]}.
There is a problem with this package: {error["message"]}.
Unable to delete the application. Received: {error["message"]}.
An error occurred: {error["message"]}.
An error occurred while fetching the catalog: {error.message}.
An error occurred while creating the repository: {createError.message}.
An error occurred while updating the repository: {updateError.message}.
An error occurred while deleting the repository: {deleteError.message}.
An error occurred while fetching the repository: {fetchError.message}.
Package Repositories can't be managed from this cluster. <br /> <br /> Currently, the <b> Package Repositories must be managed from the default cluster </b>{" "} (the one on which Kubeapps has been installed). <br /> <br /> Any <i>global</i> Package Repository defined in the default cluster can be later used across any target cluster. <br /> However, <i>namespaced</i> Package Repositories can only be used on the default cluster.
An error occurred while fetching repositories: {errors.fetch.message}.
An error occurred while deleting the repository: {errors.delete.message}.
An error occurred while deleting the repository: {errors.delete.message}.
Unable to load the {kubeappsTitle} configuration: {error?.message}.
There is a problem with this package: {error["message"]}.
Unable to delete the application. Received: {error["message"]}.
An error occurred: {error["message"]}.
Unable to retrieve the package: {(error as FetchError)?.message}.
An error occurred: {error.message}.
Unable to fetch the package "{decodeURIComponent(packageId)} ({packageVersion})":{" "}{error.message}.
An error occurred: {error.error.message}.
An error occurred: {error.message}.
Unable to retrieve API info: {kindsError.message}.
An error occurred while fetching the instance: {errors.fetch.message}.
An error occurred: {error.message}.
The CRD "{crdName}" was not found in the definition of "{csvName}".
An error occurred while fetching the ClusterServiceVersion: {fetchError.message}.
An error occurred while creating the instance: {createError.message}.
{parseError.message}.
Resource {resourceName} not found
An error occurred while fetching the ClusterServiceVersion: {fetchError.message}.
Found an error updating the instance: {updateError.message}.
Operators integration is under heavy development and currently in beta state. If you find an issue, please{" "} <a target="_blank" rel="noopener noreferrer" href="https://github.com/vmware-tanzu/kubeapps/issues/new" > report it here </a> .
An error occurred while fetching Operators: {error.message}.
An error occurred while fetching the operator {operatorName}: {errors.fetch.message}.
An error occurred while creating the operator {operatorName}: {errors.create.message}.
The Operator {operatorName} doesn't define a valid channel. This is needed to extract required info.
It's not possible to install a namespaced operator in the "operators" namespace.
Operator {operator.metadata.name} doesn't define a valid channel. This is needed to extract required info.
An error occurred while fetching the Operator {operatorName}: {error.message}.
Operator {operatorName} doesn't define a valid channel. This is needed to extract required info.
Unable to fetch the package's README: {error}.
Unable to fetch the package: {selectedPackage.error.message}.
An error occurred: {fetchError.message}.
No repositories found. <br /> Manage your repositories in Kubeapps by visiting the{" "} <Link to={url.app.config.pkgrepositories(cluster, namespace)}> Package Repositories configuration </Link>{" "} page.
An error occurred: {packageError.message}.
An error occurred: {error?.message}.
{message}

[absoludity]

Again, this PR is pretty extensive (sorry!)

No problem - thanks for the cleanups! Great to be removing the old non-TS code.