Skip to content

Commit

Permalink
Show Open Resource in * on the basis of provider
Browse files Browse the repository at this point in the history 
Right now we were showing `Open <ResourceName> in Github` on the details
page but with multi VCS support we can have catalogs from bitbucket,
gitlab etc so we need to render that on the basis of catalog from the
resource is coming.

Signed-off-by: vinamra28 <vinjain@redhat.com>
  • Loading branch information
@vinamra28 @tekton-robot
vinamra28 authored and tekton-robot committed Sep 29, 2021
1 parent 7ca6adb commit 0ea9ab0
Show file tree
Hide file tree
Showing 8 changed files with 61 additions and 22 deletions.
6 changes: 4 additions & 2 deletions ui/src/containers/BasicDetails/__snapshots__/BasicDetails.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ exports[`length of DropdownItems should be 2 in case of buildah 1`] = `
<p data-pf-content={true} className=\\"hub-details-github\\">
Open
buildah
in Github
in
Github
</p>
</Text>
</li>
Expand Down Expand Up @@ -373,7 +374,8 @@ exports[`should render the BasicDetails component 1`] = `
<p data-pf-content={true} className=\\"hub-details-github\\">
Open
buildah
in Github
in
Github
</p>
</Text>
</li>
Expand Down
25 changes: 20 additions & 5 deletions ui/src/containers/BasicDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,34 @@ import { IconSize } from '@patternfly/react-icons';
import { useObserver } from 'mobx-react';
import { useParams } from 'react-router-dom';
import { useMst } from '../../store/root';
import { IResource } from '../../store/resource';
import { IResource, IResourceStore } from '../../store/resource';
import { ITag } from '../../store/tag';
import { Icons } from '../../common/icons';
import Icon from '../../components/Icon';
import TooltipDisplay from '../../components/TooltipDisplay';
import Rating from '../Rating';
import { titleCase } from '../../common/titlecase';
import { assert } from '../../store/utils';
import { ICatalogStore } from '../../store/catalog';
import './BasicDetails.css';

const BasicDetails: React.FC = () => {
const { resources } = useMst();
const { catalog, kind, name } = useParams();
const { resources, catalogs }: { resources: IResourceStore; catalogs: ICatalogStore } = useMst();
const { catalog, kind, name }: { catalog: string; kind: string; name: string } = useParams();

const resourceKey = `${catalog}/${titleCase(kind)}/${name}`;
const resource: IResource = resources.resources.get(resourceKey);
const resource: IResource | undefined = resources.resources.get(resourceKey);
assert(resource);

const catalogId = resource.catalog.id;
let catalogProvider = 'Github';

for (let catalogItem = 0; catalogItem < catalogs.values.length; catalogItem++) {
if (catalogs.values[catalogItem].id === catalogId) {
catalogProvider = catalogs.values[catalogItem].provider;
break;
}
}

const dropdownItems = resource.versions.map((value) => (
<DropdownItem
Expand Down Expand Up @@ -110,7 +123,9 @@ const BasicDetails: React.FC = () => {
<Icon id={Icons.Github} size={IconSize.md} label="Github" />
</ListItem>
<ListItem>
<Text className="hub-details-github">Open {resource.name} in Github</Text>
<Text className="hub-details-github">
Open {resource.name} in {titleCase(catalogProvider)}
</Text>
</ListItem>
</List>
</a>
Expand Down
14 changes: 7 additions & 7 deletions ui/src/containers/CatalogFilter/__snapshots__/CatalogFilter.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,19 @@ exports[`CatalogFilter finds the filter component and matches the count 1`] = `
</GridItem>
<GridItem span={12}>
<div className=\\"pf-l-grid__item pf-m-12-col\\">
<Checkbox className=\\"hub-filter-checkbox\\" label={{...}} isChecked={false} onChange={[Function: onChange]} aria-label=\\"controlled checkbox\\" id=\\"openshift\\" name=\\"openshift\\" isValid={true} isDisabled={false}>
<Checkbox className=\\"hub-filter-checkbox\\" label={{...}} isChecked={false} onChange={[Function: onChange]} aria-label=\\"controlled checkbox\\" id=\\"tekton-hub\\" name=\\"tekton-hub\\" isValid={true} isDisabled={false}>
<div className=\\"pf-c-check hub-filter-checkbox\\">
<input id=\\"openshift\\" name=\\"openshift\\" className=\\"pf-c-check__input\\" type=\\"checkbox\\" onChange={[Function (anonymous)]} aria-invalid={false} aria-label=\\"controlled checkbox\\" disabled={false} checked={false} />
<label className=\\"pf-c-check__label\\" htmlFor=\\"openshift\\">
<input id=\\"tekton-hub\\" name=\\"tekton-hub\\" className=\\"pf-c-check__input\\" type=\\"checkbox\\" onChange={[Function (anonymous)]} aria-invalid={false} aria-label=\\"controlled checkbox\\" disabled={false} checked={false} />
<label className=\\"pf-c-check__label\\" htmlFor=\\"tekton-hub\\">
<div>
<Icon id=\\"catalog\\" size=\\"sm\\" label=\\"openshift\\">
<CatalogIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"openshift\\" color=\\"currentColor\\" noVerticalAlign={false}>
<svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1097 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" className=\\"hub-icon\\" label=\\"openshift\\">
<Icon id=\\"catalog\\" size=\\"sm\\" label=\\"tekton-hub\\">
<CatalogIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"tekton-hub\\" color=\\"currentColor\\" noVerticalAlign={false}>
<svg style={{...}} fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 64 1097 1024\\" aria-labelledby={{...}} aria-hidden={true} role=\\"img\\" className=\\"hub-icon\\" label=\\"tekton-hub\\">
<path d=\\"M509.714 737.371v-0.686c0.229 0.229 0.229 0.457 0 0.686zM184.457 84.114c-67.2-6.171-111.314-83.657-111.314-83.657v877.257c-73.143-2.286-73.143-68.571-73.143-68.571v-813.714c2.971-86.857 109.714-66.286 109.714-66.286 109.714 154.743 402.286-2.286 402.286-2.286v71.314c-125.714 81.829-242.286 95.543-327.543 85.943zM366.629 133.714c53.486-9.371 110.857-52.571 143.086-60.343v72.914h-3.886c-0.229 0-0.457 0-0.686 0h4.571v590.4c0 0 0 0 0 0v0.686c0 0 0 0 0 0l0.229 58.057c0 0-0.229 0-0.229 0.229v8c-119.314 76.8-274.057 129.143-363.429 145.829v-811.2c65.6 18.057 120.229 13.257 220.343-4.571zM587.429 737.371c-0.229-0.229-0.229-0.229 0 0v0zM1024 877.714v-877.257c0 0-44.114 77.486-111.314 83.657-85.257 9.6-201.829-4.114-327.543-85.943v-71.314c0 0 292.571 157.029 402.286 2.286 0 0 106.743-20.571 109.714 66.286v813.714c0 0 0 66.286-73.143 68.571zM587.429 545.143v-398.857l10.514 1.829c-2.057-1.143-4.343-1.829-6.629-1.829h-3.886v-72.914c32.229 7.771 89.6 50.971 143.086 60.343 100.114 17.829 154.743 22.629 220.343 4.571v811.2c-89.371-16.686-244.114-69.029-363.429-145.6v-8.229c0-0.229-0.229-0.229-0.229-0.229l0.229-58.057v-192.229z\\" transform=\\"rotate(180 0 512) scale(-1 1)\\" />
</svg>
</CatalogIcon>
</Icon>
Openshift
Tekton-hub
</div>
</label>
</div>
Expand Down
3 changes: 2 additions & 1 deletion ui/src/containers/Details/__snapshots__/Details.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ exports[`Details component should render the details component 1`] = `
<p data-pf-content={true} className=\\"hub-details-github\\">
Open
buildah
in Github
in
Github
</p>
</Text>
</li>
Expand Down
6 changes: 4 additions & 2 deletions ui/src/store/__snapshots__/catalog.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ Object {
"1": Object {
"id": 1,
"name": "tekton",
"provider": "github",
"selected": false,
"type": "community",
},
"2": Object {
"id": 2,
"name": "openshift",
"name": "tekton-hub",
"provider": "gitlab",
"selected": false,
"type": "community",
"type": "official",
},
},
}
Expand Down
15 changes: 15 additions & 0 deletions ui/src/store/catalog.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,19 @@ describe('Store Object', () => {
}
);
});

it('can get a provider for catalog', (done) => {
const store = CatalogStore.create({}, { api });

when(
() => !store.isLoading,
() => {
const catalog = store.items.get('2');
assert(catalog);
expect(catalog.provider).toBe("gitlab");

done();
}
);
});
});
6 changes: 4 additions & 2 deletions ui/src/store/catalog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const Catalog = types
id: types.identifierNumber,
name: types.optional(types.string, ''),
type: types.optional(types.string, ''),
provider: types.optional(types.string, ''),
selected: false
})
.actions((self) => ({
Expand All @@ -37,7 +38,7 @@ export const CatalogStore = types

.actions((self) => ({
add(item: ICatalog) {
self.items.put({ id: item.id, name: item.name, type: item.type });
self.items.put({ id: item.id, name: item.name, type: item.type, provider: item.provider });
},
clearSelected() {
self.items.forEach((c) => {
Expand Down Expand Up @@ -96,7 +97,8 @@ export const CatalogStore = types
const catalogs: ICatalog[] = json.data.map((c: ICatalog) => ({
id: c.id,
name: c.name,
type: c.type
type: c.type,
provider: c.provider
}));

catalogs.forEach((c: ICatalog) => self.add(c));
Expand Down
8 changes: 5 additions & 3 deletions ui/src/store/testdata/catalogs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
"data": [
{
"id": 2,
"name": "openshift",
"type": "community"
"name": "tekton-hub",
"type": "official",
"provider": "gitlab"
},
{
"id": 1,
"name": "tekton",
"type": "community"
"type": "community",
"provider": "github"
}
]
}

0 comments on commit 0ea9ab0

Please sign in to comment.