Merge pull request #1 from lordrip/chore/suggestions-to-rest

chore(Rest): Suggestion to Rest work

package.json

@@ -40,8 +40,5 @@
     "husky": "^9.0.0",
     "lint-staged": "^15.0.0"
   },
-  "packageManager": "[email protected]",
-  "dependencies": {
-    "fs": "^0.0.1-security"
-  }
+  "packageManager": "[email protected]"
 }

packages/ui/package.json

@@ -115,6 +115,7 @@
     "@types/lodash.memoize": "^4.1.9",
     "@types/lodash.set": "^4.3.7",
     "@types/node": "^20.0.0",
+    "@types/openapi-v3": "^3.0.0",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
     "@vitejs/plugin-react": "^4.0.3",

packages/ui/src/components/OpenApi/OpenApiForm.tsx

@@ -1,32 +1,40 @@
-import { useNavigate } from 'react-router-dom';
-import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
+import { Rest, RouteDefinition } from '@kaoto/camel-catalog/types';
+import { CodeEditor, CodeEditorControl, EditorDidMount, Language } from '@patternfly/react-code-editor';
 import {
-  HelperText,
-  HelperTextItem,
   Button,
   Card,
   CardBody,
   CardFooter,
   CardTitle,
   Form,
   FormGroup,
+  HelperText,
+  HelperTextItem,
   InputGroup,
   Popover,
   TextInput,
 } from '@patternfly/react-core';
-import { FunctionComponent, useCallback, useContext, useState, useEffect } from 'react';
-import styles from '@patternfly/react-styles/css/components/Form/form';
-import { BaseVisualCamelEntity, CamelRouteVisualEntity } from '../../models';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import { EntitiesContext } from '../../providers/entities.provider';
-import { OpenApi } from '../../models/camel/openapi-resource';
-import { RouteDefinition, RestDefinition } from '@kaoto/camel-catalog/types';
-import { Rest } from '@kaoto/camel-catalog/types';
-import { CamelRestVisualEntity } from '../../models/visualization/flows/camel-rest-visual-entity';
-import { Links } from '../../router/links.models';
+import styles from '@patternfly/react-styles/css/components/Form/form';
+import { OpenApi, OpenApiOperation, OpenApiPath } from 'openapi-v3';
+import { FunctionComponent, useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { parse } from 'yaml';
+import { BaseVisualCamelEntity, CamelRouteVisualEntity } from '../../models';
 import { EntityType } from '../../models/camel/entities';
+import { SourceSchemaType } from '../../models/camel/source-schema-type';
+import { CamelRestVisualEntity } from '../../models/visualization/flows/camel-rest-visual-entity';
+import { FlowTemplateService } from '../../models/visualization/flows/support/flow-templates-service';
+import { EntitiesContext } from '../../providers/entities.provider';
+import { Links } from '../../router/links.models';
+import { isDefined } from '../../utils';
+
+type OpenApiPathMethods = {
+  [K in keyof Required<OpenApiPath>]: Required<OpenApiPath>[K] extends OpenApiOperation ? K : never;
+}[keyof OpenApiPath];
+
+const VALID_METHODS: OpenApiPathMethods[] = ['get', 'post', 'put', 'delete', 'head', 'patch'];
 
 export const OpenApiForm: FunctionComponent = () => {
   const [openApiError, setOpenApiError] = useState('');
@@ -37,11 +45,11 @@ export const OpenApiForm: FunctionComponent = () => {
   const entitiesContext = useContext(EntitiesContext);
   const navigate = useNavigate();
 
-  const onEditorDidMount = (editor, monaco) => {
+  const onEditorDidMount: EditorDidMount = useCallback((editor, monaco) => {
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-  };
+  }, []);
 
   const updateDownloadUrl = (url: string) => {
     setDownloadUrl(url);
@@ -108,10 +116,13 @@ export const OpenApiForm: FunctionComponent = () => {
 
     const openApi: OpenApi = JSON.parse(spec);
 
-    for (const path in openApi.paths) {
-      for (const method in openApi.paths[path]) {
-        const operationId = openApi.paths[path][method]['operationId'];
+    Object.values(openApi.paths ?? {}).forEach((path) => {
+      VALID_METHODS.forEach((method) => {
+        if (!isDefined(path[method])) {
+          return;
+        }
 
+        const operationId = path[method].operationId;
         const route: RouteDefinition = {
           from: {
             uri: 'direct:' + operationId,
@@ -133,27 +144,24 @@ export const OpenApiForm: FunctionComponent = () => {
           const entity = new CamelRouteVisualEntity(route);
           entitiesContext?.camelResource.addExistingEntity(entity);
         }
-      }
-    }
-
-    const rest: Rest = {
-      openApi: {
-        specification: downloadUrl,
-      },
-    };
+      });
+    });
 
+    const rest: Rest = FlowTemplateService.getFlowTemplate(SourceSchemaType.Rest);
+    rest.openApi = rest.openApi ?? { specification: '' };
+    rest.openApi.specification = downloadUrl;
     let restExists: boolean = false;
 
     entitiesContext?.camelResource.getVisualEntities().forEach((entity: BaseVisualCamelEntity) => {
       if (entity.type === EntityType.Rest) {
-        if ((entity as CamelRestVisualEntity).rest.rest?.openApi?.specification === downloadUrl) {
-            restExists = true;
+        if ((entity as CamelRestVisualEntity).restDef.rest?.openApi?.specification === downloadUrl) {
+          restExists = true;
         }
       }
     });
 
     if (!restExists) {
-      const entity = new CamelRestVisualEntity(rest);
+      const entity = new CamelRestVisualEntity({ rest });
       entitiesContext?.camelResource.addExistingEntity(entity);
     }
 

packages/ui/src/models/visualization/flows/camel-rest-visual-entity.ts

@@ -3,7 +3,7 @@ import Ajv, { ValidateFunction } from 'ajv';
 import addFormats from 'ajv-formats';
 import { getCamelRandomId } from '../../../camel-utils/camel-random-id';
 import { SchemaService } from '../../../components/Form/schema.service';
-import { NodeIconResolver, NodeIconType, isDefined, setValue } from '../../../utils';
+import { NodeIconResolver, NodeIconType, isDefined } from '../../../utils';
 import { EntityType } from '../../camel/entities/base-entity';
 import { CatalogKind } from '../../catalog-kind';
 import {
@@ -13,17 +13,26 @@ import {
   NodeInteraction,
   VisualComponentSchema,
 } from '../base-visual-entity';
+import { AbstractCamelVisualEntity } from './abstract-camel-visual-entity';
 import { CamelCatalogService } from './camel-catalog.service';
 import { NodeMapperService } from './nodes/node-mapper.service';
-import { AbstractCamelVisualEntity } from './abstract-camel-visual-entity';
 
 export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Rest }> implements BaseVisualCamelEntity {
   id: string;
   readonly type = EntityType.Rest;
   private schemaValidator: ValidateFunction<Rest> | undefined;
-
-  constructor(public rest: { rest: Rest }) {
-    super(rest);
+  private readonly OMIT_FORM_FIELDS = [
+    ...SchemaService.OMIT_FORM_FIELDS,
+    'get',
+    'post',
+    'put',
+    'delete',
+    'head',
+    'patch',
+  ];
+
+  constructor(public restDef: { rest: Rest }) {
+    super(restDef);
     const id = getCamelRandomId('rest');
     this.id = id;
   }
@@ -66,31 +75,21 @@ export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Res
     const schema = CamelCatalogService.getComponent(CatalogKind.Entity, 'rest');
 
     return {
-      definition: Object.assign({}, this.rest),
+      definition: Object.assign({}, this.restDef.rest),
       schema: schema?.propertiesSchema || {},
     };
   }
 
   getOmitFormFields(): string[] {
-    return SchemaService.OMIT_FORM_FIELDS;
-  }
-
-  updateModel(path: string | undefined, value: unknown): void {
-    if (!path) return;
-
-    setValue(this.rest, path, value);
-
-    if (!isDefined(this.rest)) {
-      this.rest = {rest: Rest};
-    }
+    return this.OMIT_FORM_FIELDS;
   }
 
   getNodeInteraction(): NodeInteraction {
     return {
       canHavePreviousStep: false,
       canHaveNextStep: false,
       canHaveChildren: false,
-      canHaveSpecialChildren: true,
+      canHaveSpecialChildren: false,
       canRemoveStep: false,
       canReplaceStep: false,
       canRemoveFlow: true,
@@ -106,7 +105,7 @@ export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Res
       this.schemaValidator = this.getValidatorFunction(componentVisualSchema);
     }
 
-    this.schemaValidator?.({ ...this.rest });
+    this.schemaValidator?.({ ...this.restDef });
 
     return this.schemaValidator?.errors?.map((error) => `'${error.instancePath}' ${error.message}`).join(',\n');
   }
@@ -115,7 +114,7 @@ export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Res
     const restGroupNode = NodeMapperService.getVizNode(
       'rest',
       { processorName: 'rest' as keyof ProcessorDefinition },
-      this.rest,
+      this.restDef,
     );
     restGroupNode.data.entity = this;
     restGroupNode.data.isGroup = true;
@@ -126,7 +125,7 @@ export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Res
   }
 
   toJSON(): { rest: Rest } {
-    return { rest: this.rest };
+    return { rest: this.restDef.rest };
   }
 
   private getValidatorFunction(componentVisualSchema: VisualComponentSchema): ValidateFunction<Rest> | undefined {
@@ -148,6 +147,6 @@ export class CamelRestVisualEntity extends AbstractCamelVisualEntity<{ rest: Res
   }
 
   protected getRootUri(): string | undefined {
-    return this.rest.rest;
+    return undefined;
   }
 }

packages/ui/src/models/visualization/flows/templates/rest.ts

@@ -2,6 +2,7 @@ import { getCamelRandomId } from '../../../../camel-utils/camel-random-id';
 
 export const restTemplate = () => {
   return `- rest:
+    id: ${getCamelRandomId('rest')}
     openApi:
       specification: petstore-v3.json`;
 };

packages/ui/src/multiplying-architecture/KaotoEditor.tsx

@@ -23,6 +23,7 @@ const SCHEMA_TABS: Record<SourceSchemaType, TabList[]> = {
   [SourceSchemaType.Integration]: [],
   [SourceSchemaType.KameletBinding]: [TabList.Design, TabList.Metadata, TabList.ErrorHandler],
   [SourceSchemaType.Pipe]: [TabList.Design, TabList.Metadata, TabList.ErrorHandler],
+  [SourceSchemaType.Rest]: [TabList.Design, TabList.Metadata],
 };
 
 export const KaotoEditor = () => {

yarn.lock

@@ -2925,6 +2925,7 @@ __metadata:
     "@types/lodash.memoize": "npm:^4.1.9"
     "@types/lodash.set": "npm:^4.3.7"
     "@types/node": "npm:^20.0.0"
+    "@types/openapi-v3": "npm:^3.0.0"
     "@types/react": "npm:^18.2.25"
     "@types/react-dom": "npm:^18.2.10"
     "@types/uuid": "npm:^10.0.0"
@@ -6071,6 +6072,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/openapi-v3@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@types/openapi-v3@npm:3.0.0"
+  checksum: 10/a793fb3edfa511bfd3f370ebcc813277cd5e7b886c60a45bbd9777c78620bd47cc651f38e22f952a97d91a8920af46917755a131a3907091c8df7e2e89b1617a
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.12
   resolution: "@types/prop-types@npm:15.7.12"
@@ -10449,13 +10457,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs@npm:^0.0.1-security":
-  version: 0.0.1-security
-  resolution: "fs@npm:0.0.1-security"
-  checksum: 10/53c6230e1faae9fa32c1df82c16a84b51b1243d20f3da2b64bd110bb472b73b9185169b703e008356e3cdc92d155088b617d9d39a63b5227a30b3621baad7f5d
-  languageName: node
-  linkType: hard
-
 "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -12772,7 +12773,6 @@ __metadata:
     "@lerna-lite/cli": "npm:^3.0.0"
     "@lerna-lite/publish": "npm:^3.0.0"
     "@lerna-lite/version": "npm:^3.0.0"
-    fs: "npm:^0.0.1-security"
     husky: "npm:^9.0.0"
     lint-staged: "npm:^15.0.0"
   languageName: unknown