Fix an issue with the openapi editor not loading

ui/ui-app/src/app/pages/EditorPage.tsx

@@ -5,8 +5,8 @@ import {
 } from "@patternfly/react-core";
 import { ArtifactTypes, ContentTypes, Design, DesignContent } from "@models/designs";
 import { DesignsService, useDesignsService } from "@services/useDesignsService.ts";
-import { UseDownloadService, useDownloadService } from "@services/useDownloadService.ts";
-import { UseAlertsService, useAlertsService } from "@services/useAlertsService.tsx";
+import { DownloadService, useDownloadService } from "@services/useDownloadService.ts";
+import { AlertsService, useAlertsService } from "@services/useAlertsService.tsx";
 import {
     contentTypeForDesign,
     convertToValidFilename,
@@ -70,9 +70,9 @@ export const EditorPage: FunctionComponent<EditorPageProps> = () => {
     const params = useParams();
 
     const designsService: DesignsService = useDesignsService();
-    const downloadSvc: UseDownloadService = useDownloadService();
+    const downloadSvc: DownloadService = useDownloadService();
     const navigation: AppNavigationService = useAppNavigation();
-    const alerts: UseAlertsService = useAlertsService();
+    const alerts: AlertsService = useAlertsService();
 
     useEffect(() => {
         // Cleanup any possible event listener we might still have registered

ui/ui-app/src/app/pages/components/editor/EditorContext.tsx

@@ -12,7 +12,7 @@ import {
     TextContent
 } from "@patternfly/react-core";
 import { ArtifactTypes, Design, DesignEvent } from "@models/designs";
-import { UseLocalStorageService, useLocalStorageService } from "@services/useLocalStorageService.ts";
+import { LocalStorageService, useLocalStorageService } from "@services/useLocalStorageService.ts";
 import { DesignsService, useDesignsService } from "@services/useDesignsService.ts";
 import { ArtifactTypeIcon } from "@app/components";
 import { DesignDescription, NavLink } from "@app/pages";
@@ -47,7 +47,7 @@ type EditorContextMenuItem = {
  * The context of the design when editing a design on the editor page.
  */
 export const EditorContext: FunctionComponent<EditorContextProps> = (props: EditorContextProps) => {
-    const lss: UseLocalStorageService = useLocalStorageService();
+    const lss: LocalStorageService = useLocalStorageService();
 
     const [originEvent, setOriginEvent] = useState<DesignEvent>();
     const [isExpanded, setExpanded] = useState(lss.getConfigProperty("editor-context.isExpanded", "false") === "true");

ui/ui-app/src/app/pages/components/home/CreateDesignModal.tsx

@@ -13,7 +13,7 @@ import {
 } from "@patternfly/react-core";
 import { ArtifactTypes, CreateDesign } from "@models/designs";
 import { Template } from "@models/templates";
-import { UseTemplatesService, useTemplatesService } from "@services/useTemplatesService.ts";
+import { TemplatesService, useTemplatesService } from "@services/useTemplatesService.ts";
 import { OPENAPI_VERSIONS, TemplateItem, TYPE_ITEMS, TypeItem } from "@app/pages";
 import { If, ObjectSelect } from "@apicurio/common-ui-components";
 
@@ -36,7 +36,7 @@ export const CreateDesignModal: FunctionComponent<CreateDesignModalProps> = ({ i
     const [templates, setTemplates] = useState<Template[]>();
     const [template, setTemplate] = useState<Template>();
 
-    const templatesSvc: UseTemplatesService = useTemplatesService();
+    const templatesSvc: TemplatesService = useTemplatesService();
 
     // Called when the user clicks the Create button in the modal
     const doCreate = (): void => {

ui/ui-app/src/app/pages/components/home/DesignsPanel.tsx

@@ -18,8 +18,8 @@ import {
     RenameDesign
 } from "@models/designs";
 import { DesignsService, useDesignsService } from "@services/useDesignsService.ts";
-import { UseDownloadService, useDownloadService } from "@services/useDownloadService.ts";
-import { UseAlertsService, useAlertsService } from "@services/useAlertsService.tsx";
+import { DownloadService, useDownloadService } from "@services/useDownloadService.ts";
+import { AlertsService, useAlertsService } from "@services/useAlertsService.tsx";
 import { contentTypeForDesign, convertToValidFilename, fileExtensionForDesign } from "@utils/content.utils.ts";
 import { ListWithToolbar } from "@apicurio/common-ui-components";
 import { AppNavigationService, useAppNavigation } from "@services/useAppNavigation.ts";
@@ -56,9 +56,9 @@ export const DesignsPanel: FunctionComponent<DesignsPanelProps> = ({ selectedDes
     const [ isRenameModalOpen, setRenameModalOpen ] = useState(false);
 
     const designsSvc: DesignsService = useDesignsService();
-    const downloadSvc: UseDownloadService = useDownloadService();
+    const downloadSvc: DownloadService = useDownloadService();
     const nav: AppNavigationService = useAppNavigation();
-    const alerts: UseAlertsService = useAlertsService();
+    const alerts: AlertsService = useAlertsService();
 
     const doRefresh = (): void => {
         setRefresh(refresh + 1);

ui/ui-app/src/app/pages/components/home/UrlUpload.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useState } from "react";
 import "./UrlUpload.css";
 import { Button, Spinner, TextArea, TextInput } from "@patternfly/react-core";
-import { UseUrlService, useUrlService } from "@services/useUrlService.ts";
+import { UrlService, useUrlService } from "@services/useUrlService.ts";
 import { If, IfNotLoading } from "@apicurio/common-ui-components";
 
 /**
@@ -24,7 +24,7 @@ export const UrlUpload: FunctionComponent<UrlUploadProps> = (props: UrlUploadPro
     const [isLoading, setLoading] = useState<boolean>(false);
     const [downloadError, setDownloadError] = useState<string>();
 
-    const urlService: UseUrlService = useUrlService();
+    const urlService: UrlService = useUrlService();
 
     const onTextInputChange = (_event: any, value: string): void => {
         setUrl(value);

ui/ui-app/src/editors/AsyncApiEditor.tsx

@@ -2,8 +2,8 @@ import React, { RefObject, useEffect } from "react";
 import "./AsyncApiEditor.css";
 import { Editor as DesignEditor, EditorProps } from "./editor-types";
 import { ContentTypes } from "@models/designs";
-import { EditorConfig, useEditorConfig } from "./EditorConfigContext.ts";
 import { parseJson, parseYaml, toJsonString, toYamlString } from "@utils/content.utils.ts";
+import { ApiDesignerConfig, useApiDesignerConfig } from "@services/useApiDesignerConfig.ts";
 
 
 export type AsyncApiEditorProps = {
@@ -18,7 +18,9 @@ export type AsyncApiEditorProps = {
  */
 export const AsyncApiEditor: DesignEditor = ({ content, onChange, className }: AsyncApiEditorProps) => {
     const ref: RefObject<any> = React.createRef();
-    const cfg: EditorConfig = useEditorConfig();
+    const config: ApiDesignerConfig = useApiDesignerConfig();
+
+    const editorsUrl: string = config.components.editors.url;
 
     // TODO we have a lot of common functionality between the asyncapi and openapi editors.  Need to share!
     useEffect(() => {
@@ -49,7 +51,7 @@ export const AsyncApiEditor: DesignEditor = ({ content, onChange, className }: A
     });
 
     const editorAppUrl = (): string => {
-        return cfg.asyncApiEditorUrl;
+        return editorsUrl;
     };
 
     const onEditorLoaded = (): void => {

ui/ui-app/src/editors/OpenApiEditor.tsx

@@ -1,9 +1,9 @@
 import React, { RefObject, useEffect } from "react";
 import { Editor as DesignEditor, EditorProps } from "./editor-types";
 import "./OpenApiEditor.css";
-import { EditorConfig, useEditorConfig } from "./EditorConfigContext.ts";
 import { ContentTypes } from "@models/designs";
 import { parseJson, parseYaml, toJsonString, toYamlString } from "@utils/content.utils.ts";
+import { ApiDesignerConfig, useApiDesignerConfig } from "@services/useApiDesignerConfig.ts";
 
 
 export type OpenApiEditorProps = {
@@ -18,10 +18,12 @@ export type OpenApiEditorProps = {
  */
 export const OpenApiEditor: DesignEditor = ({ content, onChange, className }: OpenApiEditorProps) => {
     const ref: RefObject<any> = React.createRef();
-    const cfg: EditorConfig = useEditorConfig();
+    const config: ApiDesignerConfig = useApiDesignerConfig();
+
+    const editorsUrl: string = config.components.editors.url;
 
     useEffect(() => {
-        console.info("[OpenApiEditor] URL location of ads-editors: ", cfg.openApiEditorUrl);
+        console.info("[OpenApiEditor] URL location of editors: ", editorsUrl);
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
 
@@ -50,7 +52,7 @@ export const OpenApiEditor: DesignEditor = ({ content, onChange, className }: Op
     });
 
     const editorAppUrl = (): string => {
-        return cfg.openApiEditorUrl;
+        return editorsUrl;
     };
 
     const onEditorLoaded = (): void => {

ui/ui-app/src/editors/index.ts

@@ -1,6 +1,5 @@
 export * from "./AsyncApiEditor";
 export * from "./editor-types";
-export * from "./EditorConfigContext.ts";
 export * from "./OpenApiEditor";
 export * from "./ProtoEditor";
 export * from "./TextEditor";

ui/ui-app/src/services/useAlertsService.tsx

@@ -1,7 +1,7 @@
 import { Design, RenameDesign } from "@models/designs";
 
 
-export interface UseAlertsService {
+export interface AlertsService {
     designDeleted(design: Design): void;
     designDeleteFailed(design: Design, error: any): void;
     designSaved(design: Design): void;
@@ -12,9 +12,7 @@ export interface UseAlertsService {
 /**
  * React hook to get the Alerts service.
  */
-export const useAlertsService: () => UseAlertsService = (): UseAlertsService => {
-    // const serviceConfig: ServiceConfig = useServiceConfig();
-
+export const useAlertsService: () => AlertsService = (): AlertsService => {
     return {
         designDeleted(design: Design): void {
             console.info(design);

ui/ui-app/src/services/useDownloadService.ts

@@ -34,15 +34,15 @@ async function downloadToFS(content: string, contentType: string, filename: stri
 /**
  * The Download Service interface.
  */
-export interface UseDownloadService {
+export interface DownloadService {
     downloadToFS(content: string, contentType: string, filename: string): Promise<void>;
 }
 
 
 /**
  * React hook to get the Download service.
  */
-export const useDownloadService: () => UseDownloadService = (): UseDownloadService => {
+export const useDownloadService: () => DownloadService = (): DownloadService => {
     return {
         downloadToFS
     };

ui/ui-app/src/services/useLocalStorageService.ts

@@ -25,7 +25,7 @@ function clearConfigProperty(propertyName: string): void {
 /**
  * The Local Storage Service interface.
  */
-export interface UseLocalStorageService {
+export interface LocalStorageService {
     setConfigProperty(propertyName: string, propertyValue: string | object): void;
     getConfigProperty(propertyName: string, defaultValue: string | object | undefined): string | object | undefined;
     clearConfigProperty(propertyName: string): void;
@@ -35,7 +35,7 @@ export interface UseLocalStorageService {
 /**
  * React hook to get the LocalStorage service.
  */
-export const useLocalStorageService: () => UseLocalStorageService = (): UseLocalStorageService => {
+export const useLocalStorageService: () => LocalStorageService = (): LocalStorageService => {
     return {
         setConfigProperty,
         getConfigProperty,

ui/ui-app/src/services/useTemplatesService.ts

@@ -37,15 +37,15 @@ async function getTemplatesFor(type: string, version?: string): Promise<Template
 /**
  * The Templates Service interface.
  */
-export interface UseTemplatesService {
+export interface TemplatesService {
     getTemplatesFor(type: string, version?: string): Promise<Template[]>;
 }
 
 
 /**
  * React hook to get the Templates service.
  */
-export const useTemplatesService: () => UseTemplatesService = (): UseTemplatesService => {
+export const useTemplatesService: () => TemplatesService = (): TemplatesService => {
     return {
         getTemplatesFor
     };

ui/ui-app/src/services/useUrlService.ts

@@ -30,15 +30,15 @@ async function fetchUrlContent(url: string): Promise<string> {
 /**
  * The URL Service interface.
  */
-export interface UseUrlService {
+export interface UrlService {
     fetchUrlContent(url: string): Promise<string>;
 }
 
 
 /**
  * React hook to get the URL service.
  */
-export const useUrlService: () => UseUrlService = (): UseUrlService => {
+export const useUrlService: () => UrlService = (): UrlService => {
     return {
         fetchUrlContent
     };