BUG: Loading projects can return null

[zoltanbedi]

Opening this URL shows the following error

We should handle null in the ProjectSelector.tsx file when we load projects.

[Halsjsko]

可以让我帮你完成这个任务嘛

[zoltanbedi]

@Halsjsko please do. Let me know if you need help.

[Halsjsko]

你好我修改了一部分代码，但是它前面的import报错。找不到模块“@emotion/css”或其相应的类型声明，应该如何解决呀。

[Halsjsko]

你好，我提交了pr。但是显示
我不太清楚是什么回事。麻烦可以帮我一下嘛

[zoltanbedi]

@Halsjsko you need to sign our CLA (Contributor License Agreement) for us to be able to merge your PR. Click on the link and agree it.

[Halsjsko]

那这个CLA需要如何签署呢

[zoltanbedi]

Follow this link and click the big blue button at the bottom. https://cla-assistant.io/grafana/google-bigquery-datasource?pullRequest=302

[Halsjsko]

你好，我已经签署了这个协议。但刷新请求还是
这样。我是需要重新pr还是应该怎么办？

[zoltanbedi]

Your commit on your PR is not made with your user. https://docs.github.com/en/pull-requests/committing-changes-to-your-project/troubleshooting-commits/why-are-my-commits-linked-to-the-wrong-user

[Halsjsko]

你好，我先把大概的说一下，然后明天再弄pr可以吗，希望我的一些看法对你有用。无论有用还是错误，请都回复我一下好吗，谢谢。在 useEffect 中处理 null 值
目前在 useEffect 函数中，对 state.value 和 value 的使用存在潜在的 null 相关错误。以下是修改后的代码，添加了更完善的 null 检查：
useEffect(() => {
if (!applyDefault) {
return;
}
// Set default project when values are fetched
if (!value) {
if (state.value && state.value.length > 0) {
onChange(state.value[0]);
}
} else {
if (state.value && state.value.find((v) => v.value === value) === undefined) {
// if value is set and newly fetched values does not contain selected value
if (state.value.length > 0) {
onChange(state.value[0]);
}
}
}
}, [state.value, value, applyDefault, onChange]);
在上述修改中，当检查 state.value 的长度或访问其元素时，先确保 state.value 不为 null。
在 getErrorMessage 函数中处理 null 值
原 getErrorMessage 函数在访问 state.error 及其嵌套属性时没有充分考虑 null 值情况。以下是改进后的代码：
const getErrorMessage = () => {
if (!state.error) {
return null;
}
const errorData = (state.error as any)?.data;
if (errorData?.message) {
const url = errorData.message.match(/(https?://[^ ]*)/g)?.[0];
return (
<>
{errorData.message.split('.')[0]}
{url? (

Click here to enable it

) : (
''
)}
</>
);
}

return state.error.message;
};
在这个修改后的函数中，首先检查 state.error 是否为 null，如果是则直接返回 null，避免后续可能出现的无法读取属性的问题。
在 Select 组件的 options 属性赋值中处理 null 值
原代码中 Select 组件的 options 属性赋值为 state.loading? [] : state.value || [{ label: value, value }]，这里存在当 state.value 为 null 时的潜在问题。以下是一种更安全的赋值方式：
<Select
aria-label="Project selector"
inputId={inputId}
value={state.loading? null : value}
options={state.loading
? []
: state.value
? state.value.map((v) => ({ label: v.label, value: v.value }))
: value
? [{ label: value, value }]
: []}
onChange={onChange}
isLoading={state.loading}
menuShouldPortal={true}
/>
在上述修改后的代码中，当 state.value 为 null 时，根据 value 是否有值来确定 options 的赋值。如果 value 也为 null，则赋值为空数组 []，这样可以避免出现无法读取 null 属性的情况。

[zoltanbedi]

In my opinion, this can be fixed easily by doing this here https://github.com/grafana/google-bigquery-datasource/blob/main/src/components/ProjectSelector.tsx#L26

return projects?.map((project) => ({ label: project.displayName, value: project.projectId }));

This would make sure that we don't try to iterate over null.