@stoplight/elements-core 9.0.2 → 9.0.3

package/components/Docs/Docs.d.ts

@@ -47,6 +47,7 @@ export interface DocsProps extends BaseDocsProps {
 }
 export interface DocsComponentProps<T = unknown> extends BaseDocsProps {
     data: T;
+    disableProps?: any;
 }
 export declare const Docs: React.NamedExoticComponent<DocsProps>;
 export interface ParsedDocsProps extends BaseDocsProps {

package/components/Docs/HttpOperation/Body.d.ts

@@ -3,9 +3,15 @@ export interface BodyProps {
     body: IHttpOperationRequestBody;
     onChange?: (requestBodyIndex: number) => void;
     isHttpWebhookOperation?: boolean;
+    disableProps?: Array<{
+        location: string;
+        paths: Array<{
+            path: string;
+        }>;
+    }>;
 }
 export declare const isBodyEmpty: (body?: BodyProps['body']) => boolean;
 export declare const Body: {
-    ({ body, onChange, isHttpWebhookOperation }: BodyProps): JSX.Element | null;
+    ({ body, onChange, isHttpWebhookOperation, disableProps }: BodyProps): JSX.Element | null;
     displayName: string;
 };

package/components/Docs/HttpOperation/HttpOperation.d.ts

@@ -1,7 +1,11 @@
 import { IHttpEndpointOperation } from '@stoplight/types';
 import { DocsComponentProps } from '..';
-export declare type HttpOperationProps = DocsComponentProps<IHttpEndpointOperation>;
-export declare const HttpOperation: import("react").FunctionComponent<HttpOperationProps & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
+export declare type HttpOperationProps = DocsComponentProps<IHttpEndpointOperation> & {
+    disableProps?: Record<string, any>;
+};
+export declare const HttpOperation: import("react").FunctionComponent<DocsComponentProps<IHttpEndpointOperation<false>> & {
+    disableProps?: Record<string, any> | undefined;
+} & import("@stoplight/react-error-boundary").ErrorBoundaryProps<{}>>;
 export declare function OperationHeader({ id, noHeading, hasBadges, name, isDeprecated, isInternal, hideServerUrl, method, path, }: {
     id: string;
     noHeading?: boolean;

package/components/Docs/HttpOperation/LazySchemaTreePreviewer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface LazySchemaTreePreviewerProps {
+    schema: any;
+    root?: any;
+    title?: string;
+    level?: number;
+    path?: string;
+    maskState?: Record<string, {
+        checked: boolean;
+        required: 0 | 1 | 2;
+    }>;
+    setMaskState?: React.Dispatch<React.SetStateAction<Record<string, {
+        checked: boolean;
+        required: 0 | 1 | 2;
+    }>>>;
+    hideData?: Array<{
+        path: string;
+        required?: boolean;
+    }>;
+    parentRequired?: string[];
+    propertyKey?: string;
+    subType?: string;
+}
+declare const LazySchemaTreePreviewer: React.FC<LazySchemaTreePreviewerProps>;
+export default LazySchemaTreePreviewer;

package/components/Docs/HttpOperation/Request.d.ts

@@ -5,6 +5,12 @@ interface IRequestProps {
     hideSecurityInfo?: boolean;
     onChange?: (requestBodyIndex: number) => void;
     isHttpWebhookOperation?: boolean;
+    disableProps?: Array<{
+        location: string;
+        paths: Array<{
+            path: string;
+        }>;
+    }>;
 }
 export declare const Request: React.FunctionComponent<IRequestProps>;
 export {};

package/components/Docs/HttpOperation/Responses.d.ts

@@ -1,12 +1,22 @@
 import { IHttpOperationResponse } from '@stoplight/types';
+interface DisablePropEntry {
+    location: string;
+    paths: Array<{
+        path: string;
+    }>;
+}
+interface DisablePropsByStatus {
+    [statusCode: string]: DisablePropEntry[];
+}
 interface ResponsesProps {
     responses: IHttpOperationResponse[];
     onMediaTypeChange?: (mediaType: string) => void;
     onStatusCodeChange?: (statusCode: string) => void;
     isCompact?: boolean;
+    disableProps?: DisablePropsByStatus;
 }
 export declare const Responses: {
-    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }: ResponsesProps): JSX.Element | null;
+    ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, disableProps, }: ResponsesProps): JSX.Element | null;
     displayName: string;
 };
 export {};

package/index.esm.js

@@ -114,6 +114,8 @@ const isResolvedObjectProxy = (someObject) => {
     return !!someObject[originalObjectSymbol];
 };
 const getOriginalObject = (resolvedObject) => {
+    if (!resolvedObject)
+        return resolvedObject;
     const originalObject = resolvedObject[originalObjectSymbol] || resolvedObject;
     if (!originalObject) {
         return resolvedObject;
@@ -2734,13 +2736,214 @@ const PanelContent = ({ schemes }) => {
     })));
 };
 
+const TYPES = ['string', 'integer', 'boolean', 'any', 'number'];
+function resolvePointer(obj, pointer) {
+    const parts = pointer.replace(/^#\//, '').split('/');
+    return parts.reduce((acc, key) => acc && acc[key], obj);
+}
+function detectCircularPath(path) {
+    const ignored = ['properties', 'items'];
+    const parts = path.split('/').filter(part => !ignored.includes(part));
+    for (let i = 0; i < parts.length - 1; i++) {
+        const current = parts[i];
+        const rest = parts.slice(i + 1);
+        if (rest.includes(current)) {
+            return true;
+        }
+    }
+    return false;
+}
+function dereference(node, root, visited = new WeakSet(), depth = 0, maxDepth = 10) {
+    if (!node || typeof node !== 'object')
+        return node;
+    if (depth > maxDepth)
+        return node;
+    if (node.$ref || node['x-iata-$ref']) {
+        let refPath = node.$ref || node['x-iata-$ref'];
+        refPath = refPath.replace('__bundled__', 'definitions');
+        if (visited.has(node))
+            return { circular: true, $ref: refPath, title: node.title, type: 'any', description: node.description };
+        visited.add(node);
+        const target = resolvePointer(root, refPath);
+        if (!target)
+            return node;
+        const result = Object.assign({}, target);
+        if ('description' in node)
+            result.description = node.description;
+        if ('title' in node)
+            result.title = node.title;
+        return dereference(result, root, visited, depth + 1, maxDepth);
+    }
+    if (Array.isArray(node)) {
+        return node.map(item => dereference(item, root, visited, depth + 1, maxDepth));
+    }
+    const result = {};
+    for (const key in node) {
+        result[key] = dereference(node[key], root, visited, depth + 1, maxDepth);
+    }
+    return result;
+}
+const trimSlashes = (str) => {
+    return str.replace(/^\/|\/$/g, '');
+};
+const LazySchemaTreePreviewer = ({ schema, root = schema, title, level = 1, path = '', hideData = [], parentRequired, propertyKey, subType, }) => {
+    var _a, _b, _c, _d;
+    const [expanded, setExpanded] = useState(false);
+    const isRoot = level === 1 && (title === undefined || path === '');
+    useState(() => {
+        const disabledPaths = hideData || [];
+        const initialState = {};
+        if (disabledPaths) {
+            for (const p of disabledPaths) {
+                const { path } = p;
+                initialState[path] = { checked: false, required: 0 };
+            }
+        }
+        return initialState;
+    });
+    const shouldHideNode = useMemo(() => {
+        const currentPath = trimSlashes(path);
+        const data = hideData.some(hideEntry => {
+            const hideEntryPath = trimSlashes(hideEntry.path);
+            return hideEntryPath === currentPath;
+        });
+        return data;
+    }, [path, hideData]);
+    if (!schema || shouldHideNode) {
+        return null;
+    }
+    const displayTitle = level === 1 && (title === undefined || path === '') ? '' : (_a = title !== null && title !== void 0 ? title : schema === null || schema === void 0 ? void 0 : schema.title) !== null && _a !== void 0 ? _a : 'Node';
+    const handleToggle = () => {
+        const circular = detectCircularPath(path);
+        if (!circular) {
+            setExpanded(prev => !prev);
+        }
+    };
+    const renderChildren = () => {
+        var _a, _b, _c, _d;
+        if (!expanded && !isRoot)
+            return null;
+        const children = [];
+        if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && (schema === null || schema === void 0 ? void 0 : schema.properties)) {
+            for (const [key, child] of Object.entries(schema === null || schema === void 0 ? void 0 : schema.properties)) {
+                const childPath = `${path}/properties/${key}`;
+                const shouldHideChild = hideData.some(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(childPath));
+                const resolved = dereference(child, root);
+                if (!shouldHideChild) {
+                    children.push(React__default.createElement("li", { key: key },
+                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolved, root: root, title: key, level: level + 1, path: childPath, hideData: hideData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: key, subType: (_a = resolved === null || resolved === void 0 ? void 0 : resolved.items) === null || _a === void 0 ? void 0 : _a.type })));
+                }
+            }
+        }
+        else if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'array' &&
+            (schema === null || schema === void 0 ? void 0 : schema.items) &&
+            Object.keys(schema === null || schema === void 0 ? void 0 : schema.items).length > 0 &&
+            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular)) {
+            const resolvedItems = dereference(schema === null || schema === void 0 ? void 0 : schema.items, root);
+            const itemsPath = `${path}/items`;
+            if (resolvedItems && resolvedItems.type === 'object' && resolvedItems.properties) {
+                for (const [key, child] of Object.entries(resolvedItems.properties)) {
+                    const childPath = `${itemsPath}/properties/${key}`;
+                    const shouldHideChild = hideData.some(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(childPath));
+                    if (!shouldHideChild) {
+                        children.push(React__default.createElement("li", { key: key },
+                            React__default.createElement(LazySchemaTreePreviewer, { schema: dereference(child, root), root: root, title: key, level: level + 2, path: childPath, hideData: hideData, parentRequired: resolvedItems.required, propertyKey: key, subType: (_c = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _c === void 0 ? void 0 : _c.type })));
+                    }
+                }
+            }
+            else if (resolvedItems && resolvedItems.type === 'array' && resolvedItems.items.length > 0) {
+                const childPath = `${path}/items`;
+                const shouldHideChild = hideData.some(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(childPath));
+                if (!shouldHideChild) {
+                    children.push(React__default.createElement("li", { key: "items" },
+                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolvedItems, root: root, title: "items", level: level + 1, path: childPath, hideData: hideData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: "items", subType: (_d = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _d === void 0 ? void 0 : _d.type })));
+                }
+            }
+        }
+        return children.length > 0 ? React__default.createElement("ul", { className: "ml-6 border-l border-gray-200 pl-2" }, children) : null;
+    };
+    const renderMinEnums = (schema) => {
+        if (!schema || typeof schema !== 'object')
+            return null;
+        const boxStyle = {
+            background: 'rgba(245, 247, 250, 0.5)',
+            border: '1px solid #a0aec0',
+            borderRadius: '4px',
+            padding: '0px 2px',
+            display: 'inline-block',
+            overflowWrap: 'break-word',
+            textAlign: 'left',
+            maxWidth: 'fit-content',
+            maxHeight: 'fit-content',
+        };
+        if ('minItems' in schema) {
+            const schemaWithMinItems = schema;
+            if (typeof schemaWithMinItems.minItems === 'number') {
+                return (React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, `>=${schemaWithMinItems.minItems} items`));
+            }
+        }
+        if ('enum' in schema && Array.isArray(schema.enum)) {
+            return (React__default.createElement("div", null,
+                "Allowed values:",
+                ' ',
+                schema.enum.map((val, idx) => (React__default.createElement(Box, { key: idx, className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, val)))));
+        }
+        return null;
+    };
+    const isRequired = parentRequired && propertyKey && parentRequired.includes(propertyKey);
+    let showRequiredLabel = false;
+    const hideDataEntry = hideData.find(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(path));
+    if ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === true || ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === undefined && isRequired)) {
+        showRequiredLabel = true;
+    }
+    return (React__default.createElement("div", { className: "mb-1" },
+        React__default.createElement(Flex, { maxW: "full", pl: 3, py: 2, "data-test": "schema-row", pos: "relative" },
+            React__default.createElement(VStack, { spacing: 1, maxW: "full", className: "w-full" },
+                React__default.createElement(Flex, { onClick: !isRoot ? handleToggle : undefined, className: `w-full ${isRoot ? '' : 'cursor-pointer'}` },
+                    !isRoot ? (React__default.createElement(Box, { mr: 2, className: "sl-font-mono sl-font-semibold sl-mr-2" },
+                        !TYPES.includes(schema === null || schema === void 0 ? void 0 : schema.type) &&
+                            !detectCircularPath(path) &&
+                            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular) &&
+                            !(schema === null || schema === void 0 ? void 0 : schema.circular) ? (React__default.createElement("i", { role: "img", "aria-hidden": "true", className: `sl-icon fal ${expanded ? 'fa-chevron-down' : 'fa-chevron-right'} fa-fw fa-sm` })) : (React__default.createElement("span", { className: "sl-icon fal fa-fw fa-sm", "aria-hidden": "true" })),
+                        ' ' + displayTitle)) : null,
+                    !isRoot ? (React__default.createElement(Box, { mr: 2 },
+                        React__default.createElement("span", { className: "sl-truncate sl-text-muted" },
+                            (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' ? schema === null || schema === void 0 ? void 0 : schema.title : (schema === null || schema === void 0 ? void 0 : schema.type) || (root === null || root === void 0 ? void 0 : root.title),
+                            (schema === null || schema === void 0 ? void 0 : schema.items) && ((_c = schema === null || schema === void 0 ? void 0 : schema.items) === null || _c === void 0 ? void 0 : _c.title) !== undefined ? ` [${(_d = schema === null || schema === void 0 ? void 0 : schema.items) === null || _d === void 0 ? void 0 : _d.title}] ` : null,
+                            subType ? `[${subType}]` : ''),
+                        React__default.createElement("span", { className: "text-gray-500" }, (schema === null || schema === void 0 ? void 0 : schema.format) !== undefined ? `<${schema === null || schema === void 0 ? void 0 : schema.format}>` : null))) : null),
+                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } },
+                    (schema === null || schema === void 0 ? void 0 : schema.description) && (React__default.createElement(Box, { fontFamily: "ui", fontWeight: "light" },
+                        React__default.createElement("span", { className: "sl-prose sl-markdown-viewer", style: { fontSize: '12px' } }, schema === null || schema === void 0 ? void 0 : schema.description))),
+                    !isRoot && (schema === null || schema === void 0 ? void 0 : schema.examples) !== undefined && (React__default.createElement(Flex, { align: "center", mb: 1, style: { flexWrap: 'wrap' } },
+                        React__default.createElement("span", { className: "text-gray-500", style: { marginRight: 8, flexShrink: 0 } }, "Example"),
+                        React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: {
+                                background: 'rgba(245, 247, 250, 0.5)',
+                                border: '1px solid #a0aec0',
+                                borderRadius: '4px',
+                                padding: '4px 8px',
+                                display: 'inline-block',
+                                overflowWrap: 'break-word',
+                                textAlign: 'left',
+                                maxWidth: '530px',
+                            } }, JSON.stringify(schema === null || schema === void 0 ? void 0 : schema.examples))))),
+                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } }, schema &&
+                    typeof schema === 'object' &&
+                    ('minItems' in schema || 'enum' in schema) &&
+                    renderMinEnums(schema))),
+            !isRoot && (React__default.createElement("label", { className: "inline-flex items-top ml-2" },
+                React__default.createElement(Box, { mr: 2, fontFamily: "ui", fontWeight: "normal" }, showRequiredLabel && (React__default.createElement("div", { className: "sl-ml-2 sl-text-warning" },
+                    React__default.createElement("span", { style: { marginLeft: '10px' } }, "required"))))))),
+        renderChildren()));
+};
+
 const isBodyEmpty = (body) => {
     if (!body)
         return true;
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false, disableProps }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
@@ -2753,13 +2956,25 @@ const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     const { contents = [], description } = body;
     const schema = (_a = contents[chosenContent]) === null || _a === void 0 ? void 0 : _a.schema;
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
+    const getMaskProperties = () => {
+        const disablePropsConfig = disableProps || [];
+        const absolutePathsToHide = [];
+        disablePropsConfig.forEach(configEntry => {
+            const { location, paths } = configEntry;
+            paths.forEach(item => {
+                const fullPath = `${location}/${item.path}`;
+                absolutePathsToHide.push({ path: fullPath });
+            });
+        });
+        return absolutePathsToHide;
+    };
     return (React.createElement(VStack, { spacing: 6 },
         React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
             React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
+        schema && localStorage.getItem('use_new_mask_workflow') === 'true' ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, hideData: getMaskProperties() })) : (isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon })))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2826,7 +3041,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, disableProps, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -2854,7 +3069,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
+        body && (React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation, disableProps: disableProps }))));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
@@ -2885,7 +3100,7 @@ const OptionalMessage$1 = () => {
     return React.createElement(Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, disableProps, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
@@ -2918,11 +3133,11 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
         React.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
-        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: activeResponseId })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: response.code }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
-const Response = ({ response, onMediaTypeChange }) => {
+const Response = ({ response, onMediaTypeChange, disableProps, statusCode }) => {
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
@@ -2933,6 +3148,18 @@ const Response = ({ response, onMediaTypeChange }) => {
         responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
+    const getMaskProperties = () => {
+        if (!disableProps || !statusCode)
+            return [];
+        const configEntries = disableProps[statusCode] || [];
+        const absolutePathsToHide = [];
+        configEntries.forEach(({ location, paths }) => {
+            paths.forEach(item => {
+                absolutePathsToHide.push({ path: `${location}/${item.path}` });
+            });
+        });
+        return absolutePathsToHide;
+    };
     return (React.createElement(VStack, { spacing: 8, pt: 8 },
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
@@ -2944,7 +3171,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
+            schema && localStorage.getItem('use_new_mask_workflow') === 'true' ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, path: "", hideData: getMaskProperties() })) : (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2990,7 +3217,7 @@ const Callback = ({ data, isCompact }) => {
 };
 Callbacks.displayName = 'HttpOperation.Callback';
 
-const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, disableProps }) => {
     var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
@@ -3021,8 +3248,8 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data), disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.request }),
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact, disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.response })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
@@ -3276,7 +3503,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
+const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, disableProps, }) => {
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
@@ -3299,13 +3526,27 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
+    const getMaskProperties = () => {
+        const disablePropsConfig = disableProps === null || disableProps === void 0 ? void 0 : disableProps.models;
+        const absolutePathsToHide = [];
+        if (disableProps === null || disableProps === void 0 ? void 0 : disableProps.models) {
+            disablePropsConfig.forEach((configEntry) => {
+                const { location, paths } = configEntry;
+                paths.forEach((item) => {
+                    const fullPath = `${location}/${item.path}`;
+                    absolutePathsToHide.push({ path: fullPath });
+                });
+            });
+        }
+        return absolutePathsToHide;
+    };
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && data.type === 'object' && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
+        localStorage.getItem('use_new_mask_workflow') !== 'true' && isCompact && modelExamples,
+        data && localStorage.getItem('use_new_mask_workflow') === 'true' ? (React.createElement(LazySchemaTreePreviewer, { schema: data, hideData: getMaskProperties() })) : (React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true }))));
     return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
@@ -3341,17 +3582,19 @@ const Docs = React.memo((_a) => {
     return (React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
 const ParsedDocs = (_a) => {
+    var _b;
     var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
+    const disableProps = (_b = node.data) === null || _b === void 0 ? void 0 : _b.disableProps;
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
         case 'http_operation':
         case 'http_webhook':
-            return React.createElement(HttpOperation, Object.assign({ data: node.data }, commonProps));
+            return React.createElement(HttpOperation, Object.assign({ data: node.data, disableProps: disableProps }, commonProps));
         case 'http_service':
             return React.createElement(HttpService, Object.assign({ data: node.data }, commonProps));
         case 'model':
-            return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
+            return React.createElement(Model, Object.assign({ data: node.data, disableProps: disableProps }, commonProps));
         default:
             nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;