@kineticdata/react 6.0.5 → 6.1.1

package/lib/components/system/spaces/SystemTenantMigrateForm.js

@@ -0,0 +1,449 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SystemTenantMigrateForm = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _immutable = require("immutable");
+var _Form = require("../../form/Form");
+var _apis = require("../../../apis");
+var _helpers = require("../helpers");
+var _Form2 = require("../../form/Form.helpers");
+var TENANT_INCLUDES = 'details';
+var dataSources = function dataSources(_ref) {
+  var slug = _ref.slug;
+  return {
+    space: {
+      fn: _apis.fetchSpace,
+      params: slug && [{
+        slug: slug,
+        include: 'details,allowedIps'
+      }],
+      transform: function transform(result) {
+        return result.space;
+      }
+    },
+    tenant: {
+      fn: _apis.fetchTenant,
+      params: slug && [{
+        slug: slug,
+        include: TENANT_INCLUDES
+      }],
+      transform: function transform(result) {
+        return result.tenant;
+      }
+    },
+    defaultSQLDatabaseAdapter: {
+      fn: _apis.fetchSystemDefaultSQLDbAdapter,
+      params: [],
+      transform: function transform(result) {
+        return result.adapter;
+      }
+    },
+    fileFields: {
+      fn: function fn() {
+        return {
+          mssql: ['sslrootcert', 'sslcert'],
+          oracle: ['serverCert', 'clientCert'],
+          postgres: ['sslrootcert', 'sslcert', 'sslkey']
+        };
+      },
+      params: []
+    }
+  };
+};
+var handleSubmit = function handleSubmit(_ref2) {
+  var slug = _ref2.slug,
+    component = _ref2.component;
+  return function (values, _ref3) {
+    var fileFields = _ref3.fileFields,
+      rawValues = _ref3.values,
+      originalTenant = _ref3.tenant;
+    var taskEnabled = !!values.get('task_feature');
+    var integratorEnabled = !!values.get('integrator_feature');
+    var task = {},
+      integrator = {};
+    if (taskEnabled && (!component || component === 'task')) {
+      var type = values.get('task_databaseAdapter_type');
+      var fileFieldsForType = fileFields.get(type);
+      // Only include values for file fields if the toggle field is true
+      var filterFn = function filterFn(value, key) {
+        return !fileFieldsForType.includes(key) || !!rawValues.get("task_".concat(type, "_change_").concat(key));
+      };
+      // Get adapter properties to save
+      var properties = (0, _helpers.adapterProperties)(values, 'task', type, filterFn);
+      // If creating new, pass in file values from default adapter if not uploaded
+      if (!slug || originalTenant.getIn(['features', 'task']) === 'false') {
+        properties = fileFieldsForType.reduce(function (props, field) {
+          if (typeof props[field] === 'undefined' && !!rawValues.getIn(["task_".concat(type, "_current_").concat(field), 'pem'])) {
+            return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, props), {}, (0, _defineProperty2["default"])({}, field, new File([rawValues.getIn(["task_".concat(type, "_current_").concat(field), 'pem'])], "".concat(field, ".crt"), {
+              type: 'text/plain'
+            })));
+          }
+          return props;
+        }, properties);
+      }
+      var authenticationSecret = values.get('task_authenticationSecret') ? {
+        authenticationSecret: values.get('task_authenticationSecret')
+      } : {};
+      task = {
+        task: (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, authenticationSecret), {}, {
+          deployment: {
+            image: values.get('task_image'),
+            replicas: parseInt(values.get('task_replicas'))
+          },
+          configuratorUser: {
+            username: values.get('configuratorUsername'),
+            password: values.get('configuratorPassword')
+          },
+          databaseAdapter: {
+            type: type,
+            properties: properties
+          },
+          autoCreateDatabase: (!!values.get('task_autoCreateDatabase')).toString()
+        })
+      };
+    }
+    if (integratorEnabled && (!component || component === 'integrator')) {
+      var _type = values.get('integrator_databaseAdapter_type');
+      var _fileFieldsForType = fileFields.get(_type);
+      // Only include values for file fields if the toggle field is true
+      var _filterFn = function _filterFn(value, key) {
+        return !_fileFieldsForType.includes(key) || !!rawValues.get("integrator_".concat(_type, "_change_").concat(key));
+      };
+      // Get adapter properties to save
+      var _properties = (0, _helpers.adapterProperties)(values, 'integrator', _type, _filterFn);
+      // If creating new, pass in file values from default adapter if not uploaded
+      if (!slug || originalTenant.getIn(['features', 'integrator']) === 'false') {
+        _properties = _fileFieldsForType.reduce(function (props, field) {
+          if (typeof props[field] === 'undefined' && !!rawValues.getIn(["integrator_".concat(_type, "_current_").concat(field), 'pem'])) {
+            return (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, props), {}, (0, _defineProperty2["default"])({}, field, new File([rawValues.getIn(["integrator_".concat(_type, "_current_").concat(field), 'pem'])], "".concat(field, ".crt"), {
+              type: 'text/plain'
+            })));
+          }
+          return props;
+        }, _properties);
+      }
+      integrator = {
+        integrator: {
+          deployment: {
+            image: values.get('integrator_image'),
+            replicas: parseInt(values.get('integrator_replicas'))
+          },
+          secretKeyBase: values.get('secretKeyBase'),
+          vaultKey: values.get('vaultKey'),
+          databaseAdapter: {
+            type: _type,
+            properties: _properties
+          },
+          autoCreateDatabase: (!!values.get('integrator_autoCreateDatabase')).toString()
+        }
+      };
+    }
+    var tenant = (0, _objectSpread4["default"])((0, _objectSpread4["default"])((0, _objectSpread4["default"])({
+      space: {
+        slug: values.get('slug'),
+        name: values.get('name')
+      },
+      features: {
+        task: taskEnabled.toString(),
+        integrator: integratorEnabled.toString()
+      },
+      integrationUser: {
+        username: values.get('integrationUsername'),
+        password: values.get('integrationPassword')
+      },
+      encryptionKey: values.get('encryptionKey'),
+      coreServiceName: values.get('coreServiceName'),
+      oasConsoleServiceName: 'oas-console',
+      spaceConsoleServiceName: 'space-console',
+      loghubServiceName: 'loghub'
+    }, task), integrator), {}, {
+      users: values.get('users')
+    });
+    var multipart = taskEnabled && (!component || component === 'task') && Object.entries(tenant.task.databaseAdapter.properties).some(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
+        name = _ref5[0],
+        value = _ref5[1];
+      return value instanceof File;
+    }) || integratorEnabled && (!component || component === 'integrator') && Object.entries(tenant.integrator.databaseAdapter.properties).some(function (_ref6) {
+      var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
+        name = _ref7[0],
+        value = _ref7[1];
+      return value instanceof File;
+    });
+    return (0, _apis.migrateTenant)({
+      slug: slug,
+      tenant: tenant,
+      multipart: multipart
+    }).then((0, _Form2.handleFormErrors)('space', 'There was an error migrating the Space.'));
+  };
+};
+var getSpaceValue = function getSpaceValue(tenant, key) {
+  return tenant ? (0, _immutable.getIn)(tenant, ['space', key], '') : '';
+};
+var fields = function fields(_ref8) {
+  var slug = _ref8.slug,
+    component = _ref8.component;
+  return function (_ref9) {
+    var tenant = _ref9.tenant,
+      defaultSQLDatabaseAdapter = _ref9.defaultSQLDatabaseAdapter;
+    return (tenant || !slug) && (defaultSQLDatabaseAdapter || defaultSQLDatabaseAdapter === null) && [
+    // Start - Migrate Space Fields
+    {
+      name: 'name',
+      label: 'Name',
+      type: 'text',
+      required: true,
+      enabled: false,
+      initialValue: getSpaceValue(tenant, 'name')
+    }, {
+      name: 'slug',
+      label: 'Slug',
+      type: 'text',
+      required: true,
+      enabled: false,
+      initialValue: getSpaceValue(tenant, 'slug')
+    }, {
+      name: 'integrationUsername',
+      label: 'Integration Username',
+      type: 'text',
+      required: true,
+      enabled: true
+    }, {
+      name: 'integrationPassword',
+      label: 'Integration Password',
+      type: 'password',
+      required: true
+    }, {
+      name: 'configuratorUsername',
+      label: 'Configurator Username',
+      type: 'text',
+      required: true,
+      enabled: true
+    }, {
+      name: 'configuratorPassword',
+      label: 'Configurator Password',
+      type: 'password',
+      required: true
+    }, {
+      name: 'encryptionKey',
+      label: 'Encryption Key',
+      type: 'password',
+      required: true
+    }, {
+      name: 'vaultKey',
+      label: 'Vault Key',
+      type: 'password',
+      required: true
+    }, {
+      name: 'coreServiceName',
+      label: 'Core Version',
+      type: 'text',
+      required: true
+    }, {
+      name: 'secretKeyBase',
+      label: 'Secret Key',
+      type: 'password',
+      required: true
+    },
+    // End - Migrate Space Fields
+
+    // Start - Feature Flags
+    {
+      name: 'task_feature',
+      label: 'Task Component',
+      type: 'checkbox',
+      initialValue: (0, _immutable.getIn)(tenant, ['features', 'task']) === 'true' || !slug,
+      onChange: function onChange(_ref10, _ref11) {
+        var values = _ref10.values;
+        var setValue = _ref11.setValue;
+        // When you toggle the feature, set or clear the adapter type value so
+        // that the downstream adapter fields can be automatically hidden
+        if (!!values.get('task_feature')) {
+          setValue('task_databaseAdapter_type', (0, _immutable.getIn)(tenant, ['task', 'databaseAdapter', 'type'], (0, _immutable.get)(defaultSQLDatabaseAdapter, 'type', '')));
+        } else {
+          setValue('task_databaseAdapter_type', '');
+        }
+      }
+    }, {
+      name: 'integrator_feature',
+      label: 'Integrator Component',
+      type: 'checkbox',
+      initialValue: (0, _immutable.getIn)(tenant, ['features', 'integrator']) === 'true' || !slug,
+      onChange: function onChange(_ref12, _ref13) {
+        var values = _ref12.values;
+        var setValue = _ref13.setValue;
+        // When you toggle the feature, set or clear the adapter type value so
+        // that the downstream adapter fields can be automatically hidden
+        if (!!values.get('task_feature')) {
+          setValue('integrator_databaseAdapter_type', (0, _immutable.getIn)(tenant, ['integrator', 'databaseAdapter', 'type'], (0, _immutable.get)(defaultSQLDatabaseAdapter, 'type', '')));
+        } else {
+          setValue('task_databaseAdapter_type', '');
+        }
+      }
+    }].concat((0, _toConsumableArray2["default"])(!component || component === 'task' ? [
+    // Start - Task fields
+    {
+      name: 'task_replicas',
+      label: 'Replica Count',
+      type: 'number',
+      initialValue: (0, _immutable.getIn)(tenant, ['task', 'deployment', 'specReplicas'], 1),
+      constraint: function constraint(_ref14) {
+        var values = _ref14.values;
+        return !values.get('task_feature') || typeof values.get('task_replicas') === 'number' && values.get('task_replicas') >= 0;
+      },
+      constraintMessage: 'Replica count must be a positive integer or zero.'
+    }, {
+      name: 'task_image',
+      label: 'Task Image',
+      type: 'text',
+      initialValue: (0, _immutable.getIn)(tenant, ['task', 'deployment', 'image'])
+    }, {
+      name: 'task_image',
+      label: 'Task Image',
+      type: 'text',
+      visible: function visible(_ref15) {
+        var values = _ref15.values;
+        return !values.get('task_imageToggle');
+      },
+      initialValue: (0, _immutable.getIn)(tenant, ['task', 'deployment', 'image']),
+      helpText: 'Optionally set the version of Kinetic Task to use for this space. Leave blank to use the default version.'
+    }, {
+      name: 'task_imageToggle',
+      label: 'Use Default Task Image',
+      type: 'checkbox',
+      "transient": true,
+      visible: !slug || (0, _immutable.getIn)(tenant, ['features', 'task']) === 'false',
+      initialValue: !(0, _immutable.getIn)(tenant, ['task', 'deployment', 'image']),
+      onChange: function onChange(_ref16, _ref17) {
+        var values = _ref16.values;
+        var setValue = _ref17.setValue;
+        if (!!values.get('task_imageToggle')) {
+          setValue('task_image', '');
+        }
+      }
+    }, {
+      name: 'task_databaseAdapter_type',
+      label: 'Database Adapter',
+      required: function required(_ref18) {
+        var values = _ref18.values;
+        return values.get('task_feature');
+      },
+      type: 'select',
+      options: _helpers.VALIDATE_DB_ADAPTERS,
+      initialValue: (0, _immutable.getIn)(tenant, ['task', 'databaseAdapter', 'type'], (0, _immutable.get)(defaultSQLDatabaseAdapter, 'type', ''))
+    }, {
+      name: 'task_autoCreateDatabase',
+      label: 'Auto-Create Database',
+      type: 'checkbox',
+      visible: function visible(_ref19) {
+        var values = _ref19.values;
+        return (0, _immutable.getIn)(tenant, ['task', 'databaseAdapter', 'type']) !== 'postgres' && values.get('task_databaseAdapter_type') === 'postgres';
+      },
+      "transient": function transient(_ref20) {
+        var values = _ref20.values;
+        return values.get('task_databaseAdapter_type') !== 'postgres';
+      },
+      initialValue: !slug || (0, _immutable.getIn)(tenant, ['features', 'task']) === 'false'
+    }, {
+      name: 'task_authenticationSecret',
+      label: 'Authentication Secret',
+      type: 'password',
+      visible: function visible(_ref21) {
+        var values = _ref21.values;
+        return values.get('task_changeAuthenticationSecret');
+      },
+      "transient": function transient(_ref22) {
+        var values = _ref22.values;
+        return !values.get('task_changeAuthenticationSecret');
+      },
+      required: false
+    }, {
+      name: 'task_changeAuthenticationSecret',
+      label: 'Change Authentication Secret',
+      type: 'checkbox',
+      "transient": true,
+      initialValue: false,
+      onChange: function onChange(_ref23, _ref24) {
+        var values = _ref23.values;
+        var setValue = _ref24.setValue;
+        if (values.get('task_authenticationSecret') !== '') {
+          setValue('task_authenticationSecret', '');
+        }
+      }
+    }].concat((0, _toConsumableArray2["default"])((0, _helpers.MSSQL_FIELDS)('task_databaseAdapter_type', tenant, ['task', 'databaseAdapter'], defaultSQLDatabaseAdapter)), (0, _toConsumableArray2["default"])((0, _helpers.ORACLE_FIELDS)('task_databaseAdapter_type', tenant, ['task', 'databaseAdapter'], defaultSQLDatabaseAdapter)), (0, _toConsumableArray2["default"])((0, _helpers.POSTGRES_FIELDS)('task_databaseAdapter_type', tenant, ['task', 'databaseAdapter'], defaultSQLDatabaseAdapter))) : []), (0, _toConsumableArray2["default"])(!component || component === 'integrator' ? [
+    // Start - Integrator fields
+    {
+      name: 'integrator_replicas',
+      label: 'Replica Count',
+      type: 'number',
+      initialValue: (0, _immutable.getIn)(tenant, ['integrator', 'deployment', 'specReplicas'], 1),
+      constraint: function constraint(_ref25) {
+        var values = _ref25.values;
+        return !values.get('integrator_feature') || typeof values.get('integrator_replicas') === 'number' && values.get('integrator_replicas') >= 0;
+      },
+      constraintMessage: 'Replica count must be a positive integer or zero.'
+    }, {
+      name: 'integrator_image',
+      label: 'Integrator Image',
+      type: 'text',
+      visible: function visible(_ref26) {
+        var values = _ref26.values;
+        return !values.get('integrator_imageToggle');
+      },
+      initialValue: (0, _immutable.getIn)(tenant, ['integrator', 'deployment', 'image']),
+      helpText: 'Optionally set the version of Kinetic Integrator to use for this space. Leave blank to use the default version.'
+    }, {
+      name: 'integrator_imageToggle',
+      label: 'Use Default Integrator Image',
+      type: 'checkbox',
+      "transient": true,
+      visible: !slug || (0, _immutable.getIn)(tenant, ['features', 'integrator']) === 'false',
+      initialValue: !(0, _immutable.getIn)(tenant, ['integrator', 'deployment', 'image']),
+      onChange: function onChange(_ref27, _ref28) {
+        var values = _ref27.values;
+        var setValue = _ref28.setValue;
+        if (!!values.get('integrator_imageToggle')) {
+          setValue('integrator_image', '');
+        }
+      }
+    }, {
+      name: 'integrator_databaseAdapter_type',
+      label: 'Database Adapter',
+      required: function required(_ref29) {
+        var values = _ref29.values;
+        return values.get('integrator_feature');
+      },
+      type: 'select',
+      options: _helpers.VALIDATE_DB_ADAPTERS.filter(function (adapter) {
+        return adapter.value === 'postgres';
+      }),
+      initialValue: (0, _immutable.getIn)(tenant, ['integrator', 'databaseAdapter', 'type'], (0, _immutable.get)(defaultSQLDatabaseAdapter, 'type', ''))
+    }, {
+      name: 'integrator_autoCreateDatabase',
+      label: 'Auto-Create Database',
+      type: 'checkbox',
+      visible: function visible(_ref30) {
+        var values = _ref30.values;
+        return (0, _immutable.getIn)(tenant, ['integrator', 'databaseAdapter', 'type']) !== 'postgres' && values.get('integrator_databaseAdapter_type') === 'postgres';
+      },
+      "transient": function transient(_ref31) {
+        var values = _ref31.values;
+        return values.get('integrator_databaseAdapter_type') !== 'postgres';
+      },
+      initialValue: !slug || (0, _immutable.getIn)(tenant, ['features', 'integrator']) === 'false'
+    }].concat((0, _toConsumableArray2["default"])((0, _helpers.POSTGRES_FIELDS)('integrator_databaseAdapter_type', tenant, ['integrator', 'databaseAdapter'], defaultSQLDatabaseAdapter))) : []));
+  };
+};
+var SystemTenantMigrateForm = exports.SystemTenantMigrateForm = (0, _Form.generateForm)({
+  formOptions: ['slug', 'component'],
+  dataSources: dataSources,
+  fields: fields,
+  handleSubmit: handleSubmit
+});

package/lib/components/system/spaces/SystemTenantTable.js

@@ -1,19 +1,23 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SystemTenantTable = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _Table = require("../../table/Table");
 var _apis = require("../../../apis");
+var _http = require("../../../apis/http");
 var _helpers = require("../../../helpers");
-var clientSide = (0, _helpers.defineFilter)(true).startsWith('slug', 'slug').startsWith('space.name', 'space.name').end();
+var filterQuery = (0, _helpers.defineKqlQuery)().matches('name', 'name').matches('slug', 'slug').end();
 var dataSource = function dataSource() {
   return {
     fn: _apis.fetchTenants,
-    clientSide: clientSide,
-    params: function params() {
-      return [];
+    params: function params(paramData) {
+      return [(0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _http.generateSortParams)(paramData)), (0, _http.generatePaginationParams)(paramData)), {}, {
+        q: filterQuery(paramData.filters.toJS())
+      })];
     },
     transform: function transform(result) {
       return {
@@ -26,20 +30,27 @@ var dataSource = function dataSource() {
 var filters = function filters() {
   return function () {
     return [{
-      name: 'slug',
-      label: 'Slug',
+      name: 'name',
+      label: 'Name',
       type: 'text'
     }, {
-      name: 'space.name',
-      label: 'Name',
+      name: 'slug',
+      label: 'Slug',
       type: 'text'
     }];
   };
 };
 var columns = [{
+  value: 'name',
+  title: 'Name',
+  sortable: true,
+  valueTransform: function valueTransform(_value, row) {
+    return row.getIn(['space', 'name']);
+  }
+}, {
   value: 'slug',
   title: 'Slug',
-  sortable: false
+  sortable: true
 }, {
   value: 'task.deployment.namespace',
   title: 'Namespace',
@@ -54,13 +65,6 @@ var columns = [{
   valueTransform: function valueTransform(_value, row) {
     return row.getIn(['task', 'deployment', 'image']);
   }
-}, {
-  value: 'space.name',
-  title: 'Name',
-  sortable: false,
-  valueTransform: function valueTransform(_value, row) {
-    return row.getIn(['space', 'name']);
-  }
 }, {
   value: 'space.status',
   title: 'Status',

package/lib/components/table/Table.js

@@ -20,6 +20,7 @@ var _store = require("../../store");
 var _Table = require("./Table.redux");
 var _helpers = require("../../helpers");
 var _Form = require("../form/Form");
+var _FormState = require("../form/FormState");
 var _excluded = ["components", "tableKey"];
 var fromColumnSet = function fromColumnSet(columns, columnSet) {
   return columnSet.map(function (cs) {
@@ -46,10 +47,19 @@ var TableComponent = function TableComponent(props) {
       count = props.count,
       extraData = props.extraData;
     var columnControl = buildColumnControl(props);
+    var filterControl = buildFilterControl(props);
     var table = buildTable((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
       columnControl: columnControl
     }));
-    var filter = components.FilterForm ? buildFilterForm(props) : buildFilterLayout(props);
+    var filter = components.FilterForm ? buildFilterForm((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
+      renderers: {
+        filterControl: function filterControl(args) {
+          return buildFilterControl((0, _objectSpread2["default"])({
+            args: args
+          }, props));
+        }
+      }
+    })) : buildFilterLayout(props);
     var pagination = buildPaginationControl(props);
     return children({
       tableKey: tableKey,
@@ -59,6 +69,7 @@ var TableComponent = function TableComponent(props) {
       appliedFilters: appliedFilters,
       pagination: pagination,
       columnControl: columnControl,
+      filterControl: filterControl,
       initializing: initializing,
       loading: loading,
       rows: rows,
@@ -143,6 +154,7 @@ var buildFilterForm = function buildFilterForm(props) {
     formKey: props.filterFormKey,
     tableKey: props.tableKey,
     components: components,
+    renderers: props.renderers,
     alterFields: props.alterFilters,
     fieldSet: props.filterSet,
     onSave: props.onSearch,
@@ -323,6 +335,41 @@ var buildColumnControl = function buildColumnControl(props) {
     extraData: extraData
   });
 };
+var buildFilterControl = function buildFilterControl(_ref4) {
+  var tableKey = _ref4.tableKey,
+    filterSet = _ref4.filterSet,
+    appliedFilters = _ref4.appliedFilters,
+    components = _ref4.components,
+    _ref4$args = _ref4.args,
+    args = _ref4$args === void 0 ? {} : _ref4$args;
+  var FilterControl = components.FilterControl;
+  return /*#__PURE__*/_react["default"].createElement(_FormState.FormState, {
+    formKey: (0, _Table.filterFormKey)(tableKey),
+    selector: function selector(formState) {
+      var _formState$fields, _formState$fields$map;
+      return {
+        filterFields: formState === null || formState === void 0 ? void 0 : (_formState$fields = formState.fields) === null || _formState$fields === void 0 ? void 0 : (_formState$fields$map = _formState$fields.map(function (field, name) {
+          return (0, _immutable.Map)({
+            name: name,
+            label: field.get('label'),
+            value: field.get('value'),
+            options: field.get('options'),
+            checked: filterSet === null || filterSet === void 0 ? void 0 : filterSet.includes(name),
+            toggle: onToggleFilter(tableKey, name)
+          });
+        })) === null || _formState$fields$map === void 0 ? void 0 : _formState$fields$map.toList()
+      };
+    }
+  }, function (_ref5) {
+    var _appliedFilters$filte;
+    var filterFields = _ref5.filterFields;
+    return /*#__PURE__*/_react["default"].createElement(FilterControl, Object.assign({}, args, {
+      tableKey: tableKey,
+      filterFields: filterFields,
+      filterCount: appliedFilters === null || appliedFilters === void 0 ? void 0 : (_appliedFilters$filte = appliedFilters.filter(Boolean)) === null || _appliedFilters$filte === void 0 ? void 0 : _appliedFilters$filte.size
+    }));
+  });
+};
 var buildTable = exports.buildTable = function buildTable(props) {
   var TableLayout = props.components.TableLayout;
   var header = buildTableHeader(props);
@@ -557,6 +604,17 @@ var onToggleColumn = function onToggleColumn(tableKey, column) {
     });
   };
 };
+var onToggleFilter = function onToggleFilter(tableKey) {
+  for (var _len = arguments.length, filters = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    filters[_key - 1] = arguments[_key];
+  }
+  return function () {
+    return (0, _store.dispatch)('TOGGLE_FILTER', {
+      tableKey: tableKey,
+      filters: filters
+    });
+  };
+};
 var mapStateToProps = function mapStateToProps() {
   return function (state, props) {
     return state.getIn(['tables', props.tableKey], (0, _immutable.Map)()).toObject();
@@ -635,18 +693,18 @@ var extractColumnComponents = exports.extractColumnComponents = function extract
     return result.set(current.get('value'), current.get('components'));
   }, (0, _immutable.Map)());
 };
-var generateTable = exports.generateTable = function generateTable(_ref4) {
-  var _ref4$tableOptions = _ref4.tableOptions,
-    tableOptions = _ref4$tableOptions === void 0 ? [] : _ref4$tableOptions,
-    _ref4$filterDataSourc = _ref4.filterDataSources,
-    filterDataSources = _ref4$filterDataSourc === void 0 ? function () {
+var generateTable = exports.generateTable = function generateTable(_ref6) {
+  var _ref6$tableOptions = _ref6.tableOptions,
+    tableOptions = _ref6$tableOptions === void 0 ? [] : _ref6$tableOptions,
+    _ref6$filterDataSourc = _ref6.filterDataSources,
+    filterDataSources = _ref6$filterDataSourc === void 0 ? function () {
       return {};
-    } : _ref4$filterDataSourc,
-    filters = _ref4.filters,
-    columns = _ref4.columns,
-    dataSource = _ref4.dataSource,
-    sortable = _ref4.sortable,
-    onValidateFilters = _ref4.onValidateFilters;
+    } : _ref6$filterDataSourc,
+    filters = _ref6.filters,
+    columns = _ref6.columns,
+    dataSource = _ref6.dataSource,
+    sortable = _ref6.sortable,
+    onValidateFilters = _ref6.onValidateFilters;
   return function (props) {
     var tableOptionProps = tableOptions ? tableOptions.reduce(function (to, opt) {
       to[opt] = props[opt];
@@ -658,8 +716,8 @@ var generateTable = exports.generateTable = function generateTable(_ref4) {
         dataSources: filterDataSources,
         fields: filters,
         formOptions: ['tableKey'].concat((0, _toConsumableArray2["default"])(tableOptions)),
-        handleSubmit: function handleSubmit(_ref5) {
-          var tableKey = _ref5.tableKey;
+        handleSubmit: function handleSubmit(_ref7) {
+          var tableKey = _ref7.tableKey;
           return function (values) {
             (0, _store.dispatch)('APPLY_FILTER_FORM', {
               tableKey: tableKey,
@@ -712,7 +770,9 @@ var generateTable = exports.generateTable = function generateTable(_ref4) {
       filterForm: !!filters,
       initialFilterValues: props.initialFilterValues || {},
       onSearch: props.onSearch,
-      onFetch: props.onFetch
+      onFetch: props.onFetch,
+      onColumnSort: props.onColumnSort,
+      onColumnToggle: props.onColumnToggle
     };
     return /*#__PURE__*/_react["default"].createElement(Table, setProps, props.children);
   };