From b54ff66cca9125ac4d05d4eb5704749d00446e16 Mon Sep 17 00:00:00 2001 From: pratap0007 Date: Mon, 17 Jan 2022 09:33:06 +0530 Subject: [PATCH] Adds Instructions to add Tasks or Pipelines 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 --- .../App/__snapshots__/App.test.tsx.snap | 148 +++++++++----- ui/src/containers/Header/Header.css | 27 ++- ui/src/containers/Header/Header.test.tsx | 12 +- .../Header/__snapshots__/Header.test.tsx.snap | 124 ++++++++---- ui/src/containers/Header/index.tsx | 184 +++++++++++++++--- ui/src/containers/Search/Search.css | 2 +- ui/src/containers/UserProfile/UserProfile.css | 14 +- ui/src/containers/UserProfile/index.tsx | 4 +- .../store/__snapshots__/catalog.test.ts.snap | 2 + ui/src/store/catalog.test.ts | 9 +- ui/src/store/catalog.ts | 12 +- ui/src/store/testdata/catalogs.json | 6 +- 12 files changed, 426 insertions(+), 118 deletions(-) diff --git a/ui/src/containers/App/__snapshots__/App.test.tsx.snap b/ui/src/containers/App/__snapshots__/App.test.tsx.snap index 6986dab3aa..9ef68b7bbd 100644 --- a/ui/src/containers/App/__snapshots__/App.test.tsx.snap +++ b/ui/src/containers/App/__snapshots__/App.test.tsx.snap @@ -25,41 +25,89 @@ exports[`App should render the component correctly and match the snapshot 1`] =
- -
- -
- - - - - - - + +
+ +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+ +
+ + +
+ +

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

+
- - -
- - - - - - - + + + - +
- - - - - - Login - - - - +
@@ -69,9 +117,19 @@ exports[`App should render the component correctly and match the snapshot 1`] = + + + + + + + + + + - + @@ -82,12 +140,12 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Welcome to Tekton Hub

-

+

Discover, search and share reusable Tasks and Pipelines

@@ -149,7 +207,7 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Kind

@@ -190,7 +248,7 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Platform

@@ -231,7 +289,7 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Catalog

@@ -272,7 +330,7 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Category

@@ -345,11 +403,11 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

Tekton is a - + Continuous Delivery Foundation @@ -369,20 +427,20 @@ exports[`App should render the component correctly and match the snapshot 1`] =
-

+

© 2022 The Linux Foundation®. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our - + Trademark Usage page . Linux is a registered trademark of Linus Torvalds. - + Privacy Policy @@ -390,7 +448,7 @@ exports[`App should render the component correctly and match the snapshot 1`] = and - + Terms of Use diff --git a/ui/src/containers/Header/Header.css b/ui/src/containers/Header/Header.css index 2fc7a757de..c47e45441a 100644 --- a/ui/src/containers/Header/Header.css +++ b/ui/src/containers/Header/Header.css @@ -1,12 +1,35 @@ .hub-header-login { color: white; font-size: 1em; + text-decoration: none; + vertical-align: 0em !important; } .hub-header-search-hint svg { - vertical-align: 0em !important; - margin-left: 0.2em; + vertical-align: 0.5em !important; + margin-left: -1em; + cursor: pointer; +} + +.hub-header-contribute { cursor: pointer; + color: white; + font-size: 1em; + text-decoration: none; +} + +.hub-header-dropdown > .pf-c-dropdown__toggle-icon { + margin-left: -0.1em; +} + +.hub-header-contribute { + color: white; + font-size: 1em; + margin-left: 0.5em; +} + +.hub-header-contribute__dropdown { + outline: none; } .hub-header-sigin-button { diff --git a/ui/src/containers/Header/Header.test.tsx b/ui/src/containers/Header/Header.test.tsx index a35c1a492c..3a89bdd758 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(3).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 find the login Modal', () => { @@ -68,7 +70,7 @@ describe('Header', () => { ); - expect(component.find(Modal).slice(1).props().className).toBe('hub-header-login__modal'); + expect(component.find(Modal).slice(3).props().className).toBe('hub-header-login__modal'); }); it('should authenticate', (done) => { diff --git a/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap b/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap index 7715de09ff..2a37c44ca3 100644 --- a/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap +++ b/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap @@ -17,41 +17,89 @@ exports[`Header should render the header component and find Search component 1`]

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

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

+
- + + + +
- - - - - - Login - - - - +
@@ -61,9 +109,19 @@ 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 9c8b140095..f5ad1103cc 100644 --- a/ui/src/containers/Header/index.tsx +++ b/ui/src/containers/Header/index.tsx @@ -16,7 +16,13 @@ import { TextListItem, Button, AlertVariant, - Divider + Divider, + DropdownItem, + DropdownSeparator, + Flex, + FlexItem, + Dropdown, + DropdownToggle } from '@patternfly/react-core'; import logo from '../../assets/logo/logo.png'; import { IconSize } from '@patternfly/react-icons'; @@ -31,36 +37,81 @@ import { AUTH_BASE_URL, REDIRECT_URI } from '../../config/constants'; import { IProvider } from '../../store/provider'; import { titleCase } from '../../common/titlecase'; import AlertDisplay from '../../components/AlertDisplay'; +import { ICatalog } from '../../store/catalog'; const Header: React.FC = observer(() => { - const { user, providers } = useMst(); + const { user, providers, catalogs } = useMst(); const history = useHistory(); const [isModalOpen, setIsModalOpen] = React.useState(false); const [disable, setDisable] = React.useState(false); + const [isResInstModallOpen, setResInstModalOpen] = React.useState(false); + const [isCatInstModallOpen, setCatInstModalOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(false); + + const dropdownItems = [ + setResInstModalOpen(true)} + > + Add a resource + , + , + setCatInstModalOpen(true)} + > + Add a catalog + + ]; const headerTools = ( - - - - - setIsModalOpen(true)} className="hub-header-search-hint"> - - - - {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( - - ) : ( - user.setIsAuthModalOpen(true)} - > - - Login - - - )} + + + + + + + setIsModalOpen(true)} className="hub-header-search-hint"> + + + + + + + setIsOpen(!isOpen)} + isPlain + toggle={ + setIsOpen(!isOpen)} className="hub-header-dropdown"> + + Contribute + + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + + + + {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( + + ) : ( + user.setIsAuthModalOpen(true)} + > + + Login + + + )} + + ); @@ -95,6 +146,93 @@ const Header: React.FC = observer(() => { + setResInstModalOpen(false)} + width={'50%'} + > + + + + Add a new Resource to Hub by following the below steps + + + Add a new resource to Hub by creating a pull request to available Catalogs where the + new resource should follow the guildelines mentioned + + {' '} + here + + + Available catalogs are: + + {catalogs.values.map((catalog: ICatalog, index: number) => ( + + + {titleCase(catalog.name)} + + + ))} + + + Note: Newly added resource would be available on the Hub within 30 minutes once the PR + gets merged. + + + + + setCatInstModalOpen(false)} + width={'50%'} + > + + + + {' '} + Add a new catalog to the list of available catalogs on Hub by modifying + + {' '} + config.yaml . + + For more details please refer to the + + {' '} + document + + . + + + + Note: If you are adding a new catalog to Hub then a config refresh needs to be done by + the user who has config refresh scopes as per + + {' '} + config.yaml + + + + + + { ); return ( - +
{
- +
); }); export default UserProfile; diff --git a/ui/src/store/__snapshots__/catalog.test.ts.snap b/ui/src/store/__snapshots__/catalog.test.ts.snap index 852b85deda..4cd19a4fd4 100644 --- a/ui/src/store/__snapshots__/catalog.test.ts.snap +++ b/ui/src/store/__snapshots__/catalog.test.ts.snap @@ -11,6 +11,7 @@ Object { "provider": "github", "selected": false, "type": "community", + "url": "https://github.com/tektoncd/catalogs", }, "2": Object { "id": 2, @@ -18,6 +19,7 @@ Object { "provider": "gitlab", "selected": false, "type": "official", + "url": "https://github.com/openshift/catalog", }, }, } diff --git a/ui/src/store/catalog.test.ts b/ui/src/store/catalog.test.ts index 0f15184f70..d5c0169957 100644 --- a/ui/src/store/catalog.test.ts +++ b/ui/src/store/catalog.test.ts @@ -13,7 +13,8 @@ describe('Store Object', () => { const store = Catalog.create({ id: 1, name: 'tekton', - type: 'community' + type: 'community', + url: 'https://github.com/tektoncd/catalog' }); expect(store.name).toBe('tekton'); @@ -106,7 +107,7 @@ describe('Store Object', () => { ); }); - it('can get a provider for catalog', (done) => { + it('can get a provider and url for catalog', (done) => { const store = CatalogStore.create({}, { api }); when( @@ -116,6 +117,10 @@ describe('Store Object', () => { assert(catalog); expect(catalog.provider).toBe('gitlab'); + expect(catalog.provider).toBe('gitlab'); + expect(catalog.url).toBe('https://github.com/openshift/catalog'); + expect(catalog.type).toBe('official'); + done(); } ); diff --git a/ui/src/store/catalog.ts b/ui/src/store/catalog.ts index cf9a9b3ef7..f9e5840c83 100644 --- a/ui/src/store/catalog.ts +++ b/ui/src/store/catalog.ts @@ -13,6 +13,7 @@ export const Catalog = types name: types.optional(types.string, ''), type: types.optional(types.string, ''), provider: types.optional(types.string, ''), + url: types.optional(types.string, ''), selected: false }) .actions((self) => ({ @@ -38,7 +39,13 @@ export const CatalogStore = types .actions((self) => ({ add(item: ICatalog) { - self.items.put({ id: item.id, name: item.name, type: item.type, provider: item.provider }); + self.items.put({ + id: item.id, + name: item.name, + type: item.type, + provider: item.provider, + url: item.url + }); }, clearSelected() { self.items.forEach((c) => { @@ -98,7 +105,8 @@ export const CatalogStore = types id: c.id, name: c.name, type: c.type, - provider: c.provider + provider: c.provider, + url: c.url })); catalogs.forEach((c: ICatalog) => self.add(c)); diff --git a/ui/src/store/testdata/catalogs.json b/ui/src/store/testdata/catalogs.json index 2c67f7cfa3..e0bcf9cbe7 100644 --- a/ui/src/store/testdata/catalogs.json +++ b/ui/src/store/testdata/catalogs.json @@ -4,13 +4,15 @@ "id": 2, "name": "tekton-hub", "type": "official", - "provider": "gitlab" + "provider": "gitlab", + "url": "https://github.com/openshift/catalog" }, { "id": 1, "name": "tekton", "type": "community", - "provider": "github" + "provider": "github", + "url": "https://github.com/tektoncd/catalogs" } ] } \ No newline at end of file