feat(api): Allow configuring the API URL at runtime

src/api/apiService.ts

@@ -1,4 +1,4 @@
-import request from './request';
+import { RequestService } from './requestService';
 import { IIntegration, IStepProps } from '@kaoto/types';
 
 const apiVersion = '/v1';
@@ -10,7 +10,7 @@ const apiVersion = '/v1';
  */
 export async function fetchCapabilities(namespace?: string) {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/capabilities`,
       contentType: 'application/json',
       queryParams: {
@@ -26,7 +26,7 @@ export async function fetchCapabilities(namespace?: string) {
 
 export async function fetchDefaultNamespace() {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/capabilities/namespace`,
       contentType: 'application/json',
     });
@@ -54,7 +54,7 @@ export async function fetchCatalogSteps(
   cache?: RequestCache | undefined
 ) {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/steps`,
       cache,
       queryParams: {
@@ -76,7 +76,7 @@ export async function fetchCatalogSteps(
  */
 export async function fetchCompatibleDSLs(props: { namespace?: string; steps: IStepProps[] }) {
   try {
-    const resp = await request.post({
+    const resp = await RequestService.post({
       endpoint: `${apiVersion}/integrations/dsls`,
       contentType: 'application/json',
       body: props.steps,
@@ -98,7 +98,7 @@ export async function fetchCompatibleDSLs(props: { namespace?: string; steps: IS
  */
 export async function fetchDeployment(name: string, namespace?: string): Promise<string | unknown> {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/deployment/${name}`,
       contentType: 'application/json',
       queryParams: {
@@ -119,7 +119,7 @@ export async function fetchDeployment(name: string, namespace?: string): Promise
  */
 export async function fetchDeployments(cache?: RequestCache | undefined, namespace?: string) {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/deployments`,
       contentType: 'application/json',
       cache,
@@ -146,7 +146,7 @@ export async function fetchDeploymentLogs(
   lines?: number
 ): Promise<ReadableStream | unknown> {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/deployments/${name}/logs`,
       contentType: 'application/json',
       queryParams: {
@@ -177,7 +177,7 @@ export async function fetchIntegrationJson(
   namespace?: string
 ) {
   try {
-    const resp = await request.post({
+    const resp = await RequestService.post({
       endpoint: `${apiVersion}/integrations`,
       contentType: typeof data === 'string' ? 'text/yaml' : 'application/json',
       body: typeof data === 'string' ? data : { steps: data },
@@ -204,7 +204,7 @@ export async function fetchIntegrationJson(
  */
 export async function fetchIntegrationSourceCode(newIntegration: IIntegration, namespace?: string) {
   try {
-    const resp = await request.post({
+    const resp = await RequestService.post({
       endpoint: `${apiVersion}/integrations?dsl=${newIntegration.dsl}`,
       contentType: 'application/json',
       body: newIntegration,
@@ -221,7 +221,7 @@ export async function fetchIntegrationSourceCode(newIntegration: IIntegration, n
 
 export async function fetchStepDetails(id?: string, namespace?: string) {
   try {
-    const resp = await request.get({
+    const resp = await RequestService.get({
       endpoint: `${apiVersion}/steps/id/${id}`,
       queryParams: {
         namespace: namespace ?? 'default',
@@ -245,7 +245,7 @@ export async function fetchStepDetails(id?: string, namespace?: string) {
  */
 export async function fetchViews(data: IStepProps[], namespace?: string) {
   try {
-    const resp = await request.post({
+    const resp = await RequestService.post({
       endpoint: `${apiVersion}/view-definitions`,
       contentType: 'application/json',
       body: data,
@@ -270,7 +270,7 @@ export async function fetchViews(data: IStepProps[], namespace?: string) {
 export async function startDeployment(integrationSource: string, name: string, namespace?: string) {
   try {
     const params = namespace ? `?namespace=${namespace}` : '';
-    const resp = await request.post({
+    const resp = await RequestService.post({
       endpoint: `${apiVersion}/deployments/${name.toLowerCase()}${params}`,
       contentType: 'text/yaml',
       body: integrationSource,
@@ -289,7 +289,7 @@ export async function startDeployment(integrationSource: string, name: string, n
  */
 export async function stopDeployment(deploymentName: string, namespace?: string) {
   try {
-    const resp = await request.delete({
+    const resp = await RequestService.delete({
       endpoint: `${apiVersion}/deployments/${deploymentName.toLowerCase()}`,
       contentType: 'application/json',
       queryParams: { namespace: namespace ?? 'default' },

src/api/index.ts

@@ -1,2 +1,2 @@
 export * from './apiService';
-export * from './request';
+export * from './requestService';

src/api/requestService.ts

@@ -0,0 +1,106 @@
+export type FetchMethod = 'GET' | 'PATCH' | 'PUT' | 'POST' | 'DELETE';
+
+export interface IFetchHeaders {
+  [s: string]: string;
+}
+
+export interface IFetch {
+  endpoint: string;
+  method?: FetchMethod;
+  headers?: IFetchHeaders;
+  body?: any;
+
+  /**
+   * Default: 'application/json'
+   */
+  accept?: string;
+
+  cache?: RequestCache;
+
+  /**
+   * Default: 'application/json'
+   */
+  contentType?: string;
+
+  // Object of key/value string for passing query parameters
+  queryParams?: {
+    [name: string]: string | undefined | null | number | boolean;
+  };
+
+  /**
+   * Whether to stringify the data to JSON, overrides the content type
+   */
+  stringifyBody?: boolean;
+}
+
+export class RequestService {
+  private static apiURL = process.env.KAOTO_API;
+
+  static setApiURL(apiUrl: string): void {
+    this.apiURL = apiUrl;
+  }
+
+  static async get(options: IFetch) {
+    return this.request({ method: 'GET', ...options });
+  }
+
+  static async post(options: IFetch) {
+    return this.request({ method: 'POST', ...options });
+  }
+
+  static async patch(options: IFetch) {
+    return this.request({ method: 'PATCH', ...options });
+  }
+
+  static async delete(options: IFetch) {
+    return this.request({ method: 'DELETE', ...options });
+  }
+
+  private static async request({
+    endpoint,
+    method,
+    headers = {},
+    body,
+    cache,
+    contentType,
+    accept,
+    queryParams,
+    stringifyBody = true,
+  }: IFetch): Promise<Response> {
+    headers = { ...headers };
+
+    let options: RequestInit = {
+      method,
+      body: contentType?.includes('application/json') && stringifyBody ? JSON.stringify(body) : body,
+      cache: cache ?? 'default',
+      /**
+       * TODO: Omit for now, reassess for prod
+       */
+      credentials: 'omit',
+      headers: {
+        Accept: accept ?? 'application/json,text/plain,text/yaml,*/*',
+        'Content-Type': contentType ?? 'application/json',
+        ...headers,
+      },
+      mode: 'cors',
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer',
+    };
+
+    // if params exists and method is GET, add query string to url
+    // otherwise, add query params as a "body" property to the options object
+    if (queryParams && method === 'GET') {
+      endpoint += '?' + this.objectToQueryString(queryParams);
+    }
+
+    return fetch(`${this.apiURL}${endpoint}`, options);
+  };
+
+  // converts an object into a query string
+  // ex: {type : 'Kamelet'} -> &type=Kamelet
+  private static objectToQueryString(obj: { [x: string]: string | undefined | null | number | boolean }) {
+    return Object.keys(obj)
+      .map((key) => key + '=' + obj[key])
+      .join('&');
+  }
+}

src/kogito-integration/KaotoEditorFactory.ts

@@ -8,10 +8,13 @@ import {
 import { KaotoEditorView } from "./KaotoEditorView";
 
 export class KaotoEditorFactory implements EditorFactory<Editor, KogitoEditorChannelApi> {
+
+  constructor(private readonly apiUrl?: string) {}
+
   public createEditor(
     envelopeContext: KogitoEditorEnvelopeContextType<KogitoEditorChannelApi>,
     initArgs: EditorInitArgs
   ): Promise<Editor> {
-    return Promise.resolve(new KaotoEditorView(envelopeContext, initArgs));
+    return Promise.resolve(new KaotoEditorView(envelopeContext, initArgs, this.apiUrl));
   }
 }