query designer context menu

packages/web/src/designer/Designer.js

@@ -37,13 +37,15 @@ export default function Designer({ value, onChange, conid, database }) {
     if (!data) return;
     const rect = e.target.getBoundingClientRect();
     var json = JSON.parse(data);
+    const { objectTypeField } = json;
+    if (objectTypeField != 'tables' && objectTypeField != 'views') return;
     json.designerId = uuidv1();
     json.left = e.clientX - rect.left;
     json.top = e.clientY - rect.top;
 
     onChange((current) => {
       const foreignKeys = _.compact([
-        ...json.foreignKeys.map((fk) => {
+        ...(json.foreignKeys || []).map((fk) => {
           const tables = (current.tables || []).filter(
             (tbl) => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
           );

packages/web/src/designer/QueryDesignColumns.js

@@ -2,6 +2,7 @@ import React from 'react';
 import DataFilterControl from '../datagrid/DataFilterControl';
 import { CheckboxField, SelectField, TextField } from '../utility/inputs';
 import TableControl, { TableColumn } from '../utility/TableControl';
+import InlineButton from '../widgets/InlineButton';
 import { findDesignerFilterType } from './designerTools';
 
 function getTableDisplayName(column, tables) {
@@ -15,15 +16,26 @@ export default function QueryDesignColumns({ value, onChange }) {
 
   const changeColumn = React.useCallback(
     (col) => {
-      const newValue = {
-        ...value,
-        columns: (value.columns || []).map((x) =>
+      onChange((current) => ({
+        ...current,
+        columns: (current.columns || []).map((x) =>
           x.designerId == col.designerId && x.columnName == col.columnName ? col : x
         ),
-      };
-      onChange(newValue);
+      }));
     },
-    [onChange, value]
+    [onChange]
+  );
+
+  const removeColumn = React.useCallback(
+    (col) => {
+      onChange((current) => ({
+        ...current,
+        columns: (current.columns || []).filter(
+          (x) => x.designerId != col.designerId || x.columnName != col.columnName
+        ),
+      }));
+    },
+    [onChange]
   );
 
   return (
@@ -124,6 +136,15 @@ export default function QueryDesignColumns({ value, onChange }) {
           />
         )}
       />
+      <TableColumn
+        fieldName="actions"
+        header=""
+        formatter={(row) => (
+          <>
+            <InlineButton onClick={() => removeColumn(row)}>Remove</InlineButton>
+          </>
+        )}
+      />
     </TableControl>
   );
 }