Migrate Add Database Panel to React (#597)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Common/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,16 @@
+import { Icon, TooltipHost } from "@fluentui/react";
+import * as React from "react";
+
+export interface TooltipProps {
+  children: string;
+}
+
+export const InfoTooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+  return (
+    <span>
+      <TooltipHost content={children}>
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
+      </TooltipHost>
+    </span>
+  );
+};

src/Common/Tooltip/Tooltip.tsx

@@ -1,24 +0,0 @@
-import { ITooltipHostStyles, TooltipHost } from "@fluentui/react";
-import { useId } from "@fluentui/react-hooks";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};