@mwater/visualization 5.5.0 → 5.6.1

package/lib/mwater_table_selection/MWaterCompleteTableSelectComponent.d.ts

@@ -14,24 +14,50 @@ interface MWaterCompleteTableSelectComponentProps {
     extraTables: any;
     onExtraTablesChange: any;
 }
+interface Category {
+    id: string;
+    name: string;
+    description: string;
+    icon: string;
+    render: () => JSX.Element;
+}
+/** Allows selection of a table. Card-based layout with categories */
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
+    selectedCategory: string | null;
     showLegacyAssets: boolean;
+    searchText: string;
 }> {
     constructor(props: MWaterCompleteTableSelectComponentProps);
     handleExtraTableAdd: (tableId: any) => any;
     handleExtraTableRemove: (tableId: any) => any;
+    handleCategorySelect: (categoryId: string) => void;
+    handleBackToCategories: () => void;
     renderSites(): React.JSX.Element;
     renderForms(): React.JSX.Element;
     renderIndicators(): React.JSX.Element;
     renderIssues(): React.JSX.Element;
+    renderWorkflows(): React.JSX.Element;
     renderSweetSense(): React.JSX.Element;
     renderTablesets(): React.JSX.Element;
     renderMetrics(): React.JSX.Element;
     renderAccountingSystems(): React.JSX.Element;
     renderAssets(): React.JSX.Element;
     renderLegacyAssets(): React.JSX.Element;
+    renderCalculated(): React.JSX.Element;
     renderOther(): React.JSX.Element;
     getSweetSenseTables(): import("@mwater/expressions").Table[];
+    /** Get all available categories */
+    getCategories(): Category[];
+    /** Render a single category card */
+    renderCategoryCard(category: Category): React.JSX.Element;
+    /** Get display name for an extra table (handles wildcards) */
+    getExtraTableDisplayName(tableId: string): string | null;
+    /** Render the currently included extra tables section */
+    renderExtraTables(): React.JSX.Element | null;
+    /** Render the landing page with all categories */
+    renderLandingPage(): React.JSX.Element;
+    /** Render a specific category view */
+    renderCategoryView(): React.JSX.Element | null;
     render(): React.JSX.Element;
 }
 export {};

package/lib/mwater_table_selection/MWaterCompleteTableSelectComponent.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
 const uiComponents = __importStar(require("../UIComponents"));
 const expressions_1 = require("@mwater/expressions");
 const MWaterCustomTablesetListComponent_1 = require("./MWaterCustomTablesetListComponent");
@@ -38,6 +37,8 @@ const FormsListComponent_1 = require("./FormsListComponent");
 const IndicatorsListComponent_1 = require("./IndicatorsListComponent");
 const IssuesListComponent_1 = require("./IssuesListComponent");
 const MWaterAccountingSystemListComponent_1 = require("./MWaterAccountingSystemListComponent");
+const MWaterCalculatedDataSourcesListComponent_1 = require("./MWaterCalculatedDataSourcesListComponent");
+const MWaterWorkflowsSelectComponent_1 = require("./MWaterWorkflowsSelectComponent");
 const sitesOrder = {
     "entities.water_point": 1,
     "entities.sanitation_facility": 2,
@@ -55,23 +56,43 @@ const sitesOrder = {
 const assetEntities = [
     "entities.water_asset"
 ];
-// Allows selection of a table. Is the complete list mode of tables
+/** Allows selection of a table. Card-based layout with categories */
 class MWaterCompleteTableSelectComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.state = {
-            showLegacyAssets: false
+            selectedCategory: null,
+            showLegacyAssets: false,
+            searchText: ""
         };
     }
     handleExtraTableAdd = (tableId) => {
         return this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables, [tableId]));
     };
     handleExtraTableRemove = (tableId) => {
-        // Set to null if current table
-        if (this.props.table === tableId) {
-            this.props.onChange(null);
+        const displayName = this.getExtraTableDisplayName(tableId);
+        if (!displayName) {
+            return;
         }
-        return this.props.onExtraTablesChange(lodash_1.default.without(this.props.extraTables, tableId));
+        if (confirm(T `Remove ${displayName}? Any widgets that depend on it will no longer work properly.`)) {
+            // Set to null if current table matches (for wildcards, check if current table starts with prefix)
+            if (tableId.endsWith(".*")) {
+                const prefix = tableId.slice(0, -2);
+                if (this.props.table && this.props.table.startsWith(prefix + ".")) {
+                    this.props.onChange(null);
+                }
+            }
+            else if (this.props.table === tableId) {
+                this.props.onChange(null);
+            }
+            return this.props.onExtraTablesChange(lodash_1.default.without(this.props.extraTables, tableId));
+        }
+    };
+    handleCategorySelect = (categoryId) => {
+        this.setState({ selectedCategory: categoryId });
+    };
+    handleBackToCategories = () => {
+        this.setState({ selectedCategory: null, showLegacyAssets: false });
     };
     renderSites() {
         let table;
@@ -109,6 +130,9 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
     renderIssues() {
         return react_1.default.createElement(IssuesListComponent_1.IssuesListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
     }
+    renderWorkflows() {
+        return react_1.default.createElement(MWaterWorkflowsSelectComponent_1.MWaterWorkflowsSelectComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove });
+    }
     renderSweetSense() {
         let sweetSenseTables = this.getSweetSenseTables();
         sweetSenseTables = lodash_1.default.sortBy(sweetSenseTables, (table) => table.name.en);
@@ -155,6 +179,9 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
     renderLegacyAssets() {
         return react_1.default.createElement(MWaterAssetSystemsListComponent_1.MWaterAssetSystemsListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
     }
+    renderCalculated() {
+        return react_1.default.createElement(MWaterCalculatedDataSourcesListComponent_1.MWaterCalculatedDataSourcesListComponent, { schema: this.props.schema, client: this.props.client, apiUrl: this.props.apiUrl, user: this.props.user, onChange: this.props.onChange, extraTables: this.props.extraTables, onExtraTableAdd: this.handleExtraTableAdd, onExtraTableRemove: this.handleExtraTableRemove, locale: T.locale });
+    }
     renderOther() {
         let otherTables = lodash_1.default.filter(this.props.schema.getTables(), (table) => {
             // Remove deprecated
@@ -193,6 +220,14 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             if (table.id.match(/^assets:/)) {
                 return false;
             }
+            // Remove calculated data sources
+            if (table.id.match(/^calculated:/)) {
+                return false;
+            }
+            // Remove workflows
+            if (table.id.match(/^(workflows|workflow_events):/)) {
+                return false;
+            }
             return true;
         });
         otherTables = lodash_1.default.sortBy(otherTables, (table) => table.name.en);
@@ -215,61 +250,212 @@ class MWaterCompleteTableSelectComponent extends react_1.default.Component {
             return false;
         });
     }
-    render() {
-        const sweetSenseTables = this.getSweetSenseTables();
-        const tabs = [
-            { id: "sites", label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-map-marker" }),
-                    " ",
-                    T `Sites`), elem: this.renderSites() },
-            { id: "forms", label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-th-list" }),
-                    " ",
-                    T `Surveys`), elem: this.renderForms() },
+    /** Get all available categories */
+    getCategories() {
+        const categories = [
+            {
+                id: "sites",
+                name: T("Sites").toString(),
+                description: T("Water points, sanitation facilities, households, and other sites").toString(),
+                icon: "fa fa-map-marker",
+                render: () => this.renderSites()
+            },
+            {
+                id: "forms",
+                name: T("Surveys").toString(),
+                description: T("Data collected from survey forms").toString(),
+                icon: "fa fa-th-list",
+                render: () => this.renderForms()
+            },
+            {
+                id: "assets",
+                name: T("Assets").toString(),
+                description: T("Asset tracking and management").toString(),
+                icon: "fas fa-map-pin",
+                render: () => this.renderAssets()
+            },
             {
                 id: "indicators",
-                label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-check-circle" }),
-                    " ",
-                    T `Indicators`),
-                elem: this.renderIndicators()
+                name: T("Indicators").toString(),
+                description: T("Calculated indicators and metrics").toString(),
+                icon: "fa fa-check-circle",
+                render: () => this.renderIndicators()
             },
             {
-                id: "issues",
-                label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-exclamation-circle" }),
-                    " ",
-                    T `Issues`),
-                elem: this.renderIssues()
+                id: "tablesets",
+                name: T("Tables").toString(),
+                description: T("Custom tables and datasets").toString(),
+                icon: "fa fa-table",
+                render: () => this.renderTablesets()
+            },
+            {
+                id: "calculated",
+                name: T("Calculated").toString(),
+                description: T("Calculated and derived data sources").toString(),
+                icon: "fa fa-cogs",
+                render: () => this.renderCalculated()
             },
-            { id: "tablesets", label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-table" }),
-                    " ",
-                    T `Tables`), elem: this.renderTablesets() },
-            { id: "metrics", label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-line-chart" }),
-                    " ",
-                    T `Metrics`), elem: this.renderMetrics() },
             {
                 id: "accounting",
-                label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fa fa-calculator" }),
-                    " ",
-                    T `Accounting`),
-                elem: this.renderAccountingSystems()
+                name: T("Accounting").toString(),
+                description: T("Financial and accounting data").toString(),
+                icon: "fa fa-calculator",
+                render: () => this.renderAccountingSystems()
             },
-            { id: "assets", label: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("i", { className: "fas fa-map-pin" }),
-                    " ",
-                    T `Assets`), elem: this.renderAssets() }
+            {
+                id: "workflows",
+                name: T("Workflows").toString(),
+                description: T("Multi-step processes and workflows").toString(),
+                icon: "fa fa-project-diagram",
+                render: () => this.renderWorkflows()
+            },
+            {
+                id: "issues",
+                name: T("Issues").toString(),
+                description: T("Reported problems and issues").toString(),
+                icon: "fa fa-exclamation-circle",
+                render: () => this.renderIssues()
+            },
+            {
+                id: "metrics",
+                name: T("Metrics").toString(),
+                description: T("Performance metrics and KPIs").toString(),
+                icon: "fa fa-line-chart",
+                render: () => this.renderMetrics()
+            },
+            {
+                id: "other",
+                name: T("Advanced").toString(),
+                description: T("Other advanced data sources").toString(),
+                icon: "fa fa-ellipsis-h",
+                render: () => this.renderOther()
+            }
         ];
-        if (sweetSenseTables.length > 0) {
-            tabs.push({ id: "sensors", label: T `Sensors`, elem: this.renderSweetSense() });
+        // // Add sensors if applicable
+        // const sweetSenseTables = this.getSweetSenseTables()
+        // if (sweetSenseTables.length > 0) {
+        //   categories.splice(9, 0, {
+        //     id: "sensors",
+        //     name: T("Sensors").toString(),
+        //     description: T("Sensor data and monitoring").toString(),
+        //     icon: "fa fa-wifi",
+        //     render: () => this.renderSweetSense()
+        //   })
+        // }
+        return categories;
+    }
+    /** Render a single category card */
+    renderCategoryCard(category) {
+        return (react_1.default.createElement("div", { key: category.id, className: "card mb-2", style: {
+                cursor: "pointer",
+                transition: "background-color 0.15s, border-color 0.15s"
+            }, onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#f8f9fa";
+                e.currentTarget.style.borderColor = "#adb5bd";
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "";
+                e.currentTarget.style.borderColor = "";
+            }, onClick: () => this.handleCategorySelect(category.id) },
+            react_1.default.createElement("div", { className: "card-body d-flex align-items-center", style: { padding: "0.75rem" } },
+                react_1.default.createElement("div", { style: { fontSize: "1.75rem", width: "2.5rem", textAlign: "center", color: "#6c757d" } },
+                    react_1.default.createElement("i", { className: category.icon })),
+                react_1.default.createElement("div", { style: { flex: 1, marginLeft: "0.75rem" } },
+                    react_1.default.createElement("div", { style: { fontWeight: 600, fontSize: "1rem", marginBottom: "0.15rem" } }, category.name),
+                    react_1.default.createElement("div", { className: "text-muted", style: { fontSize: "0.85rem" } }, category.description)),
+                react_1.default.createElement("div", { style: { color: "#adb5bd", fontSize: "1.1rem" } },
+                    react_1.default.createElement("i", { className: "fa fa-chevron-right" })))));
+    }
+    /** Get display name for an extra table (handles wildcards) */
+    getExtraTableDisplayName(tableId) {
+        // Check if it's a wildcard pattern
+        if (tableId.endsWith(".*")) {
+            // Find first matching table
+            const prefix = tableId.slice(0, -2); // Remove .*
+            const matchingTable = this.props.schema.getTables().find(t => t.id.startsWith(prefix + "."));
+            if (matchingTable) {
+                const fullName = expressions_1.ExprUtils.localizeString(matchingTable.name, T.locale);
+                // Split by " > " and take first part
+                const parts = fullName.split(" > ");
+                return parts[0];
+            }
+            // Fallback to showing the pattern
+            return tableId;
+        }
+        // Regular table
+        const table = this.props.schema.getTable(tableId);
+        if (!table) {
+            return null;
+        }
+        return expressions_1.ExprUtils.localizeString(table.name, T.locale);
+    }
+    /** Render the currently included extra tables section */
+    renderExtraTables() {
+        if (!this.props.extraTables || this.props.extraTables.length === 0) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: "mb-3 pb-2", style: { borderBottom: "1px solid #dee2e6" } },
+            react_1.default.createElement("span", { className: "text-muted me-2", style: { fontSize: "0.9rem" } },
+                T `Currently Included`,
+                ":"),
+            this.props.extraTables.map((tableId) => {
+                const displayName = this.getExtraTableDisplayName(tableId);
+                if (!displayName) {
+                    return null;
+                }
+                return (react_1.default.createElement("span", { key: tableId, className: "d-inline-flex align-items-center me-2 px-2 py-1 bg-light border rounded", style: { fontSize: "0.85rem" } },
+                    react_1.default.createElement("span", null, displayName),
+                    react_1.default.createElement("button", { className: "btn btn-link btn-sm p-0 ms-1", style: { fontSize: "0.9rem", color: "#6c757d" }, onClick: (e) => {
+                            e.stopPropagation();
+                            this.handleExtraTableRemove(tableId);
+                        } },
+                        react_1.default.createElement("i", { className: "fa fa-times" }))));
+            })));
+    }
+    /** Render the landing page with all categories */
+    renderLandingPage() {
+        const categories = this.getCategories();
+        // Filter by search text
+        const filteredCategories = this.state.searchText
+            ? categories.filter((cat) => {
+                const searchLower = this.state.searchText.toLowerCase();
+                return (cat.name.toLowerCase().includes(searchLower) ||
+                    cat.description.toLowerCase().includes(searchLower));
+            })
+            : categories;
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "text-muted mb-3" }, T `Select a data source category to browse available tables and datasets.`),
+            react_1.default.createElement("div", { className: "mb-3 position-relative" },
+                react_1.default.createElement("i", { className: "fa fa-search position-absolute", style: { left: "0.75rem", top: "50%", transform: "translateY(-50%)", color: "#6c757d" } }),
+                react_1.default.createElement("input", { type: "text", className: "form-control", style: { paddingLeft: "2.5rem" }, placeholder: T("Search categories...").toString(), value: this.state.searchText, onChange: (e) => this.setState({ searchText: e.target.value }), ref: (c) => {
+                        if (c) {
+                            c.focus();
+                        }
+                    } })),
+            this.renderExtraTables(),
+            react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" } }, filteredCategories.map((category) => this.renderCategoryCard(category))),
+            filteredCategories.length === 0 && this.state.searchText && (react_1.default.createElement("div", { className: "text-center text-muted mt-4" }, T `No categories match your search.`))));
+    }
+    /** Render a specific category view */
+    renderCategoryView() {
+        const categories = this.getCategories();
+        const category = categories.find((c) => c.id === this.state.selectedCategory);
+        if (!category) {
+            return null;
         }
-        tabs.push({ id: "other", label: T `Advanced`, elem: this.renderOther() });
         return (react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { className: "text-muted" }, T `Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`),
-            react_1.default.createElement(TabbedComponent_1.default, { tabs: tabs, initialTabId: "sites" })));
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("button", { className: "btn btn-link p-0", style: { textDecoration: "none" }, onClick: this.handleBackToCategories },
+                    react_1.default.createElement("i", { className: "fa fa-arrow-left me-2" }),
+                    T `Back to All Data Sources`)),
+            react_1.default.createElement("h5", { className: "mb-3" },
+                react_1.default.createElement("i", { className: `${category.icon} me-2 text-muted` }),
+                category.name),
+            category.render()));
+    }
+    render() {
+        return (react_1.default.createElement("div", { style: { height: "65vh", overflowY: "auto" } }, this.state.selectedCategory === null
+            ? this.renderLandingPage()
+            : this.renderCategoryView()));
     }
 }
 exports.default = MWaterCompleteTableSelectComponent;

package/lib/mwater_table_selection/MWaterTableSelectComponent.d.ts

@@ -12,8 +12,8 @@ export interface MWaterTableSelectComponentProps {
     table?: string;
     /** Called with table selected */
     onChange: (table: string | null) => void;
-    extraTables: string[];
-    onExtraTablesChange: (tables: string[]) => void;
+    extraTables?: string[];
+    onExtraTablesChange?: (tables: string[]) => void;
     /** Can also perform filtering for some types. Include these props to enable this */
     filter?: any;
     onFilterChange?: (filter: any) => void;

package/lib/mwater_table_selection/MWaterTableSelectComponent.js

@@ -62,12 +62,17 @@ class MWaterTableSelectComponent extends react_1.default.Component {
     handleTableChange = (tableId) => {
         // If not part of extra tables, add it and wait for new schema
         if (tableId && !this.props.schema.getTable(tableId)) {
-            return this.setState({ pendingExtraTable: tableId }, () => {
-                return this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables, [tableId]));
-            });
+            if (this.props.onExtraTablesChange) {
+                this.setState({ pendingExtraTable: tableId }, () => {
+                    this.props.onExtraTablesChange(lodash_1.default.union(this.props.extraTables || [], [tableId]));
+                });
+            }
+            else {
+                alert(T `Cannot add new tables.`);
+            }
         }
         else {
-            return this.handleChange(tableId);
+            this.handleChange(tableId);
         }
     };
     render() {

package/lib/mwater_table_selection/MWaterWorkflowsSelectComponent.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { Schema } from "@mwater/expressions";
+interface MWaterWorkflowsSelectComponentProps {
+    /** Url to hit api */
+    apiUrl: string;
+    /** Optional client */
+    client?: string;
+    schema: Schema;
+    /** User id */
+    user?: string;
+    /** Called with table selected */
+    onChange: (tableId: string) => void;
+    extraTables: string[];
+    onExtraTableAdd: (tableId: string) => void;
+    onExtraTableRemove: (tableId: string) => void;
+}
+/** Searchable list of workflow types */
+export declare function MWaterWorkflowsSelectComponent(props: MWaterWorkflowsSelectComponentProps): React.JSX.Element;
+export {};

package/lib/mwater_table_selection/MWaterWorkflowsSelectComponent.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MWaterWorkflowsSelectComponent = MWaterWorkflowsSelectComponent;
+const lodash_1 = __importDefault(require("lodash"));
+const jquery_1 = __importDefault(require("jquery"));
+const react_1 = __importStar(require("react"));
+const querystring_1 = __importDefault(require("querystring"));
+const uiComponents = __importStar(require("../UIComponents"));
+const expressions_1 = require("@mwater/expressions");
+/** Searchable list of workflow types */
+function MWaterWorkflowsSelectComponent(props) {
+    const [workflowTypes, setWorkflowTypes] = (0, react_1.useState)(null);
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        // Get names and basic of workflow types
+        const query = {};
+        query.fields = JSON.stringify({
+            name: 1,
+            description: 1,
+            roles: 1,
+            _created_by: 1,
+            _modified_on: 1
+        });
+        query.client = props.client;
+        // Get list of all workflow types
+        jquery_1.default.getJSON(props.apiUrl + "workflow_types?" + querystring_1.default.stringify(query), (types) => {
+            // Sort by included first, then user-created, then by name
+            types = lodash_1.default.sortByOrder(types, [
+                (type) => ((props.extraTables || []).includes("workflows:" + type._id) ? 0 : 1),
+                (type) => (type._created_by === props.user ? 0 : 1),
+                (type) => expressions_1.ExprUtils.localizeString(type.name, T.locale) || T `Untitled Workflow Type`
+            ], ["asc", "asc", "asc"]);
+            setWorkflowTypes(lodash_1.default.map(types, (type) => ({
+                id: type._id,
+                name: expressions_1.ExprUtils.localizeString(type.name, T.locale) || T `Untitled Workflow Type`,
+                desc: expressions_1.ExprUtils.localizeString(type.description, T.locale)
+            })));
+        }).fail((xhr) => {
+            setError(xhr.responseText);
+        });
+    }, [props.apiUrl, props.client, props.user, props.extraTables]);
+    const handleTableRemove = (table) => {
+        if (confirm(T `Remove ${table.name}? Any widgets that depend on it will no longer work properly.`)) {
+            props.onExtraTableRemove(`workflows:${table.id}`);
+        }
+    };
+    if (error) {
+        return react_1.default.createElement("div", { className: "alert alert-danger" }, error);
+    }
+    // Filter workflow types by search
+    let filteredWorkflowTypes = workflowTypes;
+    if (search && workflowTypes) {
+        const escapeRegExp = (s) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+        const searchStringRegExp = new RegExp(escapeRegExp(search), "i");
+        filteredWorkflowTypes = lodash_1.default.filter(workflowTypes, (type) => type.name.match(searchStringRegExp));
+    }
+    // Remove if already included
+    filteredWorkflowTypes = lodash_1.default.filter(filteredWorkflowTypes || [], (wt) => !(props.extraTables || []).includes(`workflows:${wt.id}`));
+    // Get included workflow tables from schema
+    let includedTables = lodash_1.default.filter(props.schema.getTables(), (table) => (table.id.match(/^workflows:/) || table.id.match(/^workflow_events:/)) && !table.deprecated);
+    includedTables = lodash_1.default.sortBy(includedTables, (t) => t.name.en);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("label", null, T `Included Workflows:`),
+        includedTables.length > 0 ? (react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(includedTables, (table) => {
+                return {
+                    name: expressions_1.ExprUtils.localizeString(table.name, T.locale),
+                    desc: expressions_1.ExprUtils.localizeString(table.desc, T.locale),
+                    onClick: () => props.onChange(table.id),
+                    onRemove: () => handleTableRemove({ id: table.id.replace(/^workflows:/, ""), name: expressions_1.ExprUtils.localizeString(table.name, T.locale) })
+                };
+            }) })) : (react_1.default.createElement("div", null, T `None`)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("label", null, T `All Workflows:`),
+        !workflowTypes || workflowTypes.length === 0 ? (react_1.default.createElement("div", { className: "alert alert-info" },
+            react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+            "\u00A0",
+            T `Loading...`)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", placeholder: T `Search...`, key: "search", autoFocus: true, style: { maxWidth: "20em", marginBottom: 10 }, value: search, onChange: (ev) => setSearch(ev.target.value) }),
+            react_1.default.createElement(uiComponents.OptionListComponent, { items: lodash_1.default.map(filteredWorkflowTypes, (workflowType) => ({
+                    name: workflowType.name,
+                    desc: workflowType.desc,
+                    onClick: () => props.onChange("workflows:" + workflowType.id)
+                })) })))));
+}