Use new shared auth components for oidc support.

ui/ui-app/configs/config-3scale.js

@@ -4,7 +4,7 @@ const ApiDesignerConfig = {
         "navPrefixPath": ""
     },
     "apis": {
-        "designer": "https://apicurio-designer-api-rhaf-apicurio.apps.dev-eng-ocp4-mas.dev.3sca.net/apis/designer/v0"
+        "designer": "https://designer-api.dev.apicur.io/apis/designer/v0"
     },
     "components": {
         "masthead": {
@@ -24,7 +24,7 @@ const ApiDesignerConfig = {
         "options": {
             "redirectUri": "http://localhost:8888",
             "clientId": "designer-ui",
-            "url": "https://keycloak-rhaf-apicurio.apps.dev-eng-ocp4-mas.dev.3sca.net/realms/apicurio"
+            "url": "https://sso.dev.apicur.io/realms/apicurio"
         }
     }
 };

ui/ui-app/package.json

@@ -30,7 +30,7 @@
     "vite-tsconfig-paths": "4.3.1"
   },
   "dependencies": {
-    "@apicurio/common-ui-components": "1.0.11",
+    "@apicurio/common-ui-components": "1.0.14",
     "@monaco-editor/react": "4.6.0",
     "@patternfly/patternfly": "5.1.0",
     "@patternfly/react-core": "5.1.2",

ui/ui-app/src/app/App.tsx

@@ -4,58 +4,29 @@ import "@patternfly/patternfly/patternfly-addons.css";
 
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import { useOidcAuth } from "@app/auth";
-import { ApiDesignerConfigContext, ApiDesignerConfigType } from "@app/contexts/config";
-
-import { AuthConfig } from "@services/ServiceConfigContext.tsx";
-import { EditorPage, EmbeddedEditorPage, HomePage, PageConfig, PageContextProvider } from "@app/pages";
-import { AppHeader, ApplicationAuth } from "@app/components";
+import { EditorPage, EmbeddedEditorPage, HomePage } from "@app/pages";
+import { AppHeader } from "@app/components";
 import { Page } from "@patternfly/react-core";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const apiDesignerConfig: ApiDesignerConfigType = ApiDesignerConfig || window["ApiDesignerConfig"];
+import { ApiDesignerConfig, useApiDesignerConfig } from "@services/useApiDesignerConfig.ts";
+import { ApplicationAuth, AuthConfigContext, AuthConfig } from "@apicurio/common-ui-components";
 
 
 export const App: React.FunctionComponent = () => {
-    const auth: AuthConfig = useOidcAuth();
-
-    const editorsUrl: string = apiDesignerConfig.components.editors.url.startsWith("/") ?
-        (window.location.origin + apiDesignerConfig.components.editors.url) :
-        apiDesignerConfig.components.editors.url;
-
-    const pageConfig: PageConfig = {
-        editorConfig: {
-            openApiEditorUrl: editorsUrl,
-            asyncApiEditorUrl: editorsUrl
-        },
-        serviceConfig: {
-            designs: {
-                type: apiDesignerConfig.apis.designer === "browser" ? "browser" : "api",
-                api: apiDesignerConfig.apis.designer
-            },
-            navigation: {
-                basename: apiDesignerConfig.ui.navPrefixPath
-            },
-            auth
-        }
-    };
+    const appConfig: ApiDesignerConfig = useApiDesignerConfig();
 
     return (
-        <ApiDesignerConfigContext.Provider value={apiDesignerConfig}>
+        <AuthConfigContext.Provider value={appConfig.auth as AuthConfig}>
             <ApplicationAuth>
-                <PageContextProvider value={pageConfig}>
-                    <Router basename={apiDesignerConfig.ui.contextPath}>
-                        <Page className="pf-m-redhat-font" isManagedSidebar={false} header={<AppHeader />}>
-                            <Routes>
-                                <Route path="/" element={<HomePage />}/>
-                                <Route path="/designs/:designId/editor" element={<EditorPage />}/>
-                                <Route path="/editor-embedded" element={<EmbeddedEditorPage />}/>
-                            </Routes>
-                        </Page>
-                    </Router>
-                </PageContextProvider>
+                <Router basename={appConfig.ui.contextPath}>
+                    <Page className="pf-m-redhat-font" isManagedSidebar={false} header={<AppHeader />}>
+                        <Routes>
+                            <Route path="/" element={<HomePage />}/>
+                            <Route path="/designs/:designId/editor" element={<EditorPage />}/>
+                            <Route path="/editor-embedded" element={<EmbeddedEditorPage />}/>
+                        </Routes>
+                    </Page>
+                </Router>
             </ApplicationAuth>
-        </ApiDesignerConfigContext.Provider>
+        </AuthConfigContext.Provider>
     );
 };