Skip to content

Commit cf2f8ad

Browse files
ann-linh-mitreann-linh-mitre
committed
#3160 add intro banner above search box
1 parent f9651f4 commit cf2f8ad

1 file changed

Lines changed: 91 additions & 32 deletions

File tree

‎src/components/cveRecordSearchModule.vue‎

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,84 @@
11
<template>
2-
<div class="field mt-1">
3-
<div class="field has-addons">
4-
<div class="control">
5-
<span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
6-
<select v-model="searchType">
7-
<option>Search CVE List (Beta)</option>
8-
<option>Find a Test CVE Record/ID (Legacy)</option>
9-
</select>
10-
</span>
11-
</div>
12-
<div class="control is-expanded">
13-
<input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
14-
@keyup="validateQueryString" type="text" class="input cve-id-input"
15-
placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
16-
<input v-else v-model="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString" @blur="removeHelpText"
17-
type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
18-
</div>
19-
<div class="control">
20-
<button @click="validate" class="button cve-button cve-button-accent-warm"
21-
:class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
22-
:aria-disabled="cveListSearchStore.isSeachButtonDisabled">
23-
Search {{ websiteEnv === 'test' ? 'CVE List in Test' : '' }}
24-
</button>
2+
<div class="mt-1">
3+
<div>
4+
<div role="alert" class="notification is-warning is-light">
5+
<div class="is-flex is-flex-direction-row is-align-content-flex-start">
6+
<div class="pr-2 pt-2">
7+
<p id="newSearchHelpText" class="is-hidden">info</p>
8+
<font-awesome-icon style="font-size: 1.25em;" icon="info-circle" role="info"
9+
aria-labelledby="newSearchHelpText" aria-hidden="false" />
10+
</div>
11+
<div>
12+
<button class="button is-text is-ghost cve-btn-container pt-0 pr-2 pb-0 pl-1"
13+
@click="showSearchHelpText = !showSearchHelpText"
14+
aria-controls="searchHelpText"
15+
>
16+
The Test website (test.cve.org) has a new drop-down menu below.
17+
<span class="button is-ghost cve-inner-btn">Read {{ showSearchHelpText ? 'less...' : 'more...' }}</span>
18+
</button>
19+
<div v-if="showSearchHelpText" id="searchHelpText" class="cve-help-text" style="max-width: 860px">
20+
<ol>
21+
<li>
22+
<span class="has-text-weight-bold">Search Capability (Beta) Community testers</span> – To beta-test the new search feature, select
23+
“<span class="has-text-weight-bold">Search CVE List (Beta)</span>” in the drop-down menu. The
24+
<span class="has-text-weight-bold">production</span> data is used.
25+
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips</router-link>
26+
for more information on this new capability. <a href="https://forms.office.com/g/dFzysrHLpR" target="_blank">
27+
Provide feedback on the new search capability
28+
<span class="icon cve-icon-xxs">
29+
<p id="externalSurveyLink" class="is-hidden">
30+
Survey opens in a new tab or window depending on browser settings
31+
</p>
32+
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false"/>
33+
</span>.
34+
</a>.
35+
</li>
36+
<li>
37+
<span class="has-text-weight-bold">CNAs</span> – to view your <span class="has-text-weight-bold">test data</span>
38+
(your draft records) select “<span class="has-text-weight-bold">Find a Test CVE Record/ID (Legacy)</span>” in the drop-down menu and
39+
provide a CVE ID to find a specific CVE Record.
40+
</li>
41+
</ol>
42+
</div>
43+
</div>
44+
</div>
2545
</div>
2646
</div>
27-
<div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
28-
<div class="is-flex is-align-content-flex-start">
29-
<p id="alertIcon" class="is-hidden">alert</p>
30-
<font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
31-
aria-labelledby="alertIcon" aria-hidden="false" />
32-
<p class="cve-help-text">
33-
{{ errorMessage }}
34-
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips.</router-link>
35-
</p>
47+
<div class="field mt-1">
48+
<div class="field has-addons">
49+
<div class="control">
50+
<span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
51+
<select v-model="searchType">
52+
<option>Search CVE List (Beta)</option>
53+
<option>Find a Test CVE Record/ID (Legacy)</option>
54+
</select>
55+
</span>
56+
</div>
57+
<div class="control is-expanded">
58+
<input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
59+
@keyup="validateQueryString" type="text" class="input cve-id-input"
60+
placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
61+
<input v-else v-model="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString" @blur="removeHelpText"
62+
type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
63+
</div>
64+
<div class="control">
65+
<button @click="validate" class="button cve-button cve-button-accent-warm"
66+
:class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
67+
:aria-disabled="cveListSearchStore.isSeachButtonDisabled">
68+
Search {{ websiteEnv === 'test' ? 'CVE List in Test' : '' }}
69+
</button>
70+
</div>
71+
</div>
72+
<div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
73+
<div class="is-flex is-align-content-flex-start">
74+
<p id="alertIcon" class="is-hidden">alert</p>
75+
<font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
76+
aria-labelledby="alertIcon" aria-hidden="false" />
77+
<p class="cve-help-text">
78+
{{ errorMessage }}
79+
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips.</router-link>
80+
</p>
81+
</div>
3682
</div>
3783
</div>
3884
</div>
@@ -58,6 +104,8 @@ let cveRecordStore = usecveRecordStore();
58104
let searchType = ref('Search CVE List (Beta)');
59105
let cveId = cveRecordStore.cveId;
60106
107+
let showSearchHelpText = ref(false);
108+
61109
// this seems redundant, but it fixes an edge case.
62110
// if a user searches for a particular field, then on the results page flips the toggle, THEN refreshes without searching, this will keep the correct helper text showing.
63111
let searchTypeBoolean = computed(() => {
@@ -183,4 +231,15 @@ const websiteEnv = computed(() => {
183231
width: 470px;
184232
}
185233
}
234+
235+
.cve-btn-container {
236+
background: unset !important;
237+
color: $black !important;
238+
}
239+
240+
241+
.cve-btn-container:hover, .cve-inner-btn:hover {
242+
cursor: pointer;
243+
text-decoration: none !important;
244+
}
186245
</style>

0 commit comments

Comments
 (0)