Skip to content

Commit

Permalink
Merge pull request #3183 from CVEProject/tat-3160-content
Browse files Browse the repository at this point in the history 
#3160 fix input field gap when above notification expands, update not…
  • Loading branch information
@athu-tran
athu-tran authored Oct 16, 2024
2 parents 1237838 + bb277ed commit 78ff71d
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 92 deletions.
134 changes: 66 additions & 68 deletions src/components/cveRecordSearchModule.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,81 @@
<template>
<div class="mt-1">
<div>
<div role="alert" class="notification is-warning is-light">
<div class="is-flex is-flex-direction-row is-align-content-flex-start">
<div class="pr-2 pt-2">
<p id="newSearchHelpText" class="is-hidden">info</p>
<font-awesome-icon style="font-size: 1.25em;" icon="info-circle" role="info"
aria-labelledby="newSearchHelpText" aria-hidden="false" />
</div>
<div>
<button class="button is-text is-ghost cve-btn-container pt-0 pr-2 pb-0 pl-1"
@click="showSearchHelpText = !showSearchHelpText"
aria-controls="searchHelpText"
>
The Test website (test.cve.org) has a new drop-down menu below.
<span class="button is-ghost cve-inner-btn">Read {{ showSearchHelpText ? 'less...' : 'more...' }}</span>
</button>
<div v-if="showSearchHelpText" id="searchHelpText" class="cve-help-text" style="max-width: 810px">
<ol>
<li>
<span class="has-text-weight-bold">Search Capability (Beta) Community testers</span> – To beta-test the new search feature, select
“<span class="has-text-weight-bold">Search CVE List (Beta)</span>” in the drop-down menu. The
<span class="has-text-weight-bold">production</span> data is used.
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips</router-link>
for more information on this new capability. <a href="https://forms.office.com/g/dFzysrHLpR" target="_blank">
<div role="alert" class="notification is-warning is-light">
<div class="is-flex is-align-items-flex-start mt-1" style="max-width: 820px; column-gap: 1rem;">
<div class="pl-3">
<p id="alertIconVariousFormts" class="is-hidden">alert</p>
<font-awesome-icon size="1x" icon="exclamation-triangle" role="alert"
aria-labelledby="alertIconVariousFormts" aria-hidden="false" />
</div>
<div class="is-flex-grow-5">
<p class="mb-2">The <a href="https://test.cve.org">CVE Test website</a> has a new drop-down menu below.</p>
<ol class="cve-help-text pl-4" v-if="showSearchHelpText">
<li class="mb-2">
<p>
<span class="has-text-weight-bold">Search Capability (Beta) Community testers</span> – To beta-test the new search feature, select
“<span class="has-text-weight-bold">Search CVE List (Beta)</span>” in the drop-down menu. The
<span class="has-text-weight-bold">production</span> data is used and newly published data typically becomes searchable within less than
30 minutes.
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve" class="cve-dark-blue-text">Access Search Tips</router-link>
for more information on this new capability.
</p>
<p>
<a href="https://forms.office.com/g/qmmTaYnr5y" target="_blank">
Provide feedback on the new search capability
<span class="icon cve-icon-xxs">
<p id="externalSurveyLink" class="is-hidden">
Survey opens in a new tab or window depending on browser settings
</p>
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false"/>
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false" class="ml-1"/>
</span>.
</a>.
</li>
<li>
<span class="has-text-weight-bold">CNAs</span> – to view your <span class="has-text-weight-bold">test data</span>
(your draft records) select “<span class="has-text-weight-bold">Find a Test CVE Record/ID (Legacy)</span>” in the drop-down menu and
provide a CVE ID to find a specific CVE Record.
</li>
</ol>
</div>
</div>
</p>
</li>
<li>
<span class="has-text-weight-bold">CNAs</span> – to view your <span class="has-text-weight-bold">test data</span>
(your draft records) select “<span class="has-text-weight-bold">Find a Test CVE Record/ID (Legacy)</span>” in the drop-down menu and
provide a CVE ID to find a specific CVE Record.
</li>
</ol>
</div>
<button class="cve-button-ghost cve-btn-container mt-1" @click="showSearchHelpText = !showSearchHelpText" style="float: right !important">
<font-awesome-icon size="1x" :icon="showSearchHelpText ? 'minus' : 'plus'" role="alert"
aria-labelledby="alertIconVariousFormts" aria-hidden="false" />
</button>
</div>
</div>
<div class="field mt-1">
<div class="field has-addons">
<div class="control">
<span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
<select v-model="searchType">
<option>Search CVE List (Beta)</option>
<option>Find a Test CVE Record/ID (Legacy)</option>
</select>
</span>
</div>
<div class="control is-expanded">
<input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
@keyup="validateQueryString" type="text" class="input cve-id-input"
placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
<input v-else v-model.trim="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString"
type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
</div>
<div class="control">
<button @click="validate" class="button cve-button cve-button-accent-warm"
:class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
:aria-disabled="cveListSearchStore.isSeachButtonDisabled">
{{ searchTypeBoolean ? 'Search' : 'Find'}}
</button>
</div>
</div>
<div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
<div class="is-flex is-align-content-flex-start">
<p id="alertIcon" class="is-hidden">alert</p>
<font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
aria-labelledby="alertIcon" aria-hidden="false" />
<p class="cve-help-text">
{{ errorMessage }}
</p>
</div>
<div class="field has-addons mt-1">
<p class="control">
<span v-if="websiteEnv !== 'prd'" class="select cve-search-selector">
<select v-model="searchType">
<option>Search CVE List (Beta)</option>
<option>Find a Test CVE Record/ID (Legacy)</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input v-if="searchTypeBoolean" v-model.trim="queryString" @keyup.enter="onKeyUpEnter"
@keyup="validateQueryString" type="text" class="input cve-id-input is-expanded"
placeholder="Enter keywords (e.g.: CVE ID, sql injection, etc.)" />
<input v-else v-model.trim="cveId" @keyup.enter="onKeyUpEnter" @keyup="validateQueryString"
type="text" class="input cve-id-input" placeholder="Enter CVE ID (CVE-YYYY-NNNN)" />
</p>
<p class="control">
<button @click="validate" class="button cve-button cve-button-accent-warm"
:class="{ 'is-loading': cveListSearchStore.isSearching, 'disabled': cveListSearchStore.isSeachButtonDisabled }"
:aria-disabled="cveListSearchStore.isSeachButtonDisabled">
{{ searchTypeBoolean ? 'Search' : 'Find'}}
</button>
</p>
</div>
<div class="notification is-warning is-light" role="alert" v-if="errorMessage.length > 0">
<div class="is-flex is-align-content-flex-start">
<p id="alertIcon" class="is-hidden">alert</p>
<font-awesome-icon style="flex: 0 0 40px; margin-top:3px" size="lg" icon="exclamation-triangle" role="alert"
aria-labelledby="alertIcon" aria-hidden="false" />
<p class="cve-help-text">
{{ errorMessage }}
</p>
</div>
</div>
</div>
Expand Down
20 changes: 9 additions & 11 deletions src/views/CVERecord/CVERecord.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,7 @@
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="img"
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from
<span class="icon-text">
<a :href="resultUrl" target="_blank"> {{ resultUrl }}
<span class="icon cve-icon-xxs">
<p id="externalLinkIcon" class="is-hidden">external website</p>
<font-awesome-icon icon="up-right-from-square"
aria-labelledby="externalLinkIcon" aria-hidden="false"/>
</span>
</a>
</span>
</p>
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
</div>
</div>
<PublishedRecord v-if="usecveRecordStore.isPublished"/>
Expand All @@ -56,6 +46,14 @@
<ServiceUnavailable></ServiceUnavailable>
</div>
<div v-else-if="!usecveRecordStore.isIdOrRecordFound" class="has-text-centered">
<div class="notification is-warning is-light" role="alert">
<div v-if="websiteEnv !== 'prd'" class="is-flex" style="justify-content: center;">
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="img"
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
<p>You are accessing <span class="has-text-weight-bold">{{ usingProd }}</span> data from {{ resultUrl }}</p>
</div>
</div>
<h1 class="title is-3 is-4 mb-2">{{usecveRecordStore.cveId}} not found.</h1>
<span class="icon-text">
<a :href="legacyCveWebsiteLink" target="_blank">
Expand Down
25 changes: 12 additions & 13 deletions src/views/CVERecord/SearchResults.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,7 @@
<p id="alertIconCveRecordsRequestErrored" class="is-hidden">alert</p>
<font-awesome-icon style="flex: 0 0 40px;" size="1x" icon="triangle-exclamation" role="alert"
aria-labelledby="alertIconCveRecordsRequestErrored" aria-hidden="false" />
<p>
You are accessing <span class="has-text-weight-bold">Production</span> data from
<span class="icon-text">
<a :href="resultUrl" target="_blank">{{ resultUrl }}
<span class="icon cve-icon-xxs">
<p id="externalLinkIcon" class="is-hidden">external website</p>
<font-awesome-icon icon="up-right-from-square"
aria-labelledby="externalLinkIcon" aria-hidden="false"/>
</span>
</a>
</span>
</p>
<p>You are accessing <span class="has-text-weight-bold">Production</span> data from {{ resultUrl }}</p>
</div>
</div>
<div class="mb-3" v-if="Object.keys(cveListSearchStore.recordData).length > 0">
Expand Down Expand Up @@ -235,7 +224,17 @@
<router-link to="/ResourcesSupport/FAQs#pc_cve_list_basicssearch_cve">search tips</router-link>.
</p>
</div>
<SurveyLinkComponent/>
<p class="has-text-centered mt-4">
<a href="https://forms.office.com/g/qmmTaYnr5y" target="_blank">
Provide feedback on the new search capability
<span class="icon cve-icon-xxs">
<p id="externalSurveyLink" class="is-hidden">
Survey opens in a new tab or window depending on browser settings
</p>
<font-awesome-icon icon="external-link-alt" aria-labelledby="extenalSurveyLink" aria-hidden="false" class="ml-1"/>
</span>
</a>
</p>
</div>
</div>
</div>
Expand Down

0 comments on commit 78ff71d

Please sign in to comment.