Row Forms in AdapTable

import {
  AdaptableButton,
  AdaptableOptions,
  DashboardButtonContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Forms in AdapTable',
  notificationsOptions:
  {
    duration: 10000
  },
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'actions',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'edit',
          },
          {
            command: 'clone',
          },
        ],
      },
      {
        columnId: 'delete',
        friendlyName: 'Delete',
        actionColumnButton: [
          {
            command: 'delete',
          },
        ],
      },
    ],
  },
  rowFormOptions: {
    // Demo uses AdapTable's built-in row management (no custom event handler).
    autoHandle: true,
    disableInlineEditing: true,
    setPrimaryKeyValue: context => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
    includeColumnInRowForm: ({adaptableColumn}) => {
      return !(
        adaptableColumn.columnTypes?.includes('actionColumn') ||
        adaptableColumn.columnId === 'id' ||
        adaptableColumn.columnId === 'actions' ||
        adaptableColumn.columnId === 'delete'
      );
    },
    rowFormTitle: ({type, rowNode}) => {
      const name = rowNode?.data?.name;
      if (type === 'rowCreated' && name) {
        return `Clone: ${name}`;
      }
      if (type === 'rowCreated') {
        return 'Create Row';
      }
      if (type === 'rowEdited' && name) {
        return `Edit: ${name}`;
      }
      return 'Edit Row';
    },
    rowFormDescription: ({type}) => {
      if (type === 'rowCreated') {
        return 'Complete the fields below, then Save to add the row to the grid.';
      }
      return 'Update the fields below, then Save to apply changes.';
    },
  },
  editOptions: {
    showSelectCellEditor: context => {
      return (
        context.column.columnId === 'language' || context.column.columnId === 'license'
      );
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Add New Row',
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.rowFormApi.displayCreateRowForm();
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'info',
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Alert', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Alert'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Alert: {
      AlertDefinitions: [
        {
          Name: 'alert-info-row-added',
          Rule: {
            ObservableExpression: 'ROW_ADDED()',
          },
          MessageType: 'Info',
          Scope: {
            All: true,
          },
          AlertProperties: {
            DisplayNotification: true,
          },
        },
        {
          Name: 'alert-info-row-removed',
          Rule: {
            ObservableExpression: 'ROW_REMOVED()',
          },
          MessageType: 'Info',
          Scope: {
            All: true,
          },
          AlertProperties: {
            DisplayNotification: true,
          },
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'Flashing_Row_Any_Change',
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
          FlashTarget: 'row',
          FlashDuration: 2000,
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'actions',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'delete',
          ],
          ColumnPinning: {
            actions: 'left',
            delete: 'right',
          },
          AutoSizeColumns: true,
        },
      ],
    },
  },
};