-
- {children}
-
- {statusIcon}
-
-
- )
-}
\ No newline at end of file
+ return (
+ <>
+ Status: {connectionStatus.toUpperCase()}
-
+ {statusIcon}
+
+
+ );
+};
diff --git a/vuu-ui/packages/vuu-shell/src/density-switch/DensitySwitch.tsx b/vuu-ui/packages/vuu-shell/src/density-switch/DensitySwitch.tsx
deleted file mode 100644
index 03cd00263..000000000
--- a/vuu-ui/packages/vuu-shell/src/density-switch/DensitySwitch.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Dropdown } from "@salt-ds/lab";
-import { Density } from "@salt-ds/core";
-import { HTMLAttributes, useCallback } from "react";
-import cx from "classnames";
-
-const classBase = "vuuDensitySwitch";
-
-const densities: Density[] = ["high", "medium", "low", "touch"];
-const DEFAULT_DENSITY = "high";
-
-export interface DensitySwitchProps
- extends Omit
+ Status: {connectionStatus.toUpperCase()}
+
+
+
height="auto"
@@ -43,29 +49,16 @@ export const LayoutsList = (props: HTMLAttributes) => {
if (!item) return <>;
const [groupName, layoutMetadata] = item;
return (
- <>
+
([]);
const [radioValue, setRadioValue] = useState(radioValues[0]);
const [screenshot, setScreenshot] = useState();
+ const [screenshotErrorMessage, setScreenshotErrorMessage] = useState<
+ string | undefined
+ >();
+ const [username] = getAuthDetailsFromCookies();
useEffect(() => {
if (componentId) {
- takeScreenshot(document.getElementById(componentId) as HTMLElement).then(
- (screenshot) => setScreenshot(screenshot)
- );
+ takeScreenshot(document.getElementById(componentId) as HTMLElement)
+ .then((screenshot) => {
+ setScreenshot(screenshot);
+ })
+ .catch((error: Error) => {
+ setScreenshotErrorMessage(error.message);
+ });
}
}, [componentId]);
@@ -46,10 +55,26 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
name: layoutName,
group,
screenshot: screenshot ?? "",
- user: "User",
+ user: username,
});
};
+ const screenshotContent = useMemo(() => {
+ if (screenshot) {
+ return (
+ 
+ );
+ }
+ if (screenshotErrorMessage) {
+ return {screenshotErrorMessage} ;
+ }
+ return ;
+ }, [screenshot, screenshotErrorMessage]);
+
return (
{
return new Promise((resolve) => {
- const metadata = getLocalEntity(metadataSaveLocation);
+ const metadata = getLocalEntity(this.metadataSaveLocation);
resolve(metadata || []);
});
}
@@ -136,24 +139,24 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
});
}
- private loadLayouts(): Promise {
+ loadLayouts = (): Promise => {
return new Promise((resolve) => {
- const layouts = getLocalEntity(layoutsSaveLocation);
+ const layouts = getLocalEntity(this.layoutsSaveLocation);
resolve(layouts || []);
});
}
- private saveLayoutsWithMetadata(
+ saveLayoutsWithMetadata = (
layouts: Layout[],
metadata: LayoutMetadata[]
- ): void {
- saveLocalEntity(layoutsSaveLocation, layouts);
- saveLocalEntity(metadataSaveLocation, metadata);
+ ): void => {
+ saveLocalEntity(this.layoutsSaveLocation, layouts);
+ saveLocalEntity(this.metadataSaveLocation, metadata);
}
// Ensures that there is exactly one Layout entry and exactly one Metadata
// entry in local storage corresponding to the provided ID.
- private async validateIds(id: string): Promise {
+ validateIds = async (id: string): Promise => {
return Promise.all([
this.validateId(id, "metadata").catch((error) => error.message),
this.validateId(id, "layout").catch((error) => error.message),
@@ -171,13 +174,13 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
// Ensures that there is exactly one element (Layout or Metadata) in local
// storage corresponding to the provided ID.
- private validateId(
+ validateId = (
id: string,
dataType: "metadata" | "layout"
- ): Promise {
+ ): Promise => {
return new Promise((resolve, reject) => {
const loadFunc =
- dataType === "metadata" ? this.loadMetadata : this.loadLayouts;
+ dataType === "metadata" ? () => this.loadMetadata() : () => this.loadLayouts();
loadFunc().then((array: WithId[]) => {
const count = array.filter((element) => element.id === id).length;
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/PersistenceManager.ts
similarity index 94%
rename from vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts
rename to vuu-ui/packages/vuu-shell/src/persistence-management/PersistenceManager.ts
index 3ac7c097d..83c1d5921 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/LayoutPersistenceManager.ts
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/PersistenceManager.ts
@@ -1,7 +1,7 @@
import { ApplicationJSON, LayoutJSON } from "@finos/vuu-layout";
-import { LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
+import { LayoutMetadata, LayoutMetadataDto } from "../layout-management";
-export interface LayoutPersistenceManager {
+export interface PersistenceManager {
/**
* Saves a new layout and its corresponding metadata
*
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/RemotePersistenceManager.ts
similarity index 91%
rename from vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts
rename to vuu-ui/packages/vuu-shell/src/persistence-management/RemotePersistenceManager.ts
index 18b6da4ee..e7c908dd3 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/RemoteLayoutPersistenceManager.ts
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/RemotePersistenceManager.ts
@@ -1,6 +1,10 @@
-import { LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
-import { LayoutPersistenceManager } from "./LayoutPersistenceManager";
-import { ApplicationJSON, LayoutJSON } from "../layout-reducer";
+import { getAuthDetailsFromCookies } from "@finos/vuu-shell";
+import { PersistenceManager } from "./PersistenceManager";
+import {
+ ApplicationJSON,
+ LayoutJSON,
+} from "@finos/vuu-layout/src/layout-reducer";
+import { LayoutMetadata, LayoutMetadataDto } from "../layout-management";
const baseURL = process.env.LAYOUT_BASE_URL;
const metadataSaveLocation = "layouts/metadata";
@@ -11,9 +15,9 @@ export type CreateLayoutResponseDto = { metadata: LayoutMetadata };
export type GetLayoutResponseDto = { definition: LayoutJSON };
export type GetApplicationResponseDto = { definition: ApplicationJSON };
-export class RemoteLayoutPersistenceManager
- implements LayoutPersistenceManager
-{
+export class RemotePersistenceManager implements PersistenceManager {
+ username: string = getAuthDetailsFromCookies()[0];
+
createLayout(
metadata: LayoutMetadataDto,
layout: LayoutJSON
@@ -138,7 +142,7 @@ export class RemoteLayoutPersistenceManager
method: "PUT",
headers: {
"Content-Type": "application/json",
- username: "vuu-user",
+ username: this.username,
},
body: JSON.stringify(applicationJSON),
})
@@ -159,7 +163,7 @@ export class RemoteLayoutPersistenceManager
fetch(`${baseURL}/${applicationLayoutsSaveLocation}`, {
method: "GET",
headers: {
- username: "vuu-user",
+ username: this.username,
},
})
.then((response) => {
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/defaultApplicationJson.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/defaultApplicationJson.ts
similarity index 94%
rename from vuu-ui/packages/vuu-layout/src/layout-persistence/defaultApplicationJson.ts
rename to vuu-ui/packages/vuu-shell/src/persistence-management/defaultApplicationJson.ts
index a8e805109..ba3b475a3 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/defaultApplicationJson.ts
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/defaultApplicationJson.ts
@@ -1,4 +1,4 @@
-import { ApplicationJSON, LayoutJSON } from "../layout-reducer";
+import { ApplicationJSON, LayoutJSON } from "@finos/vuu-layout";
export const warningLayout: LayoutJSON = {
type: "View",
diff --git a/vuu-ui/packages/vuu-shell/src/persistence-management/index.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/index.ts
new file mode 100644
index 000000000..53d202da6
--- /dev/null
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/index.ts
@@ -0,0 +1,5 @@
+export * from "./defaultApplicationJson";
+export * from "./PersistenceManager";
+export * from "./LocalPersistenceManager";
+export * from "./RemotePersistenceManager";
+export * from "./useLayoutContextMenuItems";
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx b/vuu-ui/packages/vuu-shell/src/persistence-management/useLayoutContextMenuItems.tsx
similarity index 98%
rename from vuu-ui/packages/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx
rename to vuu-ui/packages/vuu-shell/src/persistence-management/useLayoutContextMenuItems.tsx
index b2cc99407..ec3349e5e 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/useLayoutContextMenuItems.tsx
@@ -1,8 +1,3 @@
-import {
- LayoutMetadataDto,
- SaveLayoutPanel,
- useLayoutManager,
-} from "@finos/vuu-shell";
import {
ContextMenuItemDescriptor,
MenuActionHandler,
@@ -10,6 +5,11 @@ import {
} from "@finos/vuu-data-types";
import { useCallback, useMemo } from "react";
import { MenuActionClosePopup, SetDialog } from "@finos/vuu-popups";
+import {
+ LayoutMetadataDto,
+ SaveLayoutPanel,
+ useLayoutManager,
+} from "../layout-management";
export const useLayoutContextMenuItems = (setDialogState: SetDialog) => {
const { saveLayout } = useLayoutManager();
diff --git a/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx b/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx
index 79dde1378..73638b30e 100644
--- a/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx
+++ b/vuu-ui/packages/vuu-shell/src/session-editing-form/SessionEditingForm.tsx
@@ -1,3 +1,19 @@
+import { VuuDataSource } from "@finos/vuu-data-remote";
+import { DataSource, TableSchema } from "@finos/vuu-data-types";
+import {
+ VuuColumnDataType,
+ VuuDataRow,
+ VuuRowDataItemType,
+} from "@finos/vuu-protocol-types";
+import {
+ buildColumnMap,
+ hasAction,
+ isErrorResponse,
+ isValidNumber,
+ shallowEquals,
+} from "@finos/vuu-utils";
+import { Button, useIdMemo } from "@salt-ds/core";
+import cx from "clsx";
import {
ChangeEvent,
FocusEvent,
@@ -8,22 +24,6 @@ import {
useRef,
useState,
} from "react";
-import cx from "classnames";
-import {
- VuuColumnDataType,
- VuuDataRow,
- VuuRowDataItemType,
-} from "@finos/vuu-protocol-types";
-import { useIdMemo } from "@salt-ds/core";
-import { Button } from "@salt-ds/core";
-import {
- DataSource,
- hasAction,
- isErrorResponse,
- RemoteDataSource,
- TableSchema,
-} from "@finos/vuu-data";
-import { buildColumnMap, isValidNumber, shallowEquals } from "@finos/vuu-utils";
import "./SessionEditingForm.css";
@@ -135,7 +135,7 @@ const getDataSource = (
if (dataSource) {
return dataSource;
} else if (schema) {
- return new RemoteDataSource({
+ return new VuuDataSource({
bufferSize: 0,
table: schema.table,
columns: schema.columns.map((col) => col.name),
diff --git a/vuu-ui/packages/vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx b/vuu-ui/packages/vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
index c341013b9..89ca7cff7 100644
--- a/vuu-ui/packages/vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
@@ -1,5 +1,5 @@
import { Button } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { useCallback, useMemo } from "react";
import {
layoutFromJson,
diff --git a/vuu-ui/packages/vuu-shell/src/shell-layouts/side-panel/SidePanel.tsx b/vuu-ui/packages/vuu-shell/src/shell-layouts/side-panel/SidePanel.tsx
index 4bd61099c..4ffa9cd1d 100644
--- a/vuu-ui/packages/vuu-shell/src/shell-layouts/side-panel/SidePanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/shell-layouts/side-panel/SidePanel.tsx
@@ -1,5 +1,5 @@
import { CSSProperties, HTMLAttributes, useMemo } from "react";
-import cx from "classnames";
+import cx from "clsx";
import "./SidePanel.css";
// import { useLayoutManager } from "../../layout-management";
diff --git a/vuu-ui/packages/vuu-shell/src/shell.tsx b/vuu-ui/packages/vuu-shell/src/shell.tsx
index d9d298dd8..c1502432b 100644
--- a/vuu-ui/packages/vuu-shell/src/shell.tsx
+++ b/vuu-ui/packages/vuu-shell/src/shell.tsx
@@ -1,17 +1,20 @@
-import { connectToServer } from "@finos/vuu-data";
+import { connectToServer } from "@finos/vuu-data-remote";
import {
DraggableLayout,
LayoutProvider,
LayoutProviderProps,
- loadingApplicationJson,
- useLayoutContextMenuItems,
+ StackLayout,
} from "@finos/vuu-layout";
import { LayoutChangeHandler } from "@finos/vuu-layout/src/layout-reducer";
-import { logger } from "@finos/vuu-utils";
-import cx from "classnames";
+import {
+ logger,
+ ThemeMode,
+ ThemeProvider,
+ useThemeAttributes,
+} from "@finos/vuu-utils";
+import cx from "clsx";
import {
HTMLAttributes,
- ReactElement,
ReactNode,
useCallback,
useEffect,
@@ -21,11 +24,19 @@ import { AppHeader } from "./app-header";
import { useLayoutManager } from "./layout-management";
import { SidePanelProps, useShellLayout } from "./shell-layouts";
import { SaveLocation } from "./shellTypes";
-import { ThemeMode, ThemeProvider, useThemeAttributes } from "./theme-provider";
-import { ShellContextProvider } from ".";
import { ContextMenuProvider, useDialog } from "@finos/vuu-popups";
import "./shell.css";
+import {
+ loadingApplicationJson,
+ useLayoutContextMenuItems,
+} from "./persistence-management";
+
+if (typeof StackLayout !== "function") {
+ console.warn(
+ "StackLayout module not loaded, will be unsbale to deserialize from layout JSON"
+ );
+}
export type VuuUser = {
username: string;
@@ -76,7 +87,7 @@ export const Shell = ({
useLayoutContextMenuItems(setDialogState);
const handleLayoutChange = useCallback(
- (layout, layoutChangeReason) => {
+ (layout) => {
try {
saveApplicationLayout(layout);
} catch {
diff --git a/vuu-ui/packages/vuu-shell/src/shellTypes.ts b/vuu-ui/packages/vuu-shell/src/shellTypes.ts
index 6a088455d..ef5cc33f8 100644
--- a/vuu-ui/packages/vuu-shell/src/shellTypes.ts
+++ b/vuu-ui/packages/vuu-shell/src/shellTypes.ts
@@ -1,4 +1,5 @@
-import { VuuTable } from "@finos/vuu-protocol-types";
+import type { VuuTable } from "@finos/vuu-protocol-types";
+import type { ViewProps } from "@finos/vuu-layout";
declare global {
const vuuConfig: Promise;
@@ -15,6 +16,7 @@ export interface FeatureConfig {
featureProps?: {
schema?: "*" | VuuTable;
schemas?: VuuTable[];
+ ViewProps?: Partial;
};
}
diff --git a/vuu-ui/packages/vuu-shell/src/theme-provider/index.ts b/vuu-ui/packages/vuu-shell/src/theme-provider/index.ts
deleted file mode 100644
index 12243cf10..000000000
--- a/vuu-ui/packages/vuu-shell/src/theme-provider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ThemeProvider";
\ No newline at end of file
diff --git a/vuu-ui/packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx b/vuu-ui/packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx
index 763936b99..0d4ea5fc3 100644
--- a/vuu-ui/packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx
+++ b/vuu-ui/packages/vuu-shell/src/theme-switch/ThemeSwitch.tsx
@@ -1,7 +1,7 @@
-import cx from "classnames";
+import cx from "clsx";
import { ToggleButton, ToggleButtonGroup, useControlled } from "@salt-ds/core";
import { HTMLAttributes, SyntheticEvent, useCallback } from "react";
-import { ThemeMode } from "../theme-provider";
+import { ThemeMode } from "@finos/vuu-utils";
import "./ThemeSwitch.css";
diff --git a/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.css b/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.css
deleted file mode 100644
index 15c36f732..000000000
--- a/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.vuuUserPanel {
- background-color: white;
- display: flex;
- flex-direction: column;
- max-height: 400px;
- padding: 12px;
-}
-
-vuuUserPanel-history {
- flex: 1 1 auto;
-}
-
-.vuuUserPanel-buttonBar {
- --saltButton-width: 100%;
- align-items: flex-end;
- border-top: 1px solid var(--surface3);
- display: flex;
- flex: 0 0 32px;
- justify-content: flex-start;
-}
-
-.btn-logout {
- --hwButton-icon-left: 12px;
- --hwButton-padding: 0 6px 0 24px;
- padding-left: 24px;
-}
diff --git a/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.tsx b/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.tsx
deleted file mode 100644
index 4b2d8fa22..000000000
--- a/vuu-ui/packages/vuu-shell/src/user-profile/UserPanel.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { formatDate } from "@finos/vuu-utils";
-import { List, ListItem, ListItemProps } from "@salt-ds/lab";
-import { Button } from "@salt-ds/core";
-import { ExportIcon } from "@salt-ds/icons";
-import {
- ForwardedRef,
- forwardRef,
- HTMLAttributes,
- useCallback,
- useEffect,
- useState,
-} from "react";
-import { getLayoutHistory, LayoutHistoryItem } from "../get-layout-history";
-import { logout } from "../login";
-import { VuuUser } from "../shell";
-
-import "./UserPanel.css";
-
-const byLastUpdate = (
- { lastUpdate: l1 }: LayoutHistoryItem,
- { lastUpdate: l2 }: LayoutHistoryItem
-) => {
- return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
-};
-
-type HistoryEntry = {
- id: string;
- label: string;
- lastUpdate: number;
-};
-
-const HistoryListItem = (props: ListItemProps) => {
- return {
- loginUrl?: string;
- onNavigate: (id: string) => void;
- user: VuuUser;
- layoutId: string;
-}
-
-export const UserPanel = forwardRef(function UserPanel(
- { loginUrl, onNavigate, user, layoutId = "latest" }: UserPanelProps,
- forwardedRef: ForwardedRef
-) {
- const [history, setHistory] = useState([]);
-
- useEffect(() => {
- async function getHistory() {
- const history = await getLayoutHistory(user);
- const sortedHistory = history
- .filter((item) => item.id !== "latest")
- .sort(byLastUpdate)
- .map(({ id, lastUpdate }) => ({
- lastUpdate,
- id,
- label: `Saved at ${formatDate("hh:mm:ss")(new Date(lastUpdate))}`,
- }));
- console.log({ sortedHistory });
- setHistory(sortedHistory);
- }
-
- getHistory();
- }, [user]);
-
- const handleHisorySelected = useCallback(
- (evt, selected) => {
- if (selected) {
- onNavigate(selected.id);
- }
- },
- [onNavigate]
- );
-
- const handleLogout = useCallback(() => {
- logout(loginUrl);
- }, [loginUrl]);
-
- const selected =
- history.length === 0
- ? null
- : layoutId === "latest"
- ? history[0]
- : history.find((i) => i.id === layoutId);
-
- return (
-
-
-
- );
-};
diff --git a/vuu-ui/packages/vuu-shell/src/user-profile/index.ts b/vuu-ui/packages/vuu-shell/src/user-profile/index.ts
deleted file mode 100644
index 884472841..000000000
--- a/vuu-ui/packages/vuu-shell/src/user-profile/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './UserProfile';
diff --git a/vuu-ui/packages/vuu-layout/test/layout-persistence/LocalLayoutPersistenceManager.test.ts b/vuu-ui/packages/vuu-shell/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
similarity index 95%
rename from vuu-ui/packages/vuu-layout/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
rename to vuu-ui/packages/vuu-shell/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
index 4a36e1cc8..01ad5d40a 100644
--- a/vuu-ui/packages/vuu-layout/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
+++ b/vuu-ui/packages/vuu-shell/test/layout-persistence/LocalLayoutPersistenceManager.test.ts
@@ -1,14 +1,14 @@
-import "../global-mocks";
+import "@finos/vuu-layout/test/global-mocks";
import { Layout, LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
import { afterEach, describe, expect, it, vi } from "vitest";
-import { LocalLayoutPersistenceManager } from "../../src/layout-persistence";
-import { LayoutJSON } from "../../src/layout-reducer";
+import { LayoutJSON } from "@finos/vuu-layout";
import {
getLocalEntity,
saveLocalEntity,
} from "../../../vuu-filters/src/local-config";
import { formatDate } from "@finos/vuu-utils";
-import { expectPromiseRejectsWithError } from "./utils";
+import { expectPromiseRejectsWithError } from "@finos/vuu-utils/test/utils";
+import { LocalPersistenceManager } from "../../src/persistence-management/LocalPersistenceManager";
vi.mock("@finos/vuu-filters", async () => {
return {
@@ -27,18 +27,28 @@ vi.mock("@finos/vuu-filters", async () => {
};
});
-const persistenceManager = new LocalLayoutPersistenceManager();
+const username = "vuu user";
+
+vi.mock("@finos/vuu-shell", async () => {
+ return {
+ getAuthDetailsFromCookies: (): [string, string] => {
+ return [username, "token"];
+ },
+ };
+});
+
+const persistenceManager = new LocalPersistenceManager();
const existingId = "existing_id";
-const newDate = formatDate("dd.mm.yyyy")(new Date());
+const newDate = formatDate({ date: "dd.mm.yyyy" })(new Date());
const existingMetadata: LayoutMetadata = {
id: existingId,
name: "Existing Layout",
group: "Group 1",
screenshot: "screenshot",
- user: "vuu user",
+ user: username,
created: newDate,
};
@@ -51,14 +61,14 @@ const metadataToAdd: LayoutMetadataDto = {
name: "New Layout",
group: "Group 1",
screenshot: "screenshot",
- user: "vuu user",
+ user: username,
};
const metadataToUpdate: Omit = {
name: "New Layout",
group: "Group 1",
screenshot: "screenshot",
- user: "vuu user",
+ user: username,
created: newDate,
};
@@ -66,8 +76,8 @@ const layoutToAdd: LayoutJSON = {
type: "t",
};
-const metadataSaveLocation = "layouts/metadata";
-const layoutsSaveLocation = "layouts/layouts";
+const metadataSaveLocation = `layouts/metadata/${username}`;
+const layoutsSaveLocation = `layouts/layouts/${username}`;
afterEach(() => {
localStorage.clear();
diff --git a/vuu-ui/packages/vuu-layout/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts b/vuu-ui/packages/vuu-shell/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
similarity index 93%
rename from vuu-ui/packages/vuu-layout/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
rename to vuu-ui/packages/vuu-shell/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
index 213d1e6a9..68ab36fb6 100644
--- a/vuu-ui/packages/vuu-layout/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
+++ b/vuu-ui/packages/vuu-shell/test/layout-persistence/RemoteLayoutPersistenceManager.test.ts
@@ -2,24 +2,35 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
import {
GetLayoutResponseDto,
CreateLayoutResponseDto,
- RemoteLayoutPersistenceManager,
-} from "../../src/layout-persistence/RemoteLayoutPersistenceManager";
+ RemotePersistenceManager,
+} from "../../src/persistence-management/RemotePersistenceManager";
import { LayoutMetadata, LayoutMetadataDto } from "@finos/vuu-shell";
-import { LayoutJSON } from "../../src/layout-reducer";
+import { LayoutJSON } from "@finos/vuu-layout";
import { v4 as uuidv4 } from "uuid";
-import { expectPromiseRejectsWithError } from "./utils";
+import { expectPromiseRejectsWithError } from "@finos/vuu-utils/test/utils";
-const persistence = new RemoteLayoutPersistenceManager();
const mockFetch = vi.fn();
global.fetch = mockFetch;
+const username = "vuu user";
+
+vi.mock("@finos/vuu-shell", async () => {
+ return {
+ getAuthDetailsFromCookies: (): [string, string] => {
+ return [username, "token"];
+ },
+ };
+});
+
+const persistence = new RemotePersistenceManager();
+
const metadata: LayoutMetadata = {
id: "0001",
name: "layout 1",
group: "group 1",
screenshot: "screenshot",
- user: "username",
+ user: username,
created: "01.01.2000",
};
@@ -27,7 +38,7 @@ const metadataToAdd: LayoutMetadataDto = {
name: "layout 1",
group: "group 1",
screenshot: "screenshot",
- user: "username",
+ user: username,
};
const layout: LayoutJSON = {
@@ -44,7 +55,7 @@ type FetchResponse = {
statusText?: string;
};
-describe("RemoteLayoutPersistenceManager", () => {
+describe("RemotePersistenceManager", () => {
beforeEach(() => {
vi.clearAllMocks();
});
diff --git a/vuu-ui/packages/vuu-utils/test/screenshot-utils.test.ts b/vuu-ui/packages/vuu-shell/test/layout-persistence/screenshot-utils.test.ts
similarity index 85%
rename from vuu-ui/packages/vuu-utils/test/screenshot-utils.test.ts
rename to vuu-ui/packages/vuu-shell/test/layout-persistence/screenshot-utils.test.ts
index 9809fde58..465c62825 100644
--- a/vuu-ui/packages/vuu-utils/test/screenshot-utils.test.ts
+++ b/vuu-ui/packages/vuu-shell/test/layout-persistence/screenshot-utils.test.ts
@@ -1,38 +1,36 @@
-import { takeScreenshot } from "../src/screenshot-utils";
+import { takeScreenshot } from "../../src/layout-management/screenshot-utils";
import { describe, expect, it, vi } from "vitest";
+import { expectPromiseRejectsWithError } from "@finos/vuu-utils/test/utils";
+import htmlToImage from "html-to-image";
-/**
- * The default environment in Vitest is a Node.js environment. If you are building a web application, you can use browser-like environment through either jsdom or happy-dom instead
- * @vitest-environment happy-dom
- */
+const node = document.createElement("div");
describe("takeScreenshot", () => {
it("returns a string when toPng() promise is resolved", async () => {
const placeholderImage =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACWCAYAAADwkd5lAAAAAXNSR0IArs4c6QAADyRJREFUeF7tnLmLVE0Xh6tBxhmYwFlAnEwT/wEDcUk0MNdAwSUwUEQRBNFA3DEQFEFEFFwC9S9RQwWZRA3UZBRkFhBhXIL5qOt7+7vT0z11l6pbp6qehuZ1+tZy6jnn1q/Oud1vZ3p6eunPnz9qZGQkew8NDSleEIAABCAAgV4CWisWFxezt9aKzszMzNLk5KSan5/P3vo1Pj6evRETAggCEIBA2gS0aPTTh9nZ2X8CMjU11SX08+fPbuPR0dFMSMbGxlSn00mbIquHAAQgkAiBpaUltbCwkGmB1oQ8qdCakL++fv26UkDyi2UGSIQly4QABCCQBIEqCcSqAlKkNSiFocSVREyxSAhAIGICdff30gJSZFdFoSJmztIgAAEIBEvARoWploBQ4go2ZjAcAhBInIDNBKCRgFDiSjwSWT4EIBAEgbolKtPirAkIJS4Taq5DAAIQaI+AjRKVyVonAkKJy4Sd6xCAAATcELBZojJZ6FRAKHGZ8HMdAhCAQHMCrkpUJstaExBKXCZXcB0CEIBAeQJtlKhM1ngREEpcJrdwHQIQgEB/Am2WqEw+8CoglLhM7uE6BCAAAaV8lahM7MUICCUuk6u4DgEIpERAQonKxFukgFDiMrmN6xCAQKwEJJWoTIxFCwglLpP7uA4BCMRAQGqJysQ2GAGhxGVyJdchAIGQCIRQojLxDFJAKHGZ3Mp1CEBAKoGQSlQmhkELCCUuk3u5DgEISCAQaonKxC4aAaHEZXI11yEAgTYJxFCiMvGKUkAocZncznUIQMAVgZhKVCZGUQsIJS6T+7kOAQjYIBBricrEJhkBocRlCgWuQwACVQikUKIy8UhSQChxmcKC6xCAwCACKZWoTFGQtIBQ4jKFB9chAAFNINUSlcn7CEgfQpwwTGHDdQjET4ASldnHCMgqjAggcwDRAgKxEeAAWd6jCEhJVqSwJUHRDAIBEuD+ruc0BKQGN04oNaDRBQLCCFBhaO4QBKQBQwKwATy6QsATAQ6A9sAjIJZYkgJbAskwEHBAgPvTAVSlFALigCsnHAdQGRICFQlQIagIrEZzBKQGtLJdCOCypGgHAXsEOMDZY2kaCQExEbJ0nRTaEkiGgUAfAtxffsICAfHAnROSB+hMGR0BMnz/LkVAPPqAG8AjfKYOlgAHMDmuQ0CE+IIUXIgjMEMkAe4PkW7hW1gS3cIJS6JXsKltAmTobROvPh8ZSHVmrfXgBmoNNRMJIsABSpAzDKYgIIH4ihQ+EEdhZi0CxHctbN47ISDeXVDdAE5o1ZnRQx4BMmx5PqlqEQJSlZig9tyAgpyBKaUJcAAqjUp8QwREvIvKGUgJoBwnWvkhQHz64e56VgTENWEP43PC8wCdKVcQIEOOPygQkIh9zA0csXMFL40DjGDnWDYNAbEMVOpwlBCkeiYOu4ivOPxYdRUISFViEbTnhBiBEwUsgQxXgBM8m4CAeHaAz+nZAHzSD3duDiDh+s625QiIbaKBjkcJIlDHtWQ28dES6MCmQUACc1gb5nLCbIOy/DnIUOX7yLeFCIhvDwienw1EsHMcmsYBwiHcyIZGQCJzqKvlUMJwRVbGuPhXhh9CswIBCc1jAuzlhCrACRZMIMO0ADHxIRCQxAOgyfLZgJrQ89eXA4A/9rHNjIDE5lFP66EE4gl8yWnxT0lQNKtEAAGphIvGZQhwwi1DyX0bMkT3jFOfAQFJPQIcrp8NzCHcVYZGwP1wT3FWBCRFr3tYMyUUt9Dh65Yvo/cngIAQGa0T4IRsBzkZnh2OjFKfAAJSnx09GxJgA6wHEAGux41e9gkgIPaZMmINApRgVocGnxpBRRfnBBAQ54iZoCoBTtj/iJGhVY0c2rdNAAFpmzjzlSaQ6gaKgJYOERp6JoCAeHYA05cjEHsJJ/b1lfMyrUIjgICE5jHsVbGc0FPNsAjheAggIPH4MrmVhLoBxyKAyQUcC15BAAEhKKIgIL0EJN2+KIKARbROAAFpHTkTuiYg5YQfaobk2j+MHw8BBCQeX7KSHgK+NnApAkZAQMA1AQTENWHGF0HAdQnJ9fgiIGIEBHoIICCERHIEbGUIvjKc5BzGgsUSQEDEugbDXBOoKwC2BMj1+hgfAq4JICCuCTN+EARMJSjT9SAWiZEQsEwAAbEMlOHCJ5BnGHNzc2p4eDhb0O/fv9X4+Hj2Hh0dDX+RrAACFgggIBYgMkRcBIolqrVr12aL+/Xrl5qYmEBA4nI1q2lIAAFpCJDucRAwlahM1+OgwCogUI0AAlKNF60jIsBD9IicyVK8EEBAvGBnUp8EbH2Lqq4A+Vw7c0PAJoFv376pzszMzNLU1JTNcRkLAqIIuC5BuR5fFEyMgcB/BBAQQiFaAr4yBFsZTrSOYWHREKCEFY0rWUhOQMoG7kvAiAQItEWADKQt0szjlID0EpJ0+5w6h8GjJUAGEq1r419YqCd8KRlS/BHCCl0TIANxTZjxrROIZQMOVQCtO5QBgyVABhKs69IyPPYSUOzrSyta01ktApKOr4Nbaaon9FgyrOACDoMrE0BAKiOjg2sCbKD/CKcqoK7ji/HtEeAZiD2WjNSAACWc1eHBp0Fw0dUZAQTEGVoGNhHghG0i1P86GVo9bvSyT4ASln2mjGggwAZoJ0QQYDscGaU+AQSkPjt6ViBACaYCrBpN4VsDGl0aE0BAGiNkgEEEOCH7iQ0yPD/cU5yVZyApet3xmtnAHAMuOTwCXhIUzWoTIAOpjY6ORQKUUGTHA/6R7Z9QrUNAQvWcALs54QpwQg0TyBBrQKNLXwKUsAiMygTYgCojE9mBA4BItwRlFBlIUO7yZywlEH/s25gZ/7ZBOb45yEDi86m1FXFCtYYyqIHIMINyl1djyUC84pc5ORuITL+0bRUHiLaJhzcfAhKez5xYTAnDCdZoBiU+onGl1YUgIFZxhjUYJ8yw/CXFWjJUKZ7wbwfPQPz7oHUL2ABaRx7lhBxAonRrpUUhIJVwhduYEkS4vgvBcuIrBC/Zt5ESln2mYkbkhCjGFUkZQoabjrsRkAh9zQ0coVMDXBIHmACdVtFkBKQiMKnNKSFI9Qx2aQLEZ5xxwDOQgP3KCS9g5yVsOhlyPM4nAwnQl9yAAToNk1cQ4AAUflAgIIH4kBJAII7CzFoEiO9a2Lx3ooTl3QWDDeCEJtg5mOaMABm2M7TWByYDsY60+YDcQM0ZMkL4BDhAyfchGYgQH5HCC3EEZogkwP0h0i2KDMSjXzhheYTP1MESIEOX4zoExIMvuAE8QGfK6AhwAPPvUkpYLfmAFLwl0EyTJAHuLz9uR0AccueE5BAuQ0NgAAEy/PZCAwFxwJoAdgCVISFQkQAHuIrAajTnGUgNaP26kEJbAskwEHBAgPvTAVSlFBlIA66ccBrAoysEPBGgQmAPPBlIDZYEYA1odIGAMAIcAJs7hAykJENS4JKgaAaBAAlwf9dzGhnIKtw4odQLKnpBIGQCVBjKew8B6cOKACofQLSEQKwEOECaPUsJ6z9GpLDmYKEFBFIlwP7Q3/NJZyCcMFLdDlg3BOoToELxf3ZJZiAEQP2bh54QgMA/AhxAVTr/N15SUG57CEDAFYFU95eoS1icEFzdLowLAQgMIpBShSNKAUnJgdzGEICATAIpHGCjeQaSagop89bBKghAoEgg1v0paAFJQeG5DSEAgbgIxFQhCbKEFZMD4ro1WA0EIFCWQAwH4GAykFhTwLLBRjsIQCBeAqHub6IzkBgUOt6QZ2UQgIALAiFVWERmICEBdBFAjAkBCEAghAO0mAwk1BSOMIcABCDgmoDU/dGrgISgsK4Dg/EhAAEIVCEgqULjpYQlCUAVx9EWAhCAgG0C169fz4a8ePFid2j92aVLl7K/X716pbZv39699uLFC3Xo0KHs7wcPHqjdu3crvaeOj49n79HR0YEmLi4uqjNnzqjDhw93x8w/e/jwYbfftWvXuvZ8+PBB7d+/X717904dP35c3blzR42MjGRtW8tApKZgtoOB8SAAAQiUJfD69Wu1Y8cOVdyw9WdaQLRQvH//vvvviYkJpTfz06dPq7t372ZT5P/euHGjmp+fz976lYvJ0NBQ15SiUBRFaW5uTp06dUpduXJFbd68eZnpeZ+dO3eqvXv3ZuKj/33w4MGsndMMhBJV2TCiHQQgkBoBvTlfvnw5O9lrEckzkGJG0psxaFF5+fJlNwvQbTdt2tTd0DXDfhWe79+/qwMHDqitW7eqL1++ZHPlWY0WJS0e9+7dU1qkiq+iYGlx0eL27Nmz7vxOMhBKVKndCqwXAhCoSkCLgX59+vQp+6/e1Isnfn3K7/27t9yV/3327NksO9CvvMT0/Plz9fTpU3Xz5k2ls4x169apDRs2qGPHji0TkF5RKK6jmA1pcen921oGQomqavjQHgIQSJWA3tAvXLigbty4oe7fv79CQIrPKIpZRm/GoUVIC1Cv+GzZsqVb3tKZQ74/67bnzp1T58+fV3v27FG6xFV8pqIN0Z/rz3LBKGYcvdlKowyEElWq4c+6IQCBJgS0EOzatSsrI61WstJzlBUQ3bb4wFtnIPmzitxWLVy6lHXixIms9KUfuD958iR7dpJnLnq+mZmZ7O+3b98uK1lZERBKVE1Ch74QgEDKBPQm/PjxY3X16tXs20z9BCR/UF22hNX7Da5cAPJvSxUFRIuKbr9t2za1sLCQiUfxW1y6b/5wfnZ2dtlD/NolLEpUKYc8a4cABGwR6C0Z5ePmX5G9detW98F4v4foecmqNzvRf+sN/uTJk2r9+vXqyJEjfTOQXECKXw0u7u+fP39Wjx49ykprP378WPaAvdJDdEpUtkKGcSAAAQj0J9D7YLzO13j1cw5dnsrFYXJyctkzkH4ZiBaQfg/t9Vd6x8bGst+arFmzRt2+fTv7rcm+ffvKfY2XEhWhDgEIQKAdAk1+SJg/58jFQ4tCXs7SmY5+AJ4/ENerKYpMnoH0/pAwz4SGh4ezEtebN2+y34l8/PhRHT16NPu674ofEmrFMv0QpR2czAIBCEAAApIIDHqEoQWpMz09vfT3799MVbTqFH+92Ol0lC5lFV/6M/0qft7kMz3WoP5157Yx5qC5+629rJ1lx+wXPDmj3vlXa9s7X29bn2PWmdu09n5jrhbDpvEk3cTYAgEJBLSY6KxFv7VW/A8L/q17HrcSiwAAAABJRU5ErkJggg==";
-
- // We need to mock the html-to-image package because the web API operations it relies on (e.g. canvas.toDataUrl) are not available in the test environment
- const htmlToImage = await import("html-to-image");
htmlToImage.toPng = vi.fn().mockResolvedValue(placeholderImage);
- const node = document.createElement("div");
-
const screenshot = await takeScreenshot(node);
expect(typeof screenshot).toEqual("string");
});
- it("returns undefined when toPng() promise is rejected", async () => {
- // We need to mock the html-to-image package because the web API operations it relies on (e.g. canvas.toDataUrl) are not available in the test environment
- const htmlToImage = await import("html-to-image");
+ it("rejects with error message when toPng() promise is rejected", async () => {
htmlToImage.toPng = vi.fn().mockRejectedValue({});
- const node = document.createElement("div");
-
- const screenshot = await takeScreenshot(node);
+ expectPromiseRejectsWithError(
+ () => takeScreenshot(node),
+ "Error taking screenshot"
+ );
+ });
- console.log(screenshot);
+ it("rejects with error message when toPng() resolves with falsey value", async () => {
+ htmlToImage.toPng = vi.fn().mockResolvedValue(undefined);
- expect(screenshot).toBeUndefined();
+ expectPromiseRejectsWithError(
+ () => takeScreenshot(node),
+ "No Screenshot available"
+ );
});
});
diff --git a/vuu-ui/packages/vuu-layout/test/layout-persistence/utils.ts b/vuu-ui/packages/vuu-shell/test/layout-persistence/utils.ts
similarity index 100%
rename from vuu-ui/packages/vuu-layout/test/layout-persistence/utils.ts
rename to vuu-ui/packages/vuu-shell/test/layout-persistence/utils.ts
diff --git a/vuu-ui/packages/vuu-table-extras/package.json b/vuu-ui/packages/vuu-table-extras/package.json
index cb033461e..2e84f15f0 100644
--- a/vuu-ui/packages/vuu-table-extras/package.json
+++ b/vuu-ui/packages/vuu-table-extras/package.json
@@ -15,21 +15,20 @@
},
"dependencies": {
"@finos/vuu-codemirror": "0.0.26",
- "@finos/vuu-data": "0.0.26",
"@finos/vuu-data-react": "0.0.26",
+ "@finos/vuu-data-types": "0.0.26",
"@finos/vuu-table-types": "0.0.26",
"@finos/vuu-layout": "0.0.26",
"@finos/vuu-popups": "0.0.26",
"@finos/vuu-utils": "0.0.26",
"@finos/vuu-ui-controls": "0.0.26",
"@lezer/lr": "1.3.4",
- "@salt-ds/core": "1.8.0",
- "@salt-ds/lab": "1.0.0-alpha.15"
+ "@salt-ds/core": "1.13.2"
},
"peerDependencies": {
- "classnames": "^2.2.6",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
},
"type": "module"
}
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css
deleted file mode 100644
index 64f0fff76..000000000
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.vuuTable td:has(> .vuuBackgroundCell){
- padding: 0;
- text-align: right;
-}
-
-.vuuBackgroundCell {
- color: var(--background-cell-color);
- padding-right: var(--salt-size-unit);
- position: relative;
- z-index: -1;
-}
-
-.vuuBackgroundCell-flasher {
- background-color: var(--background-cell-background);
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- z-index: -1;
-}
-
-.vuuBackgroundCell-flasher {
- text-align: left;
-}
-.vuuBackgroundCell-flasher + .num {
- padding-left: 8px;
-}
-
-.right .vuuBackgroundCell-flasher {
- text-align: right;
-}
-.right .vuuBackgroundCell-flasher + .num {
- padding-right: 8px;
-}
-
-.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
- background-color: transparent;
-}
-
-.vuuBackgroundCell-backgroundOnly.up1,
-.vuuBackgroundCell-backgroundArrow.up1 {
- animation-duration: 30s;
- animation-name: reactbgup1;
-}
-
-.vuuBackgroundCell-backgroundOnly.up2,
-.vuuBackgroundCell-backgroundArrow.up2 {
- animation-duration: 30s;
- animation-name: reactbgup2;
-}
-
-.vuuBackgroundCell-backgroundOnly.down1,
-.vuuBackgroundCell-backgroundArrow.down1 {
- animation-duration: 30s;
- animation-name: reactbgdown1;
-}
-
-.vuuBackgroundCell-backgroundOnly.down2,
-.vuuBackgroundCell-backgroundArrow.down2 {
- animation-duration: 30s;
- animation-name: reactbgdown2;
-}
-
-.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactarrowup1;
-}
-
-.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactarrowup2;
-}
-
-.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactarrowdown1;
-}
-
-.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactarrowdown2;
-}
-
-.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactbgarrowup1;
-}
-
-.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactbgarrowup2;
-}
-
-.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactbgarrowdown1;
-}
-
-.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-flasher {
- animation-duration: 30s;
- animation-name: reactbgarrowdown2;
-}
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/index.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/index.ts
deleted file mode 100644
index ccb70a013..000000000
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./background-cell";
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css
new file mode 100644
index 000000000..c24f5976b
--- /dev/null
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.css
@@ -0,0 +1,105 @@
+
+.vuuBackgroundCell {
+ --background-animation-duration: 10s;
+ color: var(--vuuBackgroundCell-color, var(--vuu-color-gray-80));
+ padding-right: var(--salt-size-unit);
+ position: relative;
+ z-index: -1;
+}
+
+.vuuBackgroundCell-arrowBackground,
+.vuuBackgroundCell-arrowOnly {
+ padding-left: 14px;
+}
+
+.vuuBackgroundCell-arrow {
+ background-color: var(--background-cell-background);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: -1;
+}
+
+.vuuBackgroundCell-arrow {
+ text-align: left;
+}
+.vuuBackgroundCell-arrow + .num {
+ padding-left: 8px;
+}
+
+.right .vuuBackgroundCell-arrow {
+ text-align: right;
+}
+.right .vuuBackgroundCell-arrow + .num {
+ padding-right: 8px;
+}
+
+.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+ background-color: transparent;
+}
+
+.vuuBackgroundCell-backgroundOnly.up1,
+.vuuBackgroundCell-arrowBackground.up1 {
+ animation-duration: var(--background-animation-duration);
+ animation-name: vuubgup1;
+}
+
+.vuuBackgroundCell-backgroundOnly.up2,
+.vuuBackgroundCell-arrowBackground.up2 {
+ animation-duration: var(--background-animation-duration);
+ animation-name: vuubgup2;
+}
+
+.vuuBackgroundCell-backgroundOnly.down1,
+.vuuBackgroundCell-arrowBackground.down1 {
+ animation-duration: var(--background-animation-duration);
+ animation-name: vuubgdown1;
+}
+
+.vuuBackgroundCell-backgroundOnly.down2,
+.vuuBackgroundCell-arrowBackground.down2 {
+ animation-duration: var(--background-animation-duration);
+ animation-name: vuubgdown2;
+}
+
+.up1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuuarrowup1;
+}
+
+.up2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuuarrowup2;
+}
+
+.down1.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuuarrowdown1;
+}
+
+.down2.vuuBackgroundCell-arrowOnly > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuuarrowdown2;
+}
+
+.up1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuubgarrowup1;
+}
+
+.up2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuubgarrowup2;
+}
+
+.down1.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuubgarrowdown1;
+}
+
+.down2.vuuBackgroundCell-arrowBackground > .vuuBackgroundCell-arrow {
+ animation-duration: 30s;
+ animation-name: vuubgarrowdown2;
+}
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
similarity index 86%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
index 0354e64e4..854e07fba 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCell.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
@@ -1,3 +1,4 @@
+import { dataAndColumnUnchanged } from "@finos/vuu-table";
import { ColumnType, TableCellProps } from "@finos/vuu-table-types";
import {
DOWN1,
@@ -8,11 +9,12 @@ import {
UP1,
UP2,
} from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
+import { memo } from "react";
import { useDirection } from "./useDirection";
import "./BackgroundCell.css";
-import "./FlashingBackground.css";
+import "./BackgroundKeyframes.css";
const CHAR_ARROW_UP = String.fromCharCode(11014);
const CHAR_ARROW_DOWN = String.fromCharCode(11015);
@@ -37,8 +39,11 @@ const getFlashStyle = (colType?: ColumnType) => {
return FlashStyle.BackgroundOnly;
};
-// export to avoid tree shaking, component is not consumed directly
-export const BackgroundCell = ({ column, columnMap, row }: TableCellProps) => {
+export const BackgroundCell = memo(function BackgroundCell({
+ column,
+ columnMap,
+ row,
+}: TableCellProps) {
//TODO what about click handling
const { name, type, valueFormatter } = column;
@@ -66,11 +71,12 @@ export const BackgroundCell = ({ column, columnMap, row }: TableCellProps) => {
return (
';
- initial-value: transparent;
- inherits: false;
-} */
-/* @property color {
- syntax: '';
- initial-value: #15171B;
- inherits: false;
-} */
-
-@keyframes reactbgup1 {
- from {
+@keyframes vuubgup1 {
+ 0% {
background-color: var(--vuu-color-green-50);
color: white;
}
- to {
- background-color: transparent;
+
+ 30% {
+ color: white;
+ }
+ 33% {
color: var(--vuu-color-gray-80);
+ }
+ 100% {
+ background-color: transparent;
+ color: var(--vuu-color-gray-80);
}
}
- @keyframes reactbgup2 {
- from {
+ @keyframes vuubgup2 {
+ 0% {
background-color: var(--vuu-color-green-50);
- color: #ffffff;
+ color: white;
}
- to {
+
+ 30% {
+ color: white;
+ }
+ 33% {
+ color: var(--vuu-color-gray-80);
+ }
+
+ 100% {
background-color: transparent;
color: var(--vuu-color-gray-80);
}
}
- @keyframes reactbgdown1 {
- from {
+ @keyframes vuubgdown1 {
+ 0% {
background-color: var(--vuu-color-red-50);
color: white;
}
- to {
+ 30% {
+ color: white;
+ }
+ 33% {
+ color: var(--vuu-color-gray-80);
+ }
+ 100% {
background-color: transparent;
color: var(--vuu-color-gray-80);
}
}
- @keyframes reactbgdown2 {
- from {
+ @keyframes vuubgdown2 {
+ 0% {
background-color: var(--vuu-color-red-50);
color: white;
}
- to {
+ 30% {
+ color: white;
+ }
+ 33% {
+ color: var(--vuu-color-gray-80);
+ }
+ 100% {
background-color: transparent;
color: var(--vuu-color-gray-80);
}
}
- @keyframes reactarrowup1 {
+ @keyframes vuuarrowup1 {
from {
color: var(--salt-differential-positive-foreground);
}
@@ -64,7 +80,7 @@
}
}
- @keyframes reactarrowup2 {
+ @keyframes vuuarrowup2 {
from {
color: var(--salt-differential-positive-foreground);
}
@@ -73,7 +89,7 @@
}
}
- @keyframes reactarrowdown1 {
+ @keyframes vuuarrowdown1 {
from {
color: var(--salt-differential-negative-foreground);
}
@@ -82,7 +98,7 @@
}
}
- @keyframes reactarrowdown2 {
+ @keyframes vuuarrowdown2 {
from {
color: var(--salt-differential-negative-foreground);
}
@@ -91,7 +107,7 @@
}
}
- @keyframes reactbgarrowup1 {
+ @keyframes vuubgarrowup1 {
0% {
color: var(--salt-differential-positive-foreground);
background-color: var(--vuu-color-green-50);
@@ -106,7 +122,7 @@
}
}
- @keyframes reactbgarrowup2 {
+ @keyframes vuubgarrowup2 {
0% {
color: var(--salt-differential-positive-foreground);
background-color: var(--vuu-color-green-50);
@@ -121,7 +137,7 @@
}
}
- @keyframes reactbgarrowdown1 {
+ @keyframes vuubgarrowdown1 {
0% {
color: var(--salt-differential-negative-foreground);
background-color: var(--vuu-color-red-50);
@@ -136,7 +152,7 @@
}
}
- @keyframes reactbgarrowdown2 {
+ @keyframes vuubgarrowdown2 {
0% {
color: var(--salt-differential-negative-foreground);
background-color: var(--vuu-color-red-50);
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/index.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/index.ts
similarity index 100%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/index.ts
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/index.ts
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/useDirection.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.ts
similarity index 100%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/useDirection.ts
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/useDirection.ts
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css
similarity index 100%
rename from vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.css
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx
similarity index 96%
rename from vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.tsx
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx
index 03eac99d7..6b47a7964 100644
--- a/vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/DropdownCell.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx
@@ -9,7 +9,7 @@ import {
import { dispatchCustomEvent, registerComponent } from "@finos/vuu-utils";
import { VuuColumnDataType } from "@finos/vuu-protocol-types";
import { memo, useCallback, useState } from "react";
-import { dataAndColumnUnchanged } from "../cell-utils";
+import { dataAndColumnUnchanged } from "@finos/vuu-table";
import "./DropdownCell.css";
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/index.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/index.ts
similarity index 100%
rename from vuu-ui/packages/vuu-table/src/cell-renderers/dropdown-cell/index.ts
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/index.ts
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/index.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/index.ts
index f3fd0c349..da98c68a5 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/index.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/index.ts
@@ -1 +1,4 @@
+export * from "./background-cell";
+export * from "./dropdown-cell";
+export * from "./lookup-cell";
export * from "./progress-cell";
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/lookup-cell/LookupCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.tsx
similarity index 87%
rename from vuu-ui/packages/vuu-table/src/cell-renderers/lookup-cell/LookupCell.tsx
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.tsx
index 2b70be31d..254d2b4c9 100644
--- a/vuu-ui/packages/vuu-table/src/cell-renderers/lookup-cell/LookupCell.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/lookup-cell/LookupCell.tsx
@@ -2,7 +2,7 @@ import { useLookupValues } from "@finos/vuu-data-react";
import { TableCellRendererProps } from "@finos/vuu-table-types";
import { registerComponent } from "@finos/vuu-utils";
import { memo } from "react";
-import { dataAndColumnUnchanged } from "../cell-utils";
+import { dataAndColumnUnchanged } from "@finos/vuu-table/src/cell-renderers/cell-utils";
// const classBase = "vuuTableLookupCell";
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/lookup-cell/index.ts b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/lookup-cell/index.ts
similarity index 100%
rename from vuu-ui/packages/vuu-table/src/cell-renderers/lookup-cell/index.ts
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/lookup-cell/index.ts
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx
index 3667f80d7..ec2958b50 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx
@@ -5,7 +5,7 @@ import {
isValidNumber,
registerComponent,
} from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
import { CSSProperties } from "react";
import "./ProgressCell.css";
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-expression-input/useColumnExpressionSuggestionProvider.ts b/vuu-ui/packages/vuu-table-extras/src/column-expression-input/useColumnExpressionSuggestionProvider.ts
index 051da9733..9a7bd6ea0 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-expression-input/useColumnExpressionSuggestionProvider.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/column-expression-input/useColumnExpressionSuggestionProvider.ts
@@ -13,11 +13,6 @@ import {
} from "@finos/vuu-data-react";
import { ColumnDescriptor } from "@finos/vuu-table-types";
import { VuuTable } from "@finos/vuu-protocol-types";
-import {
- ColumnExpressionOperator,
- ColumnExpressionSuggestionType,
- IExpressionSuggestionProvider,
-} from "@finos/vuu-table-extras";
import { isNumericColumn, isTextColumn } from "@finos/vuu-utils";
import { useCallback, useRef } from "react";
import {
@@ -25,6 +20,11 @@ import {
columnFunctionDescriptors,
} from "./column-function-descriptors";
import { functionDocInfo } from "./functionDocInfo";
+import {
+ ColumnExpressionOperator,
+ ColumnExpressionSuggestionType,
+ IExpressionSuggestionProvider,
+} from "./useColumnExpressionEditor";
const NO_OPERATORS = [] as Completion[];
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx
index 4cb2ec51f..d0be5e453 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-expression-panel/ColumnExpressionPanel.tsx
@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "@finos/vuu-table-types";
+import { ColumnDescriptor, ColumnSettingsProps } from "@finos/vuu-table-types";
import { Dropdown } from "@finos/vuu-ui-controls";
import {
getCalculatedColumnExpression,
@@ -12,7 +12,6 @@ import {
ColumnExpressionSubmitHandler,
useColumnExpressionSuggestionProvider,
} from "../column-expression-input";
-import { ColumnSettingsProps } from "../column-settings";
import { useColumnExpression } from "./useColumnExpression";
const classBase = "vuuColumnExpressionPanel";
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx
similarity index 87%
rename from vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx
rename to vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx
index 83ba314e6..a8a7d87b2 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/NumericFormattingSettings.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/BaseNumericFormattingSettings.tsx
@@ -1,6 +1,5 @@
-import { FormField, FormFieldLabel, Input } from "@salt-ds/core";
-import { Switch } from "@salt-ds/lab";
-import { ColumnDescriptor, ColumnTypeFormatting } from "@finos/vuu-table-types";
+import { FormField, FormFieldLabel, Input, Switch } from "@salt-ds/core";
+import { ColumnTypeFormatting } from "@finos/vuu-table-types";
import { getTypeFormattingFromColumn } from "@finos/vuu-utils";
import {
ChangeEvent,
@@ -9,18 +8,14 @@ import {
useCallback,
useState,
} from "react";
+import { FormattingSettingsProps } from "./types";
const classBase = "vuuFormattingSettings";
-export interface NumericFormattingSettingsProps {
- column: ColumnDescriptor;
- onChange: (formatting: ColumnTypeFormatting) => void;
-}
-
-export const NumericFormattingSettings = ({
+export const BaseNumericFormattingSettings = ({
column,
- onChange,
-}: NumericFormattingSettingsProps) => {
+ onChangeFormatting: onChange,
+}: FormattingSettingsProps) => {
const [formattingSettings, setFormattingSettings] =
useState(getTypeFormattingFromColumn(column));
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx
index 66487bb75..a44580337 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/ColumnFormattingPanel.tsx
@@ -1,7 +1,6 @@
import {
ColumnDescriptor,
ColumnDescriptorCustomRenderer,
- ColumnTypeFormatting,
ColumnTypeRendering,
} from "@finos/vuu-table-types";
import { Dropdown, SingleSelectionHandler } from "@finos/vuu-ui-controls";
@@ -14,17 +13,19 @@ import {
isTypeDescriptor,
} from "@finos/vuu-utils";
import { FormField, FormFieldLabel } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { HTMLAttributes, useCallback, useMemo } from "react";
-import { NumericFormattingSettings } from "./NumericFormattingSettings";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings";
+import { LongTypeFormattingSettings } from "./LongTypeFormattingSettings";
+import { FormattingSettingsProps } from "./types";
const classBase = "vuuColumnFormattingPanel";
export interface ColumnFormattingPanelProps
- extends HTMLAttributes {
+ extends HTMLAttributes,
+ FormattingSettingsProps {
availableRenderers: CellRendererDescriptor[];
column: ColumnDescriptor;
- onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
onChangeRendering: (renderProps: ColumnTypeRendering) => void;
}
@@ -35,24 +36,15 @@ export const ColumnFormattingPanel = ({
className,
column,
onChangeFormatting,
+ onChangeType,
onChangeRendering,
...htmlAttributes
}: ColumnFormattingPanelProps) => {
- const contentForType = useMemo(() => {
- switch (column.serverDataType) {
- case "double":
- case "int":
- case "long":
- return (
- | undefined
@@ -81,7 +73,7 @@ export const ColumnFormattingPanel = ({
const handleChangeRenderer = useCallback<
SingleSelectionHandler
>(
- (evt, cellRendererDescriptor) => {
+ (_, cellRendererDescriptor) => {
const renderProps: ColumnTypeRendering = {
name: cellRendererDescriptor.name,
};
@@ -112,7 +104,7 @@ export const ColumnFormattingPanel = ({
My Layouts
{groupName}
{layoutMetadata.map((metadata) => (
- handleLoadLayout(metadata?.id)}
- >
- 
-
+
-
-
- {metadata?.name}
-
-
-
- {`${metadata?.user}, ${metadata?.created}`}
-
+
+ );
+};
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
index f7c7a3fde..ec315b1ac 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css
@@ -9,6 +9,12 @@
--saltText-color: var(--text-secondary-foreground, #606477);
}
+.spinner{
+ width: 100px;
+ height:100px;
+ background-image: var(--svg-spinner);
+}
+
.saveLayoutPanel-panelContainer {
display: flex;
flex-direction: column;
@@ -69,13 +75,9 @@
}
.saveLayoutPanel-screenshot {
- display: flex;
- justify-content: center;
- align-items: center;
background: lightgray 50% / cover no-repeat;
width: 273px;
height: 186px;
- flex-shrink: 0;
}
.saveLayoutPanel-buttonsContainer {
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
index a86abd873..f8817823c 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx
@@ -1,8 +1,9 @@
-import { ChangeEvent, useEffect, useState } from "react";
-import { Input, Button, FormField, FormFieldLabel, Text } from "@salt-ds/core";
-import { ComboBox, Checkbox, RadioButton } from "@finos/vuu-ui-controls";
-import { takeScreenshot } from "@finos/vuu-utils";
+import { Checkbox, ComboBox, RadioButton } from "@finos/vuu-ui-controls";
+import { takeScreenshot } from "./screenshot-utils";
+import { Button, FormField, FormFieldLabel, Input, Text } from "@salt-ds/core";
+import { ChangeEvent, useEffect, useMemo, useState } from "react";
import { LayoutMetadataDto } from "./layoutTypes";
+import { getAuthDetailsFromCookies } from "../login";
import "./SaveLayoutPanel.css";
@@ -32,12 +33,20 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
const [checkValues, setCheckValues] = useState handleLoadLayout(metadata?.id)}
+ >
+
+
+
+
+ {metadata?.name}
+
+
+ {`${metadata?.user}, ${metadata?.created}`}
+
@@ -119,15 +144,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
- {screenshot ? (
-
- ) : (
- No screenshot available
- )}
+ {screenshotContent}
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/screenshot-utils.ts b/vuu-ui/packages/vuu-shell/src/layout-management/screenshot-utils.ts
new file mode 100644
index 000000000..144e4ac3c
--- /dev/null
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/screenshot-utils.ts
@@ -0,0 +1,31 @@
+import { toPng } from "html-to-image";
+
+/**
+ * Takes a screenshot of the given node and returns the base64 encoded image url
+ * @param node HTMLElement to take screenshot of
+ * @returns Base64 encoded image url
+ */
+export const takeScreenshot = (node: HTMLElement): Promise => {
+ return new Promise((resolve, reject) => {
+ toPng(node, {
+ cacheBust: true /*,
+ filter: (child) =>
+ // remove content of table rows
+ child.nodeType === Node.TEXT_NODE ||
+ child.getAttribute("role") !== "row",*/,
+ })
+ .then((screenshot) => {
+ if (!screenshot) {
+ reject(new Error("No Screenshot available"));
+ }
+ resolve(screenshot);
+ })
+ .catch((error: Error) => {
+ console.error(
+ "the following error occurred while taking a screenshot of a DOMNode",
+ error
+ );
+ reject(new Error("Error taking screenshot"));
+ });
+ });
+};
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
index 178795ce8..8b371efdb 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -8,25 +8,27 @@ import React, {
import {
ApplicationJSON,
ApplicationSettings,
- loadingApplicationJson,
LayoutJSON,
- LayoutPersistenceManager,
- LocalLayoutPersistenceManager,
- RemoteLayoutPersistenceManager,
resolveJSONPath,
- defaultApplicationJson,
ApplicationSetting,
} from "@finos/vuu-layout";
import { NotificationLevel, useNotifications } from "@finos/vuu-popups";
import { LayoutMetadata, LayoutMetadataDto } from "./layoutTypes";
+import {
+ defaultApplicationJson,
+ PersistenceManager,
+ loadingApplicationJson,
+ LocalPersistenceManager,
+ RemotePersistenceManager,
+} from "../persistence-management";
-let _persistenceManager: LayoutPersistenceManager;
+let _persistenceManager: PersistenceManager;
const getPersistenceManager = () => {
if (_persistenceManager === undefined) {
_persistenceManager = process.env.LOCAL
- ? new LocalLayoutPersistenceManager()
- : new RemoteLayoutPersistenceManager();
+ ? new LocalPersistenceManager()
+ : new RemotePersistenceManager();
}
return _persistenceManager;
};
@@ -237,7 +239,7 @@ export const LayoutManagementProvider = (
getPersistenceManager()
.loadLayout(id)
.then((layoutJson) => {
- const { layout: currentLayout } = applicationJSONRef.current;
+ const { layout: currentLayout } = applicationJSONRef.current;
setApplicationLayout({
...currentLayout,
children: (currentLayout.children || []).concat(layoutJson),
diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx
index d6ca3515b..6f36ed978 100644
--- a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx
+++ b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.tsx
@@ -2,12 +2,12 @@ import { VuuLogo } from "@finos/vuu-icons";
import { Stack, useLayoutProviderDispatch } from "@finos/vuu-layout";
import { LayoutResizeAction } from "@finos/vuu-layout/src/layout-reducer";
import { Tab, Tabstrip } from "@finos/vuu-ui-controls";
-import cx from "classnames";
-import { LayoutsList } from "../layout-management";
+import { useThemeAttributes } from "@finos/vuu-utils";
+import cx from "clsx";
import { CSSProperties, HTMLAttributes, useCallback, useState } from "react";
import { FeatureProps } from "../feature";
import { FeatureList } from "../feature-list";
-import { useThemeAttributes } from "../theme-provider";
+import { LayoutList } from "../layout-management";
import "./LeftNav.css";
@@ -182,7 +182,7 @@ export const LeftNav = (props: LeftNavProps) => {
diff --git a/vuu-ui/packages/vuu-shell/src/login/LoginPanel.tsx b/vuu-ui/packages/vuu-shell/src/login/LoginPanel.tsx
index b01ffacfa..b78a0800e 100644
--- a/vuu-ui/packages/vuu-shell/src/login/LoginPanel.tsx
+++ b/vuu-ui/packages/vuu-shell/src/login/LoginPanel.tsx
@@ -9,7 +9,7 @@ import {
import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
import { VuuInput } from "@finos/vuu-ui-controls";
import { VuuLogo } from "./VuuLogo";
-import cx from "classnames";
+import cx from "clsx";
import "./LoginPanel.css";
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts b/vuu-ui/packages/vuu-shell/src/persistence-management/LocalPersistenceManager.ts
similarity index 80%
rename from vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
rename to vuu-ui/packages/vuu-shell/src/persistence-management/LocalPersistenceManager.ts
index 929c70058..56648dffe 100644
--- a/vuu-ui/packages/vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
+++ b/vuu-ui/packages/vuu-shell/src/persistence-management/LocalPersistenceManager.ts
@@ -1,29 +1,32 @@
+import { ApplicationJSON, LayoutJSON } from "@finos/vuu-layout";
+import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
+import { getAuthDetailsFromCookies } from "@finos/vuu-shell";
+import { formatDate, getUniqueId } from "@finos/vuu-utils";
+
+import { defaultApplicationJson } from "./defaultApplicationJson";
+import { PersistenceManager } from "./PersistenceManager";
import {
Layout,
LayoutMetadata,
LayoutMetadataDto,
WithId,
-} from "@finos/vuu-shell";
-import {
- ApplicationJSON,
- LayoutJSON,
- LayoutPersistenceManager,
-} from "@finos/vuu-layout";
-import { getLocalEntity, saveLocalEntity } from "@finos/vuu-filters";
-import { formatDate, getUniqueId } from "@finos/vuu-utils";
+} from "../layout-management";
-import { defaultApplicationJson } from "./defaultApplicationJson";
+const baseMetadataSaveLocation = "layouts/metadata";
+const baseLayoutsSaveLocation = "layouts/layouts";
-const metadataSaveLocation = "layouts/metadata";
-const layoutsSaveLocation = "layouts/layouts";
+export class LocalPersistenceManager implements PersistenceManager {
+ username: string = getAuthDetailsFromCookies()[0];
+ metadataSaveLocation = `${baseMetadataSaveLocation}/${this.username}`;
+ layoutsSaveLocation = `${baseLayoutsSaveLocation}/${this.username}`;
-export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
- #urlKey = "api/vui";
+ #urlKey = `api/vui/${this.username}`;
constructor(urlKey?: string) {
if (urlKey) {
this.#urlKey = urlKey;
}
}
+
createLayout(
metadata: LayoutMetadataDto,
layout: LayoutJSON
@@ -35,7 +38,7 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
const newMetadata: LayoutMetadata = {
...metadata,
id,
- created: formatDate("dd.mm.yyyy")(new Date()),
+ created: formatDate({ date: "dd.mm.yyyy" })(new Date()),
};
this.saveLayoutsWithMetadata(
@@ -106,7 +109,7 @@ export class LocalLayoutPersistenceManager implements LayoutPersistenceManager {
loadMetadata(): Promise
-
-
- ListItem={HistoryListItem}
- className="vuuUserPanel-history"
- onSelect={handleHisorySelected}
- selected={selected}
- source={history}
- />
-
- );
-});
diff --git a/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.css b/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.css
deleted file mode 100644
index 1d2e0eb9a..000000000
--- a/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.vuuUserProfile {
- --svg-icon: var(--svg-user);
-}
diff --git a/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.tsx b/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.tsx
deleted file mode 100644
index 32775e278..000000000
--- a/vuu-ui/packages/vuu-shell/src/user-profile/UserProfile.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from "@salt-ds/core";
-import { DropdownBase } from "@salt-ds/lab";
-import { UserSolidIcon } from "@salt-ds/icons";
-import { UserPanel } from "./UserPanel";
-
-import "./UserProfile.css";
-import { VuuUser } from "../shell";
-
-export interface UserProfileProps {
- layoutId: string;
- loginUrl?: string;
- onNavigate: (id: string) => void;
- user: VuuUser;
-}
-
-export const UserProfile = ({
- layoutId,
- loginUrl,
- onNavigate,
- user,
-}: UserProfileProps) => {
- const handleNavigate = (id: string) => {
- onNavigate(id);
- };
-
- return (
-
-
-
-
-
);
-};
+},
+dataAndColumnUnchanged);
registerComponent(
"vuu.price-move-background",
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css
similarity index 100%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.css
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.css
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx
similarity index 96%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.tsx
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx
index 611492243..35737802a 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/BackgroundCellConfigurationEditor.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx
@@ -7,7 +7,7 @@ import { Dropdown, SingleSelectionHandler } from "@finos/vuu-ui-controls";
import "./BackgroundCellConfigurationEditor.css";
import { useCallback, useState } from "react";
-import { ColumnDescriptorCustomRenderer } from "packages/vuu-table-types";
+import type { ColumnDescriptorCustomRenderer } from "@finos/vuu-table-types";
const classBase = "vuuBackgroundCellConfiguration";
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/FlashingBackground.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundKeyframes.css
similarity index 74%
rename from vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/FlashingBackground.css
rename to vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundKeyframes.css
index 39d4277fc..b791e8260 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers-next/background-cell/FlashingBackground.css
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundKeyframes.css
@@ -1,61 +1,77 @@
-/* @property --background-cell-background {
- syntax: '{arrow}
+ {arrow}
{valueFormatter(row[dataIdx])}
- {contentForType}
+ {formattingSettingsForType}
{ConfigEditor ? (
);
};
+
+function formattingSettingsByColType(props: FormattingSettingsProps) {
+ const { column } = props;
+
+ switch (column.serverDataType) {
+ case "double":
+ case "int":
+ return
+> = ({ column, onChangeFormatting: onChange }) => {
+ const formatting = getTypeFormattingFromColumn(column);
+ const { pattern = fallbackDateTimePattern } = formatting;
+ const toggleValue = useMemo(() => getToggleValue(pattern), [pattern]);
+
+ const [fallbackState, setFallbackState] = useState>(
+ {
+ time: pattern.time ?? defaultPatternsByType.time,
+ date: pattern.date ?? defaultPatternsByType.date,
+ }
+ );
+
+ const onPatternChange = useCallback(
+ (pattern: DateTimePattern) => onChange({ ...formatting, pattern }),
+ [onChange, formatting]
+ );
+
+ const onDropdownChange = useCallback<
+ (
+ key: T
+ ) => SingleSelectionHandler[T]>
+ >(
+ (key) => (_, p) => {
+ const updatedPattern = { ...(pattern ?? {}), [key]: p };
+ setFallbackState((s) => ({
+ time: updatedPattern.time ?? s.time,
+ date: updatedPattern.date ?? s.date,
+ }));
+ onPatternChange(updatedPattern);
+ },
+ [onPatternChange, pattern]
+ );
+
+ const onToggleChange = useCallback(
+ (evnt: SyntheticEvent) => {
+ const value = evnt.currentTarget.value as ToggleValue;
+ switch (value) {
+ case "time":
+ return onPatternChange({
+ [value]: pattern[value] ?? fallbackState[value],
+ });
+ case "date":
+ return onPatternChange({
+ [value]: pattern[value] ?? fallbackState[value],
+ });
+ case "both":
+ return onPatternChange({
+ time: pattern.time ?? fallbackState.time,
+ date: pattern.date ?? fallbackState.date,
+ });
+ }
+ },
+ [onPatternChange, pattern, fallbackState]
+ );
+
+ return (
+ <>
+
+ {"Display"}
+
+ {toggleValues.map((v) => (
+
+ {v.toUpperCase()}
+
+ ))}
+
+
+
+ {(["date", "time"] as const)
+ .filter((v) => !!pattern[v])
+ .map((v) => (
+
+ {`${labelByType[v]} pattern`}
+ [typeof v]>
+ onSelectionChange={onDropdownChange(v)}
+ selected={pattern[v]}
+ source={supportedDateTimePatterns[v]}
+ width="100%"
+ />
+
+ ))}
+
+ );
+};
+
+const labelByType = { date: "Date", time: "Time" } as const;
+
+const toggleValues = ["date", "time", "both"] as const;
+
+type ToggleValue = (typeof toggleValues)[number];
+
+function getToggleValue(pattern: DateTimePattern): ToggleValue {
+ return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.css b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.css
new file mode 100644
index 000000000..3fda3137e
--- /dev/null
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.css
@@ -0,0 +1,6 @@
+.vuuLongColumnFormattingSettings {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding-top: 6px;
+}
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.tsx b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.tsx
new file mode 100644
index 000000000..410138d47
--- /dev/null
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/LongTypeFormattingSettings.tsx
@@ -0,0 +1,58 @@
+import React, { useCallback } from "react";
+import {
+ FormField,
+ FormFieldLabel,
+ ToggleButton,
+ ToggleButtonGroup,
+} from "@salt-ds/core";
+import { isDateTimeColumn, isTypeDescriptor } from "@finos/vuu-utils";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings";
+import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings";
+import { FormattingSettingsProps } from "./types";
+
+import "./LongTypeFormattingSettings.css";
+
+const classBase = "vuuLongColumnFormattingSettings";
+
+export const LongTypeFormattingSettings: React.FC = (
+ props
+) => {
+ const { column, onChangeType } = props;
+ const type = isTypeDescriptor(column.type) ? column.type.name : column.type;
+
+ const handleToggleChange = useCallback(
+ (event: React.SyntheticEvent) => {
+ const value = event.currentTarget.value as ToggleValue;
+ onChangeType(value);
+ },
+ [onChangeType]
+ );
+
+ return (
+ {
- column: ColumnDescriptor;
- onConfigChange: (config: TableConfig) => void;
- onCancelCreateColumn: () => void;
- onCreateCalculatedColumn: (column: ColumnDescriptor) => void;
- tableConfig: TableConfig;
- vuuTable: VuuTable;
-}
-
export const ColumnSettingsPanel = ({
column: columnProp,
onCancelCreateColumn,
@@ -62,6 +51,7 @@ export const ColumnSettingsPanel = ({
onChangeCalculatedColumnName,
onChangeFormatting,
onChangeRendering,
+ onChangeType,
onEditCalculatedColumn,
onInputCommit,
onSave,
@@ -76,7 +66,6 @@ export const ColumnSettingsPanel = ({
const {
serverDataType,
align = getDefaultAlignment(serverDataType),
- name,
pin,
width,
} = column;
@@ -172,6 +161,7 @@ export const ColumnSettingsPanel = ({
column={column}
onChangeFormatting={onChangeFormatting}
onChangeRendering={onChangeRendering}
+ onChangeType={onChangeType}
/>
{editCalculatedColumn ? (
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-settings/useColumnSettings.ts b/vuu-ui/packages/vuu-table-extras/src/column-settings/useColumnSettings.ts
index 0ac991b6c..c8ae62036 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-settings/useColumnSettings.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/column-settings/useColumnSettings.ts
@@ -2,6 +2,8 @@ import {
ColumnDescriptor,
TableConfig,
ColumnTypeFormatting,
+ ColumnSettingsProps,
+ ColumnTypeSimple,
} from "@finos/vuu-table-types";
import {
@@ -12,6 +14,7 @@ import {
isValidPinLocation,
setCalculatedColumnName,
updateColumnRenderProps,
+ updateColumnFormatting,
updateColumnType,
} from "@finos/vuu-utils";
import {
@@ -22,7 +25,6 @@ import {
useRef,
useState,
} from "react";
-import { ColumnSettingsProps } from "./ColumnSettingsPanel";
const integerCellRenderers: CellRendererDescriptor[] = [
{
@@ -50,6 +52,10 @@ const stringCellRenderers: CellRendererDescriptor[] = [
...getRegisteredCellRenderers("string"),
];
+const booleanCellRenderers: CellRendererDescriptor[] = [
+ ...getRegisteredCellRenderers("boolean"),
+];
+
const getAvailableCellRenderers = (
column: ColumnDescriptor
): CellRendererDescriptor[] => {
@@ -62,6 +68,8 @@ const getAvailableCellRenderers = (
return integerCellRenderers;
case "double":
return doubleCellRenderers;
+ case "boolean":
+ return booleanCellRenderers;
default:
return stringCellRenderers;
}
@@ -180,13 +188,22 @@ export const useColumnSettings = ({
const handleChangeFormatting = useCallback(
(formatting: ColumnTypeFormatting) => {
- const newColumn: ColumnDescriptor = updateColumnType(column, formatting);
+ const newColumn = updateColumnFormatting(column, formatting);
setColumn(newColumn);
onConfigChange(replaceColumn(tableConfig, newColumn));
},
[column, onConfigChange, tableConfig]
);
+ const handleChangeType = useCallback(
+ (type: ColumnTypeSimple) => {
+ const updatedColumn = updateColumnType(column, type);
+ setColumn(updatedColumn);
+ onConfigChange(replaceColumn(tableConfig, updatedColumn));
+ },
+ [column, onConfigChange, tableConfig]
+ );
+
const handleChangeRendering = useCallback(
(renderProps) => {
if (renderProps) {
@@ -247,6 +264,7 @@ export const useColumnSettings = ({
onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
onChangeFormatting: handleChangeFormatting,
onChangeRendering: handleChangeRendering,
+ onChangeType: handleChangeType,
onEditCalculatedColumn: handleEditCalculatedcolumn,
onInputCommit: handleInputCommit,
onSave: handleSaveCalculatedColumn,
diff --git a/vuu-ui/packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx b/vuu-ui/packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx
index 655db1446..8580ba340 100644
--- a/vuu-ui/packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx
@@ -1,9 +1,9 @@
-import { DataSource } from "@finos/vuu-data";
+import { DataSource } from "@finos/vuu-data-types";
+import { VuuRange } from "@finos/vuu-protocol-types";
+import cx from "clsx";
import { HTMLAttributes, useEffect, useState } from "react";
-import cx from "classnames";
import "./DatasourceStats.css";
-import { VuuRange } from "@finos/vuu-protocol-types";
interface DataSourceStatsProps extends HTMLAttributes {
dataSource: DataSource;
diff --git a/vuu-ui/packages/vuu-table-extras/src/index.ts b/vuu-ui/packages/vuu-table-extras/src/index.ts
index a1fcb8c9f..8833d7355 100644
--- a/vuu-ui/packages/vuu-table-extras/src/index.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/index.ts
@@ -1,6 +1,5 @@
export * from "./cell-edit-validators";
export * from "./cell-renderers";
-export * from "./cell-renderers-next";
export * from "./column-list";
export * from "./column-settings";
export * from "./column-expression-input";
@@ -8,4 +7,3 @@ export * from "./column-expression-panel";
export * from "./column-formatting-settings";
export * from "./datasource-stats";
export * from "./table-settings";
-export * from "./useTableAndColumnSettings";
diff --git a/vuu-ui/packages/vuu-table-extras/src/table-settings/TableSettingsPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/table-settings/TableSettingsPanel.tsx
index 2662cf925..7da4e5782 100644
--- a/vuu-ui/packages/vuu-table-extras/src/table-settings/TableSettingsPanel.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/table-settings/TableSettingsPanel.tsx
@@ -6,9 +6,7 @@ import {
ToggleButton,
ToggleButtonGroup,
} from "@salt-ds/core";
-import { DataSourceConfig, SchemaColumn } from "@finos/vuu-data";
-import { TableConfig } from "@finos/vuu-table-types";
-import { HTMLAttributes } from "react";
+import { TableSettingsProps } from "@finos/vuu-table-types";
import { ColumnList } from "../column-list";
import { useTableSettings } from "./useTableSettings";
@@ -16,15 +14,6 @@ import "./TableSettingsPanel.css";
const classBase = "vuuTableSettingsPanel";
-export interface TableSettingsProps extends HTMLAttributes {
- availableColumns: SchemaColumn[];
- onAddCalculatedColumn: () => void;
- onConfigChange: (config: TableConfig) => void;
- onDataSourceConfigChange: (dataSOurceConfig: DataSourceConfig) => void;
- onNavigateToColumn?: (columnName: string) => void;
- tableConfig: TableConfig;
-}
-
/**
The TableSettingsPanel assumes 'ownership' of the tableSettings.
It updates the settings in state locally and notifies caller of
@@ -37,7 +26,6 @@ export const TableSettingsPanel = ({
onDataSourceConfigChange,
onNavigateToColumn,
tableConfig: tableConfigProp,
- ...htmlAttributes
}: TableSettingsProps) => {
const {
columnItems,
@@ -55,7 +43,7 @@ export const TableSettingsPanel = ({
});
return (
-
+
+ {"Type inferred as"}
+
+ {toggleValues.map((v) => (
+
+ {v.toUpperCase()}
+
+ ))}
+
+
+
+ {isDateTimeColumn(column) ? (
+
+ );
+};
+
+const toggleValues = ["number", "date/time"] as const;
+type ToggleValue = (typeof toggleValues)[number];
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts
index 5fb5a4db1..ed9c25e9b 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/index.ts
@@ -1,2 +1,3 @@
export * from "./ColumnFormattingPanel";
-export * from "./NumericFormattingSettings";
+export * from "./BaseNumericFormattingSettings";
+export * from "./DateTimeFormattingSettings";
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts
new file mode 100644
index 000000000..981194aa5
--- /dev/null
+++ b/vuu-ui/packages/vuu-table-extras/src/column-formatting-settings/types.ts
@@ -0,0 +1,13 @@
+import {
+ ColumnDescriptor,
+ ColumnTypeFormatting,
+ ColumnTypeSimple,
+} from "@finos/vuu-table-types";
+
+export interface FormattingSettingsProps<
+ T extends ColumnDescriptor = ColumnDescriptor
+> {
+ column: T;
+ onChangeFormatting: (formatting: ColumnTypeFormatting) => void;
+ onChangeType: (type: ColumnTypeSimple) => void;
+}
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx
index 572ef49ff..93f7be278 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx
@@ -1,13 +1,12 @@
+import { ColumnDescriptor } from "@finos/vuu-table-types";
import {
List,
ListItem,
ListItemProps,
ListProps,
} from "@finos/vuu-ui-controls";
-import { Checkbox } from "@salt-ds/core";
-import { Switch } from "@salt-ds/lab";
-import cx from "classnames";
-import { ColumnDescriptor } from "@finos/vuu-table-types";
+import { Checkbox, Switch } from "@salt-ds/core";
+import cx from "clsx";
import {
HTMLAttributes,
MouseEventHandler,
@@ -15,9 +14,9 @@ import {
useCallback,
} from "react";
import { ColumnItem } from "../table-settings";
+import { getColumnLabel } from "@finos/vuu-utils";
import "./ColumnList.css";
-import { getColumnLabel } from "@finos/vuu-utils";
const classBase = "vuuColumnList";
const classBaseListItem = "vuuColumnListItem";
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnNameLabel.tsx b/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnNameLabel.tsx
index 088eab448..d37f9cee7 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnNameLabel.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnNameLabel.tsx
@@ -1,5 +1,5 @@
import { ColumnDescriptor } from "@finos/vuu-table-types";
-import cx from "classnames";
+import cx from "clsx";
import {
getCalculatedColumnDetails,
diff --git a/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnSettingsPanel.tsx b/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnSettingsPanel.tsx
index c0cb8e6f3..990cb857d 100644
--- a/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnSettingsPanel.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/column-settings/ColumnSettingsPanel.tsx
@@ -1,5 +1,4 @@
-import { ColumnDescriptor, TableConfig } from "@finos/vuu-table-types";
-import { VuuTable } from "@finos/vuu-protocol-types";
+import { ColumnDescriptor, ColumnSettingsProps } from "@finos/vuu-table-types";
import { VuuInput } from "@finos/vuu-ui-controls";
import {
getCalculatedColumnName,
@@ -13,8 +12,7 @@ import {
ToggleButton,
ToggleButtonGroup,
} from "@salt-ds/core";
-import cx from "classnames";
-import { HTMLAttributes } from "react";
+import cx from "clsx";
import { ColumnExpressionPanel } from "../column-expression-panel";
import { ColumnFormattingPanel } from "../column-formatting-settings";
import { ColumnNameLabel } from "./ColumnNameLabel";
@@ -33,15 +31,6 @@ const getColumnLabel = (column: ColumnDescriptor) => {
}
};
-export interface ColumnSettingsProps extends HTMLAttributes
+
Column Labels
void;
-
export type TableHeading = { label: string; width: number };
export type TableHeadings = TableHeading[][];
@@ -81,7 +78,7 @@ export interface GridConfig extends TableConfig {
export declare type ColumnTypeFormatting = {
alignOnDecimals?: boolean;
decimals?: number;
- pattern?: string;
+ pattern?: DateTimePattern;
zeroPad?: boolean;
};
@@ -132,7 +129,19 @@ export interface ValueListRenderer {
values: string[];
}
-export declare type DateTimeColumnTypeSimple = "date" | "time";
+export declare type DateTimeColumnTypeSimple = "date/time";
+
+type DateTimeColumnType =
+ | DateTimeColumnTypeSimple
+ | (Omit & { name: DateTimeColumnTypeSimple });
+
+export declare type DateTimeColumnDescriptor = Omit<
+ ColumnDescriptor,
+ "type"
+> & {
+ type: DateTimeColumnType;
+};
+
export declare type ColumnTypeSimple =
| "string"
| "number"
@@ -184,9 +193,9 @@ export interface ColumnDescriptor {
colHeaderLabelRenderer?: string;
editable?: boolean;
flex?: number;
- /**
+ /**
Optional additional level(s) of heading to display above label.
- May span multiple columns, if multiple adjacent columns declare
+ May span multiple columns, if multiple adjacent columns declare
same heading at same level.
*/
heading?: string[];
@@ -275,3 +284,50 @@ export type GridAction =
| ScrollAction
| GridActionResizeCol
| GridActionSelection;
+
+/**
+ * Describes the props for a Column Configuration Editor, for which
+ * an implementation is provided in vuu-table-extras
+ */
+export interface ColumnSettingsProps {
+ column: ColumnDescriptor;
+ onConfigChange: (config: TableConfig) => void;
+ onCancelCreateColumn: () => void;
+ onCreateCalculatedColumn: (column: ColumnDescriptor) => void;
+ tableConfig: TableConfig;
+ vuuTable: VuuTable;
+}
+
+/**
+ * Describes the props for a Table Configuration Editor, for which
+ * an implementation is provided in vuu-table-extras
+ */
+export interface TableSettingsProps {
+ availableColumns: SchemaColumn[];
+ onAddCalculatedColumn: () => void;
+ onConfigChange: (config: TableConfig) => void;
+ onDataSourceConfigChange: (dataSOurceConfig: DataSourceConfig) => void;
+ onNavigateToColumn?: (columnName: string) => void;
+ tableConfig: TableConfig;
+}
+
+export type DefaultColumnConfiguration = (
+ tableName: T,
+ columnName: string
+) => Partial | undefined;
+
+export type ResizePhase = "begin" | "resize" | "end";
+
+export type TableColumnResizeHandler = (
+ phase: ResizePhase,
+ columnName: string,
+ width?: number
+) => void;
+
+export interface HeaderCellProps extends HTMLAttributes {
+ classBase?: string;
+ column: RuntimeColumnDescriptor;
+ onResize?: TableColumnResizeHandler;
+}
+
+export type TableConfigChangeHandler = (config: TableConfig) => void;
diff --git a/vuu-ui/packages/vuu-table/package.json b/vuu-ui/packages/vuu-table/package.json
index b852b632c..f46fa8447 100644
--- a/vuu-ui/packages/vuu-table/package.json
+++ b/vuu-ui/packages/vuu-table/package.json
@@ -8,22 +8,21 @@
"build": "node ../../scripts/run-build.mjs",
"type-defs": "node ../../scripts/build-type-defs.mjs"
},
- "dependencies": {
- "@salt-ds/core": "1.8.0",
- "@salt-ds/icons": "1.5.1",
- "@salt-ds/lab": "1.0.0-alpha.15",
- "@finos/vuu-data": "0.0.26",
- "@finos/vuu-data-react": "0.0.26",
+ "devDependencies": {
"@finos/vuu-data-types": "0.0.26",
+ "@finos/vuu-table-types": "0.0.26",
+ "@finos/vuu-protocol-types": "0.0.26"
+ },
+ "dependencies": {
+ "@salt-ds/core": "1.13.2",
"@finos/vuu-layout": "0.0.26",
"@finos/vuu-popups": "0.0.26",
- "@finos/vuu-table-extras": "0.0.26",
"@finos/vuu-ui-controls": "0.0.26",
"@finos/vuu-utils": "0.0.26"
},
"peerDependencies": {
- "classnames": "^2.2.6",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
}
}
diff --git a/vuu-ui/packages/vuu-table/src/Row.tsx b/vuu-ui/packages/vuu-table/src/Row.tsx
index 29a4f45ec..1309e484d 100644
--- a/vuu-ui/packages/vuu-table/src/Row.tsx
+++ b/vuu-ui/packages/vuu-table/src/Row.tsx
@@ -13,7 +13,7 @@ import {
isNotHidden,
RowSelected,
} from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
import { CSSProperties, memo, MouseEvent, useCallback } from "react";
import { TableCell, TableGroupCell } from "./table-cell";
@@ -92,7 +92,7 @@ export const Row = memo(
return (
void;
-
export type TableNavigationStyle = "none" | "cell" | "row";
export interface TableProps
@@ -55,6 +54,10 @@ export interface TableProps
* required if a fully featured column picker is to be available
*/
availableColumns?: SchemaColumn[];
+ /**
+ * Provide configuration settings for Table. At minimun, column
+ * descriptors must be provided.
+ */
config: TableConfig;
dataSource: DataSource;
disableFocus?: boolean;
@@ -76,7 +79,7 @@ export interface TableProps
* is changed. By persisting this value and providing it to the Table as a
* prop, table state can be persisted across sessions.
*/
- onConfigChange?: (config: TableConfig) => void;
+ onConfigChange?: TableConfigChangeHandler;
onDragStart?: DragStartHandler;
onDrop?: (dragDropState: DragDropState) => void;
/**
@@ -229,6 +232,7 @@ const TableCore = ({
{showColumnHeaders ? (
@@ -304,6 +308,15 @@ export const Table = forwardRef(function TableNext(
const [size, setSize] = useState();
+ if (config === undefined) {
+ throw Error(
+ "vuu Table requires config prop. Minimum config is list of Column Descriptors"
+ );
+ }
+ if (dataSource === undefined) {
+ throw Error("vuu Table requires dataSource prop");
+ }
+
return (
p.column === p1.column &&
- p.row[p.columnMap[p.column.name]] === p1.row[p1.columnMap[p1.column.name]];
+ p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) ===
+ p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx
index a5a6f9c5d..ad09492df 100644
--- a/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx
@@ -21,7 +21,7 @@ export const CheckboxCell: React.FC = memo(
[onCommit]
);
- return !!column.editable ? (
+ return column.editable ? (
{
- classBase?: string;
- column: RuntimeColumnDescriptor;
- onResize?: TableColumnResizeHandler;
-}
-
export const HeaderCell = ({
className: classNameProp,
column,
diff --git a/vuu-ui/packages/vuu-table/src/index.ts b/vuu-ui/packages/vuu-table/src/index.ts
index f9e796339..558444450 100644
--- a/vuu-ui/packages/vuu-table/src/index.ts
+++ b/vuu-ui/packages/vuu-table/src/index.ts
@@ -1,6 +1,7 @@
export { GroupHeaderCellNext } from "./header-cell";
export * from "./header-cell";
export * from "./Table";
+export * from "./table-cell";
export * from "./table-config";
export * from "./cell-renderers";
export type { RowProps } from "./Row";
diff --git a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css
index be1a1fa67..3c0852460 100644
--- a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css
+++ b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css
@@ -2,27 +2,27 @@
border-right-color: var(--cell-borderColor);
border-right-style: solid;
border-right-width: 1px;
- display: inline-block;
- height: 100%;
- overflow:hidden;
- padding: 0 11px 0 12px;
- text-overflow: ellipsis;
- vertical-align: top;
- }
+ display: inline-block;
+ height: 100%;
+ overflow:hidden;
+ padding: var(--vuuTableCell-padding, 0 11px 0 12px);
+ text-overflow: ellipsis;
+ vertical-align: top;
+}
- .vuuTableCell-right {
+.vuuTableCell-right {
text-align: right;
- }
+}
- .vuuTableCell-editable {
+.vuuTableCell-editable {
display: inline-flex;
line-height: 18px;
padding-bottom: 1px;
padding-top: 1px;
text-overflow: unset;
- }
+}
- .vuuTableCell:focus {
+.vuuTableCell:focus {
outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px);
outline-offset: -2px;
/** This is to achieve a white background to outline dashes */
diff --git a/vuu-ui/packages/vuu-table/src/table-cell/TableGroupCell.tsx b/vuu-ui/packages/vuu-table/src/table-cell/TableGroupCell.tsx
index 1d72534ac..ecfd39455 100644
--- a/vuu-ui/packages/vuu-table/src/table-cell/TableGroupCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/table-cell/TableGroupCell.tsx
@@ -2,7 +2,7 @@ import { GroupColumnDescriptor, TableCellProps } from "@finos/vuu-table-types";
import { getGroupValueAndOffset, metadataKeys } from "@finos/vuu-utils";
import { MouseEvent, useCallback } from "react";
import { useCell } from "../useCell";
-import cx from "classnames";
+import cx from "clsx";
import "./TableGroupCell.css";
diff --git a/vuu-ui/packages/vuu-table/src/table-dom-utils.ts b/vuu-ui/packages/vuu-table/src/table-dom-utils.ts
index 798b4373a..da10cb990 100644
--- a/vuu-ui/packages/vuu-table/src/table-dom-utils.ts
+++ b/vuu-ui/packages/vuu-table/src/table-dom-utils.ts
@@ -40,7 +40,7 @@ export function getRowIndex(rowEl?: HTMLElement) {
if (rowEl) {
const idx: string | null = rowEl.ariaRowIndex;
if (idx !== null) {
- return parseInt(idx, 10);
+ return parseInt(idx, 10) - 1;
}
}
return -1;
diff --git a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
index dc45e0de2..8ec2dfbe8 100644
--- a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
+++ b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
@@ -1,13 +1,13 @@
+import { VuuSortType } from "@finos/vuu-protocol-types";
import {
ColumnDescriptor,
RuntimeColumnDescriptor,
+ TableColumnResizeHandler,
TableConfig,
TableHeadings,
} from "@finos/vuu-table-types";
import { isGroupColumn, isNotHidden } from "@finos/vuu-utils";
-import cx from "classnames";
-import { VuuSortType } from "packages/vuu-protocol-types";
-import { TableColumnResizeHandler } from "../column-resizing";
+import cx from "clsx";
import { GroupHeaderCellNext, HeaderCell } from "../header-cell";
import { useTableHeader } from "./useTableHeader";
diff --git a/vuu-ui/packages/vuu-table/src/table-header/useTableHeader.ts b/vuu-ui/packages/vuu-table/src/table-header/useTableHeader.ts
index 12e965742..3792f8d68 100644
--- a/vuu-ui/packages/vuu-table/src/table-header/useTableHeader.ts
+++ b/vuu-ui/packages/vuu-table/src/table-header/useTableHeader.ts
@@ -43,7 +43,11 @@ export const useTableHeader = ({
? tableConfig.columns.findIndex(ofColumn(nextColumn))
: -1;
- onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+ if (moveTo > moveFrom && insertPos !== -1) {
+ onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));
+ } else {
+ onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
+ }
},
[columns, onMoveColumn, tableConfig.columns]
);
diff --git a/vuu-ui/packages/vuu-table/src/useCell.ts b/vuu-ui/packages/vuu-table/src/useCell.ts
index dfbad9cf4..b5c23be13 100644
--- a/vuu-ui/packages/vuu-table/src/useCell.ts
+++ b/vuu-ui/packages/vuu-table/src/useCell.ts
@@ -1,6 +1,6 @@
import { RuntimeColumnDescriptor } from "@finos/vuu-table-types";
import { getColumnStyle } from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
import { useMemo } from "react";
export const useCell = (
diff --git a/vuu-ui/packages/vuu-table/src/useDataSource.ts b/vuu-ui/packages/vuu-table/src/useDataSource.ts
index d02def46b..d220b00a9 100644
--- a/vuu-ui/packages/vuu-table/src/useDataSource.ts
+++ b/vuu-ui/packages/vuu-table/src/useDataSource.ts
@@ -1,13 +1,13 @@
import {
DataSource,
+ DataSourceRow,
DataSourceSubscribedMessage,
- isVuuFeatureInvocation,
SubscribeCallback,
VuuFeatureInvocationMessage,
-} from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+} from "@finos/vuu-data-types";
import { VuuRange } from "@finos/vuu-protocol-types";
import { getFullRange, NULL_RANGE } from "@finos/vuu-utils";
+import { GridAction } from "@finos/vuu-table-types";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { MovingWindow } from "./moving-window";
@@ -21,6 +21,11 @@ export interface DataSourceHookProps {
renderBufferSize?: number;
}
+export const isVuuFeatureInvocation = (
+ action: GridAction
+): action is VuuFeatureInvocationMessage =>
+ action.type === "vuu-link-created" || action.type === "vuu-link-removed";
+
export const useDataSource = ({
dataSource,
onFeatureInvocation,
diff --git a/vuu-ui/packages/vuu-table/src/useSelection.ts b/vuu-ui/packages/vuu-table/src/useSelection.ts
index cd202317b..658d2e81e 100644
--- a/vuu-ui/packages/vuu-table/src/useSelection.ts
+++ b/vuu-ui/packages/vuu-table/src/useSelection.ts
@@ -1,9 +1,4 @@
-import {
- RowClickHandler,
- Selection,
- SelectionChangeHandler,
- TableSelectionModel,
-} from "@finos/vuu-table-types";
+import { RowClickHandler, TableSelectionModel } from "@finos/vuu-table-types";
import {
deselectItem,
dispatchMouseEvent,
@@ -11,7 +6,11 @@ import {
metadataKeys,
selectItem,
} from "@finos/vuu-utils";
-import { DataSourceRow } from "packages/vuu-data-types";
+import {
+ DataSourceRow,
+ Selection,
+ SelectionChangeHandler,
+} from "@finos/vuu-data-types";
import {
KeyboardEvent,
KeyboardEventHandler,
diff --git a/vuu-ui/packages/vuu-table/src/useTable.ts b/vuu-ui/packages/vuu-table/src/useTable.ts
index 599ee316e..b336aa318 100644
--- a/vuu-ui/packages/vuu-table/src/useTable.ts
+++ b/vuu-ui/packages/vuu-table/src/useTable.ts
@@ -1,25 +1,20 @@
import {
DataSourceConfig,
+ DataSourceRow,
DataSourceSubscribedMessage,
- JsonDataSource,
-} from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+ SelectionChangeHandler,
+} from "@finos/vuu-data-types";
import {
ColumnDescriptor,
DataCellEditHandler,
RowClickHandler,
RuntimeColumnDescriptor,
- SelectionChangeHandler,
+ TableColumnResizeHandler,
TableConfig,
TableSelectionModel,
} from "@finos/vuu-table-types";
-import {
- MeasuredProps,
- MeasuredSize,
- useLayoutEffectSkipFirst,
-} from "@finos/vuu-layout";
+import { MeasuredProps, MeasuredSize } from "@finos/vuu-layout";
import { VuuRange, VuuSortType } from "@finos/vuu-protocol-types";
-import { useTableAndColumnSettings } from "@finos/vuu-table-extras";
import {
DragStartHandler,
useDragDropNext as useDragDrop,
@@ -32,6 +27,7 @@ import {
isValidNumber,
metadataKeys,
updateColumn,
+ useLayoutEffectSkipFirst,
} from "@finos/vuu-utils";
import {
FocusEvent,
@@ -42,7 +38,6 @@ import {
useMemo,
useState,
} from "react";
-import { TableColumnResizeHandler } from "./column-resizing";
import {
buildContextMenuDescriptors,
useHandleTableContextMenu,
@@ -66,6 +61,7 @@ import {
import { useTableScroll } from "./useTableScroll";
import { useTableViewport } from "./useTableViewport";
import { useVirtualViewport } from "./useVirtualViewport";
+import { useTableAndColumnSettings } from "./useTableAndColumnSettings";
const stripInternalProperties = (tableConfig: TableConfig): TableConfig => {
return tableConfig;
@@ -249,6 +245,7 @@ export const useTable = ({
const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
dataSource,
+ // We need to factor this out of Table
onFeatureInvocation,
renderBufferSize,
onSizeChange: onDataRowcountChange,
@@ -436,11 +433,11 @@ export const useTable = ({
const key = row[KEY];
if (row[IS_EXPANDED]) {
- (dataSource as JsonDataSource).closeTreeNode(key, true);
+ dataSource.closeTreeNode(key, true);
if (isJson) {
const idx = columns.indexOf(column);
- const rows = (dataSource as JsonDataSource).getRowsAtDepth(idx + 1);
- if (!rows.some((row) => row[IS_EXPANDED] || row[IS_LEAF])) {
+ const rows = dataSource.getRowsAtDepth?.(idx + 1);
+ if (rows && !rows.some((row) => row[IS_EXPANDED] || row[IS_LEAF])) {
dispatchColumnAction({
type: "hideColumns",
columns: columns.slice(idx + 2),
@@ -450,10 +447,10 @@ export const useTable = ({
} else {
dataSource.openTreeNode(key);
if (isJson) {
- const childRows = (dataSource as JsonDataSource).getChildRows(key);
+ const childRows = dataSource.getChildRows?.(key);
const idx = columns.indexOf(column) + 1;
const columnsToShow = [columns[idx]];
- if (childRows.some((row) => row[IS_LEAF])) {
+ if (childRows && childRows.some((row) => row[IS_LEAF])) {
columnsToShow.push(columns[idx + 1]);
}
if (columnsToShow.some((col) => col.hidden)) {
@@ -606,6 +603,9 @@ export const useTable = ({
const onMoveColumn = useCallback(
(columns: ColumnDescriptor[]) => {
+ console.log(`useTable onMoveColumn`, {
+ columns,
+ });
const newTableConfig = {
...tableConfig,
columns,
diff --git a/vuu-ui/packages/vuu-table-extras/src/useTableAndColumnSettings.ts b/vuu-ui/packages/vuu-table/src/useTableAndColumnSettings.ts
similarity index 95%
rename from vuu-ui/packages/vuu-table-extras/src/useTableAndColumnSettings.ts
rename to vuu-ui/packages/vuu-table/src/useTableAndColumnSettings.ts
index 17229d727..8c7ad6ba7 100644
--- a/vuu-ui/packages/vuu-table-extras/src/useTableAndColumnSettings.ts
+++ b/vuu-ui/packages/vuu-table/src/useTableAndColumnSettings.ts
@@ -1,13 +1,14 @@
-import { DataSourceConfig, SchemaColumn } from "@finos/vuu-data";
-import { ColumnDescriptor, TableConfig } from "@finos/vuu-table-types";
+import { DataSourceConfig, SchemaColumn } from "@finos/vuu-data-types";
import { useLayoutProviderDispatch } from "@finos/vuu-layout";
import {
+ ColumnDescriptor,
ColumnSettingsProps,
+ TableConfig,
TableSettingsProps,
-} from "@finos/vuu-table-extras";
-import { ColumnActionColumnSettings } from "@finos/vuu-table";
+} from "@finos/vuu-table-types";
import { getCalculatedColumnType } from "@finos/vuu-utils";
import { useCallback, useRef, useState } from "react";
+import { ColumnActionColumnSettings } from "./useTableModel";
export interface TableAndColumnSettingsHookProps {
availableColumns: SchemaColumn[];
diff --git a/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts b/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts
index 6c715ffdd..24c6a0a38 100644
--- a/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts
+++ b/vuu-ui/packages/vuu-table/src/useTableContextMenu.ts
@@ -1,5 +1,4 @@
-import { DataSource } from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+import { DataSource, DataSourceRow } from "@finos/vuu-data-types";
import { RuntimeColumnDescriptor } from "@finos/vuu-table-types";
import { useContextMenu as usePopupContextMenu } from "@finos/vuu-popups";
import { buildColumnMap } from "@finos/vuu-utils";
diff --git a/vuu-ui/packages/vuu-table/src/useTableModel.ts b/vuu-ui/packages/vuu-table/src/useTableModel.ts
index de734cf38..d20e8fcba 100644
--- a/vuu-ui/packages/vuu-table/src/useTableModel.ts
+++ b/vuu-ui/packages/vuu-table/src/useTableModel.ts
@@ -1,7 +1,8 @@
import {
ColumnDescriptor,
- RuntimeColumnDescriptor,
PinLocation,
+ ResizePhase,
+ RuntimeColumnDescriptor,
TableAttributes,
TableConfig,
TableHeadings,
@@ -11,6 +12,8 @@ import {
applyGroupByToColumns,
applySortToColumns,
getCellRenderer,
+ getColumnHeaderContentRenderer,
+ getColumnHeaderLabelRenderer,
getColumnLabel,
getTableHeadings,
getValueFormatter,
@@ -26,8 +29,11 @@ import {
subscribedOnly,
} from "@finos/vuu-utils";
-import { DataSource, DataSourceConfig } from "@finos/vuu-data";
-import { TableSchema } from "@finos/vuu-data/src/message-utils";
+import {
+ DataSource,
+ DataSourceConfig,
+ TableSchema,
+} from "@finos/vuu-data-types";
import { VuuColumnDataType, VuuTable } from "@finos/vuu-protocol-types";
import { buildValidationChecker } from "@finos/vuu-ui-controls";
import { Reducer, useReducer } from "react";
@@ -108,8 +114,6 @@ export interface ColumnActionPin {
pin?: PinLocation;
}
-export type ResizePhase = "begin" | "resize" | "end";
-
export interface ColumnActionResize {
type: "resizeColumn";
column: RuntimeColumnDescriptor;
@@ -240,7 +244,6 @@ type InitialConfig = {
function init({ dataSource, tableConfig }: InitialConfig): InternalTableModel {
const { columns, ...tableAttributes } = tableConfig;
- console.log(JSON.stringify(tableAttributes, null, 2));
const { config: dataSourceConfig, tableSchema } = dataSource;
const runtimeColumns = columns
.filter(subscribedOnly(dataSourceConfig?.columns))
@@ -297,12 +300,12 @@ const columnDescriptorToRuntimeColumDescriptor =
...rest
} = column;
- const runtimeColumnWithDefaults = {
+ const runtimeColumnWithDefaults: RuntimeColumnDescriptor = {
...rest,
align,
CellRenderer: getCellRenderer(column),
- HeaderCellLabelRenderer: getCellRenderer(column, "col-label"),
- HeaderCellContentRenderer: getCellRenderer(column, "col-content"),
+ HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),
+ HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),
clientSideEditValidationCheck: hasValidationRules(column.type)
? buildValidationChecker(column.type.renderer.rules)
: undefined,
diff --git a/vuu-ui/packages/vuu-table/src/useVirtualViewport.ts b/vuu-ui/packages/vuu-table/src/useVirtualViewport.ts
index c57a40f75..b95486ccf 100644
--- a/vuu-ui/packages/vuu-table/src/useVirtualViewport.ts
+++ b/vuu-ui/packages/vuu-table/src/useVirtualViewport.ts
@@ -2,7 +2,7 @@ import { RuntimeColumnDescriptor } from "@finos/vuu-table-types";
import { VuuRange } from "@finos/vuu-protocol-types";
import { RowAtPositionFunc } from "@finos/vuu-utils";
import { useCallback, useEffect, useRef } from "react";
-import { ViewportMeasurements } from "@finos/vuu-table";
+import { ViewportMeasurements } from "./useTableViewport";
export interface VirtualViewportHookProps {
columns: RuntimeColumnDescriptor[];
@@ -12,13 +12,12 @@ export interface VirtualViewportHookProps {
}
export const useVirtualViewport = ({
- columns,
getRowAtPosition,
setRange,
viewportMeasurements,
}: VirtualViewportHookProps) => {
const firstRowRef = useRef(0);
- const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+ const { rowCount: viewportRowCount } = viewportMeasurements;
const handleVerticalScroll = useCallback(
(scrollTop: number) => {
diff --git a/vuu-ui/packages/vuu-theme/css/components/checkbox.css b/vuu-ui/packages/vuu-theme/css/components/checkbox.css
index 68d813b98..a1c3cf0a5 100644
--- a/vuu-ui/packages/vuu-theme/css/components/checkbox.css
+++ b/vuu-ui/packages/vuu-theme/css/components/checkbox.css
@@ -42,8 +42,8 @@
background-color: var(--vuu-icon-color);
left: var(--vuu-icon-left, auto);
height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+ mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
- mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
position: absolute;
diff --git a/vuu-ui/packages/vuu-theme/css/components/switch.css b/vuu-ui/packages/vuu-theme/css/components/switch.css
index c40cde19a..e032d64e8 100644
--- a/vuu-ui/packages/vuu-theme/css/components/switch.css
+++ b/vuu-ui/packages/vuu-theme/css/components/switch.css
@@ -1,7 +1,6 @@
.saltSwitch {
--switch-color: var(--vuu-color-gray-45);
--vuu-icon-left: -1px;
-
}
.saltSwitch-track {
@@ -13,7 +12,7 @@
width: 26px;
}
-.saltSwitch:hover .saltSwitch-track {
+.saltSwitch:not(.saltSwitch-disabled):hover .saltSwitch-track {
--switch-color: var(--vuu-color-pink-10);
}
@@ -30,6 +29,10 @@
--switch-color: var(--vuu-color-purple-10);
}
+.saltSwitch-disabled {
+ --switch-color: var(--vuu-color-gray-30);
+}
+
.saltSwitch-checked .saltSwitch-thumb,
.saltSwitch-checked:hover .saltSwitch-thumb {
background-color: white;
@@ -42,8 +45,8 @@
content: "";
left: var(--vuu-icon-left, auto);
height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
+ mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
-webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size);
- mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
position: absolute;
diff --git a/vuu-ui/packages/vuu-theme/css/palette/neutral.css b/vuu-ui/packages/vuu-theme/css/palette/neutral.css
index d5ed43163..db95dd59c 100644
--- a/vuu-ui/packages/vuu-theme/css/palette/neutral.css
+++ b/vuu-ui/packages/vuu-theme/css/palette/neutral.css
@@ -1,6 +1,6 @@
.vuu-theme[data-mode="light"] {
--salt-palette-neutral-primary-background: var(--salt-color-white);
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
+ --salt-palette-neutral-primary-background-disabled: var(--vuu-color-gray-30);
--salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
--salt-palette-neutral-primary-foreground: var(--vuu-color-gray-80);
--salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
diff --git a/vuu-ui/packages/vuu-ui-controls/package.json b/vuu-ui/packages/vuu-ui-controls/package.json
index 9bbf380eb..02ccb0c13 100644
--- a/vuu-ui/packages/vuu-ui-controls/package.json
+++ b/vuu-ui/packages/vuu-ui-controls/package.json
@@ -10,8 +10,7 @@
"type-defs": "node ../../scripts/build-type-defs.mjs"
},
"dependencies": {
- "@salt-ds/core": "1.8.0",
- "@finos/vuu-data": "0.0.26",
+ "@salt-ds/core": "1.13.2",
"@finos/vuu-data-types": "0.0.26",
"@finos/vuu-table-types": "0.0.26",
"@finos/vuu-layout": "0.0.26",
@@ -20,8 +19,9 @@
"@finos/vuu-utils": "0.0.26"
},
"peerDependencies": {
- "classnames": "^2.2.6",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
- }
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
+ },
+ "sideEffects": false
}
diff --git a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx
index 84618f28b..dd328424d 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx
@@ -1,4 +1,4 @@
-import { useId } from "@finos/vuu-layout";
+import { useId } from "@finos/vuu-utils";
import { Input, InputProps } from "@salt-ds/core";
import {
ForwardedRef,
@@ -16,8 +16,8 @@ import {
} from "../common-hooks";
import { DropdownBase, DropdownBaseProps } from "../dropdown";
import { List, ListProps } from "../list";
-import { useCombobox } from "./useCombobox";
import { ChevronIcon } from "../list/ChevronIcon";
+import { useCombobox } from "./useCombobox";
//TODO why do we need onSelect from input ?
export interface ComboBoxProps<
diff --git a/vuu-ui/packages/vuu-ui-controls/src/combo-box/useCombobox.ts b/vuu-ui/packages/vuu-ui-controls/src/combo-box/useCombobox.ts
index a5063293b..10bb9aa73 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/combo-box/useCombobox.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/combo-box/useCombobox.ts
@@ -1,5 +1,5 @@
+import { useLayoutEffectSkipFirst } from "@finos/vuu-utils";
import { InputProps, useControlled } from "@salt-ds/core";
-import { useLayoutEffectSkipFirst } from "@finos/vuu-layout";
import {
ChangeEvent,
FocusEvent,
@@ -107,7 +107,7 @@ export const useCombobox = ({
}: ComboboxHookProps): ComboboxHookResult => {
const isMultiSelect = isMultiSelection(selectionStrategy);
- const { data, setFilterPattern } = collectionHook;
+ const { setFilterPattern } = collectionHook;
const setHighlightedIndexRef = useRef void)>(null);
// used to track multi selection
const selectedRef = useRef- (isMultiSelect ? [] : null);
diff --git a/vuu-ui/packages/vuu-ui-controls/src/common-hooks/use-resize-observer.ts b/vuu-ui/packages/vuu-ui-controls/src/common-hooks/use-resize-observer.ts
index fe088d564..9e5bb6999 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/common-hooks/use-resize-observer.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/common-hooks/use-resize-observer.ts
@@ -62,11 +62,6 @@ const getTargetSize = (
}
};
-const isScrollAttribute = {
- scrollHeight: true,
- scrollWidth: true,
-};
-
// TODO should we make this create-on-demand
const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
for (const entry of entries) {
@@ -78,7 +73,7 @@ const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
contentBoxSize;
const { onResize, measurements } = observedTarget;
let sizeChanged = false;
- for (let [dimension, size] of Object.entries(measurements)) {
+ for (const [dimension, size] of Object.entries(measurements)) {
const newSize = getTargetSize(
target as HTMLElement,
{ height, width, contentHeight, contentWidth },
diff --git a/vuu-ui/packages/vuu-ui-controls/src/cycle-state-button/CycleStateButton.tsx b/vuu-ui/packages/vuu-ui-controls/src/cycle-state-button/CycleStateButton.tsx
index 9f9de984c..8dd90fd7a 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/cycle-state-button/CycleStateButton.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/cycle-state-button/CycleStateButton.tsx
@@ -1,10 +1,10 @@
import { Button, ButtonProps } from "@salt-ds/core";
-import cx from "classnames";
-import { CommitResponse } from "packages/vuu-table-types";
-import {
+import cx from "clsx";
+import type { CommitResponse } from "@finos/vuu-table-types";
+import type {
VuuColumnDataType,
VuuRowDataItemType,
-} from "packages/vuu-protocol-types";
+} from "@finos/vuu-protocol-types";
import { ForwardedRef, forwardRef, SyntheticEvent, useCallback } from "react";
const classBase = "vuuCycleStateButton";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/Draggable.tsx b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/Draggable.tsx
index 1e8d3be34..75a79cd1a 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/Draggable.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/Draggable.tsx
@@ -1,5 +1,5 @@
import { useForkRef } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import {
CSSProperties,
forwardRef,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts
index a39d84e65..2267fde99 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/drag-drop/index.ts
@@ -1,4 +1,6 @@
export * from "./dragDropTypesNext";
export * from "./DragDropProvider";
+export * from "./DragDropState";
export * from "./useDragDropNext";
export * from "./drop-target-utils";
+export * from "./useGlobalDragDrop";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.tsx b/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.tsx
index fa04c1bca..f6ff75c0c 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.tsx
@@ -8,7 +8,7 @@ import {
useRef,
} from "react";
-import { useId } from "@finos/vuu-layout";
+import { useId } from "@finos/vuu-utils";
import {
CollectionProvider,
itemToString as defaultItemToString,
@@ -17,10 +17,10 @@ import {
useCollectionItems,
} from "../common-hooks";
import { List, ListProps } from "../list";
+import { forwardCallbackProps } from "../utils";
import { DropdownBase, MaybeChildProps } from "./DropdownBase";
import { DropdownButton } from "./DropdownButton";
import { DropdownBaseProps } from "./dropdownTypes";
-import { forwardCallbackProps } from "../utils";
import { useDropdown } from "./useDropdown";
export interface DropdownProps<
diff --git a/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownBase.tsx b/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownBase.tsx
index 3e932f2af..bb71b5655 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownBase.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownBase.tsx
@@ -1,11 +1,11 @@
-import cx from "classnames";
+import { PopupComponent as Popup, Portal } from "@finos/vuu-popups";
+import { useId } from "@finos/vuu-utils";
import { useForkRef } from "@salt-ds/core";
+import cx from "clsx";
import { Children, cloneElement, forwardRef, useRef } from "react";
import { forwardCallbackProps } from "../utils";
import { DropdownBaseProps } from "./dropdownTypes";
import { useDropdownBase } from "./useDropdownBase";
-import { useId } from "@finos/vuu-layout";
-import { PopupComponent as Popup, Portal } from "@finos/vuu-popups";
import "./Dropdown.css";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownButton.tsx b/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownButton.tsx
index 6ea5fc8b8..5c7b62434 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownButton.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/dropdown/DropdownButton.tsx
@@ -1,5 +1,5 @@
import { Button, ButtonProps } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { AriaAttributes, ForwardedRef, forwardRef } from "react";
import "./DropdownButton.css";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx
index f7cace02f..67f55d2a3 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/editable-label/EditableLabel.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
import {
ChangeEvent,
KeyboardEvent,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts b/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
index 274905063..1e49c84bf 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
@@ -1,5 +1,5 @@
import { DataItemCommitHandler } from "@finos/vuu-table-types";
-import { useLayoutEffectSkipFirst } from "@finos/vuu-layout";
+import { useLayoutEffectSkipFirst } from "@finos/vuu-utils";
import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
import { dispatchCustomEvent } from "@finos/vuu-utils";
import {
diff --git a/vuu-ui/packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx
index 54fa022bd..ee9abafdd 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/expando-input/ExpandoInput.tsx
@@ -1,6 +1,6 @@
-import { VuuInput, VuuInputProps } from "@finos/vuu-ui-controls";
-import cx from "classnames";
+import cx from "clsx";
import { ForwardedRef, forwardRef } from "react";
+import { VuuInput, VuuInputProps } from "../vuu-input";
import "./ExpandoInput.css";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx
index 85eda99c2..889a5921f 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx
@@ -1,16 +1,16 @@
-import { CheckboxIcon } from "@finos/vuu-ui-controls/src/list/CheckboxIcon";
+import { CheckboxIcon } from "../list/CheckboxIcon";
import "./Checkbox.css";
type CheckboxProps = {
- onToggle: () => void,
- className?: string,
- checked: boolean,
- label: string
-}
+ onToggle: () => void;
+ className?: string;
+ checked: boolean;
+ label: string;
+};
export const Checkbox = (props: CheckboxProps): JSX.Element => {
- const {onToggle, checked, label} = props;
+ const { onToggle, checked, label } = props;
return (
, "onSelect"> {
TableProps: Pick;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useDataSource.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useDataSource.ts
index 4fe080729..9dafe4575 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useDataSource.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useDataSource.ts
@@ -1,7 +1,10 @@
//TODO stansardise this
-import { DataSource, SubscribeCallback } from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+import {
+ DataSource,
+ DataSourceRow,
+ SubscribeCallback,
+} from "@finos/vuu-data-types";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { MovingWindow } from "./moving-window";
export interface DataSourceHookProps {
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts
index 37f03a6ba..309bc2508 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts
@@ -1,5 +1,4 @@
-import { DataSource } from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+import { DataSource, DataSourceRow } from "@finos/vuu-data-types";
import { ColumnDescriptor } from "@finos/vuu-table-types";
import {
TableRowSelectHandler,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx
index f38449ad4..20a885b01 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.tsx
@@ -1,4 +1,4 @@
-import { DataSource } from "@finos/vuu-data";
+import { DataSource } from "@finos/vuu-data-types";
import { TableConfig } from "@finos/vuu-table-types";
import { registerComponent } from "@finos/vuu-layout";
@@ -8,16 +8,19 @@ import {
useControlledTableNavigation,
} from "@finos/vuu-table";
import { Input } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { HTMLAttributes, RefCallback, useCallback } from "react";
-import "./SearchCell";
+import { SearchCell } from "./SearchCell";
import "./InstrumentSearch.css";
-import { VuuTable } from "packages/vuu-protocol-types";
import { useInstrumentSearch } from "./useInstrumentSearch";
const classBase = "vuuInstrumentSearch";
+if (typeof SearchCell !== "function") {
+ console.warn("Instrument Search: SearchCell module not loaded ");
+}
+
const defaultTableConfig: TableConfig = {
columns: [
{ name: "bbg", hidden: true },
@@ -38,10 +41,9 @@ const defaultTableConfig: TableConfig = {
export interface InstrumentSearchProps extends HTMLAttributes {
TableProps?: Partial;
autoFocus?: boolean;
- dataSource?: DataSource;
+ dataSource: DataSource;
placeHolder?: string;
searchColumns?: string[];
- table?: VuuTable;
}
const searchIcon = ;
@@ -53,13 +55,11 @@ export const InstrumentSearch = ({
dataSource: dataSourceProp,
placeHolder,
searchColumns,
- table,
...htmlAttributes
}: InstrumentSearchProps) => {
const { dataSource, onChange, searchState } = useInstrumentSearch({
dataSource: dataSourceProp,
searchColumns,
- table,
});
const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useDataSource.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useDataSource.ts
index 4fe080729..9dafe4575 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useDataSource.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useDataSource.ts
@@ -1,7 +1,10 @@
//TODO stansardise this
-import { DataSource, SubscribeCallback } from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
+import {
+ DataSource,
+ DataSourceRow,
+ SubscribeCallback,
+} from "@finos/vuu-data-types";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { MovingWindow } from "./moving-window";
export interface DataSourceHookProps {
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useInstrumentSearch.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useInstrumentSearch.ts
index 3f90ca8e0..237ba5557 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useInstrumentSearch.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-search/useInstrumentSearch.ts
@@ -1,25 +1,15 @@
-import { DataSource, RemoteDataSource } from "@finos/vuu-data";
-import { getVuuTableSchema } from "@finos/vuu-data-react";
-import { useViewContext } from "@finos/vuu-layout";
import { FormEventHandler, useCallback, useMemo, useState } from "react";
import { InstrumentSearchProps } from "./InstrumentSearch";
export interface InstrumentSearchHookProps
- extends Pick<
- InstrumentSearchProps,
- "dataSource" | "searchColumns" | "table"
- > {
+ extends Pick {
label?: string;
}
export const useInstrumentSearch = ({
- dataSource: dataSourceProp,
+ dataSource,
searchColumns = ["description"],
- table,
}: InstrumentSearchHookProps) => {
- const [dataSource, setDataSource] = useState(dataSourceProp);
- const { loadSession, saveSession } = useViewContext();
-
const [searchState, setSearchState] = useState<{
searchText: string;
filter: string;
@@ -31,32 +21,6 @@ export const useInstrumentSearch = ({
[searchColumns]
);
- useMemo(() => {
- if (dataSourceProp === undefined) {
- if (table) {
- const sessionKey = `instrument-search-${table.module}-${table.table}`;
- const dataSource = loadSession?.(sessionKey) as DataSource;
- if (dataSource) {
- setDataSource(dataSource);
- } else {
- getVuuTableSchema(table).then((tableSchema) => {
- const newDataSource = new RemoteDataSource({
- columns: tableSchema.columns.map((col) => col.name),
- // sort: { sortDefs: [{ column: "description", sortType: "A" }] },
- table: tableSchema.table,
- });
- setDataSource(newDataSource);
- saveSession?.(newDataSource, sessionKey);
- });
- }
- } else {
- throw Error(
- `useInstrumentSearch, if dataSource ismnot provided as prop, Vuu table must be provided`
- );
- }
- }
- }, [dataSourceProp, loadSession, saveSession, table]);
-
const handleChange = useCallback(
(evt) => {
const { value } = evt.target as HTMLInputElement;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.tsx
index 4521b67e6..ab0701a16 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.tsx
@@ -1,7 +1,7 @@
// TODO why do we need explicit React import - its not needed anywhere else
// but we see a 'React is not defined' issue in showcase without it
import React, { HTMLAttributes } from "react";
-import cx from "classnames";
+import cx from "clsx";
import "./CheckboxIcon.css";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx
index 25e060d61..851849b80 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
import { HTMLAttributes } from "react";
import "./ChevronIcon.css";
@@ -13,7 +13,5 @@ interface ChevronProps extends HTMLAttributes {
export const ChevronIcon = (props: ChevronProps) => {
const { direction, ...htmlAttributes } = props;
- return (
-
- )
+ return ;
};
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx
index 18e56040e..ad2b5d9a2 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx
@@ -1,6 +1,7 @@
-import { MeasuredContainer, MeasuredSize, useId } from "@finos/vuu-layout";
+import { MeasuredContainer, MeasuredSize } from "@finos/vuu-layout";
+import { useId } from "@finos/vuu-utils";
import { useForkRef } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import {
cloneElement,
ForwardedRef,
@@ -11,18 +12,18 @@ import {
useRef,
useState,
} from "react";
-import {
- isSelected,
- LIST_FOCUS_VISIBLE,
- useCollectionItems,
- useImperativeScrollingAPI,
-} from "./common-hooks";
import {
CollectionIndexer,
CollectionItem,
itemToString as defaultItemToString,
SelectionStrategy,
} from "../common-hooks";
+import {
+ isSelected,
+ LIST_FOCUS_VISIBLE,
+ useCollectionItems,
+ useImperativeScrollingAPI,
+} from "./common-hooks";
import { ListItem as DefaultListItem, ListItemProxy } from "./ListItem";
import { ListItemProps, ListProps } from "./listTypes";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.tsx
index cafbbfbc2..745071a93 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.tsx
@@ -1,5 +1,5 @@
import { ForwardedRef, forwardRef, HTMLAttributes } from "react";
-import cx from "classnames";
+import cx from "clsx";
import { ListItemProps, ListItemType } from "./listTypes";
import { Highlighter } from "./Highlighter";
import { CheckboxIcon } from "./CheckboxIcon";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx
index db2423404..0b514a7ba 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx
@@ -1,13 +1,10 @@
-import cx from "classnames";
+import cx from "clsx";
import "./RadioIcon.css";
const classBase = "vuuRadioIcon";
-export const RadioIcon = ({
- checked = false,
- ...htmlAttributes
-}) => (
+export const RadioIcon = ({ checked = false, ...htmlAttributes }) => (
) =>
Array.isArray(item.childNodes);
// TODO how do we determine this and where does this function belong = in the collectionHook ?
-const canSelectItem = (item: CollectionItem) => true;
+const canSelectItem = (_: CollectionItem) => true;
const toggleIconClicked = (el: HTMLElement) => {
const closestToggle = el.closest(
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/collection-item-utils.ts b/vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/collection-item-utils.ts
index 68782b4a3..511005e04 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/collection-item-utils.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/common-hooks/utils/collection-item-utils.ts
@@ -154,7 +154,7 @@ export const sourceItems = (
];
} else {
return source.map(
- (item: { description?: string; expanded?: boolean }, index) =>
+ (item: { description?: string; expanded?: boolean }) =>
({
childNodes: sourceItems(
(item as unknown as SourceGroup).childNodes,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts b/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts
index cfe5d99cd..4e34c13ac 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/list/useList.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffectSkipFirst } from "@finos/vuu-layout";
+import { useLayoutEffectSkipFirst } from "@finos/vuu-utils";
import {
KeyboardEvent,
MouseEvent,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx
index 454b13c67..8d9cd57ae 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/price-ticker/PriceTicker.tsx
@@ -5,7 +5,7 @@ import {
valueChangeDirection,
} from "@finos/vuu-utils";
import { HTMLAttributes, memo, useMemo, useRef } from "react";
-import cx from "classnames";
+import cx from "clsx";
const classBase = "vuuPriceTicker";
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
index dc6276f79..195d00d2d 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
@@ -1,6 +1,6 @@
// TODO close button needs to be a button. Hence tab needs to include 2 buttons
import { useForkRef } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { MenuActionHandler } from "@finos/vuu-data-types";
import {
FocusEvent,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
index e4d1bfe94..41e4a9703 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabMenu.tsx
@@ -5,7 +5,7 @@ import {
MenuBuilder,
} from "@finos/vuu-data-types";
import { useMemo } from "react";
-import cx from "classnames";
+import cx from "clsx";
import { closeCommand, MenuOptions, renameCommand } from "./TabMenuOptions";
import "./TabMenu.css";
@@ -57,7 +57,13 @@ export const TabMenu = ({
tabIndex: index,
},
],
- [allowClose, allowRename, controlledComponentId, index]
+ [
+ allowClose,
+ allowRename,
+ controlledComponentId,
+ controlledComponentTitle,
+ index,
+ ]
);
return (
@@ -69,6 +75,7 @@ export const TabMenu = ({
menuOptions={menuOptions}
onMenuClose={onMenuClose}
tabIndex={-1}
+ aria-label="context menu"
/>
);
};
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
index 1ebb1a1f8..fa84d4214 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
@@ -1,6 +1,7 @@
-import { asReactElements, OverflowContainer, useId } from "@finos/vuu-layout";
+import { asReactElements, OverflowContainer } from "@finos/vuu-layout";
+import { useId } from "@finos/vuu-utils";
import { Button } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import React, { useMemo, useRef } from "react";
import { TabProps, TabstripProps } from "./TabsTypes";
import { useTabstrip } from "./useTabstrip";
@@ -142,6 +143,7 @@ export const Tabstrip = ({
overflowIcon="more-horiz"
ref={rootRef}
style={style}
+ role="tablist"
>
{tabs}
diff --git a/vuu-ui/packages/vuu-ui-controls/src/tree/Tree.tsx b/vuu-ui/packages/vuu-ui-controls/src/tree/Tree.tsx
index e03b44012..ceb61922b 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/tree/Tree.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/tree/Tree.tsx
@@ -1,5 +1,5 @@
import { useForkRef, useIdMemo as useId } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import {
ForwardedRef,
forwardRef,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
index 00c3444d6..cd1ab740e 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
@@ -1,7 +1,8 @@
+import { Tooltip, useTooltip } from "@finos/vuu-popups";
import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
-import { isValidNumber } from "@finos/vuu-utils";
+import { isValidNumber, useId } from "@finos/vuu-utils";
import { Input, InputProps } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import {
FocusEventHandler,
ForwardedRef,
@@ -11,8 +12,6 @@ import {
SyntheticEvent,
useCallback,
} from "react";
-import { Tooltip, useTooltip } from "@finos/vuu-popups";
-import { useId } from "@finos/vuu-layout";
import "./VuuInput.css";
diff --git a/vuu-ui/packages/vuu-utils/package.json b/vuu-ui/packages/vuu-utils/package.json
index 9302ed323..6c16269d7 100644
--- a/vuu-ui/packages/vuu-utils/package.json
+++ b/vuu-ui/packages/vuu-utils/package.json
@@ -11,12 +11,14 @@
"type-defs": "node ../../scripts/build-type-defs.mjs"
},
"devDependencies": {
+ "@finos/vuu-data-types": "0.0.26",
"@finos/vuu-table-types": "0.0.26",
"@finos/vuu-filter-types": "0.0.26",
"@finos/vuu-protocol-types": "0.0.26"
},
"peerDependencies": {
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
- }
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
+ },
+ "sideEffects": false
}
diff --git a/vuu-ui/packages/vuu-shell/src/theme-provider/ThemeProvider.tsx b/vuu-ui/packages/vuu-utils/src/ThemeProvider.tsx
similarity index 97%
rename from vuu-ui/packages/vuu-shell/src/theme-provider/ThemeProvider.tsx
rename to vuu-ui/packages/vuu-utils/src/ThemeProvider.tsx
index 660e95bc7..10a322d72 100644
--- a/vuu-ui/packages/vuu-shell/src/theme-provider/ThemeProvider.tsx
+++ b/vuu-ui/packages/vuu-utils/src/ThemeProvider.tsx
@@ -6,7 +6,7 @@ import React, {
cloneElement,
useContext,
} from "react";
-import cx from "classnames";
+import cx from "clsx";
export const DEFAULT_DENSITY: Density = "medium";
export const DEFAULT_THEME = "salt-theme";
@@ -83,7 +83,7 @@ const createThemedChildren = (
} else {
console.warn(
`\nThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
- Wrap elements with a single container`
+ Wrap elements with a single container`
);
return children;
}
diff --git a/vuu-ui/packages/vuu-utils/src/column-utils.ts b/vuu-ui/packages/vuu-utils/src/column-utils.ts
index f61cddd1e..2e9ccb66a 100644
--- a/vuu-ui/packages/vuu-utils/src/column-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/column-utils.ts
@@ -1,34 +1,39 @@
-import type { SchemaColumn, TableSchema } from "@finos/vuu-data";
-import type { DataSourceFilter, DataSourceRow } from "@finos/vuu-data-types";
+import type {
+ DataSourceFilter,
+ DataSourceRow,
+ SchemaColumn,
+ TableSchema,
+} from "@finos/vuu-data-types";
+import type { Filter, MultiClauseFilter } from "@finos/vuu-filter-types";
+import type {
+ VuuAggregation,
+ VuuAggType,
+ VuuColumnDataType,
+ VuuDataRow,
+ VuuGroupBy,
+ VuuRowRecord,
+ VuuSort,
+} from "@finos/vuu-protocol-types";
import type {
ColumnAlignment,
ColumnDescriptor,
ColumnType,
ColumnTypeDescriptor,
+ ColumnTypeFormatting,
ColumnTypeRendering,
+ ColumnTypeSimple,
ColumnTypeWithValidationRules,
+ DefaultColumnConfiguration,
GroupColumnDescriptor,
- RuntimeColumnDescriptor,
+ LookupRenderer,
MappedValueTypeRenderer,
PinLocation,
+ RuntimeColumnDescriptor,
TableHeading,
TableHeadings,
- ColumnTypeFormatting,
- LookupRenderer,
ValueListRenderer,
- DateTimeColumnTypeSimple,
+ DateTimeColumnDescriptor,
} from "@finos/vuu-table-types";
-import type { Filter, MultiClauseFilter } from "@finos/vuu-filter-types";
-import type {
- VuuAggregation,
- VuuAggType,
- VuuColumnDataType,
- VuuDataRow,
- VuuGroupBy,
- VuuRowRecord,
- VuuSort,
-} from "@finos/vuu-protocol-types";
-import { DefaultColumnConfiguration } from "@finos/vuu-shell";
import type { CSSProperties } from "react";
import { moveItem } from "./array-utils";
import { isFilterClause, isMultiClauseFilter } from "./filter-utils";
@@ -127,22 +132,11 @@ export const isNumericColumn = ({ serverDataType, type }: ColumnDescriptor) => {
return false;
};
-type DateTimeColumnType =
- | DateTimeColumnTypeSimple
- | (Omit & { name: DateTimeColumnTypeSimple });
-
-export type DateTimeColumnDescriptor = Omit & {
- type: DateTimeColumnType;
-};
-
-export const isDateColumn = ({ type }: ColumnDescriptor) =>
- (isTypeDescriptor(type) ? type.name : type) === "date";
-export const isTimeColumn = ({ type }: ColumnDescriptor) =>
- (isTypeDescriptor(type) ? type.name : type) === "time";
export const isDateTimeColumn = (
column: ColumnDescriptor
): column is DateTimeColumnDescriptor =>
- isDateColumn(column) || isTimeColumn(column);
+ (isTypeDescriptor(column.type) ? column.type.name : column.type) ===
+ "date/time";
export const isPinned = (column: ColumnDescriptor) =>
typeof column.pin === "string";
@@ -161,21 +155,6 @@ export const toColumnDescriptor = (name: string): ColumnDescriptor => ({
name,
});
-export const isSimpleColumnType = (value: unknown): value is ColumnTypeSimple =>
- typeof value === "string" &&
- ["string", "number", "boolean", "json", "date", "time", "checkbox"].includes(
- value
- );
-
-export declare type ColumnTypeSimple =
- | "string"
- | "number"
- | "boolean"
- | "json"
- | "date"
- | "time"
- | "checkbox";
-
/**
*
*/
@@ -773,56 +752,41 @@ export const getDefaultColumnType = (
}
};
-export const updateColumnType = (
+export const updateColumnFormatting = <
+ T extends ColumnDescriptor = ColumnDescriptor
+>(
column: T,
formatting: ColumnTypeFormatting
): T => {
const { serverDataType, type = getDefaultColumnType(serverDataType) } =
column;
- if (typeof type === "string" || type === undefined) {
- return {
- ...column,
- type: {
- name: type,
- formatting,
- },
- } as T;
+ if (isTypeDescriptor(type)) {
+ return { ...column, type: { ...type, formatting } };
} else {
- return {
- ...column,
- type: {
- ...type,
- formatting,
- },
- } as T;
+ return { ...column, type: { name: type, formatting } };
}
};
+export function updateColumnType(
+ column: T,
+ type: ColumnTypeSimple
+): T {
+ return isTypeDescriptor(column.type)
+ ? { ...column, type: { ...column.type, name: type } }
+ : { ...column, type };
+}
+
export const updateColumnRenderProps = <
T extends ColumnDescriptor = ColumnDescriptor
>(
column: T,
renderer: ColumnTypeRendering
): T => {
- const { serverDataType, type } = column;
- if (type === undefined) {
- return {
- ...column,
- type: {
- name: getDefaultColumnType(serverDataType),
- renderer,
- },
- };
- } else if (isSimpleColumnType(type)) {
- return {
- ...column,
- type: {
- name: type,
- renderer,
- },
- };
- } else {
+ const { serverDataType, type = getDefaultColumnType(serverDataType) } =
+ column;
+
+ if (isTypeDescriptor(type)) {
return {
...column,
type: {
@@ -831,6 +795,8 @@ export const updateColumnRenderProps = <
renderer,
},
};
+ } else {
+ return { ...column, type: { name: type, renderer } };
}
};
diff --git a/vuu-ui/packages/vuu-utils/src/component-registry.ts b/vuu-ui/packages/vuu-utils/src/component-registry.ts
index cafc01cf7..5cc986061 100644
--- a/vuu-ui/packages/vuu-utils/src/component-registry.ts
+++ b/vuu-ui/packages/vuu-utils/src/component-registry.ts
@@ -4,6 +4,7 @@ import {
ColumnDescriptorCustomRenderer,
ColumnTypeRendering,
EditValidationRule,
+ HeaderCellProps,
TableCellRendererProps,
} from "@finos/vuu-table-types";
import {
@@ -11,7 +12,6 @@ import {
VuuRowDataItemType,
} from "@finos/vuu-protocol-types";
import { isTypeDescriptor, isColumnTypeRenderer } from "./column-utils";
-import { HeaderCellProps } from "@finos/vuu-table";
export interface CellConfigPanelProps extends HTMLAttributes {
onConfigChange: () => void;
@@ -33,6 +33,7 @@ export interface ConfigurationEditorProps {
export type ConfigEditorComponent = FC;
const cellRenderersMap = new Map>();
+const columnHeaderRenderersMap = new Map>();
const configEditorsMap = new Map>();
const cellConfigPanelsMap = new Map();
const editRuleValidatorsMap = new Map();
@@ -45,6 +46,8 @@ export type EditRuleValidator = (
export type ComponentType =
| "cell-renderer"
+ | "column-header-content-renderer"
+ | "column-header-label-renderer"
| "cell-config-panel"
| "data-edit-validator";
@@ -83,6 +86,16 @@ const isCellRenderer = (
component: unknown
): component is FC => type === "cell-renderer";
+const isColumnHeaderContentRenderer = (
+ type: ComponentType,
+ component: unknown
+): component is FC =>
+ type === "column-header-content-renderer";
+const isColumnHeaderLabelRenderer = (
+ type: ComponentType,
+ component: unknown
+): component is FC => type === "column-header-label-renderer";
+
const isCellConfigPanel = (
type: ComponentType,
component: unknown
@@ -107,6 +120,10 @@ export function registerComponent<
): void {
if (isCellRenderer(type, component)) {
cellRenderersMap.set(componentName, component);
+ } else if (isColumnHeaderContentRenderer(type, component)) {
+ columnHeaderRenderersMap.set(componentName, component);
+ } else if (isColumnHeaderLabelRenderer(type, component)) {
+ columnHeaderRenderersMap.set(componentName, component);
} else if (isCellConfigPanel(type, component)) {
cellConfigPanelsMap.set(componentName, component);
} else if (isEditRuleValidator(type, component)) {
@@ -144,16 +161,17 @@ export const getRegisteredCellRenderers = (
export const getCellRendererOptions = (renderName: string) =>
optionsMap.get(renderName);
-export function getCellRenderer(
- column: ColumnDescriptor,
- cellType: "cell" | "col-content" | "col-label" = "cell"
-) {
- if (cellType === "cell") {
- return dataCellRenderer(column);
- } else if (cellType === "col-label" && column.colHeaderLabelRenderer) {
- return cellRenderersMap.get(column.colHeaderLabelRenderer);
- } else if (cellType === "col-content" && column.colHeaderContentRenderer) {
- return cellRenderersMap.get(column.colHeaderContentRenderer);
+export function getCellRenderer(column: ColumnDescriptor) {
+ return dataCellRenderer(column);
+}
+export function getColumnHeaderContentRenderer(column: ColumnDescriptor) {
+ if (column.colHeaderContentRenderer) {
+ return columnHeaderRenderersMap.get(column.colHeaderContentRenderer);
+ }
+}
+export function getColumnHeaderLabelRenderer(column: ColumnDescriptor) {
+ if (column.colHeaderLabelRenderer) {
+ return columnHeaderRenderersMap.get(column.colHeaderLabelRenderer);
}
}
diff --git a/vuu-ui/packages/vuu-utils/src/datasource-action-utils.ts b/vuu-ui/packages/vuu-utils/src/datasource-action-utils.ts
new file mode 100644
index 000000000..09ac3f2ef
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/src/datasource-action-utils.ts
@@ -0,0 +1,31 @@
+import {
+ DataSourceMenusMessage,
+ DataSourceVisualLinkCreatedMessage,
+ DataSourceVisualLinkRemovedMessage,
+ DataSourceVisualLinksMessage,
+ VuuFeatureMessage,
+} from "@finos/vuu-data-types";
+import { GridAction } from "@finos/vuu-table-types";
+
+export const isVisualLinksAction = (
+ action: GridAction
+): action is DataSourceVisualLinksMessage => action.type === "vuu-links";
+
+export const isVisualLinkCreatedAction = (
+ action: GridAction
+): action is DataSourceVisualLinkCreatedMessage =>
+ action.type === "vuu-link-created";
+
+export const isVisualLinkRemovedAction = (
+ action: GridAction
+): action is DataSourceVisualLinkRemovedMessage =>
+ action.type === "vuu-link-removed";
+
+export const isViewportMenusAction = (
+ action: GridAction
+): action is DataSourceMenusMessage => action.type === "vuu-menu";
+
+export const isVuuFeatureAction = (
+ action: GridAction
+): action is VuuFeatureMessage =>
+ isViewportMenusAction(action) || isVisualLinksAction(action);
diff --git a/vuu-ui/packages/vuu-utils/src/datasource-utils.ts b/vuu-ui/packages/vuu-utils/src/datasource-utils.ts
new file mode 100644
index 000000000..5cf1f9939
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/src/datasource-utils.ts
@@ -0,0 +1,257 @@
+import {
+ ConnectionQualityMetrics,
+ ConnectionStatusMessage,
+ DataSourceConfig,
+ MenuRpcResponse,
+ RpcResponse,
+ TypeaheadSuggestionProvider,
+ VuuUIMessageIn,
+ VuuUIMessageInRPC,
+ VuuUIMessageInRPCEditReject,
+ VuuUIMessageInRPCEditResponse,
+ VuuUIMessageInTableMeta,
+ VuuUIMessageOutViewport,
+ WithFilter,
+ WithFullConfig,
+ WithGroupBy,
+ WithSort,
+} from "@finos/vuu-data-types";
+import {
+ LinkDescriptorWithLabel,
+ VuuFilter,
+ VuuSort,
+} from "@finos/vuu-protocol-types";
+
+export const NoFilter: VuuFilter = { filter: "" };
+export const NoSort: VuuSort = { sortDefs: [] };
+
+export const vanillaConfig: WithFullConfig = {
+ aggregations: [],
+ columns: [],
+ filter: NoFilter,
+ groupBy: [],
+ sort: NoSort,
+};
+
+type DataConfigPredicate = (
+ config: DataSourceConfig,
+ newConfig: DataSourceConfig
+) => boolean;
+
+const equivalentAggregations: DataConfigPredicate = (
+ { aggregations: agg1 },
+ { aggregations: agg2 }
+) =>
+ (agg1 === undefined && agg2?.length === 0) ||
+ (agg2 === undefined && agg1?.length === 0);
+
+const equivalentColumns: DataConfigPredicate = (
+ { columns: cols1 },
+ { columns: cols2 }
+) =>
+ (cols1 === undefined && cols2?.length === 0) ||
+ (cols2 === undefined && cols1?.length === 0);
+
+const equivalentFilter: DataConfigPredicate = (
+ { filter: f1 },
+ { filter: f2 }
+) =>
+ (f1 === undefined && f2?.filter === "") ||
+ (f2 === undefined && f1?.filter === "");
+
+const equivalentGroupBy: DataConfigPredicate = (
+ { groupBy: val1 },
+ { groupBy: val2 }
+) =>
+ (val1 === undefined && val2?.length === 0) ||
+ (val2 === undefined && val1?.length === 0);
+
+const equivalentSort: DataConfigPredicate = ({ sort: s1 }, { sort: s2 }) =>
+ (s1 === undefined && s2?.sortDefs.length === 0) ||
+ (s2 === undefined && s1?.sortDefs.length === 0);
+
+const exactlyTheSame = (a: unknown, b: unknown) => {
+ if (a === b) {
+ return true;
+ } else if (a === undefined && b === undefined) {
+ return true;
+ } else {
+ return false;
+ }
+};
+
+const aggregationsChanged: DataConfigPredicate = (config, newConfig) => {
+ const { aggregations: agg1 } = config;
+ const { aggregations: agg2 } = newConfig;
+ if (exactlyTheSame(agg1, agg2) || equivalentAggregations(config, newConfig)) {
+ return false;
+ } else if (agg1 === undefined || agg2 === undefined) {
+ return true;
+ } else if (agg1.length !== agg2.length) {
+ return true;
+ }
+ return agg1.some(
+ ({ column, aggType }, i) =>
+ column !== agg2[i].column || aggType !== agg2[i].aggType
+ );
+};
+
+export const columnsChanged: DataConfigPredicate = (config, newConfig) => {
+ const { columns: cols1 } = config;
+ const { columns: cols2 } = newConfig;
+
+ if (exactlyTheSame(cols1, cols2) || equivalentColumns(config, newConfig)) {
+ return false;
+ } else if (cols1 === undefined || cols2 === undefined) {
+ return true;
+ } else if (cols1?.length !== cols2?.length) {
+ return true;
+ }
+ return cols1.some((column, i) => column !== cols2?.[i]);
+};
+
+export const filterChanged: DataConfigPredicate = (c1, c2) => {
+ if (equivalentFilter(c1, c2)) {
+ return false;
+ } else {
+ return c1.filter?.filter !== c2.filter?.filter;
+ }
+};
+
+export const groupByChanged: DataConfigPredicate = (config, newConfig) => {
+ const { groupBy: g1 } = config;
+ const { groupBy: g2 } = newConfig;
+ if (exactlyTheSame(g1, g2) || equivalentGroupBy(config, newConfig)) {
+ return false;
+ } else if (g1 === undefined || g2 === undefined) {
+ return true;
+ } else if (g1?.length !== g2?.length) {
+ return true;
+ }
+ return g1.some((column, i) => column !== g2?.[i]);
+};
+
+const sortChanged: DataConfigPredicate = (config, newConfig) => {
+ const { sort: s1 } = config;
+ const { sort: s2 } = newConfig;
+ if (exactlyTheSame(s1, s2) || equivalentSort(config, newConfig)) {
+ return false;
+ } else if (s1 === undefined || s2 === undefined) {
+ return true;
+ } else if (s1?.sortDefs.length !== s2?.sortDefs.length) {
+ return true;
+ }
+ return s1.sortDefs.some(
+ ({ column, sortType }, i) =>
+ column !== s2.sortDefs[i].column || sortType !== s2.sortDefs[i].sortType
+ );
+};
+
+const visualLinkChanged: DataConfigPredicate = () => {
+ // TODO
+ return false;
+};
+
+export const configChanged = (
+ config: DataSourceConfig | undefined,
+ newConfig: DataSourceConfig | undefined
+) => {
+ if (exactlyTheSame(config, newConfig)) {
+ return false;
+ }
+
+ if (config === undefined || newConfig === undefined) {
+ return true;
+ }
+
+ return (
+ aggregationsChanged(config, newConfig) ||
+ columnsChanged(config, newConfig) ||
+ filterChanged(config, newConfig) ||
+ groupByChanged(config, newConfig) ||
+ sortChanged(config, newConfig) ||
+ visualLinkChanged(config, newConfig)
+ );
+};
+
+export const hasGroupBy = (config?: DataSourceConfig): config is WithGroupBy =>
+ config !== undefined &&
+ config.groupBy !== undefined &&
+ config.groupBy.length > 0;
+
+export const hasFilter = (config?: DataSourceConfig): config is WithFilter =>
+ config?.filter !== undefined && config.filter.filter.length > 0;
+
+export const hasSort = (config?: DataSourceConfig): config is WithSort =>
+ config?.sort !== undefined &&
+ Array.isArray(config.sort?.sortDefs) &&
+ config.sort.sortDefs.length > 0;
+
+export const isTypeaheadSuggestionProvider = (
+ source: unknown
+): source is TypeaheadSuggestionProvider =>
+ typeof (source as TypeaheadSuggestionProvider)["getTypeaheadSuggestions"] ===
+ "function";
+
+export const isTableSchema = (
+ message: VuuUIMessageIn
+): message is VuuUIMessageInTableMeta => message.type === "TABLE_META_RESP";
+
+export const isConnectionStatusMessage = (
+ msg: object | ConnectionStatusMessage
+): msg is ConnectionStatusMessage =>
+ (msg as ConnectionStatusMessage).type === "connection-status";
+
+export const isConnectionQualityMetrics = (
+ msg: object
+): msg is ConnectionQualityMetrics =>
+ (msg as ConnectionQualityMetrics).type === "connection-metrics";
+
+export const messageHasResult = (msg: object): msg is VuuUIMessageInRPC =>
+ typeof (msg as VuuUIMessageInRPC).result !== "undefined";
+
+export const isErrorResponse = (
+ response?: RpcResponse
+): response is VuuUIMessageInRPCEditReject =>
+ response !== undefined && "error" in response;
+
+export const hasAction = (
+ response?: RpcResponse
+): response is MenuRpcResponse | VuuUIMessageInRPCEditResponse =>
+ response != undefined && "action" in response;
+
+export const isViewporttMessage = (
+ msg: object
+): msg is VuuUIMessageOutViewport => "viewport" in msg;
+
+export const withConfigDefaults = (
+ config: DataSourceConfig
+): WithFullConfig & { visualLink?: LinkDescriptorWithLabel } => {
+ if (
+ config.aggregations &&
+ config.columns &&
+ config.filter &&
+ config.groupBy &&
+ config.sort
+ ) {
+ return config as WithFullConfig;
+ } else {
+ const {
+ aggregations = [],
+ columns = [],
+ filter = { filter: "" },
+ groupBy = [],
+ sort = { sortDefs: [] },
+ visualLink,
+ } = config;
+
+ return {
+ aggregations,
+ columns,
+ filter,
+ groupBy,
+ sort,
+ visualLink,
+ };
+ }
+};
diff --git a/vuu-ui/packages/vuu-utils/src/date/formatter.ts b/vuu-ui/packages/vuu-utils/src/date/formatter.ts
index 7228f1359..f661ab850 100644
--- a/vuu-ui/packages/vuu-utils/src/date/formatter.ts
+++ b/vuu-ui/packages/vuu-utils/src/date/formatter.ts
@@ -1,9 +1,9 @@
+import { isNotNullOrUndefined } from "../ts-utils";
import { DatePattern, DateTimePattern, TimePattern } from "./types";
type DateTimeFormatConfig = {
locale?: string;
options: Intl.DateTimeFormatOptions;
- postProcessor?: (s: string) => string;
};
// Time format config
@@ -31,9 +31,8 @@ const baseDateFormatOptions: Intl.DateTimeFormatOptions = {
};
const formatConfigByDatePatterns: Record = {
"dd.mm.yyyy": {
- locale: "en-GB",
+ locale: "de-De",
options: { ...baseDateFormatOptions },
- postProcessor: (s) => s.replaceAll("/", "."),
},
"dd/mm/yyyy": { locale: "en-GB", options: { ...baseDateFormatOptions } },
"dd MMM yyyy": {
@@ -55,19 +54,17 @@ const formatConfigByDatePatterns: Record = {
},
};
-const formatConfigByDateTimePatterns: Record<
- DateTimePattern,
- DateTimeFormatConfig
-> = { ...formatConfigByDatePatterns, ...formatConfigByTimePatterns };
+function getFormatConfigs(pattern: DateTimePattern) {
+ return [
+ pattern.date ? formatConfigByDatePatterns[pattern.date] : null,
+ pattern.time ? formatConfigByTimePatterns[pattern.time] : null,
+ ];
+}
export function formatDate(pattern: DateTimePattern): (d: Date) => string {
- const { locale, options, postProcessor } =
- formatConfigByDateTimePatterns[pattern];
- const dateTimeFormat = Intl.DateTimeFormat(locale, options);
+ const dateTimeFormats = getFormatConfigs(pattern)
+ .filter(isNotNullOrUndefined)
+ .map((c) => Intl.DateTimeFormat(c.locale, c.options));
- return (d) => {
- const dateStr = dateTimeFormat.format(d);
- console.log({ dateStr });
- return postProcessor ? postProcessor(dateStr) : dateStr;
- };
+ return (d) => dateTimeFormats.map((dtf) => dtf.format(d)).join(" ");
}
diff --git a/vuu-ui/packages/vuu-utils/src/date/helpers.ts b/vuu-ui/packages/vuu-utils/src/date/helpers.ts
index f78eeae28..23a735d13 100644
--- a/vuu-ui/packages/vuu-utils/src/date/helpers.ts
+++ b/vuu-ui/packages/vuu-utils/src/date/helpers.ts
@@ -1,11 +1,15 @@
-import { DateTimeColumnTypeSimple } from "@finos/vuu-table-types";
-import { DateTimeColumnDescriptor, isTypeDescriptor } from "../column-utils";
+import { DateTimeColumnDescriptor } from "@finos/vuu-table-types";
+import { isTypeDescriptor } from "../column-utils";
import { DateTimePattern, isDateTimePattern } from "./types";
-export const defaultPatternByTypes: Record<
- DateTimeColumnTypeSimple,
- DateTimePattern
-> = { time: "hh:mm:ss", date: "dd.mm.yyyy" };
+export const defaultPatternsByType = {
+ time: "hh:mm:ss",
+ date: "dd.mm.yyyy",
+} as const;
+
+export const fallbackDateTimePattern: DateTimePattern = {
+ date: defaultPatternsByType["date"],
+};
export function dateTimePattern(
type: DateTimeColumnDescriptor["type"]
@@ -14,9 +18,7 @@ export function dateTimePattern(
if (type.formatting && isDateTimePattern(type.formatting.pattern)) {
return type.formatting.pattern;
}
-
- return defaultPatternByTypes[type.name];
- } else {
- return defaultPatternByTypes[type];
}
+
+ return fallbackDateTimePattern;
}
diff --git a/vuu-ui/packages/vuu-utils/src/date/index.ts b/vuu-ui/packages/vuu-utils/src/date/index.ts
index a7c31af09..a6d6412df 100644
--- a/vuu-ui/packages/vuu-utils/src/date/index.ts
+++ b/vuu-ui/packages/vuu-utils/src/date/index.ts
@@ -1,2 +1,7 @@
export * from "./formatter";
-export { isDateTimePattern, type DateTimePattern } from "./types";
+export {
+ isDateTimePattern,
+ type DateTimePattern,
+ supportedDateTimePatterns,
+} from "./types";
+export { defaultPatternsByType, fallbackDateTimePattern } from "./helpers";
diff --git a/vuu-ui/packages/vuu-utils/src/date/types.ts b/vuu-ui/packages/vuu-utils/src/date/types.ts
index 71727a8c4..f5ae5f6dc 100644
--- a/vuu-ui/packages/vuu-utils/src/date/types.ts
+++ b/vuu-ui/packages/vuu-utils/src/date/types.ts
@@ -1,3 +1,5 @@
+import { ColumnTypeFormatting } from "@finos/vuu-table-types";
+
const supportedDatePatterns = [
"dd.mm.yyyy",
"dd/mm/yyyy",
@@ -10,17 +12,25 @@ const supportedDatePatterns = [
const supportedTimePatterns = ["hh:mm:ss", "hh:mm:ss a"] as const;
+export const supportedDateTimePatterns = {
+ date: supportedDatePatterns,
+ time: supportedTimePatterns,
+};
+
export type DatePattern = (typeof supportedDatePatterns)[number];
export type TimePattern = (typeof supportedTimePatterns)[number];
-export type DateTimePattern = DatePattern | TimePattern;
-const isDatePattern = (pattern: string): pattern is DatePattern =>
+export type DateTimePattern =
+ | { date?: DatePattern; time: TimePattern }
+ | { date: DatePattern; time?: TimePattern };
+
+const isDatePattern = (pattern?: string): pattern is DatePattern =>
supportedDatePatterns.includes(pattern as DatePattern);
-const isTimePattern = (pattern: string): pattern is TimePattern =>
+const isTimePattern = (pattern?: string): pattern is TimePattern =>
supportedTimePatterns.includes(pattern as TimePattern);
export const isDateTimePattern = (
- pattern?: string
+ pattern?: ColumnTypeFormatting["pattern"]
): pattern is DateTimePattern =>
- pattern !== undefined && (isDatePattern(pattern) || isTimePattern(pattern));
+ isDatePattern(pattern?.date) || isTimePattern(pattern?.time);
diff --git a/vuu-ui/packages/vuu-utils/src/event-emitter.ts b/vuu-ui/packages/vuu-utils/src/event-emitter.ts
index 1cd4b6b3c..7b3a5176e 100644
--- a/vuu-ui/packages/vuu-utils/src/event-emitter.ts
+++ b/vuu-ui/packages/vuu-utils/src/event-emitter.ts
@@ -13,7 +13,17 @@ function isOnlyListener(
return !Array.isArray(listeners);
}
-export class EventEmitter {
+export interface IEventEmitter {
+ addListener(event: E, listener: Events[E]): void;
+ emit(event: E, ...args: Parameters): void;
+ on(event: E, listener: Events[E]): void;
+ removeListener(event: E, listener: Events[E]): void;
+ removeAllListeners(event?: E): void;
+}
+
+export class EventEmitter
+ implements IEventEmitter
+{
#events: Map = new Map();
addListener(event: E, listener: Events[E]) {
diff --git a/vuu-ui/packages/vuu-utils/src/formatting-utils.ts b/vuu-ui/packages/vuu-utils/src/formatting-utils.ts
index 7d9e5aeac..eaa3f4d91 100644
--- a/vuu-ui/packages/vuu-utils/src/formatting-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/formatting-utils.ts
@@ -2,13 +2,13 @@ import {
ColumnDescriptor,
ColumnTypeValueMap,
ColumnTypeFormatting,
+ DateTimeColumnDescriptor,
} from "@finos/vuu-table-types";
import { roundDecimal } from "./round-decimal";
import {
isDateTimeColumn,
isTypeDescriptor,
isMappedValueTypeRenderer,
- DateTimeColumnDescriptor,
} from "./column-utils";
import { formatDate } from "./date";
import { dateTimePattern } from "./date/helpers";
diff --git a/vuu-ui/packages/vuu-utils/src/index.ts b/vuu-ui/packages/vuu-utils/src/index.ts
index bd8193117..217485db8 100644
--- a/vuu-ui/packages/vuu-utils/src/index.ts
+++ b/vuu-ui/packages/vuu-utils/src/index.ts
@@ -6,6 +6,8 @@ export * from "./component-registry";
export * from "./DataWindow";
export * from "./common-types";
export * from "./data-utils";
+export * from "./datasource-action-utils";
+export * from "./datasource-utils";
export * from "./date";
export * from "./debug-utils";
export * from "./filter-utils";
@@ -30,5 +32,8 @@ export * from "./row-utils";
export * from "./selection-utils";
export * from "./sort-utils";
export * from "./text-utils";
+export * from "./ThemeProvider";
+export * from "./ts-utils";
export * from "./url-utils";
-export * from "./screenshot-utils";
+export * from "./useId";
+export * from "./useLayoutEffectSkipFirst";
diff --git a/vuu-ui/packages/vuu-utils/src/invariant.ts b/vuu-ui/packages/vuu-utils/src/invariant.ts
index 7ead61252..9472bd841 100644
--- a/vuu-ui/packages/vuu-utils/src/invariant.ts
+++ b/vuu-ui/packages/vuu-utils/src/invariant.ts
@@ -1,8 +1,9 @@
export function invariant(condition: boolean, message: string) {
if (!condition) {
const error = new Error(message);
- error.name = 'Invariant Violation';
+ error.name = "Invariant Violation";
// TODO what is framesToPop?
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
diff --git a/vuu-ui/packages/vuu-utils/src/nanoid/index.ts b/vuu-ui/packages/vuu-utils/src/nanoid/index.ts
index ecee1daa5..1149dd377 100644
--- a/vuu-ui/packages/vuu-utils/src/nanoid/index.ts
+++ b/vuu-ui/packages/vuu-utils/src/nanoid/index.ts
@@ -2,9 +2,9 @@
// couldn't get original code to work as npm import without crypro warnings -
// seemed to be picking up node version, not browser version
-export const uuid = (size: number = 21): string => {
- let id: string = '';
- let bytes = crypto.getRandomValues(new Uint8Array(size));
+export const uuid = (size = 21): string => {
+ let id = '';
+ const bytes = crypto.getRandomValues(new Uint8Array(size));
// A compact alternative for `for (var i = 0; i < step; i++)`.
while (size--) {
@@ -13,7 +13,7 @@ export const uuid = (size: number = 21): string => {
// range to the 0-63 value range. Therefore, adding hacks, such
// as empty string fallback or magic numbers, is unneccessary because
// the bitmask trims bytes down to the alphabet size.
- let byte = bytes[size] & 63;
+ const byte = bytes[size] & 63;
if (byte < 36) {
// `0-9a-z`
id += byte.toString(36);
diff --git a/vuu-ui/packages/vuu-utils/src/row-utils.ts b/vuu-ui/packages/vuu-utils/src/row-utils.ts
index e2762e073..74079eb97 100644
--- a/vuu-ui/packages/vuu-utils/src/row-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/row-utils.ts
@@ -1,6 +1,6 @@
import { DataSourceRow } from "@finos/vuu-data-types";
-import { metadataKeys } from "@finos/vuu-utils";
import { MutableRefObject } from "react";
+import { metadataKeys } from "./column-utils";
const { IDX } = metadataKeys;
diff --git a/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts b/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts
deleted file mode 100644
index 1cee30205..000000000
--- a/vuu-ui/packages/vuu-utils/src/screenshot-utils.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { toPng } from "html-to-image";
-
-/**
- * Takes a screenshot of the given node and returns the base64 encoded image url
- * @param node Node to take screenshot of
- * @returns Base64 encoded image url
- */
-export async function takeScreenshot(node: HTMLElement) {
-
- const screenshot = await toPng(node, { cacheBust: true })
- .then((dataUrl) => {
- return dataUrl;
- })
- .catch((err) => {
- console.error("Error taking screenshot", err);
- return undefined;
- });
-
- if (!screenshot) {
- return undefined;
- }
- return screenshot;
-}
diff --git a/vuu-ui/packages/vuu-utils/src/selection-utils.ts b/vuu-ui/packages/vuu-utils/src/selection-utils.ts
index 71c433546..7f0a70eb8 100644
--- a/vuu-ui/packages/vuu-utils/src/selection-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/selection-utils.ts
@@ -1,10 +1,10 @@
-import { DataSourceRow } from "@finos/vuu-data-types";
import {
+ DataSourceRow,
RangeTuple,
Selection,
SelectionItem,
- TableSelectionModel,
-} from "@finos/vuu-table-types";
+} from "@finos/vuu-data-types";
+import { TableSelectionModel } from "@finos/vuu-table-types";
import { metadataKeys } from "./column-utils";
const NO_SELECTION: number[] = [];
diff --git a/vuu-ui/packages/vuu-utils/src/ts-utils.ts b/vuu-ui/packages/vuu-utils/src/ts-utils.ts
new file mode 100644
index 000000000..dcbb12e4c
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/src/ts-utils.ts
@@ -0,0 +1,5 @@
+export function isNotNullOrUndefined(
+ value: T | undefined | null
+): value is NonNullable {
+ return value !== undefined && value !== null;
+}
diff --git a/vuu-ui/packages/vuu-utils/src/useId.ts b/vuu-ui/packages/vuu-utils/src/useId.ts
new file mode 100644
index 000000000..e930329aa
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/src/useId.ts
@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+
+let vuuComponentIdCount = 0;
+
+export const useId = (id?: string) =>
+ useMemo(() => id ?? `vuu-${++vuuComponentIdCount}`, [id]);
diff --git a/vuu-ui/packages/vuu-utils/src/useLayoutEffectSkipFirst.ts b/vuu-ui/packages/vuu-utils/src/useLayoutEffectSkipFirst.ts
new file mode 100644
index 000000000..eb7284f8b
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/src/useLayoutEffectSkipFirst.ts
@@ -0,0 +1,16 @@
+import { DependencyList, EffectCallback, useLayoutEffect, useRef } from "react";
+
+export const useLayoutEffectSkipFirst = (
+ func: EffectCallback,
+ deps: DependencyList
+) => {
+ const goodToGo = useRef(false);
+ useLayoutEffect(() => {
+ if (goodToGo.current) {
+ func();
+ } else {
+ goodToGo.current = true;
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, deps);
+};
diff --git a/vuu-ui/packages/vuu-utils/test/date/formatter.test.ts b/vuu-ui/packages/vuu-utils/test/date/formatter.test.ts
index 68df33b8a..95da9f534 100644
--- a/vuu-ui/packages/vuu-utils/test/date/formatter.test.ts
+++ b/vuu-ui/packages/vuu-utils/test/date/formatter.test.ts
@@ -6,15 +6,23 @@ const testDate = new Date(2010, 5, 12, 15, 50, 37);
describe("formatDate", () => {
it.each<{ pattern: DateTimePattern; expected: string }>([
- { pattern: "dd.mm.yyyy", expected: "12.06.2010" },
- { pattern: "dd/mm/yyyy", expected: "12/06/2010" },
- { pattern: "dd MMM yyyy", expected: "12 Jun 2010" },
- { pattern: "dd MMMM yyyy", expected: "12 June 2010" },
- { pattern: "mm/dd/yyyy", expected: "06/12/2010" },
- { pattern: "MMM dd, yyyy", expected: "Jun 12, 2010" },
- { pattern: "MMMM dd, yyyy", expected: "June 12, 2010" },
- { pattern: "hh:mm:ss", expected: "15:50:37" },
- { pattern: "hh:mm:ss a", expected: "03:50:37 pm" },
+ { pattern: { date: "dd.mm.yyyy" }, expected: "12.06.2010" },
+ { pattern: { date: "dd/mm/yyyy" }, expected: "12/06/2010" },
+ { pattern: { date: "dd MMM yyyy" }, expected: "12 Jun 2010" },
+ { pattern: { date: "dd MMMM yyyy" }, expected: "12 June 2010" },
+ { pattern: { date: "mm/dd/yyyy" }, expected: "06/12/2010" },
+ { pattern: { date: "MMM dd, yyyy" }, expected: "Jun 12, 2010" },
+ { pattern: { date: "MMMM dd, yyyy" }, expected: "June 12, 2010" },
+ { pattern: { time: "hh:mm:ss" }, expected: "15:50:37" },
+ { pattern: { time: "hh:mm:ss a" }, expected: "03:50:37 pm" },
+ {
+ pattern: { date: "dd.mm.yyyy", time: "hh:mm:ss a" },
+ expected: "12.06.2010 03:50:37 pm",
+ },
+ {
+ pattern: { date: "MMMM dd, yyyy", time: "hh:mm:ss a" },
+ expected: "June 12, 2010 03:50:37 pm",
+ },
])(
"can correctly format date with the given pattern $pattern",
({ pattern, expected }) => {
diff --git a/vuu-ui/packages/vuu-utils/test/date/helpers.test.ts b/vuu-ui/packages/vuu-utils/test/date/helpers.test.ts
index ab6974055..8a34cf6d4 100644
--- a/vuu-ui/packages/vuu-utils/test/date/helpers.test.ts
+++ b/vuu-ui/packages/vuu-utils/test/date/helpers.test.ts
@@ -1,28 +1,31 @@
import { describe, expect, it } from "vitest";
-import { dateTimePattern, defaultPatternByTypes } from "../../src/date/helpers";
+import {
+ dateTimePattern,
+ fallbackDateTimePattern,
+} from "../../src/date/helpers";
import { DateTimePattern } from "../../src/date/types";
-const testPattern: DateTimePattern = "mm/dd/yyyy";
+const testPattern: DateTimePattern = { date: "mm/dd/yyyy" };
describe("dateTimePattern", () => {
it("returns exact pattern when found in descriptor type", () => {
const type = {
- name: "date" as const,
+ name: "date/time" as const,
formatting: { pattern: testPattern },
};
const actualPattern = dateTimePattern(type);
expect(actualPattern).toEqual(testPattern);
});
- it("falls back to default when pattern not found in descriptor type", () => {
- const type = { name: "time" as const, formatting: {} };
+ it("fallback pattern when pattern not found in descriptor type", () => {
+ const type = { name: "date/time" as const, formatting: {} };
const actualPattern = dateTimePattern(type);
- expect(actualPattern).toEqual(defaultPatternByTypes["time"]);
+ expect(actualPattern).toEqual(fallbackDateTimePattern);
});
- it("falls back to default when simple type", () => {
- const type = "date";
+ it("fallback pattern when simple type", () => {
+ const type = "date/time";
const actualPattern = dateTimePattern(type);
- expect(actualPattern).toEqual(defaultPatternByTypes["date"]);
+ expect(actualPattern).toEqual(fallbackDateTimePattern);
});
});
diff --git a/vuu-ui/packages/vuu-utils/test/date/types.test.ts b/vuu-ui/packages/vuu-utils/test/date/types.test.ts
index 3f35da7d5..33e094f9a 100644
--- a/vuu-ui/packages/vuu-utils/test/date/types.test.ts
+++ b/vuu-ui/packages/vuu-utils/test/date/types.test.ts
@@ -1,13 +1,15 @@
import { describe, expect, it } from "vitest";
import { isDateTimePattern } from "../../src/date/types";
+import { ColumnTypeFormatting } from "@finos/vuu-table-types";
describe("isDateTimePattern", () => {
- it.each<{ pattern: string | undefined; expected: boolean }>([
- { pattern: "dd MMM yyyy", expected: true },
- { pattern: "not-a-date-time-pattern", expected: false },
+ it.each<{ pattern: ColumnTypeFormatting["pattern"]; expected: boolean }>([
+ { pattern: { date: "dd MMM yyyy" }, expected: true },
+ { pattern: { time: "hh:mm:ss a" }, expected: true },
+ { pattern: { date: "dd/mm/yyyy", time: "hh:mm:ss" }, expected: true },
{ pattern: undefined, expected: false },
])(
- "returns $expected when pattern is a DateTimePattern",
+ "returns true only when pattern is a DateTimePattern",
({ pattern, expected }) => {
const actual = isDateTimePattern(pattern);
expect(actual).toEqual(expected);
diff --git a/vuu-ui/packages/vuu-utils/test/row-utils.test.ts b/vuu-ui/packages/vuu-utils/test/row-utils.test.ts
index 848bae578..01c1a536c 100644
--- a/vuu-ui/packages/vuu-utils/test/row-utils.test.ts
+++ b/vuu-ui/packages/vuu-utils/test/row-utils.test.ts
@@ -1,4 +1,4 @@
-import { DataSourceRow } from "@finos/vuu-data";
+import { DataSourceRow } from "@finos/vuu-data-types";
import { describe, expect, it } from "vitest";
import { actualRowPositioning, virtualRowPositioning } from "../src/row-utils";
diff --git a/vuu-ui/packages/vuu-utils/test/utils.ts b/vuu-ui/packages/vuu-utils/test/utils.ts
new file mode 100644
index 000000000..1dff87194
--- /dev/null
+++ b/vuu-ui/packages/vuu-utils/test/utils.ts
@@ -0,0 +1,8 @@
+import { expect } from "vitest";
+
+export const expectPromiseRejectsWithError = (
+ f: () => Promise,
+ message: string
+) => {
+ expect(f).rejects.toStrictEqual(new Error(message));
+};
diff --git a/vuu-ui/sample-apps/app-vuu-example/demo.tsx b/vuu-ui/sample-apps/app-vuu-example/demo.tsx
index f82aa7fc9..00bbff9cc 100644
--- a/vuu-ui/sample-apps/app-vuu-example/demo.tsx
+++ b/vuu-ui/sample-apps/app-vuu-example/demo.tsx
@@ -1,7 +1,7 @@
+import { LoginPanel } from "@finos/vuu-shell";
+import { ThemeProvider, uuid } from "@finos/vuu-utils";
import React from "react";
import ReactDOM from "react-dom";
-import { LoginPanel, ThemeProvider } from "@finos/vuu-shell";
-import { uuid } from "@finos/vuu-utils";
import "@finos/vuu-icons/index.css";
import "@finos/vuu-theme/index.css";
diff --git a/vuu-ui/sample-apps/app-vuu-example/login.tsx b/vuu-ui/sample-apps/app-vuu-example/login.tsx
index 925da5457..e208f0a97 100644
--- a/vuu-ui/sample-apps/app-vuu-example/login.tsx
+++ b/vuu-ui/sample-apps/app-vuu-example/login.tsx
@@ -1,11 +1,11 @@
+import { authenticate } from "@finos/vuu-data-remote";
+import { LoginPanel } from "@finos/vuu-shell";
+import { ThemeProvider } from "@finos/vuu-utils";
import React from "react";
import ReactDOM from "react-dom";
-import { LoginPanel, ThemeProvider } from "@finos/vuu-shell";
-import { authenticate } from "@finos/vuu-data";
import "@finos/vuu-icons/index.css";
import "@finos/vuu-theme/index.css";
-
import "./login.css";
async function login(username: string, password = "password") {
diff --git a/vuu-ui/sample-apps/app-vuu-example/package.json b/vuu-ui/sample-apps/app-vuu-example/package.json
index c95685008..a0781411f 100644
--- a/vuu-ui/sample-apps/app-vuu-example/package.json
+++ b/vuu-ui/sample-apps/app-vuu-example/package.json
@@ -17,7 +17,7 @@
"devDependencies": {},
"dependencies": {
"@fontsource/open-sans": "^4.5.13",
- "@salt-ds/core": "1.8.0",
+ "@salt-ds/core": "1.13.2",
"@salt-ds/lab": "1.0.0-alpha.15",
"@finos/vuu-data": "0.0.26",
"@finos/vuu-table-types": "0.0.26",
@@ -26,9 +26,9 @@
"@finos/vuu-popups": "0.0.26",
"@finos/vuu-shell": "0.0.26",
"@finos/vuu-utils": "0.0.26",
- "classnames": "^2.3.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
},
"engines": {
"node": ">=16.0.0"
diff --git a/vuu-ui/sample-apps/app-vuu-example/src/columnMetaData.ts b/vuu-ui/sample-apps/app-vuu-example/src/columnMetaData.ts
index 888487e2a..881d66b9a 100644
--- a/vuu-ui/sample-apps/app-vuu-example/src/columnMetaData.ts
+++ b/vuu-ui/sample-apps/app-vuu-example/src/columnMetaData.ts
@@ -132,7 +132,7 @@ const columnMetaData: { [key: string]: Partial } = {
label: "Created",
name: "created",
type: {
- name: "time",
+ name: "date/time",
},
},
currency: {
@@ -196,7 +196,7 @@ const columnMetaData: { [key: string]: Partial } = {
label: "Last Update",
name: "lastUpdate",
type: {
- name: "time",
+ name: "date/time",
},
},
lotSize: {
diff --git a/vuu-ui/sample-apps/app-vuu-example/src/session-editing/session-table-config.ts b/vuu-ui/sample-apps/app-vuu-example/src/session-editing/session-table-config.ts
index 91dc3cb01..3d036a6e3 100644
--- a/vuu-ui/sample-apps/app-vuu-example/src/session-editing/session-table-config.ts
+++ b/vuu-ui/sample-apps/app-vuu-example/src/session-editing/session-table-config.ts
@@ -2,7 +2,7 @@ import {
MenuRpcResponse,
OpenDialogAction,
TableSchema,
-} from "@finos/vuu-data";
+} from "@finos/vuu-data-types";
import { FormConfig, FormFieldDescriptor } from "@finos/vuu-shell";
const static_config: { [key: string]: Partial } = {
diff --git a/vuu-ui/sample-apps/app-vuu-example/src/useFeatures.ts b/vuu-ui/sample-apps/app-vuu-example/src/useFeatures.ts
index 81fe3da34..43f4f04ef 100644
--- a/vuu-ui/sample-apps/app-vuu-example/src/useFeatures.ts
+++ b/vuu-ui/sample-apps/app-vuu-example/src/useFeatures.ts
@@ -1,4 +1,5 @@
import { useVuuTables } from "@finos/vuu-data-react";
+import { TableSchema } from "@finos/vuu-data-types";
import {
FeatureProps,
Features,
@@ -6,7 +7,6 @@ import {
isWildcardSchema,
} from "@finos/vuu-shell";
import { wordify } from "@finos/vuu-utils";
-import { TableSchema } from "@finos/vuu-data";
import { useMemo } from "react";
export interface FeaturesHookProps {
@@ -27,7 +27,7 @@ export const useFeatures = ({
leftNavLocation = "vuu-tables",
...feature
} of Object.values(featuresProp)) {
- const { schema, schemas } = featureProps;
+ const { schema, schemas, ViewProps } = featureProps;
const target =
leftNavLocation === "vuu-tables" ? tableFeatures : features;
if (isWildcardSchema(schema) && tables) {
@@ -50,6 +50,7 @@ export const useFeatures = ({
ComponentProps: {
tableSchema,
},
+ ViewProps,
});
} else if (Array.isArray(schemas)) {
target.push({
@@ -63,6 +64,7 @@ export const useFeatures = ({
},
{}
),
+ ViewProps,
});
} else {
target.push(feature);
diff --git a/vuu-ui/sample-apps/app-vuu-example/src/useRpcResponseHandler.tsx b/vuu-ui/sample-apps/app-vuu-example/src/useRpcResponseHandler.tsx
index 15b6292b0..11b147d7f 100644
--- a/vuu-ui/sample-apps/app-vuu-example/src/useRpcResponseHandler.tsx
+++ b/vuu-ui/sample-apps/app-vuu-example/src/useRpcResponseHandler.tsx
@@ -1,10 +1,11 @@
import { RpcResponseHandler, useVuuTables } from "@finos/vuu-data-react";
-import { hasAction, MenuRpcResponse, TableSchema } from "@finos/vuu-data";
+import { MenuRpcResponse, TableSchema } from "@finos/vuu-data-types";
+import { SetDialog } from "@finos/vuu-popups";
+import { VuuTable } from "@finos/vuu-protocol-types";
+import { Feature, SessionEditingForm } from "@finos/vuu-shell";
+import { hasAction } from "@finos/vuu-utils";
import { useCallback } from "react";
import { getFormConfig } from "./session-editing";
-import { Feature, SessionEditingForm } from "@finos/vuu-shell";
-import { VuuTable } from "@finos/vuu-protocol-types";
-import { SetDialog } from "@finos/vuu-popups";
const withTable = (action: unknown): action is { table: VuuTable } =>
action !== null && typeof action === "object" && "table" in action;
diff --git a/vuu-ui/sample-apps/feature-basket-trading/package.json b/vuu-ui/sample-apps/feature-basket-trading/package.json
index 74fefb227..23f691808 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/package.json
+++ b/vuu-ui/sample-apps/feature-basket-trading/package.json
@@ -14,28 +14,30 @@
"sideEffects": [
"**/*.css"
],
- "devDependencies": {},
+ "devDependencies": {
+ "@finos/vuu-data-types": "0.0.26",
+ "@finos/vuu-filter-types": "0.0.26",
+ "@finos/vuu-protocol-types": "0.0.26",
+ "@finos/vuu-table-types": "0.0.26"
+ },
"dependencies": {
"@finos/vuu-data": "0.0.26",
"@finos/vuu-data-react": "0.0.26",
- "@finos/vuu-table-types": "0.0.26",
"@finos/vuu-filters": "0.0.26",
- "@finos/vuu-filter-types": "0.0.26",
"@finos/vuu-layout": "0.0.26",
"@finos/vuu-popups": "0.0.26",
- "@finos/vuu-protocol-types": "0.0.26",
"@finos/vuu-shell": "0.0.26",
"@finos/vuu-table": "0.0.26",
"@finos/vuu-table-extras": "0.0.26",
"@finos/vuu-theme": "0.0.26",
"@finos/vuu-utils": "0.0.26",
- "@salt-ds/core": "1.8.0",
+ "@salt-ds/core": "1.13.2",
"@salt-ds/lab": "1.0.0-alpha.15"
},
"peerDependencies": {
- "classnames": "^2.3.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
},
"engines": {
"node": ">=16.0.0"
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/VuuBasketTradingFeature.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/VuuBasketTradingFeature.tsx
index ae371c12a..3e60d8efc 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/VuuBasketTradingFeature.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/VuuBasketTradingFeature.tsx
@@ -1,4 +1,4 @@
-import { TableSchema } from "@finos/vuu-data";
+import { TableSchema } from "@finos/vuu-data-types";
import { FlexboxLayout, Stack } from "@finos/vuu-layout";
import { BasketTableEdit } from "./basket-table-edit";
import { BasketTableLive } from "./basket-table-live";
@@ -35,8 +35,12 @@ const VuuBasketTradingFeature = (props: BasketTradingFeatureProps) => {
basketSelectorProps,
dataSourceBasketTradingConstituentJoin,
dialog,
+ editConfig,
+ liveConfig,
onClickAddBasket,
onCommitBasketChange,
+ onConfigChangeEdit,
+ onConfigChangeLive,
onDropInstrument,
onSendToMarket,
onTakeOffMarket,
@@ -78,19 +82,22 @@ const VuuBasketTradingFeature = (props: BasketTradingFeatureProps) => {
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.css b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.css
index 7b309f74e..5922af5da 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.css
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.css
@@ -1,10 +1,8 @@
.vuuBasketSelector {
- --basket-selector-height: var(--vuuBasketSelector-height, 61px);
+ --basket-selector-height: 61px;
align-items: center;
border: solid 1px var(--vuu-color-gray-45);
border-radius: 6px;
- container-name: basket-selector;
- container-type: size;
display: inline-block;
height: var(--basket-selector-height);
min-width: 450px;
@@ -101,14 +99,3 @@
flex: 0 0 36px;
justify-content: center;
}
-
-@container basket-selector (height < 59px) {
- .vuuBasketSelector-basketDetails {
- grid-template-columns: max-content min-content min-content 1fr;
- grid-template-rows: 1fr;
- padding: 4px 8px;
- }
- label {
- display: none;
- }
-}
\ No newline at end of file
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx
index 7b23b2d50..8b1414b3b 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelector.tsx
@@ -1,13 +1,17 @@
-import { DropdownBase, PriceTicker } from "@finos/vuu-ui-controls";
+import { DataSource } from "@finos/vuu-data-types";
+import {
+ DropdownBase,
+ DropdownBaseProps,
+ InstrumentSearch,
+ PriceTicker,
+} from "@finos/vuu-ui-controls";
+import { useId } from "@finos/vuu-utils";
import { Button } from "@salt-ds/core";
-import { DataSource } from "@finos/vuu-data";
-import { useId } from "@finos/vuu-layout";
-import { DropdownBaseProps, InstrumentSearch } from "@finos/vuu-ui-controls";
import { HTMLAttributes, useRef } from "react";
+import { Basket } from "../useBasketTrading";
import "./BasketSelector.css";
import { useBasketSelector } from "./useBasketSelector";
-import { Basket } from "../useBasketTrading";
const classBase = "vuuBasketSelector";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx
index 706d7ed0e..fa2cdf6cc 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-selector/BasketSelectorRow.tsx
@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
import { RowProps } from "@finos/vuu-table";
import { MouseEvent, useCallback } from "react";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/BasketTableEdit.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/BasketTableEdit.tsx
index 0202d08bc..1c424cb57 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/BasketTableEdit.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/BasketTableEdit.tsx
@@ -1,12 +1,8 @@
-import { TableSchema } from "@finos/vuu-data";
-import { TableConfig } from "@finos/vuu-table-types";
import { Table, TableProps } from "@finos/vuu-table";
import {
ContextMenuConfiguration,
ContextMenuProvider,
} from "@finos/vuu-popups";
-import { useMemo } from "react";
-import columns from "./basketConstituentEditColumns";
import { ColHeaderAddSymbol } from "../cell-renderers";
import "./BasketTableEdit.css";
@@ -17,35 +13,22 @@ if (typeof ColHeaderAddSymbol !== "function") {
console.warn("BasketTableEdit not all custom cell renderers are available");
}
-export interface BasketTableEditProps extends Omit {
+export interface BasketTableEditProps extends TableProps {
contextMenuConfig: ContextMenuConfiguration;
- tableSchema: TableSchema;
}
export const BasketTableEdit = ({
contextMenuConfig,
- dataSource,
- tableSchema,
...props
}: BasketTableEditProps) => {
- const tableConfig = useMemo(
- () => ({
- columns,
- rowSeparators: true,
- }),
- []
- );
-
return (
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/basketConstituentEditColumns.ts b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/basketConstituentEditColumns.ts
index 21f5319c3..6dbaa8f37 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/basketConstituentEditColumns.ts
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-edit/basketConstituentEditColumns.ts
@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "packages/vuu-table-types";
+import type { ColumnDescriptor } from "@finos/vuu-table-types";
const editable = true;
const hidden = true;
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/BasketTableLive.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/BasketTableLive.tsx
index e4f40c1c3..eeb1b3635 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/BasketTableLive.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/BasketTableLive.tsx
@@ -1,9 +1,5 @@
-import { TableSchema } from "@finos/vuu-data";
-import { TableConfig } from "@finos/vuu-table-types";
import { Table, TableProps } from "@finos/vuu-table";
-import { useMemo } from "react";
import { ProgressCell, SpreadCell, StatusCell } from "../cell-renderers";
-import columns from "./basketConstituentLiveColumns";
if (
typeof ProgressCell !== "function" ||
@@ -17,28 +13,12 @@ import "./BasketTableLive.css";
const classBase = "vuuBasketTableLive";
-export interface BasketTableLiveProps extends Omit {
- tableSchema: TableSchema;
-}
-
-export const BasketTableLive = ({
- tableSchema,
- ...props
-}: BasketTableLiveProps) => {
- const tableConfig = useMemo(
- () => ({
- columns,
- rowSeparators: true,
- }),
- []
- );
-
+export const BasketTableLive = ({ ...props }: TableProps) => {
return (
);
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/basketConstituentLiveColumns.ts b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/basketConstituentLiveColumns.ts
index 8041aba72..76048e1a1 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/basketConstituentLiveColumns.ts
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-table-live/basketConstituentLiveColumns.ts
@@ -1,4 +1,4 @@
-import { ColumnDescriptor } from "packages/vuu-table-types";
+import type { ColumnDescriptor } from "@finos/vuu-table-types";
const hidden = true;
const ticking = {
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketMenu.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketMenu.tsx
index a63ff956f..e229aa8c9 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketMenu.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketMenu.tsx
@@ -5,7 +5,7 @@ import {
MenuBuilder,
} from "@finos/vuu-data-types";
import { useMemo } from "react";
-import cx from "classnames";
+import cx from "clsx";
import "./BasketMenu.css";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.css b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.css
index a42da233b..db94ffbf3 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.css
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.css
@@ -15,7 +15,9 @@
--saltFormField-width: fit-content;
- flex: 0 0 var(--basket-toolbar-height, 75px);
+ border-bottom: solid 1px var(--vuu-color-gray-05);
+ flex: 0 0 var(--basket-toolbar-height, 110px);
+ margin-bottom: 8px;
padding: 8px 16px;
}
@@ -36,10 +38,10 @@
column-gap: 24px;
row-gap: 0px;
grid-template-columns: auto auto auto auto auto 1fr;
- grid-template-rows: 18px 18px 18px 18px;
+ grid-template-rows: 15px 15px 15px 16px 32px;
}
-.vuuBasketToolbar-on-market .vuuBasketToolbar-inner {
+.vuuBasketToolbar-on-market {
--basket-status-gridColumn: 2;
--basket-status-gridRow: 1/5;
--basket-side-gridColumn: 3;
@@ -185,234 +187,22 @@
white-space: nowrap;
}
-
@container basket-toolbar (width < 1200px) {
.vuuBasketToolbar-inner {
- grid-template-columns: auto auto auto 1fr;
- }
-
- .saltFormField-labelTop {
- align-self: center;
- grid-template-areas: "label content";
- }
- .vuuBasketToolbar-inner {
- --basket-side-gridColumn: 2;
- --basket-side-gridRow: 1/3;
- --basket-units-gridColumn: 2;
- --basket-units-gridRow: 3/5;
- --basket-notionalUsd-gridColumn: 3;
- --basket-notionalUsd-gridRow: 1/3;
- --basket-notional-gridColumn: 3;
- --basket-notional-gridRow: 3/5;
- --basket-sendtomarket-gridColumn: 4;
- }
-
- .vuuBasketToolbar-sideField {
- align-self: end;
- }
-
- .vuuBasketToolbar-sideField .saltFormFieldLabel,
- .vuuBasketToolbar-unitsField .saltFormFieldLabel {
- align-self: center;
- width: 28px;
- }
-
- .vuuBasketToolbar-side {
- --saltButton-height: 24px;
- }
- .vuuBasketToolbar-units {
- --vuuExpandoInput-height: 24px;
- }
-
- .vuuBasketToolbar-notionalUsdField {
- align-self: end;
- }
-
- .vuuBasketToolbar-notionalField {
- margin: 0;
- }
-
- .vuuBasketToolbar-notionalUsdField .saltFormFieldLabel,
- .vuuBasketToolbar-notionalField .saltFormFieldLabel {
- align-self: center;
-
- width: 70px;
- }
-
- .vuuBasketToolbar-notionalField:before {
- content: none;
- }
-
-}
-
-
-@container basket-toolbar (width < 1080px) {
- .vuuBasketToolbar-inner {
- --vuuBasketSelector-height: 36px;
- grid-template-columns: auto auto auto;
- }
-
- .saltFormField-labelTop {
- grid-template-areas: "label content";
- }
- .vuuBasketToolbar-inner {
- --basket-selector-gridRow: 1/3;
- --basket-side-gridColumn: 2;
- --basket-side-gridRow: 1/3;
- --basket-units-gridColumn: 2;
- --basket-units-gridRow: 3/5;
- --basket-notionalUsd-gridColumn: 3;
- --basket-notionalUsd-gridRow: 1/3;
- --basket-notional-gridColumn: 3;
- --basket-notional-gridRow: 3/5;
--basket-sendtomarket-gridColumn: 1;
- --basket-sendtomarket-gridRow: 3/5;
- }
-
- .vuuBasketToolbar-sideField {
- align-self: end;
- }
-
- .vuuBasketToolbar-sideField .saltFormFieldLabel,
- .vuuBasketToolbar-unitsField .saltFormFieldLabel {
- width: 28px;
- }
-
- .vuuBasketToolbar-side {
- --saltButton-height: 24px;
- }
- .vuuBasketToolbar-units {
- --vuuExpandoInput-height: 24px;
- }
-
- .vuuBasketToolbar-notionalUsdField {
- align-self: end;
- }
-
- .vuuBasketToolbar-notionalField {
- margin: 0;
- }
-
- .vuuBasketToolbar-notionalUsdField .saltFormFieldLabel,
- .vuuBasketToolbar-notionalField .saltFormFieldLabel {
- width: 70px;
- }
-
- .vuuBasketToolbar-notionalField:before {
- content: none;
- }
+ --basket-sendtomarket-gridRow: 5/6;
- .vuuBasketToolbar-sendToMarket {
- justify-self: end;
+ grid-template-columns: auto auto auto auto 1fr;
}
-
-}
-
-@container basket-toolbar-live (width < 1660px) {
-
- .vuuBasketToolbar-on-market .vuuBasketToolbar-inner {
- --basket-actions-gridColumn: 8;
- --basket-actions-gridRow: 1/3;
- --basket-takeoffmarket-gridColumn: 8;
- --basket-takeoffmarket-gridRow: 3/5;
-
- grid-template-columns: auto auto auto auto auto 1fr;
- }
-
- .vuuBasketToolbar-actions {
- align-self: end;;
- }
-
}
-
-@container basket-toolbar-live (width < 1500px) {
-
- .vuuBasketToolbar-on-market .vuuBasketToolbar-inner {
-
- --basket-side-gridColumn: 3;
- --basket-side-gridRow: 1/3;
- --basket-units-gridColumn: 3;
- --basket-units-gridRow: 3/5;
- --basket-notionalUsd-gridColumn: 4;
- --basket-notionalUsd-gridRow: 1/5;
- --basket-notional-gridColumn: 5;
- --basket-notional-gridRow: 1/5;
- --basket-pctfilled-gridColumn: 6;
- --basket-pctfilled-gridRow: 1/5;
- --basket-actions-gridColumn: 7;
- --basket-actions-gridRow: 1/5;
- --basket-takeoffmarket-gridColumn: 7;
- --basket-takeoffmarket-gridRow: 1/5;
-
-
- grid-template-columns: auto auto auto auto auto auto 1fr;
- }
-
- .vuuBasketToolbar-sideField.saltFormField-labelTop,
- .vuuBasketToolbar-unitsField.saltFormField-labelTop {
- grid-template-areas: "label content";
- }
-
- .vuuBasketToolbar-sideField {
- align-self: end;
- }
- .vuuBasketToolbar-sideField .saltFormFieldLabel,
- .vuuBasketToolbar-unitsField .saltFormFieldLabel {
- width: 28px;
- }
-
- .vuuBasketToolbar-side {
- --saltButton-height: 24px;
- }
- .vuuBasketToolbar-units {
- --vuuExpandoInput-height: 24px;
- }
-
-
-}
-
@container basket-toolbar-live (width < 1450px) {
- .vuuBasketToolbar-on-market .vuuBasketToolbar-inner {
- --vuuBasketSelector-height: 36px;
- --basket-selector-gridRow: 1/3;
- --basket-notionalUsd-gridColumn: 4;
- --basket-notionalUsd-gridRow: 1/3;
- --basket-notional-gridColumn: 4;
- --basket-notional-gridRow: 3/5;
- --basket-pctfilled-gridColumn: 5;
- --basket-pctfilled-gridRow: 1/5;
-
- --basket-actions-gridColumn: 6;
- --basket-actions-gridRow: 1/5;
+ .vuuBasketToolbar-inner {
--basket-takeoffmarket-gridColumn: 1;
- --basket-takeoffmarket-gridRow: 3/5;
-
+ --basket-takeoffmarket-gridRow: 5/6;
+
grid-template-columns: auto auto auto auto auto 1fr;
-
- }
-
- .saltFormField-labelTop {
- grid-template-areas: "label content";
- }
-
- .vuuBasketToolbar-notionalField .saltFormFieldLabel,
- .vuuBasketToolbar-notionalUsdField .saltFormFieldLabel {
- align-self: center;
- width: 70px;
- }
-
- .vuuBasketToolbar-notionalField {
- margin: 0;
}
-
- .vuuBasketToolbar-notionalField:before {
- content: none;
- }
-
- .vuuBasketToolbar-actions {
- align-self: center;
- }
-
-
+
}
+
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
index 2f0b4895b..0da37b7f1 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
@@ -6,17 +6,17 @@ import {
useEditableText,
} from "@finos/vuu-ui-controls";
import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
-import {
+import type {
CommitResponse,
DataItemCommitHandler,
-} from "packages/vuu-table-types";
-import { VuuRowDataItemType } from "packages/vuu-protocol-types";
+} from "@finos/vuu-table-types";
+import type { VuuRowDataItemType } from "@finos/vuu-protocol-types";
import { HTMLAttributes, useCallback } from "react";
import { BasketSelector, BasketSelectorProps } from "../basket-selector";
import { Basket } from "../useBasketTrading";
-import { BasketStatus } from "../VuuBasketTradingFeature";
+import type { BasketStatus } from "../VuuBasketTradingFeature";
import { BasketMenu } from "./BasketMenu";
-import cx from "classnames";
+import cx from "clsx";
import "./BasketToolbar.css";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/col-header-add-symbol/ColHeaderAddSymbol.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/col-header-add-symbol/ColHeaderAddSymbol.tsx
index 98e122ddf..bc8b3fa20 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/col-header-add-symbol/ColHeaderAddSymbol.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/col-header-add-symbol/ColHeaderAddSymbol.tsx
@@ -1,14 +1,32 @@
+import {
+ SetPropsAction,
+ useLayoutProviderDispatch,
+ useViewContext,
+} from "@finos/vuu-layout";
import { registerComponent } from "@finos/vuu-utils";
import { Button } from "@salt-ds/core";
-import { SetPropsAction, useLayoutProviderDispatch } from "@finos/vuu-layout";
-import { MouseEventHandler, useCallback } from "react";
+import type { DataSource } from "@finos/vuu-data-types";
+import type { InstrumentSearchProps } from "@finos/vuu-ui-controls/src";
+import { MouseEventHandler, useCallback, useMemo } from "react";
+
import "./ColHeaderAddSymbol.css";
-import { InstrumentSearchProps } from "packages/vuu-ui-controls/src";
const classBase = "vuuColHeaderAddSymbol";
export const ColHeaderAddSymbol = () => {
const dispatchLayoutAction = useLayoutProviderDispatch();
+ const { loadSession } = useViewContext();
+
+ const dataSource = useMemo(() => {
+ const ds = loadSession?.("data-source-basket-constituent") as DataSource;
+ if (ds) {
+ return ds;
+ } else {
+ throw Error(
+ "ColHeaderAddSymbol expects Basket Constituent datasource to be available in session store"
+ );
+ }
+ }, [loadSession]);
const handleClick = useCallback(
(e) => {
@@ -25,14 +43,14 @@ export const ColHeaderAddSymbol = () => {
allowDragDrop: "drag-copy",
id: "basket-instruments",
},
- table: { module: "BASKET", table: "basketConstituent" },
+ dataSource,
} as InstrumentSearchProps,
},
title: "Add Ticker",
},
} as SetPropsAction);
},
- [dispatchLayoutAction]
+ [dataSource, dispatchLayoutAction]
);
return (
@@ -45,6 +63,6 @@ export const ColHeaderAddSymbol = () => {
registerComponent(
"col-header-add-symbol",
ColHeaderAddSymbol,
- "cell-renderer",
+ "column-header-content-renderer",
{}
);
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/progress-cell/ProgressCell.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/progress-cell/ProgressCell.tsx
index 59752c338..89d73d899 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/progress-cell/ProgressCell.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/progress-cell/ProgressCell.tsx
@@ -5,7 +5,7 @@ import {
isValidNumber,
registerComponent,
} from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
import { CSSProperties } from "react";
import "./ProgressCell.css";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/status-cell/StatusCell.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/status-cell/StatusCell.tsx
index e5c754296..ffabfa186 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/status-cell/StatusCell.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/cell-renderers/status-cell/StatusCell.tsx
@@ -1,6 +1,6 @@
import { TableCellRendererProps } from "@finos/vuu-table-types";
import { registerComponent } from "@finos/vuu-utils";
-import cx from "classnames";
+import cx from "clsx";
import "./StatusCell.css";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx
index a205b28bd..1ed45b2da 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/NewBasketPanel.tsx
@@ -1,4 +1,4 @@
-import { DataSource, TableSchema } from "@finos/vuu-data";
+import { DataSource, TableSchema } from "@finos/vuu-data-types";
import {
DialogHeader,
PopupComponent as Popup,
@@ -10,7 +10,7 @@ import {
VuuInput,
} from "@finos/vuu-ui-controls";
import { Button, FormField, FormFieldLabel } from "@salt-ds/core";
-import cx from "classnames";
+import cx from "clsx";
import { DataSourceRow } from "@finos/vuu-data-types";
import { HTMLAttributes, RefCallback, useCallback, useMemo } from "react";
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
index 61178ca34..49ba76c1c 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
@@ -1,8 +1,3 @@
-import {
- ClientToServerMenuRPC,
- VuuMenu,
- VuuMenuItem,
-} from "@finos/vuu-protocol-types";
import { TableRowSelectHandler } from "@finos/vuu-table";
import { Commithandler, OpenChangeHandler } from "@finos/vuu-ui-controls";
import { buildColumnMap, metadataKeys } from "@finos/vuu-utils";
@@ -11,25 +6,6 @@ import { NewBasketPanelProps } from "./NewBasketPanel";
const { KEY } = metadataKeys;
-type Menu = VuuMenu | VuuMenuItem;
-const isMenu = (menu: Menu): menu is VuuMenu => "menus" in menu;
-const flatten = (menus: Menu[], menuItems: VuuMenuItem[] = []) => {
- menus.forEach((m) =>
- isMenu(m) ? flatten(m.menus, menuItems) : menuItems.push(m)
- );
- return menuItems;
-};
-const getRpcCommand = (menus: Menu[], selectRpcCommand?: string) => {
- const selectionMenuItems = flatten(menus).filter(
- (m) => m.context === "selected-rows"
- );
- if (selectRpcCommand) {
- return selectionMenuItems.find((m) => m.rpcName === selectRpcCommand);
- } else if (selectionMenuItems.length === 1) {
- return selectionMenuItems[0];
- }
-};
-
export type NewBasketHookProps = Pick<
NewBasketPanelProps,
"basketDataSource" | "basketSchema" | "onSaveBasket"
@@ -44,46 +20,29 @@ export const useNewBasketPanel = ({
const [basketName, setBasketName] = useState("");
const [basketId, setBasketId] = useState();
const saveButtonRef = useRef(null);
-
const saveBasket = useCallback(() => {
if (basketName && basketId) {
onSaveBasket(basketName, basketId);
- if (basketDataSource?.menu) {
- const rpcCommand = getRpcCommand(
- basketDataSource?.menu?.menus,
- "CREATE_NEW_BASKET"
- );
- if (rpcCommand) {
- basketDataSource
- .rpcCall?.({
- namedParams: {},
- params: [basketId, basketName],
- rpcName: "createBasket",
- type: "VIEW_PORT_RPC_CALL",
- })
- .then((response) => {
- console.log(`rpcResponse`, { response });
- });
- }
- } else {
- throw Error(
- "useNewBasketPanel cannot create basket, datasource has no menu"
- );
- }
+ basketDataSource
+ .rpcCall?.({
+ namedParams: {},
+ params: [basketId, basketName],
+ rpcName: "createBasket",
+ type: "VIEW_PORT_RPC_CALL",
+ })
+ .then((response) => {
+ console.log(`rpcResponse`, { response });
+ });
}
}, [basketDataSource, basketId, basketName, onSaveBasket]);
- const handleSelectBasket = useCallback(
- (row) => {
- const basketId = row[KEY] as string;
- console.log({ basketId, columnMap });
- setBasketId(basketId);
- setTimeout(() => {
- saveButtonRef.current?.focus();
- }, 60);
- },
- [columnMap]
- );
+ const handleSelectBasket = useCallback((row) => {
+ const basketId = row[KEY] as string;
+ setBasketId(basketId);
+ setTimeout(() => {
+ saveButtonRef.current?.focus();
+ }, 60);
+ }, []);
const handleChangeBasketName = useCallback>(
(evt, value) => {
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
index e36dcccec..c07dea64f 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTrading.tsx
@@ -1,20 +1,25 @@
import { useVuuMenuActions } from "@finos/vuu-data-react";
-import { DataSourceRow } from "@finos/vuu-data-types";
+import {
+ DataSourceRow,
+ SubscribeCallback,
+ ViewportRpcResponse,
+} from "@finos/vuu-data-types";
import { useViewContext } from "@finos/vuu-layout";
-import { buildColumnMap, ColumnMap } from "@finos/vuu-utils";
import {
ContextMenuConfiguration,
NotificationLevel,
useNotifications,
} from "@finos/vuu-popups";
+import { buildColumnMap, ColumnMap } from "@finos/vuu-utils";
+import { TableConfig, TableConfigChangeHandler } from "@finos/vuu-table-types";
import { useCallback, useEffect, useMemo, useState } from "react";
import { BasketSelectorProps } from "./basket-selector";
import { BasketChangeHandler } from "./basket-toolbar";
import { NewBasketPanel } from "./new-basket-panel";
import { useBasketTradingDataSources } from "./useBasketTradingDatasources";
import { BasketTradingFeatureProps } from "./VuuBasketTradingFeature";
-import { VuuDataRow, VuuDataRowDto } from "packages/vuu-protocol-types";
-import { SubscribeCallback, ViewportRpcResponse } from "packages/vuu-data/src";
+import defaultEditColumns from "./basket-table-edit/basketConstituentEditColumns";
+import defaultLiveColumns from "./basket-table-live/basketConstituentLiveColumns";
export class Basket {
basketId: string;
@@ -52,13 +57,6 @@ export type BasketTradingHookProps = Pick<
| "basketTradingConstituentJoinSchema"
>;
-const toDataDto = (dataSourceRow: VuuDataRow, columnMap: ColumnMap) => {
- Object.entries(columnMap).reduce((dto, [colName, index]) => {
- dto[colName] = dataSourceRow[index];
- return dto;
- }, {});
-};
-
type BasketState = {
basketInstanceId?: string;
dialog?: JSX.Element;
@@ -75,6 +73,26 @@ export const useBasketTrading = ({
const { load, save } = useViewContext();
const { notify } = useNotifications();
+ const editConfig = useMemo(() => {
+ const config = load?.("basket-edit-table-config") as TableConfig;
+ return (
+ config ?? {
+ columns: defaultEditColumns,
+ rowSeparators: true,
+ }
+ );
+ }, [load]);
+
+ const liveConfig = useMemo(() => {
+ const config = load?.("basket-live-table-config") as TableConfig;
+ return (
+ config ?? {
+ columns: defaultLiveColumns,
+ rowSeparators: true,
+ }
+ );
+ }, [load]);
+
const basketConstituentMap = useMemo(
() => buildColumnMap(basketConstituentSchema.columns),
[basketConstituentSchema]
@@ -95,6 +113,7 @@ export const useBasketTrading = ({
} = useBasketTradingDataSources({
basketInstanceId,
basketSchema,
+ basketConstituentSchema,
basketTradingSchema,
basketTradingConstituentJoinSchema,
});
@@ -148,12 +167,15 @@ export const useBasketTrading = ({
}));
}, []);
- const handleSaveNewBasket = useCallback((basketName, basketId) => {
- setBasketState((state) => ({
- ...state,
- dialog: undefined,
- }));
- }, []);
+ const handleSaveNewBasket = useCallback(
+ (/*basketName, basketId*/) => {
+ setBasketState((state) => ({
+ ...state,
+ dialog: undefined,
+ }));
+ },
+ []
+ );
const handleSelectBasket = useCallback(
(basketInstanceId: string) => {
@@ -251,13 +273,13 @@ export const useBasketTrading = ({
params: [ric],
})
.then((response) => {
- if (response?.action.type === "VP_RCP_SUCCESS") {
+ if (response?.action.type === "VP_RPC_SUCCESS") {
notify?.({
type: NotificationLevel.Success,
header: "Add Constituent to Basket",
body: `${ric} added to basket`,
});
- } else if (response?.action.type === "VP_RCP_FAILURE") {
+ } else if (response?.action.type === "VP_RPC_FAILURE") {
notify?.({
type: NotificationLevel.Error,
header: "Add Constituent to Basket",
@@ -270,6 +292,27 @@ export const useBasketTrading = ({
[basketConstituentMap.ric, dataSourceBasketTradingConstituentJoin, notify]
);
+ // const handleTableConfigChange = useCallback(
+ // (config) => {
+ // save?.(config, "table-config");
+ // },
+ // [save]
+ // );
+
+ const handleConfigChangeEdit = useCallback(
+ (config) => {
+ save?.(config, "basket-edit-table-config");
+ },
+ [save]
+ );
+
+ const handleConfigChangeLive = useCallback(
+ (config) => {
+ save?.(config, "basket-live-table-config");
+ },
+ [save]
+ );
+
useEffect(() => {
dataSourceBasketTradingControl.resume?.();
return () => {
@@ -284,8 +327,12 @@ export const useBasketTrading = ({
basketDesignContextMenuConfig,
basketSelectorProps,
dataSourceBasketTradingConstituentJoin,
+ editConfig,
+ liveConfig,
onClickAddBasket: handleAddBasket,
onCommitBasketChange: handleCommitBasketChange,
+ onConfigChangeEdit: handleConfigChangeEdit,
+ onConfigChangeLive: handleConfigChangeLive,
onDropInstrument: handleDropInstrument,
onSendToMarket,
onTakeOffMarket,
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts
index b58a5c9f6..cb45f1804 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/useBasketTradingDatasources.ts
@@ -1,11 +1,11 @@
import { useViewContext } from "@finos/vuu-layout";
+import { VuuDataSource } from "@finos/vuu-data-remote";
import {
DataSource,
DataSourceConfig,
- RemoteDataSource,
TableSchema,
ViewportRpcResponse,
-} from "@finos/vuu-data";
+} from "@finos/vuu-data-types";
import { useCallback, useMemo } from "react";
import { BasketTradingFeatureProps } from "./VuuBasketTradingFeature";
import { NotificationLevel, useNotifications } from "@finos/vuu-popups";
@@ -14,16 +14,18 @@ export type basketDataSourceKey =
| "data-source-basket"
| "data-source-basket-trading-control"
| "data-source-basket-trading-search"
- | "data-source-basket-trading-constituent-join";
+ | "data-source-basket-trading-constituent-join"
+ | "data-source-basket-constituent";
const NO_CONFIG = {};
export const useBasketTradingDataSources = ({
+ basketConstituentSchema,
basketSchema,
basketInstanceId,
basketTradingSchema,
basketTradingConstituentJoinSchema,
-}: Omit & {
+}: BasketTradingFeatureProps & {
basketInstanceId: string;
}) => {
const { notify } = useNotifications();
@@ -63,13 +65,14 @@ export const useBasketTradingDataSources = ({
100,
basketFilter,
],
+ ["data-source-basket-constituent", basketConstituentSchema, 100],
];
const dataSources: DataSource[] = [];
for (const [key, schema, bufferSize, config] of dataSourceConfig) {
- let dataSource = loadSession?.(key) as RemoteDataSource;
+ let dataSource = loadSession?.(key) as VuuDataSource;
if (dataSource === undefined) {
- dataSource = new RemoteDataSource({
+ dataSource = new VuuDataSource({
...config,
bufferSize,
viewport: `${id}-${key}`,
@@ -83,10 +86,11 @@ export const useBasketTradingDataSources = ({
}
return dataSources;
}, [
+ basketInstanceId,
basketSchema,
basketTradingSchema,
- basketInstanceId,
basketTradingConstituentJoinSchema,
+ basketConstituentSchema,
loadSession,
id,
title,
@@ -103,7 +107,7 @@ export const useBasketTradingDataSources = ({
type: "VIEW_PORT_RPC_CALL",
})
.then((response) => {
- if (response?.action.type === "VP_RCP_FAILURE") {
+ if (response?.action.type === "VP_RPC_FAILURE") {
notify({
type: NotificationLevel.Error,
header: "Failed to Send to market",
@@ -116,26 +120,32 @@ export const useBasketTradingDataSources = ({
[dataSourceBasketTradingControl, notify]
);
- const handleTakeOffMarket = useCallback((basketInstanceId: string) => {
- dataSourceBasketTradingControl
- .rpcCall?.({
- namedParams: {},
- params: [basketInstanceId],
- rpcName: "takeOffMarket",
- type: "VIEW_PORT_RPC_CALL",
- })
- .then((response) => {
- if (response?.action.type === "VP_RCP_FAILURE") {
- notify({
- type: NotificationLevel.Error,
- header: "Failed to take off market",
- body: "Please contact your support team",
- });
- console.error(response.action.msg);
- }
- });
- }, []);
+ const handleTakeOffMarket = useCallback(
+ (basketInstanceId: string) => {
+ dataSourceBasketTradingControl
+ .rpcCall?.({
+ namedParams: {},
+ params: [basketInstanceId],
+ rpcName: "takeOffMarket",
+ type: "VIEW_PORT_RPC_CALL",
+ })
+ .then((response) => {
+ if (response?.action.type === "VP_RPC_FAILURE") {
+ notify({
+ type: NotificationLevel.Error,
+ header: "Failed to take off market",
+ body: "Please contact your support team",
+ });
+ console.error(response.action.msg);
+ }
+ });
+ },
+ [dataSourceBasketTradingControl, notify]
+ );
+ // Note: we do not need to return the BasketConstituent dataSource, we just stash it
+ // in session state from where it will be used by the AddInstrument button in Col
+ // Header
return {
dataSourceBasket,
dataSourceBasketTradingControl,
diff --git a/vuu-ui/sample-apps/feature-filter-table/package.json b/vuu-ui/sample-apps/feature-filter-table/package.json
index 4bb804700..56e16a730 100644
--- a/vuu-ui/sample-apps/feature-filter-table/package.json
+++ b/vuu-ui/sample-apps/feature-filter-table/package.json
@@ -29,13 +29,13 @@
"@finos/vuu-table-extras": "0.0.26",
"@finos/vuu-theme": "0.0.26",
"@finos/vuu-utils": "0.0.26",
- "@salt-ds/core": "1.8.0",
+ "@salt-ds/core": "1.13.2",
"@salt-ds/lab": "1.0.0-alpha.15"
},
"peerDependencies": {
- "classnames": "^2.3.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "clsx": "^2.0.0",
+ "react": ">=17.0.2",
+ "react-dom": ">=17.0.2"
},
"engines": {
"node": ">=16.0.0"
diff --git a/vuu-ui/sample-apps/feature-filter-table/src/VuuFilterTableFeature.tsx b/vuu-ui/sample-apps/feature-filter-table/src/VuuFilterTableFeature.tsx
index f3a600af2..d7364af1f 100644
--- a/vuu-ui/sample-apps/feature-filter-table/src/VuuFilterTableFeature.tsx
+++ b/vuu-ui/sample-apps/feature-filter-table/src/VuuFilterTableFeature.tsx
@@ -1,9 +1,9 @@
-import { TableSchema } from "@finos/vuu-data";
+import { TableSchema } from "@finos/vuu-data-types";
import { FilterTable } from "@finos/vuu-datatable";
import { FlexboxLayout } from "@finos/vuu-layout";
-import { DataSourceStats } from "@finos/vuu-table-extras";
-import cx from "classnames";
import { ContextMenuProvider } from "@finos/vuu-popups";
+import { DataSourceStats } from "@finos/vuu-table-extras";
+import cx from "clsx";
import { useFilterTable } from "./useFilterTable";
import "./VuuFilterTableFeature.css";
diff --git a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx
index 53940d3af..7ce8937d6 100644
--- a/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx
+++ b/vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx
@@ -1,24 +1,29 @@
import {
+ MenuActionConfig,
+ SuggestionFetcher,
+ useVuuMenuActions,
+} from "@finos/vuu-data-react";
+import {
+ DataSourceFilter,
DataSourceVisualLinkCreatedMessage,
- isTypeaheadSuggestionProvider,
SchemaColumn,
TypeaheadSuggestionProvider,
VuuFeatureInvocationMessage,
-} from "@finos/vuu-data";
-import { MenuActionConfig, useVuuMenuActions } from "@finos/vuu-data-react";
-import { DataSourceFilter } from "@finos/vuu-data-types";
-import { SuggestionFetcher } from "@finos/vuu-data-react";
-import { TableConfig } from "@finos/vuu-table-types";
+} from "@finos/vuu-data-types";
import { Filter } from "@finos/vuu-filter-types";
import { FilterBarProps } from "@finos/vuu-filters";
import { ActiveItemChangeHandler, useViewContext } from "@finos/vuu-layout";
+import { TypeaheadParams } from "@finos/vuu-protocol-types";
import { useShellContext } from "@finos/vuu-shell";
-import { applyDefaultColumnConfig } from "@finos/vuu-utils";
+import { TableConfig, TableConfigChangeHandler } from "@finos/vuu-table-types";
+import {
+ applyDefaultColumnConfig,
+ isTypeaheadSuggestionProvider,
+} from "@finos/vuu-utils";
import { Button } from "@salt-ds/core";
import { useCallback, useMemo, useRef, useState } from "react";
import { useSessionDataSource } from "./useSessionDataSource";
import { FilterTableFeatureProps } from "./VuuFilterTableFeature";
-import { TypeaheadParams } from "packages/vuu-protocol-types";
const NO_CONFIG: FilterTableConfig = {};
@@ -103,8 +108,8 @@ export const useFilterTable = ({ tableSchema }: FilterTableFeatureProps) => {
[save]
);
- const handleTableConfigChange = useCallback(
- (config: TableConfig) => {
+ const handleTableConfigChange = useCallback
{
- )
-}
+ );
+};
diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx
index 5398cefe9..503cefc45 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx
@@ -1,18 +1,20 @@
-import { TableSchema } from "@finos/vuu-data";
-import { DataSourceRow } from "@finos/vuu-data-types";
-import { useId } from "@finos/vuu-layout";
+import { DataSourceRow, TableSchema } from "@finos/vuu-data-types";
import { Table, TableProps, TableRowSelectHandler } from "@finos/vuu-table";
-import { ColumnMap } from "@finos/vuu-utils";
+import { ColumnMap, useId } from "@finos/vuu-utils";
import { Input } from "@salt-ds/core";
import { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from "react";
import { DropdownBase, OpenChangeHandler } from "../dropdown";
-import "./SearchCell";
+import { SearchCell } from "./SearchCell";
import { useInstrumentPicker } from "./useInstrumentPicker";
import "./InstrumentPicker.css";
const classBase = "vuuInstrumentPicker";
+if (typeof SearchCell !== "function") {
+ console.warn("Instrument Picker: SearchCell module not loaded ");
+}
+
export interface InstrumentPickerProps
extends Omit