From 76debdfc827e90ae9e8514a6ef709934d915085f 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 | 142 +++++++++++---- ui/src/containers/Header/Header.css | 39 ++++ ui/src/containers/Header/Header.test.tsx | 10 +- .../Header/__snapshots__/Header.test.tsx.snap | 132 ++++++++++---- ui/src/containers/Header/index.tsx | 167 ++++++++++++++++-- ui/src/containers/UserProfile/UserProfile.css | 1 + 6 files changed, 406 insertions(+), 85 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..ee244dae41 100644 --- a/ui/src/containers/App/__snapshots__/App.test.tsx.snap +++ b/ui/src/containers/App/__snapshots__/App.test.tsx.snap @@ -27,43 +27,103 @@ exports[`App should render the component correctly and match the snapshot 1`] =
- -
- - - - - - - + +
+ +
+ +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+ +
+ + +
+ +
+ +
+ +

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

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

+ + + + + Login + + + + +

+ +
+ +
+
- -

- - - - - Login - - - - -

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

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

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

+ + + + + Login + + + + +

+ +
+ +
+
- -

- - - - - Login - - - - -

-
@@ -65,6 +125,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..3cd73db3d8 100644 --- a/ui/src/containers/Header/index.tsx +++ b/ui/src/containers/Header/index.tsx @@ -14,7 +14,11 @@ import { ModalVariant, TextContent, TextList, - TextListItem + TextListItem, + DropdownItem, + DropdownSeparator, + Dropdown, + DropdownToggle } from '@patternfly/react-core'; import logo from '../../assets/logo/logo.png'; import { IconSize } from '@patternfly/react-icons'; @@ -30,26 +34,73 @@ 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 + , + , + + Submit a patch + + ]; const headerTools = ( - - + + + + + + setIsModalOpen(true)} className="header-search-hint"> + + + + + + + + + setIsOpen(!isOpen)} + isPlain + toggle={ + setIsOpen(!isOpen)} className="header-dropdown"> + Contribute + + } + isOpen={isOpen} + dropdownItems={dropdownItems} + /> + + + - setIsModalOpen(true)} className="header-search-hint"> - + + + + {user.isAuthenticated && + user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( + + ) : ( + + + Login + + + )} + + - {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? ( - - ) : ( - - - Login - - - )} ); @@ -82,6 +133,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/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; }