Merge pull request #1607 from devtron-labs/chore/build-infra-helpers

chore: move highlight text to common and add base classes

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.58-beta-8",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.58-beta-22",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/components/common/helpers/Helpers.tsx

@@ -1022,34 +1022,6 @@ export const highlightSearchedText = (searchText: string, matchString: string):
     return matchString.replace(regex, highlightText)
 }
 
-interface HighlightSearchTextProps {
-    /**
-     * The text to be highlighted
-     */
-    searchText: string
-    /**
-     * The whole text string
-     */
-    text: string
-    /**
-     * The classes to be applied to the highlighted text
-     */
-    highlightClasses?: string
-}
-
-export const highlightSearchText = ({ searchText, text, highlightClasses }: HighlightSearchTextProps): string => {
-    if (!searchText) {
-        return text
-    }
-
-    try {
-        const regex = new RegExp(searchText, 'gi')
-        return text.replace(regex, (match) => `<span class="${highlightClasses}">${match}</span>`)
-    } catch (error) {
-        return text
-    }
-}
-
 export const trackByGAEvent = (category: string, action: string): void => {
     ReactGA.event({
         category: category,

src/css/base.scss

@@ -1682,8 +1682,16 @@ button.anchor {
     }
 
     &.dc__visible-hover--parent:hover {
-        .dc__visible-hover--child {
-            display: inherit;
+        .dc__visible-hover {
+            // If we give this class then the element will be visible on hover
+            &--child {
+                display: inherit;
+            }
+
+            // For hiding a child on hover on parent
+            &--hide-child {
+                display: none;
+            }
         }
     }
 }
@@ -2475,6 +2483,10 @@ textarea,
 
 .bc-b50 {
     background-color: var(--B50);
+
+    &--imp {
+        background-color: var(--B50) !important;
+    }
 }
 
 .c-n50 {
@@ -2742,6 +2754,10 @@ textarea,
     min-width: 116px;
 }
 
+.mw-140 {
+    min-width: 140px;
+}
+
 .mw-232 {
     min-width: 232px;
 }
@@ -3900,6 +3916,10 @@ textarea::placeholder {
     z-index: 4;
 }
 
+.dc__zi-5 {
+    z-index: 5;
+}
+
 .dc__zi-20 {
     z-index: 20;
 }