From a978b6de27bd2206c1496c1e69efeafa33f35447 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Mon, 9 Dec 2024 10:30:37 +0100
Subject: [PATCH] Add tooltips for the history navigation panel

---
 package-lock.json                             | 16 ------
 package.json                                  |  1 -
 .../HistoryNavigationPanel/index.tsx          | 55 +++++++++++--------
 webpack.dev.ts                                | 41 +++++++-------
 webpack.prod.ts                               | 30 +++++-----
 5 files changed, 65 insertions(+), 78 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 60c629c6..2e0aa036 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,7 +92,6 @@
         "typescript-plugin-styled-components": "^2.0.0",
         "webpack": "^5.97.1",
         "webpack-cli": "^5.1.4",
-        "webpack-merge": "^6.0.1",
         "zip-webpack-plugin": "^4.0.2"
       }
     },
@@ -17593,21 +17592,6 @@
         "strip-ansi": "^6.0.0"
       }
     },
-    "node_modules/webpack-merge": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-6.0.1.tgz",
-      "integrity": "sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "clone-deep": "^4.0.1",
-        "flat": "^5.0.2",
-        "wildcard": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
diff --git a/package.json b/package.json
index 1806b891..d48828fc 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,6 @@
     "typescript-plugin-styled-components": "^2.0.0",
     "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^6.0.1",
     "zip-webpack-plugin": "^4.0.2"
   },
   "dependencies": {
diff --git a/src/components/Navigation/HistoryNavigationPanel/index.tsx b/src/components/Navigation/HistoryNavigationPanel/index.tsx
index b47e1a36..99ddd01b 100644
--- a/src/components/Navigation/HistoryNavigationPanel/index.tsx
+++ b/src/components/Navigation/HistoryNavigationPanel/index.tsx
@@ -13,6 +13,7 @@ import { useHistory } from "../../Main/useHistory";
 import { HomeIcon } from "../../common/icons/16px/HomeIcon";
 import { ChevronIcon } from "../../common/icons/20px/ChevronIcon";
 import { Direction } from "../../common/icons/types";
+import { Tooltip } from "../../common/v3/Tooltip";
 import { trackingEvents } from "../tracking";
 import * as s from "./styles";
 
@@ -151,29 +152,37 @@ export const HistoryNavigationPanel = () => {
 
   return (
     <s.Container $isActive={isAtSpan}>
-      <s.Button onClick={handleBackButtonClick} disabled={!canGoBack}>
-        <ChevronIcon
-          direction={Direction.LEFT}
-          size={16}
-          color={"currentColor"}
-        />
-      </s.Button>
-      <s.Button onClick={handleForwardButtonClick} disabled={!canGoForward}>
-        <ChevronIcon
-          direction={Direction.RIGHT}
-          size={16}
-          color={"currentColor"}
-        />
-      </s.Button>
-      <s.Button onClick={handleHomeButtonClick} disabled={!isAtSpan}>
-        <HomeIcon
-          color={isAtSpan ? "currentColor" : theme.colors.v3.icon.brandPrimary}
-          size={16}
-          fillColor={
-            isAtSpan ? undefined : theme.colors.v3.surface.brandPrimary
-          }
-        />
-      </s.Button>
+      <Tooltip title={"Go back"}>
+        <s.Button onClick={handleBackButtonClick} disabled={!canGoBack}>
+          <ChevronIcon
+            direction={Direction.LEFT}
+            size={16}
+            color={"currentColor"}
+          />
+        </s.Button>
+      </Tooltip>
+      <Tooltip title={"Go forward"}>
+        <s.Button onClick={handleForwardButtonClick} disabled={!canGoForward}>
+          <ChevronIcon
+            direction={Direction.RIGHT}
+            size={16}
+            color={"currentColor"}
+          />
+        </s.Button>
+      </Tooltip>
+      <Tooltip title={"Go home"}>
+        <s.Button onClick={handleHomeButtonClick} disabled={!isAtSpan}>
+          <HomeIcon
+            color={
+              isAtSpan ? "currentColor" : theme.colors.v3.icon.brandPrimary
+            }
+            size={16}
+            fillColor={
+              isAtSpan ? undefined : theme.colors.v3.surface.brandPrimary
+            }
+          />
+        </s.Button>
+      </Tooltip>
     </s.Container>
   );
 };
diff --git a/webpack.dev.ts b/webpack.dev.ts
index 1ed54aa3..fe8f8b36 100644
--- a/webpack.dev.ts
+++ b/webpack.dev.ts
@@ -1,30 +1,27 @@
 import path from "path";
 import createStyledComponentsTransformer from "typescript-plugin-styled-components";
 import { Configuration as WebpackConfiguration } from "webpack";
-import { merge } from "webpack-merge";
-import { WebpackEnv } from "./apps";
-import commonConfig from "./webpack.common";
 
 const styledComponentsTransformer = createStyledComponentsTransformer();
 
-const getConfig = (env: WebpackEnv): WebpackConfiguration =>
-  merge(commonConfig(env), {
-    mode: "development",
-    devtool: "eval-source-map",
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          loader: "ts-loader",
-          options: {
-            configFile: path.resolve(__dirname, "./tsconfig.dev.json"),
-            getCustomTransformers: () => ({
-              before: [styledComponentsTransformer]
-            })
-          }
+const config: WebpackConfiguration = {
+  extends: path.resolve(__dirname, "./webpack.common.ts"),
+  mode: "development",
+  devtool: "eval-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        options: {
+          configFile: path.resolve(__dirname, "./tsconfig.dev.json"),
+          getCustomTransformers: () => ({
+            before: [styledComponentsTransformer]
+          })
         }
-      ]
-    }
-  });
+      }
+    ]
+  }
+};
 
-export default getConfig;
+export default config;
diff --git a/webpack.prod.ts b/webpack.prod.ts
index b107efe7..f6da242e 100644
--- a/webpack.prod.ts
+++ b/webpack.prod.ts
@@ -1,19 +1,17 @@
+import path from "path";
 import { Configuration as WebpackConfiguration } from "webpack";
-import { merge } from "webpack-merge";
-import { WebpackEnv } from "./apps";
-import commonConfig from "./webpack.common";
 
-const getConfig = (env: WebpackEnv): WebpackConfiguration =>
-  merge(commonConfig(env), {
-    mode: "production",
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: ["ts-loader"]
-        }
-      ]
-    }
-  });
+const config: WebpackConfiguration = {
+  extends: path.resolve(__dirname, "./webpack.common.ts"),
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ["ts-loader"]
+      }
+    ]
+  }
+};
 
-export default getConfig;
+export default config;