@orchestrator-ui/orchestrator-ui-components 7.0.1 → 7.1.0

package/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
 
-> @orchestrator-ui/orchestrator-ui-components@7.0.1 build
+> @orchestrator-ui/orchestrator-ui-components@7.1.0 build
 > npm run generate-version && tsup src/index.ts
 
 
-> @orchestrator-ui/orchestrator-ui-components@7.0.1 generate-version
+> @orchestrator-ui/orchestrator-ui-components@7.1.0 generate-version
 > node -p "'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'" > src/configuration/version.ts && prettier --write src/configuration/version.ts
 
-src/configuration/version.ts 126ms
+src/configuration/version.ts 138ms
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -14,9 +14,9 @@ src/configuration/version.ts 126ms
 CLI Target: es2022
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js     806.25 KB
-ESM dist/index.js.map 1.51 MB
-ESM ⚡️ Build success in 277ms
+ESM dist/index.js     808.07 KB
+ESM dist/index.js.map 1.52 MB
+ESM ⚡️ Build success in 300ms
 DTS Build start
-DTS ⚡️ Build success in 18247ms
+DTS ⚡️ Build success in 18219ms
 DTS dist/index.d.ts 1.08 MB

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@7.0.1 lint
+> @orchestrator-ui/orchestrator-ui-components@7.1.0 lint
 > eslint
 
 

package/.turbo/turbo-test.log

@@ -1,21 +1,21 @@
 
-> @orchestrator-ui/orchestrator-ui-components@7.0.1 test
+> @orchestrator-ui/orchestrator-ui-components@7.1.0 test
 > jest
 
+PASS Wfo-UI Tests src/components/WfoSubscription/utils/utils.spec.ts
 PASS Wfo-UI Tests src/components/WfoTree/treeUtils.spec.ts
-PASS Wfo-UI Tests src/utils/date.spec.ts
 PASS Wfo-UI Tests src/pages/processes/timelineUtils.spec.ts
-PASS Wfo-UI Tests src/components/WfoSubscription/utils/utils.spec.ts
-PASS Wfo-UI Tests src/utils/string.spec.ts
+PASS Wfo-UI Tests src/utils/date.spec.ts
 PASS Wfo-UI Tests src/utils/getProductNamesFromProcess.spec.ts
+PASS Wfo-UI Tests src/utils/string.spec.ts
+PASS Wfo-UI Tests src/utils/compareVersions.spec.ts
 PASS Wfo-UI Tests src/components/WfoTable/utils/tableUtils.spec.ts
 PASS Wfo-UI Tests src/components/WfoTable/WfoTable/WfoGroupedTable/utils.spec.ts
-PASS Wfo-UI Tests src/utils/compareVersions.spec.ts
 PASS Wfo-UI Tests src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts
 PASS Wfo-UI Tests src/components/WfoTable/utils/tableConfigPersistence.spec.ts
 PASS Wfo-UI Tests src/utils/optionalArray.spec.ts
-PASS Wfo-UI Tests src/rtk/utils.spec.ts
 PASS Wfo-UI Tests src/utils/resultFlattener.spec.ts
+PASS Wfo-UI Tests src/rtk/utils.spec.ts
 PASS Wfo-UI Tests src/utils/getQueryParams.spec.ts
 PASS Wfo-UI Tests src/components/WfoPageTemplate/WfoSidebar/utils/menuItemIsAllowed.spec.ts
 PASS Wfo-UI Tests src/utils/getEnvironmentVariables.spec.ts
@@ -36,10 +36,10 @@ PASS Wfo-UI Tests src/utils/getQueryVariablesForExport.spec.ts
 PASS Wfo-UI Tests src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts
 PASS Wfo-UI Tests src/utils/getQueryUrl.spec.ts
 PASS Wfo-UI Tests src/components/WfoPydanticForm/fields/wfoPydanticFormUtils.spec.ts
-PASS Wfo-UI Tests src/components/WfoTable/WfoTable/utils.spec.ts (5.276 s)
+PASS Wfo-UI Tests src/components/WfoTable/WfoTable/utils.spec.ts (5.368 s)
 
 Test Suites: 35 passed, 35 total
 Tests:       226 passed, 226 total
 Snapshots:   0 total
-Time:        7.847 s
+Time:        7.962 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 7.1.0
+
+### Minor Changes
+
+-   f47c7ba: Adds react-virtual and virualized WfoTable feature
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -17441,6 +17441,9 @@ type Pagination = {
     onChangeItemsPerPage?: (pageSize: number) => void;
     onChangePage?: (pageIndex: number) => void;
 };
+type LocalColumnWidths = {
+    [key: string]: string;
+};
 declare enum ColumnType {
     DATA = "data",
     CONTROL = "control"
@@ -17491,11 +17494,10 @@ type WfoTableProps<T extends object> = {
     onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
     appendFillerColumn?: boolean;
     className?: string;
+    isVirtualized?: boolean;
+    height?: number;
 };
-type LocalColumnWidths = {
-    [key: string]: string;
-};
-declare const WfoTable: <T extends object>({ data, columnConfig, hiddenColumns, columnOrder, isLoading, dataSorting, rowExpandingConfiguration, pagination, overrideHeader, onUpdateDataSorting, onUpdateDataSearch, onRowClick, appendFillerColumn, className, }: WfoTableProps<T>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const WfoTable: <T extends object>({ data, columnConfig, hiddenColumns, columnOrder, isLoading, dataSorting, rowExpandingConfiguration, pagination, overrideHeader, onUpdateDataSorting, onUpdateDataSearch, onRowClick, appendFillerColumn, className, isVirtualized, height, }: WfoTableProps<T>) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const TABLE_ROW_HEIGHT = "40px";
 
@@ -23838,7 +23840,7 @@ declare const METADATA_PRODUCT_BLOCK_ENDPOINT = "product_blocks";
 declare const METADATA_RESOURCE_TYPE_ENDPOINT = "resource_types";
 declare const METADATA_WORKFLOWS_ENDPOINT = "workflows";
 
-declare const ORCHESTRATOR_UI_LIBRARY_VERSION = "7.0.1";
+declare const ORCHESTRATOR_UI_LIBRARY_VERSION = "7.1.0";
 
 declare const useGetTranslationMessages: (locale: string | undefined) => {
     pydanticForms: {

package/dist/index.js

@@ -65,7 +65,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "7.0.1";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "7.1.0";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus2) => {
@@ -8444,9 +8444,10 @@ var graphQlRelatedSubscriptionsTerminatedSubscriptionsFilterMapper = (data) => d
 } : void 0;
 
 // src/components/WfoTable/WfoTable/WfoTable.tsx
-import { useState as useState12 } from "react";
+import { useRef as useRef5, useState as useState12 } from "react";
 import { useTranslations as useTranslations25 } from "next-intl";
 import { EuiSpacer as EuiSpacer12, EuiTablePagination, useEuiScrollBar } from "@elastic/eui";
+import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/components/WfoTable/utils/constants.ts
 var DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 50, 100];
@@ -8677,6 +8678,9 @@ var getWfoTableStyles = ({ theme, isDarkThemeActive }) => {
     width: "100%"
   });
   const headerStyle = css16({
+    position: "sticky",
+    top: 0,
+    zIndex: 3,
     backgroundColor: theme.colors.lightShade,
     fontSize: theme.size.m,
     textAlign: "left",
@@ -8715,7 +8719,7 @@ var getWfoTableStyles = ({ theme, isDarkThemeActive }) => {
   });
   const sortableHeaderCellStyle = css16({
     paddingRight: 0,
-    [`&:hover`]: {
+    "&:hover": {
       [`.${SORTABLE_ICON_CLASS}`]: {
         visibility: "visible"
       },
@@ -9236,6 +9240,7 @@ var ColumnType = /* @__PURE__ */ ((ColumnType2) => {
   ColumnType2["CONTROL"] = "control";
   return ColumnType2;
 })(ColumnType || {});
+var ROW_HEIGHT = 44;
 var WfoTable = ({
   data,
   columnConfig,
@@ -9250,9 +9255,12 @@ var WfoTable = ({
   onUpdateDataSearch,
   onRowClick,
   appendFillerColumn = true,
-  className
+  className,
+  isVirtualized = false,
+  height
 }) => {
   const [localColumnWidths, setLocalColumnWidths] = useState12(getColumnWidthsFromConfig(columnConfig));
+  const parentRef = useRef5(null);
   const columnConfigWithFiller = appendFillerColumn ? {
     ...columnConfig,
     filler: {
@@ -9300,39 +9308,87 @@ var WfoTable = ({
     }
     return mergedConfig;
   }, {});
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10
+  });
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const lastVirtualItemEnd = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].end : 0;
+  const virtualTrHeight = virtualItems[0]?.start ?? 0;
+  const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
   return /* @__PURE__ */ jsxs62(Fragment19, { children: [
-    /* @__PURE__ */ jsx113("div", { css: [tableContainerStyle, useEuiScrollBar()], children: /* @__PURE__ */ jsxs62("table", { className, css: tableStyle, children: [
-      overrideHeader ? overrideHeader(sortedVisibleColumns) : /* @__PURE__ */ jsx113("thead", { css: headerStyle, children: /* @__PURE__ */ jsx113(
-        WfoTableHeaderRow,
-        {
-          columnConfig: configWithLocalWidths,
-          hiddenColumns,
-          columnOrder,
-          dataSorting,
-          onUpdateDataSorting,
-          onUpdateDataSearch,
-          onUpdateColumWidth
-        }
-      ) }),
-      data.length === 0 ? /* @__PURE__ */ jsx113("tbody", { css: isLoading && bodyLoadingStyle, children: /* @__PURE__ */ jsx113("tr", { css: rowStyle, children: /* @__PURE__ */ jsx113(
-        "td",
-        {
-          colSpan: sortedVisibleColumns.length,
-          css: [cellStyle, emptyTableMessageStyle],
-          children: isLoading ? t("loading") : t("noItemsFound")
-        }
-      ) }) }) : /* @__PURE__ */ jsx113("tbody", { css: isLoading && bodyLoadingStyle, children: /* @__PURE__ */ jsx113(
-        WfoTableDataRows,
-        {
-          data,
-          columnConfig: configWithLocalWidths,
-          hiddenColumns,
-          columnOrder,
-          rowExpandingConfiguration,
-          onRowClick
-        }
-      ) })
-    ] }) }),
+    /* @__PURE__ */ jsx113(
+      "div",
+      {
+        ref: parentRef,
+        css: [tableContainerStyle, useEuiScrollBar()],
+        style: isVirtualized && height ? { maxHeight: height, overflow: "auto" } : {},
+        children: /* @__PURE__ */ jsxs62("table", { className, css: tableStyle, children: [
+          overrideHeader ? overrideHeader(sortedVisibleColumns) : /* @__PURE__ */ jsx113("thead", { css: headerStyle, children: /* @__PURE__ */ jsx113(
+            WfoTableHeaderRow,
+            {
+              columnConfig: configWithLocalWidths,
+              hiddenColumns,
+              columnOrder,
+              dataSorting,
+              onUpdateDataSorting,
+              onUpdateDataSearch,
+              onUpdateColumWidth
+            }
+          ) }),
+          data.length === 0 ? /* @__PURE__ */ jsx113("tbody", { css: isLoading && bodyLoadingStyle, children: /* @__PURE__ */ jsx113("tr", { css: rowStyle, children: /* @__PURE__ */ jsx113(
+            "td",
+            {
+              colSpan: sortedVisibleColumns.length,
+              css: [cellStyle, emptyTableMessageStyle],
+              children: isLoading ? t("loading") : t("noItemsFound")
+            }
+          ) }) }) : isVirtualized && height ? /* @__PURE__ */ jsxs62("tbody", { children: [
+            /* @__PURE__ */ jsx113(
+              "tr",
+              {
+                style: {
+                  height: virtualTrHeight
+                }
+              }
+            ),
+            virtualItems.map((virtualRow) => /* @__PURE__ */ jsx113(
+              WfoTableDataRows,
+              {
+                data: [data[virtualRow.index]],
+                columnConfig: configWithLocalWidths,
+                hiddenColumns,
+                columnOrder,
+                rowExpandingConfiguration,
+                onRowClick
+              },
+              virtualRow.key
+            )),
+            /* @__PURE__ */ jsx113(
+              "tr",
+              {
+                style: {
+                  height: bottomSpacerHeight
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx113("tbody", { css: isLoading && bodyLoadingStyle, children: /* @__PURE__ */ jsx113(
+            WfoTableDataRows,
+            {
+              data,
+              columnConfig: configWithLocalWidths,
+              hiddenColumns,
+              columnOrder,
+              rowExpandingConfiguration,
+              onRowClick
+            }
+          ) })
+        ] })
+      }
+    ),
     pagination && /* @__PURE__ */ jsxs62("div", { css: paginationStyle, children: [
       /* @__PURE__ */ jsx113(EuiSpacer12, { size: "xs" }),
       /* @__PURE__ */ jsx113(
@@ -9355,7 +9411,7 @@ import { useTranslations as useTranslations27 } from "next-intl";
 import { EuiButtonEmpty as EuiButtonEmpty4, EuiFlexGroup as EuiFlexGroup8, EuiSpacer as EuiSpacer13 } from "@elastic/eui";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/useGroupedTableConfig.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState13 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState13 } from "react";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandableRow.tsx
 import { useTranslations as useTranslations26 } from "next-intl";
@@ -9570,7 +9626,7 @@ var useGroupedTableConfig = ({
   nestingLevel = 0,
   notifyParent
 }) => {
-  const groupReferences = useRef5(/* @__PURE__ */ new Map());
+  const groupReferences = useRef6(/* @__PURE__ */ new Map());
   const [expandedRowIds, setExpandedRowIds] = useState13([]);
   const [isAllGroupsExpanded, setIsAllGroupsExpanded] = useState13(false);
   const [isAllSubgroupsExpanded, setIsAllSubgroupsExpanded] = useState13([]);
@@ -9579,8 +9635,8 @@ var useGroupedTableConfig = ({
     groupName: key.toString()
   }));
   const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
-  const notifyParentRef = useRef5(notifyParent);
-  const groupsRef = useRef5(groups);
+  const notifyParentRef = useRef6(notifyParent);
+  const groupsRef = useRef6(groups);
   useEffect4(() => {
     if (isExpanding) {
       groupReferences.current.forEach((ref) => {
@@ -12047,7 +12103,7 @@ var WfoInlineJson = ({ data }) => {
 };
 
 // src/components/WfoTable/WfoRowContextMenu/WfoRowContextMenu.tsx
-import { useEffect as useEffect8, useRef as useRef6, useState as useState22 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState22 } from "react";
 import {
   EuiButtonIcon as EuiButtonIcon9,
   EuiContextMenu as EuiContextMenu2,
@@ -12059,7 +12115,7 @@ var WfoRowContextMenu = ({
   onOpenContextMenu
 }) => {
   const [isOpen, setIsOpen] = useState22(false);
-  const onOpenContextMenuRef = useRef6(onOpenContextMenu);
+  const onOpenContextMenuRef = useRef7(onOpenContextMenu);
   useEffect8(() => {
     if (isOpen) {
       onOpenContextMenuRef.current?.();
@@ -13879,10 +13935,10 @@ var WfoProcessListSubscriptionsCell = ({
 };
 
 // src/pages/processes/WfoProcessDetailPage.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 
 // src/pages/processes/WfoProcessDetail.tsx
-import { useContext as useContext8, useEffect as useEffect15, useRef as useRef7 } from "react";
+import { useContext as useContext8, useEffect as useEffect15, useRef as useRef8 } from "react";
 import { useTranslations as useTranslations47 } from "next-intl";
 import { useRouter as useRouter7 } from "next/router";
 import {
@@ -14003,7 +14059,7 @@ var ProcessHeaderValue = ({
   );
 };
 function useHasPreviousRoute() {
-  const hasPrev = useRef7(false);
+  const hasPrev = useRef8(false);
   useEffect15(() => {
     if (document.referrer && document.referrer !== window.location.href) {
       hasPrev.current = true;
@@ -14276,7 +14332,7 @@ import { jsx as jsx171 } from "@emotion/react/jsx-runtime";
 var WfoProcessDetailPage = ({
   processId
 }) => {
-  const stepListRef = useRef8(null);
+  const stepListRef = useRef9(null);
   const { data, isLoading, isError } = useGetProcessDetailQuery({
     processId
   });
@@ -16179,7 +16235,7 @@ var WfoStep = React58.forwardRef(
 WfoStep.displayName = "WfoStep";
 
 // src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
-import React59, { useImperativeHandle as useImperativeHandle2, useRef as useRef9 } from "react";
+import React59, { useImperativeHandle as useImperativeHandle2, useRef as useRef10 } from "react";
 import { Fragment as Fragment47, jsx as jsx196, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
 var WfoStepList = React59.forwardRef(
   ({
@@ -16197,7 +16253,7 @@ var WfoStepList = React59.forwardRef(
     const { TIMELINE_HEIGHT, TIMELINE_OUTLINE_WIDTH } = useWithOrchestratorTheme(getTimelineStyles);
     const { SPACE_BETWEEN_STEPS, stepSpacerStyle } = useWithOrchestratorTheme(getWorkflowStepsStyles);
     const scrollOffset = NAVIGATION_HEIGHT + TIMELINE_HEIGHT + TIMELINE_OUTLINE_WIDTH + SPACE_BETWEEN_STEPS;
-    const stepReferences = useRef9(/* @__PURE__ */ new Map());
+    const stepReferences = useRef10(/* @__PURE__ */ new Map());
     const { contentRef } = useContentRef();
     useImperativeHandle2(reference, () => ({
       scrollToStep: async (stepId) => {
@@ -21042,7 +21098,7 @@ var WfoSearchLoadingState = () => {
 };
 
 // src/components/WfoSearchPage/WfoSearchResults/WfoSearchResultItem.tsx
-import { useEffect as useEffect29, useRef as useRef10 } from "react";
+import { useEffect as useEffect29, useRef as useRef11 } from "react";
 import { useTranslations as useTranslations90 } from "next-intl";
 import {
   EuiButtonIcon as EuiButtonIcon16,
@@ -21166,7 +21222,7 @@ var WfoSearchResultItem = ({
   const { theme } = useOrchestratorTheme();
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
   const detailUrl = getDetailUrl(result, baseUrl);
-  const itemRef = useRef10(null);
+  const itemRef = useRef11(null);
   useEffect29(() => {
     if (isSelected && onPositionChange && itemRef.current) {
       onPositionChange(index, itemRef.current);