TRT-2822: Fix all no-unused-vars linter warnings in sippy frontend and enable error-level enforcement

sippy-ng/eslint.config.mjs

@@ -46,8 +46,12 @@ export default [
     },
     rules: {
       'no-unused-vars': [
-        'warn',
-        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
       ],
       'react/display-name': 'off',
       'react/jsx-uses-react': 'warn',

sippy-ng/src/App.jsx

@@ -399,7 +399,7 @@ const ChatInterfaceWrapper = () => {
   return <ChatInterface mode="fullPage" conversationId={id} />
 }
 
-function App(props) {
+function App(_props) {
   const classes = useStyles()
   const theme = useTheme()
 

sippy-ng/src/bugs/BugButton.jsx

@@ -4,15 +4,15 @@ import { safeEncodeURIComponent } from '../helpers'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
   alignedButton: {
     float: 'left',
   },
 }))
 
 export default function BugButton(props) {
   const classes = useStyles()
-  const [open, setOpen] = useState(false)
+  const [_open, _setOpen] = useState(false)
 
   const text = `
 The following test is failing more than expected:

sippy-ng/src/bugs/FileBug.jsx

@@ -282,7 +282,7 @@ See the [sippy test details|${url}] for additional context.
       })
   }
 
-  const clearAlerts = () => {
+  const _clearAlerts = () => {
     setSuccessAlert(null)
     setErrorAlert('')
     setIsValidationError(false)

sippy-ng/src/build_clusters/BuildClusterHealthChart.jsx

@@ -42,9 +42,9 @@ export default function BuildClusterHealthChart(props) {
     return <p>Loading...</p>
   }
 
-  let periodCount = 14
+  let _periodCount = 14
   if (props.period === 'hour') {
-    periodCount = 24
+    _periodCount = 24
   }
 
   let lastPeriodsSet = new Set()
@@ -70,7 +70,7 @@ export default function BuildClusterHealthChart(props) {
     plugins: {
       tooltip: {
         callbacks: {
-          label: function (context, index) {
+          label: function (context, _index) {
             return `${context.dataset.label} ${context.formattedValue}% (${
               data[context.dataset.label].by_period[context.label].current_runs
             } runs)`

sippy-ng/src/build_clusters/BuildClusterOverview.jsx

@@ -7,7 +7,7 @@ import BuildClusterTable from './BuildClusterTable'
 import Grid from '@mui/material/Grid'
 import InfoIcon from '@mui/icons-material/Info'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
   root: {
     flexGrow: 1,
   },
@@ -21,8 +21,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export default function BuildClusterOverview(props) {
-  const classes = useStyles()
+export default function BuildClusterOverview(_props) {
+  const _classes = useStyles()
 
   return (
     <Container size="xl">

sippy-ng/src/build_clusters/BuildClusterTable.jsx

@@ -13,7 +13,7 @@ import PassRateIcon from '../components/PassRateIcon'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
   root: {
     '& .wrapHeader .MuiDataGrid-columnHeaderTitle': {
       textOverflow: 'ellipsis',

sippy-ng/src/chat/AskSippyButton.jsx

@@ -7,7 +7,7 @@ import Alert from '@mui/material/Alert'
 import PropTypes from 'prop-types'
 import React, { useContext, useState } from 'react'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
   defaultStyledButton: {
     background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
     boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',

sippy-ng/src/chat/ChatInterface.jsx

@@ -191,20 +191,28 @@ export default function ChatInterface({
   const [isMaximized, setIsMaximized] = useState(false)
 
   // Get state and actions from custom hooks
-  const { sessions, activeSessionId, activeSession } = useSessionState()
+  const {
+    sessions: _sessions,
+    activeSessionId,
+    activeSession,
+  } = useSessionState()
   const {
     initializeSessions,
-    createSession,
-    switchSession,
-    deleteSession,
+    createSession: _createSession,
+    switchSession: _switchSession,
+    deleteSession: _deleteSession,
     forkActiveSession,
   } = useSessionActions()
 
-  const { shareLoading, loadingShared } = useShareState()
+  const { shareLoading: _shareLoading, loadingShared } = useShareState()
   const { clearSharedUrl, loadSharedConversationFromAPI } = useShareActions()
 
-  const { connectionState, isTyping, error, currentThinking } =
-    useConnectionState()
+  const {
+    connectionState,
+    isTyping: _isTyping,
+    error,
+    currentThinking,
+  } = useConnectionState()
   const { settings, ensureClientId } = useSettings()
 
   // Get messages from active session
@@ -220,7 +228,7 @@ export default function ChatInterface({
   const { messagesEndRef, messagesListRef, lastMessageRef } =
     useScrollManagement(activeSessionId, activeSession, messages, settings)
 
-  const isConnected = connectionState === CONNECTION_STATES.CONNECTED
+  const _isConnected = connectionState === CONNECTION_STATES.CONNECTED
 
   // Initialize sessions and client ID on mount
   useEffect(() => {

sippy-ng/src/chat/ChatMessage.jsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/icons-material'
 import { formatChatTimestamp, humanize, MESSAGE_TYPES } from './chatUtils'
 import { Link } from 'react-router-dom'
-import { makeStyles, useTheme } from '@mui/styles'
+import { makeStyles } from '@mui/styles'
 import { useModels } from './store/useChatStore'
 import MessageChart from './MessageChart'
 import PropTypes from 'prop-types'
@@ -19,7 +19,6 @@ import remarkGfm from 'remark-gfm'
 
 // Custom link component for ReactMarkdown that opens external links in new tabs
 const ChatLink = ({ href, children, ...props }) => {
-  const theme = useTheme()
   const isExternal =
     href && (href.startsWith('http://') || href.startsWith('https://'))
 
@@ -284,7 +283,7 @@ const useStyles = makeStyles((theme) => ({
 export default function ChatMessage({
   message,
   showTimestamp = true,
-  showTools = true,
+  showTools: _showTools = true,
 }) {
   const classes = useStyles()
   const { models } = useModels()

sippy-ng/src/chat/MessageChart.jsx

@@ -90,7 +90,7 @@ export default function MessageChart({ visualizations }) {
     }
   }
 
-  const handleExpandChart = (viz, index) => {
+  const handleExpandChart = (viz, _index) => {
     const expandedLayout = {
       ...viz.layout,
       paper_bgcolor: theme.palette.background.default,

sippy-ng/src/chat/store/personaSlice.jsx

@@ -1,7 +1,7 @@
 /**
  * Persona slice - manages available chat personas
  */
-export const createPersonaSlice = (set, get) => ({
+export const createPersonaSlice = (set, _get) => ({
   personas: [],
   personasLoading: false,
   personasError: null,

sippy-ng/src/chat/store/promptsSlice.jsx

@@ -1,7 +1,7 @@
 /**
  * Zustand slice for managing slash command prompts
  */
-export const createPromptsSlice = (set, get) => ({
+export const createPromptsSlice = (set, _get) => ({
   // State
   prompts: [],
   promptsLoading: false,

sippy-ng/src/chat/store/sessionSlice.jsx

@@ -86,7 +86,7 @@ export const createSessionSlice = (set, get) => ({
       setCurrentThinking,
       setError,
       setIsTyping,
-      connectionState,
+      connectionState: _connectionState,
       sendMessage,
     } = get()
 
@@ -319,7 +319,7 @@ export const createSessionSlice = (set, get) => ({
   // Message operations - operate on messages within the active session
   // Add a message to the active session
   addMessage: (message) => {
-    const { activeSessionId, sessions } = get()
+    const { activeSessionId, sessions: _sessions } = get()
     if (!activeSessionId) {
       console.warn('Cannot add message: no active session')
       return

sippy-ng/src/chat/store/shareSlice.jsx

@@ -275,7 +275,7 @@ export const createShareSlice = (set, get) => ({
           },
         })
       })
-      .catch((err) => {
+      .catch((_err) => {
         set({
           shareSnackbar: {
             open: true,

sippy-ng/src/component_readiness/AddRegressionPanel.jsx

@@ -9,7 +9,7 @@ import React, { Fragment } from 'react'
 import RegressionPotentialMatchesTab from './RegressionPotentialMatchesTab'
 import TriageFields from './TriageFields'
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles((_theme) => ({
   noMatchesMessage: {
     textAlign: 'center',
     padding: '8px',

sippy-ng/src/component_readiness/AdvancedOptions.jsx

@@ -19,7 +19,7 @@ import Typography from '@mui/material/Typography'
 
 export default function AdvancedOptions(props) {
   const {
-    headerName,
+    headerName: _headerName,
     confidence,
     pity,
     minFail,
@@ -71,7 +71,7 @@ export default function AdvancedOptions(props) {
   const handleChangeMinFail = (event, newValue) => {
     setMinFail(newValue)
   }
-  const handleChangePassRateNewTests = (event, newValue) => {
+  const handleChangePassRateNewTests = (event, _newValue) => {
     let value = parseInt(event.target.value, 10)
 
     if (value < 0) {
@@ -81,7 +81,7 @@ export default function AdvancedOptions(props) {
     }
     setPassRateNewTests(value)
   }
-  const handleChangePassRateAllTests = (event, newValue) => {
+  const handleChangePassRateAllTests = (event, _newValue) => {
     let value = parseInt(event.target.value, 10)
 
     if (value < 0) {

sippy-ng/src/component_readiness/CompCapTestRow.jsx

@@ -12,7 +12,7 @@ import TableRow from '@mui/material/TableRow'
 export default function CompCapTestRow(props) {
   const classes = useContext(ComponentReadinessStyleContext)
 
-  const { testCols, columnNames } = props
+  const { testCols, columnNames: _columnNames } = props
 
   // Put the testName on the left side with no link.
   const testNameColumn = (

sippy-ng/src/component_readiness/CompReadyEnvCapabilities.jsx

@@ -35,7 +35,7 @@ import WarningsBanner from './WarningsBanner'
 // Big query requests take a while so give the user the option to
 // abort in case they inadvertently requested a huge dataset.
 let abortController = new AbortController()
-const cancelFetch = () => {
+const _cancelFetch = () => {
   console.log('Aborting page2a')
   abortController.abort()
 }
@@ -225,7 +225,7 @@ export default function CompReadyEnvCapabilities(props) {
                 <Typography className={classes.crCellCapabCol}>Name</Typography>
               </TableCell>
               {columnNames
-                .filter((column, idx) =>
+                .filter((column, _idx) =>
                   column.match(new RegExp(escapeRegex(searchColumnRegex), 'i'))
                 )
                 .map((column, idx) => {
@@ -273,7 +273,7 @@ export default function CompReadyEnvCapabilities(props) {
                       key={componentIndex}
                       capabilityName={data.rows[componentIndex].capability}
                       results={data.rows[componentIndex].columns.filter(
-                        (column, idx) =>
+                        (column, _idx) =>
                           formColumnName(column).match(
                             new RegExp(escapeRegex(searchColumnRegex), 'i')
                           )

sippy-ng/src/component_readiness/CompReadyEnvCapability.jsx

@@ -35,7 +35,7 @@ import WarningsBanner from './WarningsBanner'
 // Big query requests take a while so give the user the option to
 // abort in case they inadvertently requested a huge dataset.
 let abortController = new AbortController()
-const cancelFetch = () => {
+const _cancelFetch = () => {
   console.log('Aborting page3')
   abortController.abort()
 }
@@ -219,7 +219,7 @@ export default function CompReadyEnvCapability(props) {
                 <Typography className={classes.crCellCapabCol}>Name</Typography>
               </TableCell>
               {columnNames
-                .filter((column, idx) =>
+                .filter((column, _idx) =>
                   column.match(new RegExp(escapeRegex(searchColumnRegex), 'i'))
                 )
                 .map((column, idx) => {
@@ -269,7 +269,7 @@ export default function CompReadyEnvCapability(props) {
                       testName={data.rows[componentIndex].test_name}
                       testId={data.rows[componentIndex].test_id}
                       results={data.rows[componentIndex].columns.filter(
-                        (column, idx) =>
+                        (column, _idx) =>
                           formColumnName(column).match(
                             new RegExp(escapeRegex(searchColumnRegex), 'i')
                           )

sippy-ng/src/component_readiness/CompReadyEnvCapabilityTest.jsx

@@ -34,7 +34,7 @@ import WarningsBanner from './WarningsBanner'
 // Big query requests take a while so give the user the option to
 // abort in case they inadvertently requested a huge dataset.
 let abortController = new AbortController()
-const cancelFetch = () => {
+const _cancelFetch = () => {
   console.log('Aborting page4')
   abortController.abort()
 }
@@ -58,8 +58,8 @@ export default function CompReadyEnvCapabilityTest(props) {
     'searchRow',
     StringParam
   )
-  const [searchRowRegex, setSearchRowRegex] = useState(searchRowRegexURL)
-  const handleSearchRowRegexChange = (event) => {
+  const [_searchRowRegex, setSearchRowRegex] = useState(searchRowRegexURL)
+  const _handleSearchRowRegexChange = (event) => {
     const searchValue = event.target.value
     setSearchRowRegex(searchValue)
   }
@@ -68,9 +68,9 @@ export default function CompReadyEnvCapabilityTest(props) {
     'searchColumn',
     StringParam
   )
-  const [searchColumnRegex, setSearchColumnRegex] =
+  const [_searchColumnRegex, setSearchColumnRegex] =
     useState(searchColumnRegexURL)
-  const handleSearchColumnRegexChange = (event) => {
+  const _handleSearchColumnRegexChange = (event) => {
     const searchValue = event.target.value
     setSearchColumnRegex(searchValue)
   }
@@ -79,12 +79,12 @@ export default function CompReadyEnvCapabilityTest(props) {
     'redOnly',
     BooleanParam
   )
-  const [redOnlyChecked, setRedOnlyChecked] = React.useState(redOnlyURL)
-  const handleRedOnlyCheckboxChange = (event) => {
+  const [_redOnlyChecked, setRedOnlyChecked] = React.useState(redOnlyURL)
+  const _handleRedOnlyCheckboxChange = (event) => {
     setRedOnlyChecked(event.target.checked)
   }
 
-  const clearSearches = () => {
+  const _clearSearches = () => {
     setSearchRowRegex('')
     if (searchRowRegexURL && searchRowRegexURL !== '') {
       setSearchRowRegexURL('')

sippy-ng/src/component_readiness/CompReadyMainInputs.jsx

@@ -46,7 +46,7 @@ export default function CompReadyMainInputs({ controlsOpts }) {
   ])
 
   const varsContext = useContext(CompReadyVarsContext)
-  const navigate = useNavigate()
+  const _navigate = useNavigate()
   const compReadyEnvOptions = (
     <div>
       <GroupByCheckboxList

sippy-ng/src/component_readiness/CompReadyTestDetailRow.jsx

@@ -42,7 +42,7 @@ export default function CompReadyTestDetailRow(props) {
   } = props
 
   const handlerForJobRunSelect = (jobId) => {
-    return (element) => {
+    return (_element) => {
       if (searchJobRunIds.has(jobId)) {
         setSearchJobRunIds(searchJobRunIds.difference(new Set([jobId])))
       } else {