Skip to content

Commit

Permalink
ui - add functionality to search for services (#2832)
Browse files Browse the repository at this point in the history 
Signed-off-by: aporss <[email protected]>
  • Loading branch information
@ArtjomsPorss
ArtjomsPorss authored Jan 23, 2025
1 parent bb28061 commit 22b0903
Show file tree
Hide file tree
Showing 39 changed files with 8,951 additions and 7,158 deletions.
234 changes: 149 additions & 85 deletions ui/src/__tests__/components/header/__snapshots__/Header.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -637,6 +637,25 @@ exports[`Header should render with search 1`] = `
}
.emotion-9 {
display: flex;
width: 100%;
}
.emotion-11 {
background: #ffffff;
width: 35%;
}
.emotion-13 {
position: relative;
width: 100%;
}
.emotion-13 input {
cursor: pointer;
}
.emotion-14 {
box-sizing: border-box;
display: inline-flex;
-webkit-box-flex-flow: row nowrap;
Expand All @@ -650,7 +669,7 @@ exports[`Header should render with search 1`] = `
width: 100%;
}
.emotion-9 input {
.emotion-14 input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
Expand All @@ -676,94 +695,65 @@ exports[`Header should render with search 1`] = `
width: 100%;
}
.emotion-9.animated input {
.emotion-14.animated input {
-webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
}
.emotion-9 input::-webkit-input-placeholder {
.emotion-14 input::-webkit-input-placeholder {
color: rgba(48,48,48,0.6);
}
.emotion-9 input::-moz-placeholder {
.emotion-14 input::-moz-placeholder {
color: rgba(48,48,48,0.6);
}
.emotion-9 input:-ms-input-placeholder {
.emotion-14 input:-ms-input-placeholder {
color: rgba(48,48,48,0.6);
}
.emotion-9 input::placeholder {
.emotion-14 input::placeholder {
color: rgba(48,48,48,0.6);
}
.emotion-9 input.focused,
.emotion-9 input:active,
.emotion-9 input:focus {
.emotion-14 input.focused,
.emotion-14 input:active,
.emotion-14 input:focus {
background: rgba(53,112,244,0.05);
border-bottom: 2px solid #3570f4;
color: #303030;
}
.emotion-9 input:invalid {
.emotion-14 input:invalid {
background: rgba(53,112,244,0.05);
border-bottom: 2px solid #d01111;
color: #303030;
}
.emotion-9 .message {
.emotion-14 .message {
font-size: 12px;
left: 0;
line-height: 1.8;
position: absolute;
top: 2.571rem;
}
.emotion-9.error input,
.emotion-9.error input.focused,
.emotion-9.error input:active,
.emotion-9.error input:focus {
.emotion-14.error input,
.emotion-14.error input.focused,
.emotion-14.error input:active,
.emotion-14.error input:focus {
border-bottom: 2px solid #d01111;
}
.emotion-9.error .message {
.emotion-14.error .message {
color: #d01111;
}
.emotion-9 input {
background: rgba(242,242,242,0.1);
color: #fff;
}
.emotion-9 input::-webkit-input-placeholder {
color: rgba(255,255,255,0.6);
}
.emotion-9 input::-moz-placeholder {
color: rgba(255,255,255,0.6);
}
.emotion-9 input:-ms-input-placeholder {
color: rgba(255,255,255,0.6);
}
.emotion-9 input::placeholder {
color: rgba(255,255,255,0.6);
}
.emotion-9 input.focused,
.emotion-9 input:active,
.emotion-9 input:focus {
background: rgba(242,242,242,0.1);
border-bottom: 2px solid #3570f4;
color: #fff;
}
.emotion-9 input {
.emotion-14 input {
padding-right: 36px;
}
.emotion-9 .input-icon {
.emotion-14 .input-icon {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
Expand All @@ -774,29 +764,41 @@ exports[`Header should render with search 1`] = `
right: 6px;
}
.emotion-10 {
.emotion-15 {
fill: #d5d5d5;
cursor: pointer;
vertical-align: text-bottom;
}
.emotion-16 {
background: #ffffff;
width: 65%;
margin-left: 5px;
}
.emotion-19 {
fill: #3570f4;
cursor: inherit;
vertical-align: text-bottom;
}
.emotion-12 {
.emotion-21 {
display: flex;
}
.emotion-14 {
.emotion-23 {
fill: #fff;
cursor: pointer;
vertical-align: text-bottom;
}
.emotion-15 {
.emotion-24 {
position: relative;
width: 0;
height: 0;
}
.emotion-17 {
.emotion-26 {
margin-left: 15px;
}
Expand Down Expand Up @@ -829,40 +831,102 @@ exports[`Header should render with search 1`] = `
data-testid="navbar-item"
>
<div
class="emotion-9 denali-input animated"
data-testid="input-wrapper"
class="emotion-9 emotion-10"
>
<input
autocomplete="off"
data-testid="input-node"
name="search"
placeholder="Enter domain name"
value=""
/>
<div
class="input-icon"
class="emotion-11 emotion-12"
>
<svg
class="emotion-10"
data-testid="icon"
data-wdio=""
height="24px"
id=""
viewBox="0 0 1024 1024"
width="24px"
<div
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="downshift-0-label"
class="emotion-13 denali-input-dropdown"
data-testid="input-dropdown"
role="combobox"
>
<title>
search
</title>
<path
d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
/>
</svg>
<div
class="emotion-14 denali-input animated"
data-testid="input-wrapper"
>
<input
aria-autocomplete="list"
aria-labelledby="downshift-0-label"
autocomplete="off"
autocorrect="off"
data-testid="input-node"
id="downshift-0-input"
name="search-type"
readonly=""
spellcheck="false"
value="Domain"
/>
<div
class="input-icon"
>
<svg
class="emotion-15"
data-testid="icon"
data-wdio=""
height="24px"
id=""
viewBox="0 0 1024 1024"
width="24px"
>
<title>
arrowhead-down
</title>
<path
d="M512 580.267l-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 256 253.867c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 256-253.867c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042z"
/>
</svg>
</div>
<div
class="message"
data-testid="message"
/>
</div>
</div>
</div>
<div
class="message"
data-testid="message"
/>
class="emotion-16 emotion-17"
>
<div
class="emotion-14 denali-input animated"
data-testid="input-wrapper"
>
<input
autocomplete="off"
data-testid="input-node"
name="search-text"
placeholder="Search"
value=""
/>
<div
class="input-icon"
>
<svg
class="emotion-19"
data-testid="icon"
data-wdio=""
height="24px"
id=""
viewBox="0 0 1024 1024"
width="24px"
>
<title>
search
</title>
<path
d="M659.413 599.68c40.125-53.054 64.27-120.136 64.27-192.857 0-177.556-143.937-321.493-321.493-321.493s-321.493 143.937-321.493 321.493c0 177.556 143.937 321.493 321.493 321.493 74.297 0 142.708-25.203 197.149-67.525l-0.726 0.543 267.307 264.96c7.723 7.731 18.396 12.514 30.187 12.514s22.464-4.782 30.186-12.513l0-0c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003zM444.8 637.227c-11.829 2.113-25.446 3.322-39.345 3.322-129.603 0-234.667-105.064-234.667-234.667s105.064-234.667 234.667-234.667c129.603 0 234.667 105.064 234.667 234.667 0 13.899-1.208 27.516-3.526 40.752l0.204-1.407c-17.178 98.349-93.651 174.822-190.593 191.796l-1.407 0.204z"
/>
</svg>
</div>
<div
class="message"
data-testid="message"
/>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -871,11 +935,11 @@ exports[`Header should render with search 1`] = `
data-testid="navbar-item"
>
<div
class="emotion-12 emotion-13"
class="emotion-21 emotion-22"
data-testid="header-menu"
>
<svg
class="emotion-14"
class="emotion-23"
data-testid="icon"
data-wdio=""
height="25px"
Expand All @@ -891,13 +955,13 @@ exports[`Header should render with search 1`] = `
/>
</svg>
<div
class="emotion-15 emotion-16"
class="emotion-24 emotion-25"
/>
<div
class="emotion-17 emotion-18"
class="emotion-26 emotion-27"
>
<svg
class="emotion-14"
class="emotion-23"
data-testid="icon"
data-wdio=""
height="25px"
Expand Down
Loading

0 comments on commit 22b0903

Please sign in to comment.