Merge pull request #1612 from devtron-labs/resource-browser-search

fix: Service Port naming & Resource browser search

Author: shivani170

package.json

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

src/components/ClusterNodes/ClusterSelectionList.tsx

@@ -1,9 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { ReactComponent as Search } from '../../assets/icons/ic-search.svg'
-import { ReactComponent as Clear } from '../../assets/icons/ic-error.svg'
 import { handleUTCTime } from '../common'
-import { Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { Progressing, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 import { ClusterDetail } from './types'
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
 import { ReactComponent as Success } from '../../assets/icons/appstatus/healthy.svg'
@@ -73,37 +71,36 @@ export default function ClusterSelectionList({
         setSearchText('')
     }
 
-    const handleFilterKeyPress = (event): void => {
-        const theKeyCode = event.key
-        if (theKeyCode === 'Enter') {
-            handleFilterChanges(event.target.value)
+    const handleFilterKeyPress = (value): void => {
+            handleFilterChanges(value)
             setSearchApplied(true)
-        } else if (theKeyCode === 'Backspace' && searchText.length === 1) {
-            clearSearch()
-        }
+    }
+
+    const handleSearchChange = (value): void => {
+        setSearchText(value.trim())
+    }
+
+    const handleOnBlur = (event): void => {
+        event.stopPropagation()
+        let _searchText = event.target.value
+        _searchText = _searchText?.trim()
+        handleFilterChanges(_searchText)
+        setSearchText(_searchText)
     }
 
     const renderSearch = (): JSX.Element => {
         return (
-            <div className="search dc__position-rel margin-right-0 en-2 bw-1 br-4 h-32">
-                <Search className="search__icon icon-dim-18" />
-                <input
-                    type="text"
-                    placeholder="Search clusters"
-                    value={searchText}
-                    className="search__input"
-                    onChange={(event) => {
-                        setSearchText(event.target.value)
-                    }}
-                    onKeyDown={handleFilterKeyPress}
-                    disabled={clusterListLoader}
-                />
-                {searchApplied && (
-                    <button className="search__clear-button" type="button" onClick={clearSearch}>
-                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
-                    </button>
-                )}
-            </div>
+            <SearchBar
+                initialSearchText={searchText}
+                handleSearchChange={handleSearchChange}
+                handleEnter={handleFilterKeyPress}
+                containerClassName="w-250-imp"
+                inputProps={{
+                    placeholder: 'Search clusters',
+                    autoFocus: true,
+                    disabled: minLoader,
+                }}
+            />
         )
     }
 

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -1080,7 +1080,7 @@ export default function ResourceList() {
     }
     return (
         <ShortcutProvider>
-            <div className="resource-browser-container h-100">
+            <div className="resource-browser-container h-100 bcn-0">
                 <PageHeader
                     isBreadcrumbs={!!clusterId}
                     breadCrumbs={renderBreadcrumbs}

src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx

@@ -213,11 +213,11 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             return (
                                 <div className="flex left cn-9 m-0 dc__no-decore">
                                     <div className="" key={node.name}>
-                                        {node.name}:{node.namespace}:{val}
+                                        {node.name}.{node.namespace}:{val}
                                         <Clipboard
                                             className="ml-0 resource-action-tabs__clipboard fs-13 dc__truncate-text cursor pt-8"
                                             onClick={(event) => {
-                                                toggleClipBoardPort(event, `${node.name}:${node.namespace}:${val}`)
+                                                toggleClipBoardPort(event, `${node.name}.${node.namespace}:${val}`)
                                             }}
                                         />
                                     </div>
@@ -241,7 +241,7 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             <Clipboard
                                 className="resource-action-tabs__clipboard icon-dim-12 pointer ml-8 mr-8"
                                 onClick={(event) => {
-                                    toggleClipBoardPort(event, `${node.name}:${node.namespace}:${node.port[0]}`)
+                                    toggleClipBoardPort(event, `${node.name}.${node.namespace}:${node.port[0]}`)
                                 }}
                             />
                         </span>
@@ -442,7 +442,7 @@ function NodeComponent({ handleFocusTabs, externalLinks, monitoringTools, isDevt
                             </div>
                         </div>
                         {params.nodeType === NodeType.Service.toLowerCase() && node.kind !== "Endpoints" && node.kind !== "EndpointSlice" && (
-                                <div className={'col-5 pt-9 pb-9 flex left cn-9 dc__hover-icon'}>
+                                <div className="col-5 pt-9 pb-9 flex left cn-9 dc__hover-icon">
                                     {portNumberPlaceHolder(node)}
                                     {node.port > 1 ? renderClipboardInteraction(nodeName) : null}
                                 </div>