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 <[email protected]>
tektoncd · May 6, 2022 · b54ff66 · b54ff66
1 parent 6417e89
commit b54ff66
Show file tree

Hide file tree

Showing 12 changed files with 426 additions and 118 deletions.
diff --git a/ui/src/containers/App/__snapshots__/App.test.tsx.snap b/ui/src/containers/App/__snapshots__/App.test.tsx.snap
diff --git 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
@@ -43,10 +43,10 @@ describe('Header', () => {
         </Router>
       </Provider>
     );
-    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(
       <Provider>
         <Router>
@@ -55,8 +55,10 @@ describe('Header', () => {
       </Provider>
     );
 
-    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', () => {
       </Provider>
     );
 
-    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
diff --git 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 = [
+    <DropdownItem
+      className="hub-header-contribute__dropdown"
+      key="action-1"
+      onClick={() => setResInstModalOpen(true)}
+    >
+      Add a resource
+    </DropdownItem>,
+    <DropdownSeparator key="separator-1" />,
+    <DropdownItem
+      className="hub-header-contribute__dropdown"
+      key="action-2"
+      onClick={() => setCatInstModalOpen(true)}
+    >
+      Add a catalog
+    </DropdownItem>
+  ];
 
   const headerTools = (
     <PageHeaderTools>
-      <Grid>
-        <GridItem span={10}>
-          <Search />
-        </GridItem>
-        <GridItem span={1} onClick={() => setIsModalOpen(true)} className="hub-header-search-hint">
-          <Icon id={Icons.Help} size={IconSize.sm} label={'search-tips'} />
-        </GridItem>
-      </Grid>
-      {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? (
-        <UserProfile />
-      ) : (
-        <Text
-          style={{ textDecoration: 'none' }}
-          component={TextVariants.a}
-          onClick={() => user.setIsAuthModalOpen(true)}
-        >
-          <span className="hub-header-login">
-            <b>Login</b>
-          </span>
-        </Text>
-      )}
+      <Flex>
+        <FlexItem>
+          <Flex>
+            <FlexItem>
+              <Search />
+            </FlexItem>
+            <FlexItem onClick={() => setIsModalOpen(true)} className="hub-header-search-hint">
+              <Icon id={Icons.Help} size={IconSize.sm} label={'search-tips'} />
+            </FlexItem>
+          </Flex>
+        </FlexItem>
+        <FlexItem className="hub-header-contribute__margin">
+          <Text component={TextVariants.h3}>
+            <Dropdown
+              onSelect={() => setIsOpen(!isOpen)}
+              isPlain
+              toggle={
+                <DropdownToggle onToggle={() => setIsOpen(!isOpen)} className="hub-header-dropdown">
+                  <Text component={TextVariants.h2}>
+                    <span className="hub-header-contribute">Contribute</span>
+                  </Text>
+                </DropdownToggle>
+              }
+              isOpen={isOpen}
+              dropdownItems={dropdownItems}
+            />
+          </Text>
+        </FlexItem>
+        <FlexItem>
+          {user.isAuthenticated && user.refreshTokenInfo.expiresAt * 1000 > global.Date.now() ? (
+            <UserProfile />
+          ) : (
+            <Text
+              style={{ textDecoration: 'none' }}
+              component={TextVariants.a}
+              onClick={() => user.setIsAuthModalOpen(true)}
+            >
+              <span className="hub-header-login">
+                <b>Login</b>
+              </span>
+            </Text>
+          )}
+        </FlexItem>
+      </Flex>
     </PageHeaderTools>
   );
 
@@ -95,6 +146,93 @@ const Header: React.FC = observer(() => {
         </Grid>
       </Modal>
 
+      <Modal
+        title="Instructions to add a new Resource in Hub"
+        isOpen={isResInstModallOpen}
+        onClose={() => setResInstModalOpen(false)}
+        width={'50%'}
+      >
+        <Grid>
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              Add a new Resource to Hub by following the below steps
+            </Text>
+            <Text>
+              Add a new resource to Hub by creating a pull request to available Catalogs where the
+              new resource should follow the guildelines mentioned
+              <Text
+                component={TextVariants.a}
+                target="_blank"
+                href="https://github.com/tektoncd/catalog#catalog-structure"
+              >
+                {' '}
+                here
+              </Text>
+            </Text>
+            <Text>Available catalogs are:</Text>
+            <TextList>
+              {catalogs.values.map((catalog: ICatalog, index: number) => (
+                <TextListItem key={index}>
+                  <Text component={TextVariants.a} href={`${catalog.url}`} target="_blank">
+                    {titleCase(catalog.name)}
+                  </Text>
+                </TextListItem>
+              ))}
+            </TextList>
+            <Text component={TextVariants.blockquote}>
+              Note: Newly added resource would be available on the Hub within 30 minutes once the PR
+              gets merged.
+            </Text>
+          </TextContent>
+        </Grid>
+      </Modal>
+      <Modal
+        title="Instructions to add a new catalog in Hub"
+        isOpen={isCatInstModallOpen}
+        onClose={() => setCatInstModalOpen(false)}
+        width={'50%'}
+      >
+        <Grid>
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              {' '}
+              Add a new catalog to the list of available catalogs on Hub by modifying
+              <Text
+                component={TextVariants.a}
+                target="_blank"
+                href="https://github.com/tektoncd/hub/blob/main/config.yaml"
+              >
+                {' '}
+                config.yaml .
+              </Text>
+              For more details please refer to the
+              <Text
+                component={TextVariants.a}
+                target="_blank"
+                href="https://github.com/tektoncd/hub/blob/main/docs/ADD_NEW_CATALOG.md"
+              >
+                {' '}
+                document
+              </Text>
+              .
+            </Text>
+
+            <Text component={TextVariants.blockquote}>
+              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
+              <Text
+                component={TextVariants.a}
+                href="https://github.com/tektoncd/hub/blob/main/config.yaml"
+                target="_blank"
+              >
+                {' '}
+                config.yaml
+              </Text>
+            </Text>
+          </TextContent>
+        </Grid>
+      </Modal>
+
       <Modal
         variant={ModalVariant.small}
         title={`Tekton Hub`}

diff --git 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
@@ -4,10 +4,14 @@
 }
 
 .hub-userProfile {
-  margin-right: -1em;
+  margin-top: 0.6em;
   outline: none;
 }
 
+.hub-userProfile__margin {
+  margin-left: -1.3em;
+}
+
 .hub-userProfile svg {
   margin-left: -1em;
   margin-right: 0em;
@@ -20,3 +24,11 @@
 .hub-userProfile a {
   outline: none;
 }
+
+.header-contribute__margin {
+  margin-right: -1em;
+}
+
+.hub-userProfile img {
+  margin-bottom: -0.4em;
+}
diff --git a/ui/src/containers/UserProfile/index.tsx b/ui/src/containers/UserProfile/index.tsx
@@ -86,7 +86,7 @@ const UserProfile: React.FC = observer(() => {
   );
 
   return (
-    <React.Fragment>
+    <div className="hub-userProfile__margin">
       <Dropdown
         className="hub-userProfile"
         position="right"
@@ -108,7 +108,7 @@ const UserProfile: React.FC = observer(() => {
           </ClipboardCopy>
         </div>
       </Modal>
-    </React.Fragment>
+    </div>
   );
 });
 export default UserProfile;
diff --git a/ui/src/store/__snapshots__/catalog.test.ts.snap b/ui/src/store/__snapshots__/catalog.test.ts.snap
@@ -11,13 +11,15 @@ Object {
       "provider": "github",
       "selected": false,
       "type": "community",
+      "url": "https://github.com/tektoncd/catalogs",
     },
     "2": Object {
       "id": 2,
       "name": "tekton-hub",
       "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
@@ -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();
       }
     );