From 89a688d532593d7cc4d1b0e6b5c2d2595734f36e Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Wed, 6 Sep 2023 12:08:06 -0500
Subject: [PATCH 1/6] Added Description and Example

---
 src/components/APIDoc/SchemaPropertyView.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 379fbf67..d2c39582 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -88,6 +88,8 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
   return(
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
+      {propSchema.description && <LabelGroup categoryName="Description:"><Text>{propSchema.description}</Text></LabelGroup>}
+      {propSchema.example && <LabelGroup categoryName="Example"><Label>{propSchema.example}</Label></LabelGroup>}
       {propSchema.default && <Label isCompact>default: {propSchema.default}</Label>}
       {propSchema.enum && <LabelGroup categoryName="Enums">{propSchema.enum.map(e => <Label key={e} isCompact>{e}</Label>)}</LabelGroup>}
       {propSchema.pattern && <Label isCompact>pattern: {propSchema.pattern}</Label>}
@@ -102,5 +104,6 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
       {propSchema.writeOnly && <Label isCompact>write only</Label>}
       {propSchema.deprecated && <Label isCompact>deprecated</Label>}
     </LabelGroup>
+    
   )
 }

From 065a428b4957810d90f4845ac7058047ac530f4c Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Wed, 6 Sep 2023 12:15:01 -0500
Subject: [PATCH 2/6] Leveled Text

---
 src/components/APIDoc/SchemaPropertyView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index d2c39582..416b84ca 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -1,5 +1,5 @@
 import React, {ReactNode} from 'react';
-import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup } from '@patternfly/react-core';
+import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup, LevelItem, Level } from '@patternfly/react-core';
 import { OpenAPIV3 } from 'openapi-types';
 
 
@@ -88,7 +88,7 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
   return(
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
-      {propSchema.description && <LabelGroup categoryName="Description:"><Text>{propSchema.description}</Text></LabelGroup>}
+      {propSchema.description && <Level><Text>{propSchema.description}</Text></Level>}
       {propSchema.example && <LabelGroup categoryName="Example"><Label>{propSchema.example}</Label></LabelGroup>}
       {propSchema.default && <Label isCompact>default: {propSchema.default}</Label>}
       {propSchema.enum && <LabelGroup categoryName="Enums">{propSchema.enum.map(e => <Label key={e} isCompact>{e}</Label>)}</LabelGroup>}

From 5c1c99e60ca0607691c0cd9ce8e9cfedb78f6ace Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Wed, 6 Sep 2023 12:17:38 -0500
Subject: [PATCH 3/6] took out levelitem

---
 src/components/APIDoc/SchemaPropertyView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 416b84ca..6aa42048 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -1,5 +1,5 @@
 import React, {ReactNode} from 'react';
-import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup, LevelItem, Level } from '@patternfly/react-core';
+import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup, Level } from '@patternfly/react-core';
 import { OpenAPIV3 } from 'openapi-types';
 
 

From bc18d4fb2980aecdad995857e6678d69a342dcd3 Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Wed, 6 Sep 2023 12:25:33 -0500
Subject: [PATCH 4/6] With prettify

---
 src/components/APIDoc/SchemaPropertyView.tsx | 119 ++++++++++++-------
 1 file changed, 78 insertions(+), 41 deletions(-)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 6aa42048..3fbd419b 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -1,7 +1,15 @@
-import React, {ReactNode} from 'react';
-import { Text, TextContent, TextVariants, Flex, FlexItem, Label, LabelGroup, Level } from '@patternfly/react-core';
-import { OpenAPIV3 } from 'openapi-types';
-
+import React, { ReactNode } from "react";
+import {
+  Text,
+  TextContent,
+  TextVariants,
+  Flex,
+  FlexItem,
+  Label,
+  LabelGroup,
+  Level,
+} from "@patternfly/react-core";
+import { OpenAPIV3 } from "openapi-types";
 
 interface PropertyViewComponentProps {
   propSchema?: OpenAPIV3.ReferenceObject | OpenAPIV3.SchemaObject;
@@ -10,10 +18,12 @@ interface PropertyViewComponentProps {
   required: boolean | undefined;
 }
 
-export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> = ({propSchema, propName, propertyType, required}) => {
+export const PropertyView: React.FunctionComponent<
+  PropertyViewComponentProps
+> = ({ propSchema, propName, propertyType, required }) => {
   let extraProps;
-  if (propSchema && !('$ref' in propSchema) ) {
-    extraProps = <ExtraPropertyView propSchema={propSchema}/>
+  if (propSchema && !("$ref" in propSchema)) {
+    extraProps = <ExtraPropertyView propSchema={propSchema} />;
   }
   return (
     <Flex>
@@ -24,76 +34,104 @@ export const PropertyView:React.FunctionComponent<PropertyViewComponentProps> =
               <Text component={TextVariants.h6}>{propName}</Text>
             </FlexItem>
             <FlexItem>
-              <Text component={TextVariants.p} className="pf-u-danger-color-100">{required && "*"}</Text>
+              <Text
+                component={TextVariants.p}
+                className="pf-u-danger-color-100"
+              >
+                {required && "*"}
+              </Text>
             </FlexItem>
           </Flex>
         </TextContent>
       </FlexItem>
       <FlexItem>
         <TextContent>
-          <Text component={TextVariants.p}>
-            {propertyType}
-          </Text>
+          <Text component={TextVariants.p}>{propertyType}</Text>
         </TextContent>
       </FlexItem>
-      <FlexItem>
-        {extraProps}
-      </FlexItem>
+      <FlexItem>{extraProps}</FlexItem>
     </Flex>
-  )
-}
-
+  );
+};
 
 interface ExtraPropertyViewProps {
   propSchema: OpenAPIV3.SchemaObject;
 }
-export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> = ({propSchema}) => {
+export const ExtraPropertyView: React.FunctionComponent<
+  ExtraPropertyViewProps
+> = ({ propSchema }) => {
   let maxMin: string | undefined;
   if (propSchema.maximum && propSchema.minimum) {
-    maxMin = (propSchema.exclusiveMinimum ? '>': '≥') + ` ${propSchema.minimum} and `
-    maxMin += (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
+    maxMin =
+      (propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum} and `;
+    maxMin +=
+      (propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
   } else if (propSchema.maximum) {
-    maxMin = (propSchema.exclusiveMaximum ? '<' : '≤') + ` ${propSchema.maximum}`
+    maxMin =
+      (propSchema.exclusiveMaximum ? "<" : "≤") + ` ${propSchema.maximum}`;
   } else if (propSchema.minimum) {
-    maxMin = (propSchema.exclusiveMinimum ? '>' : '≥') + ` ${propSchema.minimum}`
+    maxMin =
+      (propSchema.exclusiveMinimum ? ">" : "≥") + ` ${propSchema.minimum}`;
   }
 
   let maxMinChar: string | undefined;
   if (propSchema.maxLength && propSchema.minLength) {
-    maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`
+    maxMinChar = `${propSchema.minLength} to ${propSchema.maxLength} chars`;
   } else if (propSchema.maxLength) {
-    maxMinChar = `max ${propSchema.maxLength} chars`
+    maxMinChar = `max ${propSchema.maxLength} chars`;
   } else if (propSchema.minLength) {
-    maxMinChar = `min ${propSchema.minLength} chars`
+    maxMinChar = `min ${propSchema.minLength} chars`;
   }
 
   let maxMinItems: string | undefined;
   if (propSchema.maxItems && propSchema.minItems) {
-    maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`
+    maxMinItems = `${propSchema.minItems} to ${propSchema.maxItems} items`;
   } else if (propSchema.maxItems) {
-    maxMinItems = `max ${propSchema.maxItems} items`
+    maxMinItems = `max ${propSchema.maxItems} items`;
   } else if (propSchema.minItems) {
-    maxMinItems = `min ${propSchema.minItems} items`
+    maxMinItems = `min ${propSchema.minItems} items`;
   }
 
   let maxMinProps: string | undefined;
   if (propSchema.maxProperties && propSchema.minProperties) {
-    maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`
+    maxMinProps = `${propSchema.minProperties} to ${propSchema.maxProperties} properties`;
   } else if (propSchema.maxProperties) {
-    maxMinProps = `max ${propSchema.maxProperties} properties`
+    maxMinProps = `max ${propSchema.maxProperties} properties`;
   } else if (propSchema.minItems) {
-    maxMinProps = `min ${propSchema.minProperties} properties`
+    maxMinProps = `min ${propSchema.minProperties} properties`;
   }
 
-  return(
+  return (
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
-      {propSchema.description && <Level><Text>{propSchema.description}</Text></Level>}
-      {propSchema.example && <LabelGroup categoryName="Example"><Label>{propSchema.example}</Label></LabelGroup>}
-      {propSchema.default && <Label isCompact>default: {propSchema.default}</Label>}
-      {propSchema.enum && <LabelGroup categoryName="Enums">{propSchema.enum.map(e => <Label key={e} isCompact>{e}</Label>)}</LabelGroup>}
-      {propSchema.pattern && <Label isCompact>pattern: {propSchema.pattern}</Label>}
-      {propSchema.multipleOf && <Label isCompact>multipleOf: {propSchema.multipleOf}</Label>}
+      {propSchema.description && (
+        <Level>
+          <Text>{propSchema.description}</Text>
+        </Level>
+      )}
+      {propSchema.example && (
+        <LabelGroup categoryName="Example">
+          <Label>{propSchema.example}</Label>
+        </LabelGroup>
+      )}
+      {propSchema.default && (
+        <Label isCompact>default: {propSchema.default}</Label>
+      )}
+      {propSchema.enum && (
+        <LabelGroup categoryName="Enums">
+          {propSchema.enum.map((e) => (
+            <Label key={e} isCompact>
+              {e}
+            </Label>
+          ))}
+        </LabelGroup>
+      )}
+      {propSchema.pattern && (
+        <Label isCompact>pattern: {propSchema.pattern}</Label>
+      )}
+      {propSchema.multipleOf && (
+        <Label isCompact>multipleOf: {propSchema.multipleOf}</Label>
+      )}
       {maxMin && <Label isCompact>{maxMin}</Label>}
       {maxMinChar && <Label isCompact>{maxMinChar}</Label>}
       {maxMinItems && <Label isCompact>{maxMinItems}</Label>}
@@ -104,6 +142,5 @@ export const ExtraPropertyView:React.FunctionComponent<ExtraPropertyViewProps> =
       {propSchema.writeOnly && <Label isCompact>write only</Label>}
       {propSchema.deprecated && <Label isCompact>deprecated</Label>}
     </LabelGroup>
-    
-  )
-}
+  );
+};

From 7d4e8eb0858e5c56d8f437ff976da182e3ac5833 Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Tue, 19 Sep 2023 10:24:41 -0500
Subject: [PATCH 5/6] Text Input

---
 src/components/APIDoc/SchemaPropertyView.tsx | 76 +++++++++++++++++++-
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 3fbd419b..5c0c6f90 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -8,8 +8,13 @@ import {
   Label,
   LabelGroup,
   Level,
+  TextInput,
+  TreeViewDataItem,
+  TreeView,
 } from "@patternfly/react-core";
 import { OpenAPIV3 } from "openapi-types";
+import { ExpandableRowContent } from "@patternfly/react-table";
+import { ExampleResponse } from "./ExampleResponse";
 
 interface PropertyViewComponentProps {
   propSchema?: OpenAPIV3.ReferenceObject | OpenAPIV3.SchemaObject;
@@ -60,6 +65,7 @@ interface ExtraPropertyViewProps {
 export const ExtraPropertyView: React.FunctionComponent<
   ExtraPropertyViewProps
 > = ({ propSchema }) => {
+  console.log(propSchema);
   let maxMin: string | undefined;
   if (propSchema.maximum && propSchema.minimum) {
     maxMin =
@@ -101,6 +107,67 @@ export const ExtraPropertyView: React.FunctionComponent<
     maxMinProps = `min ${propSchema.minProperties} properties`;
   }
 
+  const GuidesTreeView: React.FunctionComponent = () => {
+    const options: TreeViewDataItem[] = [
+      {
+        name: 'Application launcher',
+        id: 'AppLaunch',
+        children: [
+          {
+            name: 'Application 1',
+            id: 'App1',
+            children: [
+              { name: 'Settings', id: 'App1Settings' },
+              { name: 'Current', id: 'App1Current' }
+            ]
+          },
+          {
+            name: 'Application 2',
+            id: 'App2',
+            children: [
+              { name: 'Settings', id: 'App2Settings' },
+              {
+                name: 'Loader',
+                id: 'App2Loader',
+                children: [
+                  { name: 'Loading App 1', id: 'LoadApp1' },
+                  { name: 'Loading App 2', id: 'LoadApp2' },
+                  { name: 'Loading App 3', id: 'LoadApp3' }
+                ]
+              }
+            ]
+          }
+        ],
+        defaultExpanded: true
+      },
+      {
+        name: 'Cost management',
+        id: 'Cost',
+        children: [
+          {
+            name: 'Application 3',
+            id: 'App3',
+            children: [
+              { name: 'Settings', id: 'App3Settings' },
+              { name: 'Current', id: 'App3Current' }
+            ]
+          }
+        ]
+      },
+      {
+        name: 'Sources',
+        id: 'Sources',
+        children: [{ name: 'Application 4', id: 'App4', children: [{ name: 'Settings', id: 'App4Settings' }] }]
+      },
+      {
+        name: 'Really really really long folder name that overflows the container it is in',
+        id: 'Long',
+        children: [{ name: 'Application 5', id: 'App5' }]
+      }
+    ];
+    return <TreeView data={options} hasGuides={true} />;
+  }
+
   return (
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
@@ -110,9 +177,12 @@ export const ExtraPropertyView: React.FunctionComponent<
         </Level>
       )}
       {propSchema.example && (
-        <LabelGroup categoryName="Example">
-          <Label>{propSchema.example}</Label>
-        </LabelGroup>
+        <TextInput
+          value={propSchema.example}
+          type="text"
+          readOnly
+          aria-label="schema example"
+        />
       )}
       {propSchema.default && (
         <Label isCompact>default: {propSchema.default}</Label>

From 9a7b8282a516da20febe7753a9cb16893cc7fa10 Mon Sep 17 00:00:00 2001
From: Dalia Cervantes <dcervant@redhat.com>
Date: Tue, 19 Sep 2023 16:32:45 -0500
Subject: [PATCH 6/6] Woo Examples

---
 src/components/APIDoc/SchemaPropertyView.tsx | 130 +++++++------------
 1 file changed, 44 insertions(+), 86 deletions(-)

diff --git a/src/components/APIDoc/SchemaPropertyView.tsx b/src/components/APIDoc/SchemaPropertyView.tsx
index 5c0c6f90..e2bae457 100644
--- a/src/components/APIDoc/SchemaPropertyView.tsx
+++ b/src/components/APIDoc/SchemaPropertyView.tsx
@@ -8,13 +8,11 @@ import {
   Label,
   LabelGroup,
   Level,
-  TextInput,
-  TreeViewDataItem,
-  TreeView,
+  ExpandableSection,
+  CodeBlock,
+  CodeBlockCode,
 } from "@patternfly/react-core";
 import { OpenAPIV3 } from "openapi-types";
-import { ExpandableRowContent } from "@patternfly/react-table";
-import { ExampleResponse } from "./ExampleResponse";
 
 interface PropertyViewComponentProps {
   propSchema?: OpenAPIV3.ReferenceObject | OpenAPIV3.SchemaObject;
@@ -27,8 +25,13 @@ export const PropertyView: React.FunctionComponent<
   PropertyViewComponentProps
 > = ({ propSchema, propName, propertyType, required }) => {
   let extraProps;
+  let extraExample;
   if (propSchema && !("$ref" in propSchema)) {
     extraProps = <ExtraPropertyView propSchema={propSchema} />;
+    if(propSchema.example) {
+      extraExample = <ExtraExampleView propSchema={propSchema} />
+    }
+
   }
   return (
     <Flex>
@@ -46,12 +49,18 @@ export const PropertyView: React.FunctionComponent<
                 {required && "*"}
               </Text>
             </FlexItem>
+            <FlexItem>
+                <Text 
+                  component={TextVariants.p}>
+                  {propertyType}
+                </Text>
+            </FlexItem>
+          </Flex>
+          <Flex>
+            <FlexItem>
+              {extraExample}
+            </FlexItem>
           </Flex>
-        </TextContent>
-      </FlexItem>
-      <FlexItem>
-        <TextContent>
-          <Text component={TextVariants.p}>{propertyType}</Text>
         </TextContent>
       </FlexItem>
       <FlexItem>{extraProps}</FlexItem>
@@ -59,13 +68,37 @@ export const PropertyView: React.FunctionComponent<
   );
 };
 
+interface ExtraExampleViewProps {
+  propSchema: OpenAPIV3.SchemaObject;
+}
+
+export const ExtraExampleView: React.FunctionComponent<
+  ExtraExampleViewProps
+> = ({ propSchema }) => {
+  return (
+    <><Flex>
+    {propSchema.description && (
+      <Level>
+        <Text>{propSchema.description}</Text>
+      </Level>
+    )}
+    </Flex>
+    <ExpandableSection toggleText="Example">
+      <CodeBlock>
+        <CodeBlockCode id="code-content">{propSchema.example}</CodeBlockCode>
+      </CodeBlock>
+    </ExpandableSection>
+    </>
+  )
+}
+  
+
 interface ExtraPropertyViewProps {
   propSchema: OpenAPIV3.SchemaObject;
 }
 export const ExtraPropertyView: React.FunctionComponent<
   ExtraPropertyViewProps
 > = ({ propSchema }) => {
-  console.log(propSchema);
   let maxMin: string | undefined;
   if (propSchema.maximum && propSchema.minimum) {
     maxMin =
@@ -106,84 +139,9 @@ export const ExtraPropertyView: React.FunctionComponent<
   } else if (propSchema.minItems) {
     maxMinProps = `min ${propSchema.minProperties} properties`;
   }
-
-  const GuidesTreeView: React.FunctionComponent = () => {
-    const options: TreeViewDataItem[] = [
-      {
-        name: 'Application launcher',
-        id: 'AppLaunch',
-        children: [
-          {
-            name: 'Application 1',
-            id: 'App1',
-            children: [
-              { name: 'Settings', id: 'App1Settings' },
-              { name: 'Current', id: 'App1Current' }
-            ]
-          },
-          {
-            name: 'Application 2',
-            id: 'App2',
-            children: [
-              { name: 'Settings', id: 'App2Settings' },
-              {
-                name: 'Loader',
-                id: 'App2Loader',
-                children: [
-                  { name: 'Loading App 1', id: 'LoadApp1' },
-                  { name: 'Loading App 2', id: 'LoadApp2' },
-                  { name: 'Loading App 3', id: 'LoadApp3' }
-                ]
-              }
-            ]
-          }
-        ],
-        defaultExpanded: true
-      },
-      {
-        name: 'Cost management',
-        id: 'Cost',
-        children: [
-          {
-            name: 'Application 3',
-            id: 'App3',
-            children: [
-              { name: 'Settings', id: 'App3Settings' },
-              { name: 'Current', id: 'App3Current' }
-            ]
-          }
-        ]
-      },
-      {
-        name: 'Sources',
-        id: 'Sources',
-        children: [{ name: 'Application 4', id: 'App4', children: [{ name: 'Settings', id: 'App4Settings' }] }]
-      },
-      {
-        name: 'Really really really long folder name that overflows the container it is in',
-        id: 'Long',
-        children: [{ name: 'Application 5', id: 'App5' }]
-      }
-    ];
-    return <TreeView data={options} hasGuides={true} />;
-  }
-
   return (
     <LabelGroup>
       {propSchema.format && <Label isCompact>{propSchema.format}</Label>}
-      {propSchema.description && (
-        <Level>
-          <Text>{propSchema.description}</Text>
-        </Level>
-      )}
-      {propSchema.example && (
-        <TextInput
-          value={propSchema.example}
-          type="text"
-          readOnly
-          aria-label="schema example"
-        />
-      )}
       {propSchema.default && (
         <Label isCompact>default: {propSchema.default}</Label>
       )}