Feature/simba/resource api frontend

dashboard/package.json

@@ -9,6 +9,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "deferred": "^0.7.11",
+    "enum": "^3.0.4",
     "jest-canvas-mock": "^2.2.0",
     "material-table": "^1.66.0",
     "react": "^16.13.1",

dashboard/src/components/app/__snapshots__/App.test.js.snap

@@ -442,87 +442,87 @@ exports[`App hasn't changed 1`] = `
       key="/sources"
       path="/sources"
     >
-      <ResourceList
+      <ResourceListView
         title="Data Sources"
       />
     </Route>
     <Route
       key="/views"
       path="/views"
     >
-      <ResourceList
+      <ResourceListView
         title="Materialized Views"
       />
     </Route>
     <Route
       key="/features"
       path="/features"
     >
-      <ResourceList
+      <ResourceListView
         title="Features"
       />
     </Route>
     <Route
       key="/feature-sets"
       path="/feature-sets"
     >
-      <ResourceList
+      <ResourceListView
         title="Feature Sets"
       />
     </Route>
     <Route
       key="/training-sets"
       path="/training-sets"
     >
-      <ResourceList
+      <ResourceListView
         title="Training Sets"
       />
     </Route>
     <Route
       key="/metrics"
       path="/metrics"
     >
-      <ResourceList
+      <ResourceListView
         title="Metrics"
       />
     </Route>
     <Route
       key="/deployment"
       path="/deployment"
     >
-      <ResourceList
+      <ResourceListView
         title="Deployment"
       />
     </Route>
     <Route
       key="/users"
       path="/users"
     >
-      <ResourceList
+      <ResourceListView
         title="Users"
       />
     </Route>
     <Route
       key="/settings"
       path="/settings"
     >
-      <ResourceList
+      <ResourceListView
         title="Settings"
       />
     </Route>
     <Route
       key="/billing"
       path="/billing"
     >
-      <ResourceList
+      <ResourceListView
         title="Billing"
       />
     </Route>
     <Route
       key="/help"
       path="/help"
     >
-      <ResourceList
+      <ResourceListView
         title="Help"
       />
     </Route>

dashboard/src/components/redux/store/ReduxStore.js

@@ -5,4 +5,9 @@ const store = configureStore({
   reducer: rootReducer,
 });
 
+export const newTestStore = () =>
+  configureStore({
+    reducer: rootReducer,
+  });
+
 export default store;

dashboard/src/components/redux/store/index.js

@@ -1 +1 @@
-export { default } from "./ReduxStore.js";
+export { default, newTestStore } from "./ReduxStore.js";

dashboard/src/components/resource-list/ResourceList.js → dashboard/src/components/resource-list/ResourceListView.js

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export const ResourceList = ({ title }) => {
+export const ResourceListView = ({ title }) => {
   const classes = useStyles();
   return (
     // MaterialTable doesn't support className, so we wrap it in a Box:
@@ -28,4 +28,4 @@ export const ResourceList = ({ title }) => {
   );
 };
 
-export default ResourceList;
+export default ResourceListView;

dashboard/src/components/resource-list/ResourceList.test.js → dashboard/src/components/resource-list/ResourceListView.test.js

@@ -4,12 +4,12 @@ import "jest-canvas-mock";
 import { configure, shallow } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 
-import { ResourceList } from "./ResourceList.js";
+import { ResourceListView } from "./ResourceListView.js";
 
 configure({ adapter: new Adapter() });
 
-describe("ResourceList", () => {
-  const sources = shallow(<ResourceList title={"abc"} />);
+describe("ResourceListView", () => {
+  const sources = shallow(<ResourceListView title={"abc"} />);
 
   it("passes title to child prop", () => {
     expect(sources.children().props().title).toEqual("abc");

dashboard/src/components/resource-list/ResourceSlice.js

@@ -0,0 +1,73 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import Enum from "enum";
+
+export const fetchResources = createAsyncThunk(
+  "resourceList/fetchByType",
+  async ({ api, type }, { signal }) => {
+    const response = await api.fetchResources(type, signal);
+    return response.data;
+  },
+  {
+    condition: ({ api, type }, { getState }) => {
+      const { resources, loading } = getState().resourceList[type];
+      if (loading || resources) {
+        return false;
+      }
+    },
+  }
+);
+
+export const resourceTypes = new Enum([
+  "DATA_SOURCE",
+  "MATERIALIZED_VIEW",
+  "FEATURE",
+  "FEATURE_SET",
+  "TRAINING_SET",
+]);
+
+const reduceFn = (map, type) => {
+  map[type] = {};
+  return map;
+};
+const reduceFnInitial = {};
+export const initialState = resourceTypes.enums.reduce(
+  reduceFn,
+  reduceFnInitial
+);
+
+const resourceSlice = createSlice({
+  name: "resourceList",
+  // initialState is a map between each resource type to an empty object.
+  initialState: initialState,
+  extraReducers: {
+    [fetchResources.pending]: (state, action) => {
+      const type = action.meta.arg.type;
+      const requestId = action.meta.requestId;
+      state[type].resources = null;
+      state[type].requestId = requestId;
+      state[type].loading = true;
+      state[type].failed = false;
+    },
+    [fetchResources.fulfilled]: (state, action) => {
+      const type = action.meta.arg.type;
+      const requestId = action.meta.requestId;
+      if (requestId !== state[type].requestId) {
+        return;
+      }
+      state[type].resources = action.payload;
+      state[type].loading = false;
+      state[type].failed = false;
+    },
+    [fetchResources.rejected]: (state, action) => {
+      const type = action.meta.arg.type;
+      const requestId = action.meta.requestId;
+      if (requestId !== state[type].requestId) {
+        return;
+      }
+      state[type].loading = false;
+      state[type].failed = true;
+    },
+  },
+});
+
+export default resourceSlice.reducer;