Updates catalog store

Previously we were fetching catalogs details from resources now we are fetching it from `/catalogs` api Signed-off-by: Shiv Verma <[email protected]>
tektoncd · Apr 20, 2021 · e90c3f1 · e90c3f1
1 parent 1eed82a
commit e90c3f1
Show file tree

Hide file tree

Showing 15 changed files with 204 additions and 124 deletions.
diff --git a/ui/src/api/index.ts b/ui/src/api/index.ts
@@ -1,8 +1,9 @@
 import axios from 'axios';
-import { API_URL } from '../config/constants';
+import { API_URL, API_VERSION } from '../config/constants';
 import { ICategory } from '../store/category';
 import { IResource, IVersion } from '../store/resource';
 import { ITokenInfo } from '../store/auth';
+import { ICatalog } from '../store/catalog';
 
 interface Token {
   token: string;
@@ -26,6 +27,7 @@ export interface Rating {
 export interface Api {
   categories(): Promise<ICategory>;
   resources(): Promise<IResource>;
+  catalogs(): Promise<ICatalog>;
   resourceVersion(resourceId: number): Promise<IVersion>;
   versionUpdate(versionId: number): Promise<IVersion>;
   authentication(authCode: string): Promise<AuthResponse>;
@@ -54,6 +56,14 @@ export class Hub implements Api {
     }
   }
 
+  async catalogs() {
+    try {
+      return axios.get(`${API_URL}/${API_VERSION}/catalogs`).then((response) => response.data);
+    } catch (err) {
+      return err.response;
+    }
+  }
+
   async authentication(authCode: string) {
     try {
       return axios

diff --git a/ui/src/api/testutil.ts b/ui/src/api/testutil.ts
@@ -3,6 +3,7 @@ import { ICategory } from '../store/category';
 import { IResource, IVersion } from '../store/resource';
 import { ITokenInfo } from '../store/auth';
 import { Api, AuthResponse } from './';
+import { ICatalog } from '../store/catalog';
 
 export class FakeHub implements Api {
   dataDir: string;
@@ -28,6 +29,15 @@ export class FakeHub implements Api {
     });
   }
 
+  async catalogs() {
+    const data = `${this.dataDir}/catalogs.json`;
+
+    const ret = () => JSON.parse(fs.readFileSync(data).toString());
+    return new Promise<ICatalog>((resolve) => {
+      setTimeout(() => resolve(ret()), 1000);
+    });
+  }
+
   async resourceVersion(resourceId: number) {
     const data = `${this.dataDir}/resource_versions_${resourceId}.json`;
 

diff --git a/ui/src/components/Cards/Cards.test.tsx b/ui/src/components/Cards/Cards.test.tsx
@@ -4,6 +4,8 @@ import { shallow } from 'enzyme';
 import { FakeHub } from '../../api/testutil';
 import { ResourceStore } from '../../store/resource';
 import { CategoryStore } from '../../store/category';
+import { CatalogStore } from '../../store/catalog';
+
 import Cards from '.';
 
 const TESTDATA_DIR = `src/store/testdata`;
@@ -19,7 +21,14 @@ afterEach(() => {
 
 describe('Cards', () => {
   it('should render the resources on cards', (done) => {
-    const store = ResourceStore.create({}, { api, categories: CategoryStore.create({}, { api }) });
+    const store = ResourceStore.create(
+      {},
+      {
+        api,
+        catalogs: CatalogStore.create({}, { api }),
+        categories: CategoryStore.create({}, { api })
+      }
+    );
 
     when(
       () => !store.isLoading,

diff --git a/ui/src/components/Filter/Filter.test.tsx b/ui/src/components/Filter/Filter.test.tsx
@@ -5,6 +5,7 @@ import { shallow } from 'enzyme';
 import Filter from '.';
 import { CategoryStore } from '../../store/category';
 import { ResourceStore } from '../../store/resource';
+import { CatalogStore } from '../../store/catalog';
 
 const TESTDATA_DIR = `src/store/testdata`;
 const api = new FakeHub(TESTDATA_DIR);
@@ -57,7 +58,14 @@ describe('Filter component', () => {
   });
 
   it('checks the checkbox render count for catalogs', (done) => {
-    const store = ResourceStore.create({}, { api, categories: CategoryStore.create({}, { api }) });
+    const store = ResourceStore.create(
+      {},
+      {
+        api,
+        catalogs: CatalogStore.create({}, { api }),
+        categories: CategoryStore.create({}, { api })
+      }
+    );
 
     when(
       () => !store.isLoading,

diff --git a/ui/src/config/constants.tsx b/ui/src/config/constants.tsx
@@ -5,3 +5,4 @@ window.config = window.config || {
 
 export const API_URL = window.config.API_URL;
 export const GH_CLIENT_ID = window.config.GH_CLIENT_ID;
+export const API_VERSION = 'v1';
diff --git a/ui/src/containers/CatalogFilter/__snapshots__/CatalogFilter.test.tsx.snap b/ui/src/containers/CatalogFilter/__snapshots__/CatalogFilter.test.tsx.snap
@@ -32,36 +32,36 @@ 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=\\"tekton\\" name=\\"tekton\\" isValid={true} isDisabled={false}>
+                <Checkbox className=\\"hub-filter-checkbox\\" label={{...}} isChecked={false} onChange={[Function: onChange]} aria-label=\\"controlled checkbox\\" id=\\"openshift\\" name=\\"openshift\\" isValid={true} isDisabled={false}>
                   <div className=\\"pf-c-check hub-filter-checkbox\\">
-                    <input id=\\"tekton\\" name=\\"tekton\\" 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\\">
+                    <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\\">
                       <div>
-                        <Icon id=\\"catalog\\" size=\\"sm\\" label=\\"tekton\\">
-                          <CatalogIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"tekton\\" 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\\">
+                        <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\\">
                               <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>
-                        Tekton
+                        Openshift
                       </div>
                     </label>
                   </div>
                 </Checkbox>
-                <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}>
+                <Checkbox className=\\"hub-filter-checkbox\\" label={{...}} isChecked={false} onChange={[Function: onChange]} aria-label=\\"controlled checkbox\\" id=\\"tekton\\" name=\\"tekton\\" isValid={true} isDisabled={false}>
                   <div className=\\"pf-c-check hub-filter-checkbox\\">
-                    <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\\">
+                    <input id=\\"tekton\\" name=\\"tekton\\" 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\\">
                       <div>
-                        <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\\">
+                        <Icon id=\\"catalog\\" size=\\"sm\\" label=\\"tekton\\">
+                          <CatalogIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"tekton\\" 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\\">
                               <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>
-                        Tekton-hub
+                        Tekton
                       </div>
                     </label>
                   </div>

diff --git a/ui/src/containers/CatalogFilter/index.tsx b/ui/src/containers/CatalogFilter/index.tsx
@@ -4,8 +4,8 @@ import Filter from '../../components/Filter';
 import { useMst } from '../../store/root';
 
 const CatalogFilter: React.FC = () => {
-  const { resources } = useMst();
-  return useObserver(() => <Filter store={resources.catalogs} header="Catalog" />);
+  const { catalogs } = useMst();
+  return useObserver(() => <Filter store={catalogs} header="Catalog" />);
 };
 
 export default CatalogFilter;
diff --git a/ui/src/store/__snapshots__/catalog.test.ts.snap b/ui/src/store/__snapshots__/catalog.test.ts.snap
@@ -2,11 +2,21 @@
 
 exports[`Store Object creates a catalog store 1`] = `
 Object {
-  "1": Object {
-    "id": 1,
-    "name": "tekton",
-    "selected": false,
-    "type": "community",
+  "err": "",
+  "isLoading": false,
+  "items": Object {
+    "1": Object {
+      "id": 1,
+      "name": "tekton",
+      "selected": false,
+      "type": "community",
+    },
+    "2": Object {
+      "id": 2,
+      "name": "openshift",
+      "selected": false,
+      "type": "community",
+    },
   },
 }
 `;
diff --git a/ui/src/store/__snapshots__/resource.test.ts.snap b/ui/src/store/__snapshots__/resource.test.ts.snap
@@ -1,24 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Store functions creates a catalog store 1`] = `
-Object {
-  "items": Object {
-    "1": Object {
-      "id": 1,
-      "name": "tekton",
-      "selected": false,
-      "type": "community",
-    },
-    "2": Object {
-      "id": 2,
-      "name": "tekton-hub",
-      "selected": false,
-      "type": "official",
-    },
-  },
-}
-`;
-
 exports[`Store functions creates a kind store 1`] = `
 Object {
   "items": Object {

diff --git a/ui/src/store/catalog.test.ts b/ui/src/store/catalog.test.ts
@@ -1,7 +1,12 @@
-import { Catalog, CatalogStore } from './catalog';
 import { getSnapshot } from 'mobx-state-tree';
+import { when } from 'mobx';
+import { Catalog, CatalogStore } from './catalog';
 import { assert } from './utils';
 import { Icons } from '../common/icons';
+import { FakeHub } from '../api/testutil';
+
+const TESTDATA_DIR = `${__dirname}/testdata`;
+const api = new FakeHub(TESTDATA_DIR);
 
 describe('Store Object', () => {
   it('can create a catalog object', () => {
@@ -15,62 +20,57 @@ describe('Store Object', () => {
   });
 
   it('creates a catalog store', (done) => {
-    const store = CatalogStore.create({});
-
-    const item = Catalog.create({
-      id: 1,
-      name: 'tekton',
-      type: 'community'
-    });
-
-    store.add(item);
-
-    expect(getSnapshot(store.items)).toMatchSnapshot();
-
-    done();
+    const store = CatalogStore.create({}, { api });
+    expect(store.isLoading).toBe(true);
+    when(
+      () => !store.isLoading,
+      () => {
+        expect(store.items.size).toBe(2);
+        expect(store.isLoading).toBe(false);
+
+        expect(getSnapshot(store)).toMatchSnapshot();
+
+        done();
+      }
+    );
   });
 
   it('should toggle a selected catalog', (done) => {
-    const store = CatalogStore.create({});
-
-    const item = Catalog.create({
-      id: 1,
-      name: 'tekton',
-      type: 'community'
-    });
-
-    store.add(item);
-
-    const catalogs = store.items.get('1');
-    assert(catalogs);
-    catalogs.toggle();
-
-    expect(store.selected.size).toBe(1);
-    expect(catalogs.selected).toBe(true);
-
-    done();
+    const store = CatalogStore.create({}, { api });
+    expect(store.isLoading).toBe(true);
+    when(
+      () => !store.isLoading,
+      () => {
+        expect(store.isLoading).toBe(false);
+        const catalogs = store.items.get('1');
+        assert(catalogs);
+        catalogs.toggle();
+
+        expect(store.selected.size).toBe(1);
+        expect(catalogs.selected).toBe(true);
+
+        done();
+      }
+    );
   });
 
   it('should clear all the selected catalog', (done) => {
-    const store = CatalogStore.create({});
-
-    const item = Catalog.create({
-      id: 1,
-      name: 'tekton',
-      type: 'community'
-    });
-
-    store.add(item);
-
-    const catalogs = store.items.get('1');
-    assert(catalogs);
-    catalogs.toggle();
-
-    store.clearSelected();
-
-    expect(catalogs.selected).toBe(false);
-
-    done();
+    const store = CatalogStore.create({}, { api });
+    when(
+      () => !store.isLoading,
+      () => {
+        expect(store.isLoading).toBe(false);
+
+        const catalogs = store.items.get('1');
+        assert(catalogs);
+        catalogs.toggle();
+
+        store.clearSelected();
+
+        expect(catalogs.selected).toBe(false);
+        done();
+      }
+    );
   });
 
   it('can get an icon for catalog', (done) => {