@adaptabletools/adaptable 16.0.0 → 16.0.1-canary.1

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/FinanceForm/FinanceForm.js

@@ -1,280 +1,633 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FinanceForm = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const CheckBox_1 = require("../../../../components/CheckBox");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
-const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
-const FormBox_1 = require("../Components/FormBox");
-const LocalDropdownButton = (props) => (React.createElement(DropdownButton_1.default, Object.assign({}, props, { width: "100%", columns: ['label'] })));
-const AlertMessage = (props) => (React.createElement(rebass_1.Box, Object.assign({ color: "var(--ab-color-error)" }, props)));
-const fdc3ColumnDefinitions = {
-    instrumentColumns: {
-        fields: [
-            { label: 'Ticker', id: 'tickerColumnId' },
-            { label: 'ISIN', id: 'isinColumnId' },
-            { label: 'CUSIP', id: 'cusipColumnId' },
-            { label: 'SEDOL', id: 'sedolColumnId' },
-            { label: 'RIC', id: 'ricColumnId' },
-            { label: 'BBG', id: 'bbgColumnId' },
-            { label: 'PERMID', id: 'permidColumnId' },
-            { label: 'FIGI', id: 'figiColumnId' },
-        ],
-        intents: ['ViewChart', 'ViewQuote', 'ViewNews', 'ViewAnalysis', 'ViewInstrument'],
-    },
-    positionColumns: {
-        fields: [{ label: 'Instrument', id: 'instrumentColumnId', required: true }],
-        intents: ['ViewChart', 'ViewNews', 'ViewAnalysis'],
-    },
-    contactColumns: {
-        fields: [
-            { label: 'Email', id: 'emailColumnId' },
-            { label: 'FDS_ID', id: 'fds_idColumnId' },
-        ],
-        intents: ['StartCall', 'StartChat', 'ViewContact'],
-    },
-    countryColumns: {
-        fields: [
-            { label: 'ISOALPHA2', id: 'isoalpha2ColumnId' },
-            { label: 'ISOALPHA3', id: 'isoalpha3ColumnId' },
-        ],
-        intents: ['ViewChart'],
-    },
-    organizationColumns: {
-        fields: [
-            { label: 'LEI', id: 'leiColumnId' },
-            { label: 'PERM ID', id: 'permidColumnId' },
-            { label: 'FDS ID', id: 'fds_idColumnId' },
-        ],
-        intents: ['ViewNews', 'ViewAnalysis'],
-    },
+/*
+
+This is no longer required since we cannot build FDC3 columns
+But keeping it like this as it was rather useful ...
+
+import { ColDef } from '@ag-grid-community/core';
+import * as React from 'react';
+import { Box, BoxProps, Flex } from 'rebass';
+import { CheckBox } from '../../../../components/CheckBox';
+import DropdownButton, { DropdownButtonProps } from '../../../../components/DropdownButton';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import HelpBlock from '../../../../components/HelpBlock';
+import Input from '../../../../components/Input';
+import SimpleButton from '../../../../components/SimpleButton';
+import {
+  AdaptableConfig,
+  AdaptableOptions,
+  ContactColumn,
+  CountryColumn,
+  FDC3Column_Depr,
+  FinancePluginOptions,
+  InstrumentColumn,
+  OrganizationColumn,
+  PositionColumn,
+} from '../../../../types';
+import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
+import { NocodeWizardFormBox } from '../Components/FormBox';
+
+const LocalDropdownButton = (props: DropdownButtonProps) => (
+  <DropdownButton {...props} width="100%" columns={['label']} />
+);
+
+const AlertMessage: React.FunctionComponent<React.PropsWithChildren<BoxProps>> = (props) => (
+  <Box color="var(--ab-color-error)" {...props} />
+);
+
+type FDC3ColumnsKey = Exclude<
+  keyof FinancePluginOptions['fdc3Columns'],
+  'customFDC3Columns' | 'customFDC3Intents'
+>;
+
+type AnyFDC3Column =
+  | InstrumentColumn
+  | PositionColumn
+  | ContactColumn
+  | CountryColumn
+  | OrganizationColumn;
+
+interface FDC3ColumnField<COLUMN_TYPE, INTENTS> {
+  fields: {
+    label: string;
+    id: keyof COLUMN_TYPE;
+    value?: string;
+    required?: boolean;
+  }[];
+  intents: INTENTS;
+}
+
+const fdc3ColumnDefinitions: {
+  instrumentColumns: FDC3ColumnField<
+    Omit<InstrumentColumn, 'intents'>,
+    InstrumentColumn['intents']
+  >;
+  positionColumns: FDC3ColumnField<Omit<PositionColumn, 'intents'>, PositionColumn['intents']>;
+  contactColumns: FDC3ColumnField<Omit<ContactColumn, 'intents'>, ContactColumn['intents']>;
+  countryColumns: FDC3ColumnField<Omit<CountryColumn, 'intents'>, CountryColumn['intents']>;
+  organizationColumns: FDC3ColumnField<
+    Omit<OrganizationColumn, 'intents'>,
+    OrganizationColumn['intents']
+  >;
+} = {
+  instrumentColumns: {
+    fields: [
+      { label: 'Ticker', id: 'tickerColumnId' },
+      { label: 'ISIN', id: 'isinColumnId' },
+      { label: 'CUSIP', id: 'cusipColumnId' },
+      { label: 'SEDOL', id: 'sedolColumnId' },
+      { label: 'RIC', id: 'ricColumnId' },
+      { label: 'BBG', id: 'bbgColumnId' },
+      { label: 'PERMID', id: 'permidColumnId' },
+      { label: 'FIGI', id: 'figiColumnId' },
+    ],
+    intents: ['ViewChart', 'ViewQuote', 'ViewNews', 'ViewAnalysis', 'ViewInstrument'],
+  },
+  positionColumns: {
+    fields: [{ label: 'Instrument', id: 'instrumentColumnId', required: true }],
+    intents: ['ViewChart', 'ViewNews', 'ViewAnalysis'],
+  },
+  contactColumns: {
+    fields: [
+      { label: 'Email', id: 'emailColumnId' },
+      { label: 'FDS_ID', id: 'fds_idColumnId' },
+    ],
+    intents: ['StartCall', 'StartChat', 'ViewContact'],
+  },
+  countryColumns: {
+    fields: [
+      { label: 'ISOALPHA2', id: 'isoalpha2ColumnId' },
+      { label: 'ISOALPHA3', id: 'isoalpha3ColumnId' },
+    ],
+    intents: ['ViewChart'],
+  },
+  organizationColumns: {
+    fields: [
+      { label: 'LEI', id: 'leiColumnId' },
+      { label: 'PERM ID', id: 'permidColumnId' },
+      { label: 'FDS ID', id: 'fds_idColumnId' },
+    ],
+    intents: ['ViewNews', 'ViewAnalysis'],
+  },
 };
-const FDC3ColumnSelector = (props) => {
-    const options = React.useMemo(() => {
-        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => props.onChange(columnOption.value) })));
-    }, [props.onChange]);
-    return (React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
-            props.label,
-            " ",
-            props.required && React.createElement(AlertMessage, { as: "span" }, "*"),
-            ' ') },
-        React.createElement(LocalDropdownButton, { items: options }, StringExtensions_1.default.Humanize(props.value) || 'Select Column')));
+
+const FDC3ColumnSelector: React.FunctionComponent<{
+  label: string;
+  id: string;
+  value?: string;
+  required?: boolean;
+  onChange: (columnId: string) => void;
+  columnOptions: { label: string; value: string }[];
+}> = (props) => {
+  const options = React.useMemo(() => {
+    return props.columnOptions.map((columnOption) => ({
+      ...columnOption,
+      onClick: () => props.onChange(columnOption.value),
+    }));
+  }, [props.onChange]);
+
+  return (
+    <FormRow
+      label={
+        <>
+          {props.label} {props.required && <AlertMessage as="span">*</AlertMessage>}{' '}
+        </>
+      }
+    >
+      <LocalDropdownButton items={options}>
+        {StringExtensions.Humanize(props.value) || 'Select Column'}
+      </LocalDropdownButton>
+    </FormRow>
+  );
 };
-const FDC3InstrumentColumnBuilder = (props) => {
-    const fields = fdc3ColumnDefinitions.instrumentColumns.fields;
-    return (React.createElement(rebass_1.Flex, null,
-        React.createElement(FormLayout_1.default, { mr: 2 }, fields.slice(0, 4).map((field) => {
-            var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
-        })),
-        React.createElement(FormLayout_1.default, null, fields.slice(4).map((field) => {
-            var _a;
-            return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, value: (_a = props.column[field.id]) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), columnOptions: props.columnOptions })));
-        })),
-        React.createElement(rebass_1.Flex, { ml: 3, flexDirection: "column" }, fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => {
-            var _a, _b;
-            return (React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = props.column.intents) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
-        }))));
+
+const FDC3InstrumentColumnBuilder: React.FunctionComponent<{
+  column: InstrumentColumn;
+  columnOptions: { label: string; value: string }[];
+  onColumnFieldChange: (fieldId: string, columnId: string) => void;
+  onIntentToggle: (intent: string) => void;
+}> = (props) => {
+  const fields = fdc3ColumnDefinitions.instrumentColumns.fields;
+  return (
+    <Flex>
+      <FormLayout mr={2}>
+        {fields.slice(0, 4).map((field) => (
+          <FDC3ColumnSelector
+            {...field}
+            key={field.id}
+            value={(props.column[field.id] as string) ?? 'Select Column'}
+            onChange={(columnId) => props.onColumnFieldChange(field.id, columnId)}
+            columnOptions={props.columnOptions}
+          />
+        ))}
+      </FormLayout>
+      <FormLayout>
+        {fields.slice(4).map((field) => (
+          <FDC3ColumnSelector
+            {...field}
+            key={field.id}
+            value={(props.column[field.id] as string) ?? 'Select Column'}
+            onChange={(columnId) => props.onColumnFieldChange(field.id, columnId)}
+            columnOptions={props.columnOptions}
+          />
+        ))}
+      </FormLayout>
+      <Flex ml={3} flexDirection="column">
+        {fdc3ColumnDefinitions.instrumentColumns.intents.map((intent) => (
+          <CheckBox
+            checked={props.column.intents?.includes?.(intent)}
+            onClick={() => props.onIntentToggle(intent)}
+            key={intent}
+          >
+            {intent}
+          </CheckBox>
+        ))}
+      </Flex>
+    </Flex>
+  );
 };
-const FDC3BaseColumnBuilder = (props) => {
-    const fields = fdc3ColumnDefinitions[props.fdc3ColumnType].fields;
-    const intents = fdc3ColumnDefinitions[props.fdc3ColumnType].intents;
-    return (React.createElement(rebass_1.Flex, null,
-        React.createElement(FormLayout_1.default, null,
-            fields.map((field) => {
-                var _a, _b;
-                return (React.createElement(FDC3ColumnSelector, Object.assign({}, field, { key: field.id, columnOptions: props.columnOptions, onChange: (columnId) => props.onColumnFieldChange(field.id, columnId), value: (_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a[field.id]) !== null && _b !== void 0 ? _b : '' })));
-            }),
-            React.createElement(FormLayout_1.FormRow, { label: "" },
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, intents.map((intent) => {
-                    var _a, _b;
-                    return (React.createElement(CheckBox_1.CheckBox, { checked: ((_b = (_a = props.column) === null || _a === void 0 ? void 0 : _a.intents) !== null && _b !== void 0 ? _b : []).includes(intent), onClick: () => props.onIntentToggle(intent), key: intent }, intent));
-                }))))));
+
+const FDC3BaseColumnBuilder: React.FunctionComponent<{
+  fdc3ColumnType: FDC3ColumnsKey;
+  columnOptions: { label: string; value: string }[];
+  column: AnyFDC3Column;
+  onColumnFieldChange: (fieldId: string, columnId?: string) => void;
+  onIntentToggle: (intent: string) => void;
+}> = (props) => {
+  const fields = fdc3ColumnDefinitions[props.fdc3ColumnType].fields;
+  const intents = fdc3ColumnDefinitions[props.fdc3ColumnType].intents;
+  return (
+    <Flex>
+      <FormLayout>
+        {fields.map((field) => (
+          <FDC3ColumnSelector
+            {...field}
+            key={field.id}
+            columnOptions={props.columnOptions}
+            onChange={(columnId) => props.onColumnFieldChange(field.id, columnId)}
+            value={(props.column as any)?.[field.id] ?? ''}
+          />
+        ))}
+        <FormRow label="">
+          <Flex flexDirection="column">
+            {intents.map((intent: string) => (
+              <CheckBox
+                checked={((props.column?.intents as string[]) ?? []).includes(intent)}
+                onClick={() => props.onIntentToggle(intent)}
+                key={intent}
+              >
+                {intent}
+              </CheckBox>
+            ))}
+          </Flex>
+        </FormRow>
+      </FormLayout>
+    </Flex>
+  );
 };
-const FDC3ColumnBuilder = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const handleColumnFieldChange = React.useCallback((fieldId, columnId) => {
-        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { [fieldId]: columnId }));
-    }, [props.fdc3Column, props.onChange]);
-    const handleIntentToggle = React.useCallback((intent) => {
-        var _a;
-        const newFDC3Column = Object.assign({}, props.fdc3Column);
-        newFDC3Column.intents = (_a = newFDC3Column.intents) !== null && _a !== void 0 ? _a : [];
-        if (newFDC3Column.intents.includes(intent)) {
-            newFDC3Column.intents = newFDC3Column.intents.filter((i) => i !== intent);
-        }
-        else {
-            newFDC3Column.intents.push(intent);
-        }
-        props.onChange(newFDC3Column);
-    }, [props.fdc3Column]);
-    const columnOptions = React.useMemo(() => {
-        return props.columnOptions.map((columnOption) => (Object.assign(Object.assign({}, columnOption), { onClick: () => {
-                props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { columnId: columnOption.value }));
-            } })));
-    }, [props.fdc3Column]);
-    const handleNameColumnIdChange = React.useCallback((event) => {
-        var _a;
-        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { nameColumnId: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
-    }, [props.fdc3Column]);
-    const handleShowBroadcastToggle = React.useCallback(() => {
-        var _a;
-        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { showBroadcastContextMenu: !((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.showBroadcastContextMenu) }));
-    }, [props.fdc3Column]);
-    const handleBroadcastLabelChange = React.useCallback((event) => {
-        var _a;
-        props.onChange(Object.assign(Object.assign({}, props.fdc3Column), { broadcastContextMenuLabel: (_a = event.target.value) !== null && _a !== void 0 ? _a : '' }));
-    }, [props.fdc3Column]);
-    return (React.createElement(FormBox_1.NocodeWizardFormBox, null,
-        React.createElement(rebass_1.Flex, { flexWrap: "wrap" },
-            React.createElement(FormLayout_1.default, { mr: 3, mb: 3 },
-                props.beforeContent,
-                React.createElement(FormLayout_1.FormRow, { label: React.createElement(React.Fragment, null,
-                        "Column ",
-                        React.createElement(AlertMessage, { as: "span" }, "*"),
-                        ' ') },
-                    React.createElement(LocalDropdownButton, { disabled: props.disabled, items: columnOptions }, (_b = (_a = columnOptions.find((item) => { var _a; return item.value === ((_a = props.fdc3Column) === null || _a === void 0 ? void 0 : _a.columnId); })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')),
-                React.createElement(FormLayout_1.FormRow, { label: "FDC3 Name" },
-                    React.createElement(Input_1.default, { disabled: props.disabled, onChange: handleNameColumnIdChange, value: (_d = (_c = props.fdc3Column) === null || _c === void 0 ? void 0 : _c.nameColumnId) !== null && _d !== void 0 ? _d : '' })),
-                React.createElement(FormLayout_1.FormRow, { label: "" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: props.disabled, checked: Boolean((_e = props.fdc3Column) === null || _e === void 0 ? void 0 : _e.showBroadcastContextMenu), onChange: handleShowBroadcastToggle },
-                        "Show Broadcast ",
-                        React.createElement("br", null),
-                        " Context Menu")),
-                React.createElement(FormLayout_1.FormRow, { label: "Broadcast Label" },
-                    React.createElement(Input_1.default, { disabled: props.disabled || !Boolean((_f = props.fdc3Column) === null || _f === void 0 ? void 0 : _f.showBroadcastContextMenu), onChange: handleBroadcastLabelChange, value: typeof ((_g = props.fdc3Column) === null || _g === void 0 ? void 0 : _g.broadcastContextMenuLabel) === 'string'
-                            ? (_h = props.fdc3Column) === null || _h === void 0 ? void 0 : _h.broadcastContextMenuLabel
-                            : '' }))),
-            React.createElement(rebass_1.Box, { flex: 1 }, props.fdc3ColumnType === 'instrumentColumns' ? (React.createElement(FDC3InstrumentColumnBuilder, { onIntentToggle: handleIntentToggle, onColumnFieldChange: (...args) => handleColumnFieldChange(...args), column: props.fdc3Column, columnOptions: props.columnOptions })) : (props.fdc3ColumnType && (React.createElement(FDC3BaseColumnBuilder, { onColumnFieldChange: (...args) => handleColumnFieldChange(...args), onIntentToggle: handleIntentToggle, column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, columnOptions: props.columnOptions }))))),
-        props.footer));
+
+const FDC3ColumnBuilder: React.FunctionComponent<{
+  columnOptions: { label: string; value: string }[];
+  fdc3Column: FDC3Column_Depr;
+  fdc3ColumnType?: FDC3ColumnsKey;
+  onChange: (fdc3Column: FDC3Column_Depr) => void;
+  beforeContent?: React.ReactElement;
+  disabled?: boolean;
+  footer: React.ReactElement;
+}> = (props) => {
+  const handleColumnFieldChange = React.useCallback(
+    (fieldId: string, columnId?: string) => {
+      props.onChange({
+        ...props.fdc3Column,
+        [fieldId]: columnId,
+      });
+    },
+    [props.fdc3Column, props.onChange]
+  );
+
+  const handleIntentToggle = React.useCallback(
+    (intent: string) => {
+      const newFDC3Column = { ...props.fdc3Column };
+      newFDC3Column.intents = newFDC3Column.intents ?? [];
+      if ((newFDC3Column.intents as string[]).includes(intent)) {
+        (newFDC3Column.intents as string[]) = (newFDC3Column.intents as string[]).filter(
+          (i: string) => i !== intent
+        );
+      } else {
+        (newFDC3Column.intents as string[]).push(intent);
+      }
+      props.onChange(newFDC3Column);
+    },
+    [props.fdc3Column]
+  );
+
+  const columnOptions = React.useMemo(() => {
+    return props.columnOptions.map((columnOption) => ({
+      ...columnOption,
+      onClick: () => {
+        props.onChange({
+          ...props.fdc3Column,
+          columnId: columnOption.value,
+        });
+      },
+    }));
+  }, [props.fdc3Column]);
+
+  const handleNameColumnIdChange = React.useCallback(
+    (event: any) => {
+      props.onChange({
+        ...props.fdc3Column,
+        nameColumnId: event.target.value ?? '',
+      });
+    },
+    [props.fdc3Column]
+  );
+
+  const handleShowBroadcastToggle = React.useCallback(() => {
+    props.onChange({
+      ...props.fdc3Column,
+      showBroadcastContextMenu: !props.fdc3Column?.showBroadcastContextMenu,
+    });
+  }, [props.fdc3Column]);
+
+  const handleBroadcastLabelChange = React.useCallback(
+    (event: any) => {
+      props.onChange({
+        ...props.fdc3Column,
+        broadcastContextMenuLabel: event.target.value ?? '',
+      });
+    },
+    [props.fdc3Column]
+  );
+
+  return (
+    <NocodeWizardFormBox>
+      <Flex flexWrap="wrap">
+        <FormLayout mr={3} mb={3}>
+          {props.beforeContent}
+          <FormRow
+            label={
+              <>
+                Column <AlertMessage as="span">*</AlertMessage>{' '}
+              </>
+            }
+          >
+            <LocalDropdownButton disabled={props.disabled} items={columnOptions}>
+              {columnOptions.find((item) => item.value === props.fdc3Column?.columnId)?.label ??
+                'Select Column'}
+            </LocalDropdownButton>
+          </FormRow>
+          <FormRow label="FDC3 Name">
+            <Input
+              disabled={props.disabled}
+              onChange={handleNameColumnIdChange}
+              value={props.fdc3Column?.nameColumnId ?? ''}
+            />
+          </FormRow>
+
+          <FormRow label="">
+            <CheckBox
+              disabled={props.disabled}
+              checked={Boolean(props.fdc3Column?.showBroadcastContextMenu)}
+              onChange={handleShowBroadcastToggle}
+            >
+              Show Broadcast <br /> Context Menu
+            </CheckBox>
+          </FormRow>
+
+          <FormRow label="Broadcast Label">
+            <Input
+              disabled={props.disabled || !Boolean(props.fdc3Column?.showBroadcastContextMenu)}
+              onChange={handleBroadcastLabelChange}
+              value={
+                typeof props.fdc3Column?.broadcastContextMenuLabel === 'string'
+                  ? props.fdc3Column?.broadcastContextMenuLabel
+                  : ''
+              }
+            />
+          </FormRow>
+        </FormLayout>
+
+        <Box flex={1}>
+          {props.fdc3ColumnType === 'instrumentColumns' ? (
+            <FDC3InstrumentColumnBuilder
+              onIntentToggle={handleIntentToggle}
+              onColumnFieldChange={(...args) => handleColumnFieldChange(...args)}
+              column={props.fdc3Column as InstrumentColumn}
+              columnOptions={props.columnOptions}
+            />
+          ) : (
+            props.fdc3ColumnType && (
+              <FDC3BaseColumnBuilder
+                onColumnFieldChange={(...args) => handleColumnFieldChange(...args)}
+                onIntentToggle={handleIntentToggle}
+                column={props.fdc3Column}
+                fdc3ColumnType={props.fdc3ColumnType}
+                columnOptions={props.columnOptions}
+              />
+            )
+          )}
+        </Box>
+      </Flex>
+      {props.footer}
+    </NocodeWizardFormBox>
+  );
 };
-const FDC3ColumnEditor = (props) => {
-    return (React.createElement(FDC3ColumnBuilder, { columnOptions: props.columnOptions, fdc3Column: props.fdc3Column, fdc3ColumnType: props.fdc3ColumnType, onChange: props.onChange, footer: props.footer }));
+
+const FDC3ColumnEditor: React.FunctionComponent<{
+  onChange: (fdc3Column: AnyFDC3Column) => void;
+  columnOptions: { label: string; value: string }[];
+  fdc3Column: AnyFDC3Column;
+  fdc3ColumnType: FDC3ColumnsKey;
+  footer: React.ReactElement;
+}> = (props) => {
+  return (
+    <FDC3ColumnBuilder
+      columnOptions={props.columnOptions}
+      fdc3Column={props.fdc3Column}
+      fdc3ColumnType={props.fdc3ColumnType}
+      onChange={props.onChange}
+      footer={props.footer}
+    />
+  );
 };
-const FDC3ColumnCreator = (props) => {
-    var _a, _b;
-    const [fdc3Column, setFDC3Column] = React.useState();
-    const [fdc3ColumnType, setFDC3ColumnType] = React.useState();
-    const handleOnNew = React.useCallback(() => {
-        props.onNew(fdc3ColumnType, fdc3Column);
-        setFDC3Column(null);
-        setFDC3ColumnType(null);
-    }, [fdc3Column]);
-    const fdc3ColumnOptions = React.useMemo(() => {
-        return [
-            {
-                label: 'Instrument',
-                columnField: 'instrumentColumns',
-            },
-            {
-                label: 'Position',
-                columnField: 'positionColumns',
-            },
-            {
-                label: 'Contact',
-                columnField: 'contactColumns',
-            },
-            {
-                label: 'Country',
-                columnField: 'countryColumns',
-            },
-            {
-                label: 'Organization',
-                columnField: 'organizationColumns',
-            },
-        ].map((item) => (Object.assign(Object.assign({}, item), { onClick: () => {
-                setFDC3ColumnType(item.columnField);
-                setFDC3Column({ columnId: '' });
-            } })));
+
+const FDC3ColumnCreator: React.FunctionComponent<{
+  onNew: (fdc3ColumnType: FDC3ColumnsKey, fdc3Column: FDC3Column_Depr) => void;
+  columnOptions: { label: string; value: string }[];
+}> = (props) => {
+  const [fdc3Column, setFDC3Column] = React.useState<AnyFDC3Column>();
+  const [fdc3ColumnType, setFDC3ColumnType] = React.useState<FDC3ColumnsKey>();
+
+  const handleOnNew = React.useCallback(() => {
+    props.onNew(fdc3ColumnType, fdc3Column);
+    setFDC3Column(null);
+    setFDC3ColumnType(null);
+  }, [fdc3Column]);
+
+  const fdc3ColumnOptions: { label: string; columnField: FDC3ColumnsKey; onClick: () => void }[] =
+    React.useMemo(() => {
+      return [
+        {
+          label: 'Instrument',
+          columnField: 'instrumentColumns',
+        },
+        {
+          label: 'Position',
+          columnField: 'positionColumns',
+        },
+        {
+          label: 'Contact',
+          columnField: 'contactColumns',
+        },
+        {
+          label: 'Country',
+          columnField: 'countryColumns',
+        },
+        {
+          label: 'Organization',
+          columnField: 'organizationColumns',
+        },
+      ].map((item: { label: string; columnField: FDC3ColumnsKey }) => ({
+        ...item,
+        onClick: () => {
+          setFDC3ColumnType(item.columnField);
+          setFDC3Column({ columnId: '' });
+        },
+      }));
     }, []);
-    const typeSelector = (React.createElement(FormLayout_1.FormRow, { label: "FDC3 Type" },
-        React.createElement(LocalDropdownButton, { items: fdc3ColumnOptions }, (_b = (_a = fdc3ColumnOptions.find((item) => item.columnField === fdc3ColumnType)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : 'Select Column')));
-    const fieldsDisabled = !fdc3ColumnType;
-    const errors = [];
-    if (fdc3Column && !fdc3Column.columnId) {
-        errors.push('Column is required.');
-    }
-    if (fdc3Column) {
-        const fields = fdc3ColumnDefinitions[fdc3ColumnType].fields;
-        fields.forEach((field) => {
-            if (field.required && !fdc3Column[field.id]) {
-                errors.push(`${field.label} is required.`);
-            }
-        });
-    }
-    return (React.createElement(FDC3ColumnBuilder, { disabled: fieldsDisabled, columnOptions: props.columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (newFDC3Column) => setFDC3Column(newFDC3Column), beforeContent: typeSelector, footer: React.createElement(rebass_1.Flex, null,
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 }, errors.slice(0, 1).map((error) => (React.createElement(AlertMessage, { key: error, ml: 2 }, error)))),
-            React.createElement(SimpleButton_1.default, { disabled: fieldsDisabled || !fdc3Column.columnId, onClick: handleOnNew, icon: "plus", variant: "raised" }, "Add FDC3 Column")) }));
+
+  const typeSelector = (
+    <FormRow label="FDC3 Type">
+      <LocalDropdownButton items={fdc3ColumnOptions}>
+        {fdc3ColumnOptions.find((item) => item.columnField === fdc3ColumnType)?.label ??
+          'Select Column'}
+      </LocalDropdownButton>
+    </FormRow>
+  );
+
+  const fieldsDisabled = !fdc3ColumnType;
+
+  const errors: string[] = [];
+  if (fdc3Column && !fdc3Column.columnId) {
+    errors.push('Column is required.');
+  }
+  if (fdc3Column) {
+    const fields = fdc3ColumnDefinitions[fdc3ColumnType].fields;
+    fields.forEach((field) => {
+      if (field.required && !(fdc3Column as any)[field.id]) {
+        errors.push(`${field.label} is required.`);
+      }
+    });
+  }
+
+  return (
+    <FDC3ColumnBuilder
+      disabled={fieldsDisabled}
+      columnOptions={props.columnOptions}
+      fdc3Column={fdc3Column}
+      fdc3ColumnType={fdc3ColumnType}
+      onChange={(newFDC3Column) => setFDC3Column(newFDC3Column)}
+      beforeContent={typeSelector}
+      footer={
+        <Flex>
+          <Box flex={1} />
+          <Flex alignItems="center" mr={3}>
+            {errors.slice(0, 1).map((error) => (
+              <AlertMessage key={error} ml={2}>
+                {error}
+              </AlertMessage>
+            ))}
+          </Flex>
+
+          <SimpleButton
+            disabled={fieldsDisabled || !fdc3Column.columnId}
+            onClick={handleOnNew}
+            icon="plus"
+            variant="raised"
+          >
+            Add FDC3 Column
+          </SimpleButton>
+        </Flex>
+      }
+    />
+  );
 };
-const FinanceFormSectionTitle = (props) => (React.createElement(rebass_1.Box, Object.assign({}, props, { mb: 2 }),
-    React.createElement(HelpBlock_1.default, null, props.children)));
-const FinanceForm = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const columnOptions = (_c = (_b = (_a = props.adaptableConfig.gridOptions) === null || _a === void 0 ? void 0 : _a.columnDefs) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => {
-        var _a;
-        return ({
-            label: StringExtensions_1.default.Humanize((_a = item.headerName) !== null && _a !== void 0 ? _a : item.field),
-            value: item.field,
-        });
+
+const FinanceFormSectionTitle: React.FunctionComponent<React.PropsWithChildren<BoxProps>> = (
+  props
+) => (
+  <Box {...props} mb={2}>
+    <HelpBlock>{props.children}</HelpBlock>
+  </Box>
+);
+
+export interface FinanceFormProps {
+  adaptableConfig: AdaptableConfig;
+  onChangedAdaptableConfig: (adaptableConfig: AdaptableConfig) => void;
+}
+
+export const FinanceForm: React.FunctionComponent<React.PropsWithChildren<FinanceFormProps>> = (
+  props
+) => {
+  const columnOptions = props.adaptableConfig.gridOptions?.columnDefs?.map?.((item: ColDef) => ({
+    label: StringExtensions.Humanize(item.headerName ?? item.field),
+    value: item.field,
+  }));
+
+  const financePlugin = props.adaptableConfig.adaptableOptions?.plugins?.find(
+    (item) => item.pluginId === 'finance'
+  );
+  const financePluginOptions = (financePlugin?.options ?? {}) as FinancePluginOptions;
+  const fdc3Columns = financePluginOptions?.fdc3Columns ?? {};
+
+  const handleSetFdc3Columns = (key: FDC3ColumnsKey, newFDC3Columns: any) => {
+    // Unfurtunatly finance plugin options need to be mutated.
+    // It is the only was without instanciating the plugin again.
+    // But that would mean to inport the finance plugin inside the nocode plugin.
+    financePluginOptions.fdc3Columns = financePluginOptions.fdc3Columns ?? {};
+    financePluginOptions.fdc3Columns[key] = newFDC3Columns;
+
+    // on change is called with a new array of plugins so the component refreshes.
+    props.onChangedAdaptableConfig({
+      ...props.adaptableConfig,
+      adaptableOptions: {
+        ...props.adaptableConfig.adaptableOptions,
+        plugins: [...props.adaptableConfig.adaptableOptions.plugins],
+      },
     });
-    const financePlugin = (_e = (_d = props.adaptableConfig.adaptableOptions) === null || _d === void 0 ? void 0 : _d.plugins) === null || _e === void 0 ? void 0 : _e.find((item) => item.pluginId === 'finance');
-    const financePluginOptions = ((_f = financePlugin === null || financePlugin === void 0 ? void 0 : financePlugin.options) !== null && _f !== void 0 ? _f : {});
-    const fdc3Columns = (_g = financePluginOptions === null || financePluginOptions === void 0 ? void 0 : financePluginOptions.fdc3Columns) !== null && _g !== void 0 ? _g : {};
-    const handleSetFdc3Columns = (key, newFDC3Columns) => {
-        var _a;
-        // Unfurtunatly finance plugin options need to be mutated.
-        // It is the only was without instanciating the plugin again.
-        // But that would mean to inport the finance plugin inside the nocode plugin.
-        financePluginOptions.fdc3Columns = (_a = financePluginOptions.fdc3Columns) !== null && _a !== void 0 ? _a : {};
-        financePluginOptions.fdc3Columns[key] = newFDC3Columns;
-        // on change is called with a new array of plugins so the component refreshes.
-        props.onChangedAdaptableConfig(Object.assign(Object.assign({}, props.adaptableConfig), { adaptableOptions: Object.assign(Object.assign({}, props.adaptableConfig.adaptableOptions), { plugins: [...props.adaptableConfig.adaptableOptions.plugins] }) }));
-    };
-    const renderEditor = (fdc3ColumnType, fdc3ColumnsItems) => {
-        return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (React.createElement(rebass_1.Box, { key: currentFDCColumnId, mb: 3 },
-            React.createElement(FDC3ColumnEditor, { columnOptions: columnOptions, fdc3Column: fdc3Column, fdc3ColumnType: fdc3ColumnType, onChange: (editedFDC3Column) => {
-                    const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
-                        if (index === currentFDCColumnId) {
-                            return editedFDC3Column;
-                        }
-                        return fdc3Column;
-                    });
-                    handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
-                }, footer: React.createElement(rebass_1.Flex, null,
-                    React.createElement(rebass_1.Box, { flex: 1 }),
-                    React.createElement(SimpleButton_1.default, { onClick: () => {
-                            const newFDC3Columns = fdc3ColumnsItems.filter((_, index) => index !== currentFDCColumnId);
-                            handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
-                        }, tone: "error", variant: "raised", icon: "delete" }, "Delete")) }))));
-    };
-    return (React.createElement(rebass_1.Box, { p: 2, className: "ab-FinanceForm" },
-        React.createElement(rebass_1.Box, { mb: 3 },
-            React.createElement(HelpBlock_1.default, { mb: 3 }, "Create FDC3 Column"),
-            React.createElement(FDC3ColumnCreator, { columnOptions: columnOptions, onNew: (type, fdc3Column) => {
-                    var _a;
-                    handleSetFdc3Columns(type, [...((_a = fdc3Columns[type]) !== null && _a !== void 0 ? _a : []), fdc3Column]);
-                } })),
-        Boolean((_h = fdc3Columns.instrumentColumns) === null || _h === void 0 ? void 0 : _h.length) && (React.createElement(rebass_1.Box, null,
-            React.createElement(FinanceFormSectionTitle, null, "Instrument Columns"),
-            renderEditor('instrumentColumns', fdc3Columns.instrumentColumns))),
-        Boolean((_j = fdc3Columns.positionColumns) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement(rebass_1.Box, null,
-            React.createElement(FinanceFormSectionTitle, null, "Position Columns"),
-            renderEditor('positionColumns', fdc3Columns.positionColumns))),
-        Boolean((_k = fdc3Columns.contactColumns) === null || _k === void 0 ? void 0 : _k.length) && (React.createElement(rebass_1.Box, null,
-            React.createElement(FinanceFormSectionTitle, null, "Contact Columns"),
-            renderEditor('contactColumns', fdc3Columns.contactColumns))),
-        Boolean((_l = fdc3Columns.countryColumns) === null || _l === void 0 ? void 0 : _l.length) && (React.createElement(rebass_1.Box, null,
-            React.createElement(FinanceFormSectionTitle, null, "Country Columns"),
-            renderEditor('countryColumns', fdc3Columns.countryColumns))),
-        Boolean((_m = fdc3Columns.organizationColumns) === null || _m === void 0 ? void 0 : _m.length) && (React.createElement(rebass_1.Box, null,
-            React.createElement(FinanceFormSectionTitle, null, "Organization Columns"),
-            renderEditor('organizationColumns', fdc3Columns.organizationColumns)))));
+  };
+
+  const renderEditor = (fdc3ColumnType: FDC3ColumnsKey, fdc3ColumnsItems: AnyFDC3Column[]) => {
+    return fdc3ColumnsItems.map((fdc3Column, currentFDCColumnId) => (
+      <Box key={currentFDCColumnId} mb={3}>
+        <FDC3ColumnEditor
+          columnOptions={columnOptions}
+          fdc3Column={fdc3Column}
+          fdc3ColumnType={fdc3ColumnType}
+          onChange={(editedFDC3Column) => {
+            const newFDC3Columns = fdc3ColumnsItems.map((fdc3Column, index) => {
+              if (index === currentFDCColumnId) {
+                return editedFDC3Column;
+              }
+              return fdc3Column;
+            });
+
+            handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+          }}
+          footer={
+            <Flex>
+              <Box flex={1} />
+              <SimpleButton
+                onClick={() => {
+                  const newFDC3Columns = fdc3ColumnsItems.filter(
+                    (_, index) => index !== currentFDCColumnId
+                  );
+                  handleSetFdc3Columns(fdc3ColumnType, newFDC3Columns);
+                }}
+                tone="error"
+                variant="raised"
+                icon="delete"
+              >
+                Delete
+              </SimpleButton>
+            </Flex>
+          }
+        />
+      </Box>
+    ));
+  };
+
+  return (
+    <Box p={2} className="ab-FinanceForm">
+      <Box mb={3}>
+        <HelpBlock mb={3}>Create FDC3 Column</HelpBlock>
+        <FDC3ColumnCreator
+          columnOptions={columnOptions}
+          onNew={(type, fdc3Column) => {
+            handleSetFdc3Columns(type, [...(fdc3Columns[type] ?? []), fdc3Column]);
+          }}
+        />
+      </Box>
+
+      {Boolean(fdc3Columns.instrumentColumns?.length) && (
+        <Box>
+          <FinanceFormSectionTitle>Instrument Columns</FinanceFormSectionTitle>
+          {renderEditor('instrumentColumns', fdc3Columns.instrumentColumns)}
+        </Box>
+      )}
+
+      {Boolean(fdc3Columns.positionColumns?.length) && (
+        <Box>
+          <FinanceFormSectionTitle>Position Columns</FinanceFormSectionTitle>
+          {renderEditor('positionColumns', fdc3Columns.positionColumns)}
+        </Box>
+      )}
+
+      {Boolean(fdc3Columns.contactColumns?.length) && (
+        <Box>
+          <FinanceFormSectionTitle>Contact Columns</FinanceFormSectionTitle>
+          {renderEditor('contactColumns', fdc3Columns.contactColumns)}
+        </Box>
+      )}
+
+      {Boolean(fdc3Columns.countryColumns?.length) && (
+        <Box>
+          <FinanceFormSectionTitle>Country Columns</FinanceFormSectionTitle>
+          {renderEditor('countryColumns', fdc3Columns.countryColumns)}
+        </Box>
+      )}
+
+      {Boolean(fdc3Columns.organizationColumns?.length) && (
+        <Box>
+          <FinanceFormSectionTitle>Organization Columns</FinanceFormSectionTitle>
+          {renderEditor('organizationColumns', fdc3Columns.organizationColumns)}
+        </Box>
+      )}
+    </Box>
+  );
 };
-exports.FinanceForm = FinanceForm;
+
+
+*/