feat: added global search conditionally and with new design

SigNoz · Sep 13, 2024 · 754cd19 · 754cd19
1 parent abda617
commit 754cd19
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 47 deletions.
diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
@@ -2,14 +2,22 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	height: 30px;
+	height: 36px;
 	width: 100%;
 	padding: 0.5rem;
 	box-sizing: border-box;
 	font-size: 14px;
 	font-weight: 600;
 
 	cursor: move;
+
+	.ant-input-group-addon {
+		border: none;
+		background-color: var(--bg-ink-500);
+	}
+	.search-header-icons {
+		cursor: pointer;
+	}
 }
 
 .widget-header-title {
@@ -19,6 +27,7 @@
 .widget-header-actions {
 	display: flex;
 	align-items: center;
+	gap: 8px;
 }
 .widget-header-more-options {
 	visibility: hidden;
@@ -30,10 +39,22 @@
 	padding: 8px;
 }
 
+.widget-header-more-options-visible {
+	visibility: visible;
+}
+
 .widget-header-hover {
 	visibility: visible;
 }
 
 .widget-api-actions {
 	padding-right: 0.25rem;
 }
+
+.lightMode {
+	.widget-header-container {
+		.ant-input-group-addon {
+			background-color: inherit;
+		}
+	}
+}
diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@@ -9,6 +9,7 @@ import {
 	ExclamationCircleOutlined,
 	FullscreenOutlined,
 	MoreOutlined,
+	SearchOutlined,
 	WarningOutlined,
 } from '@ant-design/icons';
 import { Dropdown, Input, MenuProps, Tooltip, Typography } from 'antd';
@@ -20,8 +21,9 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { isEmpty } from 'lodash-es';
+import { X } from 'lucide-react';
 import { unparse } from 'papaparse';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -189,6 +191,10 @@ function WidgetHeader({
 
 	const updatedMenuList = useMemo(() => generateMenuList(actions), [actions]);
 
+	const [showGlobalSearch, setShowGlobalSearch] = useState(false);
+
+	const globalSearchAvailable = widget.panelTypes === PANEL_TYPES.TABLE;
+
 	const menu = useMemo(
 		() => ({
 			items: updatedMenuList,
@@ -203,59 +209,78 @@ function WidgetHeader({
 
 	return (
 		<div className="widget-header-container">
-			<Typography.Text
-				ellipsis
-				data-testid={title}
-				className="widget-header-title"
-			>
-				{title}
-			</Typography.Text>
-			{widget.panelTypes === PANEL_TYPES.TABLE && (
-				<Input.Search
-					placeholder="Search over all the cloumns..."
+			{showGlobalSearch ? (
+				<Input
+					addonBefore={<SearchOutlined size={14} />}
+					placeholder="Search..."
+					bordered={false}
+					addonAfter={
+						<X
+							size={14}
+							onClick={(e): void => {
+								e.stopPropagation();
+								e.preventDefault();
+								setShowGlobalSearch(false);
+							}}
+							className="search-header-icons"
+						/>
+					}
 					key={widget.id}
-					onSearch={(value): void => setSearchTerm(value)}
 					onChange={(e): void => {
 						console.log(e.target.value);
 						setSearchTerm(e.target.value || '');
 					}}
-					allowClear
-					style={{ width: '40%' }}
 				/>
-			)}
-			<div className="widget-header-actions">
-				<div className="widget-api-actions">{threshold}</div>
-				{isFetchingResponse && !queryResponse.isError && (
-					<Spinner style={{ paddingRight: '0.25rem' }} />
-				)}
-				{queryResponse.isError && (
-					<Tooltip
-						title={errorMessage}
-						placement={errorTooltipPosition}
-						className="widget-api-actions"
+			) : (
+				<>
+					<Typography.Text
+						ellipsis
+						data-testid={title}
+						className="widget-header-title"
 					>
-						<ExclamationCircleOutlined />
-					</Tooltip>
-				)}
+						{title}
+					</Typography.Text>
+					<div className="widget-header-actions">
+						<div className="widget-api-actions">{threshold}</div>
+						{isFetchingResponse && !queryResponse.isError && (
+							<Spinner style={{ paddingRight: '0.25rem' }} />
+						)}
+						{queryResponse.isError && (
+							<Tooltip
+								title={errorMessage}
+								placement={errorTooltipPosition}
+								className="widget-api-actions"
+							>
+								<ExclamationCircleOutlined />
+							</Tooltip>
+						)}
 
-				{isWarning && (
-					<Tooltip
-						title={WARNING_MESSAGE}
-						placement={errorTooltipPosition}
-						className="widget-api-actions"
-					>
-						<WarningOutlined />
-					</Tooltip>
-				)}
-				<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
-					<MoreOutlined
-						data-testid="widget-header-options"
-						className={`widget-header-more-options ${
-							parentHover ? 'widget-header-hover' : ''
-						}`}
-					/>
-				</Dropdown>
-			</div>
+						{isWarning && (
+							<Tooltip
+								title={WARNING_MESSAGE}
+								placement={errorTooltipPosition}
+								className="widget-api-actions"
+							>
+								<WarningOutlined />
+							</Tooltip>
+						)}
+						{globalSearchAvailable && (
+							<SearchOutlined
+								className="search-header-icons"
+								onClick={(): void => setShowGlobalSearch(true)}
+							/>
+						)}
+						<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
+							<MoreOutlined
+								data-testid="widget-header-options"
+								className={`widget-header-more-options ${
+									parentHover ? 'widget-header-hover' : ''
+								} ${globalSearchAvailable ? 'widget-header-more-options-visible' : ''}`}
+							/>
+						</Dropdown>
+					</div>
+				</>
+			)}
 		</div>
 	);
 }