Merge pull request #958 from palash-signoz/style-trace-search

bug: style-trace-search is fixed

frontend/src/container/Trace/Search/AllTags/Tag/TagValue.tsx

@@ -32,6 +32,7 @@ function TagValue(props: TagValueProps): JSX.Element {
 
 	return (
 		<SelectComponent
+			value={selectedValues[0]}
 			onSelect={(value: unknown): void => {
 				if (typeof value === 'string') {
 					setLocalSelectedTags((tags) => [

frontend/src/container/Trace/Search/AllTags/index.tsx

@@ -116,14 +116,16 @@ function AllTags({
 			</Wrapper>
 
 			<ButtonContainer>
-				<Button onClick={onResetHandler}>Reset</Button>
-				<Button
-					type="primary"
-					onClick={onRunQueryHandler}
-					icon={<CaretRightFilled />}
-				>
-					Run Query
-				</Button>
+				<Space align="start">
+					<Button onClick={onResetHandler}>Reset</Button>
+					<Button
+						type="primary"
+						onClick={onRunQueryHandler}
+						icon={<CaretRightFilled />}
+					>
+						Run Query
+					</Button>
+				</Space>
 			</ButtonContainer>
 		</Container>
 	);

frontend/src/container/Trace/Search/AllTags/styles.ts

@@ -6,7 +6,7 @@ export const Container = styled(Card)`
 	min-height: 20vh;
 	width: 100%;
 	z-index: 2;
-	position: absolute;
+	position: absolute !important;
 
 	.ant-card-body {
 		padding-bottom: 0;
@@ -35,20 +35,16 @@ export const Wrapper = styled.div`
 	}
 `;
 
-export const ButtonContainer = styled.div`
+export const ButtonContainer = styled(Card)`
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	background-color: #303030;
-	padding-top: 11px;
-	padding-bottom: 11px;
-	padding-right: 38.01px;
 
-	margin-top: 1rem;
+	padding-top: 11px !important;
+	padding-bottom: 11px !important;
+	padding-right: 38.01px !important;
 
-	> button:nth-child(1) {
-		margin-right: 1rem;
-	}
+	margin-top: 1rem !important;
 `;
 
 export const CurrentTagsContainer = styled.div`

frontend/src/container/Trace/Search/index.tsx

@@ -1,5 +1,4 @@
 import { CaretRightFilled } from '@ant-design/icons';
-import { Space } from 'antd';
 import useClickOutside from 'hooks/useClickOutside';
 import React, { useEffect, useRef, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
@@ -113,41 +112,39 @@ function Search({
 	};
 
 	return (
-		<Space direction="vertical" style={{ width: '100%' }}>
-			<Container ref={tagRef}>
-				<SearchComponent
-					onChange={(event): void => onChangeHandler(event.target.value)}
-					value={value}
-					allowClear
-					disabled={traces.filterLoading}
-					onFocus={onFocusHandler}
-					placeholder="Click to filter by tags"
-					type="search"
-					enterButton={<CaretRightFilled />}
-					onSearch={(string): void => {
-						if (string.length === 0) {
-							updateTagVisibility(false);
-							updateFilters([]);
-							return;
-						}
+		<Container ref={tagRef}>
+			<SearchComponent
+				onChange={(event): void => onChangeHandler(event.target.value)}
+				value={value}
+				allowClear
+				disabled={traces.filterLoading}
+				onFocus={onFocusHandler}
+				placeholder="Click to filter by tags"
+				type="search"
+				enterButton={<CaretRightFilled />}
+				onSearch={(string): void => {
+					if (string.length === 0) {
+						updateTagVisibility(false);
+						updateFilters([]);
+						return;
+					}
 
-						const { isError, payload } = parseQueryToTags(string);
+					const { isError, payload } = parseQueryToTags(string);
 
-						if (isError) {
-							updateTagIsError(true);
-						} else {
-							updateTagIsError(false);
-							updateTagVisibility(false);
-							updateFilters(payload);
-						}
-					}}
-				/>
+					if (isError) {
+						updateTagIsError(true);
+					} else {
+						updateTagIsError(false);
+						updateTagVisibility(false);
+						updateFilters(payload);
+					}
+				}}
+			/>
 
-				{traces.isTagModalOpen && (
-					<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
-				)}
-			</Container>
-		</Space>
+			{traces.isTagModalOpen && (
+				<Tags updateFilters={updateFilters} onChangeHandler={onChangeHandler} />
+			)}
+		</Container>
 	);
 }
 

frontend/src/container/Trace/Search/styles.ts

@@ -6,6 +6,7 @@ const { Search } = Input;
 export const Container = styled.div`
 	display: flex;
 	position: relative;
+	width: 100%;
 `;
 
 export const SearchComponent = styled(Search)`