add repository analysis tool for growth team #797
Conversation
- Add RepoAnalysisPage component with analysis results display - Add repository analysis hook for API integration - Add types for API response - Add styles for the analysis page - Add route and menu item for the tool - Restrict access to growth team members only
WalkthroughThe pull request introduces a new Repo Analysis Tool for the web application, specifically designed for growth team members. This feature includes a new navigation link in the sidebar, a dedicated page for repository analysis, a custom hook for managing analysis state, and associated routing configuration. The implementation provides a structured approach to analyzing GitHub repositories with detailed insights into code metrics, capabilities, and deployable contracts. Changes
Possibly related PRs
Poem
Tip 🌐 Web search-backed reviews and chat
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (5)
⏰ Context from checks skipped due to timeout of 90000ms (2)
🔇 Additional comments (7)
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying dapp with
|
| Latest commit: |
70c23d7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://62ce34be.dapp-a9y.pages.dev |
| Branch Preview URL: | https://feature-repo-analysis-tool.dapp-a9y.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (6)
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/types.ts (2)
1-31: Add JSDoc documentation for the AnalysisResponse interface.Consider adding comprehensive documentation to improve maintainability and help other developers understand the purpose and constraints of each field.
+/** + * Represents the response from the repository analysis API. + * @property estimations - Cost estimations for the repository + * @property analysis - Detailed analysis of the repository's code + */ export interface AnalysisResponse { + /** Cost estimations categorized by confidence levels */ estimations: { low: number; medium: number; high: number; }; analysis: { + /** Summary metrics of the codebase */ summary: { total_lines: number; source_lines: number; comment_lines: number; comment_ratio: number; complexity_score: number; num_contracts: number; num_interfaces: number; num_abstract: number; num_libraries: number; num_public_functions: number; num_payable_functions: number; deployable_contracts: string[]; }; + /** Boolean flags indicating presence of specific code features */ capabilities: { can_receive_funds: boolean; has_destroy_function: boolean; uses_assembly: boolean; uses_hash_functions: boolean; uses_unchecked_blocks: boolean; uses_try_catch: boolean; }; }; }
33-36: Add JSDoc documentation for the ExcludePatterns interface.Document the purpose and format of exclusion patterns to guide users.
+/** + * Patterns for excluding specific files or directories from analysis. + * @property directories - Array of directory patterns to exclude + * @property files - Array of file patterns to exclude + */ export interface ExcludePatterns { directories?: string[]; files?: string[]; }packages/web/src/pages/CommitteeTools/RepoAnalysisTool/styles.ts (3)
54-77: Add responsive grid layout for mobile devices.The estimation grid's 3-column layout might not work well on smaller screens.
.estimation-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: ${getSpacing(2)};
79-102: Extract reusable grid patterns to reduce code duplication.The summary, capabilities, and deployable contracts grids share similar styles.
+const BaseGrid = styled.div` + display: grid; + gap: ${getSpacing(2)}; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +`; + +const BaseGridItem = styled.div` + background: var(--background-3); + padding: ${getSpacing(2)}; + border-radius: 6px; +`; // Then use these base components: -.summary-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: ${getSpacing(2)}; -} +.summary-grid { + ${BaseGrid} { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } +}Also applies to: 104-133, 135-147
65-75: Add ARIA labels for better accessibility.The current implementation might not be fully accessible to screen readers.
.label { display: block; margin-bottom: ${getSpacing(1)}; color: var(--grey-400); + aria-hidden="true" } .value { font-size: var(--medium); font-weight: 600; color: var(--white); + role="status" + aria-label="${props => props['aria-label']}" }Also applies to: 89-100, 117-131
packages/web/src/components/Sidebar/NavLinks/NavLinks.tsx (1)
175-184: Consider enhancing accessibility and error handling.While the implementation correctly restricts access to growth team members, consider these improvements:
- Add aria-label for better screen reader support
- Add error boundary for missing translation key
<StyledNavLink className="sub" hidden={!isGrowthMember} to={`${RoutePaths.committee_tools}/repo-analysis`} onClick={handleClick} + aria-label={t("RepoAnalysis.ariaLabel")} > <CodeIcon /> - <p className="normal">{t("RepoAnalysis.title")}</p> - <p className="collapsed">{t("RepoAnalysis.title")}</p> + <p className="normal">{t("RepoAnalysis.title", "Repository Analysis")}</p> + <p className="collapsed">{t("RepoAnalysis.title", "Repository Analysis")}</p> </StyledNavLink>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/web/src/components/Sidebar/NavLinks/NavLinks.tsx(2 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/RepoAnalysisPage.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/hooks/useRepoAnalysis.ts(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/styles.ts(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/types.ts(1 hunks)packages/web/src/pages/CommitteeTools/router.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
packages/web/src/pages/CommitteeTools/router.tsx (1)
9-9: LGTM! Route implementation follows existing patterns.The new route for the repository analysis tool is properly integrated into the existing router structure.
Also applies to: 48-51
packages/web/src/components/Sidebar/NavLinks/NavLinks.tsx (1)
5-5: LGTM!The import of CodeIcon is appropriate for the new repository analysis navigation item.
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance error handling for specific API responses.
The current error handling doesn't distinguish between different types of API errors (e.g., 401 for unauthorized, 404 for repo not found).
if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
+ const errorData = await response.json().catch(() => null);
+ switch (response.status) {
+ case 401:
+ throw new Error("Unauthorized: Please check your authentication");
+ case 404:
+ throw new Error("Repository not found");
+ case 429:
+ throw new Error("Rate limit exceeded. Please try again later");
+ default:
+ throw new Error(errorData?.message || `HTTP error! status: ${response.status}`);
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| if (!response.ok) { | |
| const errorData = await response.json().catch(() => null); | |
| switch (response.status) { | |
| case 401: | |
| throw new Error("Unauthorized: Please check your authentication"); | |
| case 404: | |
| throw new Error("Repository not found"); | |
| case 429: | |
| throw new Error("Rate limit exceeded. Please try again later"); | |
| default: | |
| throw new Error(errorData?.message || `HTTP error! status: ${response.status}`); | |
| } | |
| } |
| export const useRepoAnalysis = () => { | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [data, setData] = useState<AnalysisResponse | null>(null); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const { currentSiweData } = useSiweAuth(); | ||
| const isGrowthMember = useIsGrowthMember(); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add request cancellation on component unmount.
The current implementation doesn't handle component unmount, which could lead to memory leaks and state updates on unmounted components.
export const useRepoAnalysis = () => {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState<AnalysisResponse | null>(null);
const [error, setError] = useState<string | null>(null);
const { currentSiweData } = useSiweAuth();
const isGrowthMember = useIsGrowthMember();
+ const abortControllerRef = useRef<AbortController>();
+
+ useEffect(() => {
+ return () => {
+ abortControllerRef.current?.abort();
+ };
+ }, []);Then update the fetch call to use the abort controller:
+ abortControllerRef.current?.abort();
+ abortControllerRef.current = new AbortController();
const response = await fetch(
`${BASE_SERVICE_URL}/github-repos/analyze/${repoOwner}/${repoName}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
...(currentSiweData && {
"X-SIWE-Message": currentSiweData.message,
"X-SIWE-Signature": currentSiweData.signature,
}),
},
body: excludePatterns ? JSON.stringify({ excludePatterns }) : undefined,
+ signal: abortControllerRef.current.signal,
}
);Committable suggestion skipped: line range outside the PR's diff.
| const response = await fetch( | ||
| `${BASE_SERVICE_URL}/github-repos/analyze/${repoOwner}/${repoName}`, | ||
| { | ||
| method: "GET", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| ...(currentSiweData && { | ||
| "X-SIWE-Message": currentSiweData.message, | ||
| "X-SIWE-Signature": currentSiweData.signature, | ||
| }), | ||
| }, | ||
| body: excludePatterns ? JSON.stringify({ excludePatterns }) : undefined, | ||
| } | ||
| ); |
There was a problem hiding this comment.
Fix incorrect HTTP method usage.
Using a GET request with a body is problematic as it's not widely supported and may be stripped by some proxies or servers.
Convert to POST request:
const response = await fetch(
`${BASE_SERVICE_URL}/github-repos/analyze/${repoOwner}/${repoName}`,
{
- method: "GET",
+ method: "POST",
headers: {
"Content-Type": "application/json",
...(currentSiweData && {
"X-SIWE-Message": currentSiweData.message,
"X-SIWE-Signature": currentSiweData.signature,
}),
},
body: excludePatterns ? JSON.stringify({ excludePatterns }) : undefined,
}
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const response = await fetch( | |
| `${BASE_SERVICE_URL}/github-repos/analyze/${repoOwner}/${repoName}`, | |
| { | |
| method: "GET", | |
| headers: { | |
| "Content-Type": "application/json", | |
| ...(currentSiweData && { | |
| "X-SIWE-Message": currentSiweData.message, | |
| "X-SIWE-Signature": currentSiweData.signature, | |
| }), | |
| }, | |
| body: excludePatterns ? JSON.stringify({ excludePatterns }) : undefined, | |
| } | |
| ); | |
| const response = await fetch( | |
| `${BASE_SERVICE_URL}/github-repos/analyze/${repoOwner}/${repoName}`, | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| ...(currentSiweData && { | |
| "X-SIWE-Message": currentSiweData.message, | |
| "X-SIWE-Signature": currentSiweData.signature, | |
| }), | |
| }, | |
| body: excludePatterns ? JSON.stringify({ excludePatterns }) : undefined, | |
| } | |
| ); |
| const renderAnalysisResults = (data: AnalysisResponse) => { | ||
| return ( | ||
| <div className="analysis-results"> | ||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.estimations")}</h3> | ||
| <div className="estimation-grid"> | ||
| <div className="estimation-item"> | ||
| <span className="label">{t("RepoAnalysis.lowEstimate")}</span> | ||
| <span className="value">${data.estimations.low}</span> | ||
| </div> | ||
| <div className="estimation-item"> | ||
| <span className="label">{t("RepoAnalysis.mediumEstimate")}</span> | ||
| <span className="value">${data.estimations.medium}</span> | ||
| </div> | ||
| <div className="estimation-item"> | ||
| <span className="label">{t("RepoAnalysis.highEstimate")}</span> | ||
| <span className="value">${data.estimations.high}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.summary")}</h3> | ||
| <div className="summary-grid"> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.totalLines")}</span> | ||
| <span className="value">{data.analysis.summary.total_lines}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.sourceLines")}</span> | ||
| <span className="value">{data.analysis.summary.source_lines}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.commentLines")}</span> | ||
| <span className="value">{data.analysis.summary.comment_lines}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.commentRatio")}</span> | ||
| <span className="value">{(data.analysis.summary.comment_ratio * 100).toFixed(1)}%</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.complexityScore")}</span> | ||
| <span className="value">{data.analysis.summary.complexity_score}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.contracts")}</span> | ||
| <span className="value">{data.analysis.summary.num_contracts}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.interfaces")}</span> | ||
| <span className="value">{data.analysis.summary.num_interfaces}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.libraries")}</span> | ||
| <span className="value">{data.analysis.summary.num_libraries}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.capabilities")}</h3> | ||
| <div className="capabilities-grid"> | ||
| {Object.entries(data.analysis.capabilities).map(([key, value]) => ( | ||
| <div key={key} className="capability-item"> | ||
| <span className="label">{t(`RepoAnalysis.${key}`)}</span> | ||
| <span className={`value ${value ? "positive" : "negative"}`}> | ||
| {value ? "✓" : "✗"} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| {data.analysis.summary.deployable_contracts.length > 0 && ( | ||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.deployableContracts")}</h3> | ||
| <div className="deployable-contracts"> | ||
| {data.analysis.summary.deployable_contracts.map((contract) => ( | ||
| <div key={contract} className="contract-item"> | ||
| {contract} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor the analysis results rendering for better maintainability.
The current implementation has several issues:
- Complex nested structure makes it hard to maintain
- Hardcoded decimal places for comment ratio
- Missing loading states for individual sections
Consider breaking down the rendering logic into smaller components:
// components/AnalysisEstimations.tsx
export const AnalysisEstimations = ({ estimations }) => {
const { t } = useTranslation();
return (
<div className="section">
<h3>{t("RepoAnalysis.estimations")}</h3>
<div className="estimation-grid">
{Object.entries(estimations).map(([key, value]) => (
<EstimationItem
key={key}
label={t(`RepoAnalysis.${key}Estimate`)}
value={formatCurrency(value)}
/>
))}
</div>
</div>
);
};
// utils/format.ts
export const formatPercentage = (value: number, decimals = 1) => {
return `${(value * 100).toFixed(decimals)}%`;
};
export const formatCurrency = (value: number) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(value);
};| <div className="title-container"> | ||
| <div className="title" onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)}> | ||
| <ArrowBackIcon /> | ||
| <p> | ||
| {t("committeeTools")}/<span className="bold">{t("RepoAnalysis.title")}</span> | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve navigation accessibility.
The title container click handler lacks keyboard navigation support.
<div
className="title-container"
- onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)}
+ onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ navigate(`${RoutePaths.committee_tools}/submissions`);
+ }
+ }}
+ role="button"
+ tabIndex={0}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="title-container"> | |
| <div className="title" onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)}> | |
| <ArrowBackIcon /> | |
| <p> | |
| {t("committeeTools")}/<span className="bold">{t("RepoAnalysis.title")}</span> | |
| </p> | |
| </div> | |
| </div> | |
| <div className="title-container"> | |
| <div | |
| className="title" | |
| onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)} | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| navigate(`${RoutePaths.committee_tools}/submissions`); | |
| } | |
| }} | |
| role="button" | |
| tabIndex={0} | |
| > | |
| <ArrowBackIcon /> | |
| <p> | |
| {t("committeeTools")}/<span className="bold">{t("RepoAnalysis.title")}</span> | |
| </p> | |
| </div> | |
| </div> |
| const [repoOwner, setRepoOwner] = useState(""); | ||
| const [repoName, setRepoName] = useState(""); | ||
| const { analyzeRepo, isLoading, data } = useRepoAnalysis(); | ||
|
|
||
| const handleAnalyze = async () => { | ||
| if (!repoOwner || !repoName) return; | ||
| await analyzeRepo(repoOwner, repoName); | ||
| }; |
There was a problem hiding this comment.
Enhance input validation and error handling.
The current implementation lacks:
- Input sanitization for repository owner and name
- Error handling for API failures
- Rate limiting protection
const [repoOwner, setRepoOwner] = useState("");
const [repoName, setRepoName] = useState("");
-const { analyzeRepo, isLoading, data } = useRepoAnalysis();
+const { analyzeRepo, isLoading, data, error } = useRepoAnalysis();
const handleAnalyze = async () => {
- if (!repoOwner || !repoName) return;
+ const sanitizedOwner = repoOwner.trim().toLowerCase();
+ const sanitizedName = repoName.trim().toLowerCase();
+
+ if (!sanitizedOwner || !sanitizedName) {
+ // Use your toast/notification system
+ showError(t("RepoAnalysis.invalidInput"));
+ return;
+ }
+
+ try {
+ await analyzeRepo(sanitizedOwner, sanitizedName);
+ } catch (err) {
+ showError(t("RepoAnalysis.analysisFailed"));
+ }
};Committable suggestion skipped: line range outside the PR's diff.
| <div className="content"> | ||
| <div className="input-section"> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoOwner")} | ||
| value={repoOwner} | ||
| onChange={(e) => setRepoOwner(e.target.value)} | ||
| placeholder="e.g., ethereum" | ||
| /> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoName")} | ||
| value={repoName} | ||
| onChange={(e) => setRepoName(e.target.value)} | ||
| placeholder="e.g., solidity" | ||
| /> | ||
| <Button | ||
| onClick={handleAnalyze} | ||
| disabled={!repoOwner || !repoName || isLoading} | ||
| className="analyze-button" | ||
| > | ||
| <SearchIcon className="mr-2" /> | ||
| {isLoading ? t("loading") : t("RepoAnalysis.analyze")} | ||
| </Button> | ||
| </div> | ||
|
|
||
| {data && renderAnalysisResults(data)} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add loading and error states for better user experience.
The UI should handle loading and error states gracefully.
<div className="content">
<div className="input-section">
{/* ... input fields ... */}
</div>
+ {isLoading && (
+ <div className="loading-state">
+ <CircularProgress />
+ <p>{t("RepoAnalysis.analyzing")}</p>
+ </div>
+ )}
+
+ {error && (
+ <div className="error-state">
+ <ErrorIcon />
+ <p>{error.message}</p>
+ <Button onClick={handleAnalyze}>
+ {t("RepoAnalysis.retry")}
+ </Button>
+ </div>
+ )}
{data && renderAnalysisResults(data)}
</div>Committable suggestion skipped: line range outside the PR's diff.
| <span className="label">{t("RepoAnalysis.sourceLines")}</span> | ||
| <span className="value">{data.analysis.summary.source_lines}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.commentLines")}</span> | ||
| <span className="value">{data.analysis.summary.comment_lines}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.commentRatio")}</span> | ||
| <span className="value">{(data.analysis.summary.comment_ratio * 100).toFixed(1)}%</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.complexityScore")}</span> | ||
| <span className="value">{data.analysis.summary.complexity_score}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.contracts")}</span> | ||
| <span className="value">{data.analysis.summary.num_contracts}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.interfaces")}</span> | ||
| <span className="value">{data.analysis.summary.num_interfaces}</span> | ||
| </div> | ||
| <div className="summary-item"> | ||
| <span className="label">{t("RepoAnalysis.libraries")}</span> | ||
| <span className="value">{data.analysis.summary.num_libraries}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.capabilities")}</h3> | ||
| <div className="capabilities-grid"> | ||
| {Object.entries(data.analysis.capabilities).map(([key, value]) => ( | ||
| <div key={key} className="capability-item"> | ||
| <span className="label">{t(`RepoAnalysis.${key}`)}</span> | ||
| <span className={`value ${value ? "positive" : "negative"}`}> | ||
| {value ? "✓" : "✗"} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| {data.analysis.summary.deployable_contracts.length > 0 && ( | ||
| <div className="section"> | ||
| <h3>{t("RepoAnalysis.deployableContracts")}</h3> | ||
| <div className="deployable-contracts"> | ||
| {data.analysis.summary.deployable_contracts.map((contract) => ( | ||
| <div key={contract} className="contract-item"> | ||
| {contract} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <StyledRepoAnalysisPage> | ||
| <div className="title-container"> | ||
| <div className="title" onClick={() => navigate(`${RoutePaths.committee_tools}/submissions`)}> | ||
| <ArrowBackIcon /> | ||
| <p> | ||
| {t("committeeTools")}/<span className="bold">{t("RepoAnalysis.title")}</span> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="content"> | ||
| <div className="input-section"> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoOwner")} | ||
| value={repoOwner} | ||
| onChange={(e) => setRepoOwner(e.target.value)} | ||
| placeholder="e.g., ethereum" | ||
| /> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoName")} | ||
| value={repoName} | ||
| onChange={(e) => setRepoName(e.target.value)} | ||
| placeholder="e.g., solidity" | ||
| /> | ||
| <Button | ||
| onClick={handleAnalyze} | ||
| disabled={!repoOwner || !repoName || isLoading} | ||
| className="analyze-button" | ||
| > | ||
| <SearchIcon className="mr-2" /> | ||
| {isLoading ? t("loading") : t("RepoAnalysis.analyze")} | ||
| </Button> | ||
| </div> | ||
|
|
||
| {data && renderAnalysisResults(data)} | ||
| </div> | ||
| </StyledRepoAnalysisPage> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
💡 Codebase verification
Missing translation keys for RepoAnalysisPage component
All translation keys used in the component are missing from the translation file. Add the following keys to packages/web/src/languages/en.json:
- RepoAnalysis.title
- RepoAnalysis.estimations
- RepoAnalysis.lowEstimate
- RepoAnalysis.mediumEstimate
- RepoAnalysis.highEstimate
- RepoAnalysis.summary
- RepoAnalysis.totalLines
- RepoAnalysis.sourceLines
- RepoAnalysis.commentLines
- RepoAnalysis.commentRatio
- RepoAnalysis.complexityScore
- RepoAnalysis.contracts
- RepoAnalysis.interfaces
- RepoAnalysis.libraries
- RepoAnalysis.capabilities
- RepoAnalysis.deployableContracts
- RepoAnalysis.repoOwner
- RepoAnalysis.repoName
- RepoAnalysis.analyze
🔗 Analysis chain
Verify translation key coverage.
Let's ensure all translation keys used in the component exist in the translation files.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for missing translation keys in the en.json file
# List of keys to check
keys=(
"RepoAnalysis.title"
"RepoAnalysis.ariaLabel"
"RepoAnalysis.estimations"
"RepoAnalysis.lowEstimate"
"RepoAnalysis.mediumEstimate"
"RepoAnalysis.highEstimate"
"RepoAnalysis.summary"
"RepoAnalysis.totalLines"
"RepoAnalysis.sourceLines"
"RepoAnalysis.commentLines"
"RepoAnalysis.commentRatio"
"RepoAnalysis.complexityScore"
"RepoAnalysis.contracts"
"RepoAnalysis.interfaces"
"RepoAnalysis.libraries"
"RepoAnalysis.capabilities"
"RepoAnalysis.deployableContracts"
"RepoAnalysis.repoOwner"
"RepoAnalysis.repoName"
"RepoAnalysis.analyze"
)
# Find translation files
fd -t f 'en.json' | while read -r file; do
echo "Checking translations in $file"
for key in "${keys[@]}"; do
if ! grep -q "\"$key\":" "$file"; then
echo "Missing translation key: $key"
fi
done
done
Length of output: 4893
…inability - Split analysis results into separate components - Add loading states with shimmer effect - Add error message display - Improve code organization and reusability
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (10)
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/styles.ts (2)
4-11: Optimize shimmer animation for reusability and maintainability.The shimmer animation is reused in multiple places with identical gradient colors. Consider using CSS custom properties to make the animation more maintainable.
const shimmer = keyframes` 0% { - background-position: -200% 0; + background-position: -200% center; } 100% { - background-position: 200% 0; + background-position: 200% center; } `; + +export const StyledRepoAnalysisPage = styled.div` + --shimmer-color-1: var(--background-3); + --shimmer-color-2: var(--background-2); + + /* Common shimmer styles */ + .shimmer { + background: linear-gradient( + 90deg, + var(--shimmer-color-1) 25%, + var(--shimmer-color-2) 50%, + var(--shimmer-color-1) 75% + ); + background-size: 200% 100%; + animation: ${shimmer} 1.5s infinite; + }
44-47: Consider adding width constraints to the analyze button.The button has a fixed height but no width constraints. This might lead to inconsistent button sizes across different viewport widths.
.analyze-button { height: 40px; + min-width: 120px; margin-bottom: ${getSpacing(2)}; }packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/DeployableContracts.tsx (2)
20-22: Replace hardcoded loading items with dynamic count.Consider matching the loading items count with the actual number of contracts or use a configuration constant.
- {[1, 2, 3].map((key) => ( + {Array.from({ length: Math.min(contracts.length || 3, 5) }).map((_, key) => ( <div key={key} className="contract-item shimmer" /> ))}
33-35: Enhance accessibility for contract items.Add proper ARIA labels and roles for better screen reader support.
- <div key={contract} className="contract-item"> + <div + key={contract} + className="contract-item" + role="listitem" + aria-label={`${t('RepoAnalysis.deployableContract')}: ${contract}`} + > {contract} </div>packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/AnalysisEstimations.tsx (1)
9-14: Memoize EstimationItem component for performance.Since EstimationItem is a pure component, it can be memoized to prevent unnecessary re-renders.
- const EstimationItem = ({ label, value }: EstimationItemProps) => ( + const EstimationItem = React.memo(({ label, value }: EstimationItemProps) => ( <div className="estimation-item"> <span className="label">{label}</span> <span className="value">{value}</span> </div> - ); + ));packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeCapabilities.tsx (1)
31-33: Improve loading state efficiency.The current implementation relies on the actual capabilities object being available during loading state.
- {Object.keys(capabilities).map((key) => ( + {Array.from({ length: 5 }).map((_, index) => ( - <div key={key} className="capability-item shimmer" /> + <div key={index} className="capability-item shimmer" /> ))}packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeSummary.tsx (3)
11-16: Enhance accessibility of the summary item.Add semantic HTML and ARIA attributes to improve accessibility.
- <div className="summary-item"> + <div className="summary-item" role="listitem" aria-label={`${label}: ${typeof value === 'number' ? formatter(value) : value}`}> <span className="label">{label}</span> <span className="value">{typeof value === 'number' ? formatter(value) : value}</span> </div>
26-35: Optimize performance by moving summaryItems outside component.Define the array outside the component to prevent unnecessary recreation on each render.
+const summaryItems = [ + { key: 'total_lines', formatter: formatNumber }, + { key: 'source_lines', formatter: formatNumber }, + { key: 'comment_lines', formatter: formatNumber }, + { key: 'comment_ratio', formatter: formatPercentage }, + { key: 'complexity_score', formatter: formatNumber }, + { key: 'num_contracts', formatter: formatNumber }, + { key: 'num_interfaces', formatter: formatNumber }, + { key: 'num_libraries', formatter: formatNumber }, +]; export const CodeSummary = ({ summary, isLoading }: CodeSummaryProps) => { const { t } = useTranslation(); - const summaryItems = [/*...*/];
37-48: Enhance loading state accessibility.Add ARIA attributes to improve the loading state for screen readers.
- <div className="section"> + <div className="section" aria-busy="true" aria-live="polite"> <h3>{t("RepoAnalysis.summary")}</h3> - <div className="summary-grid loading"> + <div className="summary-grid loading" role="list">packages/web/src/pages/CommitteeTools/RepoAnalysisTool/RepoAnalysisPage.tsx (1)
68-107: Add error boundary for analysis results section.Wrap the analysis results in an error boundary to gracefully handle rendering errors.
+import { ErrorBoundary } from 'components/ErrorBoundary'; {(data || isLoading) && ( + <ErrorBoundary fallback={<div className="error-message">{t('errors.renderingFailed')}</div>}> <div className="analysis-results"> <AnalysisEstimations estimations={data?.analysis.estimations ?? { low: 0, medium: 0, high: 0 }} isLoading={isLoading} /> {/* ... other components ... */} </div> + </ErrorBoundary> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/RepoAnalysisPage.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/AnalysisEstimations.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeCapabilities.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeSummary.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/DeployableContracts.tsx(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/styles.ts(1 hunks)packages/web/src/pages/CommitteeTools/RepoAnalysisTool/utils/format.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (6)
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/styles.ts (1)
16-35: Verify the intended interaction for the title container.The title container has
cursor: pointerstyle, suggesting it's interactive. Please ensure that the corresponding component implements the expected click behavior.✅ Verification successful
The cursor: pointer style appears to be intentional
The
title-containerclass appears to be used across multiple collapsible components in the codebase, suggesting it's part of a common expandable/collapsible UI pattern. The cursor: pointer style is likely intentional for this interaction pattern.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for the RepoAnalysisPage component to verify click handler implementation ast-grep --pattern $'const RepoAnalysisPage = $_ => { $$$ <$_className="title-container"$_> $$$ </$_> $$$ }'Length of output: 121
Script:
#!/bin/bash # Find files containing "title-container" rg -l "title-container" --type ts --type tsx --type jsx # Show context around "title-container" usage rg -B 5 -A 5 "title-container" --type ts --type tsx --type jsxLength of output: 174
Script:
#!/bin/bash # Find files containing "title-container" in the packages/web directory cd packages/web && rg -l "title-container" # Show context around "title-container" usage cd packages/web && rg -B 5 -A 5 "title-container"Length of output: 1678
Script:
#!/bin/bash # Show content of RepoAnalysisPage.tsx focusing on title-container usage rg -B 10 -A 10 "title-container" "src/pages/CommitteeTools/RepoAnalysisTool/RepoAnalysisPage.tsx"Length of output: 198
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeCapabilities.tsx (1)
43-49: Verify color contrast for accessibility.Ensure that the positive/negative classes meet WCAG color contrast requirements.
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/components/CodeSummary.tsx (1)
5-21: Well-structured interfaces with clear type definitions!The interfaces are well-defined with appropriate types and good separation of concerns.
packages/web/src/pages/CommitteeTools/RepoAnalysisTool/RepoAnalysisPage.tsx (3)
1-21: Missing translation keys for RepoAnalysisPage component.Several translation keys used in the component are missing from the translation file.
22-25: Enhance input validation and error handling.The current implementation lacks input sanitization and proper error handling.
29-36: Improve navigation accessibility.The title container click handler lacks keyboard navigation support.
| .estimation-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: ${getSpacing(2)}; | ||
|
|
||
| .estimation-item { | ||
| background: var(--background-3); | ||
| padding: ${getSpacing(2)}; | ||
| border-radius: 6px; | ||
| text-align: center; | ||
|
|
||
| .label { | ||
| display: block; | ||
| margin-bottom: ${getSpacing(1)}; | ||
| color: var(--grey-400); | ||
| } | ||
|
|
||
| .value { | ||
| font-size: var(--medium); | ||
| font-weight: 600; | ||
| color: var(--primary); | ||
| } | ||
|
|
||
| &.shimmer { | ||
| height: 80px; | ||
| background: linear-gradient( | ||
| 90deg, | ||
| var(--background-3) 25%, | ||
| var(--background-2) 50%, | ||
| var(--background-3) 75% | ||
| ); | ||
| background-size: 200% 100%; | ||
| animation: ${shimmer} 1.5s infinite; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve responsive design for grid layouts.
The grid layouts use fixed column counts (repeat(3, 1fr) or repeat(4, 1fr)) which might not work well on smaller screens. Consider adding responsive breakpoints.
.estimation-grid {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(1, 1fr);
gap: ${getSpacing(2)};
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
}
.summary-grid {
display: grid;
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(1, 1fr);
gap: ${getSpacing(2)};
+
+ @media (min-width: 768px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (min-width: 1024px) {
+ grid-template-columns: repeat(4, 1fr);
+ }
}Remove duplicated shimmer effect code.
The shimmer effect gradient and animation are duplicated across different grid items. This duplication was addressed in the earlier suggestion to use a common .shimmer class.
Also applies to: 108-143, 145-186, 188-212
| export const formatNumber = (value: number) => { | ||
| return new Intl.NumberFormat('en-US').format(value); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add input validation for formatNumber function.
The function should handle invalid inputs consistently.
export const formatNumber = (value: number) => {
+ if (typeof value !== 'number' || isNaN(value)) return '0';
return new Intl.NumberFormat('en-US').format(value);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const formatNumber = (value: number) => { | |
| return new Intl.NumberFormat('en-US').format(value); | |
| }; | |
| export const formatNumber = (value: number) => { | |
| if (typeof value !== 'number' || isNaN(value)) return '0'; | |
| return new Intl.NumberFormat('en-US').format(value); | |
| }; |
| export const formatCurrency = (value: number) => { | ||
| return new Intl.NumberFormat('en-US', { | ||
| style: 'currency', | ||
| currency: 'USD', | ||
| minimumFractionDigits: 0, | ||
| maximumFractionDigits: 0, | ||
| }).format(value); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add input validation for formatCurrency function.
The function should handle invalid inputs and potentially negative values.
export const formatCurrency = (value: number) => {
+ if (typeof value !== 'number' || isNaN(value)) return '$0';
+ // Ensure value is non-negative for display purposes
+ const displayValue = Math.max(0, value);
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
maximumFractionDigits: 0,
- }).format(value);
+ }).format(displayValue);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const formatCurrency = (value: number) => { | |
| return new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD', | |
| minimumFractionDigits: 0, | |
| maximumFractionDigits: 0, | |
| }).format(value); | |
| }; | |
| export const formatCurrency = (value: number) => { | |
| if (typeof value !== 'number' || isNaN(value)) return '$0'; | |
| // Ensure value is non-negative for display purposes | |
| const displayValue = Math.max(0, value); | |
| return new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD', | |
| minimumFractionDigits: 0, | |
| maximumFractionDigits: 0, | |
| }).format(displayValue); | |
| }; |
| export const formatPercentage = (value: number, decimals = 1) => { | ||
| return `${(value * 100).toFixed(decimals)}%`; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add input validation for formatPercentage function.
The function should handle invalid inputs (NaN, undefined) gracefully.
export const formatPercentage = (value: number, decimals = 1) => {
+ if (typeof value !== 'number' || isNaN(value)) return '0%';
return `${(value * 100).toFixed(decimals)}%`;
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const formatPercentage = (value: number, decimals = 1) => { | |
| return `${(value * 100).toFixed(decimals)}%`; | |
| }; | |
| export const formatPercentage = (value: number, decimals = 1) => { | |
| if (typeof value !== 'number' || isNaN(value)) return '0%'; | |
| return `${(value * 100).toFixed(decimals)}%`; | |
| }; |
| {Object.entries(estimations).map(([key, value]) => ( | ||
| <EstimationItem | ||
| key={key} | ||
| label={t(`RepoAnalysis.${key}Estimate`)} | ||
| value={formatCurrency(value)} | ||
| /> | ||
| ))} |
There was a problem hiding this comment.
💡 Codebase verification
Missing translation keys for repository analysis estimations.
The following translation keys are missing and need to be added to the translation files:
- RepoAnalysis.lowEstimate
- RepoAnalysis.mediumEstimate
- RepoAnalysis.highEstimate
🔗 Analysis chain
Verify translation key existence.
Ensure that all dynamic translation keys exist to prevent missing translations.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for missing translation keys in the i18n files
# Find all i18n JSON files
fd -e json -p "i18n|locales" | while read -r file; do
echo "Checking translations in $file"
for key in "RepoAnalysis.lowEstimate" "RepoAnalysis.mediumEstimate" "RepoAnalysis.highEstimate"; do
jq --arg key "$key" 'has($key)' "$file"
done
done
Length of output: 45
Script:
#!/bin/bash
# First, let's find what values are in the estimations object
echo "=== Searching for estimations object definition ==="
rg "estimations.*=|const.*estimations" -A 5 -B 5
echo -e "\n=== Finding all potential translation files ==="
fd ".+\.json$"
echo -e "\n=== Searching for RepoAnalysis translation keys ==="
rg "RepoAnalysis\." --type json
Length of output: 4523
Script:
#!/bin/bash
echo "=== Checking English translations ==="
cat packages/web/src/languages/en.json | jq '. | select(.RepoAnalysis != null) | .RepoAnalysis'
echo -e "\n=== Checking Japanese translations ==="
cat packages/web/src/languages/jp.json | jq '. | select(.RepoAnalysis != null) | .RepoAnalysis'
Length of output: 373
Script:
#!/bin/bash
echo "=== Checking English translations file content ==="
cat packages/web/src/languages/en.json
echo -e "\n=== Checking Japanese translations file content ==="
cat packages/web/src/languages/jp.json
Length of output: 65780
| <span className={`value ${value ? "positive" : "negative"}`}> | ||
| {value ? "✓" : "✗"} | ||
| </span> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility for capability indicators.
Replace Unicode characters with more accessible alternatives and add proper ARIA attributes.
- <span className={`value ${value ? "positive" : "negative"}`}>
- {value ? "✓" : "✗"}
- </span>
+ <span
+ className={`value ${value ? "positive" : "negative"}`}
+ role="img"
+ aria-label={value ? t('common.yes') : t('common.no')}
+ >
+ {value ? "✓" : "✗"}
+ </span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span className={`value ${value ? "positive" : "negative"}`}> | |
| {value ? "✓" : "✗"} | |
| </span> | |
| <span | |
| className={`value ${value ? "positive" : "negative"}`} | |
| role="img" | |
| aria-label={value ? t('common.yes') : t('common.no')} | |
| > | |
| {value ? "✓" : "✗"} | |
| </span> |
| <div className="content"> | ||
| <div className="input-section"> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoOwner")} | ||
| value={repoOwner} | ||
| onChange={(e) => setRepoOwner(e.target.value)} | ||
| placeholder="e.g., ethereum" | ||
| /> | ||
| <FormInput | ||
| label={t("RepoAnalysis.repoName")} | ||
| value={repoName} | ||
| onChange={(e) => setRepoName(e.target.value)} | ||
| placeholder="e.g., solidity" | ||
| /> | ||
| <Button | ||
| onClick={handleAnalyze} | ||
| disabled={!repoOwner || !repoName || isLoading} | ||
| className="analyze-button" | ||
| > | ||
| <SearchIcon className="mr-2" /> | ||
| {isLoading ? t("loading") : t("RepoAnalysis.analyze")} | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve form handling and accessibility.
The input section should be wrapped in a form element for proper form submission handling.
- <div className="input-section">
+ <form
+ className="input-section"
+ onSubmit={(e) => {
+ e.preventDefault();
+ handleAnalyze();
+ }}
+ >
<FormInput
label={t("RepoAnalysis.repoOwner")}
value={repoOwner}
onChange={(e) => setRepoOwner(e.target.value)}
placeholder="e.g., ethereum"
/>
<FormInput
label={t("RepoAnalysis.repoName")}
value={repoName}
onChange={(e) => setRepoName(e.target.value)}
placeholder="e.g., solidity"
/>
<Button
- onClick={handleAnalyze}
+ type="submit"
disabled={!repoOwner || !repoName || isLoading}
className="analyze-button"
>
<SearchIcon className="mr-2" />
{isLoading ? t("loading") : t("RepoAnalysis.analyze")}
</Button>
- </div>
+ </form>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="content"> | |
| <div className="input-section"> | |
| <FormInput | |
| label={t("RepoAnalysis.repoOwner")} | |
| value={repoOwner} | |
| onChange={(e) => setRepoOwner(e.target.value)} | |
| placeholder="e.g., ethereum" | |
| /> | |
| <FormInput | |
| label={t("RepoAnalysis.repoName")} | |
| value={repoName} | |
| onChange={(e) => setRepoName(e.target.value)} | |
| placeholder="e.g., solidity" | |
| /> | |
| <Button | |
| onClick={handleAnalyze} | |
| disabled={!repoOwner || !repoName || isLoading} | |
| className="analyze-button" | |
| > | |
| <SearchIcon className="mr-2" /> | |
| {isLoading ? t("loading") : t("RepoAnalysis.analyze")} | |
| </Button> | |
| </div> | |
| <div className="content"> | |
| <form | |
| className="input-section" | |
| onSubmit={(e) => { | |
| e.preventDefault(); | |
| handleAnalyze(); | |
| }} | |
| > | |
| <FormInput | |
| label={t("RepoAnalysis.repoOwner")} | |
| value={repoOwner} | |
| onChange={(e) => setRepoOwner(e.target.value)} | |
| placeholder="e.g., ethereum" | |
| /> | |
| <FormInput | |
| label={t("RepoAnalysis.repoName")} | |
| value={repoName} | |
| onChange={(e) => setRepoName(e.target.value)} | |
| placeholder="e.g., solidity" | |
| /> | |
| <Button | |
| type="submit" | |
| disabled={!repoOwner || !repoName || isLoading} | |
| className="analyze-button" | |
| > | |
| <SearchIcon className="mr-2" /> | |
| {isLoading ? t("loading") : t("RepoAnalysis.analyze")} | |
| </Button> | |
| </form> |
Add RepoAnalysisPage component with analysis results display
Add repository analysis hook for API integration
Add types for API response
Add styles for the analysis page
Add route and menu item for the tool
Restrict access to growth team members only
Summary by CodeRabbit
New Features
Improvements