refactor: avoid lint errors by renaming prop

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/layout/Page.test.tsx

@@ -4,7 +4,7 @@ import { Page } from './Page';
 
 describe('renderer/components/layout/Page.tsx', () => {
   it('should render itself & its children', () => {
-    const tree = render(<Page id="test">Test</Page>);
+    const tree = render(<Page testId="test">Test</Page>);
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/layout/Page.tsx

@@ -4,17 +4,17 @@ import { Box } from '@primer/react';
 
 interface IPage {
   children: ReactNode;
-  id: string;
+  testId?: string;
 }
 
 /**
  * Page component represents a single page view.
  * It creates a column layout for header, content, and footer.
  * The height is 100% to fill the parent container.
  */
-export const Page: FC<IPage> = ({ children, id }) => {
+export const Page: FC<IPage> = ({ children, testId }) => {
   return (
-    <Box className="flex flex-col h-screen" data-testid={id}>
+    <Box className="flex flex-col h-screen" data-testid={testId}>
       {children}
     </Box>
   );

src/renderer/routes/Accounts.tsx

@@ -110,7 +110,7 @@ export const AccountsRoute: FC = () => {
   }, []);
 
   return (
-    <Page id="accounts">
+    <Page testId="accounts">
       <Header icon={PersonIcon}>Accounts</Header>
 
       <Contents>

src/renderer/routes/Filters.tsx

@@ -19,7 +19,7 @@ export const FiltersRoute: FC = () => {
   const { clearFilters } = useContext(AppContext);
 
   return (
-    <Page id="filters">
+    <Page testId="filters">
       <Header fetchOnBack icon={FilterIcon}>
         Filters
       </Header>

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -133,7 +133,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
   );
 
   return (
-    <Page id="Login With OAuth App">
+    <Page testId="Login With OAuth App">
       <Header icon={PersonIcon}>Login with OAuth App</Header>
 
       <Contents>

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -125,7 +125,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
   );
 
   return (
-    <Page id="Login With Personal Access Token">
+    <Page testId="Login With Personal Access Token">
       <Header icon={KeyIcon}>Login with Personal Access Token</Header>
 
       <Contents>

src/renderer/routes/Notifications.tsx

@@ -37,7 +37,7 @@ export const NotificationsRoute: FC = () => {
   }
 
   return (
-    <Page id="notifications">
+    <Page testId="notifications">
       <Contents paddingHorizontal={false}>
         {notifications.map((accountNotifications) => (
           <AccountNotifications

src/renderer/routes/Settings.tsx

@@ -14,7 +14,7 @@ import { SystemSettings } from '../components/settings/SystemSettings';
 
 export const SettingsRoute: FC = () => {
   return (
-    <Page id="settings">
+    <Page testId="settings">
       <Header fetchOnBack icon={GearIcon}>
         Settings
       </Header>