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 <shverma@redhat.com>
tektoncd · Sep 24, 2021 · 461e604 · 461e604
1 parent 3c53fab
commit 461e604
Show file tree

Hide file tree

Showing 7 changed files with 383 additions and 104 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,10 +1,30 @@
 .hub-header-login {
   color: white;
   font-size: 1em;
+  margin-left: 1.8em;
+  text-decoration: none;
+  vertical-align: 0em !important;
 }
 
 .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;
+}
+
+.header-dropdown > .pf-c-dropdown__toggle-icon {
+  margin-left: -0.1em;
+}
+
+.hub-header-contribute {
+  color: white;
+  font-size: 1em;
+  margin-left: 0.5em;
+}
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 render user profile', (done) => {

diff --git a/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap b/ui/src/containers/Header/__snapshots__/Header.test.tsx.snap
@@ -17,45 +17,93 @@ exports[`Header should render the header component and find Search component 1`]
             </div>
             <PageHeaderTools>
               <div className=\\"pf-c-page__header-tools\\">
-                <Grid>
-                  <div className=\\"pf-l-grid\\">
-                    <GridItem span={10}>
-                      <div className=\\"pf-l-grid__item pf-m-10-col\\">
-                        <Memo(wrappedComponent)>
-                          <ForwardRef type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\">
-                            <TextInputBase type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\" innerRef={{...}} isRequired={false} validated=\\"default\\" isDisabled={false} isReadOnly={false} isLeftTruncated={false}>
-                              <input onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" onFocus={[Function (anonymous)]} onBlur={[Function (anonymous)]} className=\\"pf-c-form-control hub-search\\" onChange={[Function (anonymous)]} type=\\"search\\" value=\\"\\" aria-invalid={false} required={false} disabled={false} readOnly={false} />
-                            </TextInputBase>
-                          </ForwardRef>
-                        </Memo(wrappedComponent)>
+                <Flex>
+                  <div className=\\"pf-l-flex\\">
+                    <FlexItem>
+                      <div className=\\"\\">
+                        <Flex>
+                          <div className=\\"pf-l-flex\\">
+                            <FlexItem>
+                              <div className=\\"\\">
+                                <Memo(wrappedComponent)>
+                                  <ForwardRef type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\">
+                                    <TextInputBase type=\\"search\\" value=\\"\\" onChange={[Function: onSearchChange]} onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" className=\\"hub-search\\" innerRef={{...}} isRequired={false} validated=\\"default\\" isDisabled={false} isReadOnly={false} isLeftTruncated={false}>
+                                      <input onKeyPress={[Function: onSearchKeyPress]} aria-label=\\"text input example\\" placeholder=\\"Search for resources...\\" spellCheck=\\"false\\" onFocus={[Function (anonymous)]} onBlur={[Function (anonymous)]} className=\\"pf-c-form-control hub-search\\" onChange={[Function (anonymous)]} type=\\"search\\" value=\\"\\" aria-invalid={false} required={false} disabled={false} readOnly={false} />
+                                    </TextInputBase>
+                                  </ForwardRef>
+                                </Memo(wrappedComponent)>
+                              </div>
+                            </FlexItem>
+                            <FlexItem onClick={[Function: onClick]} className=\\"header-search-hint\\">
+                              <div onClick={[Function: onClick]} className=\\"header-search-hint\\">
+                                <Icon id=\\"help\\" size=\\"sm\\" label=\\"search-tips\\">
+                                  <HelpIcon size=\\"sm\\" label=\\"search-tips\\" color=\\"currentColor\\" noVerticalAlign={false}>
+                                    <svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1024 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" label=\\"search-tips\\">
+                                      <path d=\\"M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z\\" transform=\\"rotate(180 0 512) scale(-1 1)\\" />
+                                    </svg>
+                                  </HelpIcon>
+                                </Icon>
+                              </div>
+                            </FlexItem>
+                          </div>
+                        </Flex>
                       </div>
-                    </GridItem>
-                    <GridItem span={1} onClick={[Function: onClick]} className=\\"header-search-hint\\">
-                      <div className=\\"pf-l-grid__item pf-m-1-col header-search-hint\\" onClick={[Function: onClick]}>
-                        <Icon id=\\"help\\" size=\\"sm\\" label=\\"search-tips\\">
-                          <HelpIcon size=\\"sm\\" label=\\"search-tips\\" color=\\"currentColor\\" noVerticalAlign={false}>
-                            <svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1024 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" label=\\"search-tips\\">
-                              <path d=\\"M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z\\" transform=\\"rotate(180 0 512) scale(-1 1)\\" />
-                            </svg>
-                          </HelpIcon>
-                        </Icon>
+                    </FlexItem>
+                    <FlexItem className=\\"header-contribute__margin\\">
+                      <div className=\\"header-contribute__margin\\">
+                        <Text component=\\"h3\\">
+                          <h3 data-pf-content={true} className=\\"\\">
+                            <Dropdown onSelect={[Function: onSelect]} isPlain={true} toggle={{...}} isOpen={false} dropdownItems={{...}}>
+                              <DropdownWithContext isPlain={true} toggle={{...}} isOpen={false} dropdownItems={{...}} className=\\"\\" isGrouped={false} position=\\"left\\" direction=\\"down\\" onSelect={[Function: onSelect]} autoFocus={true} menuAppendTo=\\"inline\\">
+                                <div className=\\"pf-c-dropdown\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe={true} data-ouia-component-id={0}>
+                                  <DropdownToggle onToggle={[Function: onToggle]} className=\\"header-dropdown\\" parentRef={{...}} getMenuRef={[Function (anonymous)]} isOpen={false} id=\\"pf-dropdown-toggle-id-0\\" isPlain={true} aria-haspopup={true} onEnter={[Function: onEnter]}>
+                                    <Toggle onEnter={[Function: onEnter]} id=\\"pf-dropdown-toggle-id-0\\" className=\\"header-dropdown\\" isOpen={false} parentRef={{...}} getMenuRef={[Function (anonymous)]} isActive={false} isDisabled={false} isPlain={true} isPrimary={false} onToggle={[Function: onToggle]} aria-haspopup={true} isSplitButton={false} bubbleEvent={false}>
+                                      <button id=\\"pf-dropdown-toggle-id-0\\" className=\\"pf-c-dropdown__toggle pf-m-plain header-dropdown\\" type=\\"button\\" onClick={[Function: onClick]} aria-expanded={false} aria-haspopup={true} onKeyDown={[Function: onKeyDown]} disabled={false}>
+                                        <span className=\\"pf-c-dropdown__toggle-text\\">
+                                          <Text component=\\"h2\\">
+                                            <h2 data-pf-content={true} className=\\"\\">
+                                              <span className=\\"hub-header-contribute\\">
+                                                Contribute
+                                              </span>
+                                            </h2>
+                                          </Text>
+                                        </span>
+                                        <span className=\\"pf-c-dropdown__toggle-icon\\">
+                                          <CaretDownIcon color=\\"currentColor\\" size=\\"sm\\" noVerticalAlign={false}>
+                                            <svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\">
+                                              <path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\" />
+                                            </svg>
+                                          </CaretDownIcon>
+                                        </span>
+                                      </button>
+                                    </Toggle>
+                                  </DropdownToggle>
+                                </div>
+                              </DropdownWithContext>
+                            </Dropdown>
+                          </h3>
+                        </Text>
                       </div>
-                    </GridItem>
+                    </FlexItem>
+                    <FlexItem>
+                      <div className=\\"\\">
+                        <Text component=\\"h2\\">
+                          <h2 data-pf-content={true} className=\\"\\">
+                            <Link to=\\"/login\\" style={{...}}>
+                              <LinkAnchor style={{...}} href=\\"/login\\" navigate={[Function: navigate]}>
+                                <a style={{...}} href=\\"/login\\" onClick={[Function: onClick]}>
+                                  <span className=\\"hub-header-login\\">
+                                    Login
+                                  </span>
+                                </a>
+                              </LinkAnchor>
+                            </Link>
+                          </h2>
+                        </Text>
+                      </div>
+                    </FlexItem>
                   </div>
-                </Grid>
-                <Text component=\\"h3\\">
-                  <h3 data-pf-content={true} className=\\"\\">
-                    <Link to=\\"/login\\" style={{...}}>
-                      <LinkAnchor style={{...}} href=\\"/login\\" navigate={[Function: navigate]}>
-                        <a style={{...}} href=\\"/login\\" onClick={[Function: onClick]}>
-                          <span className=\\"hub-header-login\\">
-                            Login
-                          </span>
-                        </a>
-                      </LinkAnchor>
-                    </Link>
-                  </h3>
-                </Text>
+                </Flex>
               </div>
             </PageHeaderTools>
           </header>
@@ -65,6 +113,16 @@ exports[`Header should render the header component and find Search component 1`]
             <ModalContent variant=\\"small\\" isOpen={false} onClose={[Function: onClose]} className=\\"\\" showClose={true} id={[undefined]} actions={{...}} hasNoBodyWrapper={false} boxId=\\"pf-modal-part-0\\" labelId=\\"pf-modal-part-1\\" descriptorId=\\"pf-modal-part-2\\" title=\\"Search tips:\\" aria-label=\\"\\" aria-describedby=\\"\\" aria-labelledby=\\"\\" ouiaId={[undefined]} ouiaSafe={true} />
           </Portal>
         </Modal>
+        <Modal title=\\"Instructions to add a new Resource in Hub\\" isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" aria-label=\\"\\" showClose={true} aria-describedby=\\"\\" aria-labelledby=\\"\\" id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} appendTo={[Function: appendTo]} ouiaSafe={true}>
+          <Portal containerInfo={{...}}>
+            <ModalContent isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" showClose={true} id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} boxId=\\"pf-modal-part-1\\" labelId=\\"pf-modal-part-2\\" descriptorId=\\"pf-modal-part-3\\" title=\\"Instructions to add a new Resource in Hub\\" aria-label=\\"\\" aria-describedby=\\"\\" aria-labelledby=\\"\\" ouiaId={[undefined]} ouiaSafe={true} />
+          </Portal>
+        </Modal>
+        <Modal title=\\"Instructions to add your own catalog in Hub\\" isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" aria-label=\\"\\" showClose={true} aria-describedby=\\"\\" aria-labelledby=\\"\\" id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} appendTo={[Function: appendTo]} ouiaSafe={true}>
+          <Portal containerInfo={{...}}>
+            <ModalContent isOpen={false} onClose={[Function: onClose]} width=\\"50%\\" className=\\"\\" showClose={true} id={[undefined]} actions={{...}} variant=\\"default\\" hasNoBodyWrapper={false} boxId=\\"pf-modal-part-2\\" labelId=\\"pf-modal-part-3\\" descriptorId=\\"pf-modal-part-4\\" title=\\"Instructions to add your own catalog in Hub\\" aria-label=\\"\\" aria-describedby=\\"\\" aria-labelledby=\\"\\" ouiaId={[undefined]} ouiaSafe={true} />
+          </Portal>
+        </Modal>
       </Memo(wrappedComponent)>
     </Router>
   </BrowserRouter>