fix: use correct icon in ConditionalIconButton

packages/web/src/components/ConditionalIconButton/index.tsx

@@ -6,7 +6,7 @@ import Button from '@mui/material/Button';
 import { IconButton } from './style';
 
 export default function ConditionalIconButton(props: any) {
-  const { Icon, ...buttonProps } = props;
+  const { icon, ...buttonProps } = props;
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
 
@@ -17,9 +17,8 @@ export default function ConditionalIconButton(props: any) {
         type={buttonProps.type}
         size={buttonProps.size}
         component={buttonProps.component}
-        to={buttonProps.to}
       >
-        <Icon />
+        {icon}
       </IconButton>
     )
   }

packages/web/src/pages/Applications/index.tsx

@@ -1,10 +1,12 @@
-import { useCallback, useState } from 'react';
+import * as React from 'react';
 import { Link, Routes, Route, useNavigate } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import AddIcon from '@mui/icons-material/Add';
 
+
 import ConditionalIconButton from 'components/ConditionalIconButton';
 import Container from 'components/Container';
 import AddNewAppConnection from 'components/AddNewAppConnection';
@@ -19,17 +21,28 @@ import type { App } from 'types/app';
 export default function Applications() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
-  const [appName, setAppName] = useState(null);
+  const [appName, setAppName] = React.useState(null);
   const { data } = useQuery(GET_CONNECTED_APPS, { variables: {name: appName } });
 
-  const onSearchChange = useCallback((event) => {
+  const onSearchChange = React.useCallback((event) => {
     setAppName(event.target.value);
   }, []);
 
-  const goToApps = useCallback(() => {
+  const goToApps = React.useCallback(() => {
     navigate(URLS.APPS);
   }, [navigate]);
 
+  const NewAppConnectionLink = React.useMemo(
+    () =>
+      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function InlineLink(
+        linkProps,
+        ref,
+      ) {
+        return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
+      }),
+    [],
+  );
+
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -48,10 +61,9 @@ export default function Applications() {
               variant="contained"
               color="primary"
               size="large"
-              component={Link}
+              component={NewAppConnectionLink}
-              to={URLS.NEW_APP_CONNECTION}
               fullWidth
-              Icon={<AddIcon />}
+              icon={<AddIcon />}
             >
               {formatMessage('apps.addConnection')}
             </ConditionalIconButton>