Stop 2417 iata fix (#2811)

* make changes in responses.tsx for iata demo poc

* update in previewer component

* change previewer page

* update lazyschemaprevier

* unwanted code, removed checked and finalSetMaskState and  persistOnlyParentDisabled code

* update request and response according to local storage properties

* fix: choose mask workflow using feature flag

* fix: added feature flag condition

* added new code for disable expand for number node

* pushed working code

* added subtype

* items removed from array node when it is empty

* multi-model dynamic rendering

* resolved expand icon issue for circular reference node in depth level

* fix: added local modal masking preview

* changes for multi-model doc view for request and response

* added model logic

* fix: removed console logs

* resolved description issue

removed console

* remove lint error in Model.tsx

* removed commented code

* removed console and commented code

* removed remaining consoles

* Upgrade version for elements repo

* resolved 'should allow changing content type' test case from packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.spec.tsx

* added minimatch version

* added minimatch version

* added minimatch version in angular package

* removed minimatch

* bump elements-core version

---------

Co-authored-by: Pradeep Bande <pradeep.bande@smartbear.com>
Co-authored-by: sb-rohitdesai <rohitkumar.desai@smartbear.com>
Co-authored-by: SB-virendrasolanke <virendra.solanke@smartbear.com>
Co-authored-by: prafullaAtSB <150028847+prafullaAtSB@users.noreply.github.com>
Co-authored-by: Akshay Thakar <akshay.thakar@smartbear.com>

Author: 6 people

examples/angular/package.json

@@ -39,5 +39,8 @@
     "@angular/language-service": "^12.0.5",
     "angular-http-server": "^1.10.0",
     "typescript": "4.2.4"
+  },
+  "resolutions": {
+    "minimatch": "9.0.5"
   }
 }

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.2",
+  "version": "9.0.3",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

packages/elements-core/src/components/Docs/Docs.tsx

@@ -169,6 +169,7 @@ export interface DocsComponentProps<T = unknown> extends BaseDocsProps {
    * The input data for the component to display.
    */
   data: T;
+  disableProps?: any;
 }
 
 export const Docs = React.memo<DocsProps>(
@@ -212,16 +213,19 @@ export interface ParsedDocsProps extends BaseDocsProps {
 }
 
 export const ParsedDocs = ({ node, nodeUnsupported, ...commonProps }: ParsedDocsProps) => {
+  const disableProps = (node.data as any)?.disableProps;
+
   switch (node.type) {
     case 'article':
       return <Article data={node.data} {...commonProps} />;
     case 'http_operation':
     case 'http_webhook':
-      return <HttpOperation data={node.data} {...commonProps} />;
+      return <HttpOperation data={node.data} disableProps={disableProps} {...commonProps} />;
+
     case 'http_service':
       return <HttpService data={node.data} {...commonProps} />;
     case 'model':
-      return <Model data={node.data} {...commonProps} />;
+      return <Model data={node.data} disableProps={disableProps} {...commonProps} />;
     default:
       nodeUnsupported?.('invalidType');
       return null;

packages/elements-core/src/components/Docs/HttpOperation/Body.tsx

@@ -9,11 +9,16 @@ import { isJSONSchema } from '../../../utils/guards';
 import { getOriginalObject } from '../../../utils/ref-resolving/resolvedObject';
 import { MarkdownViewer } from '../../MarkdownViewer';
 import { SectionSubtitle } from '../Sections';
+import LazySchemaTreePreviewer from './LazySchemaTreePreviewer';
 
 export interface BodyProps {
   body: IHttpOperationRequestBody;
   onChange?: (requestBodyIndex: number) => void;
   isHttpWebhookOperation?: boolean;
+  disableProps?: Array<{
+    location: string;
+    paths: Array<{ path: string }>;
+  }>;
 }
 
 export const isBodyEmpty = (body?: BodyProps['body']) => {
@@ -24,11 +29,10 @@ export const isBodyEmpty = (body?: BodyProps['body']) => {
   return contents.length === 0 && !description?.trim();
 };
 
-export const Body = ({ body, onChange, isHttpWebhookOperation = false }: BodyProps) => {
+export const Body = ({ body, onChange, isHttpWebhookOperation = false, disableProps }: BodyProps) => {
   const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
   const [chosenContent, setChosenContent] = React.useState(0);
   const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
-
   React.useEffect(() => {
     onChange?.(chosenContent);
     // disabling because we don't want to react on `onChange` change
@@ -41,6 +45,21 @@ export const Body = ({ body, onChange, isHttpWebhookOperation = false }: BodyPro
   const schema = contents[chosenContent]?.schema;
   const descriptionChanged = nodeHasChanged?.({ nodeId: body.id, attr: 'description' });
 
+  /* Get Masked Properties And Pass to LazySchemaTreePreviewer */
+  const getMaskProperties = (): Array<{ path: string; required?: boolean }> => {
+    const disablePropsConfig = disableProps || [];
+    const absolutePathsToHide: Array<{ path: string; required?: boolean }> = [];
+    disablePropsConfig.forEach(configEntry => {
+      const { location, paths } = configEntry;
+      paths.forEach(item => {
+        // Construct the full absolute path
+        const fullPath = `${location}/${item.path}`;
+        absolutePathsToHide.push({ path: fullPath });
+      });
+    });
+    return absolutePathsToHide;
+  };
+
   return (
     <VStack spacing={6}>
       <SectionSubtitle title="Body" id="request-body">
@@ -62,16 +81,20 @@ export const Body = ({ body, onChange, isHttpWebhookOperation = false }: BodyPro
           <NodeAnnotation change={descriptionChanged} />
         </Box>
       )}
-      {isJSONSchema(schema) && (
-        <JsonSchemaViewer
-          resolveRef={refResolver}
-          maxRefDepth={maxRefDepth}
-          schema={getOriginalObject(schema)}
-          viewMode={isHttpWebhookOperation ? 'standalone' : 'write'}
-          renderRootTreeLines
-          nodeHasChanged={nodeHasChanged}
-          renderExtensionAddon={renderExtensionAddon}
-        />
+      {schema && localStorage.getItem('use_new_mask_workflow') === 'true' ? (
+        <LazySchemaTreePreviewer schema={schema} hideData={getMaskProperties()} />
+      ) : (
+        isJSONSchema(schema) && (
+          <JsonSchemaViewer
+            resolveRef={refResolver}
+            maxRefDepth={maxRefDepth}
+            schema={getOriginalObject(schema)}
+            viewMode={isHttpWebhookOperation ? 'standalone' : 'write'}
+            renderRootTreeLines
+            nodeHasChanged={nodeHasChanged}
+            renderExtensionAddon={renderExtensionAddon}
+          />
+        )
       )}
     </VStack>
   );

packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx

@@ -30,14 +30,15 @@ import { Callbacks } from './Callbacks';
 import { Request } from './Request';
 import { Responses } from './Responses';
 
-export type HttpOperationProps = DocsComponentProps<IHttpEndpointOperation>;
+export type HttpOperationProps = DocsComponentProps<IHttpEndpointOperation> & {
+  disableProps?: Record<string, any>;
+};
 
 const HttpOperationComponent = React.memo<HttpOperationProps>(
-  ({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+  ({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, disableProps }) => {
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData) as IHttpEndpointOperation;
     const { ref: layoutRef, isCompact } = useIsCompact(layoutOptions);
-
     const mocking = React.useContext(MockingContext);
     const isDeprecated = !!data.deprecated;
     const isInternal = !!data.internal;
@@ -97,18 +98,22 @@ const HttpOperationComponent = React.memo<HttpOperationProps>(
           </Box>
         )}
         <NodeVendorExtensions data={data} />
+
         <Request
           onChange={setTextRequestBodyIndex}
           operation={data}
           hideSecurityInfo={layoutOptions?.hideSecurityInfo}
           isHttpWebhookOperation={isHttpWebhookOperation(data)}
+          disableProps={disableProps?.request}
         />
+
         {data.responses && (
           <Responses
             responses={data.responses}
             onMediaTypeChange={setResponseMediaType}
             onStatusCodeChange={setResponseStatusCode}
             isCompact={isCompact}
+            disableProps={disableProps?.response}
           />
         )}
         {data.callbacks?.length ? <Callbacks callbacks={data.callbacks} isCompact={isCompact} /> : null}