@mwater/visualization 5.4.5 → 5.5.0

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -1,975 +0,0 @@
-import _ from "lodash"
-import $ from "jquery"
-import React from "react"
-const R = React.createElement
-import querystring from "querystring"
-import { default as TabbedComponent, TabbedComponentTab } from "@mwater/react-library/lib/TabbedComponent"
-import * as uiComponents from "./UIComponents"
-import { ExprUtils, Schema } from "@mwater/expressions"
-import moment from "moment"
-import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
-import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListComponent"
-import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
-import { Form } from "@mwater/forms"
-import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
-
-const sitesOrder: { [table: string]: number } = {
-  "entities.water_point": 1,
-  "entities.sanitation_facility": 2,
-  "entities.household": 3,
-  "entities.community": 4,
-  "entities.school": 5,
-  "entities.health_facility": 6,
-  "entities.place_of_worship": 7,
-  "entities.water_system": 8,
-  "entities.water_system_component": 9,
-  "entities.wastewater_treatment_system": 10,
-  "entities.waste_disposal_site": 11
-}
-
-/** Entity types that are assets */
-const assetEntities = [
-  "entities.water_asset"
-]
-
-interface MWaterCompleteTableSelectComponentProps {
-  /** Url to hit api */
-  apiUrl: string
-  /** Optional client */
-  client?: string
-  schema: Schema
-  /** User id */
-  user?: string
-  table?: string
-  /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTablesChange: any
-}
-
-// Allows selection of a table. Is the complete list mode of tables
-export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
-  showLegacyAssets: boolean
-}> {
-  constructor(props: MWaterCompleteTableSelectComponentProps) {
-    super(props)
-
-    this.state = {
-      showLegacyAssets: false
-    }
-  }
-
-  handleExtraTableAdd = (tableId: any) => {
-    return this.props.onExtraTablesChange(_.union(this.props.extraTables, [tableId]))
-  }
-
-  handleExtraTableRemove = (tableId: any) => {
-    // Set to null if current table
-    if (this.props.table === tableId) {
-      this.props.onChange(null)
-    }
-
-    return this.props.onExtraTablesChange(_.without(this.props.extraTables, tableId))
-  }
-
-  renderSites() {
-    let table
-    let types = []
-
-    for (table of this.props.schema.getTables()) {
-      if (table.deprecated) {
-        continue
-      }
-
-      if (!table.id.match(/^entities\./)) {
-        continue
-      }
-
-      // Skip assets
-      if (assetEntities.includes(table.id)) {
-        continue
-      }
-
-      types.push(table.id)
-    }
-
-    // Sort by order if present
-    types = _.sortBy(types, (type) => sitesOrder[type] || 999)
-
-    return R(uiComponents.OptionListComponent, {
-      items: _.compact(
-        _.map(types, (tableId) => {
-          table = this.props.schema.getTable(tableId)!
-          return {
-            name: ExprUtils.localizeString(table.name, T.locale),
-            desc: ExprUtils.localizeString(table.desc, T.locale),
-            onClick: this.props.onChange.bind(null, table.id)
-          }
-        })
-      )
-    })
-  }
-
-  renderForms() {
-    return R(FormsListComponent, {
-      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
-    })
-  }
-
-  renderIndicators() {
-    return R(IndicatorsListComponent, {
-      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
-    })
-  }
-
-  renderIssues() {
-    return R(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
-    })
-  }
-
-  renderSweetSense() {
-    let sweetSenseTables = this.getSweetSenseTables()
-
-    sweetSenseTables = _.sortBy(sweetSenseTables, (table) => table.name.en)
-    return R(uiComponents.OptionListComponent, {
-      items: _.map(sweetSenseTables, (table) => {
-        return {
-          name: ExprUtils.localizeString(table.name, T.locale),
-          desc: ExprUtils.localizeString(table.desc, T.locale),
-          onClick: this.props.onChange.bind(null, table.id)
-        }
-      })
-    })
-  }
-
-  renderTablesets() {
-    return R(MWaterCustomTablesetListComponent, {
-      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
-    })
-  }
-
-  renderMetrics() {
-    return R(MWaterMetricsTableListComponent, {
-      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
-    })
-  }
-
-  renderAssets() {
-    const items: {
-      name: string
-      desc?: string
-      onClick: () => void
-    }[] = []
-
-    for (const tableId of assetEntities) {
-      const table = this.props.schema.getTable(tableId)
-      if (!table) {
-        continue
-      }
-      items.push({
-        name: ExprUtils.localizeString(table.name, T.locale),
-        desc: ExprUtils.localizeString(table.desc, T.locale),
-        onClick: this.props.onChange.bind(null, table.id)
-      })
-    }
-
-    return <div>
-      <uiComponents.OptionListComponent items={items} />
-      <div className="text-center mt-2 mb-2">
-        <button className="btn btn-link" onClick={() => this.setState({ showLegacyAssets: !this.state.showLegacyAssets })}>
-          {this.state.showLegacyAssets ? T`Hide` : T`Show`} {T`Legacy Assets`}
-        </button>
-      </div>
-      {this.state.showLegacyAssets && this.renderLegacyAssets()}
-    </div>
-  }
-
-
-  renderLegacyAssets() {
-    return R(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
-    })
-  }
-
-  renderOther() {
-    let otherTables = _.filter(this.props.schema.getTables(), (table) => {
-      // Remove deprecated
-      if (table.deprecated) {
-        return false
-      }
-
-      // Remove sites
-      if (table.id.match(/^entities\./)) {
-        return false
-      }
-
-      // sweetsense tables
-      if (table.id.match(/^sweetsense/)) {
-        return false
-      }
-
-      // Remove responses
-      if (table.id.match(/^responses:/)) {
-        return false
-      }
-
-      // Remove indicators
-      if (table.id.match(/^indicator_values:/)) {
-        return false
-      }
-
-      // Remove issues
-      if (table.id.match(/^(issues|issue_events):/)) {
-        return false
-      }
-
-      // Remove custom tablesets
-      if (table.id.match(/^custom\./)) {
-        return false
-      }
-
-      // Remove metrics
-      if (table.id.match(/^metrics:/)) {
-        return false
-      }
-
-      // Remove assets
-      if (table.id.match(/^assets:/)) {
-        return false
-      }
-
-      return true
-    })
-
-    otherTables = _.sortBy(otherTables, (table) => table.name.en)
-    return R(uiComponents.OptionListComponent, {
-      items: _.map(otherTables, (table) => {
-        return {
-          name: ExprUtils.localizeString(table.name, T.locale),
-          desc: ExprUtils.localizeString(table.desc, T.locale),
-          onClick: this.props.onChange.bind(null, table.id)
-        }
-      })
-    })
-  }
-
-  getSweetSenseTables() {
-    return _.filter(this.props.schema.getTables(), (table) => {
-      if (table.deprecated) {
-        return false
-      }
-
-      if (table.id.match(/^sweetsense/)) {
-        return true
-      }
-
-      return false
-    })
-  }
-
-  render() {
-    const sweetSenseTables = this.getSweetSenseTables()
-
-    const tabs: TabbedComponentTab[] = [
-      { id: "sites", label: [R("i", { className: "fa fa-map-marker" }), " ", T`Sites`], elem: this.renderSites() },
-      { id: "forms", label: [R("i", { className: "fa fa-th-list" }), " ", T`Surveys`], elem: this.renderForms() },
-      {
-        id: "indicators",
-        label: [R("i", { className: "fa fa-check-circle" }), " ", T`Indicators`],
-        elem: this.renderIndicators()
-      },
-      {
-        id: "issues",
-        label: [R("i", { className: "fa fa-exclamation-circle" }), " ", T`Issues`],
-        elem: this.renderIssues()
-      },
-      { id: "tablesets", label: [R("i", { className: "fa fa-table" }), " ", T`Tables`], elem: this.renderTablesets() },
-      { id: "metrics", label: [R("i", { className: "fa fa-line-chart" }), " ", T`Metrics`], elem: this.renderMetrics() },
-      { id: "assets", label: [R("i", { className: "fas fa-map-pin" }), " ", T`Assets`], elem: this.renderAssets() }
-    ]
-
-    if (sweetSenseTables.length > 0) {
-      tabs.push({ id: "sensors", label: T`Sensors`, elem: this.renderSweetSense() })
-    }
-
-    tabs.push({ id: "other", label: T`Advanced`, elem: this.renderOther() })
-
-    return R(
-      "div",
-      null,
-      R(
-        "div",
-        { className: "text-muted" },
-        T`Select data from sites, surveys or an advanced category below. Indicators can be found within their associated site types.`
-      ),
-
-      R(TabbedComponent, {
-        tabs,
-        initialTabId: "sites"
-      })
-    )
-  }
-}
-
-interface FormsListComponentProps {
-  /** Url to hit api */
-  apiUrl: string
-  /** Optional client */
-  client?: string
-  schema: Schema
-  /** User id */
-  user?: string
-  /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTableAdd: any
-  onExtraTableRemove: any
-}
-
-interface FormsListComponentState {
-  error?: any
-  search: any
-  forms: { id: string, name: string, desc?: string }[] | null
-}
-
-// Searchable list of forms
-class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      forms: null,
-      search: ""
-    }
-  }
-
-  componentDidMount() {
-    // Get names and basic of forms
-    const query: any = {}
-    query.fields = JSON.stringify({
-      "design.name": 1,
-      "design.description": 1,
-      roles: 1,
-      created: 1,
-      modified: 1,
-      state: 1,
-      isMaster: 1
-    })
-    query.selector = JSON.stringify({ design: { $exists: true }, state: { $ne: "deleted" } })
-    query.client = this.props.client
-
-    // Get list of all form names
-    $.getJSON(this.props.apiUrl + "forms?" + querystring.stringify(query), (forms: Form[]) => {
-      // Sort by modified.on desc but first by user
-      forms = _.sortByOrder(
-        forms,
-        [
-          (form: Form) => ((this.props.extraTables || []).includes("responses:" + form._id) ? 1 : 0),
-          (form: Form) => (form.created.by === this.props.user ? 1 : 0),
-          (form: Form) => form.modified?.on
-        ],
-        ["desc", "desc", "desc"]
-      )
-
-      // TODO use name instead of design.name
-      this.setState({
-        forms: _.map(forms, (form) => {
-          let desc = ExprUtils.localizeString(form.design.description, null) || ""
-          if (desc) {
-            desc += " - "
-          }
-          desc += T`Modified ${moment(form.modified?.on, moment.ISO_8601).format("ll")}`
-
-          return {
-            id: form._id,
-            name: ExprUtils.localizeString(form.design.name, null),
-            desc
-          }
-        })
-      })
-    }).fail((xhr: any) => {
-      this.setState({ error: xhr.responseText })
-    })
-  }
-
-  handleTableRemove = (table: any) => {
-    if (
-      confirm(
-        T`Remove ${ExprUtils.localizeString(
-          table.name,
-          T.locale
-        )}? Any widgets that depend on it will no longer work properly.`
-      )
-    ) {
-      return this.props.onExtraTableRemove(table.id)
-    }
-  }
-
-  searchRef = (comp: any) => {
-    // Focus
-    if (comp) {
-      return comp.focus()
-    }
-  }
-
-  render() {
-    let forms
-    if (this.state.error) {
-      return R("div", { className: "alert alert-danger" }, this.state.error)
-    }
-
-    // Filter forms
-    if (this.state.search) {
-      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
-
-      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
-
-      forms = _.filter(this.state.forms!, (form) => form.name.match(searchStringRegExp))
-    } else {
-      ;({ forms } = this.state)
-    }
-
-    // Remove if already included
-    forms = _.filter(forms || [], (f) => !(this.props.extraTables || []).includes(`responses:${f.id}`))
-
-    let tables = _.filter(
-      this.props.schema.getTables(),
-      (table) => (table.id.match(/^responses:/) || table.id.match(/^master_responses:/)) && !table.deprecated
-    )
-    tables = _.sortBy(tables, (t) => t.name.en)
-
-    return R(
-      "div",
-      null,
-      R("label", null, T`Included Surveys:`),
-      tables.length > 0
-        ? R(uiComponents.OptionListComponent, {
-            items: _.map(tables, (table) => {
-              return {
-                name: ExprUtils.localizeString(table.name, T.locale),
-                desc: ExprUtils.localizeString(table.desc, T.locale),
-                onClick: this.props.onChange.bind(null, table.id),
-                onRemove: this.handleTableRemove.bind(null, table)
-              }
-            })
-          })
-        : R("div", null, T`None`),
-
-      R("br"),
-
-      R("label", null, T`All Surveys:`),
-      !this.state.forms || this.state.forms.length === 0
-        ? R(
-            "div",
-            { className: "alert alert-info" },
-            R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0" + T`Loading...`
-          )
-        : [
-            R("input", {
-              type: "text",
-              className: "form-control form-control-sm",
-              placeholder: T`Search...`,
-              key: "search",
-              ref: this.searchRef,
-              style: { maxWidth: "20em", marginBottom: 10 },
-              value: this.state.search,
-              onChange: (ev: any) => this.setState({ search: ev.target.value })
-            }),
-
-            R(uiComponents.OptionListComponent, {
-              items: _.map(forms, (form) => ({
-                name: form.name,
-                desc: form.desc,
-                onClick: this.props.onChange.bind(null, "responses:" + form.id)
-              }))
-            })
-          ]
-    )
-  }
-}
-
-interface IndicatorsListComponentProps {
-  /** Url to hit api */
-  apiUrl: string
-  /** Optional client */
-  client?: string
-  schema: Schema
-  /** User id */
-  user?: string
-  /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTableAdd: any
-  onExtraTableRemove: any
-}
-
-interface IndicatorsListComponentState {
-  error?: any
-  search: any
-  indicators: any[] | null
-}
-
-// Searchable list of indicators
-class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-  addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
-
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      indicators: null,
-      search: ""
-    }
-  }
-
-  componentDidMount() {
-    // Get names and basic of forms
-    const query: any = {}
-    query.fields = JSON.stringify({ "design.name": 1, "design.desc": 1, "design.recommended": 1, deprecated: 1 })
-    query.client = this.props.client
-
-    // Get list of all indicator names
-    return $.getJSON(this.props.apiUrl + "indicators?" + querystring.stringify(query), (indicators: any[]) => {
-      // Remove deprecated
-      indicators = _.filter(indicators, (indicator) => !indicator.deprecated)
-
-      // Sort by name
-      indicators = _.sortByOrder(
-        indicators,
-        [
-          (indicator: any) => ((this.props.extraTables || []).includes("indicator_values:" + indicator._id) ? 0 : 1),
-          (indicator: any) => (indicator.design.recommended ? 0 : 1),
-          (indicator: any) => ExprUtils.localizeString(indicator.design.name, T.locale)
-        ],
-        ["asc", "asc", "asc"]
-      )
-
-      return this.setState({
-        indicators: _.map(indicators, (indicator) => ({
-          id: indicator._id,
-          name: ExprUtils.localizeString(indicator.design.name, T.locale),
-          desc: ExprUtils.localizeString(indicator.design.desc, T.locale)
-        }))
-      })
-    }).fail((xhr: any) => {
-      return this.setState({ error: xhr.responseText })
-    })
-  }
-
-  handleTableRemove = (table: any) => {
-    if (
-      confirm(
-        T`Remove ${ExprUtils.localizeString(
-          table.name,
-          T.locale
-        )}? Any widgets that depend on it will no longer work properly.`
-      )
-    ) {
-      return this.props.onExtraTableRemove(table.id)
-    }
-  }
-
-  searchRef = (comp: any) => {
-    // Focus
-    if (comp) {
-      return comp.focus()
-    }
-  }
-
-  handleSelect = (tableId: any) => {
-    // Add table if not present
-    if (!this.props.schema.getTable(tableId)) {
-      this.props.onExtraTableAdd(tableId)
-    }
-
-    this.addIndicatorConfirmPopup!.show(tableId)
-  }
-
-  render() {
-    let indicators
-    if (this.state.error) {
-      return R("div", { className: "alert alert-danger" }, this.state.error)
-    }
-
-    // Filter indicators
-    if (this.state.search) {
-      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
-
-      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
-
-      indicators = _.filter(this.state.indicators || [], (indicator) => indicator.name.match(searchStringRegExp))
-    } else {
-      ;({ indicators } = this.state)
-    }
-
-    // Remove if already included
-    indicators = _.filter(indicators || [], (f) => !(this.props.extraTables || []).includes(`indicator_values:${f.id}`))
-
-    let tables = _.filter(
-      this.props.schema.getTables(),
-      (table) => table.id.match(/^indicator_values:/) && !table.deprecated
-    )
-    tables = _.sortBy(tables, (t) => t.name.en)
-
-    return R(
-      "div",
-      null,
-      R(AddIndicatorConfirmPopupComponent, {
-        schema: this.props.schema,
-        onChange: this.props.onChange,
-        onExtraTableAdd: this.props.onExtraTableAdd,
-        ref: (c: AddIndicatorConfirmPopupComponent | null) => {
-          this.addIndicatorConfirmPopup = c
-        }
-      }),
-
-      R("label", null, T`Included Indicators:`),
-      tables.length > 0
-        ? R(uiComponents.OptionListComponent, {
-            items: _.map(tables, (table) => {
-              return {
-                name: ExprUtils.localizeString(table.name, T.locale),
-                desc: ExprUtils.localizeString(table.desc, T.locale),
-                onClick: this.handleSelect.bind(null, table.id),
-                onRemove: this.handleTableRemove.bind(null, table)
-              }
-            })
-          })
-        : R("div", null, T`None`),
-
-      R("br"),
-
-      R("label", null, T`All Indicators:`),
-      !this.state.indicators || this.state.indicators.length === 0
-        ? R(
-            "div",
-            { className: "alert alert-info" },
-            R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0" + T`Loading...`
-          )
-        : [
-            R("input", {
-              type: "text",
-              className: "form-control form-control-sm",
-              placeholder: T`Search...`,
-              key: "search",
-              ref: this.searchRef,
-              style: { maxWidth: "20em", marginBottom: 10 },
-              value: this.state.search,
-              onChange: (ev: any) => this.setState({ search: ev.target.value })
-            }),
-
-            R(uiComponents.OptionListComponent, {
-              items: _.map(indicators, (indicator) => ({
-                name: indicator.name,
-                desc: indicator.desc,
-                onClick: this.handleSelect.bind(null, "indicator_values:" + indicator.id)
-              }))
-            })
-          ]
-    )
-  }
-}
-
-interface AddIndicatorConfirmPopupComponentProps {
-  schema: Schema
-  /** Called with table selected */
-  onChange: any
-  onExtraTableAdd: any
-}
-
-interface AddIndicatorConfirmPopupComponentState {
-  indicatorTable: any
-  visible: any
-}
-
-class AddIndicatorConfirmPopupComponent extends React.Component<
-  AddIndicatorConfirmPopupComponentProps,
-  AddIndicatorConfirmPopupComponentState
-> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      visible: false,
-      indicatorTable: null
-    }
-  }
-
-  show(indicatorTable: any) {
-    return this.setState({ visible: true, indicatorTable })
-  }
-
-  renderContents() {
-    // Show loading if table not loaded
-    if (!this.props.schema.getTable(this.state.indicatorTable)) {
-      return R(
-        "div",
-        { className: "alert alert-info" },
-        R("i", { className: "fa fa-spinner fa-spin" }),
-        "\u00A0" + T`Loading...`
-      )
-    }
-
-    // Find entity links
-    const entityColumns = _.filter(this.props.schema.getColumns(this.state.indicatorTable), (col) =>
-      col.join?.toTable?.match(/^entities\./)
-    )
-
-    return R(
-      "div",
-      null,
-      R(
-        "p",
-        null,
-        T`In general, it is better to get indicator values from the related site. Please select the site 
-below, then find the indicator values in the 'Related Indicators' section. Or click on 'Use Raw Indicator' if you 
-are certain that you want to use the raw indicator table`
-      ),
-
-      R(uiComponents.OptionListComponent, {
-        items: _.map(entityColumns, (entityColumn) => ({
-          name: ExprUtils.localizeString(entityColumn.name, T.locale),
-          desc: ExprUtils.localizeString(entityColumn.desc, T.locale),
-          onClick: () => {
-            // Select table
-            this.props.onChange(entityColumn.join!.toTable)
-            return this.setState({ visible: false })
-          }
-        }))
-      }),
-
-      R("br"),
-
-      R(
-        "div",
-        null,
-        R(
-          "a",
-          { className: "link-plain", onClick: this.props.onChange.bind(null, this.state.indicatorTable) },
-          T`Use Raw Indicator`
-        )
-      )
-    )
-  }
-
-  render() {
-    if (!this.state.visible) {
-      return null
-    }
-
-    return R(
-      ModalPopupComponent,
-      {
-        showCloseX: true,
-        onClose: () => this.setState({ visible: false }),
-        header: T`Add Indicator`
-      },
-      this.renderContents()
-    )
-  }
-}
-
-interface IssuesListComponentProps {
-  /** Url to hit api */
-  apiUrl: string
-  /** Optional client */
-  client?: string
-  schema: Schema
-  /** User id */
-  user?: string
-  /** Called with table selected */
-  onChange: any
-  extraTables: any
-  onExtraTableAdd: any
-  onExtraTableRemove: any
-}
-
-interface IssuesListComponentState {
-  error?: any
-  search: any
-  issueTypes: any[] | null
-}
-
-// Searchable list of issue types
-class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      issueTypes: null,
-      search: ""
-    }
-  }
-
-  componentDidMount() {
-    // Get names and basic of issueTypes
-    const query: any = {}
-    query.fields = JSON.stringify({ name: 1, desc: 1, roles: 1, created: 1, modified: 1 })
-    query.client = this.props.client
-
-    // Get list of all issueType names
-    return $.getJSON(this.props.apiUrl + "issue_types?" + querystring.stringify(query), (issueTypes: any[]) => {
-      // Sort by modified.on desc but first by user
-      issueTypes = _.sortByOrder(
-        issueTypes,
-        [
-          (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
-          (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-          (issueType) => ExprUtils.localizeString(issueType.name, T.locale)
-        ],
-        ["asc", "asc", "asc"]
-      )
-
-      return this.setState({
-        issueTypes: _.map(issueTypes, (issueType) => ({
-          id: issueType._id,
-          name: ExprUtils.localizeString(issueType.name, T.locale),
-          desc: ExprUtils.localizeString(issueType.desc, T.locale)
-        }))
-      })
-    }).fail((xhr: any) => {
-      return this.setState({ error: xhr.responseText })
-    })
-  }
-
-  handleTableRemove = (table: any) => {
-    if (
-      confirm(
-        T`Remove ${ExprUtils.localizeString(
-          table.name,
-          T.locale
-        )}? Any widgets that depend on it will no longer work properly.`
-      )
-    ) {
-      return this.props.onExtraTableRemove(table.id)
-    }
-  }
-
-  searchRef = (comp: any) => {
-    // Focus
-    if (comp) {
-      return comp.focus()
-    }
-  }
-
-  render() {
-    let issueTypes
-    if (this.state.error) {
-      return R("div", { className: "alert alert-danger" }, this.state.error)
-    }
-
-    // Filter issueTypes
-    if (this.state.search) {
-      const escapeRegExp = (s: any) => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
-
-      const searchStringRegExp = new RegExp(escapeRegExp(this.state.search), "i")
-
-      issueTypes = _.filter(this.state.issueTypes || [], (issueType) => issueType.name.match(searchStringRegExp))
-    } else {
-      ;({ issueTypes } = this.state)
-    }
-
-    // Remove if already included
-    issueTypes = _.filter(issueTypes || [], (f) => !(this.props.extraTables || []).includes(`issues:${f.id}`))
-
-    let tables = _.filter(
-      this.props.schema.getTables(),
-      (table) => (table.id.match(/^issues:/) || table.id.match(/^issue_events:/)) && !table.deprecated
-    )
-    tables = _.sortBy(tables, (t) => t.name.en)
-
-    return R(
-      "div",
-      null,
-      R("label", null, T`Included Issues:`),
-      tables.length > 0
-        ? R(uiComponents.OptionListComponent, {
-            items: _.map(tables, (table) => {
-              return {
-                name: ExprUtils.localizeString(table.name, T.locale),
-                desc: ExprUtils.localizeString(table.desc, T.locale),
-                onClick: this.props.onChange.bind(null, table.id),
-                onRemove: this.handleTableRemove.bind(null, table)
-              }
-            })
-          })
-        : R("div", null, T`None`),
-
-      R("br"),
-
-      R("label", null, T`All Issues:`),
-      !this.state.issueTypes || this.state.issueTypes.length === 0
-        ? R(
-            "div",
-            { className: "alert alert-info" },
-            R("i", { className: "fa fa-spinner fa-spin" }),
-            "\u00A0",
-            T`Loading...`
-          )
-        : [
-            R("input", {
-              type: "text",
-              className: "form-control form-control-sm",
-              placeholder: T`Search...`,
-              key: "search",
-              ref: this.searchRef,
-              style: { maxWidth: "20em", marginBottom: 10 },
-              value: this.state.search,
-              onChange: (ev: any) => this.setState({ search: ev.target.value })
-            }),
-
-            R(uiComponents.OptionListComponent, {
-              items: _.map(issueTypes, (issueType) => ({
-                name: issueType.name,
-                desc: issueType.desc,
-                onClick: this.props.onChange.bind(null, "issues:" + issueType.id)
-              }))
-            })
-          ]
-    )
-  }
-}