UI: Adds implementation and tests for resources store using mst

this patch creates store for resource and filter resources
based on selected categories,catalog and kind

Signed-off-by: Shiv verma <shverma@redhat.com>

ui/package.json

@@ -10,8 +10,10 @@
     "@types/node": "^12.12.54",
     "@types/react": "^16.9.46",
     "@types/react-dom": "^16.9.8",
-    "axios": "^0.19.2",
+    "axios": "^0.20.0",
+    "fuzzysort": "^1.1.4",
     "mobx": "^5.15.6",
+    "mobx-react": "^6.2.5",
     "mobx-state-tree": "^3.17.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

ui/src/App.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react"
+import logo from "./logo.svg"
+import "./App.css"
 
 function App() {
   return (
@@ -20,7 +20,7 @@ function App() {
         </a>
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

ui/src/api/index.ts

@@ -1,11 +1,22 @@
 import axios from "axios"
 import { API_URL } from "../config/constants"
 import { ICategory } from "../store/category"
+import { IResource } from "../store/resources"
+
 export interface Api {
   categories(): Promise<ICategory>
+  resources(): Promise<IResource>
 }
 
 export class Hub implements Api {
+  async resources() {
+    try {
+      return axios.get(`${API_URL}/resources`)
+    } catch (err) {
+      return err.response
+    }
+  }
+
   async categories() {
     try {
       return axios.get(`${API_URL}/categories`)

ui/src/api/testutil.ts

@@ -1,6 +1,7 @@
 import { Api } from "./"
 import * as fs from "fs"
 import { ICategory } from "../store/category"
+import { IResource } from "../store/resources"
 
 export class FakeHub implements Api {
   dataDir: string
@@ -9,7 +10,16 @@ export class FakeHub implements Api {
     this.dataDir = dataDir
   }
 
-  categories() {
+  resources() {
+    const data = `${this.dataDir}/resources.json`
+
+    const ret = () => JSON.parse(fs.readFileSync(data).toString())
+    return new Promise<IResource>((resolve, reject) =>
+      setTimeout(() => resolve(ret()), 1000)
+    )
+  }
+
+  async categories() {
     const data = `${this.dataDir}/categories.json`
 
     const ret = () => JSON.parse(fs.readFileSync(data).toString())

ui/src/index.tsx

@@ -1,17 +1,38 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
+import * as serviceWorker from "./serviceWorker"
+import { Hub } from "./api"
+import { KindStore } from "./store/kind"
+import { CatalogStore } from "./store/catalog"
+import { CategoryStore } from "./store/category"
+import { ResourceStore } from "./store/resources"
+
+const api = new Hub()
+
+const store = ResourceStore.create(
+  {},
+  {
+    api,
+    kindStore: KindStore.create({}),
+    catalogStore: CatalogStore.create({}),
+    categoryStore: CategoryStore.create({}, { api }),
+  }
+)
+
+setInterval(function () {
+  console.log(store.list)
+}, 6000)
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-);
+  document.getElementById("root")
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()

ui/src/store/__snapshots__/catalog.test.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Catalog Store can create a store 1`] = `
+Array [
+  Object {
+    "name": "official",
+    "selected": false,
+  },
+]
+`;

ui/src/store/__snapshots__/kind.test.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Kind Store can create a store 1`] = `
+Array [
+  Object {
+    "name": "Task",
+    "selected": false,
+  },
+]
+`;

ui/src/store/__snapshots__/resources.test.ts.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Store functions can create a store 1`] = `
+Array [
+  Object {
+    "catalog": Object {
+      "id": 1,
+      "type": "official",
+    },
+    "id": 5,
+    "kind": "Task",
+    "latestVersion": Object {
+      "description": "Buildah task builds source into a container image and then pushes it to a container registry.
+Buildah Task builds source into a container image using Project Atomic's Buildah build tool.It uses Buildah's support for building from Dockerfiles, using its buildah bud command.This command executes the directives in the Dockerfile to assemble a container image, then pushes that image to a container registry.",
+      "displayName": "buildah",
+      "id": 5,
+      "minPipelinesVersion": "",
+      "rawURL": "https://raw.githubusercontent.com/Pipelines-Marketplace/catalog/master/task/buildah/0.1/buildah.yaml",
+      "updatedAt": "2020-07-17 12:26:26.835302 +0000 UTC",
+      "version": "0.1",
+      "webURL": "https://github.com/Pipelines-Marketplace/catalog/tree/master/task/buildah/0.1/buildah.yaml",
+    },
+    "name": "buildah",
+    "rating": 5,
+    "tags": Array [
+      Object {
+        "id": 1,
+        "name": "image-build",
+      },
+    ],
+  },
+  Object {
+    "catalog": Object {
+      "id": 1,
+      "type": "official",
+    },
+    "id": 4,
+    "kind": "Task",
+    "latestVersion": Object {
+      "description": "This Pipeline builds, pushes, and deploys your application to a Google Kubernetes Engine cluster using gke-deploy.",
+      "displayName": "",
+      "id": 4,
+      "minPipelinesVersion": "",
+      "rawURL": "https://raw.githubusercontent.com/Pipelines-Marketplace/catalog/master/task/build-push-gke-deploy/0.1/build-push-gke-deploy.yaml",
+      "updatedAt": "2020-07-17 12:26:26.831271 +0000 UTC",
+      "version": "0.1",
+      "webURL": "https://github.com/Pipelines-Marketplace/catalog/tree/master/task/build-push-gke-deploy/0.1/build-push-gke-deploy.yaml",
+    },
+    "name": "build-push-gke-deploy",
+    "rating": 5,
+    "tags": Array [
+      Object {
+        "id": 10,
+        "name": "deploy",
+      },
+    ],
+  },
+  Object {
+    "catalog": Object {
+      "id": 1,
+      "type": "official",
+    },
+    "id": 6,
+    "kind": "Task",
+    "latestVersion": Object {
+      "description": "This Task builds source into a container image using Moby BuildKit.",
+      "displayName": "buildkit",
+      "id": 6,
+      "minPipelinesVersion": "",
+      "rawURL": "https://raw.githubusercontent.com/Pipelines-Marketplace/catalog/master/task/buildkit/0.1/buildkit.yaml",
+      "updatedAt": "2020-07-17 12:26:26.839271 +0000 UTC",
+      "version": "0.1",
+      "webURL": "https://github.com/Pipelines-Marketplace/catalog/tree/master/task/buildkit/0.1/buildkit.yaml",
+    },
+    "name": "buildkit",
+    "rating": 4,
+    "tags": Array [
+      Object {
+        "id": 1,
+        "name": "image-build",
+      },
+    ],
+  },
+  Object {
+    "catalog": Object {
+      "id": 1,
+      "type": "official",
+    },
+    "id": 7,
+    "kind": "Task",
+    "latestVersion": Object {
+      "description": "This Task builds source into a container image using Moby BuildKit.
+This buildkit-daemonless Task is similar to buildkit but does not need creating Secret, Deployment, and Service resources for setting up the buildkitd daemon cluster.",
+      "displayName": "buildkit daemonless",
+      "id": 7,
+      "minPipelinesVersion": "",
+      "rawURL": "https://raw.githubusercontent.com/Pipelines-Marketplace/catalog/master/task/buildkit-daemonless/0.1/buildkit-daemonless.yaml",
+      "updatedAt": "2020-07-17 12:26:26.843821 +0000 UTC",
+      "version": "0.1",
+      "webURL": "https://github.com/Pipelines-Marketplace/catalog/tree/master/task/buildkit-daemonless/0.1/buildkit-daemonless.yaml",
+    },
+    "name": "buildkit-daemonless",
+    "rating": 4,
+    "tags": Array [
+      Object {
+        "id": 1,
+        "name": "image-build",
+      },
+    ],
+  },
+  Object {
+    "catalog": Object {
+      "id": 1,
+      "type": "official",
+    },
+    "id": 2,
+    "kind": "Task",
+    "latestVersion": Object {
+      "description": "This task syncs (deploys) an Argo CD application and waits for it to be healthy.
+To do so, it requires the address of the Argo CD server and some form of authentication either a username/password or an authentication token.",
+      "displayName": "argocd",
+      "id": 2,
+      "minPipelinesVersion": "",
+      "rawURL": "https://raw.githubusercontent.com/Pipelines-Marketplace/catalog/master/task/argocd/0.1/argocd.yaml",
+      "updatedAt": "2020-07-17 12:26:26.822315 +0000 UTC",
+      "version": "0.1",
+      "webURL": "https://github.com/Pipelines-Marketplace/catalog/tree/master/task/argocd/0.1/argocd.yaml",
+    },
+    "name": "argocd",
+    "rating": 3.5,
+    "tags": Array [
+      Object {
+        "id": 10,
+        "name": "deploy",
+      },
+    ],
+  },
+]
+`;