diff --git a/ui/src/containers/App/__snapshots__/App.test.tsx.snap b/ui/src/containers/App/__snapshots__/App.test.tsx.snap index 2366916a79..f2fcf45dd7 100644 --- a/ui/src/containers/App/__snapshots__/App.test.tsx.snap +++ b/ui/src/containers/App/__snapshots__/App.test.tsx.snap @@ -27,43 +27,82 @@ exports[`App should render the component correctly and match the snapshot 1`] =
- -
- - - - - - - + +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+ +
+ + +
+ +
+ +
+ +

+ + Contribute + +

+ +
+ +
+
- -
- - - - - - - + +
+ +
+ +
+ +

+ + + + + Login + + + + +

+ +
+ +
+
- -

- - - - - Login - - - - -

-
@@ -73,6 +112,11 @@ exports[`App should render the component correctly and match the snapshot 1`] = + + + + +
diff --git a/ui/src/containers/Header/Header.css b/ui/src/containers/Header/Header.css index f093d9ef9f..11fac28398 100644 --- a/ui/src/containers/Header/Header.css +++ b/ui/src/containers/Header/Header.css @@ -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; +} diff --git a/ui/src/containers/Header/Header.test.tsx b/ui/src/containers/Header/Header.test.tsx index fcce36813b..b2a42991da 100644 --- a/ui/src/containers/Header/Header.test.tsx +++ b/ui/src/containers/Header/Header.test.tsx @@ -43,10 +43,10 @@ describe('Header', () => { ); - 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( @@ -55,8 +55,10 @@ describe('Header', () => { ); - 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) => { diff --git a/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap b/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap index 186a6600cb..f553566506 100644 --- a/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap +++ b/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap @@ -19,43 +19,82 @@ exports[`Header should render the header component and find Search component 1`]
- -
- - - - - - - + +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+
- -
- - - - - - - + +
+ +
+ +
+ +

+ + Contribute + +

+ +
+ +
+ +
+ + +
+ +
+ +
+ +

+ + + + + Login + + + + +

+ +
+ +
+
- -

- - - - - Login - - - - -

-
@@ -65,6 +104,11 @@ exports[`Header should render the header component and find Search component 1`] + + + + + diff --git a/ui/src/containers/Header/index.tsx b/ui/src/containers/Header/index.tsx index 20980de65a..763eb38ac0 100644 --- a/ui/src/containers/Header/index.tsx +++ b/ui/src/containers/Header/index.tsx @@ -14,7 +14,8 @@ import { ModalVariant, TextContent, TextList, - TextListItem + TextListItem, + TextListVariants } from '@patternfly/react-core'; import logo from '../../assets/logo/logo.png'; import { IconSize } from '@patternfly/react-icons'; @@ -30,26 +31,51 @@ const Header: React.FC = observer(() => { const { user } = useMst(); const history = useHistory(); const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isInstructionModallOpen, setInstructionModalOpen] = React.useState(false); const headerTools = ( - - + + + + + + setIsModalOpen(true)} className="header-search-hint"> + + + - setIsModalOpen(true)} className="header-search-hint"> - + setInstructionModalOpen(true)} + className="header-add-resource" + > + + + + Contribute + + + + + + + + {user.isAuthenticated && + user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( + + ) : ( + + + Login + + + )} + + - {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( - - ) : ( - - - Login - - - )} ); @@ -82,6 +108,81 @@ const Header: React.FC = observer(() => { + + setInstructionModalOpen(false)} + width={'50%'} + > + + + + There are two ways to add Tasks or Pipelines to Hub + + + + Add your own catalog + + + + This{' '} + + docs + {' '} + defines the requirement and steps to add your catalog to Hub + + + + + + + Add your task or pipeline through{' '} + + Tekton Catalog{' '} + + and needs to follow these steps + + + + + Create a pull request to + + Tekton Catalog{' '} + + with with your Task or Pipeline which must be following the guidelines + mentioned{' '} + + here + + + + + + + + Note: Added tasks or pipelines would be available on the Hub within 30 minutes once + the PR gets merged. + + + + ); }); diff --git a/ui/src/containers/UserProfile/UserProfile.css b/ui/src/containers/UserProfile/UserProfile.css index 1d911172af..981f6c27d3 100644 --- a/ui/src/containers/UserProfile/UserProfile.css +++ b/ui/src/containers/UserProfile/UserProfile.css @@ -5,6 +5,7 @@ .hub-userProfile { margin-right: -1em; + margin-top: 0.6em; outline: none; }