Skip to content

Commit 78ff71d

Browse files
alinh-mitrealinh-mitre
authored
Merge pull request #3183 from CVEProject/tat-3160-content
#3160 fix input field gap when above notification expands, update not…
2 parents 1237838 + bb277ed commit 78ff71d

3 files changed

Lines changed: 87 additions & 92 deletions

File tree

‎src/components/cveRecordSearchModule.vue‎

Lines changed: 66 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,81 @@
11
<template>
22
<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: 810px">
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">
3+
<div role="alert" class="notification is-warning is-light">
4+
<div class="is-flex is-align-items-flex-start mt-1" style="max-width: 820px; column-gap: 1rem;">
5+
<div class="pl-3">
6+
<p id="alertIconVariousFormts" class="is-hidden">alert</p>
7+
<font-awesome-icon size="1x" icon="exclamation-triangle" role="alert"
8+
aria-labelledby="alertIconVariousFormts" aria-hidden="false" />
9+
</div>
10+
<div class="is-flex-grow-5">
11+
<p class="mb-2">The <a href="https://test.cve.org">CVE Test website</a> has a new drop-down menu below.</p>
12+
<ol class="cve-help-text pl-4" v-if="showSearchHelpText">
13+
<li class="mb-2">
14+
<p>
15+
<span class="has-text-weight-bold">Search Capability (Beta) Community testers</span> – To beta-test the new search feature, select
16+
“<span class="has-text-weight-bold">Search CVE List (Beta)</span>” in the drop-down menu. The
17+
<span class="has-text-weight-bold">production</span> data is used and newly published data typically becomes searchable within less than
18+
30 minutes.
19+
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips</router-link>
20+
for more information on this new capability.
21+
</p>
22+
<p>
23+
<a href="https://forms.office.com/g/qmmTaYnr5y" target="_blank">
2724
Provide feedback on the new search capability
2825
<span class="icon cve-icon-xxs">
2926
<p id="externalSurveyLink" class="is-hidden">
3027
Survey opens in a new tab or window depending on browser settings
3128
</p>
32-
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false"/>
29+
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false" class="ml-1"/>
3330
</span>.
3431
</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>
32+
</p>
33+
</li>
34+
<li>
35+
<span class="has-text-weight-bold">CNAs</span> – to view your <span class="has-text-weight-bold">test data</span>
36+
(your draft records) select “<span class="has-text-weight-bold">Find a Test CVE Record/ID (Legacy)</span>” in the drop-down menu and
37+
provide a CVE ID to find a specific CVE Record.
38+
</li>
39+
</ol>
4440
</div>
41+
<button class="cve-button-ghost cve-btn-container mt-1" @click="showSearchHelpText = !showSearchHelpText" style="float: right !important">
42+
<font-awesome-icon size="1x" :icon="showSearchHelpText ? 'minus' : 'plus'" role="alert"
43+
aria-labelledby="alertIconVariousFormts" aria-hidden="false" />
44+
</button>
4545
</div>
4646
</div>
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.trim="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString"
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-
{{ searchTypeBoolean ? 'Search' : 'Find'}}
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-
</p>
80-
</div>
47+
<div class="field has-addons mt-1">
48+
<p class="control">
49+
<span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
50+
<select v-model="searchType">
51+
<option>Search CVE List (Beta)</option>
52+
<option>Find a Test CVE Record/ID (Legacy)</option>
53+
</select>
54+
</span>
55+
</p>
56+
<p class="control is-expanded">
57+
<input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
58+
@keyup="validateQueryString" type="text" class="input cve-id-input is-expanded"
59+
placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
60+
<input v-else v-model.trim="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString"
61+
type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
62+
</p>
63+
<p class="control">
64+
<button @click="validate" class="button cve-button cve-button-accent-warm"
65+
:class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
66+
:aria-disabled="cveListSearchStore.isSeachButtonDisabled">
67+
{{ searchTypeBoolean ? 'Search' : 'Find'}}
68+
</button>
69+
</p>
70+
</div>
71+
<div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
72+
<div class="is-flex is-align-content-flex-start">
73+
<p id="alertIcon" class="is-hidden">alert</p>
74+
<font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
75+
aria-labelledby="alertIcon" aria-hidden="false" />
76+
<p class="cve-help-text">
77+
{{ errorMessage }}
78+
</p>
8179
</div>
8280
</div>
8381
</div>

‎src/views/CVERecord/CVERecord.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,7 @@
2626
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
2727
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="img"
2828
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
29-
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from
30-
<span class="icon-text">
31-
<a :href="resultUrl" target="_blank"> {{ resultUrl }}
32-
<span class="icon cve-icon-xxs">
33-
<p id="externalLinkIcon" class="is-hidden">external website</p>
34-
<font-awesome-icon icon="up-right-from-square"
35-
aria-labelledby="externalLinkIcon" aria-hidden="false"/>
36-
</span>
37-
</a>
38-
</span>
39-
</p>
29+
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
4030
</div>
4131
</div>
4232
<PublishedRecord v-if="usecveRecordStore.isPublished"/>
@@ -56,6 +46,14 @@
5646
<ServiceUnavailable></ServiceUnavailable>
5747
</div>
5848
<div v-else-if="!usecveRecordStore.isIdOrRecordFound" class="has-text-centered">
49+
<div class="notification is-warning is-light" role="alert">
50+
<div v-if="websiteEnv !== 'prd'" class="is-flex" style="justify-content: center;">
51+
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
52+
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="img"
53+
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
54+
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
55+
</div>
56+
</div>
5957
<h1 class="title is-3 is-4 mb-2">{{usecveRecordStore.cveId}} not found.</h1>
6058
<span class="icon-text">
6159
<a :href="legacyCveWebsiteLink" target="_blank">

‎src/views/CVERecord/SearchResults.vue‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,7 @@
3131
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
3232
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="alert"
3333
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
34-
<p>
35-
You are accessing <span class="has-text-weight-bold">Production</span> data from
36-
<span class="icon-text">
37-
<a :href="resultUrl" target="_blank">{{ resultUrl }}
38-
<span class="icon cve-icon-xxs">
39-
<p id="externalLinkIcon" class="is-hidden">external website</p>
40-
<font-awesome-icon icon="up-right-from-square"
41-
aria-labelledby="externalLinkIcon" aria-hidden="false"/>
42-
</span>
43-
</a>
44-
</span>
45-
</p>
34+
<p>You are accessing <span class="has-text-weight-bold">Production</span> data from {{ resultUrl }}</p>
4635
</div>
4736
</div>
4837
<div class="mb-3" v-if="Object.keys(cveListSearchStore.recordData).length > 0">
@@ -235,7 +224,17 @@
235224
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve">search tips</router-link>.
236225
</p>
237226
</div>
238-
<SurveyLinkComponent/>
227+
<p class="has-text-centered mt-4">
228+
<a href="https://forms.office.com/g/qmmTaYnr5y" target="_blank">
229+
Provide feedback on the new search capability
230+
<span class="icon cve-icon-xxs">
231+
<p id="externalSurveyLink" class="is-hidden">
232+
Survey opens in a new tab or window depending on browser settings
233+
</p>
234+
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false" class="ml-1"/>
235+
</span>
236+
</a>
237+
</p>
239238
</div>
240239
</div>
241240
</div>

0 commit comments

Comments
 (0)