Editable titles, improved Visual Link handling (#1407)

* imp[rove Visual Linking support * re-enable header title editing use view title as label in Visual Link menu items highlight target linked table when link button hovered]
finos · Jun 30, 2024 · b8a7471 · b8a7471
1 parent c3c61ae
commit b8a7471
Show file tree

Hide file tree

Showing 27 changed files with 290 additions and 91 deletions.
diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts
@@ -691,7 +691,7 @@ export class ArrayDataSource
   }
 
   get title() {
-    return this.#title;
+    return this.#title ?? `${this.table.module} ${this.table.table}`;
   }
 
   set title(title: string | undefined) {

diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts
@@ -563,11 +563,13 @@ export class Viewport {
   }
 
   setLinks(links: LinkDescriptorWithLabel[]) {
-    this.links = links;
+    this.links = links.filter(
+      (link) => link.parentVpId !== this.serverViewportId
+    );
     return [
       {
         type: "vuu-links",
-        links,
+        links: this.links,
         clientViewportId: this.clientViewportId,
       },
       this.pendingLinkedParent,

diff --git a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts
@@ -235,7 +235,6 @@ export class VuuDataSource
   };
 
   unsubscribe() {
-    console.log(`unsubscribe #${this.viewport}`);
     info?.(`unsubscribe #${this.viewport}`);
     if (this.viewport) {
       this.server?.unsubscribe(this.viewport);
@@ -249,7 +248,6 @@ export class VuuDataSource
   }
 
   suspend() {
-    console.log(`suspend #${this.viewport}, current status ${this.#status}`);
     info?.(`suspend #${this.viewport}, current status ${this.#status}`);
     if (this.viewport) {
       this.#status = "suspended";
@@ -262,7 +260,6 @@ export class VuuDataSource
   }
 
   resume() {
-    console.log(`resume #${this.viewport}, current status ${this.#status}`);
     const isDisabled = this.#status.startsWith("disabl");
     const isSuspended = this.#status === "suspended";
     info?.(`resume #${this.viewport}, current status ${this.#status}`);
@@ -597,7 +594,7 @@ export class VuuDataSource
   }
 
   get title() {
-    return this.#title;
+    return this.#title ?? `${this.table.module} ${this.table.table}`;
   }
 
   set title(title: string | undefined) {

diff --git a/vuu-ui/packages/vuu-data-types/index.d.ts b/vuu-ui/packages/vuu-data-types/index.d.ts
@@ -491,6 +491,11 @@ export interface DataSource
   ) => Promise<void>;
   table?: VuuTable;
   readonly tableSchema?: TableSchema;
+  /**
+   * We allow a title because a context menu action can reference a target table, e.g. as a Visual Link target.
+   * Users can edit titles on components. If so, and this is a table component, we will display this title in
+   * the context menu rather than the underlying table name (which may not be unique within the layout)
+   */
   title?: string;
   unsubscribe: () => void;
   viewport?: string;

diff --git a/vuu-ui/packages/vuu-layout/src/layout-action.ts b/vuu-ui/packages/vuu-layout/src/layout-action.ts
@@ -15,8 +15,5 @@ export const Action = {
   REPLACE: "replace",
   RESTORE: "restore",
   SAVE: "save",
-  SET_TITLE: "set-title",
   SPLITTER_RESIZE: "splitter-resize",
-  SWITCH_TAB: "switch-tab",
-  TEAR_OUT: "tear-out",
 };
diff --git a/vuu-ui/packages/vuu-layout/src/layout-header/Header.css b/vuu-ui/packages/vuu-layout/src/layout-header/Header.css
@@ -1,9 +1,27 @@
 .vuuHeader {
   --saltButton-height: 24px;
   --saltButton-width: 24px;
+
+  padding: 0 var(--salt-spacing-100);
+
+  [data-align="end"] {
+    margin-left: auto;
+  }
+  [data-align="end"] ~ [data-align="end"] {
+    margin-left: 0;
+  }
+
+  &:hover {
+    .vuuHeader-edit {
+      visibility: visible;
+    }
+  }
 }
 
-.salt-density-high .vuuHeader {
---saltToolbarField-marginTop: 0;
+.vuuHeader-edit {
+  visibility: hidden;
 }
 
+.salt-density-high .vuuHeader {
+  --saltToolbarField-marginTop: 0;
+}
diff --git a/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx b/vuu-ui/packages/vuu-layout/src/layout-header/Header.tsx
@@ -8,14 +8,17 @@ import {
   KeyboardEvent,
   MouseEvent,
   ReactElement,
+  useCallback,
   useRef,
   useState,
 } from "react";
-import { Contribution, useViewDispatch } from "../layout-view-actions";
+import { useViewDispatch } from "../layout-view-actions";
 
 import headerCss from "./Header.css";
+import { Contribution } from "../layout-view";
 
 export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+  allowRename?: boolean;
   collapsed?: boolean;
   contributions?: Contribution[];
   expanded?: boolean;
@@ -28,6 +31,7 @@ export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
 const classBase = "vuuHeader";
 
 export const Header = ({
+  allowRename = false,
   className: classNameProp,
   contributions,
   collapsed,
@@ -52,9 +56,14 @@ export const Header = ({
   const handleClose = (evt: MouseEvent) =>
     viewDispatch?.({ type: "remove" }, evt);
 
-  const handleTitleMouseDown = () => {
+  const focusTitle = useCallback(() => {
     labelFieldRef.current?.focus();
-  };
+  }, []);
+
+  const handleClickEdit = useCallback(() => {
+    focusTitle();
+    setEditing((isEditing) => !isEditing);
+  }, [focusTitle]);
 
   const handleButtonMouseDown = (evt: MouseEvent) => {
     // do not allow drag to be initiated
@@ -65,10 +74,6 @@ export const Header = ({
 
   const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
 
-  const handleEnterEditMode = () => {
-    setEditing(true);
-  };
-
   const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {
     if (evt.key === "Enter") {
       setEditing(true);
@@ -121,15 +126,26 @@ export const Header = ({
         key="title"
         value={value}
         onChange={setValue}
-        onMouseDownCapture={handleTitleMouseDown}
-        onEnterEditMode={handleEnterEditMode}
+        onMouseDownCapture={focusTitle}
         onExitEditMode={handleExitEditMode}
         onKeyDown={handleTitleKeyDown}
         ref={labelFieldRef}
         tabIndex={0}
       />
     );
 
+  allowRename &&
+    toolbarItems.push(
+      <IconButton
+        className={`${classBase}-edit`}
+        icon="edit"
+        key="edit-button"
+        onClick={handleClickEdit}
+        onMouseDown={handleButtonMouseDown}
+        variant="secondary"
+      />
+    );
+
   closeable &&
     actionButtons.push(
       <IconButton
@@ -144,14 +160,14 @@ export const Header = ({
 
   postTitleContributedItems.length > 0 &&
     toolbarItems.push(
-      <div className="vuuTooltrayProxy" data-align="end" key="contributions">
+      <div data-align="end" key="contributions">
         {postTitleContributedItems}
       </div>
     );
 
   actionButtons.length > 0 &&
     toolbarItems.push(
-      <div className="vuuTooltrayProxy" data-align="end" key="actions">
+      <div data-align="end" key="actions">
         {actionButtons}
       </div>
     );

diff --git a/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProvider.tsx b/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProvider.tsx
@@ -18,8 +18,8 @@ import {
   type LayoutChangeReason,
   type LayoutJSON,
   type LayoutReducerAction,
-  type SaveAction,
 } from "../layout-reducer";
+import type { SaveAction } from "../layout-view";
 import { findTarget, getChildProp, getProp, getProps, typeOf } from "../utils";
 import {
   LayoutProviderContext,

diff --git a/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProviderContext.ts b/vuu-ui/packages/vuu-layout/src/layout-provider/LayoutProviderContext.ts
@@ -3,8 +3,8 @@ import {
   DragStartAction,
   LayoutReducerAction,
   QueryAction,
-  SaveAction,
 } from "../layout-reducer";
+import { SaveAction } from "../layout-view";
 
 const unconfiguredLayoutProviderDispatch: LayoutProviderDispatch = (action) =>
   console.log(

diff --git a/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutTypes.ts b/vuu-ui/packages/vuu-layout/src/layout-reducer/layoutTypes.ts
@@ -3,7 +3,6 @@ import { NamedFilter } from "@finos/vuu-filter-types";
 import { CSSProperties, ReactElement } from "react";
 import { DragDropRect, DragInstructions } from "../drag-drop";
 import { DropTarget } from "../drag-drop/DropTarget";
-import { ContributionLocation } from "../layout-view-actions";
 
 export interface WithProps {
   props?: { [key: string]: any };
@@ -70,7 +69,6 @@ export const LayoutActionType = {
   REMOVE: "remove",
   REPLACE: "replace",
   RESTORE: "restore",
-  SAVE: "save",
   SET_PROP: "set-prop",
   SET_PROPS: "set-props",
   SET_TITLE: "set-title",
@@ -190,21 +188,6 @@ export type LayoutReducerAction =
   | SplitterResizeAction
   | SwitchTabAction;
 
-export type SaveAction = {
-  type: typeof LayoutActionType.SAVE;
-};
-
-export type AddToolbarContributionViewAction = {
-  content: ReactElement;
-  location: ContributionLocation;
-  type: "add-toolbar-contribution";
-};
-
-export type RemoveToolbarContributionViewAction = {
-  location: ContributionLocation;
-  type: "remove-toolbar-contribution";
-};
-
 export type MousedownViewAction = {
   preDragActivity?: any;
   index?: number;

diff --git a/vuu-ui/packages/vuu-layout/src/layout-view-actions/useViewActionDispatcher.ts b/vuu-ui/packages/vuu-layout/src/layout-view-actions/useViewActionDispatcher.ts
@@ -10,15 +10,12 @@ import { useLayoutProviderDispatch } from "../layout-provider";
 import { DragStartAction } from "../layout-reducer";
 import { usePersistentState } from "../use-persistent-state";
 import { QueryReponse, ViewDispatch } from "./ViewContext";
-import type { ViewAction } from "../layout-view";
-
-export type ContributionLocation = "post-title" | "pre-title";
-
-export type Contribution = {
-  index?: number;
-  location?: ContributionLocation;
-  content: ReactElement;
-};
+import type {
+  Contribution,
+  ContributionLocation,
+  ViewAction,
+} from "../layout-view";
+import { useViewBroadcastChannel } from "../layout-view/useViewBroadcastChannel";
 
 export const useViewActionDispatcher = (
   id: string,
@@ -33,6 +30,7 @@ export const useViewActionDispatcher = (
     loadSessionState(id, "contributions") ?? []
   );
   const dispatchLayoutAction = useLayoutProviderDispatch();
+  const sendMessage = useViewBroadcastChannel(id, root);
   const updateContributions = useCallback(
     (location: ContributionLocation, content: ReactElement) => {
       const updatedContributions = contributions.concat([
@@ -111,7 +109,10 @@ export const useViewActionDispatcher = (
             path: action.path,
             query: action.query,
           });
-          return;
+        case "broadcast-message":
+          sendMessage(action.message);
+          break;
+
         default: {
           return undefined;
         }
@@ -124,6 +125,7 @@ export const useViewActionDispatcher = (
       handleMouseDown,
       updateContributions,
       clearContributions,
+      sendMessage,
     ]
   );
 

diff --git a/vuu-ui/packages/vuu-layout/src/layout-view/View.css b/vuu-ui/packages/vuu-layout/src/layout-view/View.css
@@ -1,7 +1,7 @@
 .vuuView {
-  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));
+  border-color: var(--vuuView-borderColor, transparent);
   border-width: var(--vuuView-borderWidth, 1px);
-  border-style: var(--vuuView-borderStyle, none);
+  border-style: var(--vuuView-borderStyle, solid);
 
   display: flex;
   flex-direction: column;
@@ -11,10 +11,15 @@
   outline: none;
   overflow: hidden;
   position: relative;
+
+  &.vuuHighlighted {
+    --vuuView-borderStyle: dashed;
+    --vuuView-borderColor: var(--salt-container-primary-borderColor);
+  }
 }
 
 .vuuView.focus-visible:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;

diff --git a/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx b/vuu-ui/packages/vuu-layout/src/layout-view/View.tsx
@@ -43,6 +43,7 @@ const View = forwardRef(function View(
 ) {
   const {
     Header = VuuHeader,
+    allowRename,
     children,
     className,
     collapsed,
@@ -160,6 +161,7 @@ const View = forwardRef(function View(
         {header ? (
           <Header
             {...headerProps}
+            allowRename={allowRename}
             collapsed={collapsed}
             contributions={contributions}
             expanded={expanded}