API Registry - create/edit endpoint modal

DSL/Liquibase/changelog/20260428120000_add-description-to-endpoints.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<databaseChangeLog
+    xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
+    http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.8.xsd">
+
+    <changeSet id="20260428120000" author="ruwiniRathnamalala">
+        <sqlFile path="changelog/migrations/20260428120000_add-description-to-endpoints.sql" />
+        <rollback>
+            <sqlFile path="changelog/migrations/rollback/20260428120000_add-description-to-endpoints_rollback.sql" />
+        </rollback>
+    </changeSet>
+
+</databaseChangeLog>

DSL/Liquibase/changelog/migrations/20260428120000_add-description-to-endpoints.sql

@@ -0,0 +1,4 @@
+-- liquibase formatted sql
+
+ALTER TABLE endpoints
+    ADD COLUMN description TEXT NOT NULL DEFAULT '';

DSL/Liquibase/changelog/migrations/rollback/20260428120000_add-description-to-endpoints_rollback.sql

@@ -0,0 +1,5 @@
+-- liquibase formatted sql
+-- rollback
+
+ALTER TABLE endpoints
+    DROP COLUMN description;

DSL/Resql/services/POST/endpoints/create_endpoint.sql

@@ -4,13 +4,15 @@ INSERT INTO endpoints (
     name,
     type,
     is_common,
-    definitions
+    definitions,
+    description
 )
 VALUES (
     :endpointId::uuid,
     NULLIF(:serviceId, '')::uuid,
     :name,
     :type::endpoint_type,
     :isCommon,
-    :definitions::jsonb
+    :definitions::jsonb,
+    :description
 ); 

DSL/Resql/services/POST/endpoints/get_all_endpoints.sql

@@ -0,0 +1,28 @@
+WITH UserPreferences AS (
+  SELECT endpoints
+  FROM user_step_preference
+  WHERE user_id_code = :user_id_code
+  ORDER BY created_at DESC
+  LIMIT 1
+)
+SELECT
+  e.endpoint_id,
+  e.name,
+  e.description,
+  e.type,
+  e.is_common,
+  e.definitions,
+  e.response_schema
+FROM endpoints AS e
+CROSS JOIN UserPreferences AS up
+WHERE e.deleted IS FALSE
+  AND (:search IS NULL OR :search = '' OR LOWER(e.name) LIKE LOWER('%' || :search || '%'))
+ORDER BY 
+  CASE 
+    WHEN up.endpoints IS NULL OR array_length(up.endpoints, 1) = 0 THEN 1
+    ELSE array_position(up.endpoints, e.endpoint_id)
+  END,
+  CASE 
+    WHEN up.endpoints IS NULL OR array_length(up.endpoints, 1) = 0 THEN e.id
+    ELSE NULL
+  END DESC;

DSL/Resql/services/POST/endpoints/get_common_endpoints.sql

@@ -2,6 +2,7 @@ SELECT
   endpoint_id,
   service_id,
   name,
+  description,
   type,
   is_common,
   definitions,

DSL/Resql/services/POST/endpoints/get_endpoints_by_service_id.sql

@@ -8,6 +8,7 @@ WITH UserPreferences AS (
 SELECT
   e.endpoint_id,
   e.name,
+  e.description,
   e.type,
   e.is_common,
   e.definitions

DSL/Resql/services/POST/endpoints/update_endpoint.sql

@@ -1,8 +1,9 @@
 UPDATE endpoints
 SET
-    service_id = :serviceId::uuid,
+    service_id = NULLIF(:serviceId, '')::uuid,
     name = :name,
     type = :type::endpoint_type,
     is_common = :isCommon,
-    definitions = :definitions::jsonb
+    definitions = :definitions::jsonb,
+    description = :description
 WHERE endpoint_id = :endpointId::uuid;

DSL/Ruuter/services/POST/service-by-id.yml

@@ -55,9 +55,8 @@ get_service_by_id:
 get_endpoints_by_service_id:
   call: http.post
   args:
-    url: "[#SERVICE_RESQL]/endpoints/get_endpoints_by_service_id"
+    url: "[#SERVICE_RESQL]/endpoints/get_all_endpoints"
     body:
-      id: ${id}
       user_id_code: ${idCode}
       search: ${search}
   result: endpoints_results

DSL/Ruuter/services/POST/services/create-endpoint.yml

@@ -26,6 +26,9 @@ declaration:
       - field: definitions
         type: object
         description: "Endpoint definitions"
+      - field: description
+        type: string
+        description: "Endpoint description"
 
 create_endpoint:
   call: http.post
@@ -38,6 +41,7 @@ create_endpoint:
       isCommon: ${incoming.body.isCommon}
       serviceId: ${incoming.body.serviceId ?? ''}
       definitions: ${incoming.body.definitions}
+      description: ${incoming.body.description ?? ''}
   result: res
 
 return_ok:

DSL/Ruuter/services/POST/services/update-endpoint.yml

@@ -23,6 +23,9 @@ declaration:
       - field: definitions
         type: object
         description: "Endpoint definitions"
+      - field: description
+        type: string
+        description: "Endpoint description"
     params:
       - field: id
         type: string
@@ -48,6 +51,7 @@ update_endpoint:
       isCommon: ${incoming.body.isCommon}
       serviceId: ${incoming.body.serviceId ?? ''}
       definitions: ${incoming.body.definitions}
+      description: ${incoming.body.description ?? ''}
   result: res
 
 return_ok:

GUI/src/components/ApiEndpoint/index.tsx

@@ -1,17 +1,15 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import ApiEndpointCard from 'components/ApiEndpointCard';
 import Box from 'components/Box';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import Modal from 'components/Modal';
 import Track from 'components/Track';
-import { FC, useMemo, useState } from 'react';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdDeleteOutline, MdDragIndicator, MdOutlineEdit } from 'react-icons/md';
 import { Link } from 'react-router-dom';
 import { deleteEndpoint } from 'resources/api-constants';
-import { saveEndpoints } from 'services/service-builder';
 import useServiceStore from 'store/new-services.store';
 import useToastStore from 'store/toasts.store';
 import { Step, StepType } from 'types';
@@ -20,6 +18,7 @@ import { removeTrailingUnderscores } from 'utils/string-util';
 
 import styles from './ApiEndpoint.module.scss';
 import api from '../../services/api-dev';
+import AddEndpointModal from '../Flow/EdgeTypes/AddEndpointModal';
 
 interface RelatedService {
   serviceId: string;
@@ -45,18 +44,11 @@ const ApiEndpoint: FC<ApiEndpointProps> = ({ step, onClick }) => {
   const [relatedServices, setRelatedServices] = useState<RelatedService[]>([]);
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [isEditing, setIsEditing] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const [endpointNameExists, setEndpointNameExists] = useState<boolean>(false);
   const serviceName = useServiceStore((state) => removeTrailingUnderscores(state.serviceNameDashed()));
   const nodes = useServiceStore((state) => state.nodes);
-  const [endpointName, setEndpointName] = useState<string>(step.data?.name ?? '');
-  const [isCommonEndpoint, setIsCommonEndpoint] = useState<boolean>(step.data?.isCommon ?? false);
-  const originalEndpoint = useMemo(() => {
-    return step.data ? (JSON.parse(JSON.stringify(step.data)) as EndpointData) : undefined;
-  }, [step.data]);
 
-  const { deleteEndpoint: deleteEndpointFromStore, setJsonRequestVisible, setJsonRequestContent } = useServiceStore();
+  const { deleteEndpoint: deleteEndpointFromStore } = useServiceStore();
 
   const deleteSelectedEndpoint = async (endpoint: EndpointData | undefined) => {
     if (!endpoint) {
@@ -120,67 +112,12 @@ const ApiEndpoint: FC<ApiEndpointProps> = ({ step, onClick }) => {
       )}
 
       {showEditModal && step?.data && (
-        <Modal
-          title={t('newService.editEndpoint')}
-          onClose={() => {
-            useServiceStore.getState().editEndpoint(originalEndpoint);
-            setShowEditModal(false);
-            setJsonRequestVisible(false);
-            setJsonRequestContent(null);
-          }}
-        >
-          <Track isMultiline gap={16} direction="vertical" align="stretch">
-            <ApiEndpointCard
-              endpoint={step?.data}
-              onNameExists={setEndpointNameExists}
-              onNameChange={setEndpointName}
-              onCommonChange={setIsCommonEndpoint}
-            />
-            <Track justify="end" gap={16}>
-              <Button
-                appearance="secondary"
-                onClick={(e) => {
-                  useServiceStore.getState().editEndpoint(originalEndpoint);
-                  setShowEditModal(false);
-                  setJsonRequestVisible(false);
-                  setJsonRequestContent(null);
-                  e.stopPropagation();
-                }}
-              >
-                {t('overview.cancel')}
-              </Button>
-              <Button
-                appearance={isEditing ? 'loading' : 'primary'}
-                disabled={endpointName === '' || endpointNameExists}
-                onClick={(e) => {
-                  const stepData = step.data!;
-                  stepData.name = endpointName;
-                  stepData.isCommon = isCommonEndpoint;
-                  setIsEditing(true);
-                  void saveEndpoints(
-                    [stepData],
-                    () => {
-                      setShowEditModal(false);
-                      setJsonRequestVisible(false);
-                      setJsonRequestContent(null);
-                      e.stopPropagation();
-                      useServiceStore.getState().editEndpoint(stepData);
-                      setIsEditing(false);
-                      useToastStore.getState().success({ title: t('serviceFlow.apiElements.editSuccess') });
-                    },
-                    (error) => {
-                      console.error(`Error Editing API endpoint: ${error}`);
-                      useToastStore.getState().error({ title: t('serviceFlow.apiElements.editError') });
-                      setIsEditing(false);
-                    },
-                  );
-                }}
-              >
-                {t('global.edit')}
-              </Button>
-            </Track>
-          </Track>
-        </Modal>
+        <AddEndpointModal
+          mode="edit"
+          context="service"
+          initialEndpoint={step.data}
+          onClose={() => setShowEditModal(false)}
+        />
       )}
 
       {relatedServices.length > 0 && (