Aiven-Open / Aiven-Open/klaw

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

未关闭
#1,502 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Frontend good first issue Housekeeping
主要语言
Java
星标
195
派生
77
平均合并
8 天 9 小时
30 天内合并 PR
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 摘要。