Add tooltips for the history navigation panel

digma-ai · Dec 9, 2024 · a978b6d · a978b6d
1 parent 584747a
commit a978b6d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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;