codeant-ai-for-open-source[bot] commented on code in PR #37973: URL: https://github.com/apache/superset/pull/37973#discussion_r2931372691
########## superset-frontend/src/features/apiKeys/ApiKeyList.tsx: ########## @@ -0,0 +1,233 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { useEffect, useRef, useState } from 'react'; +import { SupersetClient } from '@superset-ui/core'; +import { t } from '@apache-superset/core/translation'; +import { css, useTheme } from '@apache-superset/core/theme'; +import { + Button, + Table, + Modal, + Tag, + Tooltip, +} from '@superset-ui/core/components'; +import { useToasts } from 'src/components/MessageToasts/withToasts'; +import { ApiKeyCreateModal } from './ApiKeyCreateModal'; + +export interface ApiKey { + uuid: string; + name: string; + key_prefix: string; + active: boolean; + created_on: string; + expires_on: string | null; + revoked_on: string | null; + last_used_on: string | null; + scopes: string | null; +} + +export function ApiKeyList() { + const theme = useTheme(); + const { addDangerToast, addSuccessToast } = useToasts(); + const [apiKeys, setApiKeys] = useState<ApiKey[]>([]); + const [loading, setLoading] = useState(false); + const [showCreateModal, setShowCreateModal] = useState(false); + const fetchCounterRef = useRef(0); + + async function fetchApiKeys() { + fetchCounterRef.current += 1; + const thisRequest = fetchCounterRef.current; + setLoading(true); + try { + const response = await SupersetClient.get({ + endpoint: '/api/v1/security/api_keys/', + }); + // Only apply results if this is still the most recent request + if (thisRequest === fetchCounterRef.current) { + setApiKeys(response.json.result || []); + } + } catch (error) { + if (thisRequest === fetchCounterRef.current) { + addDangerToast(t('Failed to fetch API keys')); + } + } finally { + if (thisRequest === fetchCounterRef.current) { + setLoading(false); + } + } + } + + useEffect(() => { + fetchApiKeys(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); Review Comment: **Suggestion:** The pending fetch request is not invalidated on unmount, so a late response can still call state setters and trigger toasts after the component is gone. Add an effect cleanup that bumps the request counter to cancel in-flight updates for unmounted components. [resource leak] <details> <summary><b>Severity Level:</b> Major ⚠️</summary> ```mdx - ⚠️ API Keys fetch errors toast after leaving page. - ⚠️ Unmounted component still executes stale async callbacks. ``` </details> ```suggestion useEffect(() => { fetchApiKeys(); return () => { fetchCounterRef.current += 1; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); ``` <details> <summary><b>Steps of Reproduction ✅ </b></summary> ```mdx 1. Open the User Info SPA route `/user_info/` (registered in `superset-frontend/src/views/routes.tsx:324`) with `FeatureFlag.FabApiKeyEnabled` enabled. 2. `UserInfo` renders `<ApiKeyList />` inside the API Keys panel (`superset-frontend/src/pages/UserInfo/index.tsx:222-228`), and `ApiKeyList` immediately calls `fetchApiKeys()` in `useEffect` (`superset-frontend/src/features/apiKeys/ApiKeyList.tsx:76-79`). 3. While `SupersetClient.get('/api/v1/security/api_keys/')` is still pending (`ApiKeyList.tsx:58-60`), navigate away to another route so `ApiKeyList` unmounts. 4. When the request resolves/rejects, `thisRequest === fetchCounterRef.current` is still true (no unmount invalidation), so callbacks still run `setApiKeys` / `addDangerToast` / `setLoading` (`ApiKeyList.tsx:63,67,71`), producing post-unmount side effects (e.g., toast on unrelated page). ``` </details> <details> <summary><b>Prompt for AI Agent 🤖 </b></summary> ```mdx This is a comment left during a code review. **Path:** superset-frontend/src/features/apiKeys/ApiKeyList.tsx **Line:** 76:79 **Comment:** *Resource Leak: The pending fetch request is not invalidated on unmount, so a late response can still call state setters and trigger toasts after the component is gone. Add an effect cleanup that bumps the request counter to cancel in-flight updates for unmounted components. Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise. ``` </details> <a href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F37973&comment_hash=3b7d2b70fa71bdcc621b3af23dc5ad5f2520f57ec81885de8ce4441135f573f5&reaction=like'>👍</a> | <a href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F37973&comment_hash=3b7d2b70fa71bdcc621b3af23dc5ad5f2520f57ec81885de8ce4441135f573f5&reaction=dislike'>👎</a> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
