Aiven-Open / Aiven-Open/klaw

refactor(coral): Add a shared `ServerErrorAlert` component

Offen
#1,502 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Frontend good first issue Housekeeping
Vorherrschende Sprache
Java
Sterne
195
Forks
77
Ø Merge
8 T. 9 Std.
Gemergte PRs (30 T.)
1

Beschreibung

# What happened?

We're using this pattern often in Coral:

```


{ parseErrorMsg(clusterDetailsError) }

```

Sometimes, we also use additional text here:

```


<>There was an error while loading cluster details:
{ parseErrorMsg(clusterDetailsError) }

````

`parseErrorMessage` is a function we use to parse the error messages that we get from our backend. (see: https://github.com/aiven/klaw/blob/main/coral/src/services/mutation-utils.ts)

## What could be improved

There are two things we can do to refactor this:

1) `parseErrorMsg` should be called `parseErrorMessage` to be consistent with our usual naming pattern, which is not to shorten words.

2) `parseErrorMsg` was originally used when using `useMutation`, but we now also use it when we e.g. fetch data, so the file should rather be called something like `query-utils`

3) We should add a shared component, for example called `ServerErrorAlert`, where we only need to pass two props:
- `error` from our backend.
- description for additional text (e.g. the "There was an error while loading cluster details"

That way, we can make sure we always parse the error from our backend correctly, think about having a helpful description for the users and also use have the correct role ('role="alert"`) present, which is important for users with assistive technology.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.