add react-admin data provider (close #783) (#1407)

community/tools/ra-data-hasura/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["env"],
+  "plugins": ["babel-plugin-add-module-exports"],
+  "env": {
+    "test": {
+      "plugins": [
+        ["istanbul"]
+      ]
+    }
+  }
+}

community/tools/ra-data-hasura/.eslintrc

@@ -0,0 +1,179 @@
+{
+
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+
+  "parser": "babel-eslint",
+
+  "plugins": [
+    
+  ],
+
+  "rules": {
+    "block-scoped-var": 2,
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": [2, { "properties": "never" }],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "consistent-return": 2,
+    "consistent-this": 0,
+    "curly": [2, "multi-line"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [2, "both"],
+    "guard-for-in": 0,
+    "handle-callback-err": [2, "^(err|error|anySpecificError)$" ],
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, {"before": true, "after": true}],
+    "linebreak-style": 0,
+    "max-depth": 0,
+    "max-len": [2, 120, 4],
+    "max-nested-callbacks": 0,
+    "max-params": 0,
+    "max-statements": 0,
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "newline-after-var": [2, "always"],
+    "new-parens": 2,
+    "no-alert": 0,
+    "no-array-constructor": 2,
+    "no-bitwise": 0,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-cond-assign": 2,
+    "no-console": 0,
+    "no-constant-condition": 0,
+    "no-continue": 0,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-div-regex": 0,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 2,
+    "no-empty": 0,
+    "no-empty-character-class": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 0,
+    "no-extra-strict": 0,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 0,
+    "no-lonely-if": 0,
+    "no-loop-func": 0,
+    "no-mixed-requires": 0,
+    "no-mixed-spaces-and-tabs": [2, false],
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-path-concat": 0,
+    "no-plusplus": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 2,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-reserved-keys": 0,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 0,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-use-before-define": 2,
+    "no-var": 0,
+    "no-void": 0,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "one-var": 0,
+    "operator-assignment": 0,
+    "operator-linebreak": [2, "after"],
+    "padded-blocks": 0,
+    "quote-props": 0,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "semi": [2, "always"],
+    "semi-spacing": 0,
+    "sort-vars": 0,
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+    "space-in-brackets": 0,
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always"],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 2,
+    "wrap-iife": [2, "any"],
+    "wrap-regex": 0,
+    "yoda": [2, "never"]
+  }
+}

community/tools/ra-data-hasura/.gitignore

@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+lib
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+# Remove some common IDE working directories
+.idea
+.vscode
+
+.DS_Store

community/tools/ra-data-hasura/App.js.example.js

@@ -0,0 +1,33 @@
+// assuming app.js inside src/App.js
+import React from 'react';
+import PostIcon from '@material-ui/icons/Book';
+import UserIcon from '@material-ui/icons/Group';
+import { Admin, Resource, ListGuesser } from 'react-admin';
+import hasuraDataProvider from 'ra-data-hasura';
+
+import { PostList, PostEdit, PostCreate, PostShow } from './posts';
+import { UserList } from './users';
+import Dashboard from './Dashboard';
+import authProvider from './authProvider';
+
+const headers = {'content-type': 'application/json'};
+const App = () => (
+  <Admin
+    dataProvider={hasuraDataProvider('http://localhost:8080', headers)}
+    authProvider={authProvider}
+    dashboard={Dashboard}
+  >
+    <Resource
+      name="posts"
+      icon={PostIcon}
+      list={PostList}
+      edit={PostEdit}
+      create={PostCreate}
+      show={PostShow}
+    />
+    <Resource name="users" icon={UserIcon} list={UserList} />
+    <Resource name="comments" list={ListGuesser} />
+  </Admin>
+);
+
+export default App;

community/tools/ra-data-hasura/README.md

@@ -0,0 +1,84 @@
+# ra-data-hasura
+
+> [react-admin](https://github.com/marmelab/react-admin) data provider for Hasura GraphQL Engine
+
+## Installation
+
+```
+$ npm install --save ra-data-hasura
+```
+
+## Usage
+
+The `ra-data-hasura` provider accepts two arguments:
+
+- `serverEndpoint` - The URL at which Hasura GraphQL Engine is running. (for example: http://localhost:8080). This is required.
+
+- `headers` - An optional argument. Pass your auth headers here.
+
+```
+hasuraDataProvider(serverEndpoint, headers)
+```
+
+In the following example, we import `hasuraDataProvider` from `ra-data-hasura` and give it the hasura server endpoint (assumed to be running at http://localhost:8080) and an optional headers object.
+
+```js
+import React from 'react';
+import PostIcon from '@material-ui/icons/Book';
+import UserIcon from '@material-ui/icons/Group';
+import { Admin, Resource, ListGuesser } from 'react-admin';
+import hasuraDataProvider from 'ra-data-hasura';
+
+import { PostList, PostEdit, PostCreate, PostShow } from './posts';
+import { UserList } from './users';
+import Dashboard from './Dashboard';
+import authProvider from './authProvider';
+
+const headers = {'content-type': 'application/json', 'authorization': 'bearer <token>'};
+const App = () => (
+  <Admin
+    dataProvider={hasuraDataProvider('http://localhost:8080', headers)}
+    authProvider={authProvider}
+    dashboard={Dashboard}
+  >
+    <Resource
+      name="posts"
+      icon={PostIcon}
+      list={PostList}
+      edit={PostEdit}
+      create={PostCreate}
+      show={PostShow}
+    />
+    <Resource name="users" icon={UserIcon} list={UserList} />
+    <Resource name="comments" list={ListGuesser} />
+  </Admin>
+);
+
+export default App;
+
+```
+
+In case the server is configured with access key or auth, configure the appropriate headers and pass it to the provider.
+
+## Known Issues
+
+Filter as you type (search) functionality inside tables is not supported right now. It is a work in progress.
+
+## Contributing
+
+To modify, extend and test this package locally,
+
+```
+$ cd ra-data-hasura
+$ npm run link
+```
+
+Now use this local package in your react app for testing
+```
+$ cd my-react-app
+$ npm link ra-data-hasura
+```
+
+Build the library by running `npm run build` and it will generate the transpiled version of the library under `lib` folder.
+
+

community/tools/ra-data-hasura/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "ra-data-hasura",
+  "version": "0.0.1",
+  "description": "react-admin data provider for Hasura GraphQL Engine",
+  "main": "lib/ra-data-hasura.min.js",
+  "scripts": {
+    "build": "webpack --env dev && webpack --env build",
+    "dev": "webpack --progress --colors --watch --env dev",
+    "repl": "node -i -e \"$(< ./lib/ra-data-hasura.js)\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hasura/graphql-engine.git"
+  },
+  "keywords": [
+    "react-admin",
+    "library",
+    "admin",
+    "hasura",
+    "postgres"
+  ],
+  "author": "Praveen Durairaj <praveen@hasura.io>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hasura/graphql-engine/issues"
+  },
+  "homepage": "https://github.com/hasura/graphql-engine",
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.51",
+    "@babel/core": "^7.0.0-beta.51",
+    "@babel/preset-env": "^7.0.0-beta.51",
+    "babel-eslint": "^8.0.3",
+    "babel-loader": "^8.0.0-beta.4",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-istanbul": "^5.1.0",
+    "babel-preset-env": "^7.0.0-beta.3",
+    "babel-register": "^7.0.0-beta.3",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.0.1",
+    "eslint-loader": "^2.0.0",
+    "jsdom": "11.11.0",
+    "jsdom-global": "3.0.2",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "webpack": "^4.12.2",
+    "webpack-cli": "^3.0.8",
+    "yargs": "^10.0.3",
+    "nyc": "^13.1.0"
+  },
+  "nyc": {
+    "sourceMap": false,
+    "instrument": false
+  }
+}

community/tools/ra-data-hasura/src/index.js

@@ -0,0 +1,195 @@
+import {
+  bulkQuery,
+  selectQuery,
+  countQuery,
+  insertQuery,
+  updateQuery,
+  deleteQuery
+} from './queries';
+
+const cloneQuery = (query) => {
+  return JSON.parse(JSON.stringify(query));
+};
+
+export default (serverEndpoint, headers) => {
+  const convertDataRequestToHTTP = (type, resource, params) => {
+    const options = {};
+    let finalQuery = {};
+
+    switch (type) {
+      case 'GET_LIST':
+        // select multiple
+        const finalSelectQuery = cloneQuery(selectQuery);
+        const finalCountQuery = cloneQuery(countQuery);
+
+        finalSelectQuery.args.table = resource;
+        finalSelectQuery.args.limit = params.pagination.perPage;
+        finalSelectQuery.args.offset = (params.pagination.page * params.pagination.perPage) - params.pagination.perPage;
+        finalSelectQuery.args.where = params.filter;
+        finalSelectQuery.args.order_by = {column: params.sort.field, type: params.sort.order.toLowerCase()};
+        finalCountQuery.args.table = resource;
+        finalQuery = cloneQuery(bulkQuery);
+        finalQuery.args.push(finalSelectQuery);
+        finalQuery.args.push(finalCountQuery);
+        break;
+      case 'GET_ONE':
+        // select one
+        finalQuery = cloneQuery(selectQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args.where = { id: { '$eq': params.id } };
+        break;
+      case 'CREATE':
+        // create one
+        const createFields = Object.keys(params.data);
+
+        finalQuery = cloneQuery(insertQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args.objects.push(params.data);
+        // id is mandatory
+        createFields.push('id');
+        finalQuery.args.returning = createFields;
+        break;
+      case 'UPDATE':
+        // update one
+        const updateFields = Object.keys(params.data);
+
+        finalQuery = cloneQuery(updateQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args['$set'] = params.data;
+        finalQuery.args.where = { id: { '$eq': params.id }};
+        // id is mandatory
+        updateFields.push('id');
+        finalQuery.args.returning = updateFields;
+        break;
+      case 'UPDATE_MANY':
+        // update multiple ids with given data
+        const updateManyFields = Object.keys(params.data);
+
+        finalQuery = cloneQuery(updateQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args['$set'] = params.data;
+        finalQuery.args.where = { 'id': { '$in': params.ids } };
+        // id is mandatory
+        updateManyFields.push('id');
+        finalQuery.args.returning = updateManyFields;
+        break;
+      case 'DELETE':
+        // delete one
+        const deleteFields = Object.keys(params.previousData);
+
+        finalQuery = cloneQuery(deleteQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args.where = { id: { '$eq': params.id }};
+        // id is mandatory
+        deleteFields.push('id');
+        finalQuery.args.returning = deleteFields;
+        break;
+      case 'DELETE_MANY':
+        // delete multiple
+        finalQuery = cloneQuery(deleteQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args.where = { 'id': { '$in': params.ids } };
+        // id is mandatory
+        finalQuery.args.returning = ['id'];
+        break;
+      case 'GET_MANY':
+        // select multiple within where clause
+        finalQuery = cloneQuery(selectQuery);
+        finalQuery.args.table = resource;
+        finalQuery.args.where = { 'id': { '$in': params.ids } };
+        break;
+      case 'GET_MANY_REFERENCE':
+        // select multiple with relations
+        const finalManyQuery = cloneQuery(selectQuery);
+        const finalManyCountQuery = cloneQuery(countQuery);
+
+        finalSelectQuery.args.table = resource;
+        finalSelectQuery.args.limit = params.pagination.perPage;
+        finalSelectQuery.args.offset = (params.pagination.page * params.pagination.perPage) - params.pagination.perPage;
+        finalSelectQuery.args.where = { [params.target]: params.id };
+        finalSelectQuery.args.order_by = {column: params.sort.field, type: params.sort.order.toLowerCase()};
+        finalCountQuery.args.table = resource;
+        finalQuery = cloneQuery(bulkQuery);
+        finalQuery.args.push(finalManyQuery);
+        finalQuery.args.push(finalManyCountQuery);
+        break;
+      default:
+        throw new Error(`Unsupported type ${type}`);
+    };
+    options.body = JSON.stringify(finalQuery);
+    return { options };
+  };
+
+  const convertHTTPResponse = (response, type, resource, params) => {
+    // handle errors and throw with the message
+    if ('error' in response || 'code' in response) {
+      throw new Error(JSON.stringify(response));
+    }
+    switch (type) {
+      case 'GET_LIST':
+        return {
+          data: response[0],
+          total: response[1]['count']
+        };
+      case 'GET_ONE':
+        return {
+          data: response[0]
+        };
+      case 'CREATE':
+        return {
+          data: response.returning[0]
+        };
+      case 'UPDATE':
+        return {
+          data: response.returning[0]
+        };
+      case 'UPDATE_MANY':
+        const updatedIds = response.returning.map((item) => {
+          return item.id;
+        });
+
+        return {
+          data: updatedIds
+        };
+      case 'DELETE':
+        return {
+          data: response.returning[0]
+        };
+      case 'DELETE_MANY':
+        const deletedIds = response.returning.map((item) => {
+          return item.id;
+        });
+
+        return {
+          data: deletedIds
+        };
+      case 'GET_MANY':
+        return {
+          data: response
+        };
+      case 'GET_MANY_REFERENCE':
+        return {
+          data: response[0],
+          total: response[1].count
+        };
+      default:
+        return { data: response };
+    }
+  };
+
+  return (type, resource, params) => {
+    const { options } = convertDataRequestToHTTP(
+      type,
+      resource,
+      params
+    );
+
+    options.method = 'POST';
+    options.headers = headers;
+    return fetch(serverEndpoint + '/v1/query', options).then(function (response) {
+      return response.json().then((data) => {
+        return convertHTTPResponse(data, type, resource, params);
+      });
+    });
+  };
+};

community/tools/ra-data-hasura/src/queries.js

@@ -0,0 +1,52 @@
+// define hasura json api queries
+const bulkQuery = {
+  type: 'bulk',
+  args: []
+};
+
+const selectQuery = {
+  type: 'select',
+  args: {
+    table: '',
+    columns: ['*']
+  }
+};
+
+const countQuery = {
+  type: 'count',
+  args: {
+    table: '',
+    where: { id: { '$gt': 0 }}
+  }
+};
+
+const insertQuery = {
+  type: 'insert',
+  args: {
+    table: '',
+    objects: [],
+    returning: []
+  }
+};
+
+const updateQuery = {
+  type: 'update',
+  args: {
+    table: '',
+    $set: {},
+    where: {},
+    returning: []
+  }
+};
+
+const deleteQuery = {
+  type: 'delete',
+  args: {
+    table: '',
+    where: {},
+    returning: []
+  }
+};
+
+export { bulkQuery, selectQuery, countQuery, insertQuery, updateQuery, deleteQuery };
+

community/tools/ra-data-hasura/webpack.config.js

@@ -0,0 +1,60 @@
+/* global __dirname, require, module*/
+
+const webpack = require('webpack');
+const path = require('path');
+const env = require('yargs').argv.env; // use --env with webpack 2
+const pkg = require('./package.json');
+
+let libraryName = pkg.name;
+
+let outputFile, mode;
+
+if (env === 'build') {
+  mode = 'production';
+  outputFile = libraryName + '.min.js';
+} else {
+  mode = 'development';
+  outputFile = libraryName + '.js';
+}
+
+const config = {
+  mode: mode,
+  entry: __dirname + '/src/index.js',
+  devtool: 'inline-source-map',
+  output: {
+    path: __dirname + '/lib',
+    filename: outputFile,
+    library: libraryName,
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+    globalObject: "typeof self !== 'undefined' ? self : this"
+  },
+  module: {
+    rules: [
+      {
+        test: /(\.jsx|\.js)$/,
+        loader: 'babel-loader',
+        exclude: /(node_modules|bower_components)/
+      },
+      /*
+      {
+        test: /(\.jsx|\.js)$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/
+      }
+      */
+    ]
+  },
+  resolve: {
+    modules: [path.resolve('./node_modules'), path.resolve('./src')],
+    extensions: ['.json', '.js']
+  },
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-admin': 'react-admin',
+    '@material-ui': '@material-ui'
+  }
+};
+
+module.exports = config;