Skip to content

Commit

Permalink
refactor(creds,sources,scans): discovery-149 emptyState grid (#121)
Browse files Browse the repository at this point in the history 
* credentials, sources, scansEmptyState, remove grid
  • Loading branch information
@cdcabrera
cdcabrera committed Sep 7, 2022
1 parent bbaec29 commit 04bad1a
Show file tree
Hide file tree
Showing 7 changed files with 293 additions and 347 deletions.
194 changes: 93 additions & 101 deletions src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,123 +2,115 @@

exports[`CredentialsEmptyState Component should render a basic component 1`] = `
<div
class="container-fluid"
class="pf-c-empty-state pf-m-lg quipucords-empty-state"
>
<div
class="row"
class="pf-c-empty-state__content"
>
<svg
aria-hidden="true"
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 pf-m-lg quipucords-empty-state"
class="pf-c-empty-state__body"
>
t(view.empty-state, {"context":"description_credentials","name":"The Quipucords tool"})
</div>
<div
class="pf-c-empty-state__primary"
>
<div
class="pf-c-empty-state__content"
class="dropdown btn-group btn-group-lg btn-group-primary"
>
<svg
aria-hidden="true"
class="pf-c-empty-state__icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 1024 1024"
width="1em"
<button
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle btn btn-lg btn-primary"
id="createCredentialButton"
role="button"
type="button"
>
<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"
Add Credential
<span
class="caret"
/>
</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_credentials","name":"The Quipucords tool"})
</div>
<div
class="pf-c-empty-state__primary"
</button>
<ul
aria-labelledby="createCredentialButton"
class="dropdown-menu dropdown-menu-right"
role="menu"
>
<div
class="dropdown btn-group btn-group-lg btn-group-primary"
<li
class=""
role="presentation"
>
<button
aria-expanded="false"
aria-haspopup="true"
class="dropdown-toggle btn btn-lg btn-primary"
id="createCredentialButton"
role="button"
type="button"
<a
href="#"
role="menuitem"
tabindex="-1"
>
Add Credential
<span
class="caret"
/>
</button>
<ul
aria-labelledby="createCredentialButton"
class="dropdown-menu dropdown-menu-right"
role="menu"
Network Credential
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
Network Credential
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
Satellite Credential
</a>
</li>
<li
class=""
role="presentation"
>
<a
href="#"
role="menuitem"
tabindex="-1"
>
VCenter Credential
</a>
</li>
</ul>
</div>
</div>
<div
class="pf-c-empty-state__secondary"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
Satellite Credential
</a>
</li>
<li
class=""
role="presentation"
>
t(view.empty-state, {"context":"label_source"})
</button>
</div>
<a
href="#"
role="menuitem"
tabindex="-1"
>
VCenter Credential
</a>
</li>
</ul>
</div>
</div>
<div
class="pf-c-empty-state__secondary"
>
<button
aria-disabled="false"
class="pf-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-1"
data-ouia-component-type="PF4/Button"
data-ouia-safe="true"
type="button"
>
t(view.empty-state, {"context":"label_source"})
</button>
</div>
</div>
</div>
`;
Expand Down
56 changes: 26 additions & 30 deletions src/components/credentials/credentialsEmptyState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,40 +12,36 @@ import {
Title
} from '@patternfly/react-core';
import { AddCircleOIcon } from '@patternfly/react-icons';
import { DropdownButton, Grid, MenuItem, Row } from 'patternfly-react';
import { DropdownButton, MenuItem } from 'patternfly-react';
import helpers from '../../common/helpers';
import { translate } from '../i18n/i18n';

const CredentialsEmptyState = ({ onAddCredential, onAddSource, t, uiSentenceStartName, uiShortName }) => (
<Grid fluid>
<Row>
<EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
<EmptyStateIcon icon={AddCircleOIcon} />
<Title headingLevel="h1">{t('view.empty-state', { context: 'title', name: uiShortName })}</Title>
<EmptyStateBody>
{t('view.empty-state', { context: ['description', 'credentials'], name: uiSentenceStartName })}
</EmptyStateBody>
<EmptyStatePrimary>
<DropdownButton bsStyle="primary" bsSize="large" title="Add Credential" pullRight id="createCredentialButton">
<MenuItem eventKey="1" onClick={() => onAddCredential('network')}>
Network Credential
</MenuItem>
<MenuItem eventKey="2" onClick={() => onAddCredential('satellite')}>
Satellite Credential
</MenuItem>
<MenuItem eventKey="2" onClick={() => onAddCredential('vcenter')}>
VCenter Credential
</MenuItem>
</DropdownButton>
</EmptyStatePrimary>
<EmptyStateSecondaryActions>
<Button variant={ButtonVariant.link} onClick={onAddSource}>
{t('view.empty-state', { context: ['label', 'source'] })}
</Button>
</EmptyStateSecondaryActions>
</EmptyState>
</Row>
</Grid>
<EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
<EmptyStateIcon icon={AddCircleOIcon} />
<Title headingLevel="h1">{t('view.empty-state', { context: 'title', name: uiShortName })}</Title>
<EmptyStateBody>
{t('view.empty-state', { context: ['description', 'credentials'], name: uiSentenceStartName })}
</EmptyStateBody>
<EmptyStatePrimary>
<DropdownButton bsStyle="primary" bsSize="large" title="Add Credential" pullRight id="createCredentialButton">
<MenuItem eventKey="1" onClick={() => onAddCredential('network')}>
Network Credential
</MenuItem>
<MenuItem eventKey="2" onClick={() => onAddCredential('satellite')}>
Satellite Credential
</MenuItem>
<MenuItem eventKey="2" onClick={() => onAddCredential('vcenter')}>
VCenter Credential
</MenuItem>
</DropdownButton>
</EmptyStatePrimary>
<EmptyStateSecondaryActions>
<Button variant={ButtonVariant.link} onClick={onAddSource}>
{t('view.empty-state', { context: ['label', 'source'] })}
</Button>
</EmptyStateSecondaryActions>
</EmptyState>
);

CredentialsEmptyState.propTypes = {
Expand Down
Loading

0 comments on commit 04bad1a

Please sign in to comment.