Show Open Resource in * on the basis of provider

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 <[email protected]>
tektoncd · Sep 29, 2021 · 0ea9ab0 · 0ea9ab0
1 parent 7ca6adb
commit 0ea9ab0
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 22 deletions.
diff --git a/ui/src/containers/BasicDetails/__snapshots__/BasicDetails.test.tsx.snap b/ui/src/containers/BasicDetails/__snapshots__/BasicDetails.test.tsx.snap
@@ -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>
@@ -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>

diff --git a/ui/src/containers/BasicDetails/index.tsx b/ui/src/containers/BasicDetails/index.tsx
@@ -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
@@ -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>

diff --git a/ui/src/containers/CatalogFilter/__snapshots__/CatalogFilter.test.tsx.snap b/ui/src/containers/CatalogFilter/__snapshots__/CatalogFilter.test.tsx.snap
@@ -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>

diff --git a/ui/src/containers/Details/__snapshots__/Details.test.tsx.snap b/ui/src/containers/Details/__snapshots__/Details.test.tsx.snap
@@ -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>

diff --git a/ui/src/store/__snapshots__/catalog.test.ts.snap b/ui/src/store/__snapshots__/catalog.test.ts.snap
@@ -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",
     },
   },
 }

diff --git a/ui/src/store/catalog.test.ts b/ui/src/store/catalog.test.ts
@@ -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();
+      }
+    );
+  });
 });
diff --git a/ui/src/store/catalog.ts b/ui/src/store/catalog.ts
@@ -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) => ({
@@ -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) => {
@@ -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));

diff --git a/ui/src/store/testdata/catalogs.json b/ui/src/store/testdata/catalogs.json
@@ -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"
 			}
 	]
 }
-Original file line number
+Diff line change
@@ Expand Up @@
                                         <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 @@