feat: Read only fields are excluded from Webhook docs (PROVCON-2826)

stoplightio · Sep 27, 2024 · d0cbb98 · d0cbb98
1 parent 213f05e
commit d0cbb98
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 16 deletions.
diff --git a/packages/elements-core/package.json b/packages/elements-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.4.3",
+  "version": "8.4.4",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/Body.tsx b/packages/elements-core/src/components/Docs/HttpOperation/Body.tsx
@@ -13,6 +13,7 @@ import { SectionSubtitle } from '../Sections';
 export interface BodyProps {
   body: IHttpOperationRequestBody;
   onChange?: (requestBodyIndex: number) => void;
+  isHttpWebhookOperation?: boolean;
 }
 
 export const isBodyEmpty = (body?: BodyProps['body']) => {
@@ -23,7 +24,7 @@ export const isBodyEmpty = (body?: BodyProps['body']) => {
   return contents.length === 0 && !description?.trim();
 };
 
-export const Body = ({ body, onChange }: BodyProps) => {
+export const Body = ({ body, onChange, isHttpWebhookOperation = false }: BodyProps) => {
   const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
   const [chosenContent, setChosenContent] = React.useState(0);
   const { nodeHasChanged, renderExtensionAddon } = useOptionsCtx();
@@ -61,13 +62,12 @@ export const Body = ({ body, onChange }: BodyProps) => {
           <NodeAnnotation change={descriptionChanged} />
         </Box>
       )}
-
       {isJSONSchema(schema) && (
         <JsonSchemaViewer
           resolveRef={refResolver}
           maxRefDepth={maxRefDepth}
           schema={getOriginalObject(schema)}
-          viewMode="write"
+          viewMode={isHttpWebhookOperation ? 'standalone' : 'write'}
           renderRootTreeLines
           nodeHasChanged={nodeHasChanged}
           renderExtensionAddon={renderExtensionAddon}

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx b/packages/elements-core/src/components/Docs/HttpOperation/HttpOperation.tsx
@@ -95,15 +95,13 @@ const HttpOperationComponent = React.memo<HttpOperationProps>(
             <NodeAnnotation change={descriptionChanged} />
           </Box>
         )}
-
         <NodeVendorExtensions data={data} />
-
         <Request
           onChange={setTextRequestBodyIndex}
           operation={data}
           hideSecurityInfo={layoutOptions?.hideSecurityInfo}
+          isHttpWebhookOperation={isHttpWebhookOperation(data)}
         />
-
         {data.responses && (
           <Responses
             responses={data.responses}
@@ -112,9 +110,7 @@ const HttpOperationComponent = React.memo<HttpOperationProps>(
             isCompact={isCompact}
           />
         )}
-
         {data.callbacks?.length ? <Callbacks callbacks={data.callbacks} isCompact={isCompact} /> : null}
-
         {isCompact && tryItPanel}
       </VStack>
     );

diff --git a/packages/elements-core/src/components/Docs/HttpOperation/Request.tsx b/packages/elements-core/src/components/Docs/HttpOperation/Request.tsx
@@ -17,6 +17,7 @@ interface IRequestProps {
   operation: IHttpEndpointOperation;
   hideSecurityInfo?: boolean;
   onChange?: (requestBodyIndex: number) => void;
+  isHttpWebhookOperation?: boolean;
 }
 
 export const Request: React.FunctionComponent<IRequestProps> = ({
@@ -33,6 +34,7 @@ export const Request: React.FunctionComponent<IRequestProps> = ({
   },
   hideSecurityInfo,
   onChange,
+  isHttpWebhookOperation = false,
 }) => {
   if (!request || typeof request !== 'object') return null;
 
@@ -82,7 +84,7 @@ export const Request: React.FunctionComponent<IRequestProps> = ({
         </VStack>
       )}
 
-      {body && <Body onChange={onChange} body={body} />}
+      {body && <Body onChange={onChange} body={body} isHttpWebhookOperation={isHttpWebhookOperation} />}
     </VStack>
   );
 };

diff --git a/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts b/packages/elements-core/src/components/TryIt/Body/useTextRequestBodyState.ts
@@ -11,9 +11,10 @@ import { useGenerateExampleFromMediaTypeContent } from '../../../utils/exampleGe
 
 export const useTextRequestBodyState = (
   mediaTypeContent: IMediaTypeContent | undefined,
+  skipReadOnly: boolean,
 ): [string, React.Dispatch<React.SetStateAction<string>>] => {
   const initialRequestBody = useGenerateExampleFromMediaTypeContent(mediaTypeContent, undefined, {
-    skipReadOnly: true,
+    skipReadOnly,
   });
 
   const [textRequestBody, setTextRequestBody] = React.useState<string>(initialRequestBody);

diff --git a/packages/elements-core/src/components/TryIt/TryIt.tsx b/packages/elements-core/src/components/TryIt/TryIt.tsx
@@ -98,7 +98,10 @@ export const TryIt: React.FC<TryItProps> = ({
   const [bodyParameterValues, setBodyParameterValues, isAllowedEmptyValues, setAllowedEmptyValues, formDataState] =
     useBodyParameterState(mediaTypeContent);
 
-  const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(mediaTypeContent);
+  const [textRequestBody, setTextRequestBody] = useTextRequestBodyState(
+    mediaTypeContent,
+    !isHttpWebhookOperation(httpOperation),
+  );
 
   const [operationAuthValue, setOperationAuthValue, setCurrentScheme] = usePersistedSecuritySchemeWithValues();
 

diff --git a/packages/elements-dev-portal/package.json b/packages/elements-dev-portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -66,7 +66,7 @@
   "dependencies": {
     "@stoplight/markdown-viewer": "^5.7.1",
     "@stoplight/mosaic": "^1.53.4",
-    "@stoplight/elements-core": "^8.4.3",
+    "@stoplight/elements-core": "^8.4.4",
     "@stoplight/path": "^1.3.2",
     "@stoplight/types": "^14.0.0",
     "classnames": "^2.2.6",

diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements",
-  "version": "8.4.3",
+  "version": "8.4.4",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [
@@ -63,7 +63,7 @@
     ]
   },
   "dependencies": {
-    "@stoplight/elements-core": "^8.4.3",
+    "@stoplight/elements-core": "^8.4.4",
     "@stoplight/http-spec": "^7.1.0",
     "@stoplight/json": "^3.18.1",
     "@stoplight/mosaic": "^1.53.4",