ui: supported storedProcedure as edge in lineage (#13225)

* supported storedProcedure as edge in lineage

* fix unit test

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityInfoDrawer/EdgeInfoDrawer.component.tsx

@@ -19,6 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Node } from 'reactflow';
 import { getEntityName } from 'utils/EntityUtils';
+import { getEncodedFqn } from 'utils/StringsUtils';
 import { CSMode } from '../../../enums/codemirror.enum';
 import { getNameFromFQN } from '../../../utils/CommonUtils';
 import { getEntityLink } from '../../../utils/TableUtils';
@@ -83,11 +84,14 @@ const EdgeInfoDrawer = ({
         value: targetHandle ? getNameFromFQN(targetHandle) : undefined,
       },
       pipeline: {
-        key: t('label.pipeline'),
+        key: t('label.edge'),
         value: data?.pipeline ? getEntityName(data?.pipeline) : undefined,
         link:
           data?.pipeline &&
-          getEntityLink(data?.pipeline.type, data?.pipeline.fullyQualifiedName),
+          getEntityLink(
+            data?.pipeline.type,
+            getEncodedFqn(data?.pipeline.fullyQualifiedName)
+          ),
       },
       functionInfo: {
         key: t('label.function'),

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/AddPipeLineModal.test.tsx

@@ -17,10 +17,10 @@ import React from 'react';
 import AddPipeLineModal from './AddPipeLineModal';
 
 const mockProps = {
-  showAddPipelineModal: true,
-  pipelineSearchValue: '',
-  selectedPipelineId: undefined,
-  pipelineOptions: [
+  showAddEdgeModal: true,
+  edgeSearchValue: '',
+  selectedEdgeId: undefined,
+  edgeOptions: [
     {
       displayName: 'Pipeline 1',
       name: 'Pipeline 1',
@@ -40,20 +40,20 @@ describe('Test CustomEdge Component', () => {
   it('AddPipeLineModal should render properly', async () => {
     render(<AddPipeLineModal {...mockProps} />);
 
-    const pipelineModal = await screen.findByTestId('add-pipeline-modal');
+    const edgeModal = await screen.findByTestId('add-edge-modal');
     const fieldSelect = await screen.findByTestId('field-select');
     const removeEdge = await screen.findByTestId('remove-edge-button');
     const saveButton = await screen.findByTestId('save-button');
 
-    expect(pipelineModal).toBeInTheDocument();
+    expect(edgeModal).toBeInTheDocument();
     expect(fieldSelect).toBeInTheDocument();
     expect(removeEdge).toBeInTheDocument();
     expect(saveButton).toBeInTheDocument();
   });
 
   it('CTA should work properly', async () => {
     render(
-      <AddPipeLineModal {...mockProps} selectedPipelineId="test-pipeline-1" />
+      <AddPipeLineModal {...mockProps} selectedEdgeId="test-pipeline-1" />
     );
 
     const removeEdge = await screen.findByTestId('remove-edge-button');

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/AddPipeLineModal.tsx

@@ -19,10 +19,10 @@ import React from 'react';
 import { getEntityName } from 'utils/EntityUtils';
 
 interface AddPipeLineModalType {
-  showAddPipelineModal: boolean;
-  pipelineSearchValue: string;
-  selectedPipelineId: string | undefined;
-  pipelineOptions: EntityReference[];
+  showAddEdgeModal: boolean;
+  edgeSearchValue: string;
+  selectedEdgeId: string | undefined;
+  edgeOptions: EntityReference[];
   onModalCancel: () => void;
   onSave: () => void;
   onClear: () => void;
@@ -32,10 +32,10 @@ interface AddPipeLineModalType {
 }
 
 const AddPipeLineModal = ({
-  showAddPipelineModal,
-  pipelineOptions,
-  pipelineSearchValue,
-  selectedPipelineId,
+  showAddEdgeModal,
+  edgeOptions,
+  edgeSearchValue,
+  selectedEdgeId,
   onRemoveEdgeClick,
   onModalCancel,
   onSave,
@@ -46,7 +46,7 @@ const AddPipeLineModal = ({
   return (
     <Modal
       destroyOnClose
-      data-testid="add-pipeline-modal"
+      data-testid="add-edge-modal"
       footer={[
         <Button
           data-testid="remove-edge-button"
@@ -66,8 +66,10 @@ const AddPipeLineModal = ({
         </Button>,
       ]}
       maskClosable={false}
-      open={showAddPipelineModal}
-      title={isUndefined(selectedPipelineId) ? 'Add Pipeline' : 'Edit Pipeline'}
+      open={showAddEdgeModal}
+      title={t(`label.${isUndefined(selectedEdgeId) ? 'add' : 'edit'}-entity`, {
+        entity: t('label.edge'),
+      })}
       onCancel={onModalCancel}>
       <Select
         allowClear
@@ -77,14 +79,14 @@ const AddPipeLineModal = ({
         defaultActiveFirstOption={false}
         filterOption={false}
         notFoundContent={false}
-        options={pipelineOptions.map((option) => ({
+        options={edgeOptions.map((option) => ({
           label: getEntityName(option),
           value: option.id,
         }))}
-        placeholder="Search to Select Pipeline"
-        searchValue={pipelineSearchValue}
+        placeholder={t('message.search-for-edge')}
+        searchValue={edgeSearchValue}
         showArrow={false}
-        value={selectedPipelineId}
+        value={selectedEdgeId}
         onClear={onClear}
         onSearch={onSearch}
         onSelect={onSelect}

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/EntityLineage.component.tsx

@@ -112,8 +112,8 @@ import {
   getEntityBreadcrumbs,
   getEntityLineage,
   getEntityName,
+  getEntityReferenceFromEntity,
 } from 'utils/EntityUtils';
-import { getEntityReferenceFromPipeline } from 'utils/PipelineServiceUtils';
 import SVGIcons from 'utils/SvgUtils';
 import { showErrorToast } from 'utils/ToastUtils';
 import EdgeInfoDrawer from '../EntityInfoDrawer/EdgeInfoDrawer.component';
@@ -179,13 +179,10 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
     status: ElementLoadingState;
   }>(ELEMENT_DELETE_STATE);
   const [zoomValue, setZoomValue] = useState(ZOOM_VALUE);
-  const [showAddPipelineModal, setShowAddPipelineModal] =
-    useState<boolean>(false);
-  const [pipelineSearchValue, setPipelineSearchValue] = useState<string>('');
-  const [pipelineOptions, setPipelineOptions] = useState<EntityReference[]>([]);
-  const [selectedPipelineId, setSelectedPipelineId] = useState<
-    string | undefined
-  >();
+  const [showAddEdgeModal, setShowAddEdgeModal] = useState<boolean>(false);
+  const [edgeSearchValue, setEdgeSearchValue] = useState<string>('');
+  const [edgeOptions, setEdgeOptions] = useState<EntityReference[]>([]);
+  const [selectedEdgeId, setSelectedEdgeId] = useState<string | undefined>();
   const [isTracingActive, setIsTracingActive] = useState(false);
   const [selectedEdgeInfo, setSelectedEdgeInfo] = useState<Edge>();
 
@@ -598,11 +595,11 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
     evt: React.MouseEvent<HTMLButtonElement>,
     data: CustomEdgeData
   ) => {
-    setShowAddPipelineModal(true);
+    setShowAddEdgeModal(true);
     evt.stopPropagation();
     if (!isUndefined(data.pipeline)) {
-      setSelectedPipelineId(data.pipeline.id);
-      setPipelineOptions([data.pipeline]);
+      setSelectedEdgeId(data.pipeline.id);
+      setEdgeOptions([data.pipeline]);
     }
 
     setSelectedEdge({
@@ -614,7 +611,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
   };
 
   const handleRemoveEdgeClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
-    setShowAddPipelineModal(false);
+    setShowAddEdgeModal(false);
     if (selectedEdge.data) {
       onEdgeClick(evt, selectedEdge.data);
     }
@@ -999,20 +996,20 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
     [selectedNode, updatedLineageData, selectedEntity]
   );
 
-  const handlePipelineSelection = (value: string) => {
-    setSelectedPipelineId(value);
+  const handleEdgeSelection = (value: string) => {
+    setSelectedEdgeId(value);
   };
 
   const handleModalCancel = () => {
-    setSelectedPipelineId(undefined);
-    setShowAddPipelineModal(false);
+    setSelectedEdgeId(undefined);
+    setShowAddEdgeModal(false);
     setSelectedEdge({} as SelectedEdge);
-    setPipelineOptions([]);
+    setEdgeOptions([]);
   };
 
-  const onPipelineSelectionClear = () => {
-    setSelectedPipelineId(undefined);
-    setPipelineSearchValue('');
+  const onEdgeSelectionClear = () => {
+    setSelectedEdgeId(undefined);
+    setEdgeSearchValue('');
   };
 
   const handleModalSave = () => {
@@ -1029,14 +1026,13 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
         (ed) => ed.fromEntity === source && ed.toEntity === target
       );
 
-      const pipelineDetail = pipelineOptions.find(
-        (d) => d.id === selectedPipelineId
-      );
+      const edgeDetails = edgeOptions.find((d) => d.id === selectedEdgeId);
 
       const { newEdge, updatedLineageDetails } = getNewLineageConnectionDetails(
         selectedEdgeValue,
-        selectedPipelineId,
-        selectedEdge.data
+        selectedEdgeId,
+        selectedEdge.data,
+        (edgeDetails?.type as EntityType) ?? EntityType.PIPELINE
       );
 
       addLineageHandler(newEdge)
@@ -1051,13 +1047,13 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
                   pre.downstreamEdges,
                   updatedLineageDetails,
                   selectedEdge.data,
-                  pipelineDetail
+                  edgeDetails
                 ),
                 upstreamEdges: getUpdatedEdgeWithPipeline(
                   pre.upstreamEdges,
                   updatedLineageDetails,
                   selectedEdge.data,
-                  pipelineDetail
+                  edgeDetails
                 ),
               };
 
@@ -1074,7 +1070,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
                   animated: true,
                   data: {
                     ...edge.data,
-                    label: getEntityName(pipelineDetail),
+                    label: getEntityName(edgeDetails),
                     pipeline: updatedLineageDetails.pipeline,
                   },
                 };
@@ -1418,18 +1414,16 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
 
   const getSearchResults = async (value = '*') => {
     try {
-      const data = await searchData(
-        value,
-        1,
-        PAGE_SIZE,
-        '',
-        '',
-        '',
-        SearchIndex.PIPELINE
-      );
-      setPipelineOptions(
+      const data = await searchData(value, 1, PAGE_SIZE, '', '', '', [
+        SearchIndex.PIPELINE,
+        SearchIndex.STORED_PROCEDURE,
+      ]);
+      setEdgeOptions(
         data.data.hits.hits.map((hit) =>
-          getEntityReferenceFromPipeline(hit._source)
+          getEntityReferenceFromEntity(
+            hit._source,
+            hit._source.entityType as EntityType
+          )
         )
       );
     } catch (error) {
@@ -1587,10 +1581,10 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
   }, [selectedEdge, confirmDelete]);
 
   useEffect(() => {
-    if (pipelineSearchValue) {
-      getSearchResults(pipelineSearchValue);
+    if (edgeSearchValue) {
+      getSearchResults(edgeSearchValue);
     }
-  }, [pipelineSearchValue]);
+  }, [edgeSearchValue]);
 
   useEffect(() => {
     edgesRef.current = edges;
@@ -1726,16 +1720,16 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
         )}
 
         <AddPipeLineModal
-          pipelineOptions={pipelineOptions}
-          pipelineSearchValue={pipelineSearchValue}
-          selectedPipelineId={selectedPipelineId}
-          showAddPipelineModal={showAddPipelineModal}
-          onClear={onPipelineSelectionClear}
+          edgeOptions={edgeOptions}
+          edgeSearchValue={edgeSearchValue}
+          selectedEdgeId={selectedEdgeId}
+          showAddEdgeModal={showAddEdgeModal}
+          onClear={onEdgeSelectionClear}
           onModalCancel={handleModalCancel}
           onRemoveEdgeClick={handleRemoveEdgeClick}
           onSave={handleModalSave}
-          onSearch={(value) => setPipelineSearchValue(value)}
-          onSelect={handlePipelineSelection}
+          onSearch={(value) => setEdgeSearchValue(value)}
+          onSelect={handleEdgeSelection}
         />
       </div>
     </Card>

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -305,6 +305,7 @@
     "domain-type": "Domain Type",
     "downstream-depth": "Downstream Depth",
     "duration": "Duration",
+    "edge": "Edge",
     "edge-information": "Edge Information",
     "edge-lowercase": "edge",
     "edit": "Edit",
@@ -1391,6 +1392,7 @@
     "schedule-for-ingestion-description": "Scheduling can be set up at an hourly, daily, or weekly cadence. The timezone is in UTC.",
     "scheduled-run-every": "Scheduled to run every",
     "scopes-comma-separated": "Add the Scopes value, separated by commas",
+    "search-for-edge": "Search for Pipeline, StoredProcedures",
     "search-for-entity-types": "Search for Tables, Topics, Dashboards, Pipelines, ML Models, Glossary and Tags.",
     "search-for-ingestion": "Search for ingestion",
     "select-alert-type": "Please select a alert type",

openmetadata-ui/src/main/resources/ui/src/locale/languages/es-es.json

@@ -305,6 +305,7 @@
     "domain-type": "Domain Type",
     "downstream-depth": "Profundidad del flujo",
     "duration": "Duration",
+    "edge": "Edge",
     "edge-information": "Información de la arista",
     "edge-lowercase": "arista",
     "edit": "Editar",
@@ -1391,6 +1392,7 @@
     "schedule-for-ingestion-description": "La programación se puede configurar en una cadencia horaria, diaria o semanal. La zona horaria está en UTC.",
     "scheduled-run-every": "Programado para ejecutarse cada",
     "scopes-comma-separated": "Agrega el valor de ámbitos, separados por comas",
+    "search-for-edge": "Search for Pipeline, StoredProcedures",
     "search-for-entity-types": "Buscar Tablas, Topics, Dashboards, Pipelines, Modelos de ML, Glosarios y Etiquetas.",
     "search-for-ingestion": "Buscar orígenes de datos",
     "select-alert-type": "Please select a alert type",

openmetadata-ui/src/main/resources/ui/src/locale/languages/fr-fr.json

@@ -305,6 +305,7 @@
     "domain-type": "Domain Type",
     "downstream-depth": "Profondeur de l'aval",
     "duration": "Durée",
+    "edge": "Edge",
     "edge-information": "Informations d'Extrémité",
     "edge-lowercase": "extrémité",
     "edit": "Editer",
@@ -1391,6 +1392,7 @@
     "schedule-for-ingestion-description": "La programmation peut être configurée à une cadence horaire, quotidienne ou hebdomadaire. Le fuseau horaire est en UTC.",
     "scheduled-run-every": "Programmer pour etres exécuté tous les",
     "scopes-comma-separated": "Liste de scopes séparé par une virgule.",
+    "search-for-edge": "Search for Pipeline, StoredProcedures",
     "search-for-entity-types": "Rechercher des Tables, Topics, Tableaux de Bord, Pipelines et Modéles d'IA",
     "search-for-ingestion": "Rechercher une ingestion",
     "select-alert-type": "Selectionner un type d'alerte",

openmetadata-ui/src/main/resources/ui/src/locale/languages/ja-jp.json

@@ -305,6 +305,7 @@
     "domain-type": "Domain Type",
     "downstream-depth": "Downstream Depth",
     "duration": "Duration",
+    "edge": "Edge",
     "edge-information": "エッジの情報",
     "edge-lowercase": "エッジ",
     "edit": "編集",
@@ -1391,6 +1392,7 @@
     "schedule-for-ingestion-description": "Scheduling can be set up at an hourly, daily, or weekly cadence. The timezone is in UTC.",
     "scheduled-run-every": "Scheduled to run every",
     "scopes-comma-separated": "スコープの値をカンマで区切って追加",
+    "search-for-edge": "Search for Pipeline, StoredProcedures",
     "search-for-entity-types": "テーブル、トピック、ダッシュボード、パイプライン、MLモデルの検索。",
     "search-for-ingestion": "Search for ingestion",
     "select-alert-type": "Please select a alert type",