Merge pull request #83 from shapehq/feature/stoplight

Embeds Redoc viewer in iframe

src/app/documentation-viewer/page.tsx

@@ -0,0 +1,16 @@
+import DocumentationViewer from "@/features/docs/view/DocumentationViewer"
+
+type SearchParams = { visualizer: string, url: string }
+
+export default async function Page({
+  searchParams
+}: {
+  searchParams: SearchParams
+}) {
+  return (
+    <DocumentationViewer
+      visualizer={parseInt(searchParams.visualizer)}
+      url={searchParams.url}
+    />
+  )
+}

src/common/loading/DelayedLoadingIndicator.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react"
+import LoadingIndicator from "./LoadingIndicator"
+
+const DelayedLoadingIndicator = ({
+  delay
+}: {
+  delay?: number
+}) => {
+  const [isVisible, setVisible] = useState(false)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(true)
+    }, delay || 1000)
+    return () => clearTimeout(timer)
+  }, [delay, setVisible])
+  return <>{isVisible && <LoadingIndicator/>}</>
+}
+
+export default DelayedLoadingIndicator

src/common/loading/LoadingIndicator.tsx

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react" 
+import { Box, Typography } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+
+const LoadingIndicator = () => {
+  const theme = useTheme()
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (count == 3) {
+        setCount(0)
+      } else {
+        setCount(count + 1)
+      }
+    }, 200)
+    return () => clearTimeout(timer)
+  }, [count, setCount])
+  return (
+    <Box style={{
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      background: theme.palette.background.default
+    }}>
+      {Array.from(Array(3).keys()).map((e) => {
+        return (
+          <Typography
+            key={count}
+            variant="h3"
+            sx={{ opacity: e + 1 == count ? 0.5 : 0.2 }}
+          >
+            •
+          </Typography>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default LoadingIndicator

src/features/projects/view/docs/DocumentationViewer.tsx → src/features/docs/view/DocumentationViewer.tsx

@@ -1,15 +1,21 @@
-import Swagger from "./Swagger"
+"use client"
+
 import Redocly from "./Redocly"
+import Swagger from "./Swagger"
 import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
-import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
 
-const DocumentationViewer = ({ url }: { url: string }) => {
-  const [documentationVisualizer] = useDocumentationVisualizer()
-  switch (documentationVisualizer) {
-  case DocumentationVisualizer.SWAGGER:
-    return <Swagger url={url} />
+const DocumentationViewer = ({
+  visualizer,
+  url
+}: {
+  visualizer: DocumentationVisualizer,
+  url: string
+}) => {
+  switch (visualizer) {
   case DocumentationVisualizer.REDOCLY:
     return <Redocly url={url} />
+  case DocumentationVisualizer.SWAGGER:
+    return <Swagger url={url} />
   }
 }
 

src/features/docs/view/LoadingWrapper.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from "react"
+import { Box } from "@mui/material"
+import LoadingIndicator from "@/common/loading/LoadingIndicator"
+
+const LoadingWrapper = ({
+  showLoadingIndicator,
+  children
+}: {
+  showLoadingIndicator: boolean,
+  children: ReactNode
+}) => {
+  return (
+    <Box sx={{ width: "100%", height: "100%", position: "relative", overflow: "scroll" }}>
+      {showLoadingIndicator &&
+        <Box sx={{ width: "100%", height: "100%", position: "absolute" }}>
+          <LoadingIndicator/>
+        </Box>
+      }
+      <Box sx={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: "white",
+        opacity: showLoadingIndicator ? 0 : 1
+      }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+export default LoadingWrapper

src/features/docs/view/Redocly.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react"
+import { RedocStandalone } from "redoc"
+import LoadingWrapper from "./LoadingWrapper"
+
+const Redocly = ({ url }: { url: string }) => {
+  const [isLoading, setLoading] = useState(true)
+  return (
+    <LoadingWrapper showLoadingIndicator={isLoading}>
+      <RedocStandalone
+        specUrl={url}
+        options={{ hideLoading: true }}
+        onLoaded={() => setLoading(false)}
+      />
+    </LoadingWrapper>
+  )
+}
+
+export default Redocly

src/features/docs/view/Swagger.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react"
+import SwaggerUI from "swagger-ui-react"
+import "swagger-ui-react/swagger-ui.css"
+import LoadingWrapper from "./LoadingWrapper"
+
+const Swagger = ({ url }: { url: string }) => {
+  const [isLoading, setLoading] = useState(true)
+  return (
+    <LoadingWrapper showLoadingIndicator={isLoading}>
+      <SwaggerUI url={url} onComplete={() => setLoading(false)} />
+    </LoadingWrapper>
+  )
+}
+
+export default Swagger

src/features/projects/view/Documentation.tsx

@@ -0,0 +1,16 @@
+import DocumentationViewer from "@/features/docs/view/DocumentationViewer"
+import DocumentationIframe from "./DocumentationIframe"
+import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
+
+const Documentation = ({ url }: { url: string }) => {
+  const [visualizer] = useDocumentationVisualizer()
+  switch (visualizer) {
+  case DocumentationVisualizer.REDOCLY:
+    return <DocumentationIframe visualizer={visualizer} url={url} />
+  case DocumentationVisualizer.SWAGGER:
+    return <DocumentationViewer visualizer={visualizer} url={url} />
+  }
+}
+
+export default Documentation

src/features/projects/view/DocumentationIframe.tsx

@@ -0,0 +1,28 @@
+import { Box } from "@mui/material"
+import DelayedLoadingIndicator from "@/common/loading/DelayedLoadingIndicator"
+import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+
+const DocumentationIframe = ({
+  visualizer,
+  url
+}: {
+  visualizer: DocumentationVisualizer,
+  url: string
+}) => {
+  const searchParams = new URLSearchParams()
+  searchParams.append("visualizer", visualizer.toString())
+  searchParams.append("url", url)
+  return (
+    <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+      <Box sx={{ width: "100%", height: "100%", position: "absolute" }}>
+        <DelayedLoadingIndicator/>
+      </Box>
+      <iframe
+        src={`/documentation-viewer?${searchParams.toString()}`}
+        style={{ width: "100%", height: "100%", position: "absolute" }}
+      />
+    </Box>
+  )
+}
+
+export default DocumentationIframe

src/features/projects/view/MainContent.tsx

@@ -1,9 +1,9 @@
 import Project from "../domain/Project"
 import Version from "../domain/Version"
 import OpenApiSpecification from "../domain/OpenApiSpecification"
-import DelayedLoading from "./DelayedLoading"
+import DelayedLoadingIndicator from "@/common/loading/DelayedLoadingIndicator"
 import ErrorMessage from "./ErrorMessage"
-import DocumentationViewer from "./docs/DocumentationViewer"
+import Documentation from "./Documentation"
 
 const MainContent = ({
   isLoading,
@@ -19,9 +19,9 @@ const MainContent = ({
   specification?: OpenApiSpecification  
 }) => {
   if (project && version && specification) {
-    return <DocumentationViewer url={specification.url}/>
+    return <Documentation url={specification.url}/>
   } else if (isLoading) {
-    return <DelayedLoading/>
+    return <DelayedLoadingIndicator/>
   } else if (error) {
     return <ErrorMessage text={error.message}/>
   } else if (!project) {

src/features/projects/view/client/ProjectsPage.tsx

@@ -8,8 +8,8 @@ import SidebarContainer from "@/features/sidebar/view/client/SidebarContainer"
 import Project from "../../domain/Project"
 import ProjectList from "../ProjectList"
 import MainContent from "../MainContent"
-import MobileToolbar from "../MobileToolbar"
-import TrailingToolbarItem from "../TrailingToolbarItem"
+import MobileToolbar from "../toolbar/MobileToolbar"
+import TrailingToolbarItem from "../toolbar/TrailingToolbarItem"
 import getSelection from "../../domain/getSelection"
 import projectNavigator from "../../domain/projectNavigator"
 import updateWindowTitle from "../../domain/updateWindowTitle"

src/features/projects/view/MobileToolbar.tsx → src/features/projects/view/toolbar/MobileToolbar.tsx

@@ -1,9 +1,9 @@
 import { Stack } from "@mui/material"
-import Project from "../domain/Project"
-import Version from "../domain/Version"
-import OpenApiSpecification from "../domain/OpenApiSpecification"
-import VersionSelector from "./docs/VersionSelector"
-import SpecificationSelector from "./docs/SpecificationSelector"
+import Project from "../../domain/Project"
+import Version from "../../domain/Version"
+import OpenApiSpecification from "../../domain/OpenApiSpecification"
+import VersionSelector from "./VersionSelector"
+import SpecificationSelector from "./SpecificationSelector"
 
 const MobileToolbar = ({
   project,

src/features/projects/view/TrailingToolbarItem.tsx → src/features/projects/view/toolbar/TrailingToolbarItem.tsx

@@ -1,10 +1,10 @@
 import { SxProps } from "@mui/system"
 import { Stack, IconButton, Typography, Link } from "@mui/material"
-import Project from "../domain/Project"
-import Version from "../domain/Version"
-import OpenApiSpecification from "../domain/OpenApiSpecification"
-import VersionSelector from "./docs/VersionSelector"
-import SpecificationSelector from "./docs/SpecificationSelector"
+import Project from "../../domain/Project"
+import Version from "../../domain/Version"
+import OpenApiSpecification from "../../domain/OpenApiSpecification"
+import VersionSelector from "./VersionSelector"
+import SpecificationSelector from "./SpecificationSelector"
 import EditIcon from "@mui/icons-material/Edit"
 
 const TrailingToolbarItem = ({

src/features/settings/view/DocumentationVisualizationPicker.tsx

@@ -1,31 +1,29 @@
-import { ToggleButtonGroup, ToggleButton } from "@mui/material"
+import { FormControl, Select, MenuItem, SelectChangeEvent } from "@mui/material"
 import DocumentationVisualizer from "../domain/DocumentationVisualizer"
 import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
 
 const DocumentationVisualizationPicker: React.FC = () => {
   const [value, setValue] = useDocumentationVisualizer()
-  const handleChange = (
-    _event: React.MouseEvent<HTMLElement>,
-    documentationVisualizer: DocumentationVisualizer
-  ) => {
-    setValue(documentationVisualizer)
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(parseInt(event.target.value))
   }
   return (
-    <ToggleButtonGroup
-      exclusive
-      value={value}
-      onChange={handleChange}
-      fullWidth={true}
-      color="secondary"
-      aria-label="Viewer"
-    >
-      <ToggleButton value={DocumentationVisualizer.SWAGGER}>
-        Swagger
-      </ToggleButton>
-      <ToggleButton value={DocumentationVisualizer.REDOCLY}>
-        Redocly
-      </ToggleButton>
-    </ToggleButtonGroup>
+    <FormControl fullWidth sx={{ m: 1, minWidth: 120, margin: 0 }} size="small">
+      <Select defaultValue={value.toString()} onChange={handleChange}>
+        <MenuItem
+          key={DocumentationVisualizer.REDOCLY}
+          value={DocumentationVisualizer.REDOCLY.toString()}
+        >
+          Redocly
+        </MenuItem>
+        <MenuItem
+          key={DocumentationVisualizer.SWAGGER}
+          value={DocumentationVisualizer.SWAGGER.toString()}
+        >
+          Swagger
+        </MenuItem>
+      </Select>
+    </FormControl>
   )
 }