pixel-react 1.20.21 → 1.20.22

package/lib/components/StepsLandingTable/Components/StepInnerTable.js

@@ -1 +1,256 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as o,useState as n,useEffect as r,useCallback as i,useMemo as d,isValidElement as s,cloneElement as l}from"react";import"./StepInnerTable.scss.js";import{DndContext as a,closestCorners as c}from"../../../node_modules/@dnd-kit/core/dist/core.esm.js";import{restrictToVerticalAxis as p}from"../../../node_modules/@dnd-kit/modifiers/dist/modifiers.esm.js";import{SortableContext as h,verticalListSortingStrategy as m}from"../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";import f from"../../../_virtual/index.js";import u from"./StepTableMainRow.js";import{appendNewRow as g}from"../../../utils/AppendNewRow/AppendNewRow.js";import{checkEmpty as w}from"../../../utils/checkEmpty/checkEmpty.js";import{isFunction as b}from"../../../assets/utils/functionUtils.js";import{ffid as I}from"../../../utils/ffID/ffid.js";const x=({data:x=[],columns:v=[],headerType:y,withCheckbox:S=!1,onSelect:C,withFixedHeader:N=!0,borderWithRadius:R=!1,noDataContent:T,height:k="100%",className:M="",tableBodyRowClass:j="",headerTextColor:D,tableDataTextColor:E,draggable:H=!1,onDragEnd:$,loadMore:_=()=>{},editMode:B="",editComponent:O,NlpComponent:V,AddNlp:G,handleDragStart:P,tableType:A,viewModeId:F,ViewComponent:q,handleClick:K,selectedRows:L,handleStepGroupExpand:U,isStepGroupExpanded:W,stepPartialSelect:Y,isViewPrivilegeMode:z,isClientSide:J,highlightKey:Q,onHighlightComplete:X,handleRowHover:Z,handleRowHoverOut:ee})=>{const te=o(null),oe=o(null),[ne,re]=n(0),[ie,de]=n(0),[se,le]=n([]),[ae,ce]=n(null),pe=50,he=o(0);r(()=>{oe.current&&de(oe.current.clientHeight);const e=g(x,G??{});le(t=>{const o=[...t];for(;o.length<e.length;)o.push(pe);return o.length>e.length&&(o.length=e.length),o})},[x,G]),r(()=>{he.current>0&&oe.current&&(oe.current.scrollTop=he.current,he.current=0)},[se]),r(()=>{if(w(Q))if(B)ce(B);else if(G&&Object.keys(G).length>0){const e=g(x,G).find(e=>e.isNew);e&&ce(e.stepId||"new-row")}else ce(null);else ce(Q)},[B,G,x,Q]),r(()=>{if(ae&&oe.current){const e=setTimeout(()=>{const e=oe.current?.querySelector(`[data-rowid="${ae}"]`);e&&(e.scrollIntoView({behavior:"smooth",block:"nearest"}),setTimeout(()=>{w(Q)||X?.()},300))},100);return()=>clearTimeout(e)}},[ae,se,Q,X]);const me=i(e=>{const t=e.currentTarget.scrollTop;re(t)},[]),fe=i((e,t)=>{le(o=>{const n=[...o];return e<n.length&&n[e]!==t?(n[e]=t,n):o})},[]),ue=d(()=>g(x,G??{}),[x,G]),ge=ue.length,{startIndex:we,paddingTop:be,paddingBottom:Ie,visibleRows:xe}=d(()=>{let e=0,t=ge-1,o=0,n=0;if(se.length===ge&&ie>0){let r=0;for(let t=0;t<ge;t++)r<=ne&&(e=t),r+=se[t]??0;r=0;for(let e=0;e<ge;e++)if(r+=se[e]??0,r>=ne+ie&&t===ge-1){t=e;break}if(e=Math.max(0,e-5),t=Math.min(ge-1,t+5),ae){const o=ue.findIndex(e=>e.stepId===ae||e.isNew&&"new-row"===ae);o>=0&&(o<e?e=o:o>t&&(t=o))}o=se.slice(0,e).reduce((e,t)=>e+t,0),n=se.slice(t+1).reduce((e,t)=>e+t,0)}else{if(e=Math.max(0,Math.floor(ne/pe)-5),t=Math.min(ge-1,e+Math.ceil(ie/pe)+5),ae){const o=ue.findIndex(e=>e.stepId===ae||e.isNew&&"new-row"===ae);o>=0&&(o<e?e=o:o>t&&(t=o))}o=e*pe,n=(ge-t-1)*pe}return{startIndex:e,endIndex:t,paddingTop:o,paddingBottom:n,visibleRows:ue.slice(e,t+1)}},[ue,ge,se,ie,ne,5,ae,pe]);r(()=>{const e=oe.current,t=document.getElementById("ff-table-first-node"),o=document.getElementById("ff-table-last-node");if(e&&t&&o&&x?.length)return te.current=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const t="ff-table-last-node"===e.target.id?"below":"above";_(t)}})},{root:e,rootMargin:"8px",threshold:.1}),te.current.observe(t),te.current.observe(o),()=>{te.current?.disconnect()}},[x?.length,_]);const ve=(e,t,o)=>{const{onClick:n,accessor:r}=e;n&&b(n)&&n(r,t,o)},ye=(e,t,o)=>{C&&C(e,t,o)};return e(a,{collisionDetection:c,onDragStart:P,onDragEnd:e=>{const{active:t,over:o}=e;if(!o||t.id===o.id)return;const n=x.findIndex(e=>e._id===t.id||e.stepId===t.id),r=x.findIndex(e=>e._id===o.id||e.stepId===o.id);-1!==n&&-1!==r&&$&&$(n,r)},modifiers:[p],children:e(h,{disabled:!H,items:x?.map(e=>e._id||e.stepId),strategy:m,children:t("div",{ref:oe,style:{height:k,position:"relative",overflowY:k?.includes("vh")?"auto":void 0},id:"ff-table-scroll-container",className:f(M,{"ff-fixed-header-steps-table":N,"steps-border-borderRadius":R}),onScroll:me,children:[t("table",{className:f("ff-table-steps"),cellSpacing:0,children:[e("thead",{className:"steps-inner-thead",children:e("tr",{children:v?.map(t=>e("th",{className:f(`${y&&`${y}-bg`}`,`${D&&`${D}-color`}`),style:{width:t?.width}},`${t.header}-${I()}`))})}),t("tbody",{className:"ff-steps-tbody",children:[e("tr",{id:"ff-table-first-node",style:{display:"none"}}),be>0&&e("tr",{children:e("td",{style:{height:be,padding:0},colSpan:v.length})}),xe.map((o,n)=>{const r=we+n,i=B===o.stepId,d=i||o.isNew,a=i&&o.stepId===ae||o.isNew&&"new-row"===ae;return d?t("tr",{className:"steps-edit-row",id:a?"getInFocus":void 0,"data-rowid":o.stepId||"new-row",children:[i&&s(O)&&e("td",{colSpan:v.length,children:l(O,{rowData:o,rowIndex:r+1})}),o.isNew&&!i&&s(V)&&e("td",{colSpan:v.length,children:l(V,{rowIndex:r,rowData:o})})]},o.stepId||r):e(u,{rowId:o.stepId,row:o,onRowHover:Z,onRowHoverOut:ee,indexNumber:r,columns:v,tableBodyRowClass:j,handleOnclick:ve,tableDataTextColor:E,withCheckbox:S,onSelectClick:ye,draggable:H,tableType:A,viewModeId:F,ViewComponent:q,handleClick:K,selectedRows:L,handleStepGroupExpand:U,isStepGroupExpanded:W,dataLength:x?.length,stepPartialSelect:Y,isViewPrivilegeMode:z,isClientSide:J,updateRowHeight:fe})}),Ie>0&&e("tr",{children:e("td",{style:{height:Ie,padding:0},colSpan:v.length})}),e("tr",{id:"ff-table-last-node",style:{display:"none"}})]})]}),x?.length<=0&&e("div",{className:"steps-no-data-content",style:{height:`calc(${k} - 50px)`},children:T})]})})})};export{x as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, cloneElement, isValidElement, useState, useCallback, useMemo, } from 'react';
+import './StepInnerTable.scss';
+import { closestCorners, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import classNames from 'classnames';
+import StepTableMainRow from './StepTableMainRow';
+import { appendNewRow } from '../../../utils/AppendNewRow/AppendNewRow';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
+import { isFunction } from '../../../assets/utils/functionUtils';
+import { ffid } from '../../../utils/ffID/ffid';
+const StepInnerTable = ({ data = [], columns = [], headerType, withCheckbox = false, onSelect, withFixedHeader = true, borderWithRadius = false, noDataContent, height = '100%', className = '', tableBodyRowClass = '', headerTextColor, tableDataTextColor, draggable = false, onDragEnd, loadMore = () => { }, editMode = '', editComponent, NlpComponent, AddNlp, handleDragStart, tableType, viewModeId, ViewComponent, handleClick, selectedRows, handleStepGroupExpand, isStepGroupExpanded, stepPartialSelect, isViewPrivilegeMode, isClientSide, highlightKey, onHighlightComplete, handleRowHover, handleRowHoverOut, }) => {
+    const observerRef = useRef(null);
+    const containerRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const [rowHeights, setRowHeights] = useState([]);
+    const [focusRowId, setFocusRowId] = useState(null);
+    const buffer = 5;
+    const estimatedRowHeight = 50;
+    const scrollTopBeforeReset = useRef(0); // Add this ref
+    useEffect(() => {
+        if (containerRef.current) {
+            setContainerHeight(containerRef.current.clientHeight);
+        }
+        const fullData = appendNewRow(data, AddNlp ?? {});
+        setRowHeights((prev) => {
+            const next = [...prev];
+            while (next.length < fullData.length)
+                next.push(estimatedRowHeight);
+            if (next.length > fullData.length)
+                next.length = fullData.length;
+            return next;
+        });
+    }, [data, AddNlp]);
+    useEffect(() => {
+        if (scrollTopBeforeReset.current > 0 && containerRef.current) {
+            containerRef.current.scrollTop = scrollTopBeforeReset.current;
+            scrollTopBeforeReset.current = 0;
+        }
+    }, [rowHeights]);
+    // Track focus row for edit/new rows
+    useEffect(() => {
+        // Prioritize highlightKey over other states
+        if (!checkEmpty(highlightKey)) {
+            setFocusRowId(highlightKey);
+        }
+        else if (editMode) {
+            setFocusRowId(editMode);
+        }
+        else if (AddNlp && Object.keys(AddNlp).length > 0) {
+            const newRow = appendNewRow(data, AddNlp).find((row) => row.isNew);
+            if (newRow) {
+                setFocusRowId(newRow.stepId || 'new-row');
+            }
+        }
+        else {
+            setFocusRowId(null);
+        }
+    }, [editMode, AddNlp, data, highlightKey]);
+    // Update scroll effect
+    useEffect(() => {
+        if (focusRowId && containerRef.current) {
+            const timer = setTimeout(() => {
+                const focusElement = containerRef.current?.querySelector(`[data-rowid="${focusRowId}"]`);
+                if (focusElement) {
+                    focusElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                    // ADD THIS: Reset highlight after scroll completes
+                    setTimeout(() => {
+                        if (!checkEmpty(highlightKey)) {
+                            onHighlightComplete?.();
+                        }
+                    }, 300); // Match scroll duration
+                }
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [focusRowId, rowHeights, highlightKey, onHighlightComplete]);
+    // Handle scroll with debouncing to reduce frequent updates
+    const handleScroll = useCallback((e) => {
+        const scrollTopValue = e.currentTarget.scrollTop;
+        // Simple debounce: update only if scrollTop changes significantly or use a timer
+        setScrollTop(scrollTopValue);
+    }, []);
+    // Update row height callback with batching to reduce re-renders
+    const updateRowHeight = useCallback((index, height) => {
+        setRowHeights((prev) => {
+            const newHeights = [...prev];
+            if (index < newHeights.length && newHeights[index] !== height) {
+                newHeights[index] = height;
+                return newHeights;
+            }
+            return prev;
+        });
+    }, []); // Note: Could be optimized further with useReducer for batching multiple updates
+    // Memoize fullData to avoid recalculating
+    const fullData = useMemo(() => appendNewRow(data, AddNlp ?? {}), [data, AddNlp]);
+    const totalRows = fullData.length;
+    // Memoize virtualization calculations to avoid expensive loops on every render
+    const { startIndex, paddingTop, paddingBottom, visibleRows } = useMemo(() => {
+        let startIndex = 0;
+        let endIndex = totalRows - 1;
+        let paddingTop = 0;
+        let paddingBottom = 0;
+        if (rowHeights.length === totalRows && containerHeight > 0) {
+            let cumulativeHeight = 0;
+            // Find start index
+            for (let i = 0; i < totalRows; i++) {
+                if (cumulativeHeight <= scrollTop) {
+                    startIndex = i;
+                }
+                cumulativeHeight += rowHeights[i] ?? 0;
+            }
+            // Find end index
+            cumulativeHeight = 0;
+            for (let i = 0; i < totalRows; i++) {
+                cumulativeHeight += rowHeights[i] ?? 0;
+                if (cumulativeHeight >= scrollTop + containerHeight &&
+                    endIndex === totalRows - 1) {
+                    endIndex = i;
+                    break;
+                }
+            }
+            // Apply buffer
+            startIndex = Math.max(0, startIndex - buffer);
+            endIndex = Math.min(totalRows - 1, endIndex + buffer);
+            // Expand range to include focus row if needed
+            if (focusRowId) {
+                const focusIndex = fullData.findIndex((row) => row.stepId === focusRowId || (row.isNew && focusRowId === 'new-row'));
+                if (focusIndex >= 0) {
+                    if (focusIndex < startIndex) {
+                        startIndex = focusIndex;
+                    }
+                    else if (focusIndex > endIndex) {
+                        endIndex = focusIndex;
+                    }
+                }
+            }
+            // Calculate padding
+            paddingTop = rowHeights
+                .slice(0, startIndex)
+                .reduce((sum, height) => sum + height, 0);
+            paddingBottom = rowHeights
+                .slice(endIndex + 1)
+                .reduce((sum, height) => sum + height, 0);
+        }
+        else {
+            // Fallback to estimated virtualization
+            startIndex = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - buffer);
+            endIndex = Math.min(totalRows - 1, startIndex + Math.ceil(containerHeight / estimatedRowHeight) + buffer);
+            // Expand range to include focus row if needed
+            if (focusRowId) {
+                const focusIndex = fullData.findIndex((row) => row.stepId === focusRowId || (row.isNew && focusRowId === 'new-row'));
+                if (focusIndex >= 0) {
+                    if (focusIndex < startIndex) {
+                        startIndex = focusIndex;
+                    }
+                    else if (focusIndex > endIndex) {
+                        endIndex = focusIndex;
+                    }
+                }
+            }
+            paddingTop = startIndex * estimatedRowHeight;
+            paddingBottom = (totalRows - endIndex - 1) * estimatedRowHeight;
+        }
+        const visibleRows = fullData.slice(startIndex, endIndex + 1);
+        return { startIndex, endIndex, paddingTop, paddingBottom, visibleRows };
+    }, [
+        fullData,
+        totalRows,
+        rowHeights,
+        containerHeight,
+        scrollTop,
+        buffer,
+        focusRowId,
+        estimatedRowHeight,
+    ]);
+    // Infinite scroll observer - optimized dependencies
+    useEffect(() => {
+        const scrollContainer = containerRef.current;
+        const firstNode = document.getElementById('ff-table-first-node');
+        const lastNode = document.getElementById('ff-table-last-node');
+        if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
+            return;
+        }
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const direction = entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
+                    loadMore(direction);
+                }
+            });
+        }, {
+            root: scrollContainer,
+            rootMargin: '8px',
+            threshold: 0.1,
+        });
+        observerRef.current.observe(firstNode);
+        observerRef.current.observe(lastNode);
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, [data?.length, loadMore]); // Optimized: use data.length instead of data to avoid unnecessary re-runs
+    const handleOnclick = (column, row, index) => {
+        const { onClick, accessor } = column;
+        if (onClick && isFunction(onClick)) {
+            onClick(accessor, row, index);
+        }
+    };
+    const onSelectClick = (tableType, rowData, isChecked) => {
+        if (onSelect) {
+            onSelect(tableType, rowData, isChecked);
+        }
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const oldIndex = data.findIndex((item) => item._id === active.id || item.stepId === active.id);
+        const newIndex = data.findIndex((item) => item._id === over.id || item.stepId === over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        if (onDragEnd)
+            onDragEnd(oldIndex, newIndex);
+    };
+    return (_jsx(DndContext, { collisionDetection: closestCorners, onDragStart: handleDragStart, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis], children: _jsx(SortableContext, { disabled: !draggable, items: data?.map((row) => row._id || row.stepId), strategy: verticalListSortingStrategy, children: _jsxs("div", { ref: containerRef, style: {
+                    height: height,
+                    position: 'relative',
+                    overflowY: height?.includes('vh') ? 'auto' : undefined,
+                }, id: "ff-table-scroll-container", className: classNames(className, {
+                    'ff-fixed-header-steps-table': withFixedHeader,
+                    'steps-border-borderRadius': borderWithRadius,
+                }), onScroll: handleScroll, children: [_jsxs("table", { className: classNames(`ff-table-steps`), cellSpacing: 0, children: [_jsx("thead", { className: 'steps-inner-thead', children: _jsx("tr", { children: columns?.map((column) => (_jsx("th", { className: classNames(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`), style: { width: column?.width } }, `${column.header}-${ffid()}`))) }) }), _jsxs("tbody", { className: "ff-steps-tbody", children: [_jsx("tr", { id: "ff-table-first-node", style: { display: 'none' } }), paddingTop > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingTop, padding: 0 }, colSpan: columns.length }) })), visibleRows.map((row, index) => {
+                                        const absoluteIndex = startIndex + index;
+                                        const isEdit = editMode === row.stepId;
+                                        const isEditOrNew = isEdit || row.isNew;
+                                        const isFocusRow = (isEdit && row.stepId === focusRowId) ||
+                                            (row.isNew && focusRowId === 'new-row');
+                                        const renderEditableRow = () => (_jsxs("tr", { className: "steps-edit-row", id: isFocusRow ? 'getInFocus' : undefined, "data-rowid": row.stepId || 'new-row', children: [isEdit && isValidElement(editComponent) && (_jsx("td", { colSpan: columns.length, children: cloneElement(editComponent, {
+                                                        rowData: row,
+                                                        rowIndex: absoluteIndex + 1,
+                                                    }) })), row.isNew && !isEdit && isValidElement(NlpComponent) && (_jsx("td", { colSpan: columns.length, children: cloneElement(NlpComponent, {
+                                                        rowIndex: absoluteIndex,
+                                                        rowData: row,
+                                                    }) }))] }, row.stepId || absoluteIndex));
+                                        const renderSortableRow = () => (_jsx(StepTableMainRow, { rowId: row.stepId, row: row, onRowHover: handleRowHover, onRowHoverOut: handleRowHoverOut, indexNumber: absoluteIndex, columns: columns, tableBodyRowClass: tableBodyRowClass, handleOnclick: handleOnclick, tableDataTextColor: tableDataTextColor, withCheckbox: withCheckbox, onSelectClick: onSelectClick, draggable: draggable, tableType: tableType, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, selectedRows: selectedRows, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, dataLength: data?.length, stepPartialSelect: stepPartialSelect, isViewPrivilegeMode: isViewPrivilegeMode, isClientSide: isClientSide, updateRowHeight: updateRowHeight }));
+                                        return isEditOrNew ? renderEditableRow() : renderSortableRow();
+                                    }), paddingBottom > 0 && (_jsx("tr", { children: _jsx("td", { style: { height: paddingBottom, padding: 0 }, colSpan: columns.length }) })), _jsx("tr", { id: "ff-table-last-node", style: { display: 'none' } })] })] }), data?.length <= 0 && (_jsx("div", { className: "steps-no-data-content", style: { height: `calc(${height} - 50px)` }, children: noDataContent }))] }) }) }));
+};
+export default StepInnerTable;
+//# sourceMappingURL=StepInnerTable.js.map

package/lib/components/StepsLandingTable/Components/StepResultStats.js

@@ -1 +1,89 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../Typography/Typography.js";import a from"../../Tooltip/Tooltip.js";import{truncateText as s}from"../../../utils/truncateText/truncateText.js";import"./StepInnerTable.scss.js";import r from"../../Icon/Icon.js";import{useMemo as l}from"react";const n=({metaData:n,width:i=0,displayIcon:c=!1})=>{const p=n?.total||0,m=[{name:"Passed",count:n?.totalPassed,color:"var(--status-approved-text-color)"},{name:"Failed",count:n?.totalFailed,color:"var(--status-rejected-text-color)"},{name:"Warning",count:n?.totalWarning,color:"var(--status-warning-text-color)"},{name:"Skipped",count:n?.totalSkipped,color:"var(--status-skipped-text-color)"},{name:"Terminated",count:n?.totalTerminated,color:"var(--status-skipped-text-color)"},{name:"Aborted",count:n?.totalAborted,color:"var(--status-skipped-text-color)"}],d=m.filter(t=>t.count>0),u=d.map(({count:t,name:o})=>`${t}/${p} ${o}`).join(" "),f=i?s(u,i,"pixel"):u,h=m.map(t=>({...t,count:t.count??0})),x=h.reduce((t,{count:o})=>t+o,0),v=h.some(({count:t})=>t>0),g=c?h:m,k=[["Passed","Failed"],["Warning","Skipped"]].map(t=>g.filter(({name:o})=>t.includes(o))),N=(t,o)=>"Skipped"===t?"var(--status-skipped-bg-color)":o,S=l(()=>t("div",{className:"ff-status-tooltip",children:[k.map((a,s)=>o("div",{className:"ff-status-tooltip-row",children:a.map(({name:a,count:s,color:r})=>t("div",{className:"ff-status-item",children:[o("span",{className:"ff-status-dot",style:{backgroundColor:N(a,r)}}),t(e,{as:"span",fontWeight:"medium",fontSize:10,className:"ff-status-result-tooltip-text",color:"var(--tooltip-text-color)",children:[a,": ",s]})]},a))},s)),o("div",{className:"ff-status-tooltip-divider"}),t(e,{as:"span",fontWeight:"medium",fontSize:10,className:"ff-status-tooltip-total",children:["Total Steps - ",x]})]}),[k,x]);if(c)return v?o(a,{title:S,children:o("span",{className:"ff-status-icon-wrapper",children:o(r,{name:"status_icon"})})}):null;const T=[];let b=0;for(const{count:t,name:o,color:e}of d){const a=`${t}/${p} ${o}`;if(!(b+a.length<=f.length)){const t=f.slice(b).trim();t&&T.push({text:t,color:e});break}T.push({text:a,color:e}),b+=a.length+1}return o("div",{className:"ff-stepResultStats",children:o(a,{title:u,children:o(e,{as:"div",className:"status-inline-text",fontWeight:"semi-bold",children:T.map(({text:t,color:a},s)=>o(e,{as:"span",fontWeight:"semi-bold",style:{color:a,whiteSpace:"nowrap"},children:t+" "},s))})})})};export{n as default};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from '../../Typography';
+import Tooltip from '../../Tooltip';
+import { truncateText } from '../../../utils/truncateText/truncateText';
+import './StepInnerTable.scss';
+import Icon from '../../Icon';
+import { useMemo } from 'react';
+const StepResultStats = ({ metaData, width = 0, displayIcon = false, }) => {
+    const total = metaData?.total || 0;
+    const statusList = [
+        {
+            name: 'Passed',
+            count: metaData?.totalPassed,
+            color: 'var(--status-approved-text-color)',
+        },
+        {
+            name: 'Failed',
+            count: metaData?.totalFailed,
+            color: 'var(--status-rejected-text-color)',
+        },
+        {
+            name: 'Warning',
+            count: metaData?.totalWarning,
+            color: 'var(--status-warning-text-color)',
+        },
+        {
+            name: 'Skipped',
+            count: metaData?.totalSkipped,
+            color: 'var(--status-skipped-text-color)',
+        },
+        {
+            name: 'Terminated',
+            count: metaData?.totalTerminated,
+            color: 'var(--status-skipped-text-color)',
+        },
+        {
+            name: 'Aborted',
+            count: metaData?.totalAborted,
+            color: 'var(--status-skipped-text-color)',
+        },
+    ];
+    // Filter only statuses with a count > 0
+    const visibleStatuses = statusList.filter((item) => item.count > 0);
+    // Full raw text (used in tooltip)
+    const fullText = visibleStatuses
+        .map(({ count, name }) => `${count}/${total} ${name}`)
+        .join(' ');
+    // Truncate entire line text based on provided width
+    const truncatedText = width
+        ? truncateText(fullText, width, 'pixel')
+        : fullText;
+    const STATUS_GROUPS = [
+        ['Passed', 'Failed'],
+        ['Warning', 'Skipped'],
+    ];
+    const normalizedStatusList = statusList.map((item) => ({
+        ...item,
+        count: item.count ?? 0,
+    }));
+    const tooltipTotal = normalizedStatusList.reduce((sum, { count }) => sum + count, 0);
+    const hasAnyStatus = normalizedStatusList.some(({ count }) => count > 0);
+    const tooltipStatusList = displayIcon ? normalizedStatusList : statusList;
+    const groupedStatuses = STATUS_GROUPS.map((group) => tooltipStatusList.filter(({ name }) => group.includes(name)));
+    const getStatusColor = (name, color) => name === 'Skipped' ? 'var(--status-skipped-bg-color)' : color;
+    const tooltipContent = useMemo(() => (_jsxs("div", { className: "ff-status-tooltip", children: [groupedStatuses.map((group, rowIndex) => (_jsx("div", { className: "ff-status-tooltip-row", children: group.map(({ name, count, color }) => (_jsxs("div", { className: "ff-status-item", children: [_jsx("span", { className: "ff-status-dot", style: { backgroundColor: getStatusColor(name, color) } }), _jsxs(Typography, { as: "span", fontWeight: "medium", fontSize: 10, className: "ff-status-result-tooltip-text", color: "var(--tooltip-text-color)", children: [name, ": ", count] })] }, name))) }, rowIndex))), _jsx("div", { className: "ff-status-tooltip-divider" }), _jsxs(Typography, { as: "span", fontWeight: "medium", fontSize: 10, className: "ff-status-tooltip-total", children: ["Total Steps - ", tooltipTotal] })] })), [groupedStatuses, tooltipTotal]);
+    if (displayIcon) {
+        return hasAnyStatus ? (_jsx(Tooltip, { title: tooltipContent, children: _jsx("span", { className: "ff-status-icon-wrapper", children: _jsx(Icon, { name: "status_icon" }) }) })) : null;
+    }
+    // Break truncated text into colored segments
+    const coloredSegments = [];
+    let cursor = 0;
+    for (const { count, name, color } of visibleStatuses) {
+        const segmentText = `${count}/${total} ${name}`;
+        if (cursor + segmentText.length <= truncatedText.length) {
+            coloredSegments.push({ text: segmentText, color });
+            cursor += segmentText.length + 1;
+        }
+        else {
+            const remainingText = truncatedText.slice(cursor).trim();
+            if (remainingText) {
+                coloredSegments.push({ text: remainingText, color });
+            }
+            break;
+        }
+    }
+    return (_jsx("div", { className: "ff-stepResultStats", children: _jsx(Tooltip, { title: fullText, children: _jsx(Typography, { as: "div", className: "status-inline-text", fontWeight: "semi-bold", children: coloredSegments.map(({ text, color }, index) => (_jsx(Typography, { as: "span", fontWeight: "semi-bold", style: { color, whiteSpace: 'nowrap' }, children: text + ' ' }, index))) }) }) }));
+};
+export default StepResultStats;
+//# sourceMappingURL=StepResultStats.js.map

package/lib/components/StepsLandingTable/Components/StepTableMainRow.js

@@ -1 +1,87 @@
-import{jsxs as e,Fragment as t,jsx as a}from"react/jsx-runtime";import{memo as o,useRef as r,useMemo as i,useEffect as s}from"react";import{useSortable as d}from"../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as n}from"../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";import l from"../../../_virtual/index.js";import p from"./StepGroupAccordions.js";import c from"../../Icon/Icon.js";import m from"../../Checkbox/Checkbox.js";import{ffid as h}from"../../../utils/ffID/ffid.js";import{prepareData as f}from"../../../utils/TableCell/TableCell.js";import u from"../../Typography/Typography.js";const x=o(({row:o,columns:x,tableBodyRowClass:b,handleOnclick:g,tableDataTextColor:w,withCheckbox:C,onSelectClick:I,draggable:k,indexNumber:v=0,tableType:y="",viewModeId:S,ViewComponent:N,handleClick:T,selectedRows:j,handleStepGroupExpand:R,isStepGroupExpanded:L,dataLength:M,stepPartialSelect:E,isViewPrivilegeMode:_,isClientSide:G,updateRowHeight:H,rowId:V,onRowHover:D,onRowHoverOut:P})=>{const B=new Set(["group","pre","post","script"]),O=B.has(o?.entityType?.toLowerCase())||B.has(o?.type?.toLowerCase()),$=r(null),A=i(()=>o?.isDisabled||(M??0)<=1||o.isSpecialNlp,[o,M]),W=(v+1).toString(),{attributes:q,listeners:z,setNodeRef:F,transform:J,transition:K}=d({id:o?._id||o?.stepId,disabled:A}),Q=i(()=>({transform:n.Transform.toString(J),transition:K}),[J,K]),U=o?._id||o?.stepId;s(()=>{if($.current&&H){const e=$.current.getBoundingClientRect().height;H(v,e)}},[o,H,v,L?.(o?.stepId)]);const X=e=>_||G?O&&0===e?"4px 8px":"7px 8px":0!==e?"Steps"===y?"4px 8px":"7px 8px":"Steps"===y&&k?"4px 8px 4px 0px":"4px 8px 4px 24px";return e(t,{children:[a("tr",{"data-rowid":V,ref:e=>{$.current=e,F(e)},style:Q,className:l(b,"sortable-item",{"disabled-inner-row":A}),id:U,onMouseEnter:()=>{D?.(V||"")},onMouseLeave:()=>{P?.(V||"")},children:x?.map((r,i)=>a(t,{children:a("td",{style:{padding:X(i),maxWidth:r.width},onClick:()=>g(r,o,v),children:e(u,{as:"div",color:w,className:"ff-data-checkbox-container",children:[0===i&&!G&&k&&a("div",{className:A?"ff-table-drag":"ff-table-drag-icon",...z,...q,children:a(c,{name:"drag",className:A?"drag-icon-disabled":"drag-icon"})}),0===i&&!G&&C&&a("span",{className:y&&j[y]?.has(o.stepId)||E?.has(o.stepId)?"ff-step-table-select-checkbox":"ff-table-checkbox-step",children:a(m,{onChange:e=>I(y,o,e.target.checked),checked:!!j[y]?.has(o.stepId),partial:E?.has(o.stepId),disabled:o?.isSpecialNlp&&o?.name?.includes("End")})}),e("div",{className:"ff-margin-container",style:{marginLeft:0===i?o.marginLeft:0},children:[f(o,r,v,y),O&&0===i&&!G&&a("div",{className:"ff-accordion-arrow "+(L?.(o?.stepId)?"expanded":""),children:a(c,{name:"arrow_right",className:"steps-arrow-svg",color:L?.(o?.stepId)?"var(--brand-color)":"var(--default-color)",width:12,height:12,onClick:()=>R?.({...o,tableType:y,serialNumber:W})})}),r.extraInfo?.({row:o,indexNumber:v,tableType:y})]})]})},`${r.accessor}-${h()}`)}))},U),L?.(o?.stepId)&&a(p,{data:o.data||o?.stepResults,columnCount:x.length,viewModeId:S,ViewComponent:N,handleClick:T,tableType:y,handleStepGroupExpand:R,isStepGroupExpanded:L,level:o?.marginLeft,isViewPrivilegeMode:_,columns:x,parentIndex:v,updateRowHeight:H})]})});x.displayName="StepTableMainRow";export{x as default};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import classNames from 'classnames';
+import StepGroupAccordions from './StepGroupAccordions';
+import Icon from '../../Icon';
+import Checkbox from '../../Checkbox';
+import { ffid } from '../../../utils/ffID/ffid';
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import Typography from '../../Typography';
+const StepTableMainRow = memo(({ row, columns, tableBodyRowClass, handleOnclick, tableDataTextColor, withCheckbox, onSelectClick, draggable, indexNumber = 0, tableType = '', viewModeId, ViewComponent, handleClick, selectedRows, handleStepGroupExpand, isStepGroupExpanded, dataLength, stepPartialSelect, isViewPrivilegeMode, isClientSide, updateRowHeight, rowId, onRowHover, onRowHoverOut, }) => {
+    const typeSet = new Set(['group', 'pre', 'post', 'script']);
+    const showAccordion = typeSet.has(row?.entityType?.toLowerCase()) ||
+        typeSet.has(row?.type?.toLowerCase());
+    const rowRef = useRef(null);
+    const isDisabled = useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
+    const serialNumber = (indexNumber + 1).toString();
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: row?._id || row?.stepId,
+        disabled: isDisabled,
+    });
+    const style = useMemo(() => ({
+        transform: CSS.Transform.toString(transform),
+        transition,
+    }), [transform, transition]);
+    const key = row?._id || row?.stepId;
+    // Measure row height and report to parent
+    useEffect(() => {
+        if (rowRef.current && updateRowHeight) {
+            const height = rowRef.current.getBoundingClientRect().height;
+            updateRowHeight(indexNumber, height);
+        }
+    }, [row, updateRowHeight, indexNumber, isStepGroupExpanded?.(row?.stepId)]);
+    const getPadding = (index) => {
+        if (isViewPrivilegeMode || isClientSide) {
+            if (showAccordion && index === 0) {
+                return '4px 8px';
+            }
+            return '7px 8px';
+        }
+        if (index !== 0) {
+            return tableType === 'Steps' ? '4px 8px' : '7px 8px';
+        }
+        if (tableType === 'Steps') {
+            return draggable ? '4px 8px 4px 0px' : '4px 8px 4px 24px';
+        }
+        return '4px 8px 4px 24px';
+    };
+    const renderDragHandle = () => (_jsx("div", { className: isDisabled ? 'ff-table-drag' : 'ff-table-drag-icon', ...listeners, ...attributes, children: _jsx(Icon, { name: "drag", className: isDisabled ? 'drag-icon-disabled' : 'drag-icon' }) }));
+    const renderCheckbox = () => (_jsx("span", { className: (tableType && selectedRows[tableType]?.has(row.stepId)) ||
+            stepPartialSelect?.has(row.stepId)
+            ? 'ff-step-table-select-checkbox'
+            : 'ff-table-checkbox-step', children: _jsx(Checkbox, { onChange: (e) => onSelectClick(tableType, row, e.target.checked), checked: !!selectedRows[tableType]?.has(row.stepId), partial: stepPartialSelect?.has(row.stepId), disabled: row?.isSpecialNlp && row?.name?.includes('End') }) }));
+    const renderGroupToggle = () => (_jsx("div", { className: `ff-accordion-arrow ${isStepGroupExpanded?.(row?.stepId) ? 'expanded' : ''}`, children: _jsx(Icon, { name: "arrow_right", className: "steps-arrow-svg", color: isStepGroupExpanded?.(row?.stepId)
+                ? 'var(--brand-color)'
+                : 'var(--default-color)', width: 12, height: 12, onClick: () => handleStepGroupExpand?.({ ...row, tableType, serialNumber }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("tr", { "data-rowid": rowId, ref: (el) => {
+                    rowRef.current = el;
+                    setNodeRef(el);
+                }, style: style, className: classNames(tableBodyRowClass, 'sortable-item', {
+                    'disabled-inner-row': isDisabled,
+                }), id: key, onMouseEnter: () => {
+                    onRowHover?.(rowId || '');
+                }, onMouseLeave: () => {
+                    onRowHoverOut?.(rowId || '');
+                }, children: columns?.map((column, index) => {
+                    return (_jsx(_Fragment, { children: _jsx("td", { style: {
+                                padding: getPadding(index),
+                                maxWidth: column.width,
+                            }, onClick: () => handleOnclick(column, row, indexNumber), children: _jsxs(Typography, { as: "div", color: tableDataTextColor, className: "ff-data-checkbox-container", children: [index === 0 &&
+                                        !isClientSide &&
+                                        draggable &&
+                                        renderDragHandle(), index === 0 &&
+                                        !isClientSide &&
+                                        withCheckbox &&
+                                        renderCheckbox(), _jsxs("div", { className: "ff-margin-container", style: {
+                                            marginLeft: index === 0 ? row.marginLeft : 0,
+                                        }, children: [prepareData(row, column, indexNumber, tableType), showAccordion &&
+                                                index === 0 &&
+                                                !isClientSide &&
+                                                renderGroupToggle(), column.extraInfo?.({ row, indexNumber, tableType })] })] }) }, `${column.accessor}-${ffid()}`) }));
+                }) }, key), isStepGroupExpanded?.(row?.stepId) && (_jsx(StepGroupAccordions, { data: row.data || row?.stepResults, columnCount: columns.length, viewModeId: viewModeId, ViewComponent: ViewComponent, handleClick: handleClick, tableType: tableType, handleStepGroupExpand: handleStepGroupExpand, isStepGroupExpanded: isStepGroupExpanded, level: row?.marginLeft, isViewPrivilegeMode: isViewPrivilegeMode, columns: columns, parentIndex: indexNumber, updateRowHeight: updateRowHeight }))] }));
+});
+StepTableMainRow.displayName = 'StepTableMainRow';
+export default StepTableMainRow;
+//# sourceMappingURL=StepTableMainRow.js.map

package/lib/components/StepsLandingTable/Components/StepsTitle.js

@@ -1 +1,56 @@
-import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import{getStatusColor as r,getStatus as a,getStatusLabel as i}from"../../../utils/getStatusColor/getStatusColor.js";import o from"../../Checkbox/Checkbox.js";import l from"../../Icon/Icon.js";import c from"../../StatusButton/StatusButton.js";import n from"../../Tooltip/Tooltip.js";import d from"../../Typography/Typography.js";import p from"./StepResultStats.js";import"../StepLandingTable.scss.js";const h=({isHeaderRequired:h,isViewPrivilegeMode:m,onAccordionClick:u,isBulkEnable:g,showActionCell:f,handleMainCheckbox:v,isAllSelected:x,isPartialSelected:w,tableMeta:C=[],title:b,totalRows:S,expanded:y,actionCell:j,row:k,metaData:N,isClientSide:T,isMaximize:M})=>{const P=C?.map(e=>e.width),A=e=>{const t=P[e]??0;switch(e){case 0:return t+110;case 1:return t+(t>300?60:70);case 2:return t+20;default:return 0}};return e("article",{className:"step-title-article",style:{...!h&&!T&&{backgroundColor:"var(--hover-color)"}},children:[t("div",{style:{width:`${A(0)}px`},children:e("div",{className:"accordion-header",style:{paddingLeft:m||T?"8px":"24px"},children:[!m&&!T&&t(o,{onChange:e=>v(b,e.target.checked),checked:x(b,S),partial:w(b,S),disabled:0===S}),t("div",{className:"header-title",children:t(d,{as:"div",fontWeight:"semi-bold",color:T?"var(--brand-color)":"var(--nlp-option-color)",cursor:"default",lineHeight:"18px",children:b})}),t("div",T?{style:{padding:"12px"}}:{className:"accordion-arrow "+(y?"expanded":""),onClick:()=>u(b),children:t(l,{name:"arrow_right",color:y?"var(--brand-color)":"var(--default-color)",width:16,height:16,className:"steps-arrow-svg"})}),e("div",{className:"ff_action_container",children:[N&&t(p,{metaData:N,width:(()=>{const e=k?.marginLeft??0;if((x?.(b,S)||w?.(b,S))&&"Steps"===b)return 200-e;return(M?350:{"Depends on Scripts":240,"Post Conditions":230,"Pre Conditions":260,Steps:310}[b]??250)-e})()}),f&&!g&&t(s,{children:j(k)})]})]})}),N?.message&&t("div",{className:"step-result",style:{width:`${A(1)}px`},children:t(n,{title:N?.message,placement:"bottom-start",children:t(d,{lineHeight:"18px",as:"div",className:"step-result-text",color:r(N?.status),children:N?.message})})}),N?.status&&t("div",{className:"step-result",style:{width:`${A(2)}px`},children:t(c,{label:i(N?.status),status:a(N?.status),children:N?.status})})]})};export{h as default};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStatusColor, getStatusLabel, getStatus, } from '../../../utils/getStatusColor/getStatusColor';
+import Checkbox from '../../Checkbox';
+import Icon from '../../Icon';
+import StatusButton from '../../StatusButton';
+import Tooltip from '../../Tooltip';
+import Typography from '../../Typography';
+import StepResultStats from './StepResultStats';
+import '../StepLandingTable.scss';
+const StepsTitle = ({ isHeaderRequired, isViewPrivilegeMode, onAccordionClick, isBulkEnable, showActionCell, handleMainCheckbox, isAllSelected, isPartialSelected, tableMeta = [], title, totalRows, expanded, actionCell, row, metaData, isClientSide, isMaximize, }) => {
+    const columnWidths = tableMeta?.map((col) => col.width);
+    const getWidth = (index) => {
+        const width = columnWidths[index] ?? 0;
+        switch (index) {
+            case 0:
+                return width + 110;
+            case 1:
+                return width + (width > 300 ? 60 : 70);
+            case 2:
+                return width + 20;
+            default:
+                return 0;
+        }
+    };
+    const getStepResultStatsWidth = () => {
+        const margin = row?.marginLeft ?? 0;
+        const isChecked = isAllSelected?.(title, totalRows) ||
+            isPartialSelected?.(title, totalRows);
+        if (isChecked && title === 'Steps') {
+            return 200 - margin;
+        }
+        const TITLE_WIDTH_MAP = {
+            'Depends on Scripts': 240,
+            'Post Conditions': 230,
+            'Pre Conditions': 260,
+            'Steps': 310,
+        };
+        const DEFAULT_WIDTH = 250;
+        const baseWidth = isMaximize
+            ? 350
+            : TITLE_WIDTH_MAP[title] ?? DEFAULT_WIDTH;
+        return baseWidth - margin;
+    };
+    return (_jsxs("article", { className: "step-title-article", style: {
+            ...(!isHeaderRequired &&
+                !isClientSide && { backgroundColor: 'var(--hover-color)' }),
+        }, children: [_jsx("div", { style: { width: `${getWidth(0)}px` }, children: _jsxs("div", { className: "accordion-header", style: {
+                        paddingLeft: isViewPrivilegeMode || isClientSide ? '8px' : '24px',
+                    }, children: [!isViewPrivilegeMode && !isClientSide && (_jsx(Checkbox, { onChange: (e) => handleMainCheckbox(title, e.target.checked), checked: isAllSelected(title, totalRows), partial: isPartialSelected(title, totalRows), disabled: totalRows === 0 })), _jsx("div", { className: "header-title", children: _jsx(Typography, { as: "div", fontWeight: "semi-bold", color: isClientSide ? 'var(--brand-color)' : 'var(--nlp-option-color)', cursor: "default", lineHeight: "18px", children: title }) }), isClientSide ? (
+                        //TODO: added temporary div will replace with add Icon
+                        _jsx("div", { style: { padding: '12px' } })) : (_jsx("div", { className: `accordion-arrow ${expanded ? 'expanded' : ''}`, onClick: () => onAccordionClick(title), children: _jsx(Icon, { name: "arrow_right", color: expanded ? 'var(--brand-color)' : 'var(--default-color)', width: 16, height: 16, className: "steps-arrow-svg" }) })), _jsxs("div", { className: "ff_action_container", children: [metaData && (_jsx(StepResultStats, { metaData: metaData, width: getStepResultStatsWidth() })), showActionCell && !isBulkEnable && _jsx(_Fragment, { children: actionCell(row) })] })] }) }), metaData?.message && (_jsx("div", { className: "step-result", style: {
+                    width: `${getWidth(1)}px`,
+                }, children: _jsx(Tooltip, { title: metaData?.message, placement: "bottom-start", children: _jsx(Typography, { lineHeight: "18px", as: "div", className: "step-result-text", color: getStatusColor(metaData?.status), children: metaData?.message }) }) })), metaData?.status && (_jsx("div", { className: "step-result", style: { width: `${getWidth(2)}px` }, children: _jsx(StatusButton, { label: getStatusLabel(metaData?.status), status: getStatus(metaData?.status), children: metaData?.status }) }))] }));
+};
+export default StepsTitle;
+//# sourceMappingURL=StepsTitle.js.map