From 7f6cb505acc4dc0bc755c1002b86a90dc0cb2cc5 Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Fri, 3 Jan 2025 11:49:49 +0530
Subject: [PATCH] fix: function image in search bar (#5565)

This PR solves #5551

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Enhanced theme-based icon management in the search bar
	- Dynamically updated icons based on application theme

- **Improvements**
	- Improved maintainability of icon path handling
	- Centralized icon selection logic for better code readability
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../assets/images/common/function_dark.svg    |  8 ++++++
 web/src/plugins/logs/SearchBar.vue            | 26 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 web/src/assets/images/common/function_dark.svg

diff --git a/web/src/assets/images/common/function_dark.svg b/web/src/assets/images/common/function_dark.svg
new file mode 100644
index 0000000000..52f2fcbd5a
--- /dev/null
+++ b/web/src/assets/images/common/function_dark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg enable-background="new 0 0 60 54" height="54px" id="Layer_1" version="1.1" viewBox="0 0 60 54" width="60px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <path d="M24.703,17.77l-3.428,13.535c-1.602,6.387-3.164,11.016-4.688,13.887s-3.306,4.995-5.347,6.372   c-2.041,1.377-4.38,2.065-7.017,2.065c-1.66,0-2.881-0.318-3.662-0.952c-0.781-0.635-1.172-1.382-1.172-2.241   c0-0.801,0.322-1.494,0.967-2.08s1.494-0.879,2.549-0.879c0.879,0,1.553,0.225,2.021,0.674s0.703,1.016,0.703,1.699   c0,0.625-0.146,1.088-0.439,1.392c-0.293,0.303-0.439,0.503-0.439,0.601l0.146,0.205c0.117,0.098,0.254,0.146,0.41,0.146   c0.586,0,1.084-0.186,1.494-0.557c1.036-0.918,1.807-2.031,2.314-3.34c0.352-0.898,1.025-3.271,2.021-7.119l5.977-23.408h-4.072   l0.967-3.428c1.465,0.02,2.529-0.166,3.193-0.557c0.664-0.391,1.367-1.27,2.109-2.637c2.148-3.965,4.414-6.807,6.797-8.525   c2.383-1.718,5.039-2.578,7.969-2.578c1.875,0,3.237,0.362,4.087,1.084c0.85,0.723,1.274,1.66,1.274,2.813   c0,1.016-0.283,1.821-0.85,2.417c-0.566,0.596-1.27,0.894-2.109,0.894c-0.781,0-1.426-0.244-1.934-0.732   c-0.508-0.488-0.762-1.074-0.762-1.758c0-0.488,0.161-1.006,0.483-1.553c0.322-0.546,0.483-0.918,0.483-1.113   c0-0.215-0.073-0.391-0.22-0.527c-0.146-0.136-0.337-0.205-0.571-0.205c-1.152,0-2.334,0.713-3.545,2.139   c-1.992,2.285-3.594,5.899-4.805,10.84h4.248l-1.025,3.428H24.703z" fill="#ffffff"/>
+    <path d="M31.705,15.279l10.225-1.758c1.855,2.911,3.164,6.113,3.926,9.609c1.914-2.832,3.359-4.814,4.336-5.947   c1.309-1.523,2.388-2.515,3.237-2.974c0.85-0.458,1.753-0.688,2.71-0.688c1.074,0,1.899,0.293,2.476,0.879   c0.575,0.586,0.864,1.377,0.864,2.373c0,0.938-0.289,1.704-0.864,2.3c-0.576,0.596-1.294,0.894-2.153,0.894   c-0.625,0-1.344-0.112-2.153-0.337c-0.811-0.224-1.372-0.337-1.685-0.337c-0.82,0-1.602,0.293-2.344,0.879   c-1.016,0.801-2.266,2.51-3.75,5.127c1.66,5.859,2.988,9.434,3.984,10.723c0.586,0.762,1.182,1.143,1.787,1.143   c0.508,0,0.947-0.127,1.318-0.381c0.566-0.41,1.436-1.436,2.607-3.076l1.055,0.615c-1.719,2.773-3.398,4.727-5.039,5.859   c-1.25,0.879-2.48,1.318-3.691,1.318c-1.25,0-2.29-0.278-3.12-0.835c-0.831-0.557-1.567-1.465-2.212-2.725s-1.406-3.276-2.285-6.05   c-2.285,2.91-4.077,5.035-5.376,6.372c-1.3,1.338-2.378,2.212-3.237,2.622S30.543,41.5,29.566,41.5   c-1.015,0-1.821-0.293-2.417-0.879c-0.596-0.586-0.894-1.348-0.894-2.285c0-0.996,0.322-1.816,0.967-2.461s1.465-0.967,2.461-0.967   c0.527,0,1.123,0.156,1.787,0.469c0.977,0.469,1.68,0.703,2.109,0.703c0.566,0,1.074-0.117,1.523-0.352   c0.586-0.293,1.328-0.928,2.227-1.904c0.547-0.605,1.553-1.895,3.018-3.867c-1.875-6.953-3.34-11.113-4.395-12.48   c-0.664-0.879-1.504-1.318-2.52-1.318c-0.527,0-1.172,0.078-1.934,0.234L31.705,15.279z" fill="#ffffff"/>
+  </g>
+</svg>
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 1dffb6afdd..69edcaad13 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -302,7 +302,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <q-toggle
           data-test="logs-search-bar-show-query-toggle-btn"
           v-model="searchObj.meta.toggleFunction"
-          :icon="'img:' + getImageURL('images/common/function.svg')"
+          :icon="functionToggleIcon"
           title="Toggle Function Editor"
           class="float-left"
           size="32px"
@@ -317,7 +317,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             auto-close
             size="12px"
             icon="save"
-            :icon-right="'img:' + getImageURL('images/common/function.svg')"
+            :icon-right="iconRight"
             :title="t('search.functionPlaceholder')"
             split
             class="no-outline saved-views-dropdown no-border btn-function"
@@ -2714,6 +2714,26 @@ export default defineComponent({
       );
       disable.value = panelsValues.some((item: any) => item === true);
     });
+    const iconRight = computed(() => {
+      return (
+        "img:" +
+        getImageURL(
+          store.state.theme === "dark"
+            ? "images/common/function_dark.svg"
+            : "images/common/function.svg",
+        )
+      );
+    });
+    const functionToggleIcon = computed(() => {
+      return (
+        "img:" +
+        getImageURL(
+          searchObj.meta.toggleFunction
+            ? "images/common/function_dark.svg"
+            : "images/common/function.svg",
+        )
+      );
+    });
 
     // [END] cancel running queries
 
@@ -2803,6 +2823,8 @@ export default defineComponent({
       backgroundColorStyle,
       editorWidthToggleFunction,
       fnParsedSQL,
+      iconRight,
+      functionToggleIcon,
     };
   },
   computed: {