Swagger ui (#57)

* add swagger ui

* upgrade dependencies

Author: carlosthe19916

src/PresentationalComponents/IframeComponent/IframeComponent.scss

@@ -0,0 +1,3 @@
+.IframeComponent_fullheight {
+  height: 100%;
+}

src/PresentationalComponents/IframeComponent/IframeComponent.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import "./IframeComponent.scss";
+
+interface Props {
+  title: string;
+  src: string;
+  height: string;
+  width: string;
+}
+
+export const IframeComponent: React.FC<Props> = ({
+  title,
+  src,
+  height,
+  width
+}) => {
+  return (
+    <React.Fragment>
+      <iframe
+        title={title}
+        src={src}
+        height={height}
+        width={width}
+        className="IframeComponent_fullheight"
+      />
+    </React.Fragment>
+  );
+};

src/PresentationalComponents/IframeComponent/index.ts

@@ -0,0 +1 @@
+export * from "./IframeComponent";

src/PresentationalComponents/PageContextOrganization/PageContextOrganization.tsx

@@ -3,7 +3,7 @@ import { Switch } from "react-router-dom";
 import { XmlBuilderRouterProps } from "../../models/routerProps";
 import { PageOrganizationEdit } from "../PageOrganizationEdit";
 import { PageOrganizationKeys } from "../PageOrganizationKeys";
-import { PageOrganizationDocuments } from "../PageOrganizationDocuments";
+// import { PageOrganizationDocuments } from "../PageOrganizationDocuments";
 import RouterOrganizationContextSelector from "../../SmartComponents/RouterOrganizationContextSelector";
 
 interface Props extends XmlBuilderRouterProps {}
@@ -25,10 +25,10 @@ export class PageContextOrganization extends React.Component<Props, State> {
             path={`${match.path}/keys`}
             component={PageOrganizationKeys}
           />
-          <RouterOrganizationContextSelector
+          {/* <RouterOrganizationContextSelector
             path={`${match.path}/documents`}
             component={PageOrganizationDocuments}
-          />
+          /> */}
         </Switch>
       </React.Fragment>
     );

src/PresentationalComponents/PageSwaggerUI/PageSwaggerUI.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  PageSection,
+  PageSectionVariants,
+  TextContent,
+  Text
+} from "@patternfly/react-core";
+import { IframeComponent } from "../IframeComponent";
+
+interface Props {}
+
+export const PageSwaggerUI: React.FC<Props> = () => {
+  // This will work only when it is deployed inside xml-builder Quarkus
+  // const origin = `http://localhost:8080/swagger-ui/`;
+  const origin = `${window.location.origin}/swagger-ui/`;
+  return (
+    <React.Fragment>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">OpenAPI v3</Text>
+          <Text component="small">
+            Interactúa con todos los endpoints utilizando las herramientas que
+            te ofrecemos.
+          </Text>
+        </TextContent>
+      </PageSection>
+      <PageSection>
+        <IframeComponent
+          title="Swagger UI"
+          src={origin}
+          height="100%"
+          width="100%"
+        />
+      </PageSection>
+    </React.Fragment>
+  );
+};

src/PresentationalComponents/PageSwaggerUI/index.ts

@@ -0,0 +1 @@
+export * from "./PageSwaggerUI";

src/Routes.tsx

@@ -10,6 +10,7 @@ import RouterOrganizationContextLoader from "./SmartComponents/RouterOrganizatio
 import { PageOrganizationList } from "./PresentationalComponents/PageOrganizationList";
 import { PageOrganizationEdit } from "./PresentationalComponents/PageOrganizationEdit";
 import { PageContextOrganization } from "./PresentationalComponents/PageContextOrganization";
+import { PageSwaggerUI } from "./PresentationalComponents/PageSwaggerUI";
 
 const XmlBuilderRoute = (params: any) => {
   const { component: Component, ...rest } = params;
@@ -49,6 +50,8 @@ export const AppRoutes = () => {
         component={PageContextOrganization}
       />
 
+      <Route path="/swagger-ui" component={PageSwaggerUI} />
+
       <Route path="/error403" component={PageForbidden403} />
       <Route path="/error404" component={PageNotFound404} />
       <Route path="/error503" component={PageServiceUnavailable503} />

src/SmartComponents/SidebarNav/SidebarNav.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { Nav, NavItem, NavGroup } from "@patternfly/react-core";
-import { HomeIcon } from "@patternfly/react-icons";
+import { HomeIcon, BookOpenIcon } from "@patternfly/react-icons";
 import { OrganizationRepresentation } from "../../models/xml-builder";
 
 interface Props {
@@ -29,6 +29,12 @@ export class SidebarNav extends React.Component<Props, State> {
               &nbsp;Home
             </NavLink>
           </NavItem>
+          <NavItem>
+            <NavLink to="/swagger-ui" activeClassName="pf-m-current">
+              <BookOpenIcon />
+              &nbsp;API Docs
+            </NavLink>
+          </NavItem>
         </NavGroup>
         <NavGroup title="Consola administración">
           <NavItem key="organizations">
@@ -44,14 +50,14 @@ export class SidebarNav extends React.Component<Props, State> {
               Certificados digitales
             </NavLink>
           </NavItem>
-          <NavItem key="documents">
+          {/* <NavItem key="documents">
             <NavLink
               to={`/organizations/manage/${organizationId}/documents`}
               activeClassName="pf-m-current"
             >
               Comprobantes electrónicos
             </NavLink>
-          </NavItem>
+          </NavItem> */}
         </NavGroup>
       </Nav>
     );