Skip to content

Commit

Permalink
refactor(sources): discovery-148 pf4 empty-state (#120)
Browse files Browse the repository at this point in the history 
* locale, add empty-state strings
* sources, pf4 empty-state
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 20, 2022
1 parent fdb48fb commit 113da41
Show file tree
Hide file tree
Showing 8 changed files with 386 additions and 148 deletions.
3 changes: 3 additions & 0 deletions public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"view": {
"empty-state_description_credentials": "Credentials contain authentication information needed to scan a source. A credential includes a username and a password or SSH key. {{name}} uses SSH to connect to servers on the network and uses credentials to access those servers.",
"empty-state_description_scans": "Select a Source to scan from the Sources page.",
"empty-state_description_sources": "Begin by adding one or more sources. A source contains a collection of network information, including systems management solution information, IP addresses, or host names, in addition to SSH ports and credentials.",
"empty-state_filter_description": "The active filters are hiding all items.",
"empty-state_filter_title": "No Results Match the Filter Criteria",
"empty-state_label_clear": "Clear Filters",
Expand All @@ -39,10 +40,12 @@
"error_credentials": "Credentials error",
"error_scan-jobs": "Scan jobs error",
"error_scans": "Scans error",
"error_sources": "Sources error",
"error-message_authentication": "{{message}} Please <0>login</0> to continue.",
"error-message_credentials": "Error retrieving credentials: {{message}}",
"error-message_scan-jobs": "Error retrieving scan jobs: {{message}}",
"error-message_scans": "Error retrieving scans: {{message}}",
"error-message_sources": "Error retrieving sources: {{message}}",
"loading": "Loading...",
"loading_authentication": "Logging in...",
"loading_credentials": "Loading credentials..."
Expand Down
69 changes: 69 additions & 0 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,43 @@ Array [
"key": "view.loading",
"match": "t('view.loading', { context: 'sources' })",
},
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['filter', 'title'] })",
},
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['filter', 'description'] })",
},
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['label', 'clear'] })",
},
Object {
"key": "view.error",
"match": "t('view.error', { context: 'sources' })",
},
Object {
"key": "view.error-message",
"match": "t('view.error-message', { context: ['sources'], message: errorMessage })",
},
],
},
Object {
"file": "./src/components/sources/sourcesEmptyState.js",
"keys": Array [
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['title'], name: uiShortName })",
},
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['description', 'sources'] })",
},
Object {
"key": "view.empty-state",
"match": "t('view.empty-state', { context: ['label', 'source'] })",
},
],
},
]
Expand Down Expand Up @@ -411,6 +448,38 @@ Array [
"file": "./src/components/scans/scanSourceList.js",
"key": "view.error-message",
},
Object {
"file": "./src/components/sources/sources.js",
"key": "view.empty-state",
},
Object {
"file": "./src/components/sources/sources.js",
"key": "view.empty-state",
},
Object {
"file": "./src/components/sources/sources.js",
"key": "view.empty-state",
},
Object {
"file": "./src/components/sources/sources.js",
"key": "view.error",
},
Object {
"file": "./src/components/sources/sources.js",
"key": "view.error-message",
},
Object {
"file": "./src/components/sources/sourcesEmptyState.js",
"key": "view.empty-state",
},
Object {
"file": "./src/components/sources/sourcesEmptyState.js",
"key": "view.empty-state",
},
Object {
"file": "./src/components/sources/sourcesEmptyState.js",
"key": "view.empty-state",
},
]
`;

Expand Down
71 changes: 42 additions & 29 deletions src/components/scans/__tests__/__snapshots__/scansEmptyState.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,58 @@ exports[`ScansEmptyState Component should render a connected component: connecte

exports[`ScansEmptyState Component should render a non-connected component: non-connected do not exist 1`] = `
<div
class="fadein container-fluid"
class="container-fluid"
>
<div
class="row"
>
<div
class="blank-slate-pf full-page-blank-slate"
class="pf-c-empty-state pf-m-lg quipucords-empty-state"
>
<div
class="blank-slate-pf-icon"
class="pf-c-empty-state__content"
>
<span
<svg
aria-hidden="true"
class="pficon pficon-add-circle-o"
/>
</div>
<h4
class="h1 blank-slate-pf-title"
>
Welcome to Quipucords
</h4>
<p
class="blank-slate-pf-info"
>
Begin by adding one or more sources. A source contains a collection of network information,
<br />
including systems management solution information, IP addresses, or host names, in addition to
<br />
SSH ports and credentials.
</p>
<div
class="blank-slate-pf-main-action"
>
<button
class="btn btn-lg btn-primary"
type="button"
class="pf-c-empty-state__icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
/>
</svg>
<h1
class="pf-c-title pf-m-2xl"
data-ouia-component-id="OUIA-Generated-Title-2"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
Add Source
</button>
t(view.empty-state, {"context":"title","name":"Quipucords"})
</h1>
<div
class="pf-c-empty-state__body"
>
t(view.empty-state, {"context":"description_sources"})
</div>
<div
class="pf-c-empty-state__primary"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-2"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
t(view.empty-state, {"context":"label_source"})
</button>
</div>
</div>
</div>
</div>
Expand Down
161 changes: 121 additions & 40 deletions src/components/sources/__tests__/__snapshots__/sources.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,69 +4,150 @@ exports[`Sources Component should render a connected component with default prop

exports[`Sources Component should render a non-connected component error: error 1`] = `
<div
class="blank-slate-pf"
class="pf-c-empty-state quipucords-empty-state__alert"
>
<div
class="alert alert-danger"
class="pf-c-empty-state__content"
>
<span
aria-hidden="true"
class="pficon pficon-error-circle-o"
/>
<span>
Error retrieving sources:
</span>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-1"
data-ouia-component-type="PF4/Alert"
data-ouia-safe="true"
>
<div
class="pf-c-alert__icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align:-0.125em"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
/>
</svg>
</div>
<h4
class="pf-c-alert__title"
>
<span
class="pf-u-screen-reader"
>
Danger alert:
</span>
t(view.error, {"context":"sources"})
</h4>
<div
class="pf-c-alert__description"
>
t(view.error-message, {"context":"sources","message":null})
</div>
</div>
</div>
</div>
`;

exports[`Sources Component should render a non-connected component pending: pending 1`] = `
<div
class="quipucords-view-container"
/>
class="pf-c-backdrop"
>
<div
class="pf-l-bullseye"
>
<div
aria-describedby="pf-modal-part-2"
aria-label="t(modal.aria-label-default)"
aria-labelledby="pf-modal-part-0"
aria-modal="true"
class="pf-c-modal-box pf-m-align-top pf-m-md"
data-ouia-component-id="OUIA-Generated-Modal-medium-1"
data-ouia-component-type="PF4/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-0"
role="dialog"
style="--pf-c-modal-box--m-align-top--spacer: 5%;"
>
<div
aria-live="polite"
class="pf-c-modal-box__body"
id="pf-modal-part-2"
>
<div>
<div
class="blank-slate-pf-icon spinner spinner-lg"
/>
<div
class="text-center"
>
t(view.loading, {"context":"sources"})
</div>
</div>
</div>
</div>
</div>
</div>
`;

exports[`Sources Component should render a non-connected component with empty state: empty state 1`] = `
<div
class="fadein container-fluid"
class="container-fluid"
>
<div
class="row"
>
<div
class="blank-slate-pf full-page-blank-slate"
class="pf-c-empty-state pf-m-lg quipucords-empty-state"
>
<div
class="blank-slate-pf-icon"
class="pf-c-empty-state__content"
>
<span
<svg
aria-hidden="true"
class="pficon pficon-add-circle-o"
/>
</div>
<h4
class="h1 blank-slate-pf-title"
>
Welcome to Quipucords
</h4>
<p
class="blank-slate-pf-info"
>
Begin by adding one or more sources. A source contains a collection of network information,
<br />
including systems management solution information, IP addresses, or host names, in addition to
<br />
SSH ports and credentials.
</p>
<div
class="blank-slate-pf-main-action"
>
<button
class="btn btn-lg btn-primary"
type="button"
class="pf-c-empty-state__icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M576,303 C576,294.715729 569.284271,288 561,288 L463,288 C454.715729,288 448,294.715729 448,303 L448,448 L303,448 C294.715729,448 288,454.715729 288,463 L288,561 C288,569.284271 294.715729,576 303,576 L448,576 L448,720.9 C447.983373,729.207373 454.6927,735.961429 463,736 L561,736 C569.3073,735.961429 576.016627,729.207373 576,720.9 L576,576 L721,576 C724.969024,576.026638 728.784638,574.468589 731.600595,571.671405 C734.416553,568.87422 736.000031,565.069113 736.000031,561.1 L736.000031,463.1 C736.016627,454.792627 729.3073,448.038571 721,448 L576,448 L576,303 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
/>
</svg>
<h1
class="pf-c-title pf-m-2xl"
data-ouia-component-id="OUIA-Generated-Title-1"
data-ouia-component-type="PF4/Title"
data-ouia-safe="true"
>
t(view.empty-state, {"context":"title","name":"Quipucords"})
</h1>
<div
class="pf-c-empty-state__body"
>
t(view.empty-state, {"context":"description_sources"})
</div>
<div
class="pf-c-empty-state__primary"
>
Add Source
</button>
<button
aria-disabled="false"
class="pf-c-button pf-m-primary"
data-ouia-component-id="OUIA-Generated-Button-primary-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
t(view.empty-state, {"context":"label_source"})
</button>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 113da41

Please sign in to comment.