20350373879

Committed 18 Dec 2025 08:28PM UTC coverage: 2.453%. First build

Build # 20350373879

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #482 from CBIIT/3.2.0

3.2.0 Release

Run Details

43 of 1822 branches covered (2.36%)

Branch coverage included in aggregate %.

7 of 490 new or added lines in 27 files covered. (1.43%)

83 of 3314 relevant lines covered (2.5%)

1.02 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/Header/components/SearchBarDesktop.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
import clearIcon from '../../../assets/header/Clear_Icon.svg';

const SearchBarContainer = styled.div`
    display: flex;

    .searchBar {
      margin-left: auto;
      width: 224px;
      height: 32px;
      border: 1px solid #71767A;
    }

    .searchButton {
      height: 32px;
      font-family: Open Sans;
      font-weight: 700;
      font-size: 1rem;
      line-height: 33px;
      text-align: center;
      color: #FFFFFF;
      background: #007BBD;
      padding: 0 13px;
      border-radius: 0px 5px 5px 0px;
    }

    .searchButton:hover {
      cursor: pointer;
      background: #004971;
    }

    input:focus-visible{
      outline:none;
      border: 3px solid #5786FF;
    }
`;

const SearchInput = styled.input`
  margin: -1px 0 0 -1px;
  padding: 0 7px;
  border: none;
  font-family: Open Sans;
  font-weight: 400;
  font-size: 1rem;
  line-height: 42px;
  color: #1b1b1b;
  width: 224px;
  height: 32px;
  background: transparent;

  input[type="search"]::-webkit-search-cancel-button {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url(${clearIcon}) right center no-repeat;
    background-image: url(${clearIcon}) red;
    background-size: 20px;
    cursor: pointer;
  }

  input[type="search"]:focus::-webkit-search-cancel-button {
    position: relative;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url(${clearIcon}) right center no-repeat;
    background-image: url(${clearIcon}) red;
    background-size: 20px;
    cursor: pointer;
  }
`;

const SearchBar = () => {
  const history = useHistory();
  const [localText, setLocalText] = useState('');

  const handleTextInputChange = (event) => {
    const text = event.target.value;
    setLocalText(text);
  };

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      history.push(`/globalsearch/${localText.trim()}`);
      setLocalText('');
    }
  };

  const handleSearch = () => {
    history.push(`/globalsearch/${localText.trim()}`);
    setLocalText('');
  };

  return (
    <SearchBarContainer>
      <div className="searchBar">
        <label>
          <SearchInput id="header-search-bar" type="search" value={localText} onChange={handleTextInputChange} onKeyDown={handleKeyPress} />
        </label>
      </div>
      <div role="button" tabIndex={0} className="searchButton" onKeyDown={handleKeyPress} onClick={handleSearch}>Search</div>
    </SearchBarContainer>
  );
};

export default SearchBar;

NEW 1	import React, { useState } from 'react';	×
NEW 2	import styled from 'styled-components';	×
NEW 3	import { useHistory } from 'react-router-dom';	×
NEW 4	import clearIcon from '../../../assets/header/Clear_Icon.svg';	×
5
NEW 6	const SearchBarContainer = styled.div`	×
7	display: flex;
8
9	.searchBar {
10	margin-left: auto;
11	width: 224px;
12	height: 32px;
13	border: 1px solid #71767A;
14	}
15
16	.searchButton {
17	height: 32px;
18	font-family: Open Sans;
19	font-weight: 700;
20	font-size: 1rem;
21	line-height: 33px;
22	text-align: center;
23	color: #FFFFFF;
24	background: #007BBD;
25	padding: 0 13px;
26	border-radius: 0px 5px 5px 0px;
27	}
28
29	.searchButton:hover {
30	cursor: pointer;
31	background: #004971;
32	}
33
34	input:focus-visible{
35	outline:none;
36	border: 3px solid #5786FF;
37	}
38	`;
39
NEW 40	const SearchInput = styled.input`	×
41	margin: -1px 0 0 -1px;
42	padding: 0 7px;
43	border: none;
44	font-family: Open Sans;
45	font-weight: 400;
46	font-size: 1rem;
47	line-height: 42px;
48	color: #1b1b1b;
49	width: 224px;
50	height: 32px;
51	background: transparent;
52
53	input[type="search"]::-webkit-search-cancel-button {
54	position: relative;
55	-webkit-appearance: none;
56	height: 20px;
57	width: 20px;
58	background: url(${clearIcon}) right center no-repeat;
59	background-image: url(${clearIcon}) red;
60	background-size: 20px;
61	cursor: pointer;
62	}
63
64	input[type="search"]:focus::-webkit-search-cancel-button {
65	position: relative;
66	-webkit-appearance: none;
67	height: 20px;
68	width: 20px;
69	background: url(${clearIcon}) right center no-repeat;
70	background-image: url(${clearIcon}) red;
71	background-size: 20px;
72	cursor: pointer;
73	}
74	`;
75
NEW 76	const SearchBar = () => {	×
NEW 77	const history = useHistory();	×
NEW 78	const [localText, setLocalText] = useState('');	×
79
NEW 80	const handleTextInputChange = (event) => {	×
NEW 81	const text = event.target.value;	×
NEW 82	setLocalText(text);	×
83	};
84
NEW 85	const handleKeyPress = (event) => {	×
NEW 86	if (event.key === 'Enter') {	×
NEW 87	history.push(`/globalsearch/${localText.trim()}`);	×
NEW 88	setLocalText('');	×
89	}
90	};
91
NEW 92	const handleSearch = () => {	×
NEW 93	history.push(`/globalsearch/${localText.trim()}`);	×
NEW 94	setLocalText('');	×
95	};
96
NEW 97	return (	×
98	<SearchBarContainer>
99	<div className="searchBar">
100	<label>
101	<SearchInput id="header-search-bar" type="search" value={localText} onChange={handleTextInputChange} onKeyDown={handleKeyPress} />
102	</label>
103	</div>
104	<div role="button" tabIndex={0} className="searchButton" onKeyDown={handleKeyPress} onClick={handleSearch}>Search</div>
105	</SearchBarContainer>
106	);
NEW 107	};	×
108
109	export default SearchBar;

CBIIT / INS-WebPortal / 20350373879

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous