From 461e6045322da8f88b4b2e7fed43ef9c57960697 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 | 175 ++++++++++++++++-- ui/src/containers/Search/Search.css | 2 +- ui/src/containers/UserProfile/UserProfile.css | 6 +- 7 files changed, 383 insertions(+), 104 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..a1799ef1f0 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'; @@ -30,26 +35,70 @@ const Header: React.FC = observer(() => { const { user } = 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 +131,94 @@ const Header: React.FC = observer(() => { + + setResInstModalOpen(false)} + width={'50%'} + > + + + + Add a new Resource through{' '} + + Tekton Catalog{' '} + + and needs to follow these steps + + + + + Create a pull request to + + Tekton Catalog{' '} + + with the new resource which must be following the guidelines mentioned{' '} + + here + + + + + + + + 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 + + + Newly added resource would be available on the Hub within 30 minutes once the PR + gets merged. + + + + + + ); }); 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; +}