Aiven-Open / Aiven-Open/klaw

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

オープン
#1,502 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
Frontend good first issue Housekeeping
主要言語
Java
スター
195
フォーク
77
平均マージ
8日 9時間
マージ済み PR(30日)
1

説明

# 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.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。