add tooltip for sidebar button

apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItem.tsx

@@ -1,6 +1,9 @@
-import { FC, useCallback } from 'react';
+import { useCallback } from 'react';
 
-import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
+import { UncontrolledTooltip } from 'reactstrap';
+
+import type { SidebarContentsType } from '~/interfaces/ui';
+import { SidebarMode } from '~/interfaces/ui';
 import { useCollapsedContentsOpened, useCurrentSidebarContents } from '~/stores/ui';
 
 
@@ -14,7 +17,7 @@ const useIndicator = (sidebarMode: SidebarMode, isSelected: boolean): string =>
   return isSelected ? 'active' : '';
 };
 
-export type Props = {
+type Props = {
   contents: SidebarContentsType,
   label: string,
   iconName: string,
@@ -24,7 +27,7 @@ export type Props = {
   onClick?: () => void,
 }
 
-export const PrimaryItem: FC<Props> = (props: Props) => {
+export const PrimaryItem = (props: Props): JSX.Element => {
   const {
     contents, label, iconName, sidebarMode, badgeContents,
     onClick, onHover,
@@ -62,19 +65,31 @@ export const PrimaryItem: FC<Props> = (props: Props) => {
   const labelForTestId = label.toLowerCase().replace(' ', '-');
 
   return (
-    <button
-      type="button"
-      data-testid={`grw-sidebar-nav-primary-${labelForTestId}`}
-      className={`btn btn-primary ${indicatorClass}`}
-      onClick={itemClickedHandler}
-      onMouseEnter={mouseEnteredHandler}
-    >
-      <div className="position-relative">
-        { badgeContents != null && (
-          <span className="position-absolute badge rounded-pill bg-primary">{badgeContents}</span>
-        )}
-        <span className="material-symbols-outlined">{iconName}</span>
-      </div>
-    </button>
+    <>
+      <button
+        type="button"
+        data-testid={`grw-sidebar-nav-primary-${labelForTestId}`}
+        className={`btn btn-primary ${indicatorClass}`}
+        onClick={itemClickedHandler}
+        onMouseEnter={mouseEnteredHandler}
+        id={labelForTestId}
+      >
+        <div className="position-relative">
+          { badgeContents != null && (
+            <span className="position-absolute badge rounded-pill bg-primary">{badgeContents}</span>
+          )}
+          <span className="material-symbols-outlined">{iconName}</span>
+        </div>
+      </button>
+      <UncontrolledTooltip
+        autohide
+        placement="right"
+        target={labelForTestId}
+        fade={false}
+      >
+        {label}
+      </UncontrolledTooltip>
+    </>
   );
 };
+PrimaryItem.displayName = 'PrimaryItem';