Merge branch 'main' of github.com:ScottLogic/finos-vuu into main

vuu-ui/packages/vuu-data/src/hooks/useVuuTables.ts

@@ -4,16 +4,11 @@ import {
   VuuTableMeta,
 } from "@finos/vuu-protocol-types";
 import { useCallback, useEffect, useState } from "react";
-// TODO remove getColumnConfig here, accept as a parameter
-import { getColumnConfig } from "./columnMetaData";
 import { useServerConnection } from "./useServerConnection";
 
 export type SchemaColumn = {
   name: string;
   serverDataType: VuuColumnDataType;
-  label?: string;
-  type?: { name: string };
-  width?: number;
 };
 
 export type TableSchema = {
@@ -28,12 +23,10 @@ const createSchemaFromTableMetadata = ({
 }: VuuTableMeta): TableSchema => {
   return {
     table,
-    columns: columns.map((col, idx) => {
-      const columnConfig = getColumnConfig(table.table, col);
-      return columnConfig
-        ? { ...columnConfig, serverDataType: dataTypes[idx] }
-        : { name: col, serverDataType: dataTypes[idx] };
-    }),
+    columns: columns.map((col, idx) => ({
+      name: col,
+      serverDataType: dataTypes[idx],
+    })),
   };
 };
 

vuu-ui/packages/vuu-datagrid/src/context-menu/build-context-menu-descriptors.ts

@@ -1,3 +1,4 @@
+import { MenuBuilder } from "@finos/vuu-popups";
 import {
   VuuAggregation,
   VuuGroupBy,
@@ -35,8 +36,10 @@ interface GridContextMenuDescriptor {
 }
 
 export const buildContextMenuDescriptors =
-  (gridModel: GridModelType) =>
-  (location: ContextMenuLocation, options: ContextMenuOptions) => {
+  (
+    gridModel: GridModelType
+  ): MenuBuilder<ContextMenuLocation, ContextMenuOptions> =>
+  (location, options) => {
     const descriptors = [];
     if (location === "header") {
       descriptors.push(...buildSortMenuItems(gridModel.sort, options));

vuu-ui/packages/vuu-datagrid/src/context-menu/useContextMenu.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-sequences */
 import { DataSource } from "@finos/vuu-data";
 import { removeColumnFromFilter } from "@finos/vuu-filters";
+import { MenuActionHandler } from "@finos/vuu-popups";
 import { AggregationType } from "../constants";
 import { GridModelDispatch } from "../grid-context";
 import { GridModelType } from "../grid-model/gridModelTypes";
@@ -36,12 +37,13 @@ export const useContextMenu = ({
   dispatchGridModelAction,
 }: ContextMenuHookProps) => {
   /** return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */
-  const handleContextMenuAction = (
-    type: string,
-    options: ContextMenuOptions
+  const handleContextMenuAction: MenuActionHandler = (
+    type,
+    options
   ): boolean => {
-    if (options.column) {
-      const { column } = options;
+    const gridOptions = options as ContextMenuOptions;
+    if (gridOptions.column) {
+      const { column } = gridOptions;
       // prettier-ignore
       switch(type){
         case "sort-asc": return dataSource.sort(GridModel.setSortColumn(gridModel, column, "A")), true;
@@ -51,7 +53,7 @@ export const useContextMenu = ({
         case "group": return dataSource.group(GridModel.addGroupColumn({}, column)), true;
         case "group-add": return dataSource.group(GridModel.addGroupColumn(gridModel, column)), true;
         case "column-hide": return dispatchGridModelAction({type, column}),true;
-        case "filter-remove-column": return handleRemoveColumnFromFilter(options, dataSource), true;
+        case "filter-remove-column": return handleRemoveColumnFromFilter(gridOptions, dataSource), true;
         case "remove-filters": return dataSource.filter(undefined, ""), true;
         case "agg-avg": return dataSource.aggregate(GridModel.setAggregation(gridModel, column, Average)), true;
         case "agg-high": return dataSource.aggregate(GridModel.setAggregation(gridModel, column, High)), true;

vuu-ui/packages/vuu-layout/src/drag-drop/BoxModel.ts

@@ -420,16 +420,22 @@ function omitDragging(component: ReactElement) {
 function measureComponentDomElement(
   component: LayoutModel
 ): [DragDropRect, HTMLElement, LayoutModel] {
-  const { id } = getProps(component);
-  const type = typeOf(component) as string;
+  const { id } = getProps(component) as { id: string };
+  if (id === undefined) {
+    throw Error("`BoxModel.measureComponentElement, component has no id");
+  }
   const el = document.getElementById(id);
   if (!el) {
-    throw Error(`No DOM for ${type} ${id}`);
+    throw Error(
+      "BoxModel.measureComponentElement,  no DOM element found for component"
+    );
   }
   // Note: height and width are not required for dropTarget identification, but
   // are used in sizing calculations on drop
-  const { top, left, right, bottom, height, width } = el.getBoundingClientRect();
+  const { top, left, right, bottom, height, width } =
+    el.getBoundingClientRect();
   let scrolling = undefined;
+  const type = typeOf(component) as string;
   if (isContainer(type)) {
     const scrollHeight = el.scrollHeight;
     if (scrollHeight > height) {

vuu-ui/packages/vuu-layout/src/drag-drop/Draggable.ts

@@ -27,10 +27,10 @@ let _dragEndCallback: DragEndCallback | null;
 
 let _dragStartX: number;
 let _dragStartY: number;
-let _dragContainer: ReactElement | null;
+let _dragContainer: ReactElement | undefined;
 let _dragState: DragState;
 let _dropTarget: DropTarget | null = null;
-let _validDropTargetPaths: string[] | null;
+let _validDropTargetPaths: string[] | undefined;
 let _dragInstructions: DragInstructions;
 let _measurements: Measurements;
 let _simpleDrag: boolean;
@@ -216,7 +216,7 @@ function dragMousemoveHandler(evt: MouseEvent) {
     _dragMoveCallback?.(newX, newY);
   }
 
-  if (_simpleDrag || !_dragContainer || !_validDropTargetPaths) {
+  if (_simpleDrag || _dragContainer === undefined) {
     return;
   }
 
@@ -277,9 +277,9 @@ function onDragEnd() {
   _dragMoveCallback = null;
   _dragEndCallback = null;
 
-  _dragContainer = null;
+  _dragContainer = undefined;
   _dropTargetRenderer.clear();
-  _validDropTargetPaths = null;
+  _validDropTargetPaths = undefined;
   window.removeEventListener("mousemove", dragMousemoveHandler, false);
   window.removeEventListener("mouseup", dragMouseupHandler, false);
 }

vuu-ui/packages/vuu-layout/src/drag-drop/DropTarget.ts

@@ -2,7 +2,12 @@ import { rect, rectTuple } from "../common-types";
 import { LayoutModel } from "../layout-reducer";
 import { getProps, typeOf } from "../utils";
 import {
-  BoxModel, getPosition, Measurements, Position, positionValues, RelativeDropPosition
+  BoxModel,
+  getPosition,
+  Measurements,
+  Position,
+  positionValues,
+  RelativeDropPosition
 } from "./BoxModel";
 import { DragDropRect, DropPos, DropPosTab } from "./dragDropTypes";
 import { DragState } from "./DragState";

vuu-ui/packages/vuu-layout/src/flexbox/flexboxTypes.ts

@@ -4,14 +4,16 @@ import {
   MutableRefObject,
   ReactElement,
   ReactNode
-} from 'react';
-import { SplitterProps } from './Splitter';
+} from "react";
+import { SplitterProps } from "./Splitter";
 
 export interface LayoutContainerProps {
   resizeable?: boolean;
 }
 
-export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLDivElement> {
+export interface FlexboxProps
+  extends LayoutContainerProps,
+    HTMLAttributes<HTMLDivElement> {
   breakPoints?: BreakPointsProp;
   children: ReactElement[];
   cols?: number;
@@ -25,6 +27,10 @@ export interface FlexboxProps extends LayoutContainerProps, HTMLAttributes<HTMLD
   splitterSize?: number;
 }
 
+export interface FlexboxLayoutProps extends FlexboxProps {
+  path: string;
+}
+
 export interface SplitterHookProps {
   children: ReactNode;
   onSplitterMoved?: (content: ContentMeta[]) => void;
@@ -33,7 +39,7 @@ export interface SplitterHookProps {
 
 export interface SplitterHookResult {
   content: ReactElement[];
-  rootRef: MutableRefObject<HTMLDivElement | undefined>;
+  rootRef: MutableRefObject<HTMLDivElement | null>;
 }
 
 export type SplitterFactory = (index: number) => ReactElement<SplitterProps>;
@@ -55,7 +61,7 @@ export type FlexSize = {
   minSize: number;
 };
 
-export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
 export type BreakPoints = BreakPoint[];
 export type BreakPointsProp = {
   [keys in BreakPoint]?: number;

vuu-ui/packages/vuu-layout/src/flexbox/useSplitterResizing.ts

@@ -32,7 +32,7 @@ export const useSplitterResizing = ({
   onSplitterMoved,
   style,
 }: SplitterHookProps): SplitterHookResult => {
-  const rootRef = useRef<HTMLDivElement>();
+  const rootRef = useRef<HTMLDivElement>(null);
   const metaRef = useRef<ContentMeta[]>();
   const contentRef = useRef<ReactElement[]>();
   const assignedKeys = useRef([]);

vuu-ui/packages/vuu-layout/src/layout-action.ts

@@ -1,20 +1,21 @@
-export type Action =
-  | 'add'
-  | 'blur'
-  | 'blur-splitter'
-  | 'drag-start'
-  | 'drag-started'
-  | 'drag-drop'
-  | 'focus'
-  | 'focus-splitter'
-  | 'initialize'
-  | 'maximize'
-  | 'minimize'
-  | 'remove'
-  | 'replace'
-  | 'restore'
-  | 'save'
-  | 'set-title'
-  | 'splitter-resize'
-  | 'switch-tab'
-  | 'tear-out'
+export const Action = {
+  ADD: 'add',
+  BLUR: 'blur',
+  BLUR_SPLITTER: 'blur-splitter',
+  DRAG_START: 'drag-start',
+  DRAG_STARTED: 'drag-started',
+  DRAG_DROP: 'drag-drop',
+  FOCUS: 'focus',
+  FOCUS_SPLITTER: 'focus-splitter',
+  INITIALIZE: 'initialize',
+  MAXIMIZE: 'maximize',
+  MINIMIZE: 'minimize',
+  REMOVE: 'remove',
+  REPLACE: 'replace',
+  RESTORE: 'restore',
+  SAVE: 'save',
+  SET_TITLE: 'set-title',
+  SPLITTER_RESIZE: 'splitter-resize',
+  SWITCH_TAB: 'switch-tab',
+  TEAR_OUT: 'tear-out'
+};

vuu-ui/packages/vuu-layout/src/layout-reducer/layoutUtils.ts

@@ -147,23 +147,25 @@ function getLayoutChildren(
     : React.isValidElement(children)
     ? [children]
     : [];
-  return isContainer(type) ? kids.map((child, i) => {
-      const childType = typeOf(child) as string;
-      const previousType = typeOf(previousChildren?.[i]);
-
-      if (!previousType || childType === previousType) {
-        const [layoutProps, children] = getChildLayoutProps(
-          childType,
-          child.props,
-          `${path}.${i}`,
-          type,
-          previousChildren?.[i]
-        );
-        return React.cloneElement(child, layoutProps, children);
-      }
-
-      return previousChildren?.[i];
-    }) : children;
+  return isContainer(type)
+    ? kids.map((child, i) => {
+        const childType = typeOf(child) as string;
+        const previousType = typeOf(previousChildren?.[i]);
+
+        if (!previousType || childType === previousType) {
+          const [layoutProps, children] = getChildLayoutProps(
+            childType,
+            child.props,
+            `${path}.${i}`,
+            type,
+            previousChildren?.[i]
+          );
+          return React.cloneElement(child, layoutProps, children);
+        }
+
+        return previousChildren?.[i];
+      })
+    : children;
 }
 
 const getStyle = (
@@ -214,7 +216,9 @@ export function layoutFromJson(
   const componentType = type.match(/^[a-z]/) ? type : ComponentRegistry[type];
 
   if (componentType === undefined) {
-    throw Error(`Unable to create component from JSON, unknown type ${type}`);
+    throw Error(
+      `layoutUtils unable to create component from JSON, unknown type ${type}`
+    );
   }
 
   if (state) {
@@ -224,6 +228,7 @@ export function layoutFromJson(
   return React.createElement(
     componentType,
     {
+      id,
       ...props,
       key: id,
     },

vuu-ui/packages/vuu-layout/src/palette/Palette.css

@@ -4,28 +4,30 @@
 }
 
 .vuuPaletteItem {
-  --vuu-icon-color: var(--salt-separable-primary-background);
+  --vuu-icon-color: var(--salt-separable-primary-borderColor);
   --vuu-icon-inset: calc(50% - 12px) auto auto -3px;
-  --vuu-icon-svg: var(--svg-grab-handle);
   --vuu-icon-height: 24px;
   --vuu-icon-width: 24px;
-  padding-left: 20px;
+  --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
 }
 
-.vuuPaletteItem[data-icon]:after {
-  --height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
-  --width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
-
+.vuuPaletteItem[data-draggable]:after {
+  height: 22px;
+  width: 6px;
   content: "";
-  background-color: var(--vuu-icon-color, black);
-  height: var(--height);
-  inset: var(--vuu-icon-inset,0 auto 0 0);
-  mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
-  -webkit-mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
   position: absolute;
-  width: var(--width);
+
+  background-image: 
+  linear-gradient(45deg, rgb(180, 183, 190) 25%, transparent 25%),
+  linear-gradient(-45deg, rgb(180, 183, 190) 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, rgb(180, 183, 190) 25%),
+  linear-gradient(-45deg, transparent 75%, rgb(180, 183, 190) 25%);
+  background-size: 4px 4px;
+  background-position: 0 0, 2px 0, 2px -2px, 0 2px;  
+
 }
 
 .vuuSimpleDraggableWrapper > .vuuPaletteItem {
   --vuu-icon-color: var(--salt-selectable-foreground);
+
 }

vuu-ui/packages/vuu-layout/src/palette/Palette.tsx

@@ -43,7 +43,7 @@ export const PaletteItem = memo(
     return (
       <ListItem
         className={cx("vuuPaletteItem", className)}
-        data-icon="grab-handle"
+        data-draggable
         {...props}
       />
     );