fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors

src/components/Header/HeaderToolTipIcon.tsx

@@ -1,31 +1,37 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';
 
 import IconButton from '../../muiComponents/IconButton';
 
-import { IconSearchButton, StyledExternalLink } from './styles';
+import { IconSearchButton, StyledLink } from './styles';
 
 export type TooltipIconType = 'search' | 'help' | 'info';
-
 interface Props {
   tooltipIconType: TooltipIconType;
   onClick?: () => void;
 }
 
-const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
+type HeaderToolTipIconRef = HTMLButtonElement;
+
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/display-name */
+const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
+  { tooltipIconType, onClick },
+  ref
+) {
   switch (tooltipIconType) {
     case 'help':
       return (
-        <StyledExternalLink
-          blank={true}
+        <StyledLink
           data-testid={'header--tooltip-documentation'}
+          external={true}
           to={'https://verdaccio.org/docs/en/installation'}>
           <IconButton color={'inherit'}>
             <Help />
           </IconButton>
-        </StyledExternalLink>
+        </StyledLink>
       );
     case 'info':
       return (
@@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
           color="inherit"
           data-testid={'header--tooltip-info'}
           id="header--button-registryInfo"
-          onClick={onClick}>
+          onClick={onClick}
+          ref={ref}>
           <Info />
         </IconButton>
       );
@@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
     default:
       return null;
   }
-};
+});
 
 export default HeaderToolTipIcon;