Merge pull request #121 from bg-playground/copilot/fix-eslint-errors-in-suggestion-filters

Fix 11 frontend ESLint errors blocking CI lint job

Author: bg-playground

frontend/src/components/SuggestionFilters.tsx

@@ -1,15 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-export const DEFAULT_FILTERS = {
-  minScore: 0,
-  maxScore: 1,
-  algorithm: 'all',
-  sortBy: 'score',
-  sortOrder: 'desc',
-  search: '',
-};
-
-export type Filters = typeof DEFAULT_FILTERS;
+import { DEFAULT_FILTERS } from '../types/filters';
+import type { Filters } from '../types/filters';
 
 interface SuggestionFiltersProps {
   filters: Filters;
@@ -19,20 +10,22 @@ interface SuggestionFiltersProps {
 
 export const SuggestionFilters: React.FC<SuggestionFiltersProps> = ({ filters, onFiltersChange, onReset }) => {
   const [searchInput, setSearchInput] = useState(filters.search);
+  const [prevSearch, setPrevSearch] = useState(filters.search);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Sync searchInput when filters.search is reset externally (e.g. Reset button)
+  if (prevSearch !== filters.search) {
+    setPrevSearch(filters.search);
+    setSearchInput(filters.search);
+  }
+
   // Clear debounce timer on unmount
   useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, []);
 
-  // Sync searchInput when filters.search is reset externally (e.g. Reset button)
-  useEffect(() => {
-    setSearchInput(filters.search);
-  }, [filters.search]);
-
   const handleSearchChange = useCallback(
     (value: string) => {
       setSearchInput(value);

frontend/src/components/Toast.tsx

@@ -1,26 +1,6 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
-
-interface Toast {
-  id: string;
-  message: string;
-  type: 'success' | 'error' | 'info' | 'warning';
-}
-
-interface ToastContextValue {
-  toasts: Toast[];
-  showToast: (message: string, type?: Toast['type']) => void;
-  removeToast: (id: string) => void;
-}
-
-const ToastContext = createContext<ToastContextValue | undefined>(undefined);
-
-export const useToast = () => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within a ToastProvider');
-  }
-  return context;
-};
+import React, { useState, useCallback } from 'react';
+import { ToastContext } from '../context/ToastContext';
+import type { Toast } from '../context/ToastContext';
 
 export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [toasts, setToasts] = useState<Toast[]>([]);

frontend/src/context/ToastContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+}
+
+export interface ToastContextValue {
+  toasts: Toast[];
+  showToast: (message: string, type?: Toast['type']) => void;
+  removeToast: (id: string) => void;
+}
+
+export const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};

frontend/src/pages/ManualLinksPage.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { linksApi } from '../api/links';
 import { requirementsApi } from '../api/requirements';
 import { testCasesApi } from '../api/testCases';
 import { LinkSource, LinkType } from '../types/api';
 import type { Link, LinkCreate, Requirement, TestCase } from '../types/api';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { useToast } from '../components/Toast';
+import { useToast } from '../context/ToastContext';
 
 export const ManualLinksPage: React.FC = () => {
   const [links, setLinks] = useState<Link[]>([]);
@@ -21,7 +21,7 @@ export const ManualLinksPage: React.FC = () => {
   });
   const { showToast } = useToast();
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
       setLoading(true);
       const [linksData, reqData, tcData] = await Promise.all([
@@ -38,11 +38,11 @@ export const ManualLinksPage: React.FC = () => {
     } finally {
       setLoading(false);
     }
-  };
+  }, [showToast]);
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [loadData]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -52,9 +52,10 @@ export const ManualLinksPage: React.FC = () => {
       setShowModal(false);
       resetForm();
       await loadData();
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Error creating link:', error);
-      const message = error.response?.data?.detail || 'Failed to create link';
+      const axiosError = error as { response?: { data?: { detail?: string } } };
+      const message = axiosError?.response?.data?.detail ?? 'Failed to create link';
       showToast(message, 'error');
     }
   };

frontend/src/pages/MetricsDashboardPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import traceabilityApi, { type Metrics } from "../api/traceability";
-import { useToast } from "../components/Toast";
+import { useToast } from "../context/ToastContext";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 
 export default function MetricsDashboardPage() {

frontend/src/pages/RequirementsPage.tsx

@@ -3,7 +3,7 @@ import { requirementsApi } from '../api/requirements';
 import { RequirementType, PriorityLevel, RequirementStatus } from '../types/api';
 import type { Requirement, RequirementCreate, RequirementUpdate } from '../types/api';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { useToast } from '../components/Toast';
+import { useToast } from '../context/ToastContext';
 
 export const RequirementsPage: React.FC = () => {
   const [requirements, setRequirements] = useState<Requirement[]>([]);

frontend/src/pages/SuggestionDashboard.tsx

@@ -6,10 +6,11 @@ import { testCasesApi } from '../api/testCases';
 import { SuggestionStatus } from '../types/api';
 import type { Suggestion, Requirement, TestCase } from '../types/api';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { useToast } from '../components/Toast';
+import { useToast } from '../context/ToastContext';
 import { KeyboardShortcutsHelp } from '../components/KeyboardShortcutsHelp';
-import { SuggestionFilters, DEFAULT_FILTERS } from '../components/SuggestionFilters';
-import type { Filters } from '../components/SuggestionFilters';
+import { SuggestionFilters } from '../components/SuggestionFilters';
+import { DEFAULT_FILTERS } from '../types/filters';
+import type { Filters } from '../types/filters';
 import { SuggestionStats } from '../components/SuggestionStats';
 import { SuggestionCard } from '../components/SuggestionCard';
 import { SuggestionPreviewModal } from '../components/SuggestionPreviewModal';

frontend/src/pages/TestCasesPage.tsx

@@ -3,7 +3,7 @@ import { testCasesApi } from '../api/testCases';
 import { TestCaseType, PriorityLevel, TestCaseStatus } from '../types/api';
 import type { TestCase, TestCaseCreate, TestCaseUpdate } from '../types/api';
 import { LoadingSpinner } from '../components/LoadingSpinner';
-import { useToast } from '../components/Toast';
+import { useToast } from '../context/ToastContext';
 
 export const TestCasesPage: React.FC = () => {
   const [testCases, setTestCases] = useState<TestCase[]>([]);

frontend/src/pages/TraceabilityMatrixPage.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import traceabilityApi, { type TraceabilityMatrix } from "../api/traceability";
-import { useToast } from "../components/Toast";
+import { useToast } from "../context/ToastContext";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 
 export default function TraceabilityMatrixPage() {
@@ -9,11 +9,7 @@ export default function TraceabilityMatrixPage() {
   const [exporting, setExporting] = useState(false);
   const { showToast } = useToast();
 
-  useEffect(() => {
-    loadMatrix();
-  }, []);
-
-  const loadMatrix = async () => {
+  const loadMatrix = useCallback(async () => {
     try {
       setLoading(true);
       const data = await traceabilityApi.getMatrix();
@@ -24,7 +20,11 @@ export default function TraceabilityMatrixPage() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [showToast]);
+
+  useEffect(() => {
+    loadMatrix();
+  }, [loadMatrix]);
 
   const handleExport = async (format: "csv" | "json") => {
     try {

frontend/src/types/api.ts

@@ -35,7 +35,7 @@ export interface Requirement {
   status: RequirementStatus;
   module?: string;
   tags?: string[];
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
   source_system?: string;
   source_url?: string;
   created_by?: string;
@@ -52,7 +52,7 @@ export interface RequirementCreate {
   status?: RequirementStatus;
   module?: string;
   tags?: string[];
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
   source_system?: string;
   source_url?: string;
   created_by?: string;
@@ -67,7 +67,7 @@ export interface RequirementUpdate {
   status?: RequirementStatus;
   module?: string;
   tags?: string[];
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
   source_system?: string;
   source_url?: string;
 }
@@ -115,7 +115,7 @@ export interface TestCase {
   automated: boolean;
   automation_script?: string;
   estimated_duration_minutes?: number;
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
   created_by?: string;
   version: number;
   created_at: string;
@@ -137,7 +137,7 @@ export interface TestCaseCreate {
   automated?: boolean;
   automation_script?: string;
   estimated_duration_minutes?: number;
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
   created_by?: string;
   external_id?: string;
 }
@@ -157,7 +157,7 @@ export interface TestCaseUpdate {
   automated?: boolean;
   automation_script?: string;
   estimated_duration_minutes?: number;
-  custom_metadata?: Record<string, any>;
+  custom_metadata?: Record<string, unknown>;
 }
 
 export enum LinkType {
@@ -221,7 +221,7 @@ export interface Suggestion {
   similarity_score: number;
   suggestion_method: SuggestionMethod;
   suggestion_reason?: string;
-  suggestion_metadata?: Record<string, any>;
+  suggestion_metadata?: Record<string, unknown>;
   status: SuggestionStatus;
   created_at: string;
   reviewed_at?: string;