refactor: in react ui, have Page manage Viewer

Signed-off-by: Nick Mitchell <[email protected]>

pdl-live-react/src/Demo.tsx

@@ -1,5 +1,4 @@
 import Page from "./Page"
-import Viewer from "./Viewer"
 
 type Props = {
   name: string
@@ -9,7 +8,7 @@ type Props = {
 export default function Demo({ name, value }: Props) {
   return (
     <Page breadcrumb1="Demo" breadcrumb2={name}>
-      <Viewer value={value} />
+      {value}
     </Page>
   )
 }

pdl-live-react/src/Page.tsx

@@ -6,6 +6,7 @@ import {
   PageSection,
 } from "@patternfly/react-core"
 
+import Viewer from "./Viewer"
 import Sidebar from "./Sidebar"
 import Masthead from "./Masthead"
 import ViewerTabs from "./ViewerTabs"
@@ -58,7 +59,7 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
           <Masthead setDarkMode={setDarkMode} />
         </DarkModeContext.Provider>
       }
-      horizontalSubnav={<ViewerTabs />}
+      horizontalSubnav={typeof children === "string" && <ViewerTabs />}
       groupProps={notFilled /* so breadcrumbs aren't filled */}
       isBreadcrumbGrouped
       breadcrumb={
@@ -78,7 +79,11 @@ export default function PDLPage({ breadcrumb1, breadcrumb2, children }: Props) {
       >
         <DrawerContext.Provider value={setDrawerContent}>
           <DarkModeContext.Provider value={darkMode}>
-            {children}
+            {typeof children === "string" && children.length > 0 ? (
+              <Viewer value={children} />
+            ) : (
+              children
+            )}
           </DarkModeContext.Provider>
         </DrawerContext.Provider>
       </PageSection>

pdl-live-react/src/Uploader.tsx

@@ -13,7 +13,6 @@ import {
 } from "@patternfly/react-core"
 
 import Page from "./Page"
-import Viewer from "./Viewer"
 
 export default function Uploader() {
   const [value, setValue] = useState("")
@@ -142,7 +141,7 @@ export default function Uploader() {
         </FormGroup>
       </Form>
 
-      {value && <Viewer value={value} />}
+      {value}
     </Page>
   )
 }