@kineticdata/react 5.0.16 → 5.1.0

package/lib/components/common/TableInput.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { Fragment } from 'react';
-import { OrderedMap, Map } from 'immutable';
+import { Map } from 'immutable';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 
 var TextInput = function TextInput(props) {
   return /*#__PURE__*/React.createElement("input", {
@@ -26,6 +27,10 @@ var CheckboxInput = function CheckboxInput(props) {
   });
 };
 
+var DragHandle = function DragHandle(props) {
+  return /*#__PURE__*/React.createElement("span", props, "\u2195");
+};
+
 export var TableLayout = function TableLayout(_ref) {
   var rows = _ref.rows,
       onAdd = _ref.onAdd,
@@ -54,6 +59,7 @@ var RowLayout = function RowLayout(_ref2) {
 };
 
 var typeToComponent = {
+  drag: 'DragHandle',
   text: 'TextInput',
   checkbox: 'CheckboxInput'
 };
@@ -61,7 +67,8 @@ var defaultComponents = {
   TableLayout: TableLayout,
   RowLayout: RowLayout,
   TextInput: TextInput,
-  CheckboxInput: CheckboxInput
+  CheckboxInput: CheckboxInput,
+  DragHandle: DragHandle
 };
 
 var fieldFromConfig = function fieldFromConfig(config) {
@@ -85,45 +92,83 @@ export var TableInput = function TableInput(props) {
 
   var handleAddRow = function handleAddRow(e) {
     e.preventDefault();
-    var newRow = options.reduce(function (row, config) {
+    var newRow = options.filter(function (config) {
+      return config.get('type') !== 'drag';
+    }).reduce(function (row, config) {
       return row.set(config.get('name'), config.get('type') === 'checkbox' ? false : '');
     }, Map());
     onChange(rows.push(newRow));
   };
 
+  var onDragEnd = function onDragEnd(e) {
+    if (e.source && e.destination) {
+      onChange(rows["delete"](e.source.index).insert(e.destination.index, rows.get(e.source.index)));
+    }
+  };
+
+  var isDragDisabled = !options.some(function (option) {
+    return option.get('type') === 'drag';
+  });
   var fieldRows = props.rows.map(function (row, index) {
     var handleDeleteRow = function handleDeleteRow(e) {
       e.preventDefault();
       onChange(rows["delete"](index));
     };
 
-    var fields = options.reduce(function (fields, config) {
-      var Field = fieldFromConfig(config, appliedComponents);
-      var value = row.get(config.get('name'));
-
-      var handleChangeField = function handleChangeField(e) {
-        var value = config.get('type') === 'checkbox' ? e.target.checked : e.target.value;
-        return onChange(rows.setIn([index, config.get('name')], value));
-      };
-
-      return fields.set(config.get('name'), /*#__PURE__*/React.createElement(Field, {
-        value: value,
-        onChange: handleChangeField,
-        label: config.get('label'),
-        onBlur: onBlur,
-        onFocus: onFocus
-      }));
-    }, OrderedMap());
-    return /*#__PURE__*/React.createElement(RowLayout, {
+    return /*#__PURE__*/React.createElement(Draggable, {
+      draggableId: "draggable".concat(index),
+      index: index,
       key: index,
-      fields: fields,
-      options: options,
-      onDelete: handleDeleteRow
+      isDragDisabled: isDragDisabled
+    }, function (provided, snapshot) {
+      // For each of the options specified for the field, we render a table
+      // cell with a field in it. The field type is determined by the type
+      // of the option.
+      var fields = options.toOrderedMap().mapKeys(function (_, config) {
+        return config.get('name');
+      }).map(function (config) {
+        var Field = fieldFromConfig(config, appliedComponents);
+
+        var _config$toObject = config.toObject(),
+            label = _config$toObject.label,
+            name = _config$toObject.name,
+            type = _config$toObject.type;
+
+        var fieldOnChange = function fieldOnChange(e) {
+          return onChange(rows.setIn([index, name], type === 'checkbox' ? e.target.checked : e.target.value));
+        };
+
+        var value = row.get(name);
+        var props = type === 'drag' ? provided.dragHandleProps : {
+          label: label,
+          onBlur: onBlur,
+          onChange: fieldOnChange,
+          onFocus: onFocus,
+          value: value
+        };
+        return /*#__PURE__*/React.createElement(Field, props);
+      });
+      return /*#__PURE__*/React.createElement(RowLayout, {
+        draggableRef: provided.innerRef,
+        draggableProps: provided.draggableProps,
+        dragging: snapshot.isDragging,
+        fields: fields,
+        options: options,
+        onDelete: handleDeleteRow
+      });
     });
   });
-  return /*#__PURE__*/React.createElement(TableLayout, {
-    rows: fieldRows,
-    onAdd: handleAddRow,
-    options: options
-  });
+  return /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragEnd: onDragEnd
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "droppable"
+  }, function (provided) {
+    return /*#__PURE__*/React.createElement(TableLayout, {
+      droppableRef: provided.innerRef,
+      rows: fieldRows,
+      onAdd: handleAddRow,
+      options: options,
+      placeholder: provided.placeholder
+    });
+  }));
 };

package/lib/components/common/TeamSelect.js

@@ -19,7 +19,8 @@ var searchTeams = function searchTeams(_ref) {
         return "".concat(field, " =* \"").concat(value, "\"");
       }).join(' OR '),
       limit: search.get('limit') || 25,
-      include: search.get('include') || ''
+      include: search.get('include') || '',
+      "public": !!search.get('public')
     }).then(function (_ref2) {
       var teams = _ref2.teams,
           error = _ref2.error,

package/lib/components/common/Typeahead.js

@@ -135,11 +135,14 @@ export var Typeahead = /*#__PURE__*/function (_React$Component) {
       // Prevent form submission if enter key is used to select suggestion.
       if (method === 'enter') {
         event.preventDefault();
-      }
+      } // Update state if single search or query is multiple and should be cleared
+
 
-      _this.setState(_this.props.multiple ? {
-        searchValue: ''
-      } : initialState);
+      if (!_this.props.multiple || !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+        _this.setState(_this.props.multiple ? {
+          searchValue: ''
+        } : initialState);
+      }
 
       _this.props.onChange(_this.props.multiple ? _this.props.value.push(suggestion) : suggestion);
     };

package/lib/components/common/UserSelect.js

@@ -26,7 +26,8 @@ var searchUsers = function searchUsers(_ref) {
         return "".concat(field, " =* \"").concat(value, "\"");
       }).join(' OR '),
       limit: search.get('limit') || 25,
-      include: search.get('include') || ''
+      include: search.get('include') || '',
+      "public": !!search.get('public')
     }).then(function (_ref2) {
       var users = _ref2.users,
           error = _ref2.error,

package/lib/components/common/authentication/AuthenticationContainer.js

@@ -11,7 +11,7 @@ import moment from 'moment';
 import { action, regHandlers, connect, dispatch, regSaga, store } from '../../../store';
 import { login, logoutDirect, retrieveJwt, singleSignOn, fetchSpaMeta, systemLogin } from '../../../apis';
 import { socketIdentify } from '../../../apis/socket';
-import { refreshSystemToken } from '../../../apis/system';
+import { refreshSystemToken } from '../../../apis';
 var defaultLoginProps = {
   error: null,
   password: '',
@@ -52,6 +52,9 @@ regHandlers({
       system: action.payload.system
     }).set('login', defaultLoginProps);
   },
+  SET_SERVER_ERROR: function SET_SERVER_ERROR(state, action) {
+    return state.set('serverError', action.payload);
+  },
   SET_ERROR: function SET_ERROR(state, action) {
     return state.mergeIn(['login'], {
       error: action.payload,
@@ -357,13 +360,13 @@ regSaga(takeEvery('SINGLE_SIGN_ON', /*#__PURE__*/_regeneratorRuntime.mark(functi
 })));
 var SYSTEM_TOKEN = 'kd-system';
 regSaga(takeEvery('INITIALIZE', /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref3) {
-  var _ref3$payload, system, socket, token, localToken, parsedToken, isValid, _yield$call4, securityStrategies, _yield$call4$session, csrfToken, isAuthenticated, spaceSlug, _token;
+  var _ref3$payload, system, socket, skipInit, token, localToken, parsedToken, isValid, _yield$call4, securityStrategies, _yield$call4$session, csrfToken, isAuthenticated, spaceSlug, error, _token;
 
   return _regeneratorRuntime.wrap(function _callee4$(_context4) {
     while (1) {
       switch (_context4.prev = _context4.next) {
         case 0:
-          _ref3$payload = _ref3.payload, system = _ref3$payload.system, socket = _ref3$payload.socket;
+          _ref3$payload = _ref3.payload, system = _ref3$payload.system, socket = _ref3$payload.socket, skipInit = _ref3$payload.skipInit;
           _context4.prev = 1;
 
           if (!system) {
@@ -387,7 +390,7 @@ regSaga(takeEvery('INITIALIZE', /*#__PURE__*/_regeneratorRuntime.mark(function _
           }));
 
         case 7:
-          _context4.next = 30;
+          _context4.next = 34;
           break;
 
         case 9:
@@ -398,39 +401,51 @@ regSaga(takeEvery('INITIALIZE', /*#__PURE__*/_regeneratorRuntime.mark(function _
           _yield$call4 = _context4.sent;
           securityStrategies = _yield$call4.securityStrategies;
           _yield$call4$session = _yield$call4.session;
-          csrfToken = _yield$call4$session.csrfToken;
-          isAuthenticated = _yield$call4$session.isAuthenticated;
-          spaceSlug = _yield$call4.spaceSlug;
+          _yield$call4$session = _yield$call4$session === void 0 ? {} : _yield$call4$session;
+          csrfToken = _yield$call4$session.csrfToken, isAuthenticated = _yield$call4$session.isAuthenticated, spaceSlug = _yield$call4.spaceSlug, error = _yield$call4.error;
+
+          if (!error) {
+            _context4.next = 21;
+            break;
+          }
+
+          _context4.next = 19;
+          return put(action('SET_SERVER_ERROR', error));
+
+        case 19:
+          _context4.next = 34;
+          break;
 
-          if (!isAuthenticated) {
-            _context4.next = 23;
+        case 21:
+          if (!(isAuthenticated && !skipInit)) {
+            _context4.next = 27;
             break;
           }
 
-          _context4.next = 20;
+          _context4.next = 24;
           return call(retrieveJwt);
 
-        case 20:
+        case 24:
           _context4.t0 = _context4.sent;
-          _context4.next = 24;
+          _context4.next = 28;
           break;
 
-        case 23:
+        case 27:
           _context4.t0 = null;
 
-        case 24:
+        case 28:
           _token = _context4.t0;
 
           if (!(socket && _token)) {
-            _context4.next = 28;
+            _context4.next = 32;
             break;
           }
 
-          _context4.next = 28;
+          _context4.next = 32;
           return call(socketIdentify, _token);
 
-        case 28:
-          _context4.next = 30;
+        case 32:
+          _context4.next = 34;
           return put(action('SET_INITIALIZED', {
             csrfToken: csrfToken,
             securityStrategies: securityStrategies,
@@ -439,21 +454,21 @@ regSaga(takeEvery('INITIALIZE', /*#__PURE__*/_regeneratorRuntime.mark(function _
             token: _token
           }));
 
-        case 30:
-          _context4.next = 35;
+        case 34:
+          _context4.next = 39;
           break;
 
-        case 32:
-          _context4.prev = 32;
+        case 36:
+          _context4.prev = 36;
           _context4.t1 = _context4["catch"](1);
           console.error(_context4.t1);
 
-        case 35:
+        case 39:
         case "end":
           return _context4.stop();
       }
     }
-  }, _callee4, null, [[1, 32]]);
+  }, _callee4, null, [[1, 36]]);
 })));
 regSaga(takeEvery('LOGOUT_START', /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(_ref4) {
   var payload, system, loggedIn;
@@ -580,6 +595,10 @@ var getToken = function getToken() {
   return store.getState().getIn(['session', 'token']);
 };
 
+var getCsrfToken = function getCsrfToken() {
+  return store.getState().getIn(['session', 'csrfToken']);
+};
+
 export var AuthenticationComponent = /*#__PURE__*/function (_Component) {
   _inherits(AuthenticationComponent, _Component);
 
@@ -601,7 +620,8 @@ export var AuthenticationComponent = /*#__PURE__*/function (_Component) {
         });
       } else {
         dispatch('INITIALIZE', {
-          socket: !this.props.noSocket
+          socket: !this.props.noSocket,
+          skipInit: this.props.skipInit
         });
       }
     }
@@ -613,9 +633,11 @@ export var AuthenticationComponent = /*#__PURE__*/function (_Component) {
           loggedIn = _this$props.loggedIn,
           login = _this$props.login,
           securityStrategies = _this$props.securityStrategies,
+          serverError = _this$props.serverError,
           spaceSlug = _this$props.spaceSlug,
           token = _this$props.token;
       return this.props.children({
+        serverError: serverError,
         initialized: initialized,
         timedOut: loggedIn && !token,
         loggedIn: loggedIn,
@@ -644,9 +666,10 @@ var mapStateToProps = function mapStateToProps(state) {
     token: state.getIn(['session', 'token'], null),
     login: state.get('login', defaultLoginProps),
     spaceSlug: state.getIn(['session', 'spaceSlug'], ''),
-    securityStrategies: state.getIn(['session', 'securityStrategies'], [])
+    securityStrategies: state.getIn(['session', 'securityStrategies'], []),
+    serverError: state.get('serverError')
   };
 };
 
 var AuthenticationContainer = connect(mapStateToProps)(AuthenticationComponent);
-export { AuthenticationContainer, getToken, logout, timedOut };
+export { AuthenticationContainer, getCsrfToken, getToken, logout, timedOut };

package/lib/components/common/code_input/languageHelpers.test.js

@@ -36,7 +36,7 @@ describe('processJavaScriptTemplate', function () {
   });
   test('add some objects inside to test curly behavior', function () {
     // eslint-disable-next-line no-template-curly-in-string
-    expect(processJavaScriptTemplate('Hello ${{foo:{"bar":2}}}')).toEqual([['Hello '], ['${', 'opening-interpolation', 'js-template'], ['{', 'punctuation', 'js-template'], ['foo', 'js-template'], [':', 'punctuation', 'js-template'], ['{', 'punctuation', 'js-template'], ['"bar"', 'string', 'js-template'], [':', 'punctuation', 'js-template'], ['2', 'number', 'js-template'], ['}', 'punctuation', 'js-template'], ['}', 'punctuation', 'js-template'], ['}', 'closing-interpolation', 'js-template'], ['']]);
+    expect(processJavaScriptTemplate('Hello ${{foo:{"bar":2}}}')).toEqual([['Hello '], ['${', 'opening-interpolation', 'js-template'], ['{', 'punctuation', 'js-template'], ['foo', 'js-template'], [':', 'operator', 'js-template'], ['{', 'punctuation', 'js-template'], ['"bar"', 'string', 'js-template'], [':', 'operator', 'js-template'], ['2', 'number', 'js-template'], ['}', 'punctuation', 'js-template'], ['}', 'punctuation', 'js-template'], ['}', 'closing-interpolation', 'js-template'], ['']]);
   });
   test('multiple interpolations', function () {
     // eslint-disable-next-line no-template-curly-in-string

package/lib/components/core/attribute_definition/AttributeDefinitionForm.js

@@ -92,7 +92,7 @@ AttributeDefinitionForm.defaultProps = {
 };
 AttributeDefinitionForm.propTypes = {
   /** The type of attribute definition.   */
-  attributeType: t.oneOf(['spaceAttributeDefinitions', 'teamAttributeDefinitions', 'userAttributeDefinitions', 'userProfileAttributeDefinitions', 'categoryAttributeDefinitions', 'kappAttributeDefinitions', 'formAttributeDefinitions', 'datastoreFormAttributeDefinitions']).isRequired,
+  attributeType: t.oneOf(['spaceAttributeDefinitions', 'teamAttributeDefinitions', 'userAttributeDefinitions', 'userProfileAttributeDefinitions', 'categoryAttributeDefinitions', 'kappAttributeDefinitions', 'formAttributeDefinitions']).isRequired,
 
   /** The name of the attribute (assumes new if not null). */
   attributeName: t.string,

package/lib/components/core/attribute_definition/AttributeDefinitionTable.js

@@ -60,7 +60,7 @@ AttributeDefinitionTable.propTypes = {
   kappSlug: t.string,
 
   /** The type of attribute definition to display.   */
-  attributeType: t.oneOf(['space', 'team', 'user', 'userProfile', 'category', 'kapp', 'form', 'datastoreForm']).isRequired,
+  attributeType: t.oneOf(['space', 'team', 'user', 'userProfile', 'category', 'kapp', 'form']).isRequired,
 
   /** The columns that should be displayed.   */
   columnSet: t.arrayOf(t.string)

package/lib/components/core/core_form/CoreForm.js

@@ -286,16 +286,16 @@ export var CoreFormComponent = /*#__PURE__*/function (_Component) {
         }));
       } // If pending and error state has just been set, call error callback
       else if (this.state.pending && this.state.error && !prevState.error) {
-          if (this.state.error.statusCode === 401) {
-            applyGuard(this.props.onUnauthorized || this.props.unauthorized);
-          } else if (this.state.error.statusCode === 403) {
-            applyGuard(this.props.onForbidden || this.props.forbidden);
-          } else if (this.state.error.statusCode === 404) {
-            applyGuard(this.props.onNotFound || this.props.onNotFound);
-          } else {
-            applyGuard(this.props.onError || this.props.error);
-          }
-        } // If locking is turned on and has been initalized
+        if (this.state.error.statusCode === 401) {
+          applyGuard(this.props.onUnauthorized || this.props.unauthorized);
+        } else if (this.state.error.statusCode === 403) {
+          applyGuard(this.props.onForbidden || this.props.forbidden);
+        } else if (this.state.error.statusCode === 404) {
+          applyGuard(this.props.onNotFound || this.props.onNotFound);
+        } else {
+          applyGuard(this.props.onError || this.props.error);
+        }
+      } // If locking is turned on and has been initalized
 
 
       if (this.state.lock && this.state.lock.init) {

package/lib/components/core/field_definition/FieldDefinitionForm.js

@@ -0,0 +1,130 @@
+import { generateForm } from '../../form/Form';
+import { fetchKapp, fetchSpace, updateKapp, updateSpace } from '../../../apis';
+import { FIELD_DATA_TYPES } from './FieldDefinitionTable';
+
+var dataSources = function dataSources(_ref) {
+  var kappSlug = _ref.kappSlug,
+      name = _ref.name;
+  return {
+    form: {
+      fn: kappSlug ? fetchKapp : fetchSpace,
+      params: [{
+        kappSlug: kappSlug,
+        include: 'fields'
+      }],
+      transform: function transform(result) {
+        return kappSlug ? result.kapp : result.space;
+      }
+    },
+    fieldDefinition: {
+      fn: function fn(form, name) {
+        return form.get('fields').find(function (f) {
+          return f.get('name') === name;
+        });
+      },
+      params: function params(_ref2) {
+        var form = _ref2.form;
+        return form && name && [form, name];
+      }
+    }
+  };
+};
+
+var handleSubmit = function handleSubmit(_ref3) {
+  var kappSlug = _ref3.kappSlug,
+      name = _ref3.name;
+  return function (values, _ref4) {
+    var form = _ref4.form;
+    var dataType = FIELD_DATA_TYPES.find(function (fdt) {
+      return fdt.value === values.get('renderType');
+    }).dataType;
+    var field = values.set('dataType', dataType);
+    var fields = name ? form.get('fields').map(function (fd) {
+      return fd.get('name') === name ? field : fd;
+    }) : form.get('fields').push(field);
+    return (kappSlug ? updateKapp({
+      kapp: {
+        fields: fields
+      },
+      kappSlug: kappSlug
+    }) : updateSpace({
+      space: {
+        fields: fields
+      }
+    })).then(function (_ref5) {
+      var kapp = _ref5.kapp,
+          space = _ref5.space,
+          error = _ref5.error;
+
+      if (error) {
+        throw error.statusCode === 400 && error.message || 'There was an error saving the field definition';
+      }
+
+      return kappSlug ? kapp : space;
+    });
+  };
+};
+
+var fields = function fields(_ref6) {
+  var name = _ref6.name;
+  return function (_ref7) {
+    var form = _ref7.form,
+        fieldDefinition = _ref7.fieldDefinition;
+    return (!name || fieldDefinition) && form && [{
+      name: 'name',
+      label: 'Name',
+      type: 'text',
+      required: true,
+      initialValue: fieldDefinition ? fieldDefinition.get('name') : ''
+    }, {
+      name: 'renderType',
+      label: 'Type',
+      type: 'select',
+      required: true,
+      options: FIELD_DATA_TYPES,
+      initialValue: fieldDefinition ? fieldDefinition.get('renderType') : ''
+    }, {
+      name: 'createdAt',
+      label: 'Created At',
+      type: 'text',
+      visible: false,
+      initialValue: fieldDefinition ? fieldDefinition.get('createdAt') : '2020-08-24T22:06:20.572Z'
+    }, {
+      name: 'createdBy',
+      label: 'Created By',
+      type: 'text',
+      visible: false,
+      initialValue: fieldDefinition ? fieldDefinition.get('createdBy') : 'admin'
+    }, {
+      name: 'updatedAt',
+      label: 'Updated At',
+      type: 'text',
+      visible: false,
+      initialValue: fieldDefinition ? fieldDefinition.get('updatedAt') : '2020-08-24T22:06:20.572Z'
+    }, {
+      name: 'updatedBy',
+      label: 'Updated By',
+      type: 'text',
+      visible: false,
+      initialValue: fieldDefinition ? fieldDefinition.get('updatedBy') : 'admin'
+    }];
+  };
+};
+/**
+ * @component
+ * A form for creating and updating Field Definitions within the Kinetic Platform
+ */
+
+
+export var FieldDefinitionForm = generateForm({
+  formOptions: ['kappSlug', 'name'],
+  dataSources: dataSources,
+  fields: fields,
+  handleSubmit: handleSubmit
+});
+FieldDefinitionForm.displayName = 'FieldDefinitionForm'; // Specifies the default values for props:
+
+FieldDefinitionForm.defaultProps = {
+  fieldName: null,
+  kappSlug: null
+};

package/lib/components/core/field_definition/FieldDefinitionTable.js

@@ -0,0 +1,86 @@
+import { generateTable } from '../../table/Table';
+import { fetchKapp, fetchSpace } from '../../../apis';
+import { defineFilter } from '../../../helpers';
+export var FIELD_DATA_TYPES = [{
+  value: 'checkbox',
+  label: 'Checkbox',
+  dataType: 'json'
+}, {
+  value: 'date',
+  label: 'Date',
+  dataType: 'string'
+}, {
+  value: 'datetime',
+  label: 'Date/Time',
+  dataType: 'string'
+}, {
+  value: 'dropdown',
+  label: 'Dropdown',
+  dataType: 'string'
+}, {
+  value: 'radio',
+  label: 'Radio',
+  dataType: 'string'
+}, {
+  value: 'text',
+  label: 'Text',
+  dataType: 'string'
+}, {
+  value: 'time',
+  label: 'Time',
+  dataType: 'string'
+}];
+var clientSide = defineFilter(true).startsWith('name', 'name').end();
+
+var dataSource = function dataSource(_ref) {
+  var kappSlug = _ref.kappSlug;
+  return {
+    fn: kappSlug ? fetchKapp : fetchSpace,
+    clientSide: clientSide,
+    params: function params() {
+      return [{
+        kappSlug: kappSlug,
+        include: 'fields'
+      }];
+    },
+    transform: function transform(result) {
+      return {
+        data: kappSlug ? result.kapp.fields : result.space.fields
+      };
+    }
+  };
+};
+
+var filters = function filters() {
+  return function () {
+    return [{
+      name: 'name',
+      label: 'Name',
+      type: 'text'
+    }];
+  };
+};
+
+var columns = [{
+  value: 'name',
+  title: 'Name'
+}, {
+  value: 'renderType',
+  title: 'Render Type'
+}, {
+  value: 'dataType',
+  title: 'Data Type'
+}, {
+  value: 'updatedAt',
+  title: 'Updated At'
+}, {
+  value: 'updatedBy',
+  title: 'Updated By'
+}];
+export var FieldDefinitionTable = generateTable({
+  tableOptions: ['kappSlug'],
+  columns: columns,
+  filters: filters,
+  dataSource: dataSource
+});
+FieldDefinitionTable.displayName = 'FieldDefinitionTable';