Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Adds Instructions to add Tasks or Pipelines #316

Closed
wants to merge 1 commit into from
Closed

UI: Adds Instructions to add Tasks or Pipelines #316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 103 additions & 45 deletions ui/src/containers/App/__snapshots__/App.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 25 additions & 2 deletions ui/src/containers/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
12 changes: 7 additions & 5 deletions ui/src/containers/Header/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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', () => {
Expand All @@ -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) => {
Expand Down
124 changes: 91 additions & 33 deletions ui/src/containers/Header/__snapshots__/Header.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

184 changes: 161 additions & 23 deletions ui/src/containers/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
);

Expand Down Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we show the list of catalog available, because we are already showing it them in filter

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we show the list of catalog available, because we are already showing it them in filter

cc: @vinamra28 @piyush-garg

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah we should be keeping that

<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`}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/containers/Search/Search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
border: 0px;
font-style: italic;
color: black;
width: 20em;
width: 17em;
outline: none;
}
14 changes: 13 additions & 1 deletion ui/src/containers/UserProfile/UserProfile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -20,3 +24,11 @@
.hub-userProfile a {
outline: none;
}

.header-contribute__margin {
margin-right: -1em;
}

.hub-userProfile img {
margin-bottom: -0.4em;
}
4 changes: 2 additions & 2 deletions ui/src/containers/UserProfile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const UserProfile: React.FC = observer(() => {
);

return (
<React.Fragment>
<div className="hub-userProfile__margin">
<Dropdown
className="hub-userProfile"
position="right"
Expand All @@ -108,7 +108,7 @@ const UserProfile: React.FC = observer(() => {
</ClipboardCopy>
</div>
</Modal>
</React.Fragment>
</div>
);
});
export default UserProfile;
2 changes: 2 additions & 0 deletions ui/src/store/__snapshots__/catalog.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
},
}
Expand Down
9 changes: 7 additions & 2 deletions ui/src/store/catalog.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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(
Expand All @@ -116,6 +117,10 @@ describe('Store Object', () => {
assert(catalog);
expect(catalog.provider).toBe('gitlab');

expect(catalog.provider).toBe('gitlab');
pratap0007 marked this conversation as resolved.
Show resolved Hide resolved
expect(catalog.url).toBe('https://github.com/openshift/catalog');
expect(catalog.type).toBe('official');

done();
}
);
Expand Down
Loading