From 3848ca59b6937060c604dd8391658597e8f68f8f Mon Sep 17 00:00:00 2001 From: pratap0007 Date: Tue, 31 Aug 2021 13:21:58 +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 | 140 ++++++++++----- ui/src/containers/Header/Header.css | 24 ++- ui/src/containers/Header/Header.test.tsx | 10 +- .../Header/__snapshots__/Header.test.tsx.snap | 130 ++++++++++---- ui/src/containers/Header/index.tsx | 162 +++++++++++++++--- ui/src/containers/Search/Search.css | 2 +- ui/src/containers/UserProfile/UserProfile.css | 6 +- .../store/__snapshots__/catalog.test.ts.snap | 2 + ui/src/store/catalog.test.ts | 5 +- ui/src/store/catalog.ts | 12 +- ui/src/store/testdata/catalogs.json | 6 +- 11 files changed, 388 insertions(+), 111 deletions(-) diff --git a/ui/src/containers/App/__snapshots__/App.test.tsx.snap b/ui/src/containers/App/__snapshots__/App.test.tsx.snap index 2366916a79..15999430f9 100644 --- a/ui/src/containers/App/__snapshots__/App.test.tsx.snap +++ b/ui/src/containers/App/__snapshots__/App.test.tsx.snap @@ -25,45 +25,93 @@ exports[`App should render the component correctly and match the snapshot 1`] =
- -
- -
- - - - - - - + +
+ +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+ +
+ + +
+ +

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

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

+ + + + + Login + + + + +

+
- +
- - -

- - - - - Login - - - - -

- +
@@ -73,6 +121,16 @@ exports[`App should render the component correctly and match the snapshot 1`] = + + + + + + + + + +
@@ -117,7 +175,7 @@ exports[`App should render the component correctly and match the snapshot 1`] =
- - - + +
+ +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+
- - -
- - - - - - - + + +
+ +

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

+
- + + +
+ +

+ + + + + Login + + + + +

+ +
+
- - -

- - - - - Login - - - - -

- +
@@ -65,6 +113,16 @@ 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..4baf2aecbf 100644 --- a/ui/src/containers/Header/index.tsx +++ b/ui/src/containers/Header/index.tsx @@ -8,13 +8,18 @@ import { PageHeaderTools, Text, TextVariants, - GridItem, Grid, Modal, ModalVariant, TextContent, TextList, - TextListItem + TextListItem, + DropdownItem, + DropdownSeparator, + Dropdown, + DropdownToggle, + Flex, + FlexItem } from '@patternfly/react-core'; import logo from '../../assets/logo/logo.png'; import { IconSize } from '@patternfly/react-icons'; @@ -25,31 +30,77 @@ import './Header.css'; import { scrollToTop } from '../../common/scrollToTop'; import Icon from '../../components/Icon'; import { Icons } from '../../common/icons'; +import { ICatalog } from '../../store/catalog'; +import { titleCase } from '../../common/titlecase'; const Header: React.FC = observer(() => { - const { user } = useMst(); + const { user, catalogs } = useMst(); const history = useHistory(); const [isModalOpen, setIsModalOpen] = 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="header-search-hint"> - - - - {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( - - ) : ( - - - Login - - - )} + + + + + + + setIsModalOpen(true)} className="header-search-hint"> + + + + + + + setIsOpen(!isOpen)} + isPlain + toggle={ + setIsOpen(!isOpen)} className="header-dropdown"> + + Contribute + + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + + + + {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( + + ) : ( + + + Login + + + )} + + ); @@ -82,6 +133,77 @@ 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 your own catalog to the list of catalogs available on Hub + + + This{' '} + + docs + {' '} + defines the requirement and steps to add your catalog to Hub + + + Note: If you are adding your own catalog in hub then you need to contact hub owner to + refresh the config of deployed Hub + + + + ); }); diff --git a/ui/src/containers/Search/Search.css b/ui/src/containers/Search/Search.css index b5435615af..d5c3e9f4c5 100644 --- a/ui/src/containers/Search/Search.css +++ b/ui/src/containers/Search/Search.css @@ -4,6 +4,6 @@ border: 0px; font-style: italic; color: black; - width: 20em; + width: 17em; outline: none; } diff --git a/ui/src/containers/UserProfile/UserProfile.css b/ui/src/containers/UserProfile/UserProfile.css index 1d911172af..d2a796c3bb 100644 --- a/ui/src/containers/UserProfile/UserProfile.css +++ b/ui/src/containers/UserProfile/UserProfile.css @@ -4,7 +4,7 @@ } .hub-userProfile { - margin-right: -1em; + margin-top: 0.6em; outline: none; } @@ -20,3 +20,7 @@ .hub-userProfile a { outline: none; } + +.header-contribute__margin { + margin-right: -1em; +} 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 6acd7e038f..5d80e90461 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'); @@ -114,7 +115,7 @@ describe('Store Object', () => { () => { const catalog = store.items.get('2'); assert(catalog); - expect(catalog.provider).toBe("gitlab"); + expect(catalog.provider).toBe('gitlab'); done(); } diff --git a/ui/src/store/catalog.ts b/ui/src/store/catalog.ts index 1b0fbb5e8e..f8733fa1be 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