Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#3160 fix input field gap when above notification expands, update not… #3183

Merged
merged 1 commit into from
Oct 16, 2024
Merged

#3160 fix input field gap when above notification expands, update not… #3183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 66 additions & 68 deletions src/components/cveRecordSearchModule.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading