@mwater/visualization 5.2.0 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
     "backbone": "~1.1.2",
-    "billboard.js": "^3.6.3",
+    "billboard.js": "^3.13.0",
     "canonical-json": "0.0.4",
     "classnames": "^2.3.1",
     "color": "^3.2.1",
@@ -54,6 +54,7 @@
     "maplibre-gl": "^3.3.1",
     "markdown-it": "^12.0.4",
     "moment": "^2.29.1",
+    "p-queue": "^8.0.1",
     "pako": "^1.0.11",
     "prop-types": "^15.7.2",
     "querystring": "^0.2.0",
@@ -70,7 +71,7 @@
     "react-linkify": "^0.2.2",
     "react-motion": "^0.5.2",
     "react-onclickout": "^2.0.4",
-    "react-select": "^5.1.0",
+    "react-select": "^5.8.0",
     "save-svg-as-png": "^1.4.17",
     "shallowequal": "^0.2.2",
     "update-object": "^1.0.0",
@@ -94,7 +95,6 @@
     "@types/react-color": "^2.17.6",
     "@types/react-datepicker": "^1.8.0",
     "@types/react-dropzone": "^5.1.0",
-    "@types/react-select": "^3.0.27",
     "@types/uuid": "^3.4.10",
     "build-library": "github:mWater/build-library",
     "chai": "~2.0.0",

package/src/ColorComponent.tsx

@@ -0,0 +1,177 @@
+import React, { CSSProperties, useContext } from "react"
+import ReactDOM from "react-dom"
+import ClickOutHandler from "react-onclickout"
+import { ColorState, SketchPicker, SwatchesPicker } from "react-color"
+import { CustomColorsContext } from "./CustomColorsContext"
+
+export interface ColorComponentProps {
+  color: string | null | undefined
+  onChange: (value: string | null) => void
+  disableReset?: boolean
+}
+
+interface ColorComponentState {
+  open: boolean
+  advanced: boolean
+}
+
+// Simple color well with popup
+export default class ColorComponent extends React.Component<ColorComponentProps, ColorComponentState> {
+  constructor(props: ColorComponentProps) {
+    super(props)
+    this.state = { open: false, advanced: false }
+  }
+
+  handleClick = () => {
+    return this.setState({ open: !this.state.open, advanced: false })
+  }
+
+  handleColor = (color: ColorState) => {
+    return this.props.onChange(color.hex)
+  }
+
+  handleReset = () => {
+    this.setState({ open: false })
+    return this.props.onChange(null)
+  }
+
+  handleTransparent = () => {
+    this.setState({ open: false })
+    return this.props.onChange("transparent")
+  }
+
+  handleAdvanced = () => {
+    return this.setState({ advanced: !this.state.advanced })
+  }
+
+  renderPopup() {
+    if (!this.state.open || !this.colorWellRef) return null
+
+    const rect = this.colorWellRef.getBoundingClientRect()
+
+    const popupPosition: CSSProperties = {
+      position: "fixed",
+      top: `${rect.bottom + window.scrollY}px`,
+      left: `${rect.left + window.scrollX}px`,
+      zIndex: 1070,
+      backgroundColor: "white",
+      border: "solid 1px #DDD",
+      borderRadius: 3
+    }
+
+    return ReactDOM.createPortal(
+      <ClickOutHandler onClickOut={() => this.setState({ open: false })}>
+        <div style={popupPosition}>
+          {!this.props.disableReset && (
+            <button type="button" className="btn btn-link btn-sm" onClick={this.handleReset}>
+              <i className="fa fa-undo" />
+              {" Reset Color"}
+            </button>
+          )}
+          <button type="button" className="btn btn-link btn-sm" onClick={this.handleAdvanced}>
+            {this.state.advanced ? "Basic" : "Advanced"}
+          </button>
+
+          <CustomColors
+            color={this.props.color}
+            onChange={this.props.onChange}
+          />
+          {this.state.advanced ? (
+            <SketchPicker
+              color={this.props.color || undefined}
+              disableAlpha={true}
+              onChangeComplete={this.handleColor}
+            />
+          ) : (
+            <SwatchesPicker
+              color={this.props.color || undefined}
+              onChangeComplete={this.handleColor}
+            />
+          )}
+        </div>
+      </ClickOutHandler>,
+      document.body
+    )
+  }
+
+  colorWellRef: HTMLDivElement | null = null
+
+  render() {
+    const style: CSSProperties = {
+      height: 20,
+      width: 20,
+      border: "solid 2px #888",
+      borderRadius: 4,
+      backgroundColor: this.props.color || undefined,
+      cursor: "pointer",
+      display: "inline-block"
+    }
+
+    if (!this.props.color) {
+      // http://lea.verou.me/css3patterns/#diagonal-stripes
+      style.backgroundColor = "#AAA"
+      style.backgroundImage =
+        "repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,.7) 2px, rgba(255,255,255,.7) 4px)"
+    }
+
+    return (
+      <div style={{ position: "relative", display: "inline-block" }}>
+        <div
+          style={style}
+          onClick={this.handleClick}
+          ref={ref => this.colorWellRef = ref}
+        />
+        {this.renderPopup()}
+      </div>
+    )
+  }
+}
+
+/**
+ * Custom colors component for the color picker that allows the user to select from a set of custom colors
+ * that are defined in CSS variables.
+ * @param props 
+ * @returns 
+ */
+function CustomColors(props: {
+  color: string | null | undefined
+  onChange: (value: string | null) => void
+}) {
+  const customColors = useContext(CustomColorsContext)
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 42px)', gap: 8, margin: 5, marginLeft: 16 }}>
+      {customColors?.customColors.filter(color => color != null).map((color) => {
+        const isSelected = props.color === color
+
+        return (
+          <div
+            key={color}
+            title={color}
+            tabIndex={0}
+            onClick={() => props.onChange(color)}
+            style={{
+              background: color,
+              height: '24px',
+              width: '40px',
+              cursor: 'pointer',
+              position: 'relative',
+              outline: 'none',
+              marginBottom: '1px',
+              overflow: 'hidden',
+              boxShadow: isSelected ? `${color} 0 0 4px` : 'none'
+            }}
+          >
+            {isSelected && (
+              <div style={{ color: '#FFFFFF', marginLeft: '8px' }}>
+                <svg viewBox="0 0 24 24" style={{ fill: 'currentcolor', width: '24px', height: '24px' }}>
+                  <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
+                </svg>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/ColorSchemeFactory.ts

@@ -27,12 +27,18 @@ function generateSequentialSet(set: any, number: any, reversed: any) {
 }
 
 export default class ColorSchemeFactory {
-  // creates a color scheme
-  // options:
-  //   type: string (type of the color scheme)
-  //   number: int (number of colors to be generated)
-  //   reversed: true to reversed
-  static createColorScheme(options: any) {
+  /**
+   * Creates a color scheme
+   * @param options
+   * @param options.type - type of the color scheme
+   * @param options.number - number of colors to be generated
+   * @param options.reversed - true to reversed
+   */
+  static createColorScheme(options: {
+    type: string
+    number: number
+    reversed: boolean
+  }): string[] {
     switch (options.type) {
       case "schemeAccent":
         return generateCategoricalSet(brewer.schemeAccent, options.number, options.reversed)

package/src/CustomColorsContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react"
+
+export interface CustomColorsContextType {
+  customColors: (string | null)[]
+}
+
+/** Context for custom colors */
+export const CustomColorsContext = createContext<CustomColorsContextType | null>(null)

package/src/FiltersDesignerComponent.ts

@@ -1,8 +1,7 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
-import { FilterExprComponent } from "@mwater/expressions-ui"
+import { FilterExprComponent, LocaleContext } from "@mwater/expressions-ui"
 import { DataSource, Expr, ExprCleaner, Schema } from "@mwater/expressions"
 import { ExprUtils } from "@mwater/expressions"
 
@@ -20,7 +19,7 @@ export interface FiltersDesignerComponentProps {
 // Designer for filters of multiple tables. Used for maps and dashboards
 // Filters are in format mwater-expression filter expression indexed by table. e.g. { sometable: logical expression, etc. }
 export default class FiltersDesignerComponent extends React.Component<FiltersDesignerComponentProps> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   handleFilterChange = (table: any, expr: any) => {
     // Clean filter
@@ -33,7 +32,7 @@ export default class FiltersDesignerComponent extends React.Component<FiltersDes
   }
 
   renderFilterableTable = (table: any) => {
-    const name = ExprUtils.localizeString(this.props.schema.getTable(table)!.name, this.context.locale)
+    const name = ExprUtils.localizeString(this.props.schema.getTable(table)!.name, this.context)
 
     return R(
       "div",

package/src/LocaleContextInjector.tsx

@@ -1,17 +1,18 @@
 import React from "react"
-import PropTypes from "prop-types"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
-/** Adds the locale to the context */
-export default class LocaleContextInjector extends React.Component<{ locale: string }> {
-  static childContextTypes = {
-    locale: PropTypes.string
-  }
-
-  getChildContext() {
-    return { locale: this.props.locale }
-  }
+export interface LocaleContextProps {
+  locale: string
+  children: React.ReactNode
+}
 
-  render() {
-    return this.props.children
-  }
+/** Adds the locale to the context */
+const LocaleContextInjector: React.FC<LocaleContextProps> = ({ locale, children }) => {
+  return (
+    <LocaleContext.Provider value={locale}>
+      {children}
+    </LocaleContext.Provider>
+  )
 }
+
+export default LocaleContextInjector

package/src/MWaterAddRelatedFormComponent.ts

@@ -1,5 +1,4 @@
 import $ from "jquery"
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
@@ -11,6 +10,7 @@ import { ExprUtils, Schema } from "@mwater/expressions"
 import * as ui from "./UIComponents"
 import * as formUtils from "@mwater/forms/lib/formUtils" // TODO requireing this directly because of bizarre backbone issue
 import { Form, FormDesign } from "@mwater/forms"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface MWaterAddRelatedFormComponentProps {
   /** Entities table id */
@@ -115,7 +115,7 @@ class AddRelatedFormModalComponent extends React.Component<
   AddRelatedFormModalComponentProps,
   AddRelatedFormModalComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -149,7 +149,7 @@ class AddRelatedFormModalComponent extends React.Component<
 
       // Get _id, name, and description
       const items = _.map(forms, (form) => ({
-        name: ExprUtils.localizeString(form.design.name, this.context.locale),
+        name: ExprUtils.localizeString(form.design.name, this.context),
         desc: `Modified ${moment(form.modified!.on, moment.ISO_8601).format("ll")}`,
         onClick: this.props.onSelect.bind(null, "responses:" + form._id)
       }))

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -1,11 +1,11 @@
 import $ from "jquery"
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
 const R = React.createElement
 
 import querystring from "querystring"
 import { ExprUtils, Schema } from "@mwater/expressions"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface MWaterAddRelatedIndicatorComponentProps {
   table: string
@@ -30,7 +30,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
   MWaterAddRelatedIndicatorComponentProps,
   MWaterAddRelatedIndicatorComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -69,7 +69,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
         indicators,
         [
           (indicator) => (indicator.design.recommended ? 0 : 1),
-          (indicator) => ExprUtils.localizeString(indicator.design.name, this.context.locale)
+          (indicator) => ExprUtils.localizeString(indicator.design.name, this.context)
         ],
         ["asc", "asc"]
       )
@@ -112,7 +112,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
     // Filter by search
     if (this.props.filter) {
       indicators = _.filter(indicators, (indicator) =>
-        filterMatches(this.props.filter, ExprUtils.localizeString(indicator.design.name, this.context.locale))
+        filterMatches(this.props.filter, ExprUtils.localizeString(indicator.design.name, this.context))
       )
     }
 
@@ -134,8 +134,8 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
           "div",
           { style: { paddingLeft: 10 } },
           _.map(indicators, (indicator) => {
-            const name = ExprUtils.localizeString(indicator.design.name, this.context.locale)
-            const desc = ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+            const name = ExprUtils.localizeString(indicator.design.name, this.context)
+            const desc = ExprUtils.localizeString(indicator.design.desc, this.context)
 
             // If added, put special message
             if (this.props.schema.getTable(`indicator_values:${indicator._id}`)) {

package/src/MWaterCompleteTableSelectComponent.tsx

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import $ from "jquery"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import querystring from "querystring"
@@ -13,6 +12,7 @@ import { MWaterCustomTablesetListComponent } from "./MWaterCustomTablesetListCom
 import { MWaterMetricsTableListComponent } from "./MWaterMetricsTableListComponent"
 import { Form } from "@mwater/forms"
 import { MWaterAssetSystemsListComponent } from "./MWaterAssetSystemsListComponent"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 const sitesOrder: { [table: string]: number } = {
   "entities.water_point": 1,
@@ -52,7 +52,7 @@ interface MWaterCompleteTableSelectComponentProps {
 export default class MWaterCompleteTableSelectComponent extends React.Component<MWaterCompleteTableSelectComponentProps, {
   showLegacyAssets: boolean
 }> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: MWaterCompleteTableSelectComponentProps) {
     super(props)
@@ -104,8 +104,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         _.map(types, (tableId) => {
           table = this.props.schema.getTable(tableId)!
           return {
-            name: ExprUtils.localizeString(table.name, this.context.locale),
-            desc: ExprUtils.localizeString(table.desc, this.context.locale),
+            name: ExprUtils.localizeString(table.name, this.context),
+            desc: ExprUtils.localizeString(table.desc, this.context),
             onClick: this.props.onChange.bind(null, table.id)
           }
         })
@@ -159,8 +159,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(sweetSenseTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context.locale),
-          desc: ExprUtils.localizeString(table.desc, this.context.locale),
+          name: ExprUtils.localizeString(table.name, this.context),
+          desc: ExprUtils.localizeString(table.desc, this.context),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -177,7 +177,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -191,7 +191,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -208,8 +208,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
         continue
       }
       items.push({
-        name: ExprUtils.localizeString(table.name, this.context.locale),
-        desc: ExprUtils.localizeString(table.desc, this.context.locale),
+        name: ExprUtils.localizeString(table.name, this.context),
+        desc: ExprUtils.localizeString(table.desc, this.context),
         onClick: this.props.onChange.bind(null, table.id)
       })
     }
@@ -236,7 +236,7 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
       extraTables: this.props.extraTables,
       onExtraTableAdd: this.handleExtraTableAdd,
       onExtraTableRemove: this.handleExtraTableRemove,
-      locale: this.context.locale
+      locale: this.context
     })
   }
 
@@ -294,8 +294,8 @@ export default class MWaterCompleteTableSelectComponent extends React.Component<
     return R(uiComponents.OptionListComponent, {
       items: _.map(otherTables, (table) => {
         return {
-          name: ExprUtils.localizeString(table.name, this.context.locale),
-          desc: ExprUtils.localizeString(table.desc, this.context.locale),
+          name: ExprUtils.localizeString(table.name, this.context),
+          desc: ExprUtils.localizeString(table.desc, this.context),
           onClick: this.props.onChange.bind(null, table.id)
         }
       })
@@ -383,7 +383,7 @@ interface FormsListComponentState {
 
 // Searchable list of forms
 class FormsListComponent extends React.Component<FormsListComponentProps, FormsListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -424,7 +424,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       // TODO use name instead of design.name
       this.setState({
         forms: _.map(forms, (form) => {
-          let desc = ExprUtils.localizeString(form.design.description, this.context.locale) || ""
+          let desc = ExprUtils.localizeString(form.design.description, null) || ""
           if (desc) {
             desc += " - "
           }
@@ -432,7 +432,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
 
           return {
             id: form._id,
-            name: ExprUtils.localizeString(form.design.name, this.context.locale),
+            name: ExprUtils.localizeString(form.design.name, null),
             desc
           }
         })
@@ -447,7 +447,7 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -496,8 +496,8 @@ class FormsListComponent extends React.Component<FormsListComponentProps, FormsL
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -562,7 +562,7 @@ interface IndicatorsListComponentState {
 
 // Searchable list of indicators
 class IndicatorsListComponent extends React.Component<IndicatorsListComponentProps, IndicatorsListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
   addIndicatorConfirmPopup: AddIndicatorConfirmPopupComponent | null
 
   constructor(props: any) {
@@ -590,7 +590,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         [
           (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, this.context.locale)
+          (indicator: any) => ExprUtils.localizeString(indicator.design.name, this.context)
         ],
         ["asc", "asc", "asc"]
       )
@@ -598,8 +598,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       return this.setState({
         indicators: _.map(indicators, (indicator) => ({
           id: indicator._id,
-          name: ExprUtils.localizeString(indicator.design.name, this.context.locale),
-          desc: ExprUtils.localizeString(indicator.design.desc, this.context.locale)
+          name: ExprUtils.localizeString(indicator.design.name, this.context),
+          desc: ExprUtils.localizeString(indicator.design.desc, this.context)
         }))
       })
     }).fail((xhr: any) => {
@@ -612,7 +612,7 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -679,8 +679,8 @@ class IndicatorsListComponent extends React.Component<IndicatorsListComponentPro
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.handleSelect.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }
@@ -738,7 +738,7 @@ class AddIndicatorConfirmPopupComponent extends React.Component<
   AddIndicatorConfirmPopupComponentProps,
   AddIndicatorConfirmPopupComponentState
 > {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -781,8 +781,8 @@ are certain that you want to use the raw indicator table`
 
       R(uiComponents.OptionListComponent, {
         items: _.map(entityColumns, (entityColumn) => ({
-          name: ExprUtils.localizeString(entityColumn.name, this.context.locale),
-          desc: ExprUtils.localizeString(entityColumn.desc, this.context.locale),
+          name: ExprUtils.localizeString(entityColumn.name, this.context),
+          desc: ExprUtils.localizeString(entityColumn.desc, this.context),
           onClick: () => {
             // Select table
             this.props.onChange(entityColumn.join!.toTable)
@@ -845,7 +845,7 @@ interface IssuesListComponentState {
 
 // Searchable list of issue types
 class IssuesListComponent extends React.Component<IssuesListComponentProps, IssuesListComponentState> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   constructor(props: any) {
     super(props)
@@ -869,7 +869,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         [
           (issueType) => ((this.props.extraTables || []).includes("issues:" + issueType._id) ? 0 : 1),
           (issueType) => (issueType.created.by === this.props.user ? 0 : 1),
-          (issueType) => ExprUtils.localizeString(issueType.name, this.context.locale)
+          (issueType) => ExprUtils.localizeString(issueType.name, this.context)
         ],
         ["asc", "asc", "asc"]
       )
@@ -877,8 +877,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       return this.setState({
         issueTypes: _.map(issueTypes, (issueType) => ({
           id: issueType._id,
-          name: ExprUtils.localizeString(issueType.name, this.context.locale),
-          desc: ExprUtils.localizeString(issueType.desc, this.context.locale)
+          name: ExprUtils.localizeString(issueType.name, this.context),
+          desc: ExprUtils.localizeString(issueType.desc, this.context)
         }))
       })
     }).fail((xhr: any) => {
@@ -891,7 +891,7 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
       confirm(
         `Remove ${ExprUtils.localizeString(
           table.name,
-          this.context.locale
+          this.context
         )}? Any widgets that depend on it will no longer work properly.`
       )
     ) {
@@ -940,8 +940,8 @@ class IssuesListComponent extends React.Component<IssuesListComponentProps, Issu
         ? R(uiComponents.OptionListComponent, {
             items: _.map(tables, (table) => {
               return {
-                name: ExprUtils.localizeString(table.name, this.context.locale),
-                desc: ExprUtils.localizeString(table.desc, this.context.locale),
+                name: ExprUtils.localizeString(table.name, this.context),
+                desc: ExprUtils.localizeString(table.desc, this.context),
                 onClick: this.props.onChange.bind(null, table.id),
                 onRemove: this.handleTableRemove.bind(null, table)
               }