From 88f5ba1d1188d1b5baf53b2838006a39306297c8 Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Sun, 8 Oct 2023 11:09:45 +0530
Subject: [PATCH 1/6] feat: Add tooltip component from mantine

---
 .../src/components/tooltip/ToolTip.tsx        | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 platform/firecamp-ui/src/components/tooltip/ToolTip.tsx

diff --git a/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx b/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
new file mode 100644
index 00000000..73effc22
--- /dev/null
+++ b/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import { MantineColor, Tooltip as MantineToolTip } from '@mantine/core';
+import { ArrowPosition, FloatingPosition } from '@mantine/core/lib/Floating';
+
+interface IToolTip {
+  arrowOffset?: number;
+  arrowPosition?: ArrowPosition;
+  arrowRadius?: number;
+  arrowSize?: number;
+  children: React.ReactNode;
+  closeDelay?: number;
+  color?: MantineColor;
+  disabled?: boolean;
+  events?: {
+    hover: boolean;
+    focus: boolean;
+    touch: boolean;
+  };
+  label: React.ReactNode;
+  multiline?: boolean;
+  offset?: number;
+  openDelay?: number;
+  postition?: FloatingPosition;
+  withArrow?: boolean;
+}
+
+const ToolTip: FC<IToolTip> = ({ label, children, ...props }) => {
+  return (
+    <MantineToolTip label={label} {...props}>
+      {children}
+    </MantineToolTip>
+  );
+};
+
+export default ToolTip;

From 5599571ce20246aa1971a4f759368b2343a65315 Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Sun, 8 Oct 2023 11:16:14 +0530
Subject: [PATCH 2/6] feat: integrate tooltip component with sidebar

---
 .../containers/SidebarContainer.tsx           |  10 +-
 .../components/activity-bar/ActionItem.tsx    | 104 +++++++++++-------
 .../components/activity-bar/ActionItems.tsx   |  30 +++--
 3 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
index 889b6768..5319c248 100644
--- a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
+++ b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
@@ -38,8 +38,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `Collections (${scPrefix} ⇧ C)`,
     item: EActivityBarItems.Explorer,
+    toolTip: `Collections (${scPrefix} ⇧ C)`,
   },
   {
     id: EActivityBarItems.Environment,
@@ -52,8 +52,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `Environment (${scPrefix} ⇧ E)`,
     item: EActivityBarItems.Environment,
+    toolTip: `Environment (${scPrefix} ⇧ E)`,
   },
   {
     id: EActivityBarItems.History,
@@ -66,8 +66,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `History (${scPrefix} ⇧ H)`,
     item: EActivityBarItems.History,
+    toolTip: `History (${scPrefix} ⇧ H)`,
   },
 ];
 
@@ -106,8 +106,8 @@ const actionBarItems = [
         tabIndex={-1}
       />
     ),
-    text: `User (${scPrefix} ⇧ U)`,
     item: EActivityBarItems.User,
+    toolTip: `User (${scPrefix} ⇧ U)`,
   },
   {
     id: EActivityBarItems.Settings,
@@ -118,8 +118,8 @@ const actionBarItems = [
         tabIndex={-1}
       />
     ),
-    text: `Settings (${scPrefix} ⇧ /)`,
     item: EActivityBarItems.Settings,
+    toolTip: `Settings (${scPrefix} ⇧ /)`,
   },
 ];
 
diff --git a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
index e480c9c9..d5f292e5 100644
--- a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, forwardRef } from 'react';
 import cx from 'classnames';
 import { UserCircle2 } from 'lucide-react';
-// import ReactTooltip from 'react-tooltip';
+import ToolTip from '../tooltip/ToolTip';
 
 const ActionItem: FC<IActionItem> = ({
   id = '',
@@ -10,48 +10,70 @@ const ActionItem: FC<IActionItem> = ({
   active = false,
   onClick = () => {},
   icon = '',
-  tooltip = '',
+  tooltip,
 }) => {
+  const Item = forwardRef<HTMLDivElement, IActionItem>(
+    (
+      {
+        active = false,
+        className = '',
+        style = {},
+        onClick = () => {},
+        icon = '',
+      },
+      ref
+    ) => (
+      <div
+        tabIndex={1}
+        className={cx(
+          'h-12 flex justify-center items-center cursor-pointer relative text-2xl action-item',
+          {
+            'text-activityBar-foreground-inactive hover:text-activityBar-foreground':
+              active == false,
+          },
+          {
+            'before:block before:z-0 before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-activityBar-border-active text-activityBar-foreground bg-activityBar-background-active':
+              active == true,
+          },
+          className
+        )}
+        style={style}
+        onClick={onClick}
+        data-for={id}
+        ref={ref}
+      >
+        {!!icon ? icon : <UserCircle2 tabIndex={-1} data-for={id} />}
+      </div>
+    )
+  );
 
-  return (
-    <div
-      tabIndex={1}
-      className={cx(
-        'h-12 flex justify-center items-center cursor-pointer relative text-2xl action-item',
-        {
-          'text-activityBar-foreground-inactive hover:text-activityBar-foreground':
-            active == false,
-        },
-        {
-          'before:block before:z-0 before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-activityBar-border-active text-activityBar-foreground bg-activityBar-background-active':
-            active == true,
-        },
-        className
-      )}
-      style={style}
-      onClick={onClick}
-      data-tip={tooltip}
-      data-for={id}
+  return tooltip ? (
+    <ToolTip
+      arrowOffset={5}
+      arrowSize={6}
+      arrowPosition="side"
+      label={tooltip}
+      postition="top"
+      withArrow={true}
     >
-      {!!icon ? (
-        icon
-      ) : (
-        <UserCircle2
-          /*title="Account"
-              size={24}*/
-          tabIndex={-1}
-          data-tip={tooltip}
-          data-for={id}
-        />
-      )}
-       {/* @ts-ignore
-       <ReactTooltip
-        data-delay-hide='10000'
+      <Item
+        active={active}
+        className={className}
         id={id}
-        className="bg-app-foreground-inactive"
-        place="right"
-        effect="float" /> */}
-    </div>
+        onClick={onClick}
+        style={style}
+        icon={icon}
+      />
+    </ToolTip>
+  ) : (
+    <Item
+      active={active}
+      className={className}
+      id={id}
+      icon={icon}
+      onClick={onClick}
+      style={style}
+    />
   );
 };
 
@@ -89,7 +111,7 @@ export interface IActionItem {
   /**
    * Add a tooltip
    */
-  tooltip: string;
+  tooltip?: string;
 
   onClick: () => void;
 }
diff --git a/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx b/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
index 4ff315cc..a91946ac 100644
--- a/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
@@ -4,52 +4,48 @@ import ActionItem from './ActionItem';
 const ActionItems: FC<IActionItems> = ({
   items = [],
   activeItem = '',
-  onClickItem = () => { }
+  onClickItem = () => {},
 }) => {
   return (
     <Fragment>
-      {items.map((item: any, i: number) =>
-      (
+      {items.map((item: any, i: number) => (
         <ActionItem
           id={item.id}
           icon={item.icon}
-          tooltip={item.text}
+          tooltip={item.toolTip}
           key={i}
           active={activeItem === item.id}
           onClick={() => {
-            onClickItem(item)
+            onClickItem(item);
           }}
         />
-      )
-      )}
+      ))}
     </Fragment>
   );
 };
 
-export default ActionItems
-
+export default ActionItems;
 
 ActionItems.defaultProps = {
   id: '',
   className: '',
-  items: []
+  items: [],
 };
 
 export interface IActionItems {
+  activeItem?: string;
 
-  activeItem?: string,
-
-  onClickItem: (action: any) => void,
+  onClickItem: (action: any) => void;
   /**
    * Is this the principal call to action on the page?
    */
-  id?: string,
+  id?: string;
   /**
    * Add class name to show custom styling
    */
-  className?: string,
+  className?: string;
   /**
    * to show list of action items
    */
-  items?: any[]
-}
\ No newline at end of file
+  items?: any[];
+}

From 168a4a2ff01b48ecdcb9489674446632fb45eef1 Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Sun, 8 Oct 2023 14:19:28 +0530
Subject: [PATCH 3/6] chore: fix all typos

---
 .../src/components/activity-bar/ActionItem.tsx     |  8 ++++----
 .../firecamp-ui/src/components/tooltip/ToolTip.tsx | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
index d5f292e5..66cf053a 100644
--- a/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx
@@ -1,7 +1,7 @@
 import { FC, forwardRef } from 'react';
 import cx from 'classnames';
 import { UserCircle2 } from 'lucide-react';
-import ToolTip from '../tooltip/ToolTip';
+import Tooltip from '../tooltip/Tooltip';
 
 const ActionItem: FC<IActionItem> = ({
   id = '',
@@ -48,12 +48,12 @@ const ActionItem: FC<IActionItem> = ({
   );
 
   return tooltip ? (
-    <ToolTip
+    <Tooltip
       arrowOffset={5}
       arrowSize={6}
       arrowPosition="side"
       label={tooltip}
-      postition="top"
+      position="right"
       withArrow={true}
     >
       <Item
@@ -64,7 +64,7 @@ const ActionItem: FC<IActionItem> = ({
         style={style}
         icon={icon}
       />
-    </ToolTip>
+    </Tooltip>
   ) : (
     <Item
       active={active}
diff --git a/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx b/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
index 73effc22..f3c65b0a 100644
--- a/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
+++ b/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
@@ -1,9 +1,9 @@
 import { FC } from 'react';
 
-import { MantineColor, Tooltip as MantineToolTip } from '@mantine/core';
+import { MantineColor, Tooltip as MantineTooltip } from '@mantine/core';
 import { ArrowPosition, FloatingPosition } from '@mantine/core/lib/Floating';
 
-interface IToolTip {
+interface ITooltip {
   arrowOffset?: number;
   arrowPosition?: ArrowPosition;
   arrowRadius?: number;
@@ -21,16 +21,16 @@ interface IToolTip {
   multiline?: boolean;
   offset?: number;
   openDelay?: number;
-  postition?: FloatingPosition;
+  position?: FloatingPosition;
   withArrow?: boolean;
 }
 
-const ToolTip: FC<IToolTip> = ({ label, children, ...props }) => {
+const Tooltip: FC<ITooltip> = ({ label, children, ...props }) => {
   return (
-    <MantineToolTip label={label} {...props}>
+    <MantineTooltip label={label} {...props}>
       {children}
-    </MantineToolTip>
+    </MantineTooltip>
   );
 };
 
-export default ToolTip;
+export default Tooltip;

From e390c4480d061d4fd59657d314dbae4e5da7b295 Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Mon, 9 Oct 2023 15:00:25 +0530
Subject: [PATCH 4/6] chore: fix typo

---
 .../src/components/containers/SidebarContainer.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
index 5319c248..ff3dbfe0 100644
--- a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
+++ b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
@@ -39,7 +39,7 @@ const compositeBarItems = [
       />
     ),
     item: EActivityBarItems.Explorer,
-    toolTip: `Collections (${scPrefix} ⇧ C)`,
+    tooltip: `Collections (${scPrefix} ⇧ C)`,
   },
   {
     id: EActivityBarItems.Environment,

From d80b0237acfd6e2774d5a88041376b8af822d21e Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Mon, 9 Oct 2023 15:06:21 +0530
Subject: [PATCH 5/6] chore: fix rename file

---
 .../src/components/tooltip/{ToolTip.tsx => Tooltip.tsx}           | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename platform/firecamp-ui/src/components/tooltip/{ToolTip.tsx => Tooltip.tsx} (100%)

diff --git a/platform/firecamp-ui/src/components/tooltip/ToolTip.tsx b/platform/firecamp-ui/src/components/tooltip/Tooltip.tsx
similarity index 100%
rename from platform/firecamp-ui/src/components/tooltip/ToolTip.tsx
rename to platform/firecamp-ui/src/components/tooltip/Tooltip.tsx

From 4eeed541794a71ba90b1c875ea880db87982d4e4 Mon Sep 17 00:00:00 2001
From: Dhoni77 <aldrinmarz7@gmail.com>
Date: Mon, 9 Oct 2023 19:00:31 +0530
Subject: [PATCH 6/6] chore: fix typo

---
 .../src/components/containers/SidebarContainer.tsx        | 8 ++++----
 .../src/components/activity-bar/ActionItems.tsx           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
index ff3dbfe0..3e1bedef 100644
--- a/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
+++ b/platform/firecamp-platform/src/components/containers/SidebarContainer.tsx
@@ -53,7 +53,7 @@ const compositeBarItems = [
       />
     ),
     item: EActivityBarItems.Environment,
-    toolTip: `Environment (${scPrefix} ⇧ E)`,
+    tooltip: `Environment (${scPrefix} ⇧ E)`,
   },
   {
     id: EActivityBarItems.History,
@@ -67,7 +67,7 @@ const compositeBarItems = [
       />
     ),
     item: EActivityBarItems.History,
-    toolTip: `History (${scPrefix} ⇧ H)`,
+    tooltip: `History (${scPrefix} ⇧ H)`,
   },
 ];
 
@@ -107,7 +107,7 @@ const actionBarItems = [
       />
     ),
     item: EActivityBarItems.User,
-    toolTip: `User (${scPrefix} ⇧ U)`,
+    tooltip: `User (${scPrefix} ⇧ U)`,
   },
   {
     id: EActivityBarItems.Settings,
@@ -119,7 +119,7 @@ const actionBarItems = [
       />
     ),
     item: EActivityBarItems.Settings,
-    toolTip: `Settings (${scPrefix} ⇧ /)`,
+    tooltip: `Settings (${scPrefix} ⇧ /)`,
   },
 ];
 
diff --git a/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx b/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
index a91946ac..d3d27357 100644
--- a/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx
@@ -12,7 +12,7 @@ const ActionItems: FC<IActionItems> = ({
         <ActionItem
           id={item.id}
           icon={item.icon}
-          tooltip={item.toolTip}
+          tooltip={item.tooltip}
           key={i}
           active={activeItem === item.id}
           onClick={() => {