Skip to content

Commit

Permalink
Adds Instructions to add Tasks or Pipelines
Browse files Browse the repository at this point in the history 
This patch adds an icon and onclick it opens a modal
which shows instructions to add tasks or pipelines to Hub

Signed-off-by: Shiv Verma <[email protected]>
  • Loading branch information
@pratap0007
pratap0007 committed Sep 8, 2021
1 parent 89bee5d commit 5a4a0ae
Show file tree
Hide file tree
Showing 6 changed files with 294 additions and 80 deletions.
106 changes: 75 additions & 31 deletions ui/src/containers/App/__snapshots__/App.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,43 +27,82 @@ exports[`App should render the component correctly and match the snapshot 1`] =
<div className=\\"pf-c-page__header-tools\\">
<Grid>
<div className=\\"pf-l-grid\\">
<GridItem span={10}>
<div className=\\"pf-l-grid__item pf-m-10-col\\">
<Memo(wrappedComponent)>
<ForwardRef type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\">
<TextInputBase type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\" innerRef={{...}} isRequired={false} validated=\\"default\\" isDisabled={false} isReadOnly={false} isLeftTruncated={false}>
<input onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" onFocus={[Function (anonymous)]} onBlur={[Function (anonymous)]} className=\\"pf-c-form-control hub-search\\" onChange={[Function (anonymous)]} type=\\"search\\" value=\\"\\" aria-invalid={false} required={false} disabled={false} readOnly={false} />
</TextInputBase>
</ForwardRef>
</Memo(wrappedComponent)>
<GridItem span={8}>
<div className=\\"pf-l-grid__item pf-m-8-col\\">
<Grid>
<div className=\\"pf-l-grid\\">
<GridItem offset={1} span={10}>
<div className=\\"pf-l-grid__item pf-m-10-col pf-m-offset-1-col\\">
<Memo(wrappedComponent)>
<ForwardRef type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\">
<TextInputBase type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\" innerRef={{...}} isRequired={false} validated=\\"default\\" isDisabled={false} isReadOnly={false} isLeftTruncated={false}>
<input onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" onFocus={[Function (anonymous)]} onBlur={[Function (anonymous)]} className=\\"pf-c-form-control hub-search\\" onChange={[Function (anonymous)]} type=\\"search\\" value=\\"\\" aria-invalid={false} required={false} disabled={false} readOnly={false} />
</TextInputBase>
</ForwardRef>
</Memo(wrappedComponent)>
</div>
</GridItem>
<GridItem span={1} onClick={[Function: onClick]} className=\\"header-search-hint\\">
<div className=\\"pf-l-grid__item pf-m-1-col header-search-hint\\" onClick={[Function: onClick]}>
<Icon id=\\"help\\" size=\\"sm\\" label=\\"search-tips\\">
<HelpIcon size=\\"sm\\" label=\\"search-tips\\" color=\\"currentColor\\" noVerticalAlign={false}>
<svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1024 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" label=\\"search-tips\\">
<path d=\\"M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z\\" transform=\\"rotate(180 0 512) scale(-1 1)\\" />
</svg>
</HelpIcon>
</Icon>
</div>
</GridItem>
</div>
</Grid>
</div>
</GridItem>
<GridItem span={2} onClick={[Function: onClick]} className=\\"header-add-resource\\">
<div className=\\"pf-l-grid__item pf-m-2-col header-add-resource\\" onClick={[Function: onClick]}>
<Grid>
<div className=\\"pf-l-grid\\">
<GridItem offset={2} className=\\"hub-header-contribute-margin\\">
<div className=\\"pf-l-grid__item pf-m-offset-2-col hub-header-contribute-margin\\">
<Text component=\\"h3\\">
<h3 data-pf-content={true} className=\\"\\">
<span className=\\"hub-header-contribute\\">
Contribute
</span>
</h3>
</Text>
</div>
</GridItem>
</div>
</Grid>
</div>
</GridItem>
<GridItem span={1} onClick={[Function: onClick]} className=\\"header-search-hint\\">
<div className=\\"pf-l-grid__item pf-m-1-col header-search-hint\\" onClick={[Function: onClick]}>
<Icon id=\\"help\\" size=\\"sm\\" label=\\"search-tips\\">
<HelpIcon size=\\"sm\\" label=\\"search-tips\\" color=\\"currentColor\\" noVerticalAlign={false}>
<svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1024 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" label=\\"search-tips\\">
<path d=\\"M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z\\" transform=\\"rotate(180 0 512) scale(-1 1)\\" />
</svg>
</HelpIcon>
</Icon>
<GridItem span={2}>
<div className=\\"pf-l-grid__item pf-m-2-col\\">
<Grid>
<div className=\\"pf-l-grid\\">
<GridItem offset={4} className=\\"hub-header-login-margin\\">
<div className=\\"pf-l-grid__item pf-m-offset-4-col hub-header-login-margin\\">
<Text component=\\"h3\\">
<h3 data-pf-content={true} className=\\"\\">
<Link to=\\"/login\\" style={{...}}>
<LinkAnchor style={{...}} href=\\"/login\\" navigate={[Function: navigate]}>
<a style={{...}} href=\\"/login\\" onClick={[Function: onClick]}>
<span className=\\"hub-header-login\\">
Login
</span>
</a>
</LinkAnchor>
</Link>
</h3>
</Text>
</div>
</GridItem>
</div>
</Grid>
</div>
</GridItem>
</div>
</Grid>
<Text component=\\"h3\\">
<h3 data-pf-content={true} className=\\"\\">
<Link to=\\"/login\\" style={{...}}>
<LinkAnchor style={{...}} href=\\"/login\\" navigate={[Function: navigate]}>
<a style={{...}} href=\\"/login\\" onClick={[Function: onClick]}>
<span className=\\"hub-header-login\\">
Login
</span>
</a>
</LinkAnchor>
</Link>
</h3>
</Text>
</div>
</PageHeaderTools>
</header>
Expand All @@ -73,6 +112,11 @@ exports[`App should render the component correctly and match the snapshot 1`] =
<ModalContent variant=\\"small\\" isOpen={false} onClose={[Function: onClose]} className=\\"\\" showClose={true} id={[undefined]} actions={{...}} hasNoBodyWrapper={false} boxId=\\"pf-modal-part-0\\" labelId=\\"pf-modal-part-1\\" descriptorId=\\"pf-modal-part-2\\" title=\\"Search tips:\\" aria-label=\\"\\" aria-describedby=\\"\\" aria-labelledby=\\"\\" ouiaId={[undefined]} ouiaSafe={true} />
</Portal>
</Modal>
<Modal title=\\"Instructions to add Tasks or Pipelines:\\" isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" aria-label=\\"\\" showClose={true} aria-describedby=\\"\\" aria-labelledby=\\"\\" id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} appendTo={[Function: appendTo]} ouiaSafe={true}>
<Portal containerInfo={{...}}>
<ModalContent isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" showClose={true} id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} boxId=\\"pf-modal-part-1\\" labelId=\\"pf-modal-part-2\\" descriptorId=\\"pf-modal-part-3\\" title=\\"Instructions to add Tasks or Pipelines:\\" aria-label=\\"\\" aria-describedby=\\"\\" aria-labelledby=\\"\\" ouiaId={[undefined]} ouiaSafe={true} />
</Portal>
</Modal>
</Memo(wrappedComponent)>
<main role={[undefined]} id={[undefined]} className=\\"pf-c-page__main\\" tabIndex={-1} aria-label={[undefined]}>
<Route exact={true} path=\\"/\\" component={[Function: Background]}>
Expand Down
22 changes: 22 additions & 0 deletions ui/src/containers/Header/Header.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,32 @@
.hub-header-login {
color: white;
font-size: 1em;
vertical-align: 0em !important;
}

.header-search-hint svg {
vertical-align: 0em !important;
cursor: pointer;
margin-left: -0.3em;
}

.header-add-resource svg {
vertical-align: -0.65em !important;
margin-left: 0.2em;
cursor: pointer;
}

.hub-header-contribute {
cursor: pointer;
font-size: 1em;
text-decoration: none;
}

.hub-header-login-margin {
margin-right: -1em;
margin-top: -0.6em;
}

.hub-header-contribute-margin {
margin-top: -0.6em;
}
10 changes: 6 additions & 4 deletions ui/src/containers/Header/Header.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ describe('Header', () => {
</Router>
</Provider>
);
expect(component.find('span').text()).toBe('Login');
expect(component.find('span').slice(1).text()).toBe('Login');
});

it('should find Icon in header and it`s id', () => {
it('should find Icons in header and their id', () => {
const component = mount(
<Provider>
<Router>
Expand All @@ -55,8 +55,10 @@ describe('Header', () => {
</Provider>
);

expect(component.find(Icon).length).toBe(1);
expect(component.find(Icon).props().id).toBe(Icons.Help);
const icons = component.find(Icon);
expect(icons.length).toBe(1);

expect(icons.slice(0).props().id).toBe(Icons.Help);
});

it('should render user profile', (done) => {
Expand Down
Loading

0 comments on commit 5a4a0ae

Please sign in to comment.