kurtosis-ui-components 0.85.55 → 0.86.0

package/build/CopyButton.js

@@ -22,6 +22,6 @@ export const CopyButton = ({ valueToCopy, text, contentName, isIconButton, ...bu
         return (_jsx(IconButton, { icon: _jsx(FiCopy, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handleCopyClick, ...buttonProps, children: text || "Copy" }));
     }
     else {
-        return (_jsx(Button, { leftIcon: _jsx(FiCopy, {}), size: "xs", colorScheme: "darkBlue", onClick: handleCopyClick, ...buttonProps, children: text || "Copy" }));
+        return (_jsx(Button, { leftIcon: _jsx(FiCopy, {}), size: "xs", colorScheme: "darkBlue", variant: "outline", onClick: handleCopyClick, ...buttonProps, children: text || "Copy" }));
     }
 };

package/build/DataTable.js

@@ -25,7 +25,7 @@ export function DataTable({ data, columns, defaultSorting, rowSelection, onRowSe
         onRowSelectionChange: onRowSelectionChange,
         state: tableState,
     });
-    return (_jsx(Box, { w: "100%", h: "100%", borderRadius: "6px", border: "1px solid", borderColor: "whiteAlpha.300", overflow: "clip", children: _jsxs(Table, { children: [_jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(Tr, { children: headerGroup.headers.map((header) => {
+    return (_jsx(Box, { w: "100%", h: "100%", flex: "1", borderRadius: "6px", border: "1px solid", borderColor: "whiteAlpha.300", overflow: "clip", children: _jsxs(Table, { children: [_jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(Tr, { children: headerGroup.headers.map((header) => {
                             const meta = header.column.columnDef.meta;
                             return (_jsxs(Th, { onClick: header.column.getToggleSortingHandler(), isNumeric: meta === null || meta === void 0 ? void 0 : meta.isNumeric, textAlign: !!(meta === null || meta === void 0 ? void 0 : meta.centerAligned) ? "center" : undefined, children: [header.column.getCanSort() && (_jsx(Button, { variant: "sortableHeader", size: "xs", rightIcon: header.column.getIsSorted() === "desc" ? (_jsx(Icon, { as: BiDownArrowAlt, color: "gray.400" })) : header.column.getIsSorted() === "asc" ? (_jsx(Icon, { as: BiUpArrowAlt, color: "gray.400" })) : undefined, children: flexRender(header.column.columnDef.header, header.getContext()) })), !header.column.getCanSort() && flexRender(header.column.columnDef.header, header.getContext())] }, header.id));
                         }) }, headerGroup.id))) }), _jsx(Tbody, { children: table.getRowModel().rows.map((row) => (_jsx(Tr, { bg: row.getIsSelected() ? "gray.700" : "", children: row.getVisibleCells().map((cell) => {

package/build/DownloadButton.js

@@ -26,6 +26,6 @@ export const DownloadButton = ({ valueToDownload, text, fileName, isIconButton,
         return (_jsx(IconButton, { icon: _jsx(FiDownload, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handleDownloadClick, ...buttonProps }));
     }
     else {
-        return (_jsx(Button, { leftIcon: _jsx(FiDownload, {}), size: "xs", colorScheme: "darkBlue", onClick: handleDownloadClick, ...buttonProps, children: text || "Download" }));
+        return (_jsx(Button, { leftIcon: _jsx(FiDownload, {}), size: "xs", colorScheme: "darkBlue", variant: "outline", onClick: handleDownloadClick, ...buttonProps, children: text || "Download" }));
     }
 };

package/build/FormatButton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@chakra-ui/react";
 import { BiPaintRoll } from "react-icons/bi";
 export const FormatButton = ({ ...buttonProps }) => {
-    return (_jsx(Button, { leftIcon: _jsx(BiPaintRoll, {}), size: "sm", colorScheme: "darkBlue", loadingText: "Format", ...buttonProps, children: "Format" }));
+    return (_jsx(Button, { leftIcon: _jsx(BiPaintRoll, {}), size: "sm", colorScheme: "darkBlue", loadingText: "Format", variant: "outline", ...buttonProps, children: "Format" }));
 };

package/build/HoverLineTabList.d.ts

@@ -1,5 +1,5 @@
 type HoverLineTabListProps = {
-    tabs: string[];
+    tabs: readonly string[];
     activeTab: string;
 };
 /**

package/build/KurtosisAlert.d.ts

@@ -3,7 +3,8 @@ import { FallbackProps } from "react-error-boundary";
 type KurtosisAlertProps = AlertProps & {
     message: string;
     details?: string;
+    onClose?: () => void;
 };
-export declare const KurtosisAlert: ({ message, details, ...alertProps }: KurtosisAlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KurtosisAlert: ({ message, details, onClose, ...alertProps }: KurtosisAlertProps) => import("react/jsx-runtime").JSX.Element;
 export declare const KurtosisAlertError: ({ error }: FallbackProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/build/KurtosisAlert.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, } from "@chakra-ui/react";
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertIcon, AlertTitle, Box, CloseButton, Flex, } from "@chakra-ui/react";
 import { isDefined, stringifyError } from "./utils";
-export const KurtosisAlert = ({ message, details, ...alertProps }) => {
-    return (_jsxs(Alert, { status: "error", overflowY: "auto", maxHeight: "300px", alignItems: "flex-start", ...alertProps, children: [_jsx(AlertIcon, {}), _jsxs(Flex, { flexDirection: "column", width: "100%", gap: "8px", children: [_jsxs(Flex, { direction: "row", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: message })] }), isDefined(details) && (_jsx(Accordion, { allowToggle: true, children: _jsxs(AccordionItem, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: "Error details" }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { pb: 4, children: _jsx(Box, { as: "pre", whiteSpace: "pre-wrap", wordBreak: "break-word", children: details }) })] }) }))] })] }));
+export const KurtosisAlert = ({ message, details, onClose, ...alertProps }) => {
+    return (_jsxs(Alert, { status: "error", overflowY: "auto", maxHeight: "300px", position: "relative", alignItems: "flex-start", ...alertProps, children: [_jsx(AlertIcon, {}), isDefined(onClose) && (_jsx(CloseButton, { alignSelf: "flex-start", position: "absolute", right: "4px", top: "4px", onClick: onClose })), _jsxs(Flex, { flexDirection: "column", width: "100%", gap: "8px", children: [_jsx(AlertTitle, { children: "Error" }), _jsx(AlertDescription, { children: message }), isDefined(details) && (_jsx(Accordion, { allowToggle: true, children: _jsxs(AccordionItem, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: "Error details" }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { pb: 4, children: _jsx(Box, { as: "pre", whiteSpace: "pre-wrap", wordBreak: "break-word", children: details }) })] }) }))] })] }));
 };
 export const KurtosisAlertError = ({ error }) => {
     return _jsx(KurtosisAlert, { message: "An error ocurred, details below", details: stringifyError(error) });

package/build/KurtosisThemeProvider.js

@@ -5,6 +5,7 @@ import { mode } from "@chakra-ui/theme-tools";
 import { useEffect } from "react";
 import Fonts from "./theme/Fonts";
 import { formsTheme } from "./theme/formsTheme";
+import { progressTheme } from "./theme/progressTheme";
 import { tabsTheme } from "./theme/tabsTheme";
 import { tagTheme } from "./theme/tagsTheme";
 // https://github.com/chakra-ui/chakra-ui/issues/3347
@@ -26,13 +27,13 @@ const theme = extendTheme({
     },
     colors: {
         kurtosisGreen: {
-            100: "#18371E",
-            200: "#008c19",
-            300: "#00bb22",
+            100: "#99f7aa",
+            200: "#66f27f",
+            300: "#33ee55",
             400: "#00C223",
-            500: "#33ee55",
-            600: "#66f27f",
-            700: "#99f7aa",
+            500: "#00bb22",
+            600: "#008c19",
+            700: "#18371E",
         },
         darkBlue: {
             200: "#516A77",
@@ -53,6 +54,19 @@ const theme = extendTheme({
             850: "#1B1B1D",
             900: "#111111", // ui background
         },
+        red: {
+            450: "#BD3737",
+            650: "#943031",
+            900: "#441C1C",
+        },
+        green: {
+            450: "#05A122",
+            650: "#0B7F21",
+        },
+        blue: {
+            450: "#2D6DAB",
+            650: "#285987",
+        },
     },
     fontSizes: {
         xs: "12px",
@@ -78,6 +92,16 @@ const theme = extendTheme({
         }),
     },
     components: {
+        Alert: {
+            baseStyle: defineStyle(({ colorScheme }) => ({
+                container: {
+                    bg: `${colorScheme}.900`,
+                },
+                icon: {
+                    color: `${colorScheme}.500`,
+                },
+            })),
+        },
         Badge: {
             baseStyle: {
                 textTransform: "none",
@@ -86,15 +110,32 @@ const theme = extendTheme({
         },
         Button: {
             defaultProps: {
-                variant: "outline",
+                variant: "solid",
             },
             variants: {
-                outline: (props) => ({
-                    _hover: { borderColor: `${props.colorScheme}.400`, bg: `gray.650` },
-                    _active: { bg: `gray.700` },
-                    color: `${props.colorScheme}.400`,
-                    borderColor: "gray.300",
-                }),
+                solid: (props) => {
+                    const bg = ["red", "green", "blue"].includes(props.colorScheme)
+                        ? `${props.colorScheme}.650`
+                        : `${props.colorScheme}.600`;
+                    const bgInteraction = ["red", "green", "blue"].includes(props.colorScheme)
+                        ? `${props.colorScheme}.450`
+                        : `${props.colorScheme}.400`;
+                    return {
+                        _hover: { bg: bgInteraction, _disabled: { bg } },
+                        _active: { bg: bgInteraction },
+                        bg,
+                        color: `white`,
+                    };
+                },
+                outline: (props) => {
+                    const color = props.colorScheme === "gray" ? "gray.100" : `${props.colorScheme}.400`;
+                    return {
+                        _hover: { borderColor: `${props.colorScheme}.400`, bg: `gray.650` },
+                        _active: { bg: `gray.700` },
+                        color,
+                        borderColor: "gray.300",
+                    };
+                },
                 activeFilterControl: (props) => ({
                     _hover: { borderColor: `${props.colorScheme}.200` },
                     borderColor: `${props.colorScheme}.400`,
@@ -122,9 +163,6 @@ const theme = extendTheme({
                         borderColor: "gray.300",
                     };
                 },
-                solid: defineStyle((props) => ({
-                    color: `white`,
-                })),
                 savedSolid: (props) => {
                     const solid = theme.components.Button.variants.solid(props);
                     return {
@@ -263,7 +301,28 @@ const theme = extendTheme({
                 },
             })),
         },
+        Drawer: {
+            baseStyle: {
+                overlay: {
+                    bg: "blackAlpha.100",
+                },
+                header: {
+                    borderBottomWidth: "1px",
+                    borderBottomColor: "gray.500",
+                },
+                body: { bg: "gray.900", h: "100%", p: "16px" },
+                footer: {
+                    borderTopWidth: "1px",
+                    borderTopColor: "gray.500",
+                },
+            },
+        },
         Form: formsTheme,
+        Input: {
+            baseStyle: {
+                field: { _dark: { bg: "gray.850" } },
+            },
+        },
         Menu: {
             baseStyle: {
                 list: {
@@ -274,7 +333,7 @@ const theme = extendTheme({
                 item: {
                     borderRadius: "6px",
                 },
-                icon: { color: "gray.400", "font-size": "18px !important" },
+                icon: { color: "gray.400", fontSize: "18px !important" },
             },
         },
         Popover: {
@@ -285,6 +344,7 @@ const theme = extendTheme({
                 },
             },
         },
+        Progress: progressTheme,
         Switch: {
             defaultProps: {
                 colorScheme: "green",

package/build/PasteButton.js

@@ -22,6 +22,6 @@ export const PasteButton = ({ onValuePasted, text, isIconButton, ...buttonProps
         return (_jsx(IconButton, { icon: _jsx(FiClipboard, {}), size: "xs", variant: "ghost", colorScheme: "darkBlue", onClick: handlePasteClick, isLoading: isLoading, ...buttonProps, children: text || "Paste" }));
     }
     else {
-        return (_jsx(Button, { leftIcon: _jsx(FiClipboard, {}), size: "xs", colorScheme: "darkBlue", onClick: handlePasteClick, isLoading: isLoading, ...buttonProps, children: text || "Paste" }));
+        return (_jsx(Button, { leftIcon: _jsx(FiClipboard, {}), size: "xs", colorScheme: "darkBlue", variant: "outline", onClick: handlePasteClick, isLoading: isLoading, ...buttonProps, children: text || "Paste" }));
     }
 };

package/build/catalog/KurtosisPackageCardHorizontal.d.ts

@@ -0,0 +1,7 @@
+import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
+type KurtosisPackageCardHorizontalProps = {
+    kurtosisPackage: KurtosisPackage;
+    onClick: () => void;
+};
+export declare const KurtosisPackageCardHorizontal: ({ kurtosisPackage, onClick }: KurtosisPackageCardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/catalog/KurtosisPackageCardHorizontal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, Text, Tooltip } from "@chakra-ui/react";
+import { IoPlay, IoStar } from "react-icons/io5";
+import { numberSummary } from "../utils";
+import { readablePackageName } from "./utils";
+import { PackageLogo } from "./widgets/PackageLogo";
+import { SaveKurtosisPackageButton } from "./widgets/SaveKurtosisPackageButton";
+export const KurtosisPackageCardHorizontal = ({ kurtosisPackage, onClick }) => {
+    var _a;
+    return (_jsxs(Flex, { h: "76px", w: "100%", p: "16px", bg: "gray.900", borderColor: "whiteAlpha.300", borderWidth: "1px", borderStyle: "solid", borderRadius: "6px", gap: "16px", alignItems: "center", _hover: { bg: "gray.850", cursor: "pointer" }, onClick: onClick, children: [_jsx(PackageLogo, { kurtosisPackage: kurtosisPackage, h: "44px", w: "44px" }), _jsxs(Flex, { flexDirection: "column", flex: "1", justifyContent: "space-between", children: [_jsxs(Text, { noOfLines: 1, fontSize: "md", children: [readablePackageName(kurtosisPackage.name), _jsx(SaveKurtosisPackageButton, { isIconButton: true, "aria-label": "Toggle button save", kurtosisPackage: kurtosisPackage, flex: "1", variant: "ghost" })] }), _jsxs(Flex, { gap: "12px", fontSize: "sm", children: [_jsx(Text, { as: "span", textTransform: "capitalize", noOfLines: 1, fontSize: "xs", children: ((_a = kurtosisPackage.repositoryMetadata) === null || _a === void 0 ? void 0 : _a.owner.replaceAll("-", " ")) || "Unknown owner" }), _jsx(Tooltip, { label: `This package has ${kurtosisPackage.runCount} stars`, children: _jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { as: IoStar }), _jsx(Text, { as: "span", children: numberSummary(Number(kurtosisPackage.stars)) })] }) }), _jsx(Tooltip, { label: `This package has been run ${kurtosisPackage.runCount} times`, children: _jsxs(Flex, { gap: "4px", alignItems: "center", children: [_jsx(Icon, { as: IoPlay }), _jsx(Text, { as: "span", children: numberSummary(kurtosisPackage.runCount) })] }) })] })] })] }));
+};

package/build/catalog/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./KurtosisPackageCard";
 export * from "./KurtosisPackageCardGrid";
+export * from "./KurtosisPackageCardHorizontal";
 export * from "./KurtosisPackageCardRow";
 export * from "./SavedPackages";
 export * from "./utils";

package/build/catalog/index.js

@@ -1,5 +1,6 @@
 export * from "./KurtosisPackageCard";
 export * from "./KurtosisPackageCardGrid";
+export * from "./KurtosisPackageCardHorizontal";
 export * from "./KurtosisPackageCardRow";
 export * from "./SavedPackages";
 export * from "./utils";

package/build/catalog/widgets/SaveKurtosisPackageButton.js

@@ -16,7 +16,7 @@ const SaveKurtosisPackageButtonImpl = ({ kurtosisPackage, ...buttonProps }) => {
     const { savedPackages, togglePackageSaved } = useSavedPackages();
     const isPackageSaved = useMemo(() => savedPackages.some((p) => p.name === kurtosisPackage.name), [savedPackages, kurtosisPackage]);
     const handleClick = useCallback((e) => {
-        e.preventDefault();
+        e.stopPropagation();
         togglePackageSaved(kurtosisPackage);
     }, [togglePackageSaved, kurtosisPackage]);
     return _jsx(SaveKurtosisPackageButtonMemo, { isPackageSaved: isPackageSaved, onClick: handleClick, ...buttonProps });

package/build/index.d.ts

@@ -4,7 +4,6 @@ export * from "./CodeEditor";
 export * from "./CopyButton";
 export * from "./DataTable";
 export * from "./DownloadButton";
-export * from "./FeatureNotImplementedModal";
 export * from "./FileDisplay";
 export * from "./FileSize";
 export * from "./FileTree";

package/build/index.js

@@ -4,7 +4,6 @@ export * from "./CodeEditor";
 export * from "./CopyButton";
 export * from "./DataTable";
 export * from "./DownloadButton";
-export * from "./FeatureNotImplementedModal";
 export * from "./FileDisplay";
 export * from "./FileSize";
 export * from "./FileTree";

package/build/logs/LogLine.js

@@ -3,9 +3,9 @@ import { Box, Flex } from "@chakra-ui/react";
 import Convert from "ansi-to-html";
 import parse from "html-react-parser";
 import { hasAnsi, isDefined } from "../utils";
+import { logFontFamily } from "./constants";
 import { normalizeLogText } from "./utils";
 const convert = new Convert();
-const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace";
 export const LogLine = ({ timestamp, message, status, highlightPattern, selected }) => {
     const statusToColor = (status) => {
         switch (status) {
@@ -17,7 +17,7 @@ export const LogLine = ({ timestamp, message, status, highlightPattern, selected
                 return "white";
         }
     };
-    return (_jsxs(Flex, { p: "2px 0", m: "0 16px", gap: "8px", alignItems: "top", backgroundColor: selected ? "gray.600" : "", children: [isDefined(timestamp) && (_jsx(Box, { as: "pre", whiteSpace: "pre-wrap", fontSize: "xs", lineHeight: "2", fontWeight: 600, fontFamily: logFontFamily, color: "grey", minW: "200px", children: _jsx(_Fragment, { children: timestamp.toLocal().toFormat("yyyy-MM-dd HH:mm:ss ZZZZ") }) })), _jsx(Box, { as: "pre", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: "xs", lineHeight: "2", fontWeight: 400, fontFamily: logFontFamily, color: statusToColor(status), _focus: { boxShadow: "outline" }, children: _jsx(Message, { message: message, highlightPattern: highlightPattern }) })] }));
+    return (_jsxs(Flex, { p: "2px 0", m: "0 16px", gap: "8px", alignItems: "top", backgroundColor: selected ? "gray.600" : "", children: [isDefined(timestamp) && (_jsx(Box, { as: "pre", whiteSpace: "pre-wrap", fontSize: "xs", lineHeight: "2", fontWeight: 600, fontFamily: logFontFamily, color: "grey", minW: "140px", children: _jsx(_Fragment, { children: timestamp.toLocal().toFormat("yyyy-MM-dd HH:mm:ss ZZZZ") }) })), _jsx(Box, { as: "pre", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: "xs", lineHeight: "2", fontWeight: 400, fontFamily: logFontFamily, color: statusToColor(status), _focus: { boxShadow: "outline" }, children: _jsx(Message, { message: message, highlightPattern: highlightPattern }) })] }));
 };
 const Message = ({ message, highlightPattern }) => {
     if (!isDefined(message)) {

package/build/logs/LogViewer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SmallCloseIcon } from "@chakra-ui/icons";
-import { Button, ButtonGroup, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormLabel, Icon, Input, InputGroup, InputLeftElement, InputRightElement, Progress, Switch, Text, Tooltip, } from "@chakra-ui/react";
+import { Button, ButtonGroup, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormLabel, Icon, IconButton, Input, InputGroup, InputLeftElement, InputRightElement, Progress, Switch, Text, Tooltip, } from "@chakra-ui/react";
 import { throttle } from "lodash";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FiSearch } from "react-icons/fi";
@@ -11,11 +11,13 @@ import { DownloadButton } from "../DownloadButton";
 import { FindCommand } from "../KeyboardCommands";
 import { useKeyboardAction } from "../useKeyboardAction";
 import { isDefined, isNotEmpty, stringifyError, stripAnsi } from "../utils";
+import { logFontFamily } from "./constants";
 import { LogLine } from "./LogLine";
 import { normalizeLogText } from "./utils";
 export const LogViewer = ({ progressPercent, logLines: propsLogLines, ProgressWidget, logsFileName, searchEnabled, copyLogsEnabled, onGetAllLogs, }) => {
     const virtuosoRef = useRef(null);
     const [logLines, setLogLines] = useState(propsLogLines);
+    const logLinesToShow = useMemo(() => logLines.filter(({ message }) => isDefined(message)), [logLines]);
     const [userIsScrolling, setUserIsScrolling] = useState(false);
     const [automaticScroll, setAutomaticScroll] = useState(true);
     const [searchState, setSearchState] = useState({ type: "init", rawSearchTerm: "" });
@@ -48,7 +50,7 @@ export const LogViewer = ({ progressPercent, logLines: propsLogLines, ProgressWi
         });
     }, []);
     const getLogsValue = () => {
-        return logLines
+        return logLinesToShow
             .map(({ message }) => message)
             .filter(isDefined)
             .map(stripAnsi)
@@ -62,7 +64,7 @@ export const LogViewer = ({ progressPercent, logLines: propsLogLines, ProgressWi
     useEffect(() => {
         throttledSetLogLines(propsLogLines);
     }, [propsLogLines, throttledSetLogLines]);
-    return (_jsxs(Flex, { flexDirection: "column", h: "100%", w: "100%", flex: "1", borderRadius: "6px", borderColor: "whiteAlpha.300", borderWidth: "1px", borderStyle: "solid", overflow: "clip", children: [_jsxs(Flex, { width: "100%", p: "12px", bg: "gray.850", gap: "16px", children: [searchEnabled && (_jsx(SearchControls, { searchState: searchState, onChangeSearchState: handleSearchStateChange, logLines: logLines })), isDefined(ProgressWidget) && ProgressWidget] }), _jsxs(Flex, { flexDirection: "column", position: "relative", h: "100%", flex: "1", children: [_jsx(Virtuoso, { ref: virtuosoRef, followOutput: automaticScroll, atBottomStateChange: handleBottomStateChange, isScrolling: setUserIsScrolling, style: { height: "100%", flex: "1" }, data: logLines.filter(({ message }) => isDefined(message)), itemContent: (index, line) => (_jsx(LogLine, { ...line, highlightPattern: searchState.type === "success" ? searchState.pattern : undefined, selected: isIndexSelected(index) })) }), isDefined(progressPercent) && (_jsx(Progress, { value: typeof progressPercent === "number" ? progressPercent : progressPercent === "failed" ? 100 : 0, isIndeterminate: progressPercent === "indeterminate", height: "4px", colorScheme: progressPercent === "failed" ? "red.500" : "kurtosisGreen" }))] }), _jsxs(Flex, { alignItems: "space-between", width: "100%", p: "12px", bg: "gray.850", children: [_jsxs(FormControl, { display: "flex", alignItems: "center", children: [_jsx(Switch, { isChecked: automaticScroll, onChange: handleAutomaticScrollChange, size: "sm" }), _jsx(FormLabel, { mb: "0", marginInlineStart: 3, fontSize: "sm", children: "Automatic Scroll" })] }), _jsxs(ButtonGroup, { children: [copyLogsEnabled && (_jsx(CopyButton, { contentName: "logs", valueToCopy: getLogsValue, size: "sm", isDisabled: logLines.length === 0, isIconButton: true, "aria-label": "Copy logs", color: "gray.100" })), _jsx(DownloadButton, { valueToDownload: onGetAllLogs || getLogsValue, size: "sm", fileName: logsFileName || `logs.txt`, isDisabled: logLines.length === 0, isIconButton: true, "aria-label": "Download logs", color: "gray.100" })] })] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", h: "100%", w: "100%", flex: "1", borderRadius: "6px", borderColor: "whiteAlpha.300", borderWidth: "1px", borderStyle: "solid", overflow: "clip", children: [_jsxs(Flex, { width: "100%", p: "12px", bg: "gray.850", gap: "16px", children: [searchEnabled && (_jsx(SearchControls, { searchState: searchState, onChangeSearchState: handleSearchStateChange, logLines: logLines })), isDefined(ProgressWidget) && ProgressWidget] }), _jsxs(Flex, { flexDirection: "column", position: "relative", h: "100%", flex: "1", children: [logLinesToShow.length === 0 ? (_jsx(Flex, { justifyContent: "center", alignItems: "center", fontSize: "sm", lineHeight: "2", fontWeight: 400, flex: "1", fontFamily: logFontFamily, children: "No logs to display" })) : (_jsx(Virtuoso, { ref: virtuosoRef, followOutput: automaticScroll, atBottomStateChange: handleBottomStateChange, isScrolling: setUserIsScrolling, style: { height: "100%", flex: "1" }, data: logLinesToShow, itemContent: (index, line) => (_jsx(LogLine, { ...line, highlightPattern: searchState.type === "success" ? searchState.pattern : undefined, selected: isIndexSelected(index) })) })), isDefined(progressPercent) && (_jsx(Progress, { value: typeof progressPercent === "number" ? progressPercent : progressPercent === "failed" ? 100 : 0, isIndeterminate: progressPercent === "indeterminate", height: "4px", colorScheme: progressPercent === "failed" ? "red" : progressPercent === 100 ? "kurtosisGreen" : "blue" }))] }), _jsxs(Flex, { alignItems: "space-between", width: "100%", p: "12px", bg: "gray.850", children: [_jsxs(FormControl, { display: "flex", alignItems: "center", children: [_jsx(Switch, { isChecked: automaticScroll, onChange: handleAutomaticScrollChange, size: "sm" }), _jsx(FormLabel, { mb: "0", marginInlineStart: 3, fontSize: "sm", children: "Automatic Scroll" })] }), _jsxs(ButtonGroup, { children: [copyLogsEnabled && (_jsx(CopyButton, { contentName: "logs", valueToCopy: getLogsValue, size: "sm", isDisabled: logLines.length === 0, isIconButton: true, "aria-label": "Copy logs", color: "gray.100" })), _jsx(DownloadButton, { valueToDownload: onGetAllLogs || getLogsValue, size: "sm", fileName: logsFileName || `logs.txt`, isDisabled: logLines.length === 0, isIconButton: true, "aria-label": "Download logs", color: "gray.100" })] })] })] }));
 };
 const SearchControls = ({ searchState, onChangeSearchState, logLines }) => {
     const searchRef = useRef(null);
@@ -164,6 +166,6 @@ const SearchControls = ({ searchState, onChangeSearchState, logLines }) => {
         return (_jsx(Button, { bg: "gray.650", color: "gray.150", leftIcon: _jsx(FiSearch, {}), rightIcon: _jsx(FindCommand, {}), variant: "solid", onClick: () => setShowSearchForm(true), children: "Search" }));
     }
     else {
-        return (_jsxs(FormControl, { isInvalid: searchState.type === "error", children: [_jsxs(Flex, { gap: "16px", alignItems: "center", children: [_jsxs(InputGroup, { size: "md", width: "296px", bg: "gray.650", color: "gray.150", variant: "filled", borderRadius: "6px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: FiSearch, color: "gray.100" }) }), _jsx(Input, { autoFocus: true, ref: searchRef, value: searchState.rawSearchTerm, onChange: handleOnChange, placeholder: "Search" }), searchState.type !== "init" && (_jsx(InputRightElement, { children: _jsx(SmallCloseIcon, { onClick: handleClearSearch }) }))] }), _jsxs(ButtonGroup, { children: [_jsx(Button, { size: "sm", ml: 2, onClick: handlePriorMatchClick, isDisabled: searchState.type !== "success" || searchState.searchMatchesIndices.length === 0, colorScheme: "darkBlue", leftIcon: _jsx(MdArrowBackIosNew, {}), children: "Previous" }), _jsx(Button, { size: "sm", ml: 2, onClick: handleNextMatchClick, isDisabled: searchState.type !== "success" || searchState.searchMatchesIndices.length === 0, colorScheme: "darkBlue", rightIcon: _jsx(MdArrowForwardIos, {}), children: "Next" })] }), searchState.rawSearchTerm.length > 0 && (_jsx(Flex, { ml: 2, alignItems: "center", children: searchState.type === "success" && (_jsxs(Text, { align: "left", color: searchState.searchMatchesIndices.length === 0 ? "red" : "kurtosisGreen.400", children: [searchState.searchMatchesIndices.length > 0 && searchState.currentSearchIndex !== undefined && (_jsxs("span", { children: [_jsxs(Editable, { display: "inline", p: 0, m: "0 4px 0 0", size: "sm", value: `${searchState.currentSearchIndex + 1}`, onChange: handleIndexInputChange, children: [_jsx(Tooltip, { label: "Click to edit", shouldWrapChildren: true, children: _jsx(EditablePreview, {}) }), _jsx(EditableInput, { p: 1, width: "50px" })] }), _jsx(_Fragment, { children: "/ " })] })), _jsxs("span", { children: [searchState.searchMatchesIndices.length, " matches"] })] })) }))] }), searchState.type === "error" && _jsx(FormErrorMessage, { children: searchState.error })] }));
+        return (_jsxs(FormControl, { isInvalid: searchState.type === "error", children: [_jsxs(Flex, { gap: "16px", alignItems: "center", children: [_jsxs(InputGroup, { size: "md", width: "296px", color: "gray.150", variant: "filled", borderRadius: "6px", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: FiSearch, color: "gray.100" }) }), _jsx(Input, { autoFocus: true, ref: searchRef, value: searchState.rawSearchTerm, onChange: handleOnChange, placeholder: "Search", _dark: { bg: "gray.650" } }), searchState.type !== "init" && (_jsx(InputRightElement, { children: _jsx(IconButton, { variant: "ghost", icon: _jsx(SmallCloseIcon, {}), size: "sm", onClick: handleClearSearch, "aria-label": "Clear search" }) }))] }), _jsxs(ButtonGroup, { size: "xs", colorScheme: "darkBlue", variant: "outline", children: [_jsx(Button, { ml: 2, onClick: handlePriorMatchClick, isDisabled: searchState.type !== "success" || searchState.searchMatchesIndices.length === 0, leftIcon: _jsx(MdArrowBackIosNew, {}), children: "Previous" }), _jsx(Button, { ml: 2, onClick: handleNextMatchClick, isDisabled: searchState.type !== "success" || searchState.searchMatchesIndices.length === 0, rightIcon: _jsx(MdArrowForwardIos, {}), children: "Next" })] }), searchState.rawSearchTerm.length > 0 && (_jsx(Flex, { alignItems: "center", children: searchState.type === "success" && (_jsxs(Text, { align: "left", fontSize: "xs", fontWeight: "semibold", children: [searchState.searchMatchesIndices.length > 0 && searchState.currentSearchIndex !== undefined && (_jsxs("span", { children: [_jsxs(Editable, { display: "inline", borderWidth: "1px", p: "2px 6px", borderColor: "gray.500", borderRadius: "6px", size: "sm", value: `${searchState.currentSearchIndex + 1}`, onChange: handleIndexInputChange, children: [_jsx(Tooltip, { label: "Click to edit", shouldWrapChildren: true, children: _jsx(EditablePreview, {}) }), _jsx(EditableInput, { width: "50px" })] }), _jsx(_Fragment, { children: " of " })] })), _jsxs("span", { children: [searchState.searchMatchesIndices.length, " matches"] })] })) }))] }), searchState.type === "error" && _jsx(FormErrorMessage, { children: searchState.error })] }));
     }
 };

package/build/logs/constants.d.ts

@@ -0,0 +1 @@
+export declare const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace";

package/build/logs/constants.js

@@ -0,0 +1 @@
+export const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace";

package/build/theme/formsTheme.js

@@ -16,9 +16,9 @@ const baseStyleHelperText = defineStyle({
     _dark: {
         [$fg.variable]: "colors.whiteAlpha.600",
     },
-    color: $fg.reference,
+    color: "gray.100",
     lineHeight: "normal",
-    fontSize: "sm",
+    fontSize: "xs",
 });
 const baseStyle = definePartsStyle({
     container: {

package/build/theme/progressTheme.d.ts

@@ -0,0 +1,30 @@
+export declare const progressTheme: {
+    baseStyle?: ((props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        label: {
+            lineHeight: string;
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+        };
+        filledTrack: any;
+        track: {
+            bg: string;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("label" | "track" | "filledTrack")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("label" | "track" | "filledTrack")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("label" | "track" | "filledTrack")[];
+};

package/build/theme/progressTheme.js

@@ -0,0 +1,46 @@
+import { progressAnatomy as parts } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
+import { generateStripe, getColor, mode } from "@chakra-ui/theme-tools";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys);
+const filledStyle = defineStyle((props) => {
+    const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props;
+    const stripeStyle = mode(generateStripe(), generateStripe("1rem", "rgba(0,0,0,0.1)"))(props);
+    const bgColor = mode(`${c}.500`, `${c}.400`)(props);
+    const gradient = `linear-gradient(
+    to right,
+    transparent 0%,
+    ${getColor(t, bgColor)} 50%,
+    transparent 100%
+  )`;
+    const addStripe = !isIndeterminate && hasStripe;
+    return {
+        ...(addStripe && stripeStyle),
+        ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+    };
+});
+const baseStyleLabel = defineStyle({
+    lineHeight: "1",
+    fontSize: "0.25em",
+    fontWeight: "bold",
+    color: "white",
+});
+const baseStyleTrack = defineStyle((props) => {
+    return {
+        bg: `${props.colorScheme}.100`,
+    };
+});
+const baseStyleFilledTrack = defineStyle((props) => {
+    return {
+        transitionProperty: "common",
+        transitionDuration: "slow",
+        ...filledStyle(props),
+    };
+});
+const baseStyle = definePartsStyle((props) => ({
+    label: baseStyleLabel,
+    filledTrack: baseStyleFilledTrack(props),
+    track: baseStyleTrack(props),
+}));
+export const progressTheme = defineMultiStyleConfig({
+    baseStyle,
+});

package/build/theme/tabsTheme.d.ts

@@ -9,7 +9,25 @@ export declare const tabsTheme: {
         }>;
     } | undefined;
     variants?: {
-        line: (props: StyleFunctionProps) => {
+        line: {
+            root: {
+                display: string;
+                flexDirection: string;
+            };
+            tablist: {
+                borderBottom: string;
+            };
+            tab: {
+                color: string;
+            };
+            tabpanels: {
+                flex: string;
+                borderRadius: string;
+                borderColor: string;
+                borderWidth: string;
+            };
+        };
+        kurtosisHeaderLine: (props: StyleFunctionProps) => {
             root: {
                 display: string;
                 flexDirection: string;
@@ -49,7 +67,7 @@ export declare const tabsTheme: {
     } | undefined;
     defaultProps?: {
         size?: string | number | undefined;
-        variant?: "line" | undefined;
+        variant?: "line" | "kurtosisHeaderLine" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
     parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];

package/build/theme/tabsTheme.js

@@ -8,7 +8,25 @@ export const tabsTheme = defineMultiStyleConfig({
         colorScheme: "kurtosisGreen",
     },
     variants: {
-        line: (props) => ({
+        line: {
+            root: {
+                display: "flex",
+                flexDirection: "column",
+            },
+            tablist: {
+                borderBottom: "none",
+            },
+            tab: {
+                color: "gray.100",
+            },
+            tabpanels: {
+                flex: "1",
+                borderRadius: "0 6px 6px 6px",
+                borderColor: "gray.500",
+                borderWidth: "1px",
+            },
+        },
+        kurtosisHeaderLine: (props) => ({
             root: {
                 display: "flex",
                 flexDirection: "column",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kurtosis-ui-components",
-  "version": "0.85.55",
+  "version": "0.86.0",
   "private": false,
   "main": "build/index",
   "description": "This repo contains components used by Kurtosis UI applications.",
@@ -35,7 +35,7 @@
     "kurtosis-cloud-indexer-sdk": "^0.0.2",
     "react-error-boundary": "^4.0.11",
     "react-markdown": "^9.0.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.21.1",
     "react-virtuoso": "^4.6.2",
     "streamsaver": "^2.0.6",
     "yaml": "^2.3.4"

package/build/FeatureNotImplementedModal.d.ts

@@ -1,9 +0,0 @@
-type FeatureNotImplementedModalProps = {
-    featureName: string;
-    issueUrl: string;
-    message?: string;
-    isOpen: boolean;
-    onClose: () => void;
-};
-export declare const FeatureNotImplementedModal: ({ featureName, issueUrl, message, isOpen, onClose, }: FeatureNotImplementedModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/build/FeatureNotImplementedModal.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { KurtosisAlertModal } from "./KurtosisAlertModal";
-export const FeatureNotImplementedModal = ({ featureName, issueUrl, message, isOpen, onClose, }) => {
-    return (_jsx(KurtosisAlertModal, { title: `${featureName} unavailable`, isOpen: isOpen, onClose: onClose, confirmText: "Go to Issue", onConfirm: () => {
-            onClose();
-            window.open(issueUrl, "_blank");
-        }, confirmButtonProps: { colorScheme: "kurtosisGreen" }, content: message ||
-            `${featureName} is not currently available. Please comment/upvote the issue if you would like to use it.` }));
-};